<b>Chapter 01 최고의 웹사이트 제작 툴, 드림위버 CS6 시작하기 </b><br/>Unit 01 드림위버의 특징 이해하고 화면 구성 알아보기 <br/>|간단개요| 드림위버의 특징 이해하고 화면 구성 알아보기<br/>|간단실습| 드림위버 CS6 시험판 설치하고 실행하기 <br/>|간단실습| 드림위버 CS6의 편집 모드 살펴보고 레이아웃 조정하기<br/> Unit 02 웹사이트 제작을 위한 사이트 정의하고 웹브라우저에서 결과 확인하기 <br/>|간단개요| 사이트 정의와 문서 편집에 도움을 주는 화면 조정 기능 알아보기 <br/>|간단실습| 부록 CD의 예제 파일 폴더로 사이트 정의하기 <br/>|간단실습| 파일 관리와 라이브 모드 및 다양한 웹브라우저에서 문서 확인하기<br/><br/><b>Chapter 02 웹 문서에 콘텐츠 삽입하기</b><br/>Unit 01문서 환경 설정하고 텍스트와 이미지 삽입하기<br/>|간단개요| 문서 환경 설정 방법과 텍스트 및 이미지 삽입 방법 알아보기 <br/>|간단실습| 문서 환경 설정하고 제목/일반 문단 편집하기<br/>|간단실습| 목록 문단과 정의 문단 만들기<br/>|간단실습| 이미지 삽입하고 편집하기<br/>Unit 02테이블 삽입하고 셀 편집하기<br/>|간단개요| 테이블 기능 이해하고 관련 속성 알아보기<br/>|간단실습| 테이블 삽입하고 데이터 입력하기<br/>|간단실습| 삽입된 테이블의 셀 편집하기<br/>Unit 03폼 정의하고 폼 컨트롤 요소 삽입하기<br/>|간단개요| 폼 문서 이해하고 폼 컨트롤 요소 알아보기<br/>|간단실습| 폼 정의와 폼 컨트롤 요소 삽입하기<br/>|간단실습| 항목 선택과 관련된 폼 컨트롤 요소 삽입하기<br/>Unit 04하드 코딩으로 HTML 요소 삽입하기<br/>|간단개요| 코딩 환경 설정하고 HTML 구조 및 태그 요소 알아보기 <br/>|간단실습| 주석, Heading, P, BR, DIV, EM, STRONG 태그 익히기<br/>|간단실습| OL, UL, LI, DL, DT, DD, HR, IMG, A 태그 익히기<br/>|간단실습| 테이블 태그 익히기<br/>|간단실습| 폼 관련 태그 요소 익히기<br/>|POWER UNIT| 사용자 단축키 설정하기<br/>|활용실습| <br/><br/><b>Chapter 03 다양한 하이퍼링크, 비헤이비어, 아이프레임으로 웹 문서와 콘텐츠 연결하기</b><br/>Unit 01텍스트와 이미지에 다양한 하이퍼링크 지정하기<br/>|간단개요| 하이퍼링크 지정과 타깃, 네임 앵커, 이미지 맵 기능 알아보기<br/>|간단실습| 텍스트와 이미지에 하이퍼링크 지정하고 하이퍼링크 스타일 변경하기<br/>|간단실습| 지정한 위치로 자동 이동하는 네임 앵커 기능 활용하기<br/>|간단실습| 이미지 맵으로 하이퍼링크 지정하기<br/>Unit 02아이프레임 삽입하고 하이퍼링크와 타깃 지정하기<br/>|간단개요| 아이프레임의 특징과 구조 알아보기<br/>|간단실습| 저장된 문서를 아이프레임으로 삽입하기<br/>|간단실습| 아이프레임 구조에서의 하이퍼링크와 타깃 지정하기<br/>Unit 03점프 메뉴, 롤오버 이미지, 갤러리 삽입하기<br/>|간단개요| 비헤이비어 이해하고 점프 메뉴, 롤오버 이미지, Go To URL, Swap Image 비헤이비어 알아보기<br/>|간단실습| 이벤트에 따라 이미지가 변경되는 롤오버 이미지 삽입하기<br/>|간단실습| 점프 메뉴 삽입과 폼 버튼에 하이퍼링크 걸기<br/>|간단실습| Swap Image 비헤이비어로 롤오버 갤러리 만들기<br/>Unit 04Open Browser Window, Call Javascript, Show-Hide Element 비헤이비어로 팝업 창 효과 내기<br/>|간단개요| Call Javascript, Open Browser Window, Show-Hide Element 비헤이비어 알아보기<br/>|간단실습| Call Javascript 비헤이비어로 웹브라우저 창 자동 닫기<br/>|간단실습| Open Browser Window 비헤이비어로 팝업 창 표시하기<br/>|간단실습| Show-Hide Element 비헤이비어로 특정 위치에 팝업 창 효과 적용하기|POWER UNIT| Popup Message 비헤이비어로 경고음과 함께 메시지 창 출력하기<br/>|활용실습| <br/><br/><b>Chapter 04 CSS로 콘텐츠 디자인하기</b><br/>Unit 01태그, 아이디, 클래스 선택자 등록하고 CSS 적용하기<br/>|간단개요| CSS 이해하고 태그, 아이디, 클래스 선택자 특징과 적용 방식 알아보기|간단실습| BODY 태그 요소에 태그 선택자 등록하여 문서 전체의 스타일 지정하기|간단실습| div 태그 요소에 ID 정의하고 디자인하기<br/>|간단실습| 클래스 정의하고 특정 문단에 CSS 적용하기<br/>|POWER UNIT| [CSS Rule definition] 대화상자 살펴보기<br/>Unit 02슈도 클래스와 슈도 엘리먼트 선택자 등록하고 CSS 적용하기<br/>|간단개요| 슈도 클래스와 슈도 엘리먼트 선택자 특징과 적용 방식 알아보기<br/>|간단실습| 상태 변화에 따라 디자인이 변경되는 하이퍼링크 텍스트 메뉴 구현하기|간단실습| 문단의 첫 줄 첫 글자에 디자인 적용하기<br/>Unit 03전체, 자손, 그룹 선택자 등록하고 CSS 적용하기<br/>|간단개요| 전체, 컴파운드, 그룹 선택자 특징과 적용 방식 알아보기<br/>|간단실습| 전체 선택자 이용해서 HTML 태그 요소 전체에 디자인 적용하기<br/>|간단실습| 자손 선택자로 영역별 목록과 하이퍼링크 디자인 적용하기<br/>|간단실습| 그룹 선택자로 제목 문단, 정의 문단에 디자인 적용하기<br/>Unit 04외부 CSS 파일에 선택자 등록하여 CSS 적용하기<br/>|간단개요| 외부 CSS 파일 방식의 특징과 적용 과정 알아보기<br/>|간단실습| 외부 CSS 파일로 선택자 등록하여 CSS 적용하기<br/>|간단실습| CSS 파일 연결하여 공통으로 여러 문서에 사용하기<br/>Unit 05하드 코딩으로 CSS 문법 익히고 디자인 적용하기<br/>|간단개요| 위치에 따른 CSS 적용 방식의 이해와 선택자 및 속성과 관련된 문법 알아보기|간단실습| 인라인 방식으로 CSS 적용하기<br/>|간단실습| style 태그 사용해서 선택자 등록하고 CSS 적용하기<br/>|간단실습| 외부 파일 방식으로 선택자 등록하고 CSS 적용하기<br/>|활용실습| <br/><br/><b>Chapter 05 CSS 레이아웃 구현하기 </b><br/>Unit 01float와 clear 속성을 이용한 부유 레이아웃 구현하기<br/>|간단개요| CSS 레이아웃 이해하고 부유 레이아웃과 관련된 속성과 관련 값 알아보기 |간단실습| 픽셀 단위로 2단 칼럼 배치하고 디자인 꾸미기<br/>|간단실습| 퍼센트 단위로 3단 칼럼 배치하고 디자인 꾸미기<br/>|간단실습| 좌우 가로로 배치되는 롤오버 탭 메뉴 만들기<br/>Unit 02position 속성을 이용한 레이아웃 배치하기<br/>|간단개요| Position 속성을 이용한 레이아웃 특징과 관련 값 알아보기<br/>|간단실습| 절대 좌표 값으로 지정되는 Absolute Position을 이용한 레이아웃 배치하기|간단실습| 스크롤에 상관없이 위치를 고정시키는 Fixed Position을 이용한 레이아웃 배치하기<br/>|간단실습| 상대 좌표 값으로 지정되는 Relative Position을 이용한 레이아웃 배치하기<br/>Unit 03display 속성을 이용한 레이아웃 구현하기<br/>|간단개요| display 속성과 관련 값 알아보기<br/>|간단실습| 글자 대신 이미지 대체하기<br/>|간단실습| 롤오버 시 길이가 늘어나는 가로 가변의 내비게이션 만들기<br/>|간단실습| display 속성을 이용한 폼 문서 레이아웃 만들기<br/>Unit 04드림위버에서 제공하는 CSS 레이아웃 기능 이용하기<br/>|간단개요| 샘플 레이아웃을 이용한 문서 제작 과정 알아보기<br/>|간단실습| 샘플 레이아웃 선택하고 내용 입력하기<br/>|간단실습| 전체 레이아웃 디자인 수정하기<br/>|간단실습| 내비게이션과 내용 상자 디자인 수정하기<br/>|간단실습| 모서리가 둥근 탭 메뉴 디자인 수정하기<br/>Unit05템플릿을 이용한 공통 레이아웃 디자인 등록과 적용하기<br/>|간단개요| 템플릿을 이용한 홈페이지 제작 과정 알아보기<br/>|간단실습| 템플릿 페이지 디자인 선택하고 템플릿으로 등록하기<br/>|간단실습| 템플릿 레이아웃 디자인 편집하기<br/>|간단실습| 템플릿 적용하여 문서 제작하기<br/>|간단실습| 템플릿 업데이트하기<br/>|활용실습| <br/><br/><b>Chapter 06 인클루드, CGI, 웹 출판 서비스 이용하기 </b><br/>Unit 01웹 출판을 위한 웹 계정 준비하고 FTP 이용하기<br/>|간단개요| 웹 출판을 위한 준비 사항 알아보기<br/>|간단실습| 호스팅 서비스 신청하고 웹 계정 정보 확인하기<br/>|간단실습| 파일질라 프로그램으로 웹 계정에 업로딩하고 결과 확인하기<br/>|간단실습| 드림위버의 FTP 기능 이용하기<br/>Unit 02인클루드를 이용한 PHP 웹사이트 만들기<br/>|간단개요| PHP 문서의 이해와 인클루드 기능 알아보기<br/>|간단실습| 인클루드로 사용할 헤더와 푸터 파일 만들기<br/>|간단실습| 인클루드 사용하여 PHP 문서로 저장하고 웹 계정에서 확인하기<br/>Unit 03블루웹에서 제공되는 폼메일, 게시판 서비스 이용하기<br/>|간단개요| CGI 서비스 알아보기<br/>|간단실습| 블루웹의 게시판 서비스로 공지사항 게시판 삽입하기<br/>|간단실습| 블루웹의 폼메일 서비스로 문의 사항 메일 받기<br/>|활용실습| <br/><br/><b>Chapter 07 HTML5, CSS3, 미디어쿼리를 이용한 반응형 웹디자인 구현하기</b><br/>Unit 01HTML5 문서 제작하기<br/>|간단개요| HTML5 이해하고 드림위버의 HTML5 문서 제작 지원 기능 알아보기 |간단실습| HTML5 문서 제작과 시맨틱 태그 이용하기411<br/>|간단실습| 시맨틱 태그에 CSS 디자인 적용하고 HTML5 지원 웹브라우저에서 확인하기<br/>|간단실습| HTML5가 지원되지 않는 웹브라우저에서 문제 해결하기 <br/>Unit 02CSS3 선택자와 속성 이용하기 <br/>|간단개요| CSS3의 특징과 새로 추가된 선택자와 속성 알아보기<br/>|간단실습| CSS3의 다양한 선택자 이용하기<br/>|간단실습| CSS3의 radius, shadow 속성 이용하기<br/>|간단실습| CSS3의 투명 속성과 그레이디언트 속성 이용하기<br/>Unit 03CSS3 트랜지션 기능을 이용한 애니메이션 만들기 <br/>|간단개요| CSS3 트랜지션 이해하고 관련 패널 알아보기 <br/>|간단실습| 롤오버 시 튀어나오는 메뉴 만들기<br/>|간단실습| 숨겨 있던 글 문단과 그림이 나타나는 애니메이션 만들기<br/>|간단실습| 배경 이미지가 슬라이딩되어 교체되는 배너 애니메이션 만들기 <br/>|간단실습| 회전과 투명도를 이용한 롤오버 롤아웃 메뉴 만들기<br/>Unit 04미디어쿼리와 플루이드 그리드 레이아웃 기능을 이용한 반응형 웹사이트 구현하기<br/>|간단개요| 반응형 웹디자인, 미디어쿼리와 플루이드 그리드 레이아웃 기능 이해하기 |간단실습| 플루이드 그리드 레이아웃 기능으로 반응형 웹사이트 만들기 <br/>|간단실습| 해상도에 따라 레이아웃이 변경되게 CSS 수정하기 <br/>|POWER UNIT| 미디어쿼리를 이용한 인쇄용 레이아웃 만들기 <br/>|활용실습| <br/><br/><b>Chapter 08 제이쿼리(jQuery) 모바일로 웹사이트 만들고 폰갭으로 네이티브 앱 만들기 </b><br/>Unit 01제이쿼리 모바일을 이용한 웹사이트 만들기<br/>|간단개요| 제이쿼리 모바일의 기능 알아보기<br/>|간단실습| 제이쿼리 모바일로 페이지 제작하고 페이지 추가하기 <br/>|간단실습| footer 영역에 고정되는 내비게이션 바 추가하고 header 영역의 제목 변경하기<br/>|간단실습| 버튼 삽입하고 제이쿼리 모바일 스와치로 디자인 변경하기 <br/>|간단실습| Back 기능과 Next 컨트롤 그룹 버튼 삽입하기<br/>Unit 02제이쿼리 모바일 위젯 삽입하기 <br/>|간단개요| 제이쿼리 모바일 위젯 알아보기<br/>|간단실습| 리스트뷰 위젯 삽입하기<br/>|간단실습| 축소와 확장이 가능한 블록 위젯 삽입하기<br/>|간단실습| 레이아웃 그리드 위젯으로 데이터 정리하기 <br/>Unit 03폰갭을 이용하여 네이티브 앱으로 변환하기 <br/>|간단개요| 앱과 폰갭 빌드 서비스 알아보기 <br/>|간단실습| 폰갭 빌드 계정 가입하고 네이티브 앱으로 변환하기<br/>|간단실습| 네이티브 앱 설치하고 스마트폰에서 결과 확인하기 <br/>|활용실습|

