드림위버CS6(CD1장포함)(스마트 시리즈 8)

■ 책 소개



『스스로 마스터하는 트레이닝 북 드림위버 CS6』으로 한 번에, 똑똑하게 배우자!



드림위버(Dreamweaver)는 포토샵, 일러스트레이터, 프리미어, 인디자인 프로그램의 개발사인 어도비(Adobe)에서 개발한 홈페이지 제작용 프로그램입니다. 복잡한 소스 코드를 직접 삽입하지 않고 워드프로세서 프로그램을 이용하여 문서를 제작하듯이 홈페이지를 제작할 수 있는 직관적인 인터페이스와 편집 기술을 제공하고 있으며 HTML5, CSS, PHP, 자바스크립트(JavaScript), ASP와 같은 프로그래밍 코딩 작업을 위한 강력한 기능도 함께 지원하고 있습니다. 특히, CS6 버전에서는 웹 표준을 위한 다양한 기능과 제이쿼리 모바일(jQuery Mobile) 및 자바스크립트의 지원 기능, 반응형 웹디자인을 제작할 수 있는 강력한 기능이 추가되었습니다.

이처럼 많은 기능이 향상되고 강력해진 드림위버로 웹 페이지를 효율적으로 제작할 수 있게 『스스로 마스터하는 트레이닝 북 드림위버 CS6』는 드림위버의 메뉴 명령과 패널에 대한 기초 설명과 함께 예제를 이용해 실전에도 대응할 수 있게 하였고, HTML5과 CSS3의 문법 설명까지 빠짐없이 담았습니다. 여러 권의 책을 사지 않고 이 책 한권으로 드림위버 CS6와 HTML5, CSS3까지 해결할 수 있어 일석삼조의 효과를 누릴 수 있습니다.





이런 분들께 추천합니다!

- 드림위버 CS6를 처음 배우는 초보자

- 웹디자이너, 웹개발자, 웹기획자 등 웹 종사자 지망생





■ 이 책의 구성과 특징

드림위버의 '핵심 기능'만 골라 배울 수 있습니다!

먼저 드림위버의 최중요 기능을 골라 목차는 빈틈없이, 과정은 최대한 쉽게 풀어 빠르게 이해할 수 있도록 구성하였습니다. 기능 설명은 군더더기 없이 꼭 필요한 내용만 확실하게 전달할 수 있도록 배려하였습니다.



혼자서도 '체계적'으로 배울 수 있습니다!

'기능정리'(이론) → '실습과정'(핵심 기능) → '응용실습'(문제)으로 이어지는 구성은 입문자들이 체계적으로 학습할 수 있도록 도와줍니다. 또한 팁 요소를 배치하여 기능 설명을 더욱 이해하기 쉽게 하고, 본문을 학습하는 데 수월하도록 예제/완성/해설 파일을 부록 CD로 제공합니다.



한 번 배울 때 '완벽'하게 배울 수 있습니다!

먼저 '기능정리'에서 핵심 개념을 간단하게 이론으로 짚은 후, '간단퀴즈'로 배운 내용을 체크합니다. 그 다음 '실습과정'을 통해 핵심 기능을 배운 후 다시 '확인실습' 문제로 내용을 확인하고, 한 개 장이 끝나면 '응용실습' 문제로 마무리합니다. 권말에는 실무 프로젝트를 별지 구성하여 현장 업무에 필요한 드림위버의 작업 과정을 직접 테스트해볼 수 있게 합니다. 또한 실무 프로젝트는 동영상 해설 파일을 추가 제공하여 풀이 과정을 생생하게 지켜볼 수 있습니다.



■ 부문별 요약

PART 01 드림위버 CS6 기본기 익히기

드림위버는 홈페이지를 쉽고 빠르게 제작할 수 있는 위지윅 방식의 홈페이지 저작 도구로, 특히 CS6 버전에서는 웹 표준을 위한 다양한 기능과 제이쿼리 모바일(jQuery Mobile) 및 자바스크립트의 지원 기능, 반응형 웹디자인을 제작할 수 있는 강력한 기능이 추가되었습니다. Part 01에서는 이러한 드림위버의 최신 버전을 설치하고 실행하는 방법과 함께 웹페이지 제작을 위해 필요한 기초 과정에 대해 알아봅니다.



PART 02 다양한 콘텐츠로 웹 문서 완성하기

