필수 기능 41개로 빠르고 쉽게 배우는 스마트한 드림위버를 만나다!
최신 웹/앱 트렌드에 맞춘 《드림위버 CC 무작정 따라하기》는 처음 배우거나 이전 버전을 사용한 사람도 쉽고, 빠르게 사이트를 제작할 수 있도록 돕는다. HTML5에 최적화된 기능 예제와 함께 이해하기 쉽도록 과정에 대한 원리를 알려주는 Why&Tip이 포함된 필수 기능을 학습해 사이트를 원하는 대로 제작할 수 있다. 또한, 일반 사이트를 스마트하고 간편하게 반응형 웹으로 제작할 수 있도록 활용 예제를 따라하여 생생한 실무 감각을 익힐 수 있다. 웹 디자인 기초와 더불어 웹 표준 및 CSS를 익혀 하나의 사이트를 모바일 환경에 맞게 연동할 수도 있다. 원하는 기능을 바로 찾아 익힐 수 있는 키워드 스터디와 탭, 작업의 편의를 위해 하위 버전 사용자도 쉽게 학습할 수 있도록 버전별 표기되어 있다.목차
첫째 마당 웹 사이트 개발을 위한 HTML 이해하기
필수 기능 | 001 | 웹과 HTML의 개념 이해하기 : HTML과 브라우저 :
필수 기능 | 002 | HTML 구성 요소 알아보기 : 태그와 하이퍼텍스트 문서 :
필수 기능 | 003 | 웹 표준 이해하기 : 웹 표준과 W3C :
필수 기능 | 004 | 문서의 기본 구조 알아보기 : 문서 구조와 선언 :
필수 기능 | 005 | 새로운 HTML 살펴보기 : HTML5와 시맨틱 :
필수 기능 | 006 | 차세대 웹 표준 알아보기 : HTML5 활용 :
필수 기능 | 007 | 애플리케이션 이해하기 : 웹앱, 네이티브앱, 하이브리드앱 :
필수 기능 | 008 | 웹 디자인을 위한 CSS 알아보기 : CSS3 :
실력 알아보기 크롬 브라우저 설치와 웹 표준 유효성 검사하기
둘째 마당 웹 개발자와 디자이너를 위한 웹 디자인 기초 익히기
필수 기능 | 009 | 웹 디자인의 개념 알아보기 : 웹 디자인 :
필수 기능 | 010 | 웹 디자인 기획하기 : 콘셉트 도출/아이디어 방법론 :
필수 기능 | 011 | 웹 디자인 계획하기 : 웹 기획 과정 :
필수 기능 | 012 | 웹 사이트 분석하기 : 벤치마킹과 포지셔닝 :
필수 기능 | 013 | 다양한 디자인 사이트 경험하기 : 디자인 참고 사이트 :
필수 기능 | 014 | 호감이 가는 색상 알아보기 : 배색 :
기능 예제 | 015 | 포토샵에서 웹 색상 팔레트 만들기 : 색상 견본 :
필수 기능 | 016 | 사이트 정보 설계하기 : 사이트맵과 콘텐츠 :
필수 기능 | 017 | 효율적인 레이아웃 만들기 : 레이아웃 :
필수 기능 | 018 | 그리드 시스템 알아보기 : 960 Grid System :
기능 예제 | 019 | 그리드 레이아웃 만들기 : 960 그리드 :
실력 알아보기 웹 색상 팔레트와 그리드를 활용한 레이아웃 만들기
셋째 마당 드림위버 CC 기본 기능 익히기
필수 기능 | 020 | 드림위버 CC 새로운 기능 살펴보기 : New In CC :
필수 기능 | 021 | 드림위버 기본 화면 살펴보기 : 작업 화면 :
기능 예제 | 022 | 작업 환경 설정하기 : 작업 환경 :
기능 예제 | 023 | 새 문서 만들기 : New Document :
기능 예제 | 024 | 로컬 사이트 등록하기 : New Site :
기능 예제 | 025 | 쉽고 간단하게 문서 관리하기 : Files 패널 :
필수 기능 | 026 | 글꼴과 환경 설정하기 : Manage Fonts/Page Properties :
기능 예제 | 027 | 문서 속성 설정하기 : Document Properties :
기능 예제 | 028 | 문자 입력하고 수정하기 : 문자 속성과 글꼴 :
필수 기능 | 029 | 구글 웹 글꼴 사용하기 : Google Web Font :
기능 예제 | 030 | 웹 글꼴 추가와 활용하기 : Web Font :
필수 기능 | 031 | 내용 정리를 위한 목록 만들기 : 순차/비순차 목록 :
필수 기능 | 032 | 다양한 화면 살펴보기 : 화면 보기 설정 :
실력 알아보기 글꼴과 글자 색상을 설정하고 비순차 목록 만들기
넷째 마당 다양한 미디어 적용하기
필수 기능 | 033 | 다양한 미디어 관리하기 : Insert 패널 :
필수 기능 | 034 | 사이트와 디자인, 이미지 알아보기 : Images :
기능 예제 | 035 | 문서에 이미지 삽입하기 : Images :
필수 기능 | 036 | 이미지 속성 살펴보기 : Properties 패널 :
기능 예제 | 037 | 다양한 방법으로 이미지 추가하기 : Properties 패널 :
기능 예제 | 038 | 이미지맵으로 링크 설정하기 : Hotspot :
기능 예제 | 039 | 포토샵 파일 삽입하기 : PSD :
필수 기능 | 040 | 이미지와 문장 정렬하기 : Align :
기능 예제 | 041 | 문장과 이미지 정렬하기 : Float :
필수 기능 | 042 | 배경 이미지 속성 살펴보기 : Appearance/Background :
기능 예제 | 043 | 배경 이미지 반복 설정하기 : Repeat-x/y :
필수 기능 | 044 | 배경 이미지 위치 설정하기 : Attachment/Position :
기능 예제 | 045 | 배경 이미지 고정하기 : No - repeat :
활용 예제 | 046 | 시각적인 효과를 위한 롤오버 이미지 만들기
실력 알아보기 롤오버 이미지 만들고 패턴 형태의 배경 만들기
다섯째 마당 멀티미디어와 속성 활용하기
필수 기능 | 047 | HTML과 멀티미디어 요소 이해하기 : 미디어 활용 :
필수 기능 | 048 | 편리한 작업을 위한 밑그림 만들기 : Tracing Image :
필수 기능 | 049 | 플래시 파일 추가 및 설정하기 : SWF/Insert FLV :
기능 예제 | 050 | 플래시 파일 삽입하기 : SWF/FLV :
필수 기능 | 051 | HTML5 비디오/오디오 태그 살펴보기 : Video/Audio :
필수 기능 | 052 | 테이블 추가하기 : Table :
기능 예제 | 053 | 테이블 삽입하기 : Table :
필수 기능 | 054 | 링크와 경로 이해하기 : Link :
기능 예제 | 055 | 하이퍼링크 설정하기 : Link :
기능 예제 | 056 | 링크 스타일 속성 설정하기 : Links (CSS) :
기능 예제 | 057 | 페이지 안에서 이동하는 하이퍼링크 만들기 : ID :
활용 예제 | 058 | 하이퍼링크를 이용해 원 페이지 레이아웃 디자인하기
실력 알아보기 테이블을 이용한 시간표와 즐겨찾기 만들기
여섯째 마당 폼과 비헤이비어 등으로 동적인 문서 만들기
필수 기능 | 059 | FTP와 웹 서버 및 호스팅 이해하기 : FTP & 호스팅 :
기능 예제 | 060 | 드림위버에서 서버 접속하기 : Manage Sites :
기능 예제 | 061 | 팝업 메시지 창 만들기 : Behaviors :
기능 예제 | 062 | 팝업 이미지 창 만들기 : Open Browser Window :
기능 예제 | 063 | 사이트 이동하기 : Go to URL :
기능 예제 | 064 | 원하는 페이지로 이동하기 : Navigator :
필수 기능 | 065 | 모바일용 페이지 이해하기 : 웹앱 :
필수 기능 | 066 | 웹 문서 형식 이해하기 : Form :
기능 예제 | 067 | Form 문서 선언하고 영역 구분하기 : Form/Fieldset :
기능 예제 | 068 | 폼에 문자 입력하기 : TextField :
기능 예제 | 069 | 선택을 위한 체크 박스와 버튼 추가하기 : Radio button/Checkbox :
기능 예제 | 070 | 긴 문장 입력하기 : Text Area :
기능 예제 | 071 | 파일 선택하고 입력하기 : File Field :
기능 예제 | 072 | 버튼으로 폼 완성하기 : Button :
기능 예제 | 073 | 이미지를 활용한 버튼 만들기 : Image Button :
실력 알아보기 FTP에 접속하고 팝업 메시지 표시와 화면 이동하기
일곱째 마당 사이트를 완성하는 CSS 이용하기
필수 기능 | 074 | 문서 스타일 설정하기 : CSS :
기능 예제 | 075 | Class로 새로운 스타일 만들기 : New CSS Rule/CSS :
기능 예제 | 076 | CSS 속성 수정하기 : Edit Rule :
기능 예제 | 077 | Div에 적용된 Float 속성 초기화하기 : Clear :
기능 예제 | 078 | 패널을 이용한 CSS 관리하기 : CSS Designer 패널 :
활용 예제 | 079 | 동영상 장면 전환처럼 CSS 트랜지션 적용하기
기능 예제 | 080 | 스타일 시트를 외부 문서로 공유하기 : New Style Sheet File :
활용 예제 | 081 | 내비게이션 레이아웃 적용하기
활용 예제 | 082 | CSS를 이용해 스타일 적용하기
활용 예제 | 083 | Section과 Article로 레이아웃 디자인하기
활용 예제 | 084 | 스타일과 Div를 활용해 배너 만들기
활용 예제 | 085 | 사이트 아래에 푸터 영역 만들기
실력 알아보기 콘텐츠 여백과 테두리 설정하기
여덟째 마당 모바일을 위한 반응형 웹 디자인하기
필수 기능 | 086 | 모바일 작업 환경 이해하기 : Fluid Grid Layout :
필수 기능 | 087 | 모바일 디자인 이해하기 : Android Design :
기능 예제 | 088 | 반응형 웹 사이트 만들기 : Fluid Grid Layout :
활용 예제 | 089 | Fluid Grid Layout을 활용한 Header 만들기
기능 예제 | 090 | 콘텐츠 영역 만들기 : Insert Div :
기능 예제 | 091 | 푸터 영역 만들기 : Footer :
기능 예제 | 092 | 반응형 웹 환경에서 콘텐츠 영역 만들기 : Image : Image :
기능 예제 | 093 | CSS 수정하기 : CSS Designer 패널 :
기능 예제 | 094 | 모바일을 위한 앱 디자인하기 : jQuery Mobile :
기능 예제 | 095 | 메인 페이지 구성하기 : Image :
기능 예제 | 096 | 콘텐츠 내용 삽입하기 : Text :
기능 예제 | 097 | 푸터 영역 만들기 : Data-Icon :
실력 알아보기 모바일 문서 페이지 추가하고 테스트하기
드림위버 단축키 모음
드립위버 한글/영문 비교표
찾아보기
더보기접기
필수 기능 | 001 | 웹과 HTML의 개념 이해하기 : HTML과 브라우저 :
필수 기능 | 002 | HTML 구성 요소 알아보기 : 태그와 하이퍼텍스트 문서 :
필수 기능 | 003 | 웹 표준 이해하기 : 웹 표준과 W3C :
필수 기능 | 004 | 문서의 기본 구조 알아보기 : 문서 구조와 선언 :
필수 기능 | 005 | 새로운 HTML 살펴보기 : HTML5와 시맨틱 :
필수 기능 | 006 | 차세대 웹 표준 알아보기 : HTML5 활용 :
필수 기능 | 007 | 애플리케이션 이해하기 : 웹앱, 네이티브앱, 하이브리드앱 :
필수 기능 | 008 | 웹 디자인을 위한 CSS 알아보기 : CSS3 :
실력 알아보기 크롬 브라우저 설치와 웹 표준 유효성 검사하기
둘째 마당 웹 개발자와 디자이너를 위한 웹 디자인 기초 익히기
필수 기능 | 009 | 웹 디자인의 개념 알아보기 : 웹 디자인 :
필수 기능 | 010 | 웹 디자인 기획하기 : 콘셉트 도출/아이디어 방법론 :
필수 기능 | 011 | 웹 디자인 계획하기 : 웹 기획 과정 :
필수 기능 | 012 | 웹 사이트 분석하기 : 벤치마킹과 포지셔닝 :
필수 기능 | 013 | 다양한 디자인 사이트 경험하기 : 디자인 참고 사이트 :
필수 기능 | 014 | 호감이 가는 색상 알아보기 : 배색 :
기능 예제 | 015 | 포토샵에서 웹 색상 팔레트 만들기 : 색상 견본 :
필수 기능 | 016 | 사이트 정보 설계하기 : 사이트맵과 콘텐츠 :
필수 기능 | 017 | 효율적인 레이아웃 만들기 : 레이아웃 :
필수 기능 | 018 | 그리드 시스템 알아보기 : 960 Grid System :
기능 예제 | 019 | 그리드 레이아웃 만들기 : 960 그리드 :
실력 알아보기 웹 색상 팔레트와 그리드를 활용한 레이아웃 만들기
셋째 마당 드림위버 CC 기본 기능 익히기
필수 기능 | 020 | 드림위버 CC 새로운 기능 살펴보기 : New In CC :
필수 기능 | 021 | 드림위버 기본 화면 살펴보기 : 작업 화면 :
기능 예제 | 022 | 작업 환경 설정하기 : 작업 환경 :
기능 예제 | 023 | 새 문서 만들기 : New Document :
기능 예제 | 024 | 로컬 사이트 등록하기 : New Site :
기능 예제 | 025 | 쉽고 간단하게 문서 관리하기 : Files 패널 :
필수 기능 | 026 | 글꼴과 환경 설정하기 : Manage Fonts/Page Properties :
기능 예제 | 027 | 문서 속성 설정하기 : Document Properties :
기능 예제 | 028 | 문자 입력하고 수정하기 : 문자 속성과 글꼴 :
필수 기능 | 029 | 구글 웹 글꼴 사용하기 : Google Web Font :
기능 예제 | 030 | 웹 글꼴 추가와 활용하기 : Web Font :
필수 기능 | 031 | 내용 정리를 위한 목록 만들기 : 순차/비순차 목록 :
필수 기능 | 032 | 다양한 화면 살펴보기 : 화면 보기 설정 :
실력 알아보기 글꼴과 글자 색상을 설정하고 비순차 목록 만들기
넷째 마당 다양한 미디어 적용하기
필수 기능 | 033 | 다양한 미디어 관리하기 : Insert 패널 :
필수 기능 | 034 | 사이트와 디자인, 이미지 알아보기 : Images :
기능 예제 | 035 | 문서에 이미지 삽입하기 : Images :
필수 기능 | 036 | 이미지 속성 살펴보기 : Properties 패널 :
기능 예제 | 037 | 다양한 방법으로 이미지 추가하기 : Properties 패널 :
기능 예제 | 038 | 이미지맵으로 링크 설정하기 : Hotspot :
기능 예제 | 039 | 포토샵 파일 삽입하기 : PSD :
필수 기능 | 040 | 이미지와 문장 정렬하기 : Align :
기능 예제 | 041 | 문장과 이미지 정렬하기 : Float :
필수 기능 | 042 | 배경 이미지 속성 살펴보기 : Appearance/Background :
기능 예제 | 043 | 배경 이미지 반복 설정하기 : Repeat-x/y :
필수 기능 | 044 | 배경 이미지 위치 설정하기 : Attachment/Position :
기능 예제 | 045 | 배경 이미지 고정하기 : No - repeat :
활용 예제 | 046 | 시각적인 효과를 위한 롤오버 이미지 만들기
실력 알아보기 롤오버 이미지 만들고 패턴 형태의 배경 만들기
다섯째 마당 멀티미디어와 속성 활용하기
필수 기능 | 047 | HTML과 멀티미디어 요소 이해하기 : 미디어 활용 :
필수 기능 | 048 | 편리한 작업을 위한 밑그림 만들기 : Tracing Image :
필수 기능 | 049 | 플래시 파일 추가 및 설정하기 : SWF/Insert FLV :
기능 예제 | 050 | 플래시 파일 삽입하기 : SWF/FLV :
필수 기능 | 051 | HTML5 비디오/오디오 태그 살펴보기 : Video/Audio :
필수 기능 | 052 | 테이블 추가하기 : Table :
기능 예제 | 053 | 테이블 삽입하기 : Table :
필수 기능 | 054 | 링크와 경로 이해하기 : Link :
기능 예제 | 055 | 하이퍼링크 설정하기 : Link :
기능 예제 | 056 | 링크 스타일 속성 설정하기 : Links (CSS) :
기능 예제 | 057 | 페이지 안에서 이동하는 하이퍼링크 만들기 : ID :
활용 예제 | 058 | 하이퍼링크를 이용해 원 페이지 레이아웃 디자인하기
실력 알아보기 테이블을 이용한 시간표와 즐겨찾기 만들기
여섯째 마당 폼과 비헤이비어 등으로 동적인 문서 만들기
필수 기능 | 059 | FTP와 웹 서버 및 호스팅 이해하기 : FTP & 호스팅 :
기능 예제 | 060 | 드림위버에서 서버 접속하기 : Manage Sites :
기능 예제 | 061 | 팝업 메시지 창 만들기 : Behaviors :
기능 예제 | 062 | 팝업 이미지 창 만들기 : Open Browser Window :
기능 예제 | 063 | 사이트 이동하기 : Go to URL :
기능 예제 | 064 | 원하는 페이지로 이동하기 : Navigator :
필수 기능 | 065 | 모바일용 페이지 이해하기 : 웹앱 :
필수 기능 | 066 | 웹 문서 형식 이해하기 : Form :
기능 예제 | 067 | Form 문서 선언하고 영역 구분하기 : Form/Fieldset :
기능 예제 | 068 | 폼에 문자 입력하기 : TextField :
기능 예제 | 069 | 선택을 위한 체크 박스와 버튼 추가하기 : Radio button/Checkbox :
기능 예제 | 070 | 긴 문장 입력하기 : Text Area :
기능 예제 | 071 | 파일 선택하고 입력하기 : File Field :
기능 예제 | 072 | 버튼으로 폼 완성하기 : Button :
기능 예제 | 073 | 이미지를 활용한 버튼 만들기 : Image Button :
실력 알아보기 FTP에 접속하고 팝업 메시지 표시와 화면 이동하기
일곱째 마당 사이트를 완성하는 CSS 이용하기
필수 기능 | 074 | 문서 스타일 설정하기 : CSS :
기능 예제 | 075 | Class로 새로운 스타일 만들기 : New CSS Rule/CSS :
기능 예제 | 076 | CSS 속성 수정하기 : Edit Rule :
기능 예제 | 077 | Div에 적용된 Float 속성 초기화하기 : Clear :
기능 예제 | 078 | 패널을 이용한 CSS 관리하기 : CSS Designer 패널 :
활용 예제 | 079 | 동영상 장면 전환처럼 CSS 트랜지션 적용하기
기능 예제 | 080 | 스타일 시트를 외부 문서로 공유하기 : New Style Sheet File :
활용 예제 | 081 | 내비게이션 레이아웃 적용하기
활용 예제 | 082 | CSS를 이용해 스타일 적용하기
활용 예제 | 083 | Section과 Article로 레이아웃 디자인하기
활용 예제 | 084 | 스타일과 Div를 활용해 배너 만들기
활용 예제 | 085 | 사이트 아래에 푸터 영역 만들기
실력 알아보기 콘텐츠 여백과 테두리 설정하기
여덟째 마당 모바일을 위한 반응형 웹 디자인하기
필수 기능 | 086 | 모바일 작업 환경 이해하기 : Fluid Grid Layout :
필수 기능 | 087 | 모바일 디자인 이해하기 : Android Design :
기능 예제 | 088 | 반응형 웹 사이트 만들기 : Fluid Grid Layout :
활용 예제 | 089 | Fluid Grid Layout을 활용한 Header 만들기
기능 예제 | 090 | 콘텐츠 영역 만들기 : Insert Div :
기능 예제 | 091 | 푸터 영역 만들기 : Footer :
기능 예제 | 092 | 반응형 웹 환경에서 콘텐츠 영역 만들기 : Image : Image :
기능 예제 | 093 | CSS 수정하기 : CSS Designer 패널 :
기능 예제 | 094 | 모바일을 위한 앱 디자인하기 : jQuery Mobile :
기능 예제 | 095 | 메인 페이지 구성하기 : Image :
기능 예제 | 096 | 콘텐츠 내용 삽입하기 : Text :
기능 예제 | 097 | 푸터 영역 만들기 : Data-Icon :
실력 알아보기 모바일 문서 페이지 추가하고 테스트하기
드림위버 단축키 모음
드립위버 한글/영문 비교표
찾아보기
저자&기여자
ㆍ지은이 이문형
- 소개
-
한양여자대학 인터넷 정보전공 겸임 교수
(주)바이클릭 미디어팀 수석연구원
- 이력
성균관대 산업디자인과 졸업, 동대학원 산업디자인과 석사
혜천대학 시각디자인과, 성균관대학교 디자인대학원, 명지대학교 사회교육원 강의
아이즈기획 실장, (주)디지탈컨텐츠 인터넷팀장, 디자인 라 실장, (주)인데스 기술지원이사
(주)탑매니아 디자인 팀장 및 이사
저작권 안내
모든 자료는 저작권법의 보호를 받는 저작물로, 허락 없이 편집하거나 다른 매체에 옮겨 실을 수 없습니다.
인공지능(AI) 기술 또는 시스템을 훈련하기 위해 자료의 전체 내용은 물론 일부도 사용하는 것을 금지합니다.
All materials are protected by copyright law and may not be edited or reproduced in other media without permission.
It is prohibited to use all or part of the materials, including for training artificial intelligence (AI) technologies or systems, without authorization.
인공지능(AI) 기술 또는 시스템을 훈련하기 위해 자료의 전체 내용은 물론 일부도 사용하는 것을 금지합니다.
All materials are protected by copyright law and may not be edited or reproduced in other media without permission.
It is prohibited to use all or part of the materials, including for training artificial intelligence (AI) technologies or systems, without authorization.
연관 프로그램
아래 프로그램은 길벗출판사가 제공하는 것이 아닙니다.
무료로 사용할 수 있는 정보를 안내해 드리니, 지원이 필요하면 해당 프로그렘 제작사로 문의해 주세요.
무료로 사용할 수 있는 정보를 안내해 드리니, 지원이 필요하면 해당 프로그렘 제작사로 문의해 주세요.
구매 도서 인증
드림위버 CC 무작정 따라하기
부가기호 확인하는 방법
- 종이책 :
-
도서 뒷표지 아래쪽에 있는 바코드의 오른쪽 위 숫자
- 전자책(eBook) :
- 전자책 앞 또는 뒷부분의 판권면 (발행인, 담당 편집자 등을 표시하는 곳) 중 ISBN 부분에 표기(예: 979-11-6050-407-1 05320로 된 곳의 뒤 다섯 자리 숫자 05320)
도서문의
드림위버 CC 무작정 따라하기
관련 FAQ에 찾는 내용이 없으면 아래에서 '문의하기'를 클릭해 주세요.
빠른 조회
님 환영합니다! 마이길벗
알림 메시지
최근 이용 자료
내 문의/답변
내 서재
동영상 강좌
모바일 앱 설치 QR코드
구글 플레이스토어
애플 앱스토어
독자의견 남기기