효율적인 최신 웹 콘텐츠 제작을 위한 최고의 선택, 드림위버 CS6

드림위버는 웹에 대한 사전 지식이 없는 사용자도 웹페이지를 수월하게 제작할 수 있도록 도와주는 직관적이고 시각적인 인테페이스를 제공합니다. 또한 태블릿 PC, 데스크톱, 스마트폰과 같은 다양한 플랫폼에 맞추어 멀티스크린 디자인을 해야 하는 웹디자이너와 제이쿼리, 데이터베이스, 웹 프로그래밍, 모바일 앱 등 개발자에게 필요한 최신 기술과 트랜드에 맞추어 웹사이트를 제작할 수 있도록 도와주는 다양한 기능을 제공합니다.

「실력이 탐나는 드림위버 CS6」는 이렇게 다양하고 폭 넒은 사용자를 보유하고 있는 드림위버의 탁월하고 매력적인 기능을 소개하고 직접 활용할 수 있게 하는 길잡이 역할을 하기 위해 만들어졌습니다. HTML, CSS 중심의 마크업 언어를 이해하고 자바스크립트, 제이쿼리 모바일, 폰갭 등의 활용법을 드림위버와 연계하여 실제 웹사이트 제작에 필요한 기능을 익힐 수 있게 하는 내용을 담았습니다.

