홈페이지 제작하기

13 홈페이지 제작하기

학습목표 • 우리가 제작할 홈페이지를 기획해 본다. • 템플릿 페이지를 바탕으로 홈페이지에 사용될 페이지를 제작해 본다. • 목차 • 홈페이지 기획 • 홈페이지 제작 • 홈페이지 등록 및 관리

01_홈페이지 기획 • 홈페이지 제작 과정 • 다른 사람들이 많이 방문할 수 있는 깔끔하고 멋진 홈페이지를 만들려면 집을 지을 때처럼 먼저 구상하고 설계하는 과정이 필요 • 홈페이지를 체계적으로 제작하려면 계획표를 작성한 후 이를 바탕으로 순서대로 진행 • 처음에는 계획표를 작성하는 시간이 불필요해 보이겠지만 결과적으로는 훨씬 효율적이며, 오류도 쉽게 파악할 수 있음

01_홈페이지 기획 • 기획 단계 • 주제를 선정하고 그에 따른 스토리 보드를 작성한 후 사이트에 대한 전반전인 구성을 계획 • 홈페이지의 주제 선정 • 스토리 보드 작성 • 홈페이지에 대한 전반적인 구성 계획 • 제작 단계 • 리소스(resource) 폴더를 만들고 리소스들을 정리한 후 시작 페이지와 템플릿 페이지 작성 • 템플릿 페이지가 완성되면 그 페이지를 바탕으로 다른 페이지들을 작성 • 시작 페이지 : 홈페이지의 방문자가 처음 보는 페이지이다. 그만큼 방문자의 흥미를 유도할 수 있는 개성이 담겨 있어야 함. 최근의 홈페이지들은 방문객의 관심을 끌기 위해 시작 페이지에 플래시 등을 이용해 동적으로 구성 • 템플릿 페이지 : 홈페이지의 기본이 되는 페이지이다. 어느 페이지든 공통으로 있어야 하는 배너나 메뉴 등을 미리 제작해 두었다가 다른 페이지를 만들 때 이용하면 반복 작업을 줄일 수 있음. 기본적으로 같은 템플릿 페이지를 복사한 후 내용을 약간씩 변경해 제작 • 등록 단계 • 자신에게 알맞는 호스팅 방법을 찾고, 제작한 홈페이지를 출판하는 단계 • 웹 서버 구성 • 홈페이지 업로드

01_홈페이지 기획 • 관리 단계 • 홈페이지를 홍보하고 새로운 정보를 지속적으로 업로드하면서 홈페이지를 관리하는 단계 • 좋은 홈페이지의 조건 • 구성 • 각 페이지를 디자인이나 내용면에서 일관성 있게 구성 • 내비게이션을 쉽게 구성 • 새로운 맞춤형 콘텐츠로 구성 • 디자인 • 홈페이지의 표현 방식을 결정 • 방문자 중심의 편리성 추구 • 웹 컬러를 효과적으로 사용하고 레이아웃과 구성 요소를 통일 • 홈페이지 기획하기(주제 선정  스토리 보드 구성  레이아웃 구성) • 주제 선정하고 사전 조사하기 • 개인용 홈페이지 : 친구들과 파일이나 텍스트를 공유하는 홈페이지, 육아 일기용 홈페이지, 전문 지식을 제공하는 정보 제공 홈페이지 등 • 기업용 홈페이지 : 주로 상업적 목적으로 제작된 홈페이지. 기업 홍보, 인터넷 쇼핑몰, 백화점 홈페이지 등 • 안부용 집단 홈페이지 : 동호회나 동창 모임 등을 주제로 한 홈페이지. 주로 다음 카페, 아이러브스쿨, 싸이월드등에서 제공하는 공간과 구성을 그대로 이용