웹페이지에 삽입되는 다양한 콘텐츠에는 텍스트, 이미지, 테이블, 프레임, 동영상, 폼 등 다양한 요소들이 존재합니다. 드림위버에서는 이러한 콘텐츠를 메뉴 명령이나 아이콘 버튼으로 쉽게 삽입할 수 있고 관련 패널이나 대화상자를 이용하여 편집할 수 있습니다. 웹페이지를 구성하는 다양한 콘텐츠의 삽입 및 편집 방법을 익히고 웹브라우저에서 결과를 확인해 봅니다.



PART 03 하이퍼링크 지정하고 문서 환경 설정하기

하이퍼링크는 웹사이트를 구성하는 웹페이지와 웹페이지를 연결하는 중요한 매개체 역할을 합니다. 여기에서는 이러한 하이퍼링크의 기초적인 제작 방법과 함께 네임 앵커, 이미지맵과 같은 다양한 하이퍼링크의 제작 방법을 익히고 드림위버에서 제공하는 문서의 여백, 서체 설정과 같은 환경 설정에 대해 알아봅니다.



PART 04 CSS로 콘텐츠 디자인하고 애니메이션 만들기

CSS의 중요 기능 중 하나는 홈페이지에 삽입된 이미지, 문단, 테이블의 디자인을 보기 좋게 다듬는 역할입니다. 여기에서는 이러한 콘텐츠를 디자인하는 기능에 필요한 CSS의 기초적인 사용법을 알아보고 드림위버 CS6에 새로 추가된 CSS3의 트랜지션 기능을 이용하여 마우스 포인터의 움직임과 상태 변화에 반응하는 CSS 애니메이션에 대해 알아봅니다.



PART 05 CSS 관련 속성으로 다양한 레이아웃 구현하기

콘텐츠를 디자인하는 기능 외에 CSS의 놀라운 기능 중 하나는 가로 세로 다단 구성이나 좌표 값을 이용한 위치 지정과 같은 레이아웃을 배치할 수 있는 기능입니다. 여기에서는 이러한 CSS의 레이아웃과 관련된 속성을 알아보고 드림위버에서 제공하는 샘플 레이아웃 기능을 이용하여 문서 전체의 레이아웃 디자인을 구성해 봅니다.



PART 06 비헤이비어와 스프라이 위젯 기능으로 동적 효과 적용하기

비헤이비어와 스프라이 위젯은 마우스 포인터의 위치 변화와 콘텐츠의 상태 변화에 따라 동적 효과를 발생합니다. 드림위버에서는 이러한 기능을 자바스크립트, CSS, HTML과 같은 마크업 작업 없이 사용자가 손쉽게 삽입할 수 있는 기능을 제공하고 있습니다. 최소한의 삽입 명령과 편집 명령을 사용하여 팝업 창, 롤오버 갤러리, 트리 구조 형태의 내비게이션과 탭 패널을 제작해 봅니다.



PART 07 웹 출판하고 게시판 구현하기

드림위버에서 제작한 웹페이지의 최종 목적지는 인터넷에 업로딩하여 특정 웹 주소를 입력했을 때 결과물이 표시되도록 설정하는 것입니다. 여기에서는 이러한 웹 출판 과정에 필요한 웹 계정, FTP 기능과 함께 그누보드 프로그램을 이용하여 게시판을 삽입하는 과정에 대해 알아봅니다.



PART 08 모바일 사이트와 앱 제작하기

스마트 폰, 아이패드나 갤럭시 탭과 같은 태블릿 PC, 다양한 데스크톱 모니터 크기에 대응하는 레이아웃 지원 문제는 웹디자이너, 웹퍼블리셔, 웹개발자, 웹기획자가 웹사이트를 제작해야 할 때 반드시 고려해야 할 사항입니다. 여기에서는 이러한 레이아웃과 디자인 문제를 해결해주는 플루이드 그리드 레이아웃 기능과 함께 제이쿼리 모바일 기능을 이용한 웹사이트 제작 방법, 웹페이지를 앱으로 제작해주는 서비스 기능 등에 대해 알아봅니다.



PART 09 드림위버로 HTML5 & CSS3 마크업하기

드림위버의 코드 편집 창에서는 HTML, CSS와 같은 소스를 직접 마크업할 때 자동으로 입력해주는 코드 힌트나 소스 정리, 색상 지원과 같은 여러 가지 편리한 기능을 제공합니다. 이번 Part에서는 HTML과 CSS의 기본 문법과 사용 용도를 익히고 드림위버의 코드 편집 기능을 이용하여 소스를 직접 마크업하는 과정을 학습해 봅니다.



