CHAPTER 01 업계를 선도하는 웹 사이트 제작 툴, 드림위버 CS5와의 첫 만남
UNIT 01 새로워진 드림위버 CS5 살펴보고 내 컴퓨터에 설치하기
|간략개요| 드림위버 CS5의 새로운 기능 알아보기
|간단실습| 드림위버 CS5의 시험 버전 다운로드 받기
|간단실습| 내 컴퓨터에 드림위버 CS5 시험 버전 설치하기
|TIP| 드림위버 CS5 설치를 위한 컴퓨터 사양 알아보기
UNIT 02 드림위버 CS5의 화면 구성 이해하고 사용자 작업 환경 설정하기
|간략개요| 드림위버 CS5의 화면 구성과 레이아웃, 뷰 모드 살펴보기
|간단실습| 드림위버 CS5의 편집 모드 살펴보고 레이아웃 조정하기
|TIP| 시작 페이지 대화상자(Welcome Screen) 살펴보기
|간단실습| 드림위버 CS5의 패널 분리/병합/이동하기
UNIT 03 웹 사이트 제작을 위한 사이트 정의와 폴더/파일 관리하기
|간략개요| 사이트 정의의 필요성 이해하기
|간단실습| 예제 파일 폴더로 사이트 정의하기
|TIP| 정의한 사이트 수정하기
|간단실습| 새로운 파일과 폴더 생성하고 열기
|TIP| [FILES] 패널을 이용하여 파일 열기
|TIP| [Welcome Screen] 대화상자를 이용하여 새 파일 만들기
|TIP| 최근 작업한 파일 열기
UNIT 04 화면 조정 기능 살펴보고 웹브라우저에서 문서 확인하기
|간략개요| 문서 편집에 도움을 주는 화면 조정 기능 알아보기
|간단실습| 라이브 뷰 모드와 웹브라우저에서 문서 확인하고 확대/축소/패닝하기
|간단실습| 안내선과 격자 사용하기
|TIP| 휴대용 장치에서 페이지 미리 보기
|POWER UNIT| 라이브 뷰 내비게이션 막대 이용하기
CHAPTER 02 웹 문서에 텍스트, 이미지, 멀티미디어 파일 삽입하기
UNIT 01 텍스트 문단 입력하고 문서 환경 설정하기
|간략개요| 텍스트 문단 입력 방법과 환경 설정 방법 익히기
|간단실습| 문단 편집하고 목록 문단 만들기
|TIP| 카피라이트 기호(ⓒ) 입력하기
|TIP| 키보드를 이용한 특수 문자 입력하기
|간단실습| 문서 전체의 텍스트 스타일과 배경, 여백 설정하기
|TIP| [Page Properties] 대화상자의 세부 옵션 살펴보기
|TIP| 텍스트와 관련된 [PROPERTIES] 패널의 세부 옵션 살펴보기
|POWER UNIT| 목록 문단의 기호 변경하기
UNIT 02 이미지 삽입하고 편집하기
|간략개요| 웹 문서에 삽입할 수 있는 웹용 이미지 포맷 이해하기
|간단실습| 이미지 삽입하고 관련 속성 설정하기
|TIP| 이미지의 정렬을 위한 [Align] 속성 값 살펴보기
|간단실습| 삽입한 이미지의 크기 조정하고 보정하기
|TIP| 이미지에서 필요한 부분만 자르기
|TIP| 이미지와 관련된 [PROPERTIES] 패널 살펴보기
|POWER UNIT| 포토샵 프로그램과 연계하여 이미지 편집하기
UNIT 03 플래시 무비와 사운드 파일 삽입하기
|간략개요| 플래시 무비와 사운드 파일의 종류 알아보기
|간단실습| 플래시 무비 삽입하고 속성 설정하기
|TIP| 플래시 무비와 관련된 [PROPERTIES] 패널 살펴보기
|간단실습| 사운드 파일 삽입하고 속성 설정하기
|TIP| 플러그인과 관련된 [PROPERTIES] 패널 살펴보기
|POWER UNIT| 플래시 비디오(FLV) 파일 변환하고 삽입하기
활|용|실|습
CHAPTER 03 다양한 하이퍼링크 기능으로 웹 문서 연결하기
UNIT 01 텍스트와 이미지에 하이퍼링크 지정하기
|간략개요| 다양한 하이퍼링크 지정과 타깃 이해하기
|간단실습| 텍스트와 이미지에 하이퍼링크 지정하기
|간단실습| 하이퍼링크 텍스트 스타일 변경하기
|TIP| [Page Properties] 대화상자의 [Links[CSS]] 카테고리 살펴보기
UNIT 02 네임 앵커로 하이퍼링크 지정하기
|간략개요| 네임 앵커 이해하기
|간단실습| 문서 최상단으로 자동 이동하는 네임 앵커 지정하기
|간단실습| 지정한 위치로 자동 이동하는 네임 앵커 기능 활용하기
|TIP| 다른 문서에 지정된 네임 앵커 위치 삽입하기
UNIT 03 이미지 맵으로 하이퍼링크 지정하기
|간략개요| 이미지 맵 기능 이해하기
|간단실습| 이미지 맵으로 하이퍼링크 지정하기
|TIP| 지정된 이미지 맵 영역 편집하기
|간단실습| 다른 문서에 이미지 맵 복사하여 사용하기
활|용|실|습
CHAPTER 04 테이블 기능으로 데이터 정리와 문서 레이아웃 구현하기
UNIT 01 테이블 삽입하고 셀 편집하기
|간략개요| 테이블의 구성 요소 이해하기
|간단실습| 테이블 삽입하고 데이터 입력하기
|TIP| [Table] 대화상자 살펴보기
|TIP| 삽입된 테이블의 행 수와 열 수 변경하기
|간단실습| 삽입된 테이블의 셀 편집하기
|TIP| [INSERT] 패널을 이용한 행과 열 추가하기
|TIP| 셀 나누기
|POWER UNIT| 테이블과 셀의 다양한 선택 방법 익히기
|POWER UNIT| 셀 크기를 ‘%’, ‘px’ 단위로 변경 및 삭제하기
UNIT 02 테이블과 셀 꾸미기
|간략개요| 테이블과 셀에 관련된 속성 알아보기
|간단실습| 테이블과 셀에 관련된 여백 설정과 정렬 지정하기
|TIP| 테이블에 관련된 [PROPERTIES] 패널 살펴보기
|TIP| 셀에 관련된 [PROPERTIES] 패널 살펴보기
|간단실습| 셀의 배경 색상과 입력 텍스트의 속성 변경하기
|POWER UNIT| 텍스트 파일을 테이블 구조로 변환하기
|TIP| 드림위버에서 임포트한 텍스트 형식의 파일 구조 살펴보기
|POWER UNIT| 엑셀 파일을 테이블 구조로 변환하기
UNIT 03 테이블을 이용한 레이아웃 구현하기
|간략개요| 테이블을 이용한 레이아웃 구성 작업 이해하기
|간단실습| 테두리가 없는 테이블을 이용한 레이아웃 구현하기
|간단실습| 셀 배경 이미지 지정과 중첩 테이블을 이용한 레이아웃 구현하기
|POWER UNIT| 확장 테이블 모드(Expanded Tables Mode)를 이용하여 테이블 편집하기
활|용|실|습
CHAPTER 05 스타일시트로 세련된 웹 문서 디자인하기
UNIT 01 클래스 정의하고 적용하기
|간략개요| CSS 이해하고 클래스 선택자의 특징 알아보기
|간단실습| 클래스 방식의 선택자 정의와 적용하기
|TIP| [CSS STYLES] 패널 살펴보기
|TIP| [CSS Rule definition] 대화상자의 [Type] 카테고리 살펴보기
|간단실습| 정의된 클래스 선택자의 속성 변경하기
|TIP| [CSS Rule definition] 대화상자의 [Background] 카테고리 살펴보기
|TIP| [CSS Rule definition] 대화상자의 [Box] 카테고리 살펴보기
|TIP| [CSS Rule definition] 대화상자의 [Border] 카테고리 살펴보기
UNIT 02 아이디 방식의 선택자 등록하고 적용하기
|간략개요| 아이디 방식의 선택자 특징 알아보기
|간단실습| 테이블에 ID 정의하고 디자인하기
|간단실습| DIV 태그에 ID 정의하고 디자인하기
UNIT 03 태그 재정의 방식으로 CSS 적용하기
|간략개요| 태그 재정의 방식의 선택자 특징 알아보기
|간단실습| BODY 태그에 CSS 적용하기
|간단실습| 목록 문단 관련 태그에 CSS 적용하기
|TIP| [CSS Rule definition] 대화상자의 [List] 카테고리 살펴보기
|POWER UNIT| 인라인 방식으로 CSS 적용하기
UNIT 04 롤오버 텍스트 하이퍼링크 메뉴 만들기
|간략개요| 텍스트 하이퍼링크를 위한 선택자 이해하기
|간단실습| 상태 변화에 따라 디자인이 변경되는 텍스트 하이퍼링크 구현하기
|간단실습| 컴파운드 선택자를 이용한 다중 텍스트 하이퍼링크 메뉴 구현하기
UNIT 05 외부 CSS 파일에 선택자 등록하여 적용하기
|간략개요| 외부 CSS 파일 방식으로 CSS 적용 시 특징과 관련 과정 알아보기
|간단실습| 외부 CSS 파일로 선택자 등록하여 적용하기
|TIP| 외부 CSS 파일이 연결된 [CSS STYLES] 패널 살펴보기
|간단실습| CSS 파일 연결하여 공통으로 여러 문서에 사용하기
|POWER UNIT| 문서 내부에 등록된 선택자를 자동으로 외부 CSS 파일로 이동시키기
활|용|실|습
CHAPTER 06 AP Div로 자유로운 문서 레이아웃 구현하기
UNIT 01 AP Div 특징 이해하고 삽입하기
|간략개요| AP Div의 특징 이해하기
|간단실습| AP Div 삽입/선택/이동하기
|TIP| 드래그해서 AP Div 삽입하기
|TIP| [AP ELEMENTS] 패널을 이용하여 선택하기
|간단실습| 여러 개의 AP Div 편집하기
UNIT 02 AP Div를 이용한 레이아웃 배치하기
|간략개요| AP Div에 관련된 속성 알아보기
|간단실습| AP Div의 중첩 순서 조정하기
|간단실습| AP Div에 Overflow 속성 제어하기
|POWER UNIT| [Tracing Image] 기능을 이용하여 레이아웃 배치하기
|POWER UNIT| AP Div 구조를 테이블 구조로 서로 변환하기
UNIT 03 AP Div를 이용한 동적 내비게이션과 팝업 창 효과 적용하기
|간략개요| Show-Hide Element 비헤이비어와 AP Div의 Vis 속성 알아보기
|간단실습| 특정 위치에 팝업 창 효과 적용하기
|간단실습| 롤오버 상태에 따라 서브 메뉴 표시하기
|POWER UNIT| Drag AP Element 비헤이비어를 이용하여 드래그 효과 적용하기
활|용|실|습
CHAPTER 07 회원 가입, 로그인, 게시판에 사용되는 폼 문서 만들기
UNIT 01 폼 정의와 텍스트 필드 삽입하기
|간략개요| 폼 문서 이해하고 텍스트 필드의 종류 알아보기
|간단실습| 테이블을 감싸는 폼 정의하기
|간단실습| 텍스트 필드 삽입하고 CSS로 디자인하기
UNIT 02 텍스트 영역 필드, 파일 필드, 이미지 필드 삽입하기
|간략개요| 텍스트 영역 필드, 파일 필드, 이미지 필드의 특징 알아보기
|간단실습| 이미지 필드와 파일 필드 삽입하기
|간단실습| 텍스트 영역 필드 삽입하고 CSS로 디자인하기
UNIT 03 라디오 버튼, 체크 박스, 필드 세트 삽입하기
|간략개요| 라디오 버튼, 체크 박스, 필드 세트의 특징 알아보기
|간단실습| 라디오 그룹으로 라디오 버튼 삽입하기
|TIP| [Radio Group] 대화상자 살펴보기
|간단실습| 필드 세트 구성하고 체크 박스 그룹으로 체크 박스 삽입하기
|TIP| [Checkbox Group] 대화상자 살펴보기
UNIT 04 리스트 메뉴와 폼 버튼 삽입하기
|간략개요| 리스트 메뉴와 폼 버튼의 특징 알아보기
|간단실습| 리스트 메뉴 삽입하고 CSS로 디자인하기
|TIP| [List Values] 대화상자 살펴보기
|TIP| 높이와 스크롤바가 표시되는 리스트 메뉴 형태로 변경하기
|간단실습| 폼 버튼 삽입하고 CSS로 디자인하기
|POWER UNIT| Validate Form 비헤이비어로 텍스트 필드의 유효성 검사하기
활|용|실|습
CHAPTER 08 프레임, 아이프레임, 템플릿으로 홈페이지 제작하기
UNIT 01 프레임 구조 만들기
|간략개요| 프레임 구조와 관련 속성 알아보기
|간단실습| 프레임 구조 만들고 파일 연결하기
|간단실습| 프레임 크기 조정하고 전체 프레임 문서 저장하기
|TIP| 프레임 크기인 ‘1 Relative’의 의미 이해하기
|POWER UNIT| 메뉴 명령을 이용한 프레임 구조 만들기
UNIT 02 프레임 구조에서 하이퍼링크와 타깃 지정하기
|간략개요| 프레임 구조에서의 하이퍼링크와 타깃 이해하기
|간단실습| 특정 프레임으로 하이퍼링크와 타깃 연결하기
|간단실습| 구성된 여러 개의 프레임으로 동시에 여러 개의 하이퍼링크와 타깃 지정하기 |POWER UNIT| 하이퍼링크의 기본 타깃 지정하기
UNIT 03 아이프레임 삽입하고 하이퍼링크와 타깃 지정하기
|간략개요| 아이프레임의 특징과 구조 이해하기
|간단실습| 저장된 문서를 아이프레임으로 삽입하기
|간단실습| 아이프레임 구조에서의 하이퍼링크와 타깃 지정하기
|POWER UNIT| 배경이 투명한 아이프레임 삽입하기
|POWER UNIT| 아이프레임의 스크롤바 색상 설정하기
|TIP| 색상 스크롤바 소스 살펴보기
UNIT 04 템플릿으로 빠르게 홈페이지 만들기
|간략개요| 템플릿을 이용한 홈페이지 제작 과정 알아보기
|간단실습| 템플릿 페이지 제작하고 편집 영역 지정하기
|간단실습| 템플릿 적용하고 데이터 삽입하기
|POWER UNIT| [Assets] 패널을 이용한 템플릿 적용 문서 만들기
|TIP| [Assets] 패널의 [Templates] 명령 살펴보기
|POWER UNIT| 템플릿 업데이트하여 적용 템플릿 문서 변경하기
활|용|실|습
CHAPTER 09 비헤이비어, 롤오버 이미지, 점프 메뉴로 이벤트에 따라 동적 효과 내기
UNIT 01 Popup Message와 Set Text 비헤이비어로 텍스트 메시지 표시하기
|간략개요| 비헤이비어에 대한 이해와 Popup Message, Set Text 비헤이비어 알아보기
|간단실습| Popup Message 비헤이비어로 경고음과 함께 메시지 창 출력하기
|TIP| 적용한 비헤이비어 삭제와 수정하기
|간단실습| Set Text 비헤이비어로 웹브라우저의 상태 표시줄에 메시지 출력하기
UNIT 02 Open Browser Window와 Call Javascript 비헤이비어로 팝업 창 열고 닫기
|간략개요| Call Javascript와 Open Browser Window 비헤이비어 알아보기
|간단실습| Call Javascript 비헤이비어로 웹브라우저 창 자동 닫기
|간단실습| Open Browser Window 비헤이비어로 팝업 창 표시하기
|POWER UNIT| 소스 편집해서 팝업 창의 위치 조정하기
|POWER UNIT| 자동 인쇄 기능이 추가된 버튼 만들기
UNIT 03 Swap Image와 Change Property 비헤이비어로 이미지 교체하고 속성 변경하기
|간략개요| Swap Image와 Change Property 비헤이비어 알아보기
|간단실습| Swap Image 비헤이비어로 롤오버 갤러리 만들기
|간단실습| Change Property 비헤이비어로 테이블의 셀 색상 제어하기
UNIT 04 Effect 비헤이비어로 트랜지션 효과 적용하기
|간략개요| Effect 관련 비헤이비어 알아보기
|간단실습| 다양한 애니메이션 효과 나타내기
|간단실습| Grow/Shrink 비헤이비어로 팝업 창 효과 내기
UNIT 05 점프 메뉴와 롤오버 이미지 삽입하기
|간략개요| 점프 메뉴와 롤오버 이미지 기능 알아보기
|간단실습| 점프 메뉴 삽입하고 디자인 변경하기
|TIP| 점프 메뉴 수정하기
|간단실습| 이벤트에 따라 이미지가 변경되는 롤오버 이미지 삽입하기
활|용|실|습
CHAPTER 10 Spry 프레임 워크를 이용한 동적 패널, 내비게이션, 테이블 구현하기
UNIT 01 Spry Tabbed Panels 위젯으로 동적 패널 삽입하기
|간략개요| Spry Tabbed Panels 위젯 특징 알아보기
|간단실습| Spry Tabbed Panels 위젯으로 클릭 시 교체되는 패널 삽입하기
|간단실습| Spry Tabbed Panels 위젯의 디자인 수정하기
UNIT 02 Spry Collapsible Panel 위젯과 Spry Accordion 위젯으로 동적 패널 삽입하기
|간략개요| Spry Accordion 위젯과 Spry Collapsible Panel 위젯의 특징 알아보기
|간단실습| Spry Accordion 위젯으로 확장/축소되는 동적 패널 만들기
|TIP| Spry Accordion 위젯의 디자인 변경하기
|간단실습| Spry Collapsible Panel 위젯으로 클릭할 때마다 확장/축소되는 패널 만들기
UNIT 03 Spry Menu Bar 위젯으로 동적 내비게이션 삽입하기
|간략개요| Spry Menu Bar 위젯의 특징 알아보기
|간단실습| Spry Menu Bar 위젯으로 클릭 시 확장되는 내비게이션 삽입하기
|간단실습| Spry Menu Bar 위젯 디자인 수정하기
UNIT 04 Spry Data Set 위젯으로 동적 테이블 만들기
|간략개요| Spry Data Set 위젯의 특징 알아보기
|간단실습| Spry Data Set 위젯으로 테이블 데이터 호출하기
|간단실습| Spry Data Set 위젯의 디자인 수정하기
|POWER UNIT| Spry Data Set 위젯에 연결된 데이터 테이블 업데이트하기
활|용|실|습
CHAPTER 11 웹 계정 만들고 홈페이지 출판 및 운영하기
UNIT 01 웹 출판을 위한 웹 계정, 도메인 준비하기
|간략개요| 웹 계정과 도메인 알아보기
|간단실습| 무료 호스팅 서비스 신청하기
|간단실습| 신청한 웹 계정 정보 확인하기
UNIT 02 알FTP 프로그램을 이용한 출판 및 운영하기
|간략개요| 알FTP의 특징과 화면 구성 알아보기
|간단실습| 알FTP에 웹 계정 정보 등록하기
|간단실습| 웹 계정에 시작 페이지 업로딩하고 결과 확인하기
UNIT 03 드림위버의 FTP 기능으로 출판 및 운영하기
|간략개요| 드림위버에서의 웹 출판을 위한 [Files] 패널 알아보기
|간단실습| FTP 기능을 사용하기 위한 사이트 정의하기
|간단실습| [FILES] 패널로 웹 계정에 출판하기
활|용|실|습
CHAPTER 12 드림위버에서 HTML과 CSS 하드 코딩하기
UNIT 01 HTML 구조 이해하고 주석문, 문단, DIV에 관련된 태그 익히기
|간략개요| 코딩 환경 설정과 HTML 구조, 주석, 문단, DIV 태그 형식과 속성 알아보기
|간단실습| 문서 구조와 주석, Heading 태그 익히기
|TIP| [DocType]의 종류 알아보기
|간단실습| P, BR, DIV, EM, STRONG 태그 익히기기
|POWER UNIT| 사용자 단축키 설정하기
UNIT 02 목록 문단과 정의에 관련된 태그 익히기
|간략개요| O, UL, LI, DL, DT, DD 태그 알아보기
|간단실습| OL, UL, LI 태그 익히기
|TIP| 순서 목록과 블릿 목록 앞의 숫자 형식과 기호 변경하기
|간단실습| DL, DT, DD 태그 익히기
UNIT 03 수평선, 이미지, 하이퍼링크에 관련된 태그 익히기
|간략개요| HR, IMG, A 태그 형식과 속성 알아보기
|간단실습| HR, IMG 태그 익히기
|간단실습| A 태그 익히기
UNIT 04 테이블과 프레임에 관련된 태그 익히기
|간략개요| 테이블, 프레임 관련 태그 형식과 속성 알아보기
|간단실습| 테이블 태그 익히기
|간단실습| 프레임 관련 태그 익히기
|TIP| 아이프레임 관련 태그 익히기
UNIT 05 폼과 관련된 태그 익히기
|간략개요| 폼 관련 태그 형식과 속성 알아보기
|간단실습| 폼 정의, 텍스트 필드, 텍스트 영역, 이미지 필드, 파일 필드 태그 익히기
|간단실습| 라디오 버튼, 체크 박스, 셀렉트 메뉴, 폼 버튼 관련 태그 익히기
UNIT 06 CSS 선언과 다양한 선택자 이해하기
|간략개요| CSS 선언과 선택자 방식 이해하기
|간단실습| 태그 선택자 익히기
|간단실습| 클래스 선택자 익히기
|간단실습| 아이디 선택자 익히기
UNIT 07 다양한 CSS 속성 익히기
|간략개요| CSS 속성 알아보기
|간단실습| 하이퍼링크, 목록 문단에 CSS 적용하기
|간단실습| 테이블과 폼에 CSS 적용하기
활|용|실|습
CHAPTER PLUS 01 인클루드, 그누보드, 고도몰 솔루션으로 실전 웹사이트 만들기
UNIT 01 인클루드를 이용한 PHP 웹사이트 만들기
|간략개요| PHP 문서의 이해와 인클루드 기능 알아보기
|간단실습| 인클루드로 사용할 공통 메뉴, 푸터 파일 만들기
|간단실습| 인클루드로 파일 삽입하고 웹 계정에서 확인하기
UNIT 02 그누보드 설치와 게시판 만들기
|간략개요| 그누보드의 기능과 설치 과정 알아보기
|간단실습| 그누보드 다운로드 받아 웹 계정에 설치하기
|간단실습| 그룹 생성하고 게시판 추가하기
UNIT 03 그누보드에 디자인 적용 및 아이프레임으로 연결하기
|간략개요| 그누보드 게시판의 관리 항목 및 디자인의 변경 과정 알아보기
|간단실습| 그누보드 게시판을 중심으로 삽입되는 상단 파일과 하단 파일 만들기
|간단실습| 노프레임 상태로 그누보드 게시판 꾸미기
|간단실습| 그누보드 게시판을 아이프레임 구조에서 연결하기
UNIT 04 고도몰 솔루션을 이용한 쇼핑몰 사이트 만들기(1)
|간략개요| 쇼핑몰 솔루션의 종류와 제작 과정 이해하기
|간단실습| 고도몰 e나무 쇼핑몰 신청하기
|간단실습| 관리자 모드의 이해와 기본 정보, 스킨 설정하기
|TIP| CUSTOMER CENTER에 표시된 텍스트 확인하기
|TIP| 스킨 복사하기
|간단실습| 로고와 배너 이미지 변경하기
|간단실습| 쇼핑몰 메인 페이지의 로고 위치 조정하기
|간단실습| 드림위버에서 제작한 문서로 회사 소개 페이지 변경하기
|POWER UNIT| 공사중 페이지 등록하기
UNIT 05 고도몰 솔루션을 이용한 쇼핑몰 사이트 만들기(2)
|간략개요| 상품 등록과 진열 과정 알아보기
|간단실습| 카테고리 생성과 상품 등록하기
|TIP| 카테고리 순서 변경하기
|간단실습| 메인 페이지에 상품 진열하기
|간단실습| 팝업 창 관리하기
|간단실습| 새 페이지 만들어 메인 이미지 배너와 연결하기
|POWER UNIT| 상품 주문 과정 확인하기
CHAPTER PLUS 02 웹 표준 문서 제작과 CSS 레이아웃, XHTML, HTML5 구현하기 (e-book)
UNIT 01 웹 표준 문서를 위한 드림위버의 기능 살펴보기
UNIT 02 CSS 레이아웃 구현하기(1)
UNIT 03 CSS 레이아웃 구현하기(2)
UNIT 04 HTML5와 CSS 문서 만들기