01_홈페이지 기획 • 스토리 보드 작성하기 • 스토리 보드는 홈페이지의 각 페이지를 어떻게 연결할 것인가를 정하는 것 • 홈페이지에서 방문자가 원하는 정보에 쉽고 빠르게 접근할 수 있어야 하고 사이트의 전체적인 구성이 한눈 에 들어오게 만듦 • 홈페이지의 규모가 크거나 구성 자체가 너무 복잡할 경우에는 사이트 맵을 제공 • 페이지 레이아웃 만들기 • 홈페이지의 구성이 정해지면 방문자가 시각적으로 좀 더 편리하게 이동할 수 있도록 하는 화면 구성이 필요함 • 페이지 레이아웃의 스케치는 제작단계에서 템플릿 페이지를 만드는 설계도라고 볼 수 있음

02_홈페이지 제작 • 리소스 관리하기 • 홈페이지에서의 리소스란 웹 문서만 가리키는 것이 아니라 웹 문서 안에 포함되는 그림 파일, 음악 파일 등의 멀티미디어 파일, 정보를 가지고 있는 콘텐츠 등도 포함 • 홈페이지를 제작할 때는 리소스가 많이 필요하기 때문에 효율적으로 관리하기 위해서는 폴더로 구분 • 홈페이지 기획을 끝낸 후 제작에 들어가기 전 가장 먼저 해야 할 일이 리소스를 수집한 후에 폴더를 사용해 정리·관리하는 일 • 미리 리소스를 수집하면 홈페이지를 제작할 때 시간을 단축할 수 있고 좀 더 계획성 있게 제작가능 • 개인 홈페이지 • 자기 소개를 위한 이미지, 여행 이미지, 가족과 친구들 이미지, 자신이 좋아하는 음악 파일, 자신의 취미와 관련된 기사, 이미지, 정보 등의 콘텐츠를 구성하기 위한 리소스를 수집 • 기업 홈페이지 • 회사 연역, CEO 인사말, 각종 이미지, 언론 광고 이미지 등을 수집

02_홈페이지 제작 실습 13-1 • 원하는 경로에서 마우스 오른쪽 버튼을 클릭하여 <새 폴더>를 선택하고 제목을‘my homepages’로 입력한다. • 리소스를 정리할 폴더를 구성한다. 시작 페이지와 템플릿 페이지는 루트에 넣고 자기 소개 폴더(int), 노래 폴더(song), 사진 자료실 폴더(pic), 그리고 루트상의 메인 메뉴를 이루고 있는 페이지에 공통으로 삽입될 이미지 파일을 넣을 폴더(images)를 만든다. 개인 홈페이지 제작에 필요한 폴더 구성하고 리소스 관리하기 1 2 [그림 13-5] 리소스 폴더 만들기

02_홈페이지 제작 • 9장~12장까지 우리가 실습하면서 만들었던 노래 가사 파일을 song 폴더에 넣는다. 각 폴더에 홈페이지 제작에 필요한 추가 데이터들을 찾아서 넣는다. 3 [그림 13-6] song 폴더

02_홈페이지 제작 실습 13-2 • 시작 페이지 만들기 • 시작 페이지는 방문자가 제일 처음 방문하는 페이지이기 때문에 모든 페이지로 이동하는 첫 출발점 • 페이지를 어떻게 시작하는가에 따라 홈페이지의 전체적인 내비게이션 구조나 페이지 레이아웃이 달라짐 개인 홈페이지 시작 페이지 만들기 <title>시작페이지</title> <table width="950" height="610" cellpadding="0" cellspacing="0"> <tr> <td></td></tr> </table> 메모장을 열고 파일명을 index.html로 정의한다. 제목은‘시작페이지’로 설정한다. 1 2 홈페이지를 깔끔하게 정리하기 위해 1×1짜리 표를 만든다. 홈페이지는 1024×768의 해상도에 맞게 제작할 것이기 때문에 표의 너비와 높이 항목을 950×610으로 맞추고, 선 두께 항목을‘감추기’로 설정한다.

