홈페이지 작성의 실제

홈페이지 작성의 실제
1. 홈페이지 작성 방법
2. 홈페이지 작성 준비작업
3. 웹서버에 홈페이지 올리기
4. 실제 계정을 이용한 실습
5. 홈페이지 구성도
6. 방명록/카운터 만들기
7. CGI
8. 검색엔진에 등록하기
9. 연습문제

1. 홈페이지 작성 방법
    - HTML 태그를 이용하여 만들기(메모장 등)
    - 홈페이지 편집 프로그램을 이용하여 만들기(나모 등)
    - 각 무료 계정 사이트에서 제공하는 위저드(마법사) 기능을 이용하여 만들기(네이버 등)

2. 홈페이지 작성 준비작업
    - 어떤 내용을 담을 것인가? – 컨텐츠(주제 및 내용) 기획과 구조 만들기가 가장 중요
    - 메뉴 및 구도 결정, 필요한 이미지 결정 및 작성
    - 게시판, 방명록, 카운터 달기
    - 계정 준비 및 등록 하기(무료, 유료 등…)
    - 도메인 등록 및 검색엔진 등록(무료, 유료)

※ 홈페이지 제작 단계


※ 홈페이지 제작 환경
    (1) 컴퓨터 시스템과 주변기기
    - PC는 펜티엄급(166MHz) 이상, 32MB 램(RAM),하드디스크 2GB 이상
    - 모뎀은 빠른 속도를 지원하는 모뎀을 장착
    - 멀티미디어 구현을 위한 장치로는 Sound Card, Video Card, Speaker, 마이크, 스캐너(Scanner), 비디오 카메라 등

    (2) 소프트웨어
    - 운영체제 : MS-Windows 98, MS-Windows NT, UNIX, Linux 등
    - HTML 에디터 : FrontPage 98, Namo, HotDog 등
    - 그래픽 에디터 : PhotoShop, PaintShop Pro 등 / 드로잉 툴 (tool) : Corel Draw, Illustrator 등
    - 3D 관련 툴(tool) : 3D STUDIO MAX 등
    - 동영상 관련 툴 : Premiere, Flash 등
    - 웹 브라우저 : Netscape Navigator, Internet Explorer 등
    - 웹 서버 프로그램 : Netscape Commerce Server, IIS, NSCA 서버 등
    - 프로그래밍 언어 : HTML, JAVA, CGI, VRML, Active X, Visual C++ 등

※ 좋은 웹 페이지 디자인을 위한 원칙
① 웹 페이지 로드 시간이 10초 이상이 되어서는 안됨
② 웹 페이지의 제목을 의미 있게 붙임.
③ 혼동을 일으키기 쉬운 링크를 만들지 말 것
④ 방문객이 웹사이트의 구조를 쉽게 파악할 수 있도록 구성
⑤ 길게 스크롤되는 문서를 만들지 않는다. (Two thumbs rule)
⑥ 각 페이지마다 이전/상위 페이지, 웹 페이지로의 링크를 만들어 페이지간의 이동을 쉽게 함
⑦ 사이트내의 링크는 상대 경로를 사용
⑧ 지나치게 애니메이션을 많이 사용해서 사용자의 눈을 피로하게 하지 않음
⑨ 특정한 환경을 가정하고 웹 페이지를 만드는 것은 좋은 자세가 아님
⑩ 프레임을 너무 많이 사용하지 마라. 프레임은 좋은 기능이나 절제해서 사용
⑪ 웹사이트의 내용이 계속 업데이트(update) 되어야 함

3. 웹서버에 홈페이지 올리기
    - 홈페이지제작이 완성되었으면 이제 다른 사람들도 볼 수 있도록 계정을 얻어서 서버에 올려야 한다. 이것을 홈페이지 등록이라고 한다.
    - 계정은 무료, 유료가 있으며, 초보의 경우에는 무료계정으로 시작해보는 것이 좋다.
    - 나모 웹에디터를 이용하는 경우에는 출판하기 메뉴를 누르면 된다.(정품의 경우)
    - 서버에 등록할 때에는 각 서비스회사마다 다르므로 도움말을 잘 읽어보고 한다.
    - 주로 파일매니저나 FTP서비스를 사용한다.

