머리말 ... 3 이 책을 보는 방법 ... 4 이 책의 예제 파일 사용하는 방법 ... 6 첫째마당 웹 디자인 기초 이론의 이해 ... 17 01 웹 사이트란 무엇인가? ... 18 웹 사이트 관련 용어와 개념 ... 18 웹 사이트 제작과 관련된 기술 ... 22 02 웹 디자인의 개념과 실제 ... 25 웹의 목적-정보전달 ... 25 정보를 효율적이고 체계적으로 전달할 수 있는 웹 디자인 ... 25 웹 인터페이스 디자인 ... 26 웹 디자이너가 알아야 할 10가지 웹 디자인 원칙 ... 27 웹 디자인 직업 프로세스(Process) ... 30 웹 디자인과 템플릿 디자인 ... 31 메뉴 내비게이션 디자인 ... 32 사용자를 고려한 웹 디자인 ... 33 웹 페이지의 배경 디자인 ... 35 03 웹 디자인 컬러와 폰트 ... 36 웹 디자인과 컬러 ... 36 웹 디자인과 폰트 ... 42 04 웹 디자인을 위한 프로그램 ... 45 웹 브라우저 ... 45 웹 에디터 ... 46 그래픽 프로그램 ... 47 홈페이지 출판 프로그램-FTP ... 50 둘째마당 포토샵을 이용하여 웹 이미지 만들기 ... 51 포토샵 CS2의 인터페이스와 화면 구성 요소 ... 52 메뉴 ... 53 툴박스 ... 54 팔레트 ... 55 01 버튼 만들기 Ⅰ - 빛이 반사되는 알약 버튼 만들기 ... 57 작업 도큐먼트 준비하기 ... 58 잠깐만요 : 'New' 대화상자의 옵션 ... 58 '선택(Marquee)툴'로 버튼 형태 만들기 ... 60 잠깐만요 : '원형 선택(Elliptical Marquee)툴'과 옵션 ... 61 버튼에 그레이디언트 효과 주기 ... 62 잠깐만요 : Color Picker 사용법 이해하기 ... 62 잠깐만요 : '그레이디언트(Gradient)툴'의 옵션 이해하기 ... 64 빛이 반사되는 부분 만들기 ... 65 한걸음 더 : 선택 영역 저장과 활용 ... 67 Self Test ... 68 01 버튼 만들기 Ⅱ - 입체적인 '다음', '이전' 버튼 만들기 ... 69 버튼 이미지 준비하기 ... 70 버튼에 그레이디언트 옵션 적용하기 ... 71 선택 영역을 변형하여 입체 효과 주기 ... 72 버튼에 맞춤형 도형 이미지 넣기 ... 74 Self Test ... 76 03 메뉴바 만들기 - 입체감 있는 메뉴바 ... 77 메뉴바 형태 만들기 ... 78 잠깐만요 : '둥근 모서리 사각형 도형(Rounded Rectangle)툴'의 옵션 알아보기 ... 79 메뉴바에 스타일 적용하기 ... 80 메뉴 버튼 형태 만들기 ... 80 메뉴 버튼에 스타일 적용하기 ... 81 메뉴 버튼 복제하기 ... 82 메뉴 글자 입력하기 ... 82 메뉴 글자 복제하고 수정하기 ... 83 한걸음 더 : '스타일(Styles) 팔레트'의 텍스트 효과(Text Effects) ... 85 Self Test ... 88 04 배경 화면과 어울리는 투명 이미지 만들기 ... 89 '마술봉(Magic Wand) 툴'로 배경 선택하기 ... 90 선택한 배경 지우기 ... 91 이미지 테두리 부분을 깔끔하게 정리하기 ... 92 배경이 투명한 이미지 저장하기 ... 93 잠깐만요 : 'Save As' 대화상자의 여러 옵션 ... 94 한걸음 더 : 마술봉(Magic Wand) 툴 옵션의 Tolerance와 Contiguous에 대해서 알아보기 ... 95 한걸음더 : [Help] 메뉴로 투명 GIF 파일 만들기 ... 96 Self Test ... 98 05 웹 이미지 최적화하기 ... 99 미리보기 화면의 이미지 크기 조절하기 ... 100 다양하게 최적화된 이미지 미리보기 ... 101 잠깐만요 : 'Save for Web' 대화상자 살펴보기 ... 101 이미지 세밀하게 최적화하기 ... 102 잠깐만요 : 'Preset' 항목에서 설정할 수 있는 파일 포맷 ... 104 한걸음 더 : 이미지 크기 조절과 이미지의 회전 ... 105 잠깐만요 : 'Image Size' 대화상자의 여러 옵션 ... 106 한걸음 더 : 포토샵에서 GIF파일 편집하기 ... 107 Self Test ... 108 06 문자 만들기 Ⅰ - 네온 사인 효과 ... 109 새 작업 도큐먼트 만들기 ... 110 입력할 글자의 옵션 설정하기 ... 110 글자의 이동과 색 채우기 ... 111 잠깐만요 : '문자(Type)툴'의 옵션 이해하기 ... 112 선택 영역 해제하고 레이어 병합하기 ... 113 글자에 필터 효과 적용하기 ... 114 글자 이미지의 밝기 보정하기 ... 115 글자 이미지의 컬러 보정하기 ... 116 새 레이어를 만들어 배경 지우기 ... 116 새 레이어 복제하고 레이어 위치 이동하기 ... 117 레이어에 특수 효과 설정하기 ... 118 잠깐만요 : 레이어 스타일(Layer Style) 효과 살펴보기 ... 119 한걸음 더 : 이미지를 이용하여 문자 디자인하기 ... 121 잠깐만요 : '캐릭터(Character) 팔레트' ... 123 Self Test ... 124 07 문자 만들기 Ⅱ - 플라스틱 질감 효과 ... 125 글자의 옵션과 글자색 지정하기 ... 126 문자 레이어를 그림 레이어로 변환하기 ... 127 선택 영역에 번짐 효과 주기 ... 128 Lighting Effects 필터 효과 주기 ... 129 레이어에 'Screen' 블렌딩 모드 적용하기 ... 130 글자 이미지에 그림자 효과 주기 ... 130 글자 이미지에 Emboss 필터 효과 주기 ... 131 잠깐만요 : 포토샵의 다양한 필터 메뉴 ... 131 한걸음 더 : 'Warp Text' 효과를 이용하여 문자 왜곡하기 ... 132 Self Test ... 134 08 홈페이지 인트로 화면 디자인하기 ... 135 작업 도큐먼트 준비하기 ... 136 배경 이미지 디자인하기 ... 136 인트로 화면에 첫 번째 이미지 합성 효과내기 ... 140 인트로 화면에 두 번째 이미지 합성하기 ... 144 인트로 화면에 세 번째 이미지 합성하기 ... 145 이미지 합성 마무리하기 ... 146 인트로 화면에 문자 디자인하고 저장하기 ... 147 Self Test ... 148 09 홈페이지 화면 조각 그림으로 만들기 ... 149 이미지레디 실행하기 ... 150 이미지를 나누기 위한 안내선 그리기 ... 150 잠깐만요 : 이미지레디 화면 구성과 주요 기능 ... 151 잠깐만요 : 안내선 위치 이동하고 잘못 만든 안내선 삭제하기 ... 153 슬라이스할 이미지 영역 설정하기 ... 154 슬라이스한 이미지 저장하기 ... 155 잠깐만요 : 'Save Optimized' 대화상자의 '파일 형식' 옵션 ... 156 브라우저로 저장된 이미지 확인하기 ... 157 Self Test ... 158 10 배너 애니메이션 만들기 ... 159 이미지 레디 실행과 파일 포맷 설정하기 ... 160 애니메이션 프레임 만들기 ... 160 프레임 대기 시간 설정하기 ... 161 잠깐만요 : 이미지레디의 '애니메이션(Animation) 팔레트'의 구조와 기능 ... 162 배너 애니메이션 실행하고 저장하기 ... 164 한걸음 더 : 트윈(Tween) 기능으로 자연스럽게 변화하는 애니메이션 만들기 ... 165 Self Test ... 166 11 이미지 맵을 이용한 하이퍼링크 만들기 ... 167 작업 도큐먼트 준비하기 ... 168 첫 번째 메뉴에 이미지 맵 영역 지정하기 ... 168 두 번째 메뉴에 이미지 맵 영역 지정하기 ... 169 잠깐만요 : 이미지레디의 '이미지 맵(Image Map) 팔레트'의 구조와 기능 ... 169 이미지 맵 설정 확인하고 저장하기 ... 170 잠깐만요 : 이미지 맵 환경 설정하기 ... 171 Self Test ... 172 12 롤오버 메뉴 버튼 만들기 ... 173 작업 도큐먼트 준비하기 ... 174 버튼 이미지 만들기 ... 174 롤오버 효과를 위해 버튼에 레이어 스타일 적용하기 ... 176 문자 레이어 만들고 글자색 지정하기 ... 177 롤오버 버튼 만들기 ... 178 롤오버 버튼 작업 결과 확인하고 저장하기 ... 179 잠깐만요 : 인터넷 익스플로러에 보이는 롤오버 버튼과 관련된 HTML 태그 ... 179 잠깐만요 : 이미지레디의 '웹 컨텐츠(Web Content) 팔레트'의 구조와 기능 ... 180 Self Test ... 182 13 홈페이지 배경을 위한 패턴 만들기 ... 183 이음새가 부드러운 사진 배경 만들기 ... 184 격자 무늬 패턴 배경 만들기 ... 187 잠깐만요 : 파일 형식 ... 190 잠깐만요 : [File]→[Output Settings] 메뉴 ... 191 Self Test ... 192 14 홈페이지에 올릴 사진 이미지 보정하기 ... 193 'Levels'로 어두운 사진 밝게 보정하기 ... 194 'Levels'로 너무 밝은 사진 콘트라스트 강조하기 ... 196 사진 이미지의 특정 컬러 보정하기 ... 198 인물의 잡티 수정하고 뽀사시한 사진 만들기 ... 200 잠깐만요 : 사진 이미지 보정 작업시 알아두어야 할 원칙 ... 204 한걸음 더 : 'Curves'와 'Color Balance' 기능으로 이미지 정밀하게 보정하기 ... 206 잠깐만요 : 'Color Balance' 기능으로 이미지를 보정할 때 주의할 점 ... 208 잠깐만요 : 'Curves' 대화상자의 여러 옵션 ... 209 Self Test ... 210 셋째마당 플래시를 이용하여 웹 애니메이션 만들기 ... 211 플래시 MX 2004 인터페이스와 화면 구성 요소 ... 212 메뉴 ... 213 툴(Tools)바 ... 215 각종 속성(Properties) 창 ... 215 01 플래시 애니메이션 제작의 기본 과정 익히기 ... 217 무비 제작을 위한 환경 설정하기 ... 218 잠깐만요 : 새 작업 도큐먼트의 생성과 속성 설정하기 ... 218 무비에 사용될 글자 입력하고 위치 옮기기 ... 219 글자를 심벌로 등록하기 ... 220 무비 제작을 위한 키프레임 삽입하기 ... 220 잠깐만요 : 프레임과 심벌 이해하기 ... 221 심벌의 크기 조절과 색상 변환하기 ... 222 잠깐만요 : '자유 변형(Free Fransform) 툴'의 화살표 상태 ... 222 모션 트위닝(Motion Tweening) 애니메이션 적용하기 ... 223 잠깐만요 : 모션 트위닝 애니메이션에 필요한 작업 환경 ... 223 플래시 무비를 실행하고 저장하기 ... 224 한걸음 더 : 드로잉한 도형으로 애니메이션 만들기 ... 225 Self Test ... 228 02 모션 트위닝 애니메이션 실습 ... 229 레이어 추가하고 자동차 심벌 등록하기 ... 230 잠깐만요 : 타임라임의 레이어 기능 ... 230 이미지 파일을 불러와서 심벌로 변환하기 ... 231 무비 작업을 위한 키프레임 추가하고 배경 프레임 만들기 ... 232 잠깐만요 : 마우스를 드래그하여 프레임을 늘리고 줄이기 ... 232 자동차에 모션 트위닝 애니메이션 적용하기 ... 233 자동차가 서서히 사라지는 무비 완성하기 ... 236 이즈(Ease)를 적용하여 모션 트위닝 애니메이션에 속도감 넣기 ... 237 잠깐만요 : 모션 트위닝 속성(Properties) 창 ... 238 한걸음 더 : 어니언 스킨으로 무비 움직임 한꺼번에 확인하기 ... 239 Self Test ... 240 03 메인 페이지 로고 애니메이션 만들기 ... 241 새 레이어 만들고 프레임 추가하기 ... 242 글자 로고 심벌 만들기 ... 243 로고 글자와 로고 그림자의 크기 줄이기 ... 245 키프레임 추가하고 로고 크기 변형하기 ... 246 모션 트위닝 애니메이션 적용하기 ... 247 잠깐만요 : 색상 효과 적용 방법 이해하기 ... 249 한걸음 더 : 글자의 그림자가 뿌옇게 번진 것과 같은 효과 설정하기 ... 250 Self Test ... 252 04 모션 가이드 애니메이션 만들기 ... 253 새 레이어 만들고 나비 무비 클립 배치하기 ... 254 모션 가이드(Motion Guide) 레이어 추가하고 모션 가이드 그리기 ... 255 모션 가이드에 오브젝트 배치하기 ... 256 잠깐만요 : 오리엔트 패스와 스냅 ... 257 한걸음 더 : 나비 무비 클립 만들기 ... 258 Self Test ... 262 05 세이프 트위닝 애니메이션 만들기 ... 263 새 레이어에 도형 그리기 ... 264 글자 입력하고 모든 글자 분리하기 ... 265 세이프 트위닝 적용하고 무비 결과 확인하기 ... 268 한걸음 더 : 'Shape Hint' 이용하여 자연스러운 몰핑 애니메이션 만들기 ... 269 한걸음 더 : 그레이디언트를 이용한 색상 변화 애니메이션 만들기 ... 271 한걸음 더 : 'Break Apart' 기능 이용하여 비트맵 이미지 분리하고 원하는 부분 추출하기 ... 272 잠깐만요 : 오브젝트 지우기 ... 273 Self Test ... 274 06 마스크를 이용하여 메뉴 페이지 이미지 애니메이션 만들기 ... 275 마스크에 사용할 이미지 배치하고 심벌로 등록하기 ... 276 잠깐만요 : '라이브러리(Library) 패널'의 구조 ... 276 카메라 심벌에 틴트(Tint) 효과 애니메이션 적용하기 ... 277 마스크 레이어 만들기 ... 279 잠깐만요 : 마스크 이해하기 ... 282 한걸음 더 : 글자 마스크 애니메이션 만들기 ... 283 Self Test ... 286 07 버튼 심벌 만들기 ... 287 버튼 심벌 등록하기 ... 288 'Up' 버튼 드로잉하기 ... 288 잠깐만요 : 버튼 심벌의 네 가지 프레임 알아보기 ... 289 'Over' 버튼 드로잉하기 ... 294 작업한 버튼 무비에 배치하고 결과 확인하기 ... 296 한걸음 더 : 'Down' 프레임을 이용하여 마우스를 클릭했을 때의 버튼 모양 만들기 ... 298 Self Test ... 300 08 액션을 이용하여 무비 제어하기 ... 301 무비 정지 액션 만들기 ... 302 새 레이어에 버튼 심벌 배치하기 ... 303 잠깐만요 : '액션 패널' 인터페이스 ... 303 버튼 심벌에 무비 제어 액션 스크립트 설정하기 ... 304 잠깐만요 : 액션 스크립트를 작성할 수 있는 곳 ... 305 버튼 심벌에 적용한 액션 결과 확인하기 ... 306 잠깐만요 : '액션(Actions) 패널' 옵션 버튼 항목의 팝업 메뉴 ... 308 한걸음 더 : goto 액션으로 이미지 갤러리 무비 만들기 ... 309 Self Test ... 312 09 플래시 인트로 페이지 만들기 ... 313 일정한 횟수만큼 무비 실행한 후 다른 페이지로 이동하기 ... 314 잠깐만요 : 일반 모드와 전문가 모드 ... 314 잠깐만요 : 1프레임과 300프레임에 입력한 액션 스크립트 이해하기 ... 315 잠깐만요 : 'Publish Settings' 대화상자 ... 317 '스킵(Skip)' 버튼 이용하여 사이트 이동하기 ... 318 한걸음 더 : 'Skip' 버튼에 마우스를 올리면 다른 사이트로 이동하게 만들기 ... 321 Self Test ... 322 10 서브 메뉴가 나타나는 메뉴바 만들기 ... 323 서브 메뉴 배경 만들기 ... 324 액션에 사용할 프레임 레이블(Frame Label) 만들기 ... 325 서브 메뉴 배치하고 모션 트위닝 무비 적용하기 ... 326 주 메뉴에 마우스를 올리면 서브 메뉴가 나타나는 액션 설정하기 ... 328 한걸음 더 : 메뉴바 전체를 하나의 무비 클립으로 만들기 ... 332 Self Test ... 334 넷째마당 드림위버를 이용하여 웹 사이트 만들기 ... 335 드림위버 MX 2004의 인터페이스와 화면 구성 요소 ... 336 메뉴 ... 337 '삽입(Insert) 툴바' 그룹의 다양한 툴바 살펴보기 ... 339 01 웹 페이지의 텍스트 꾸미기 ... 341 예제 파일 불러와서 텍스트 입력하기 ... 342 텍스트 크기와 색깔 바꾸기 ... 344 서체와 텍스트 스타일 설정하기 ... 346 잠깐만요 : 텍스트 속성(Properties) 창 살펴보기 ... 349 잠깐만요 : 글자와 관련된 HTML 태그 ... 350 한걸음 더 : 목록 만들기 ... 351 잠깐만요 : 목록을 만들기 위한 HTML 태그 ... 353 Self Test ... 354 02 웹 페이지에 이미지 삽입하기 ... 355 웹 페이지에 배경 이미지 설정하기 ... 356 웹 페이지에 이미지 삽입하기 ... 358 잠깐만요 : 이미지를 웹에 맞게 최적화하기 ... 358 '에셋(Assets) 패널'로 이미지 삽입하기 ... 359 잠깐만요 : 웹 그래픽 표준 방식 ... 362 이미지와 텍스트 어울리게 배치하기 ... 363 잠깐만요 : 이미지 경로 지정하기 ... 364 이미지에 풍선 도움말 만들기 ... 365 한걸음 더 : 드림위버에서 롤오버(Rollover) 이미지 만들기 ... 366 Self Test ... 368 03 하이퍼링크로 웹 페이지 연결하기 ... 369 메인 페이지에서 메뉴 페이지 하이퍼링크 설정하기 ... 370 메뉴 페이지에서 하이퍼링크 설정하기 ... 372 잠깐만요 : 하이퍼링크를 만들기 위한 HTML 태그 ... 373 한걸음 더 : 한 문서 안에서 특정 위치로 이동하는 링크 만들기 ... 374 잠깐만요 : 네임 앵커 하이퍼링크를 설정하기 위한 태그 ... 375 Self Test ... 376 04 테이블을 이용하여 메인 페이지 터잡기 ... 377 표로 메인 페이지 터잡기 ... 378 셀 합치고 셀에 메인 페이지 이미지 배치하기 ... 379 테이블과 셀 속성 설정하여 페이지 완성하기 ... 381 잠깐만요 : 표 속성(Table Properties) 창과 셀 속성(Cell Properties) 창 살펴보기 ... 384 한걸음 더 : 트레이싱 이미지, 레이아웃 셀, 레이아웃 표를 이용하여 웹 페이지 레이아웃 작업하기 ... 386 Self Test ... 392 05 스타일시트로 가독성 높은 웹 페이지 만들기 ... 393 클래스 스타일을 이용하여 문단 모양 편집하기 ... 394 잠깐만요 : 스타일시트의 개념과 종류 ... 397 클래스 스타일을 이용하여 제목 스타일 만들기 ... 398 테그에 스타일시트 적용하여 나만의 태그 만들기 ... 400 스타일시트를 이용하여 하이퍼링크 텍스트의 모양을 색다르게 편집하기 ... 401 한걸음 더 : 외부 스타일시트 파일 만들고 다른 문서에도 동일한 스타일 시트 적용하기 ... 405 Self Test ... 408 06 프레임셋으로 홈페이지 만들기 ... 409 프레임 만들고 웹 페이지 배치하기 ... 410 잠깐만요 : 프레임과 프레임셋이란? ... 412 프레임 크기 고정하고 프레임 여백 없애기 ... 413 잠깐만요 : 프레임과 프레임셋 속성(Properties) 창 ... 415 프레임의 스크툴바 옵션 설정하고 결과 확인하기 ... 417 프레임셋에서 하이퍼링크 설정하기 ... 418 잠깐만요 : 프레임셋을 만들기 위한 HTML 태그 ... 419 한걸음 더 : 아이프레임(iframe) 만들기 ... 420 Self Test ... 424 07 다양한 비헤이비어로 다이내믹한 홈페이지 만들기 ... 425 비헤이비어 환경 설정하기 ... 426 잠깐만요 : '비헤이비어(Behaviors) 패널'과 다양한 비헤이비어 ... 427 'Open Browser Window' 비헤이비어 사용하기 ... 428 잠깐만요 : 'Open Browser Window' 대화상자의 여러 옵션 ... 429 'Call JavaScript'를 이용하여 새 윈도우 닫기 비헤이비어 설정하기 ... 430 잠깐만요 : '비헤이비어(Behaviors) 패널'의 'OnClick' 액션과 'Call JavaScript' 이벤트 ... 431 'Swap Image'를 이용하여 이미지 교체하기 ... 432 한걸음 더 : 'Set Text of Layer' 비헤이비어로 레이어 안의 텍스트 바꾸기 ... 434 Self Test ... 436 08 다이내믹한 메뉴 내비게이션 만들기 ... 437 메뉴 내비게이션 바 만들기 ... 438 잠깐만요 : 'Insert Navigation Bar' 대화상자의 옵션 ... 439 마우스를 올릴 때만 나타나는 서브 메뉴 만들기 ... 442 한걸음 더 : 펼침 목록 메뉴 만들기 ... 450 잠깐만요 : HTML 문서에 자바스크립트 넣기 ... 453 Self Test ... 454 09 레이어와 타임라인 애니메이션(드림위버 MX 부분) ... 455 레이어 삽입하고 편집하기 ... 456 잠깐만요 : 레이어(Layers) 속성 창 살펴보기 ... 459 타임라인을 이용하여 자동차 애니메이션 만들기 ... 460 타임라인 추가하여 여러 개의 개체를 동시에 움직이는 애니메이션 만들기 ... 462 잠깐만요 : 타임라인(Timeline)의 속성 ... 464 한걸음 더 : 곡선 애니메이션 만들기 ... 465 Self Test ... 468 다섯째마당 기획에서 출판까지 - 웹 사이트 프로젝트 따라잡기 ... 469 웹 사이트 파일 및 구조 미리보기 ... 470 01 웹 사이트 기획하기 ... 471 웹 사이트 제작에 들어가기 전에 점검할 사항 ... 471 웹 사이트의 주제와 대상 정하기 ... 472 자료 수집하기 ... 472 컨텐츠 선정과 메뉴 뽑아내기 ... 474 웹 사이트 내비게이션 설계 및 구조도 그리기 ... 475 홉