7장 웹 페이지의 저작 이 재 광 한남대학교 컴퓨터공학과

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

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

7.1.2 WYSIWYG 방식의 저작도구HTML 문서의 구성 What You See Is What You Get 7장 웹 페이지의 저작 7.1.2 WYSIWYG 방식의 저작도구HTML 문서의 구성 What You See Is What You Get 태그를 모르더라도 HTML 문서 작성 가능 WYSIWYG 방식의 저작도구 Front Page : Microsoft사가 만든 홈페이지 저작도구 Composer : Netscape Communicator에서 기본적으로 제공되는 저작도구 Page Mill : Adobe사에서 만든 웹에디터로 편리한 기 능들로 구성 HotMetal Pro : Softquad사에서 만든것으로 프레임 편 집기능이 좋음 나모 웹 에디터 : 국내에서 만들어진 에디터로 외국의 것에 견주어도 부족함이 없음 4

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

7장 웹 페이지의 저작 7.2.1 웹 문서 만들기의 예 예제 웹 문서의 구조 6

Step 1: 새로운 FrontPage Web 만들기 7장 웹 페이지의 저작 7.2.2 FrontPage의 시작 Step 1: 새로운 FrontPage Web 만들기 7

7장 웹 페이지의 저작 Step 2: 새로운 문서 만들기 8

7.2.3 2002 한-일 월드컵 시작 페이지 : main.htm 만들기 Step 1: Heading을 이용하여 제목 만들기 7장 웹 페이지의 저작 7.2.3 2002 한-일 월드컵 시작 페이지 : main.htm 만들기 Step 1: Heading을 이용하여 제목 만들기 9

7장 웹 페이지의 저작 Step 2: 배경 이미지 넣기 10

7.2.4 역대 월드컵 경기결과 페이지 : worldcup_history2.htm 만들기 Step 1: 이미지 넣기 7장 웹 페이지의 저작 7.2.4 역대 월드컵 경기결과 페이지 : worldcup_history2.htm 만들기 Step 1: 이미지 넣기 Step 2: 제목 넣기 : 역대 월드컵 경기 결과 11

7장 웹 페이지의 저작 Step 3: 테이블 넣기 12

7장 웹 페이지의 저작 Step 4: 테이블 꾸미기 (1) 13

7장 웹 페이지의 저작 Step 5: 테이블 꾸미기 (2) 14

Step 6: 시작 페이지로 돌아가는 연결 만들기 7장 웹 페이지의 저작 Step 6: 시작 페이지로 돌아가는 연결 만들기 15

7.2.5 월드컵의 역사 페이지 : worldcup_history1.htm 만들기 Step 1: "월드컵의 유래 " 넣기 7장 웹 페이지의 저작 7.2.5 월드컵의 역사 페이지 : worldcup_history1.htm 만들기 Step 1: "월드컵의 유래 " 넣기 Step 2: "월드컵 대회의 개요 " 넣기 16

7장 웹 페이지의 저작 Step 3: 역대 월드컵에 대한 연결 넣기 17

7장 웹 페이지의 저작 Step 3: 월드컵 포스터 이미지 넣기 18

7.2.6 한국 축구와 월드컵 페이지 : korea_ worldcup.htm 만들기 7장 웹 페이지의 저작 7.2.6 한국 축구와 월드컵 페이지 : korea_ worldcup.htm 만들기 Step 1: 한국 축구의 역대 전적 넣기 Step 2: 테이블 아래 에 간단한 설명을 넣 는다 Step 3: Main page로 가는 연결을 만든다 Step 4: 문서의 제목 을 "한국 축구와 월 드컵 " 로 한다. 19

7.2.7 관련 사이트 페이지 : 2002_related.htm 만들기 Step 1: 월드컵 관련사이트 만들기 7장 웹 페이지의 저작 7.2.7 관련 사이트 페이지 : 2002_related.htm 만들기 Step 1: 월드컵 관련사이트 만들기 20

7장 웹 페이지의 저작 Step 2: 나머지 관련 사이트 넣기 21

7장 웹 페이지의 저작 7.2.8 사이트 메뉴 페이지 : menu.htm 만들기 Step 1: 이미지 삽입과 배경색 넣기 22

7장 웹 페이지의 저작 7.2.9 프레임 페이지: index.htm 만들기 Step 1: 프레임 페이지 만들기 23

7장 웹 페이지의 저작 Step 2: 각각의 프레임에 링크 연결하기 24

Step 3: 프레임 페이지 Properties 조절하기 Step 4: 메뉴 이미지에 링크 연결하기 7장 웹 페이지의 저작 Step 3: 프레임 페이지 Properties 조절하기 Step 4: 메뉴 이미지에 링크 연결하기 25

7장 웹 페이지의 저작 완성된 웹 페이지 26