02_홈페이지 제작 셀의 수평 정렬은‘가운데’, 수직 정렬도‘중간’으로 설정하고, 셀에 배경 그림을 넣는다. 배경 그림은 취향에 맞게 설정한다. 여기서는‘i01.jpg’로 설정한다. <table width="950" height="610" cellpadding="0" cellspacing="0"> <tr> <td width="950" height="600" align="center" valign="middle" background="images/i01.jpg"> </td> </tr> 간단한 멘트와 소개 글을 쓴다. 모든 페이지로 자유롭게 이동할 수 있도록 스토리 보드를 만들었으므로 모든 메뉴에 하이퍼링크를 걸어 놓는다. • 01 <html> • 02 <head> • 03 <title>시작페이지</title> • 04 </head> • 05 <body> • 06 <table width="950" height="610" cellpadding="0" cellspacing="0"> • 07 <tr> • 08 <td width="950" height="600" align="center" valign="middle“ • 09 background="images/i01.jpg" > • 10 올해에도 항상 건강하게 • 11 행복한 삶 만드네요. • 12 • 13 저의 홈페이지 방문을 환영합니다. • 14 저에 대해 알고 싶으신 분들은 • <a href="intro.htm">이쪽으로 오세요</a> • 16 • 17 </td> • 18 </tr> • 19 </table> </body> </html> 실습 index.html 3 4

02_홈페이지 제작 결과를 확인해 보자. 4 [그림 13-7] index.html 결과

02_홈페이지 제작 실습 13-3 • 템플릿 페이지 • 시작 페이지를 만들었다면 이제 템플릿 페이지를 만들어야 함 • 템플릿 페이지란 홈페이지를 제작할 때 골격이 되는 기본 페이지 • 골격 페이지를 만드는 이유는 홈페이지를 일관성 있게 디자인하기 위해서임 • 홈페이지 내의 각 페이지는 디자인이 비슷하거나 같은 레이아웃으로 구성되어야 통일성이 있음 템플릿 페이지 만들기 <title>템플릿 페이지</title> <table align="center" cellpadding="0" cellspacing="0"> <tr> <td width="950"></td> </tr> <tr> <td width="950"></td> </tr> <tr> <td width="950" ></td> </tr> </table> [템플릿 페이지 만들기] 템플릿 페이지의 파일명은‘templ.html’로 지정한다. 페이지 제목을‘템플릿 페이지’로 수정한다. 1 2 시작 페이지와 마찬가지로 표를 먼저 만들어야 한다. 3×1짜리 표를 만든다. 표의 너비를 950픽셀로 설정하고 가운데 정렬한 후 테두리를 감춘다.

02_홈페이지 제작 첫 번째 셀에 배경 그림을 삽입한다. 여기서는‘i02.gif’파일을 사용한다. <tr> <td width="950" height="100" background="images/i02.gif"> </td> </tr> <td width="200" height="400" align="center" valign="top" background="images/i03.gif"></td> <table width="950" height="400" border="1"> <tr> <td width="200" height="400" valign="top"></td> <td width="750" height="400" valign="top"></td> </tr> </table> 두 번째 셀에는 표를 삽입한다. 표의 크기는 1×2로 정하고, 왼쪽은 메뉴, 오른쪽은 콘텐츠를 위한 공간으로 만들 것이다. 표의 너비는 950픽셀로 설정하고 테두리는 1로 설정한다. 3 4 5 왼쪽 셀의 너비는 200픽셀, 수평 정렬은 가운데, 수직 정렬은 위로 설정한다. 셀의 배경 이미지는 i03.gif로 한다.

02_홈페이지 제작 [템플릿에 CSS 스타일 지정하기] 스타일 이름은‘p’, 글자 크기는‘12pt’, 글꼴은‘휴먼편지체’로 지정한다. 이 스타일 파일을 외부 파일로 저장하려면 사이트가 만들어진 폴더에‘basic.css’라는 이름으로 저장한다. 템플릿 문서 templ.html에서 외부에 저장한 CSS 스타일 파일, 즉‘basic.css’파일을 링크한다. p { font-family:휴먼편지체font-size:12pt; } a:hover { color:rgb(153,255,255); } <a href="mailto:HGD@korean.com"><img src="images/i04.jpg" width="18" height="20" border=”0”></a> [페이지별 공통 요소 삽입하기] 6 7 8 주소 항목에‘mailto:자신의 이메일’형식으로 이메일 하이퍼링크를 설정한다. 완성된 템플릿 페이지를 저장한다. 이제 템플릿 페이지를 복사해 와서 각각의 페이지에 들어갈 내용만 꾸미면 홈페이지가 완성된다. 사이트 관리자에서 템플릿 페이지를 복사하면 내비게이션 바가 자동으로 갱신된다.