웹 표준 방식의 레이아웃으로 구성된 예제와 최신 HTML5, CSS3, 반응형 웹디자인, 모바일 앱, 제이쿼리 모바일 사이트와 같이 급부상하고 있는 기술로 웹 콘텐츠 제작을 효율적이고 손쉽게 완성할 수 있도록 테마별로 구성하였습니다. 드림위버의 새 버전이 출시될 때마다 떨리는 마음과 호기심으로 가득 찼던 많은 드림위버 사용자를 위해 더할 나위 없는 지침서가 되어줄 것입니다.

예상 독자
드림위버를 처음 배우는 사람, 이전 버전 사용자
웹디자이너, 웹개발자, 웹기획자 등 웹종사자 지망생

구성 특징
웹 제작 표준 도구인 드림위버 CS6의 기초 지식부터 실전 기능까지 체계적으로 설명
드림위버는 직관적인 인터페이스와 다양한 코드 마크업 기능, 효율적인 콘텐츠 삽입 기능, 효과적인 자원 관리 기능으로 전 세계적으로 사랑 받는 웹 제작 표준 도구입니다. 새로운 기능으로 더욱 더 막강해진 드림위버 CS6의 핵심 기능을 쉽고 체계적인 구성으로 설명합니다.

웹 표준 방식의 레이아웃 제작을 위한 HTML5, CSS3 중심의 마크업 언어 활용 기법 소개
모바일, 태블릿 PC, 스마트 콘텐츠와 같은 기술이 발전되면서 HTML5과 CSS3로 이루어진 레이아웃은 웹사이트를 제작하는 필수 요소로 자리 매김하였습니다. 웹 표준 방식의 레이아웃과 관련된 마크업 언어의 기본적인 문법과 레이아웃 제작 기법에 대해 소개합니다.