7.3 멀티미디어 데이터의 생성 7.3.1 이미지의 편집 스캐너를 이용한 이미지의 생성과정 7장 웹 페이지의 저작 7.3 멀티미디어 데이터의 생성 7.3.1 이미지의 편집 스캐너를 이용한 이미지의 생성과정 문서 그림 필름 등 => 컴퓨터가 인식할 수 있는 디지털 데 이터로 변환 이미지에 빛을 비춘 다음 반사되어 돌아오는 빛의 양을 측정하여 변환 27

TV를 통해서 보거나, 컴퓨터로 사진을 전송할 수 있음 아직 실제 사진에 비해 출력물의 질이 낮음 7장 웹 페이지의 저작 디지털 카메라를 이용한 이미지의 생성과정 기존의 카메라와 달리 필름이 없음 TV를 통해서 보거나, 컴퓨터로 사진을 전송할 수 있음 아직 실제 사진에 비해 출력물의 질이 낮음 카메라 자체에 메모리가 있어 사진을 저장할 수 있음 내부 메모리가 한정 => 외부 메모리로 플로피 디스켓이 나 PC 카드형 외장 메모리를 사용 28

Adobe PhotoShop을 이용한 이미지 효과내기 Adobe PhotoShop은 강력한 이미지 편집 프로그램 7장 웹 페이지의 저작 Adobe PhotoShop을 이용한 이미지 효과내기 Adobe PhotoShop은 강력한 이미지 편집 프로그램 거의 모든 2D 그래픽의 수정 및 편집이 가능 이미지를 합성 다양한 필터(Filter) 기능 => 이미지들의 다양한 변형 가 능 필터들은 PhotoShop외에 여러 플러그 인 필터들 존재 29

