목차 일부
머리말 ... 3
이 책을 보는 방법 ... 4
이 책의 예제 파일 사용하는 방법 ... 6
첫째마당 웹 디자인 기초 이론의 이해 ... 17
01 웹 사이트란 무엇인가? ... 18
웹 사이트 관련 용어와 개념 ... 18
웹 사이트 제작과 관련된 기술 ... 22
02 웹 디자인의 개념과 실제 ... 25
웹의...
더보기
목차 전체
머리말 ... 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
홉
더보기 닫기
Export to Refworks
캠퍼스간대출
소재불명도서
자료배달서비스
인쇄