반응형 웹디자인, 모바일 앱, 제이쿼리 모바일 사이트 등 최신 웹 콘텐츠 제작 기법 소개
스마트 디바이스의 발달로 인해 다양한 플랫폼의 웹 콘텐츠 제작은 필수 요소로 자리 잡았습니다. 제이쿼리 모바일 지원 기능 및 앱 제작을 지원하는 폰갭 등의 최신 기술과 트렌드에 맞춰 웹사이트를 제작할 수 있게 도와주는 다양한 기능에 대해 소개합니다.

장별 요약

Chapter 01 최고의 웹사이트 제작 툴, 드림위버 CS6 시작하기
드림위버는 웹사이트를 구성하는 홈페이지 제작 소프트웨어로, 직관적인 인터페이스와 다양한 코드 마크업 기능, 효율적인 콘텐츠 삽입 기능, 효과적인 자원 관리 기능을 제공하고 있습니다. 특히, 드림위버 CS6에서는 다양한 플랫폼에 따라 변경되는 반응형 웹디자인과 모바일 사이트, 앱 제작까지 지원하고 있어 초보자부터 고급 사용자까지 만족시킬 만한 막강한 기능을 제공합니다. 이번 Chapter에서는 이러한 드림위버 CS6의 대표적인 특징과 함께 프로그램의 전반적인 사용을 위한 준비 작업과 레이아웃 변경에 대해 알아봅니다.