[더스트와 스크래치]는 이미지에 노이즈를 추가하고 [중간값..]은 노이즈를 제거 7장 웹 페이지의 저작 노이즈 (Noise) 이미지에 잡음을 넣거나, 작은 잡음들을 없애줌 [노이즈 추가] : 이미지에 잡음 삽입 [반점제거] : 이미지의 노이즈를 없앨때 [더스트와 스크래치]는 이미지에 노이즈를 추가하고 [중간값..]은 노이즈를 제거 렌더 (Render) [구름을 만들어 냄 ([구름효과1], [구름 효과2]) 빛을 이용하여 음영을 통한 여러 가지 효과 [조명효과]와 [텍스터 칠..]을 이용하여 여러 가지 질감을 만들어 낼 수 있음 30

흐릿한 이미지를 또렷하게 변환 시켜주거나 색상의 차이 를 극명하게 드러나는 이미지로 변환 7장 웹 페이지의 저작 선명효과 (Sharpen) 날카로운 이미지로 변환하는 필터 흐릿한 이미지를 또렷하게 변환 시켜주거나 색상의 차이 를 극명하게 드러나는 이미지로 변환 이미지의 가장자리를 선명하게 함 [언샵 마스크] 스타일화 (Stylize) 이미지를 변화하는 다양한 필터 바람에 날니는 듯한 효과 [바람] 이미지의 전체나 일부분을 나온 것처럼 만들어 줌 [엠보스] 윤곽선만을 보여줌 [윤곽선 추적] 31

이미지를 손으로 그린듯한 이미지로 바꾸어 놓는 역할 7장 웹 페이지의 저작 에술 효과 (Artistic) 이미지를 손으로 그린듯한 이미지로 바꾸어 놓는 역할 [스케치 효과], [거친 파스텔 효과], [문지르기 효과], [색연필 효과] 등 왜곡 (Distort) 이이미지를 왜곡: 이미지를 찌그러뜨리거나, 흩으러 놓 거나 일정부분만을 변형시켜 효과 볼록렌즈, 오목렌즈를 통해서 본 것처럼 일정부분을 왜곡 이미지 전체를 물이나 유리등을 통해서 본 것처럼 변형 32

여러가지 텍스쳐 효과를 부여하여 다양하 질감의 이미지 로 전환 텍스처화 옵션: 7장 웹 페이지의 저작 텍스쳐 (Texture) 여러가지 텍스쳐 효과를 부여하여 다양하 질감의 이미지 로 전환 텍스처화 옵션: 캔버스와 벽돌 같은 텍스처 위로 그려진 듯한 효과 유리 블럭을 통해 보이는 것과 같은 효과 손으로 그린 듯한 이미지로 바꾸어 놓는 역할 픽셀화 (Pixelate) 픽셀을 통합하거나 재구성 이미지를 유화로 그린 것과 같은 효과 이미지를 모자이크처리 이미지를 주는 흔들리는 것 같은 효과 33

여러 가지 스케치 기법들을 이용 => 회화적 이미지 [그래픽 펜] [목탄] [물 종이] [크래용] 7장 웹 페이지의 저작 흐림 효과 (Blur) 이미지를 부드럽고, 흐리게 함 사용자의 입력 값에 따라 변형 정도가 달라짐 잔상이 남는 듯한 효과 중앙으로의 확대, 회전하는 느낌 부여 스케치 효과 (Scketch) 여러 가지 스케치 기법들을 이용 => 회화적 이미지 [그래픽 펜] [목탄] [물 종이] [크래용] 34

최근 들어 홈페이지에 다양한 사운드가 추가되는 경향 인사말이나, 다양한 정보제공 가능 홈페이지에 음악 사용 가능 7장 웹 페이지의 저작 7.3.2 사운드의 생성 최근 들어 홈페이지에 다양한 사운드가 추가되는 경향 인사말이나, 다양한 정보제공 가능 홈페이지에 음악 사용 가능 저작권을 항상 유의해야 함 Syntrillium의 Cool Edit를 이용한 사운드의 편집 Windows95, 98 or Windows NT 유니텔 등의 통신망에서 베타버전을 얻을 수 있음 오디오 파일의 편집 & 믹싱 기능 제공 다양한 형태의 변조, 증폭이 가능 잡음 제거 기능 35

Adobe Premier를 이용한 동영상의 편집 가장 널리 사용됨 높은 시스템 사양 요구 7장 웹 페이지의 저작 7.3.3 비디오 편집 멀티미디어에 관심 집중 디지털 영상 시각적 효과와 청각적 효과를 이용한 정보제공 홈페이지 이외에도 다양한 분야에서 사용됨 다양한 포맷 존재 (MPEG, AVI, MOV ...) Adobe Premier를 이용한 동영상의 편집 가장 널리 사용됨 높은 시스템 사양 요구 정지 이미지 => 동영상, 동영상=>정지 이미지 필터를 이용한 효과 36

7.4 웹 문서의 등록 및 자원의 관리 7.4.1 웹 문서 자원의 효율적 관리 7장 웹 페이지의 저작 7.4 웹 문서의 등록 및 자원의 관리 7.4.1 웹 문서 자원의 효율적 관리 하나의 웹 문서는 여러 개의 HTML 문서, 이미지, 기타 멀 티미디어 자료로 이루어짐 => 하나의 디렉토리에 저장하 면 관리하기 어려움 간단한 웹 문서일 경우 홈 디렉토리 : 웹 문서가 저장될 디렉토리 비슷한 자료들은, 비슷한 것끼 리 모아 하나의 디렉토리에 저장 37

문서들을 주제별로 나눔 => 이미지, 멀티미디어 자 료 등을 각 주제 디렉토리 에 따로 모아둠 7장 웹 페이지의 저작 웹 문서의 양이 많아졌을 경우 문서들을 주제별로 나눔 => 이미지, 멀티미디어 자 료 등을 각 주제 디렉토리 에 따로 모아둠 최근에는 사이트를 자동 으로 관리 해주는 툴 들이 있음 38

HTML 문서에서 링크를 사용할 때는 상대 URL을 사용 DNS를 다시 갱신할 필요가 없기 때문에 빠름 7장 웹 페이지의 저작 웹 문서를 효율적으로 관리하기 위한 몇 가지 팁 HTML 문서에서 링크를 사용할 때는 상대 URL을 사용 DNS를 다시 갱신할 필요가 없기 때문에 빠름 사이트의 이식성을 향상시킴 HTML 문서의 이름을 정할 때 글자를 아끼지 마라 웹 문서가 무슨 내용을 담고 있는지 알 수 있도록 문 서의 이름을 정해야 후에 편집할 때 원하는 문서를 쉽 게 찾을 수 있음 방문자가 항상 여러분에게 E-mail을 보낼 수 있도록 해야 한다. => 방문자의 의견 수렴 39

대부분 Unix 계열 또는 Windows NT 계열의 운영체제 하이텔이나 유니텔 등의 상용 통신망을 통한 계정 얻기 7장 웹 페이지의 저작 7.4.2 웹 문서 등록하기 웹 서버에 계정 얻기 대부분 Unix 계열 또는 Windows NT 계열의 운영체제 하이텔이나 유니텔 등의 상용 통신망을 통한 계정 얻기 계정을 얻는 것은 유료 무료 웹 서버 제공 업체들 이용 자신이 사용할 수 있는 하드디스크의 공간이 작다. 웹 문서를 웹에 올리기 위한 좋은 방법중의 하나 대표적 예 : 넷티앙(www.netian.com), 넷블루(www.netblue.co.kr), 신비로(www.shinbiro.net), 대구넷( www.daegu.net) 40

Unix 계열의 컴퓨터에서는 "public_html" CGI를 사용하기 시스템 관리자와 상의 7장 웹 페이지의 저작 웹에 문서 올리기 웹 문서를 올릴 디렉토리 결정 정해진 디렉토리에만 웹 문서를 올릴수 있음 Unix 계열의 컴퓨터에서는 "public_html" CGI를 사용하기 시스템 관리자와 상의 CGI 프로그램은 보통 정해진 디렉토리에서만 실행 가능 "public_html" 디렉토리 밑에 cgi-bin 디렉토리 시작 웹 문서의 이름 : index.html 검색엔진에 웹 문서 등록하기 Yahoo! Korea 사이트: [홈페이지 등록에 관하여]클릭 Altavist Korea 사이트에 접속한 후 [URL 등록]을 클릭 41