8장 웹 페이지의 저작

8.1 HTML 저작도구를 이용한 웹 문서의 작성 8.1.1 텍스트 편집기의 이용 HTML 문서 : ASCII 파일 -> ASCII 파일 편집 가능한 텍스트 편집기 사용가능 HTML 언어를 배우기 좋음 윈도우즈 메모장 이용 [시작]->[프로그램]->[보조프로그램]->[메모장] 간단하고, 사용하기 쉬움 2

Microsoft Word, 한글과컴퓨터의 한글 워드프로세서등 코딩후 ASCII 파일로 저장 워드프로세서의 이용 Microsoft Word, 한글과컴퓨터의 한글 워드프로세서등 코딩후 ASCII 파일로 저장 한글 : "텍스트 (완성형)"으로 저장 Word : "텍스트만"으로 저장 작성한 문서를 HTML 문서로 변환하여 저장하는 기능 포함 좀더 쉬운 HTML 문서의 작성 가능 WYSIWYG 방식보다는 불편 3

8.1.2 WYSIWYG 방식 저작도구의 이용 What You See Is What You Get 태그를 모르더라도 HTML 문서 작성 가능 WYSIWYG 방식의 저작도구 Front Page: Microsoft사가 만든 홈페이지 저작도구 HTML Tag를 모르더라도 손쉽게 홈페이지를 제작할 수 있음 Composer: Netscape Communicator에서 기본적으로 제공되는 저작도구 4

Adobe사에서 만든 웹에디터로 편리한 기능들로 구성 쉽게 웹사이트를 만들고 관리할 수 있음 HotMetal Pro: Page Mill: Adobe사에서 만든 웹에디터로 편리한 기능들로 구성 쉽게 웹사이트를 만들고 관리할 수 있음 HotMetal Pro: Softquad사에서 만든것으로 프레임 편집기능이 좋고, HTML을 잘알고 있는 경우에 더욱 잘 사용할 수 있음 나모 웹 에디터: 국내에서 만들어진 에디터로 외국의 것에 견주어도 부족함이 없음 5

8.2 FrontPage98을 이용한 웹 문서의 작성 FrontPage의 개요 Microsoft사가 만든 WYSIWYG 방식의 웹 문서 저작도구 최신 버젼은 FrontPage 98임 장점 HTML에 대한 별다른 지식없이도 좋은 홈페이지를 만들 수 있음 FrontPage Explorer를 통한 손쉬운 Web Site 관리 6

Web Site내의 여러가지 File등과 Link들을 관리 자유롭게 이름을 바꾸거나 위치를 옮겨도 Link를 관리해 줌 FrontPage의 구성 FrontPage는 크게 FrontPage Explorer, FrontPage Editor, 그리고 Personal Web Server로 이루어져 있음 FrontPage Explorer 동시에 복수 Web Site의 관리가 가능함 Web Site내의 여러가지 File등과 Link들을 관리 자유롭게 이름을 바꾸거나 위치를 옮겨도 Link를 관리해 줌 FrontPage Editor Web Page를 작성할 수 있는 WYSIWYG Editor 기존의 Word Processor와 유사한 방법으로 쉽게 배울 수 있는 장점이 있음 7

FrontPage내에 있는 개인용 Web Server Personal Web Server FrontPage내에 있는 개인용 Web Server 자신이 만든 웹페이지를 다른 컴퓨터가 액세스하기 위해서는 이 Server가 작동중이어야만 함 8

(1) 예제 문서의 구조 9

8. 프레임페이지 : "main_frame.htm" 9. 시작 페이지 : "index.htm" (2) 예제 문서 만들기 순서 1. 정동진 소개 : "intro.htm" 2. 정동진 풍경 : "landscape.htm" 3. 정동진 가는길 : "train.htm" 4. 조각공원 : "sculpture.htm" 5. 가볼 만한 곳 : "goodplace.htm" 6. 관련 사이트 : "relate.htm" 7. 메뉴 페이지 : "menu.htm" 8. 프레임페이지 : "main_frame.htm" 9. 시작 페이지 : "index.htm" 10

8.2.1 FrontPage98 시작하기 (1) 새 프론트 페이지 웹 만들기 11

(2) 새 프론트 페이지 웹 만들기(2) 12

8.2.2 “정동진 소개” 페이지 만들기 (1) 새 문서 만들기 13

(2) 정동진 유래 넣기 14

(3) 정동진 위치 넣기 15

8.2.3 “정동진 풍경” 페이지 만들기 (1) 새 문서 만들기 (2) 표 넣기 16

(3) 표 조정하기 17

(4) 표에 그림 넣기 18

(5) 이미지 크기 조정하기 19