Chapter 02 웹 문서에 콘텐츠 삽입하기
웹 문서를 구성하는 대표적인 콘텐츠에는 텍스트, 이미지, 테이블과 폼 컨트롤 등이 있습니다. 이번 Chapter에서는 드림위버에서 제공하는 직관적인 디자인 모드 편집 창과 빠른 실행 메뉴 명령을 이용한 콘텐츠 삽입 과정과 함께 코드 편집 창을 이용하여 직접 HTML 태그 요소를 마크업하는 과정에 대해 알아봅니다.

Chapter 03 다양한 하이퍼링크, 비헤이비어, 아이프레임으로 웹 문서와 콘텐츠 연결하기
하이퍼링크(Hyperlink) 기능은 웹사이트를 제작하는 과정에 있어서 무척 중요한 역할을 담당합니다. 하이퍼링크를 지정한 이미지나 텍스트에 마우스 포인터를 가져가면 마우스 포인터 모양이 손가락 형태로 변경되고, 클릭하면 새로운 웹사이트로 이동되거나 파일을 다운로드 받을 수 있는 대화상자, 메일을 보낼 수 있는 프로그램이 실행됩니다. 이번 Chapter에서는 이러한 하이퍼링크의 기초적인 적용 방법과 함께 드림위버에서 쉽게 동적인 효과를 구현할 수 있게 제공되는 비헤이비어를 이용하여 점프 메뉴, 롤오버 이미지, 갤러리, 팝업 창과 같은 예제를 만들고 결과를 확인합니다.