02_홈페이지 제작 • 01 <html> • 02 <head> • 03 <title>템플릿 페이지</title> • 04 <style> • 05  • 09 </style> • 10 <link type="text/css" rel="stylesheet" href="basic.css"> • 11 </head> • 12 <body> • 13 <table width="950" height="500" cellpadding="0" cellspacing="0"> • 14 <tr> • 15 <td width="950" height="100" background="images/i02.gif"> • 16 • HONG GIL DONG’s • 17 홈피에 입장하셨습니다. • 18 </td> • </tr> • <tr> • <td width="950" height="400"> • 22 <table width="950" height="400" border="1"> • 23 <tr> • 24 <td width="200" height="400" align="center" • valign="top" bordercolor="white" background="images/i03.gif"> • • 26 </td> • 27 <td width="750" height="400" valign="top" bordercolor="white"> </td> 실습 templ.html

02_홈페이지 제작 • 28 </tr> • 29 </table> • 30 </td> • 31 </tr> • 32 <tr> • 33 <td width="950" height="50" background="images/i02.gif"> • 메일은 이쪽으로요.. < ahref="mailto:HGD@korean.com"> • <imgsrc="images/i04.jpg“ width="18" height="20" border=”0”></a> • 35 </td> • 36 </tr> • 37 </table> </body> </html> 실습 templ.html 9 결과를 확인해 보자. [그림 13-8] templ.html 결과

02_홈페이지 제작 실습 13-4 • 다른 페이지 만들기 • 템플릿 파일을 바탕으로 홈페이지에 필요한 다른 페이지를 제작 • 자기 소개를 위한 int.html, 사진 자료실을 위한 pic.html, 노래에 대한 정보를 담은 song.html, 자신이 자주 찾아가는 사이트의 링크를 알려 주는 link.htm 템플릿 파일을 복사해 다른 페이지 만들기 [자기 소개 페이지] templ.html 파일을 복사한 후 편집하여 다른 페이지들을 제작한다. 총 4개의 사본을 만들고 각각의 이름을 int.html, pic.html, song.html, link.html으로 수정한다. 자기 소개 페이지(int.html)를 메모장으로 연 후 페이지에 알맞은 콘텐츠를 삽입해 완성한다. 메뉴 부분에는 각 html 파일을 하이퍼링크로 연결한다. 메모장을 열어 자기 소개(int.html) 파일을 작성한다. 1 2 31

02_홈페이지 제작 01 <html> 02 <head> 03 <title>자기 소개 페이지</title> 04 <style> 05  09 </style> 10 <link type="text/css" rel="stylesheet" href="basic.css"> 11 </head> 12 <body> 13 <table width="950" height="500" cellpadding="0" cellspacing="0"> 14 <tr> 15 <td width="950" height="100" background="images/i02.gif"> 16 HONG GIL DONG's 17 홈피에 입장하셨습니다. 18 </td> 19 </tr> 20 <tr> 21 <td width="950" height="400"> 22 <table width="950" height="400" border="1"> 23 <tr> 24 <td width="200" height="400" align="center" valign="top" bordercolor="black" background="images/i03.gif"> 25 26 <a href="index.htm">초기 화면 </a> 실습 int.html

02_홈페이지 제작 • 27 <a href="intro.htm">자기 소개 • </a> • 28 <a href="pic.htm">사진 자료 • </a> • 29 <a href="song.htm">노래 자료 • </a> • 30 <a href="link.htm">링크 자료 • </a> • 31 </td> • 32 <td width="750" height="400" valign="top" bordercolor="black"> • 33 <table align="center" cellpadding="0" cellspacing="0"> • 34 <tr> • 35 <td width="359"> • 36 • 제 이름은 • "길동"입니다. • 37 </td> • 38 <td width="359" align="center" • valign="middle" rowspan="4"> • 39 <img src="images/baby.JPG" • width="375" height="460" • border="0"> • 40 </td> • 41 </tr> • 42 <tr> • <td width="359"> • 44 • 제 취미는 "이쁜짓하기" 입니다. 실습 int.html