4. 실제 계정을 이용한 실습
    - 무료 계정 하나를 결정하여 가입 등록한다. – 네띠앙, 네이버, 드림위즈 등…
    - 작성한 홈페이지 파일들을 등록한 계정에 업로드한다. – 파일매니저, FTP프로그램 등을 이용

* 홈페이지 구성도

* 나머지는 교재를 보고 참조하세요.

* 카운터/방명록 만들기
    - 자신의 홈페이지에 방문한 사람의 수를 알고자 하는 경우에는 홈페이지에 카운터를 넣는다. 방문한 사람들이 글을 남길 수 있도록 방명록을 만들어 놓는 것도 필수이다.
    - 무료 카운터 서비스 :
    KFCS : http://www.cgiserver.net
    - 무료 방명록 서비스 :
    네이버 : http://www.naver.com

* CGI
•    CGI : Common Gateway Interface의 약자
•    웹브라우저에서 HTML로 여러가지 정보를 처리하지만, 그 기능만으로 모든 정보처리를 다 할 수 없다. 이것을 보충하기 위한 외부 프로그램과 웹서버(HTTP Server) 간의 연결 역할을 하기 위한 규약이 CGI이다.
•    또는 넓은 의미로 CGI를 수행하는 외부 프로그램을 포함하여 말하기도 한다. 예를 들어, 홈페이지에 방문객들의 comment를 받을 수 있는 방명록을 만들려고 할 때, 웹에서 구현하는 HTML만으로는 해결할 수 없다. 그래서 외부 프로그램이 필요한데, 이 때 외부 프로그램과 웹 간에 서로 주고 받을 수 있는 규약을 CGI라고 하고, 그 때 사용하는 프로그램을 gateway프로그램이라고 하는데 이것을 흔히 CGI 프로그램(혹은 스크립트)이라고 한다. 이 CGI프로그램은 통상적으로 C/C++ 나 PERL혹은 UNIX Shell, Tcl/Tk 등을 사용하여 구현한다.
•    이 CGI를 구현하기 위해서는 보통 웹 쪽에서는 FORM 택을 통해서 사용자의 입력값들을 웹서버(httpd)로 보내고, 서버에서는 그 값을 CGI프로그램에게 입력값들을 넘겨준다.
•    CGI는 웹서버에 있어 사용자의 요구를 응용프로그램에 전달하고 그 결과를 사용자에게 되돌려주기 위한 표준적인 방법이다.

* 검색엔진에 등록하기
    홈페이지는 만들고 등록한 것만으로 끝나지 않는다. 인터넷에서 많은 방문자를 얻으려면 유명 검색엔진(야후, 네이버, 엠파스, 알타비스타 등)에 등록을 하여야 한다. 등록을 하려면 정해진 심사기준을 통과해야 하므로 정성을 기울여 작성하도록 해야 한다.
    이외에 유료로 신청하여 파워스폰서링크 등을 신청할 수 도 있다.

※ 연습문제
    1. 자신이 만든 홈페이지를 최소한 3개 이상의 검색엔진에 등록해보고, 그 과정을 알기 쉽게 설명해보자.
    2. 자신의 홈페이지에 게시판과 카운터, 방명록 등을 설치해보자.
    3. CGI 프로그램의 기능을 간단히 설명하고, CGI서버에서 무료 게시판을 등록하여 자신의 홈페이지에 삽입하여 보라.
    4. 자바 스크립트란 무엇인지 설명해보고 공개 자바스크립트 소스를 10개 이상 모아보자.
    5. 자바 애플릿을 HTML문서 내에서 사용하기위해서는 어떤 태그가 필요한지 기술하고 그 사용법을 간단히 설명하라.
    6. 화면 왼쪽에 메뉴를 만들기 위한 방법으로 프레임을 사용해 메뉴와 본문 내용을 분리하는 방법과 테이블을 이용해 가장 왼쪽 옆에 메뉴를 넣어 페이지가 스크롤될 때 메뉴도 함께 스크롤되도록 하는 방법이 있다. 두 가지 방법의 장단점을 비교해보자.
    7. 좋은 디자인의 웹 사이트와 좋지 못한 디자인의 웹 사이트를 하나씩 선정하여 각각의 장점 및 단점을 설명해보자.