PROJECT 실무를 완벽하게 대비하는 종합 실습 문제

드림위버 CS6를 종합적으로 활용할 수 있는 능력을 키워주는 실전 프로젝트입니다. 총 6개의 문제로 구성되어 있으며, PDF 해설 파일과 동영상 해설 파일(부록 CD 및 QR 코드)이 제공됩니다.

PART 01 드림위버 CS6 기본기 익히기

SECTION 01 드림위버 CS6 시작하기

|기능 정리| 드림위버 이해하고 특징 살펴보기

|실습 과정| 드림위버 CS6 시험 버전 설치하고 실행하기

SECTION 02 드림위버의 편집 화면 조정하고 사이트 정의하기

|기능 정리| 드림위버 CS6의 화면 구성 알아보기

|실습 과정| 웹사이트 제작을 위한 사이트 정의하기

|실습 과정| 편집 화면 조정 기능 알아보기

|실습 과정| 웹브라우저 연결하여 문서 미리 보기

특집. 디자인 편집 창과 코드 편집 창의 폰트 스타일 설정하기



PART 02 다양한 콘텐츠로 웹 문서 완성하기

SECTION 01 텍스트와 이미지 삽입하고 편집하기

|기능 정리| 텍스트와 이미지 삽입하고 편집 속성 알아보기

|실습 과정| 다양한 텍스트 삽입하고 편집하기

|실습 과정| 웹용 이미지 삽입하고 편집하기

SECTION 02 테이블 삽입하고 편집하기

|기능 정리| 테이블 삽입 방법과 속성 패널 알아보기

|실습 과정| 테이블 삽입하고 내용 입력하기

|실습 과정| 테이블 편집하기

SECTION 03 폼 문서와 관련된 콘텐츠 삽입하기

|기능 정리| 폼과 관련된 컨트롤 요소와 속성 알아보기

|실습 과정| 폼 정의하고 입력 필드 삽입하기

|실습 과정| 선택 관련 폼 컨트롤 요소 삽입하기

특집. 플래시 무비 삽입하기

응용실습



PART 03 하이퍼링크 지정하고 문서 환경 설정하기

SECTION 01 다양한 하이퍼링크 설정으로 문서 연결하기

|기능 정리| 하이퍼링크 지정 방법과 관련 속성 알아보기

|실습 과정| 텍스트와 이미지에 하이퍼링크 지정하기

|실습 과정| 네임 앵커로 특정 위치 탐색하기

|실습 과정| 이미지맵 사용하기

SECTION 02 문서 환경 설정하기

|기능 정리| 문서 환경 설정과 관련된 속성 알아보기

|실습 과정| 문서 여백과 타이포그래피 속성 지정하기

|실습 과정| 하이퍼링크 스타일 지정하기

특집. 아이프레임 삽입하고 하이퍼링크 지정하기

응용실습



PART 04 CSS로 콘텐츠 디자인하고 애니메이션 만들기

SECTION 01 선택자를 이용하여 문서 전체 스타일과 콘텐츠 디자인 변경하기

|기능 정리| CSS 이해하고 기본 선택자 익히기

|실습 과정| 태그 선택자 등록과 적용하기

|실습 과정| 아이디 선택자 등록과 적용하기

|실습 과정| 클래스 선택자 등록과 적용하기

SECTION 02 상태 변화 및 위치와 관련된 선택자 등록하고 콘텐츠 디자인 변경하기

|기능 정리| 슈도 클래스, 슈도 엘리먼트, 자손 선택자 알아보기

|실습 과정| 자손 선택자 등록과 적용하기

|실습 과정| 하이퍼링크와 관련된 선택자 등록으로 메뉴 만들기

특집. 첫 줄과 첫 문자 디자인하기

SECTION 03 CSS3 트랜지션 기능으로 애니메이션 만들기

|기능 정리| CSS3 트랜지션 이해하고 관련 패널 알아보기

|실습 과정| 가로로 늘어나는 다이내믹 롤오버 메뉴 만들기

|실습 과정| 확장 축소되는 패널 애니메이션 만들기

SECTION 04 CSS로 텍스트, 목록 문단, 이미지의 디자인 변경하기

