Search

클릭 몇 번으로 뚝딱, 웹사이트 제작을 위한 최고의 솔루션

웹사이트 하나를 제작하려면 포토샵은 기본이고 다양한 프로그래밍 언어까지 익혀야 한다. 하지만 드림위버를 다룰 줄 알면 프로그래밍 언어에 대한 고민을 대폭 줄일 수 있다. 드림위버의 다양한 기능으로 문서를 작성하듯 클릭하면 웹 표준에 맞는 HTML, CSS, JavaScript 언어가 자동으로 생성된다. 《맛있는 디자인 드림위버 CC》는 이러한 드림위버의 특성을 가장 잘 반영한 드림위버 입문서다. 웹사이트 제작에 처음 도전하는 웹디자이너도 쉽게 따라할 수 있도록 기본 기능 실습부터 프로젝트 실습까지 난이도에 따라 드림위버 기능을 익힐 수 있다. 또한 초보 단계를 넘어 빠르게 실무에 적응할 수 있도록 자주 사용하는 기본 HTML 등의 코드를 함께 수록하여 웹 제작 전문가로 성장하는 데 도움을 주며, 부트스트랩, CSS Design 패널 등 최신 기능을 빠짐없이 담았다.

어떤 독자를 위한 책인가?
ㆍ 실무에 막 입문한 웹디자이너
ㆍ 드림위버를 몇 번 써봤지만 기본기가 약한 초급자
ㆍ 웹사이트 제작에 도전하려는 웹디자이너
ㆍ 두고두고 찾아볼 드림위버 입문서가 필요한 분

이 책의 특징
ㆍ 운영 중인 실제 웹사이트를 예제로 활용한 생생함!
《맛있는 디자인 드림위버 CC》를 집필하면서 ‘어떻게 하면 좀 더 생생한 실무 현장을 독자에게 전달할 수 있을까’를 고민했다. 전문 웹사이트 디자인&제작 회사인 ㈜디자인아트플러스의 디자인팀이 참여하고 실제 운영 중인 웹사이트를 예제로 활용했으며, 단순히 기능 소개를 위한 실습이 아닌 실제 웹사이트의 요소를 직접 수정해 보면서 실무를 간접적으로 체험할 수 있다.

ㆍ CC 2015 릴리즈의 최신 기능 반영
Adobe에서는 CC(Creative Cloud)를 출시하면서 거의 매년 새로운 기능을 업데이트하며, 2015년에도 7월 새로운 릴리즈를 발표하면서 신기능을 추가했다. 그러므로 가장 최근에 출간된 책일수록 최신 기능을 반영한다고 할 수 있다. 《맛있는 디자인 드림위버 CC》는 2014 릴리즈를 기본으로 하되, 2015 릴리즈의 최신 기능까지 반영하여 부트스트랩과 같은 기능을 체험해 볼 수 있다.

ㆍ 디자인에만 집중하면서 실력을 쌓을 수 있도록 코드 정보 제공
드림위버의 가장 큰 특징은 문서를 작성하듯 클릭하면 HTML과 같은 코드가 자동으로 생성된다는 점이다. 또한 [Code] 창과 [Design] 창을 제공하여 자동으로 생성된 코드를 바로 확인할 수 있는 기능도 제공한다. 이러한 드림위버의 기능 덕분에 웹디자이너도 간단히 퍼블리셔의 역할을 수행할 수 있는 것이다. 하지만 코드의 의미를 전혀 이해하지 못하면 웹디자이너로서 성장하는 데 한계에 부딪힌다. 《맛있는 디자인 드림위버 CC》에서는 실습을 통해 드림위버의 기본 기능만 익히는 것이 아니라 생성된 코드 정보를 함께 제공하며, 웹디자이너의 소양을 쌓을 수 있는 이론 지식도 함께 다루어서 신입 웹디자이너의 훌륭한 지침서가 될 수 있다.

[PART 01 Dw 시작하기]
LESSON 01 드림위버 CC의 새로운 기능
- CSS Designer 패널
- Live View
- DOM 패널
- 반응형 웹사이트 만들기
- Extract
- 모든 디바이스에서 미리보기
- Edge Web Fonts
LESSON 02 드림위버 CC 설치
- 시스템 요구 사양
- 드림위버 CC 시험버전 설치
LESSON 03 드림위버 CC 인터페이스
- 메뉴 바 영역
- 문서 편집 영역
- 패널 영역
LESSON 04 파일 만들기/저장하기/열기/닫기
- 새로운 파일 만들기
- 파일 저장하기
- 파일 열기/닫기
[응용실습] 프로젝트 성격에 따라 New Document 설정하기
LESSON 05 결과 미리보기
- 미리보기 실행하기
- 크롬 브라우저 설치하기
- 드림위버를 기본 웹브라우저로 설정하기
LESSON 06 사이트 설정하기
LESSON 07 웹 호스팅 선정 및 도메인 구입
- 웹 호스팅이란?
- 도메인 구입하기
- LESSON 08 FTP의 개념과 활용
- FTP 연결 설정하기
- 파일 업로드하기
- 파일 다운로드하기
LESSON 09 그누보드로 회원 및 게시판 관리하기
LESSON 10 쇼핑몰 솔루션 활용하기
- 쇼핑몰 솔루션의 종류
- 쇼핑몰 솔루션에 HTML 소스 입력하기

