목차 일부
머리말 ... 3
책의 특징 ... 8
책의 구성 ... 11
부록 CD-ROM 활용하기 ... 15
팁목차 ... 34
1 웹디자인 기본 알기
Section01 웹디자인을 위한 기본 알기 ... 40
1. 월드와이드웹(WWW : World Wide Web)의 개념 ... 40
2. 홈페이지 ... 41
3. 웹디자인 ...
더보기
목차 전체
머리말 ... 3
책의 특징 ... 8
책의 구성 ... 11
부록 CD-ROM 활용하기 ... 15
팁목차 ... 34
1 웹디자인 기본 알기
Section01 웹디자인을 위한 기본 알기 ... 40
1. 월드와이드웹(WWW : World Wide Web)의 개념 ... 40
2. 홈페이지 ... 41
3. 웹디자인 ... 41
4. 잘된 웹디자인이란? ... 42
5. 베스트 웹디자인 ... 44
Section 02 어떤 홈페이지를 만들까? ... 48
1. 홈페이지의 기획 ... 48
2. 홈페이지는 어떻게 만들어질까요? ... 49
3. 홈페이지의 작동 원리 ... 51
Section 03 웹디자인에 필요한 프로그램들 ... 52
1. 이미지 편집 프로그램 ... 53
포토샵 6.0 ... 53
페인트샵프로 7 ... 53
ezTOMATO Studio V1.0 ... 54
ImageForge V2.49 ... 54
2. 웹에디터 프로그램 ... 55
나모 웹에디터 4(Namo Webeditor) ... 55
드림위버 4(Dreamweaver) ... 56
프론트페이지 2000(Frontpage) ... 56
FLASH 5 ... 57
HomeSite v4.5.2 ... 57
3. 그 외의 웹이미지 프로그램 ... 58
어도비 이미지레디 3 ... 58
Cool 3D ... 58
Animation shop 3 ... 59
Gif Animator 4 ... 59
Section 04 모니터와 해상도 이해하기 ... 60
1. 모니터 해상도에 따른 홈페이지의 모습 ... 61
2. 이미지 해상도 ... 63
Section 05 웹디자인을 위한 이미지 ... 64
1. 그림 파일 종류 ... 64
2. 비트맵과 벡터 ... 68
3. 이미지 파일 최적화 ... 70
2. 홈페이지 디자인하기
Section 01 메인 페이지 ... 74
Step 1 포토샵 6으로 웹디자인하기 ... 76
Step 2 이미지 슬라이스하여 저장하기 ... 89
Step 3 이미지레디 3으로 롤오버, 애니메이션 만들고 저장하기 ... 93
Section 02 일기 페이지 ... 98
Step 1 포토샵 6으로 웹디자인하기 ... 100
Step 2 배경 그림 저장하기 ... 106
Step 3 이미지레디 3으로 슬라이스하여 저장하기 ... 109
Section 03 포트폴리오 페이지 ... 112
Step 1 포토샵 6으로 웹디자인하기 ... 114
Step 2 배경 그림 저장하기 ... 122
Step 3 이미지레디 3으로 애니메이션 만들기 ... 127
Section 04 앨범 페이지 ... 130
Step 1 포토샵 6으로 웹디자인하기 ... 132
Step 2 배경 그림 저장하기 ... 145
Step 3 이미지레디 3으로 슬라이스하여 저장하기 ... 148
Section 05 러브 페이지 ... 150
Step 1 포토샵 6으로 웹디자인하기 ... 152
Step 2 배경 그림 저장하기 ... 160
Step 3 이미지레디 3으로 슬라이스하여 저장하기 ... 163
Section 06 추억 페이지 ... 166
Step 1 포토샵 6으로 웹디자인하기 ... 168
Step 3 이미지 슬라이스하여 저장하기 ... 175
Remember-1 ... 180
Step 1 포토샵 6으로 웹디자인하기 ... 180
Step 3 이미지레디 3으로 슬라이스하여 저장하기 ... 194
Section 07 페이지 코딩하기 ... 198
1. Main ... 200
프레임 나누고 이미지 자리잡기 ... 200
메뉴 넣기 ... 205
롤오버 버튼 만들기 ... 211
2. Diary ... 214
프레임 나누고 이미지 자리잡기 ... 214
3. Portfolio ... 222
프레임 나누고 이미지 자리잡기 ... 222
롤오버 버튼 만들기 ... 227
4. Album ... 232
프레임 나누고 이미지 자리잡기 ... 232
파일 저장하여 완성하기 ... 237
5. Love ... 240
프레임 나누고 이미지 자리잡기 ... 240
파일 저장하여 완성하기 ... 245
6. Remember ... 248
프레임 나누고 이미지 자리잡기 ... 248
파일 저장하여 완성하기 ... 253
7. 메뉴에 링크걸기 ... 256
3. 또 다른 홈페이지 디자인하기
Section 01 TV속 애니메이션 ... 262
Step 1 포토샵 6으로 웹디자인하기 ... 264
Step 2 이미지레디 3으로 애니메이션, 롤오버 만들기 ... 273
Step 3 나모 웹에디터 4로 코딩하기 ... 279
Section 02 마나조아 사이트 ... 302
Step 1 포토샵 6으로 웹디자인하기 ... 304
Step 2 이미지레디 3으로 애니메이션, 롤오버 만들기 ... 318
Step 3 나모 웹에디터 4로 코딩하기 ... 328
Section 03 요술상자 사이트 ... 342
Step 1 포토샵 6으로 웹디자인하기 ... 344
Step 2 이미지레디 3으로 애니메이션, 롤오버 만들기 ... 357
Step 3 나모 웹에디터 4로 코딩하기 ... 360
4 홈페이지 날개달기
Section 01 패비콘(Favicon) 만들기 ... 366
1. 패비콘(Favicon : 즐겨찾기 아이콘) ... 366
2. 나만의 즐겨찾기 아이콘 만들기 ... 367
인터넷에서 다운받기 ... 368
bmp나 gif 파일을 아이콘으로 변환하는 방법 ... 369
아이콘 제작 프로그램을 이용하여 직접 만들기 ... 370
Section 02 떠다니는 아이콘 만들기 ... 376
1. 포토샵과 이미지레디로 이미지 완성하기 ... 377
2. 나모 웹에디터의 스크립트 마법사 이용하기 ... 382
Section 03 메모장 달기 ... 386
Section 04 카운터 달기 ... 390
Section 05 DHTML로 날개달기 ... 392
1. 시작 페이지로 지정하기 ... 395
2. 내 홈페이지를 즐겨찾기에 추가하는 아이콘 넣기 ... 396
3. 아이씨큐 오라인/오프라인 상태 보여주기 ... 397
4. 홈페이지에 효과주기 ... 398
5. 글자나 문장에 효과주기 ... 403
6. 그 밖의 태그 ... 406
링크된 곳 밑줄 없애기 ... 407
문서 내에서 단어 찾기 검색창 달기 ... 407
미니 계산기 달기 ... 407
현재 시간 알려주기 ... 408
시계 넣기 ... 408
상태바에 통통 튀는 문자 넣기 ... 410
5. 알뜰한 나! 홈페이지 공짜 공간 갖기
Section 01 알뜰한 나! 공짜 계정 갖기 ... 414
1. 네이버홈 ... 416
2. 인터넷에 집 짓자! 하이홈쩜컴 ... 418
3. 네띠앙 홈 스위트 홈 서비스 ... 420
4. 인테넷제국 ... 422
5. 웨피 홈타운 ... 424
6. 드림위즈 ... 426
7. 한미르 ... 428
8. 드림엑스 ... 430
9. 인티시티 ... 433
Section 02 홈페이지 주소를 짭고 쉽게 ... 434
1. 무료 2차 도메인 제공업체 ... 434
6 FTP로 홈페이지 업로드하기
Section 01 FTP 활용하기 ... 442
1. FTP 프로그램은? ... 442
2. FTP 프로그램 활용 범위 ... 443
3. 다양한 FTP 프로그램 종류 ... 443
4. Cute FTP 사용법 ... 444
Section 02 예제 홈페이지 업로드하기 ... 452
7 홈페이지 자랑하기
Section 01 홈페이지 자랑하기 ... 458
1. 등록대행업체 이용하기 ... 459
2. 이곳저곳에서 자랑하기 ... 461
Section 02 홈페이지 대회 출품하기 ... 462
웹디자인 도우미
1. 웹 컬러 차트 ... 466
2. 폰트 리스트 ... 468
이미지 폰트 ... 469
딩뱃 폰트 ... 471
영문 폰트 ... 478
팁모음
A
Album 페이지 폴더 정리 ... 239
algorithm ; 알고리즘 ... 69
Arc ... 111
B Bulge ... 111
C
CGI란? ... 50
Colorize ... 309
Combine Slice ... 196
Combine Slices ... 126
compression ; (파일) 압축 ... 67
Contour ... 137
corves와 brightness/contrast의 다른 점 ... 133
Create Warped Text ... 111
Cute FTP에서의 팝업 메뉴 ... 450
D Diary 페이지 폴더 정리 ... 221
F
Fish ... 111
FTP〔file transfer protocol〕의 사전적 의미 ... 443
H
Html 파일 저장 ... 164
html과 htm은 다른 것일까요? ... 286
HTTP〔hypertext transfer protocol〕의 사전적 의미 ... 41
I
IconCool 소개 ... 374
IconForge ... 54
IconForge 그리기 툴 사용법 ... 373
IconForge 색상 지정하기 ... 371
ICQ(http : www.icq.com) ... 397
Invert와 Inverse ... 84
L Love 페이지 폴더 정리 ... 247
P
POP(Post Office Protocol) & SMTP(Simple Mail Transfer Protocol) ... 421
Portfolio 페이지 폴더 정리 ... 231
R
Remember 페이지 폴더 정리 ... 255
RGB와 CMYK 컬러모드 ... 63
S
Save for Web 기능 ... 92
Squeeze ... 111
Stroke 생성 위치 ... 192
Stroke로 테두리 만들기 ... 192
Stroke의 색 지정 설명 ... 142
Swatches 팔레트 ... 138
T
Transform > Distort ... 96
Transform > Rotate ... 86
Transform > Scale ... 84
Transform > Skew ... 80
Tween ... 128
가
그라데이션 설정하기 ... 174
그라데이션 툴 ... 86
그리드 단위 변경하기 ... 165,
그리드 만들기 ... 352
그림 설명 ... 334
글 제목 ... 230,
글꼴 지정 ... 292
나
나모 웹에디터에서 영어문장 대소문자 바꾸기 ... 206
노이즈 효과를 주기 저에 흰색으로 채워주는 이유는? ... 268
높이 지정 100% ... 338
다
도메인 검색 ... 439
도메인 등록 ... 415
도메인 등록비와 관리비 ... 415
도메인(Domain) ... 434
도메인(Domain) 대여 ... 438
두 개의 창에서 이미지 옮겨가기 ... 182
딩뱃 폰트(Dinbat Font) ... 270
떠다니는 아이콘 활용 ... 377
떨어지는 이미지 바꿔주기 ... 402
또 다른 애니메이션 ... 327
라
레이어 넣기 ... 288
레이어 링크 ... 181
레이어 복사하기 ... 121,
레이어 세트 ... 310
레이어 스타일 ... 137
레이어 이름 달기 ... 354
레이어 정리하기 ... 79
레이어 찾기 ... 314
레이어의 그림자 효과 ... 153
롤오버 버튼 만들기 ... 197
링크된 곳 밑줄 없애기 ... 379
링크된 레이어 합치기 ... 190
마
마우스 포인터 모양 바꾸기 ... 102
말림 막대 ... 282
매직 툴로 선택한 부분이 엉망이 되었다구요? ... 140
매직 툴의 Tolerance ... 170
매킨토시에서 Free Transform으로 이미지를 변형시킬 때 누르는 키는? ... 85
메뉴의 Html 문서를 저장하는 이유는? ... 94
무료 카운터 얻기 ... 298
무료계정 사이트의 FTP 주소 모음 ... 451
무료로 게시판을 제공하는 곳 ... 425
문서 배경색을 포토샵에서 작업한 색으로 지정하기 어려울 때 ... 330
문장의 일부 변형 ... 135
문장의 줄간격을 예쁘게 조절하는 방법 ... 404
미투유투(www.me2u2.co.kr) ... 416
바
배경색 찾기 ... 360
배경없는 이미지를 복사한 후 새로운 파일을 만들면? ... 176
벡터 쉐이프 툴 ... 311
부록 CD-ROM이나 인터넷 상의 소스 사용하기 ... 411
브러시 사이즈 및 모양 ... 103
브러시 옵션 변경하기 ... 101
비트맵(Bitmap) ... 71
사
사용자 정의색 추가 ... 332
새 이름으로 저장 ... 180
새로운 파일의 배경 레이어 ... 108,
서버 ... 51
서체 확인 ... 271
서체가 없을거예요 ... 135
서체의 종류 및 특징 ... 71
선택 영역 다중 선택하기 ... 116
선택 툴 크기 정하기 ... 266
선택 툴과 Shift 키 ... 143
선택 툴의 사이즈 ... 183,
선택 툴의 크기 정하기 ... 347
셀 안에서의 기준 위치 ... 338
쇽웨이브, shockwave ... 59
스크립트 마법사 ... 336
스포이드 툴의 활용 ... 142
슬라이스 조각 다중선택 ... 323
슬라이스 조각의 번호 붙이기 ... 213
슬라이스 툴을 사용하지 않고 Create Slices from Guides를 사용하는 이유 ... 110
슬라이스 툴로 직접 자르기 ... 194
슬라이스하기 ... 148
아
안내선 ... 183,
안내선 긋기 ... 77,
안내선 만들기 ... 88
안내선 보이기 ... 77
안내선 잠그기 ... 78
애니메이션 버튼을 위한 슬라이스 ... 125
애니메이션 지연 속도 ... 129
애니메이션 지연 시간 ... 319
애니메이션 팔레트 버튼 설명 ... 319
애니메이션 프레임의 지연 시간 ... 320
애니메이션을 만들고 나서 텍스트 메뉴를 저장하는 이유?? ... 322
예제의 태그를 쉽게 수정하는 방법 ... 399
오른쪽 버튼 사용금지 페이지에서 이미지 저장하기 ... 427
왼쪽 프레임의 폭 결정 ... 281
웹 브라우저로 미리보기 ... 362
웹 이미지의 컬러 모드 ... 307
웹디자인 작업 순서 ... 152
웹에서 가져온 그림 파일 ... 104,
웹에서의 폰트 ... 289
웹호스팅 ... 422
웹호스팅 업체별 도메인 사용 가격 비교 ... 415
음성 게시판 ... 341,
이미 업로드한 파일의 이름 변경하기 ... 455
이미지 가져오기 ... 284
이미지레디에서의 Undo 기능 ... 106
이미지 반대로 돌리기 ... 154
이미지 복사하기 ... 119
이미지 조각내기 ... 285
이미지 최적화 ... 162
이미지레디에서 Slices 메뉴의 Create Slices from Guides ... 178
이미지레디에서의 롤오버 ... 358
이미지레디에서의 롤오버 그림 ... 274
이미지레디에서의 저장 ... 276
이미지레디의 슬라이스 메뉴 ... 196
이미지를 복사한 후 새로운 파일 만들기 ... 160
이미지맵으로 링크걸기 ... 259
이미지 스타일 ... 350
이미지 스타일 활용하기 ... 363
익스플로러의 시작페이지 지정하기 ... 395
인터넷상에서 제공하는 웹디자인 소스 ... 419
일곱 메뉴 규칙 ... 45
일러스트레이터에서 카피한 것을 포토샵에서 붙이기 할 수 있습니까?? ... 345
자
자르기 툴 ... 316
자바스크립트와 자바애플릿의 차이 ... 406
자유로워진 대화상자들 ... 323
자의 단위가 cm로 되어 있다면... ... 76
작업 중에 프레임 나누기 ... 328
작업 취소하기 ... 267
작업 파일 저장 ... 317
작업 화면의 윗쪽과 왼쪽에 자가 아예 나타나질 않는다구요? ... 100
잘라내기 ... 124,
잘라진 그림에서 이미지맵으로 하이퍼링크 만들기 ... 227
저장 폴더 경로 ... 278
전체 파일 저장 이유 ... 278
정원으로 다중선택하기 ... 313
정확한 슬라이스 하기 ... 274
줄무늬 패턴 만들기 ... 306,
지우개 ... 134,
차 첫 메인 화면의 파일 이름 ... 287
카
커서의 위치 ... 289
컬러 모드 ... 105
컬러 모드와 필터 ... 134
크기를 줄이면서 이동하기 ... 143,
클릭 세 번 규칙 ... 43
타
테두리의 생성 위치 ... 346
테이블로 본문 꾸미기 ... 294
텍스트 레이어가 이상해요 ... 191
텍스트 레이어와 이미지 레이어의 구분 ... 159
텍스트 입력 ... 103
텍스트에 필터 적용 ... 155,
텍스트의 가장자리 처리 방법(알리아싱) ... 120
텍스트의 줄바꿈 ... 290
트루 타입(True Type) ... 71
파
파일 사이즈 ... 265,
파일 저장 경로 ... 318
파일 크기 ... 344
파일 크기의 단위 ... 264
패턴 이미지 ... 162
패더값(Feather) 적용하기 ... 312
페이지 이동 ... 87
페이지 작업 순서 ... 168
포토샵에서 그리드로 작업 편리하게 하기 ... 1
포토샵에서 *.al 파일 직접 열기 ... 348
포토샵에서의 저장 ... 89
폰트의 이름이 영문으로 나오나요? ... 118
프레임 높이는 어떻게? ... 329
프레임 설정 ... 280
프레임 이름 & 대상 프레임 ... 296
프레임(Frame) ... 201
프레임과 프레임 셋 ... 286
프레임셋 미리보기 ... 335
프레임의 경게선 두께 ... 300
프레임의 배경색 ... 324
필터 다시 적용하기 ... 81,
하
한글 폰트의 이름이 영문으로 나오나요? ... 179
화면상에서는 괜찮았는데 저장된 파일은 깨지는 수가 있어요. ... 146
히스토리 ... 158
더보기 닫기