|기능 정리| CSS로 변경한 디자인의 활용 예제 알아보기

|실습 과정| CSS로 목록 문단 디자인 변경하기

|실습 과정| CSS로 이미지에 프레임 디자인 적용하기

|실습 과정| CSS로 텍스트의 외곽선 디자인하기

SECTION 05 CSS로 폼, 테이블, 하이퍼링크의 디자인 변경하기

|기능 정리| CSS로 변경한 디자인의 활용 예제 알아보기

|실습 과정| CSS로 롤오버 하이퍼링크 만들기

|실습 과정| CSS로 클릭 시 색상 변경되는 입력 상자 만들기

|실습 과정| CSS로 롤오버 시 셀 색상이 변경되는 테이블 만들기

응용실습



PART 05 CSS 관련 속성으로 다양한 레이아웃 구현하기

SECTION 01 레이아웃과 관련된 CSS 속성 사용하기

|기능 정리| CSS 레이아웃과 관련된 속성 알아보기

|실습 과정| 플로우트 속성을 이용한 다단 레이아웃 구현하기

|실습 과정| 디스플레이 속성을 이용한 콘텐츠 타입 변경하기 1

|실습 과정| 디스플레이 속성을 이용한 콘텐츠 타입 변경하기 2

SECTION 02 포지션 속성을 이용한 레이아웃 만들기

|기능 정리| 포지션과 관련된 CSS 속성 알아보기

|실습 과정| 고정 포지션 속성을 이용한 좌표 값 지정 레이아웃 구현하기

|실습 과정| 절대 포지션 속성을 이용한 좌표 값 지정 레이아웃 구현하기

SECTION 03 CSS 샘플 레이아웃을 이용한 웹 문서 만들기

|기능 정리| 드림위버에서 제공하는 CSS 샘플 레이아웃 알아보기

|실습 과정| 샘플 레이아웃 선택하고 관련 파일 저장하기

|실습 과정| 문서 내용 교체 편집하기

|실습 과정| 전체 레이아웃 디자인 변경하기

|실습 과정| 구성 요소 디자인 변경하기

응용실습



PART 06 비헤이비어와 스프라이 위젯 기능으로 동적 효과 적용하기

SECTION 01 비헤이비어 기능으로 다양한 동적 효과 구현하기

|기능 정리| 비헤이비어 특징 이해하고 적용 및 편집 과정 알아보기

|실습 과정| Swap Image 비헤이비어로 롤오버 갤러리 만들기

|실습 과정| Show-Hide Element 비헤이비어로 특정 위치에 팝업 창 띄우고 닫기

특집. 롤오버 메뉴 삽입하기

|실습 과정| Popup Message 비헤이비어로 클릭 시 메시지 창 띄우기

|실습 과정| Call Javascript 비헤이비어로 클릭 시 웹브라우저 창 닫기

|실습 과정| Call Javascript 비헤이비어로 인쇄 버튼 만들기

|실습 과정| Open Browser Window 비헤이비어로 특정 크기로 창 띄우기

특집. Jump Menu 기능으로 클릭 시 늘어나는 메뉴 삽입하기

|실습 과정| 폼 버튼에 Go To URL 비헤이비어로 하이퍼링크 지정하기

|실습 과정| Validate Form 비헤이비어로 폼 컨트롤 요소의 유효성 검사하기

|실습 과정| Set Text 비헤이비어로 메시지 변경하기

특집. Set Text 비헤이비어로 텍스트 필드 입력 글자 변경하기

|실습 과정| Drag AP Element 비헤이비어로 드래그가 가능한 박스 만들기

|실습 과정| Change Property 비헤이비어로 이벤트에 따라 속성 값 변경하기

|실습 과정| Effect 비헤이비어로 이미지에 페이드 애니메이션 효과 적용하기

SECTION 02 다양한 스프라이 위젯으로 동적 내비게이션과 탭 패널 만들기

|기능 정리| 스프라이 위젯 특징 알아보기

|실습 과정| 스프라이 메뉴 바 위젯 삽입하고 편집하기

|실습 과정| 스프라이 탭 패널 위젯 삽입하고 편집하기

응용실습



PART 07 웹 출판하고 게시판 구현하기

SECTION 01 웹 계정 서비스 신청하고 웹 출판하기

|기능 정리| 웹 출판 서비스 알아보기

|실습 과정| 웹 호스팅 서비스 신청하기

