저자의 글 ... 3 부록 CD-ROM 소개 ... 5 미리 보는 예제 ... 6 이 책을 보는 방법 ... 8 찾아보기 ... 618 Chapter 01 웰컴 투 홈페이지 01 홈페이지 제작을 위한 준비 운동 ... 26 1. 웹 환경 이해하기 ... 26 2. 분야별 홈페이지 구경하기 ... 28 3. 웹사이트의 기획 순서 따라잡기 ... 30 비법전수 : 웹 안전 컬러(Web Safe Color) ... 35 02 필수 HTML! 이것만은 알아두자! ... 36 1. HTML의 기본 구조 ... 36 비법전수 : HTML 문서의 특징 ... 39 2. 문단 관련 태그 ... 40 3. 글자 관련 태그 ... 43 4. 그림 관련 태그 ... 44 5. 문서 관련 태그 ... 45 6. 하이퍼링크 태그 ... 47 7. 표 관련 태그 ... 48 8. 프레임 관련 태그 ... 50 Chapter 02 홈페이지가 즐거워지는 나모 웹에디터 2006 01 나모 웹에디터 2006 설치하기 ... 54 1. 제품 구성과 설치를 위한 시스템 사양 ... 54 2. 나모 웹스튜디오 2006 standard 설치하기 ... 56 02 나모 웹에디터 2006의 작업 환경 살펴보기 ... 60 1. 나모 웹에디터 2006의 화면 구성 ... 60 2. 패널과 도구 막대 다루기 ... 63 비법전수 : 문서 표시 탭 살펴보기 ... 65 03 나모 웹에디터 2006의 새로운 기능 파악하기 ... 66 1. 나모 웹에디터 2006의 새로운 기능 ... 66 비법전수 : 빠른 태그 편집기 ... 75 Chapter 03 웹페이지 변신을 위한 기초 테크닉 01 글꼴 속성과 문단 내용에 대한 모든 것! ... 78 1. [바로보기 - 문단] 패널 살펴보기 ... 78 2. 글꼴 속성을 내 맘대로 ... 81 3. 문단 속성을 조절하여 매끈하게 정돈하기 ... 84 4. 목록 만들어 내용 정리하기 ... 87 5. 수평선 삽입하여 내용 구분하기 ... 90 6. 이미지를 사용한 그림 목록 만들기 ... 92 비법전수 : 특수 기호 입력하기 ... 95 02 내 맘대로 꾸며보는 문서 배경 ... 96 1. 배경 색상과 배경 이미지 채우기 ... 96 2. 문서 제목 달고 완성하기 ... 99 비법전수 : 레이아웃 도우미! 바탕 레이아웃 이미지 ... 101 Chapter 04 홈페이지의 물줄기, 그림과 하이퍼링크 01 그림과 클립아트로 미술관 페이지 꾸미기 ... 104 1. 그림 패널과 그림 속성 제어하기 ... 104 2. 롤오버 이미지 만들기 ... 108 3. 클립아트로 장식하기 ... 111 비법전수 : 그림과 글자 정렬하기 ... 114 02 스마트 클립아트로 미술관 배너 만들기 ... 116 1. 스마트 클립아트 살펴보기 ... 117 비법전수 : 스마트 클립아트를 일반 그림으로 변경하기 ... 120 비법전수 : [스마트 클립아트] 대화상자 살펴보기 ... 121 2. 스마트 클립아트로 배너 만들기 ... 124 03 그림 효과를 활용하여 삽입된 그림 편집하기 ... 128 1. 그림 모서리를 둥글게 만들고 그림 효과 살펴보기 ... 129 비법전수 : [그림 효과] 대화상자 살펴보기 ... 131 2. 그림 위에 텍스트 삽입하기 ... 132 3. 그림에 투명색 지정하기 ... 133 비법전수 : 멋진 웹 그래픽 제작을 위한 나모 웹캔버스 2006 ... 135 04 하이퍼링크로 페이지 연결하기 ... 136 1. 외부 사이트 링크하고 링크 색상 바꾸기 ... 137 2. 미술관 페이지 링크하기 ... 140 3. 이미지 맵 링크하기 ... 141 4. 다운로드 링크 연결하기 ... 143 5. 이메일 링크하기 ... 145 6. 책갈피 링크하기 ... 147 7. 다른 문서의 특정한 위치로 책갈피 링크하기 ... 150 Chapter 05 표(Table)가 있는 아름다운 레이아웃 01 표에 대한 모든 것! ... 154 1. 표 만들기와 선택, 삭제하기 ... 154 2. 표 속성 제어하기 ... 156 3. 셀 합치기／나누기 ... 160 비법전수 : [표 속성] 대화상자 살펴보기 ... 161 4. 줄 삽입하기／지우기 ... 163 5. 셀 속성 제어하기 ... 165 6. 셀 안에 그림 삽입하기 ... 167 7. 표 안에 아기표 넣기 ... 168 8. 표 있는 문서에 배경 그림과 여백 지정하기 ... 171 비법전수 : 레이아웃 상자 그리기와 편집하기 ... 173 02 표를 활용한 깔끔한 레이아웃의 웹페이지 디자인 ... 176 1. 전체 레이아웃 잡기 ... 176 2. 셀 안에 그림 배치하기 ... 178 3. 표 안에 아기표 넣기 ... 179 4. 아기표 안에 그림 배치하기 ... 181 5. 아기표 삽입하여 내용 입력하기 ... 182 비법전수 : [나모 그림 나누기]를 이용한 이미지 슬라이스 ... 185 Chapter 06 폼을 마스터하기 위한 친절한 가이드 01 폼 필드로 만드는 회원 가입 양식 ... 190 1. 폼 정의하기 ... 190 2. 한 줄 글상자와 암호 글상자 만들기 ... 192 3. 펼침 목록 메뉴 만들기 ... 195 4. 스크롤 글상자 만들기 ... 198 5. 라디오 단추 만들기 ... 199 6. 확인 상자 만들기 ... 201 7. 파일 찾아보기 상자 만들기 ... 204 8. 누름 단추 삽입하기 ... 205 9. 그림 폼 필드와 폼 숨김 필드 ... 208 02 메일로 받아 볼 수 있는 폼 양식 제작 ... 210 1. 메일로 폼 내용 보내기 ... 210 비법전수 : 서버 사이드 스크립트란? ... 213 Chapter 07 스타일시트를 이용한 생동감 있는 웹디자인 01 스타일 설정의 모든 것! ... 216 1. HTML 태그 스타일 적용하기 ... 216 2. 링크 스타일 만들기 ... 219 3. 클래스 스타일 만들고 적용하기 ... 223 4. 외부 CSS 파일을 만들어 다른 문서에 적용하기 ... 225 비법전수 : 하이퍼링크 스타일에 마우스 커서 모양 바꾸기 ... 229 02 표와 폼 필드에 스타일 적용하기 ... 230 1. td 태그에 스타일 적용하기 ... 231 2. 롤오버 셀 만들기 ... 233 3. 스크롤 막대 색상 변경하기 ... 235 4. 폼 필드에 배경색과 점선 테두리 적용하기 ... 236 비법전수 : 폼 필드에 마우스 포인터를 올렸을 때 배경 색상 바꾸기 ... 238 비법전수 : 나모 웹에디터 2006의 폼 메일 양식 이용하기 ... 239 Chapter 08 웹디자인의 마법사, 레이어 01 레이어로 만든 다이나믹 홈페이지 ... 242 1. 레이어 속성 제어하기 ... 242 비법전수 : [바로보기 - 레이어] 패널과 [레이어 속성] 대화상자 살펴보기 ... 245 2. 레이어에 표 삽입하여 내용 만들기 ... 246 3. 레이어의 Z 순서 바꾸기 ... 248 비법전수 : 2개 이상 레이어의 정렬, 간격, 크기 조절하기 ... 251 02 타임 라인을 이용한 레이어 애니메이션 ... 252 1. 직선 애니메이션 만들기 ... 252 2. 곡선 애니메이션 만들기 ... 255 3. 자유 곡선 애니메이션 만들기 ... 256 비법전수 : 깜박거리는 애니메이션 만들기 ... 258 Chapter 09 내 손으로 직접 꾸며보는 멀티미디어 홈페이지 01 플래시 무비 삽입하고 버튼 만들기 ... 262 1. 플래시 무비 삽입하기 ... 262 2. 플래시 무비의 배경색 투명하게 만들기 ... 264 3. 플래시 버튼 만들기 ... 266 비법전수 : 나모 프리모션 2006 살펴보기 ... 268 02 미디어 마법사로 동영상과 배경 음악 삽입하기 ... 270 1. 동영상 삽입하고 속성 제어하기 ... 270 2. 배경 음악 삽입하고 속성 제어하기 ... 274 비법전수 : 클릭할 때마다 다른 음악이 나와요! ... 275 Chapter 10 세련된 구성을 도와주는 프레임 01 인라인 프레임 만들기 ... 280 1. 인라인 프레임 속성 제어하기 ... 280 2. 인라인 프레임 문서 링크 걸기 ... 282 비법전수 : 포토 앨범 만들기 ... 285 비법전수 : 홈페이지에 사용되는 그림 파일의 형식 ... 289 02 프레임으로 편리한 네비게이션 환경 만들기 ... 290 1. 프레임셋 만들고 프레임 배경 색상 채우기 ... 290 2. 프레임과 프레임셋 저장하기 ... 292 3. 프레임 속성 조절하기 ... 295 비법전수 : [프레임 속성] 대화상자 살펴보기 ... 297 4. 프레임 문서에 링크 연결하기 ... 298 5. 프레임에 미술관 문서 삽입하기 ... 302 6. 미술관 메뉴에 링크 연결하기 _top ... 304 7. 미술관 메뉴 링크 연결하기 _사용자 프레임 ... 306 8. 미술관 메뉴 링크 연결하기 _blank ... 309 비법전수 : 두 개의 프레임이 동시에 바뀌게 링크 연결하기 ... 310 chapter 11 생동감을 불어넣는 스크립트 마법사 01 웹페이지에 리듬감을 주며 흘러가는 텍스트 ... 314 1. 레이어에 흐르는 효과 설정하기 ... 314 2. 글상자 안에서 움직이는 텍스트 ... 316 3. 상황선에서 움직이는 텍스트 ... 318 02 그림과 셀의 특별한 변신! 롤오버 효과 ... 320 1. 롤오버 그림 만들기 ... 320 2. 롤오버 셀 만들기 ... 322 03 다양한 네비게이션 효과 ... 324 1. 텍스트 메뉴 만들기 ... 324 2. 펼침 목록 메뉴 만들기 ... 328 3. 접힘 메뉴 만들기 ... 329 04 레이어에 설정하는 움직이는 효과 ... 334 1. 떠 있는 레이어 ... 334 2. 슬라이딩 레이어 ... 336 3. 마우스 포인터를 따라다니는 레이어 ... 337 05 시선을 확 사로잡는 화면 전환 효과 ... 338 1. 배경 색상 전환하기 ... 338 2. 장면 전환하기 ... 340 06 다양한 스크립트 마법사로 멋 내는 웹페이지 ... 342 1. 이동 단추 만들기 ... 342 2. 순환 배너 만들기 ... 345 3. 텍스트 시계 넣기 ... 347 4. 액세스 정보 넣기 ... 348 5. 애니메이션 효과 지정하기 ... 351 비법전수 : 새 윈도우 열기, 새 윈도우 제어용 쿠키 만들기 ... 352 chapter 12 짜릿한 액션과 이벤트로 나모 졸업하기 01 내 맘대로 그림 제어하고, 나타났다 사라지는 서브메뉴 만들기 ... 358 1. 롤오버 이미지 만들기 ... 358 비법전수 : '이벤트'란? ... 362 2. 그림 크기 제어하기 ... 363 3. 배경 그림 바꾸기 ... 365 4. 레이어 위치와 Z 순서 변경하기 ... 366 5. 레이어를 이용한 서브메뉴 만들기 ... 369 02 윈도우가 나타날 때 다양한 효과 주기 ... 376 1. 경고 메시지와 함께 웹사이트 이동하기 ... 376 2. 일정 시간이 지난 후 다른 웹 문서로 이동하기 ... 378 3. 윈도우 스크롤 효과내기 ... 379 4. 회전하는 윈도우 효과 만들기 ... 380 5. 펼쳐지는 윈도우 효과 만들기 ... 382 6. 흔들리는 윈도우 효과 만들기 ... 383 03 작게 또는 풀 스크린으로 새 윈도우 띄우기 ... 384 1. 새 윈도우로 열기 ... 385 2. 전체 화면 윈도우로 열기 ... 386 3. 윈도우 닫기 버튼 만들기 ... 388 04 폼 필드에 입력된 내용 검사하기 ... 390 1. 이메일 주소 검사하기 ... 390 2. 숫자 검사하기 ... 393 3. 폼 내용 검사하기 ... 394 05 레이어의 특별한 변신과 다중 프레임 링크하기 ... 396 1. 색상이 반전되는 필터 효과 ... 396 2. 파동 모양으로 바뀌는 필터 효과 ... 399 3. 동시에 두 개의 프레임 바꾸기 ... 400 4. '인쇄하기' 버튼 만들기 ... 403 비법전수 : 스크립트 함수를 호출하여 문서에 Password 걸기 ... 405 Chapter 13 띄워보자, 미술관 홈페이지 01 웹 상에 홈페이지 공개하기 ... 410 1. 무료 웹 계정 만들기 ... 410 2. 미술관 사이트 출판하기 ... 412 3. 출판한 미술관 사이트 확인하기 ... 416 02 무료 게시판 연결하고 다시 출판하기 ... 418 1. 무료 게시판을 신청하여 만들기 ... 418 2. 게시판 연결하고 다시 출판하기 ... 419 비법전수 : 블로그 게시물을 수정하여 올리기 ... 423 비법전수 : 편리한 템플릿 활용하기 ... 427 Chapter 14 재미가 넘치는 분야별 웹사이트 실전 제작 01 시네마 천국 영화 웹사이트 만들기 ... 432 1. 사이트 기획과 스토리보드 ... 433 2. 메인 페이지의 시작! 인트로 페이지 만들기 ... 436 3. 액션을 활용한 풀 스크린 윈도우 연결하기 ... 438 4. 메인 페이지 레이아웃 잡기 ... 439 5. 롤오버 메뉴 버튼 만들기 ... 441 6. 표 안에 그림 삽입하기 ... 444 7. 표 안에 아기표 넣기 ... 445 8. 메뉴바 만들기 ... 448 9. 액션을 이용하여 배경 음악 제어하기 ... 451 10. 풀 스크린 윈도우 닫기 버튼 만들기 ... 453 11. 텍스트 입력하고 완성하기 ... 454 02 한국의 온돌과 부뚜막 웹사이트 만들기 ... 456 1. 사이트 기획과 스토리보드 ... 456 2. 메인 페이지의 시작! 아기표 삽입하여 이미지 배치하기 ... 460 3. 공지사항, 옹기 특별전, 부뚜막 마을 갤러리 만들기 ... 464 4. 텍스트 입력하기 ... 470 5. 레이어를 이용하여 퀵 메뉴 만들고 완성하기 ... 472 03 소람 자수박물관 웹사이트 만들기 ... 474 1. 사이트 기획과 스토리보드 ... 475 2. 전체 레이아웃 잡기 ... 476 3. 박물관 새 소식과 특별전 그림 삽입하기 ... 479 4. 텍스트 입력하기 ... 481 5. 셀에 스타일 적용하기 ... 484 6. 서브 페이지의 시작! 전체 레이아웃 잡기 ... 485 7. 특별전 페이지 내용 입력하기 ... 487 8. 셀에 스타일 적용하기 ... 490 9. 새 윈도우로 특별전 페이지 링크 걸기 ... 491 10. 완성된 웹사이트 확인하기 ... 493 04 플래시 무비가 있는 다이나믹한 여행사 웹사이트 만들기 ... 494 1. 사이트 기획과 스토리보드 ... 495 2. 메인 페이지의 시작! 문서 속성 제어하기 ... 497 3. 표를 이용한 전체 레이아웃 설정하기 ... 499 4. 플래시 무비 삽입과 속성 제어하기 ... 501 5. 내용 표 만들기 ... 504 6. 표에 여행 상품 이미지와 플래시 무비 배치하기 ... 507 7. 회원 가입 메뉴에 링크 연결하기 ... 509 8. 회원 가입 문서에 메인 비주얼 배치하기 ... 510 9. 회원 가입 표 만들기 ... 512 10. 폼 문서 정의하기 ... 515 11. 한 줄 글상자와 암호 글상자 넣기 ... 517 12. 회원 가입과 다시작성 버튼 삽입하기 ... 520 13. Home 버튼의 링크 연결하고 확인하기 ... 521 14. 완성된 웹사이트 확인하기 ... 522 05 허브 전문샵 쇼핑몰 웹사이트 만들기 ... 524 1. 사이트 기획과 스토리보드 ... 525 2. 메인 페이지 시작! 문서 전체에 이미지와 버튼 배치하기 ... 527 3. 표 만들어 서브 메뉴 버튼 배치하기 ... 531 4. 레이어 만들어 컨텐츠 배치하기 ... 536 5. 공지사항 작성하기 ... 540 6. 스크립트 마법사로 이벤트 창 띄우기 ... 543 7. 하루에 한 번씩만 열리는 이벤트 창 만들기 ... 544 Chapter 15 도전! 웹사이트 리뉴얼 실전 제작 01 세상을 뒤바꾼 IT 기업, KT 사이트 리뉴얼 ... 550 1. 리뉴얼 사이트 레이아웃 ... 551 2. 메인 페이지의 시작! 화면 좌측에 플래시 메뉴 삽입하기 ... 551 3. 중앙에 '포커스'와 '이벤트' 이미지 배치하기 ... 554 4. '새로운소식' 내용에 하이퍼링크 만들기 ... 557 5. 롤오버 링크 스타일 만들기 ... 559 6. 화면 우측과 하단에 이미지를 배치하여 완성하기 ... 562 7. 스크롤 막대 색깔 바꾸기 ... 565 02 Nate Drive 사이트 리뉴얼 ... 566 1. 리뉴얼 사이트 레이아웃 ... 567 2. 메인 페이지의 시작! 배경 이미지 삽입하기 ... 567 3. 화면 좌측에 각종 소식 이미지 배치하기 ... 569 4. 공지사항 작성하기 ... 574 5. 타임 라인을 이용한 애니메이션 만들기 ... 575 6. 하단의 메뉴 이미지와 핸드폰 위에 버튼 아이콘 배치하기 ... 578 7. 단순한 하이퍼링크 연결하기 ... 580 8. 이미지 맵으로 링크 연결하고 완성하기 ... 581 03 온라인 교육 사이트 리뉴얼 ... 584 1. 리뉴얼 사이트 레이아웃 ... 584 2. 샘플 강좌／인기 강좌 배치하기 ... 586 3. 관련 소식과 공지사항 만들기 ... 588 4. 기타 관련 정보와 상담 메뉴 배치하기 ... 592 5. 동영상 강좌 링크로 연결하고 완성하기 ... 593 6. 동영상 강좌 페이지 디자인하기 ... 594 7. 동영상 파일 배치하기 ... 597 8. 강좌 리스트에 롤오버 셀 만들기 ... 599 9. 완성된 페이지 확인하기 ... 602 Appendix : 게시판 제작 도우미, 나모 웹보드 01 나모 웹보드로 게시판 만들기 ... 606 1. 서버에 웹보드 설치하기 ... 606 비법전수 : [서버정보 추가] 대화상자 살펴보기 ... 607 2. 설치된 게시판 확인하기 ... 610 3. 게시판에 새로운 스킨 등록하기 ... 611 4. 게시판에 새로운 스킨 적용하기 ... 614 5. 웹 문서에 게시판 삽입하기 ... 617