02_홈페이지 제작 • 45 </td> • 46 </tr> • 47 <tr> • 48 <td width="359"> • 49 "노래"도 좋아합니다. • • 50 </td> • 51 </tr> • 52 <tr> • 53 <td width="359"> • 54 • 이쁜 "사진"도 많이 있습니다. • 55 </td> • 56 </tr> • 57 </table> • 58 </td> • 59 </tr> • 60 </table> • 61 </td> • </tr> • 63 <tr> • 64 <td width="950" height="50" background="images/i02.gif"> • 65 메일은 이쪽으로요.. <a • href="mailto:HGD@korean.com"><img src="images/i04.jpg" • width="18" height="20" border="0"></a> • 66 </td> • 67 </tr> • 68 </table> • 69 </body> • 70 </html> 실습 int.html

02_홈페이지 제작 결과를 확인해 보자. 4 [그림 13-9] templ.html 결과

02_홈페이지 제작 [사진 자료] 메모장을 열어 사진 자료(pic.html) 파일을 작성한다. • 01 <html> • 02 <head> • 03 <title>사진 페이지</title> • 04 <style> • 05  • 09 </style> • 10 <link type="text/css" rel="stylesheet" href="basic.css"> • 11 </head> • 12 <body> • 13 <table width="950" height="500" cellpadding="0" cellspacing="0"> • 14 <tr> • 15 <td width="950" height="100" background="images/i02.gif"> • 16 • HONG GIL DONG's • 17 홈피에 입장하셨습니다. • 18 </td> • 19 </tr> • 20 <tr> • 21 <td width="950" height="400"> • 21 <table width="950" height="400" border="1"> • 22 <tr> • 23 <td width="200" height="400" align="center" • valign="top" bordercolor="black" background="images/i03.gif"> • • 25 <a href="index.htm"> • 초기화면</a> 실습 pic.html 5

02_홈페이지 제작 26 <a href=”intro.htm"> 자기소개</a> 27 <a href="pic.htm"> 사진 자료</a> 28 <a href="song.htm"> 노래 자료</a> 29 <a href="link.htm"> 링크자료</a> 30 </td> 31 <td width="750" height="400" valign="top" bordercolor="black"> 32 <table border="4"> 33 <tr> 34 <td width="722" height="97" colspan="4"> 35 클릭하면 큰사진을 볼 수 있습니다. 36 </td> 37 </tr> 38 <tr> 39 <td width="176"> 40 <a href="pic/01.JPG" target="_blank"> <img src="pic/01.JPG" width="170“ height="120" border="0"></a> 41 </td> 42 <td width="176"> 43 <a href=“pic/02.JPG" target="_blank"> <img src="pic/02.JPG" width="170“ height="120" border="0"></a> 44 </td> 45 <td width="176"> 46 <a href="pic/03.JPG" target="_blank"> <img src="pic/03.JPG" width="170“ height="120" border="0"></a> 47 </td> 48 <td width="176"> 49 <a href= "pic/04.JPG" target="_blank"> <img src="pic/04.JPG" width="170“ height="120" border="0"></a> 50 </td> 51 </tr> 실습 pic.html

02_홈페이지 제작 52 <tr> 53 <td width="176"> 54 <a href="pic/05.JPG" target="_blank“> <img src="pic/05.JPG" width="170“ height="120" border="0"></a> 55 </td> 56 <td width="176"> 57 <a href= "pic/05.JPG" target="_blank“> <img src="pic/06.JPG”width="170“ height="120" border="0"></a> 58 </td> 59 <td width="176"> 60 <a href= "pic/07.JPG" target="_blank“> <img src="pic/07.JPG" width="170” height="120" border="0"></a> 61 </td> 62 <td width="176"> 63 <a href="pic/08.JPG" target="_blank"> <img src="pic/08.JPG" width="170“ height="120" border="0"></a> 64 </td> 65 </tr> 66 </table> 67 </td> 68 </tr> 69 </table> 70 </td> 71 </tr> 72 <tr> 73 <td width="950" height="50" background="images/i02.gif"> 74 메일은 이쪽으로요.. <a href="mailto:HGD@korean.com"> <img src="images/i04.jpg" width="18“ height="20" border="0"></a> 75 </td> 76 </tr> 77 </table> 78 </body> 79 </html> 실습 pic.html