[PART 02 텍스트, 하이퍼링크, 이미지 삽입]
LESSON 01 간단한 속성 지정으로 텍스트 꾸미기
LESSON 02 목록 스타일로 텍스트 정리하기
LESSON 03 다양한 특수문자 입력하기
LESSON 04 텍스트에 하이퍼링크 설정하여 버튼 만들기
[응용실습] Page Properties 창의 각 범주 및 옵션 살펴보기
LESSON 05 이미지 삽입 및 이미지 속성 파악하기
LESSON 06 하이퍼링크 설정으로 이미지 버튼 만들기
LESSON 07 이미지 하나에 여러 개의 하이퍼링크 설정하기
LESSON 08 마우스 커서에 따라 바뀌는 롤오버 버튼 만들기
LESSON 09 배경 설정하기
- 배경 색 설정하기
- 배경 이미지 설정하기
LESSON 10 테이블 삽입하고 편집하기
- 테이블 삽입하기
- 셀 너비 조정하기
- 셀 나누기/합치기
- 셀 꾸미기
[응용실습] 메뉴 바를 이용한 테이블 꾸미기

[PART 03 CSS 기초와 활용]
LESSON 01 CSS와 CSS Designer
- CSS Designer 패널의 각 영역
- Properties 영역의 5가지 탭
LESSON 02 CSS 알고 가기
- 선택자(Selector)
- 마진(margin)과 패딩(padding), 그리고 포지션(position)
LESSON 03 태그 선택자
[응용실습] 스타일시트 분리해서 관리하기
LESSON 04 클래스 선택자
LESSON 05 아이디 선택자
[응용실습] 아이디 선택자를 링크로 활용하기
LESSON 06 컴파운드 선택자
LESSON 07 링크 선택자
[응용실습] 일부 링크 텍스트 디자인 변경하기
LESSON 08 클래스 다중 선택
LESSON 09 Div 삽입하기
[응용실습] Absolute로 원하는 위치에 Div 고정하기
LESSON 10 모서리 둥글게 디자인하기
LESSON 11 반투명 박스 만들기
LESSON 12 그림자 효과 만들기

[PART 04 생동감 넘치는 웹페이지를 위한 동적 요소]
LESSON 01 비디오 삽입하기
LESSON 02 팝업 창 띄우기
LESSON 03 Call JavaScript를 활용한 팝업 창 닫기
LESSON 04 AP Div와 Effects를 활용한 애니메이션 팝업 창 연출하기
LESSON 05 Popup Message로 간단한 안내 사항 전달하기
LESSON 06 CSS 트랜지션으로 애니메이션 만들기
LESSON 07 AP Div와 Show-Hide Elements로 전체 메뉴 보기 구현하기
LESSON 08 Swap Image로 마우스 오버 시 이미지가 바뀌는 갤러리 만들기
LESSON 09 Tab 메뉴 만들어 활용하기
LESSON 10 Accordion을 활용한 움직이는 페이지 연출하기
LESSON 11 Form 정의한 후 요소 삽입하기
[응용실습] CSS로 폼 요소 디자인 변경하기

[PART 05 웹디자인 기초]
LESSON 01 웹사이트 기획과 설계
- 고객 분석
- 기초 설계 단계
- 구체화 단계
- 구현 단계
- 테스트 및 완료 단계
LESSON 02 웹디자이너 되기
- 드림위버 활용하기
- 디자인 감각 키우기
LESSON 03 디자인 콘셉트 정하기
LESSON 04 컬러 선정하기
LESSON 05 사용자 인터페이스(UI) 선정하기
- 사용자를 배려한 디자인
- 점점 중요해지는 Grid
LESSON 06 디자인의 한 축, 폰트 활용하기
LESSON 07 기초를 튼튼하게, HTML&CSS
- HTML 알고 가기
- CSS 알고 가기

[PART 06 유동형 화면 디자인 & 모바일 홈페이지]
LESSON 01 유동형 레이아웃으로 웹페이지 만들기
- 유동형 웹페이지 기획하기
[응용실습] 부트스트랩 사용하기
LESSON 02 jQuery Mobile을 활용한 모바일 홈페이지
- 모바일 전용 홈페이지 필요할까?
- 페이지 계획 세우기
- 실습 과정 파악하기
[응용실습] 모바일 디자인 쉽게 꾸미기

[PART 07 HTML5와 CSS를 활용한 프로젝트 완성하기]
LESSON 01 웹사이트 기획하기
- 웹사이트의 핵심 콘셉트 파악하기
- 디자인 콘셉트 정리하기
- 전체 레이아웃 결정하기
LESSON 02 전체 레이아웃 설정
LESSON 03 상단 편집하기
- 상단 영역 설정하기
- 로고 삽입하기
- Top 메뉴 삽입하기
- Top 메뉴 정리하기
- 메인 메뉴 삽입하기
- 메인 메뉴 정리하기
LESSON 04 중앙 디자인 편집하기
- 메인 이미지 영역 설정하기
- 메인 이미지 삽입하기
- 배너 삽입하기
- 타이틀 삽입하기
- 상품 이미지 & 내용 삽입하기
- 상품 영역 복사해서 붙여 넣기
LESSON 05 하단 디자인 편집하기