Chapter 04 CSS로 콘텐츠 디자인하기
CSS는 콘텐츠를 구성하는 HTML과 함께 필요한 디자인을 정확하게 적용할 수 있는 마크업 언어입니다. CSS가 없었던 시절 복잡한 디자인을 구현하기 위해서는 이미지와 HTML의 테이블 기능을 이용하여 레이아웃 대부분을 해결해야 했습니다. 그러나 CSS의 등장으로 홈페이지의 실제 내용과 서식 및 레이아웃 디자인을 분리시킬 수 있게 되었으며 반복적인 소스를 효율적으로 관리할 수 있게 되었습니다. 이번 Chapter에서는 중요도가 갈수록 늘어나는 CSS의 전반적인 사용법과 함께 기본적인 문법 또한 함께 알아봅니다.

Chapter 05 CSS 레이아웃 구현하기
CSS를 이용한 레이아웃은 빠른 렌더링, 쉬운 유지 보수, 적은 소스 코드 등의 장점을 지니고 있으며 웹 표준, CSS3, HTML5, 모바일, 태블릿 PC, 스마트 콘텐츠와 같은 기술이 발전되면서 웹사이트를 제작하는 필수 요소로 자리 잡고 있습니다. 이번 Chapter에서는 이러한 CSS 레이아웃과 관련된 속성과 기법을 알아보고 드림위버에서 제공하는 샘플 레이아웃 기능과 템플릿을 이용한 페이지 제작도 함께 살펴봅니다.

Chapter 06 인클루드, CGI, 웹 출판 서비스 이용하기
드림위버를 이용하여 제작한 홈페이지를 웹 상에 표시하고 운영하려면 웹 계정과 함께 FTP 기능에 대해 알아야 합니다. 이번 Chapter에서는 이러한 오프라인 상태의 웹페이지를 웹 상에 표시하는 웹 출판 과정과 함께 웹사이트 제작에 많이 사용하는 인클루드를 이용한 PHP 페이지 제작 기법과 폼메일, 게시판을 쉽게 구현할 수 있는 CGI 서비스에 대해 알아봅니다.

Chapter 07 HTML5, CSS3, 미디어쿼리를 이용한 반응형 웹디자인 구현하기
HTML5와 CSS3은 기존 마크업 언어의 역할 외에도 동적 효과와 그래픽, 애니메이션 효과를 처리할 수 있는 다양하고 핵심적인 역할을 하고 있습니다. 데스크톱 PC, 노트북 PC, 태블릿 PC와 모바일 기기의 다양한 웹 디자인을 고려해야 하는 환경에 있어서 HTML5와 CSS3를 중심으로 제작한 웹사이트 개발은 웹 표준 방식을 준수하면서 효율적인 디자인과 업데이트를 지원하고 있습니다. 이번 Chapter에서는 이러한 HTML5, CSS3의 특징과 함께 드림위버에서 새롭게 지원하는 반응형 웹페이지 제작에 대해 알아봅니다.

Chapter 08 제이쿼리(jQuery) 모바일로 웹사이트 만들고 폰갭으로 네이티브 앱 만들기
스마트폰, 태블릿 PC와 같은 모바일 기기의 사용 빈도가 높아짐에 따라 애플리케이션 또는 앱이라 불리는 서비스가 게임, 뱅킹, 교육, 채팅과 같은 여러 방면에서 활용되고 있습니다. 이러한 앱은 세계적으로 수만 개에서 수십만 개까지 다양한 분야에서 개발되어 사용자가 이용하고는 있지만 오브젝트 C나 자바와 같은 전문 언어를 이용해서 개발해야 하며 다양한 기기와 환경에서의 실행을 위해서는 불가피하게 특정 기기에 맞추어 여러 형태로 개발해야만 했습니다. 드림위버에서는 이러한 문제점을 해결하고자 쉽게 모바일 웹사이트를 개발할 수 있는 제이쿼리 모바일 기능과 폰갭과 같이 다양한 기기의 플랫폼에 맞추어 자동으로 앱 파일로 변환시켜 주는 패키징 빌드 서비스를 지원하고 있습니다. 이번 Chapter에서는 이러한 기능을 이용하여 모바일에 최적화된 웹사이트를 제작하고 앱 형태로 변환해 주는 폰갭 빌드 서비스에 대해 알아봅니다