클릭 몇 번으로 뚝딱, 웹사이트 제작을 위한 최고의 솔루션
웹사이트 하나를 제작하려면 포토샵은 기본이고 다양한 프로그래밍 언어까지 익혀야 한다. 하지만 드림위버를 다룰 줄 알면 프로그래밍 언어에 대한 고민을 대폭 줄일 수 있다. 드림위버의 다양한 기능으로 문서를 작성하듯 클릭하면 웹 표준에 맞는 HTML, CSS, JavaScript 언어가 자동으로 생성된다. 《맛있는 디자인 드림위버 CC》는 이러한 드림위버의 특성을 가장 잘 반영한 드림위버 입문서다. 웹사이트 제작에 처음 도전하는 웹디자이너도 쉽게 따라할 수 있도록 기본 기능 실습부터 프로젝트 실습까지 난이도에 따라 드림위버 기능을 익힐 수 있다. 또한 초보 단계를 넘어 빠르게 실무에 적응할 수 있도록 자주 사용하는 기본 HTML 등의 코드를 함께 수록하여 웹 제작 전문가로 성장하는 데 도움을 주며, 부트스트랩, CSS Design 패널 등 최신 기능을 빠짐없이 담았다.
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 하단 디자인 편집하기
자료명 | 등록일 | 다운로드 |
---|---|---|
[도서부록] 예제소스 | 2020-08-18 | 다운로드 |
윤성우 , 김덕영
윤이사라(포완카) , 박효근
빨간고래(박정아)
황지완