02_홈페이지 제작 결과를 확인해 보자. 5 [그림 13-10] pic.html 결과

02_홈페이지 제작 [노래 자료실] 메모장을 열어 노래 자료실(song.html) 파일을 작성한다. 01 <html> 02 <head> 03 <title>노래 페이지</title> 04 <style> 05  09 </style> 10 <link type="text/css" rel="stylesheet" href="basic.css"> 11 </head> 12 <body> 13 <table width="950" height="500" cellpadding="0" cellspacing="0"> 14 <tr> 15 <td width="950" height="100" background="images/i02.gif"> 16 HONG GIL DONG's 17 홈피에 입장하셨습니다. 18 </td> 19 </tr> 20 <tr> 21 <td width="950" height="400"> 22 <table width="950" height="400" border="1"> 23 <tr> 24 <td width="200" height="400" align="center" valign="top" bordercolor="black" background="images/i03.gif"> 25 26 <a href="index.htm">초기 화면</a> 실습 song.html 7

02_홈페이지 제작 27 <a href="intro.htm">자기 소개</a> 28 <a href="pic.htm">사진 자료</a> 29 <a href="song.htm">노래 자료</a> 30 <a href="link.htm">링크 자료</a> 31 </td> 32 <td width="750" height="400" valign="top" bordercolor="black"> 33 <table align="center" border="1" width="722"> 34 <tr> 35 <td width="712" align="center "valign="middle" colspan="3"> 36 리메이크 노래 모음 37 </td> 38 </tr> 39 <tr> 40 <td width="200"> 41 여행을 떠나요 42 - 조용필, 이승기 - 43 </td> 44 <td width="250"> 45 <img src="song/조용필.jpg" width="200" height="150" border=”0”> 46 </td> 47 <td width="250"> 48 <img src="song/이승기.JPG" width="200" height="150" border="0"> 49 </td> 50 </tr> 51 <tr> 52 <td width="200"> 53 사랑과 우정사이 54 - 피노키오, 박혜경- 55 </td> 56 <td width="250"> 실습 song.html

02_홈페이지 제작 57 <imgsrc="song/피노키오.JPG" width="200" height="150" border="0"> 58 </td> 59 <td width="250"> 60 <imgsrc="song/박혜경.jpg" width="200" height="150" border="0"> 61 </td> 62 </tr> 63 <tr> 64 <td width="200"> 65 붉은 노을 66 - 이문세, 빅뱅 - 67 </td> 68 <td width="250"> 69 <imgsrc="song/이문세.jpg" width="200" height="150" border="0"> 70 </td> 71 <td width="250"> 72 <imgsrc="song/빅뱅.jpg" width="200" height="150" border="0"> 73 </td> 74 </tr> 75 </table> 76 </td> 77 </tr> 78 </table> 79 </td> 80 </tr> 81 <tr> 82 <td width="950" height="50" background="images/i02.gif"> 83 메일은 이쪽으로요.. <a href=”mailto:HGD@korean.com"> <imgsrc="images/i04.jpg" width="18" height="20" border="0"></a> 84 </td> 85 </tr> 86 </table> </body> </html> 실습 song.html

02_홈페이지 제작 결과를 확인해 보자. 8 [그림 13-11] song.html 결과

02_홈페이지 제작 [링크 페이지] 평소 자신이 추천하고 싶은 사이트나 자주 들어가는 사이트를 하이퍼링크를 통해 연결한다. 메모장을 열어 링크(link.html) 파일을 작성한다. 01 <html> 02 <head> 03 <title>링크 페이지</title> 04 <style> 05  09 </style> 10 <link type="text/css" rel="stylesheet" href="basic.css"> 11 </head> 12 <body> 13 <table width="950" height="500" cellpadding="0" cellspacing="0"> 14 <tr> 15 <td width="950" height="100" background="images/i02.gif"> 16 HONG GIL DONG's 17 홈피에 입장하셨습니다. 18 </td> 19 </tr> 20 <tr> 21 <td width="950" height="400"> 22 <table width="950" height="400" border="1" align="center"> 23 <tr> 24 <td width="200" height="400" align="center" valign="top" bordercolor="black" background="images/i03.gif"> 25 실습 link.html 9