(6) 테이블의 셀 색 바꾸기 20

8.2.4 “정동진 가는 길” 페이지 만들기 21

8.2.5 “조각 공원” 페이지 만들기 (1) 새 문서 만들기 (2) 제목과 그림넣기 22

(3) 테이블의 셀 분할하기 23

(4) 분할한 셀에 그림넣기 24

8.2.6 “가볼만한 곳” 페이지 만들기 (1) 새 문서 만들기 (2) 제목과 지도넣기 25

(3) 동영상 넣기 26

8.2.7 “관련 사이트” 페이지 만들기 (1) 새 문서 만들기 (2) 관련사이트 입력하기 27

(3) 글자색 바꾸기 28

8.2.8 “메뉴” 페이지 만들기 (1) 새 문서 만들기 (2) 이미지와 테이블 삽입 29

(3) 테이블 안에 메뉴넣기 30

8.2.9 “프레임 페이지 만들기” (1) 프레임 페이지 만들기 31

(2) 페이지 세팅 32

(3) 프레임 조정하기 33

(4) 메뉴에 링크 연결하기 34

(5) 프레임 페이지 저장하기 35

8.2.10 “시작” 페이지 만들기 (1) 새 문서 만들기 (2) 배경 넣기 36

(3) 이미지 투명하게 만들기 37

(4) 시작 페이지 완성 38

8.3 웹 문서의 등록 및 자원의 관리 8.3.1 웹 문서 자원의 효율적 관리 하나의 웹 문서는 여러개의 HTML 문서, 이미지, 기타 멀티미디어 자료로 이루어짐 => 하나의 디렉토리에 저장하면 관리하기 어려움 간단한 웹 문서일 경우 홈 디렉토리 : 웹 문서가 저장될 디렉토리 비슷한 자료들은, 비슷한 것끼리 모아 하나의 디렉토리에 저장 이미지나, 동영상, 사운드, 앞으로 배울 자바 애플릿 등을 같이 한 디렉토리에 넣기보다는 이미지는 이미지끼리, 사운드는 사운드끼리 모음 39

효율적인 디렉토리 구조의 예 40

HTML 문서에서 링크를 사용할 때는 상대 URL을 사용 브라우저가 DNS를 다시 갱신할 필요가 없기 때문에 빠름 웹 문서를 효율적으로 관리하기 위한 몇 가지 팁 HTML 문서에서 링크를 사용할 때는 상대 URL을 사용 브라우저가 DNS를 다시 갱신할 필요가 없기 때문에 빠름 사이트의 이식성을 향상시킴 HTML 문서의 이름을 정할 때 글자를 아끼지 마라 Win95나 Mac OS, 그리고 UNIX 계열 모두 긴 이름을 사용할 수 있음 웹 문서가 무슨 내용을 담고 있는지 알 수 있도록 문서의 이름을 정해야 후에 편집할 때 원하는 문서를 쉽게 찾을 수 있음 방문자가 항상 여러분에게 E-mail을 보낼 수 있도록 해야함 방문자의 의견을 들을 수 있음 => 사이트의 계속적인 업데이트 41

8.3.2 웹 문서의 등록 (1) 웹 서버 Unix 계열의 운영체제 또는 Windows NT 계열의 운영체제 여러분이 우선 대학교에 있다면 학교 내에서 제공하는 웹 서버에 저렴한 가격으로 계정을 얻을 수 있음 하이텔이나 유니텔 등의 상용 통신망을 통한 계정 얻기 계정을 얻는 것은 유료 무료 웹 문서를 올릴 수 있는 서비스를 제공하는 업체들 이용 자신이 사용할 수 있는 하드디스크의 공간이 작음 웹 문서를 웹에 올리기 위한 좋은 방법중의 하나 중소기업 지원 홈페이지 네티앙의 기업회원 제도 42

대표적인 무료 웹 서버 제공 업체 네티앙: www.netian.com 넷블루: www.netblue.co.kr 신비로: www.shinbiro.net 대구넷: www.daegu.net 43

Altavista Korea의 홈페이지 등록 영문 웹 문서 => Yahoo!나 Altavista에 등록 (2)검색엔진에 자신의 웹 문서 등록하기 Yahoo! Korea 사이트에 접속한 후 [홈페이지 등록에 관하여]를 클릭 => 홈페이지의 등록 요령이 자세히 나와 있음 Yahoo! Korea의 홈페이지 등록 Altavist Korea 사이트에 접속한 후 [URL 등록]을 클릭 => 사이트를 적는 곳과 유의해야 할 사항이 자세히 나와 있음 Altavista Korea의 홈페이지 등록 영문 웹 문서 => Yahoo!나 Altavista에 등록 44