|실습 과정| [Files] 패널의 FTP 기능 이용하기

SECTION 02 그누보드 게시판 이용하기

|기능 정리| 그누보드 게시판 알아보기

|실습 과정| 파일질라 FTP 프로그램으로 그누보드 게시판 웹 계정에 설치하기

|실습 과정| 그누보드 그룹 생성하고 웹페이지에 게시판 삽입하기

응용실습



PART 08 모바일 사이트와 앱 제작하기

SECTION 01 플루이드 그리드 레이아웃으로 해상도에 따라 디자인 변경하기

|기능 정리| 플루이드 그리드 레이아웃 기능 이해하기

|실습 과정| 플루이드 그리드 레이아웃 기능을 이용한 반응형 웹페이지 제작하기

|실습 과정| 해상도별 레이아웃 변경하고 결과 확인하기

SECTION 02 제이쿼리 모바일을 이용한 모바일 사이트 제작하기

|기능 정리| 제이쿼리 모바일 이해하고 제이쿼리 모바일 위젯 알아보기

|실습 과정| 제이쿼리 모바일 페이지 제작하고 페이지 추가/연결하기

|실습 과정| 테마 적용하고 하단 푸터 영역의 내비게이션 고정시키기

|실습 과정| 버튼 위젯 삽입하기

|실습 과정| Collapsible Block 위젯 삽입하기

SECTION 03 폰 갭 서비스로 모바일 앱 만들기

|기능 정리| 폰 갭 빌드 서비스 알아보기

|실습 과정| 폰 갭 빌드 계정 가입하고 앱 만들기

|실습 과정| 모바일 기기에서 앱 다운로드/설치 확인하기

응용실습



PART 09 드림위버로 HTML5 & CSS3 마크업하기

SECTION 01 HTML5 기본 구조와 문단 포맷 태그 익히기

|기능 정리| HTML5 기본 구조와 문단 포맷 관련 태그 알아보기

|실습 과정| 주석, hn, p, br 마크업하기

|실습 과정| ul, ol, li, dl, dt, dd 마크업하기

|실습 과정| strong, em, span, div 마크업하기

SECTION 02 외부 콘텐츠 삽입하고 하이퍼링크 태그 익히기

|기능 정리| 다양한 콘텐츠 삽입 관련 태그와 하이퍼링크 태그 알아보기

|실습 과정| img, figcaption, figure, hr 마크업하기

|실습 과정| video, source 마크업하기

|실습 과정| a 마크업하기

|실습 과정| 네임 앵커를 이용한 a 마크업하기

|실습 과정| iframe 마크업하기

SECTION 03 테이블과 폼 태그 익히기

|기능 정리| 테이블과 폼 관련 태그 알아보기

|실습 과정| table 기본 마크업하기

|실습 과정| thead, tbody, tfoot 사용하여 table 마크업하기

|실습 과정| form 마크업하기 1 - 라벨과 다양한 텍스트 필드, 폼 버튼

|실습 과정| form 마크업하기 2 - 필드 세트와 라디오 버튼, 체크 박스, 셀렉트 메뉴

|실습 과정| form 마크업하기 3 - HTML5 폼 컨트롤 요소

SECTION 04 CSS3 적용 방식 이해하고 기본 선택자 정의하기

|기능 정리| CSS 적용 방식과 기본 선택자 알아보기

|실습 과정| style 속성을 이용한 CSS 적용하기

|실습 과정| tag 선택자 정의하고 적용하기

|실습 과정| class 선택자 정의하고 적용하기

|실습 과정| id 선택자 정의하고 적용하기

|실습 과정| 슈도(pseudo) 선택자 마크업하기

|실습 과정| 외부 CSS 문서에 선택자 마크업하여 연결하기

SECTION 05 다양한 선택자 정의와 속성 익히기

|기능 정리| 다양한 선택자와 속성 알아보기

|실습 과정| compound 선택자 마크업하기

|실습 과정| group 선택자 마크업하기

|실습 과정| 순서와 관련 있는 선택자 마크업하기

|실습 과정| 박스 모델과 관련된 속성 마크업하기

|실습 과정| 레이아웃과 관련된 속성 마크업하기 1

|실습 과정| 레이아웃과 관련된 속성 마크업하기 2

응용실습



PROJECT 프로젝트 실무를 완벽하게 대비하는 종합 실습 문제

김태균