02_홈페이지 제작 26 <a href="index.htm">초기화면</a> 27 <a href="intro.htm">자기소개</a> 28 <a href="pic.htm">사진자료</a> 29 <a href="song.htm">노래자료</a> 30 <a href="link.htm">링크자료</a> 31 </td> 32 <td width="750" height="400" valign="middle" bordercolor="black" align="center"> 33 <table border="4" width="732"> 34 <tr> 35 <td width="80"> 36 네이버 37 </td> 38 <td width="272"> 39 <a href= "http://www.naver.com" target="_blank"> <img src="images/naver.JPG" width="270" height=”200" border="0"></a> 40 </td> 41 <td width="80"> 42 네이트 43 </td> 44 <td width="272"> 45 <a href="http://www.nate.com" target="_blank"> <img src="images/nate.JPG" width="270" height="200" border="0"></a> 46 </td> 47 </tr> 48 <tr> 실습 link.html

02_홈페이지 제작 49 <td width="80"> 50 야후 51 </td> 52 <td width="272"> 53 <a href="http://www.yahoo.co.kr" target="_blank"> <imgsrc="images/yahoo.JPG" width="270" height="200" border="0"></a> 54 </td> 55 <td width="80"> 56 천리안 57 </td> 58 <td width="272"> 59 <a href="http://www.chol.com" target="_blank"> <imgsrc="images/chol.JPG" width="270" height="200" border="0"></a> 60 </td> 61 </tr> 62 </table> 63 </td> 64 </tr> 65 </table> 66 </td> 67 </tr> 68 <tr> 69 <td width="950" height="50" background="images/i02.gif"> 70 메일은 이쪽으로요.. <a href="mailto:HGD@korean.com"> <imgsrc="images/i04.jpg" width="18" height="20" border="0"></a> 71 </td> 72 </tr> 73 </table> 74 </body> 75 </html> 실습 link.html

02_홈페이지 제작 결과를 확인해 보자. 10 [그림 13-12] link.html 결과

03_홈페이지 등록 및 관리 • 홈페이지 등록 • 계정 신청하기 • 자체적으로 서버를 구축하고 전용선을 설치해 웹 서버를 운영하고 관리 • 여러 가지 측면에서는 가장 이상적인 방법이지만, 서버를 구축하고 관리하려면 많은 비용이 소요 • 웹 호스팅을 이용 • 무료 계정 서비스 업체의 서버 공간을 이용 • 홈페이지 등록하기 • 무료 계정 신청으로 홈페이지를 출판할 수 있는 공간이 준비되고, 홈페이지를 구성하는 각각의 페이지들이 모두 완성되면 웹 서버에 홈페이지를 업로드 • 이렇게 홈페이지를 웹 서버에 업로드하는 작업을‘출판하기’라고함 • FTP 프로그램을 이용하는 방법 • 웹 사이트에서 직접 홈페이지를 업로드하는 방법

03_홈페이지 등록 및 관리 [그림 13-13] 홈페이지 등록 과정

03_홈페이지 등록 및 관리 • 홈페이지 홍보와 관리 • 홈페이지 홍보하기 • 홈페이지를 아무리 멋지게 꾸몄다고 하더라도 방문하는 사람이 없으면 의미없음 • 제일 많이 이용하는 홍보 방법은 포털 사이트를 이용하는 방법 • 홈페이지 관리하기 • 홈페이지 제작 못지않게 중요한 것이 홈페이지를 운영하고 관리하는 일 • 홈페이지에서 잘못된 정보를 지속적으로 수정하고 새로운 정보도 업데이트

홈페이지 제작하기

홈페이지 제작하기

Presentation Transcript