우리 모두 알고 있듯이 웹사이트 제작에는 그래픽 디자인, HTML 페이지 제작, CSS 스타일 정의, 클라이언트측 스크립팅(JavaScrfipt/VBScript), 서버측 스크립팅(Asp/Asp.Net/PHP/JSP)을 비롯한 다양한 지식 측면이 포함됩니다. 등의 내용을 담고 있습니다. 이번 호에서 저자는 가장 기본적인 것부터 시작하여 간단한 HTML 웹사이트를 만드는 방법에 중점을 두고 처음에는 재미를 경험합니다.
1. 여기 저자가 사용하는 웹페이지 제작 도구는 드림위버(Dreamweaver)이다. 먼저 Dreamweaver를 실행하고 "파일" → "새로 만들기" 메뉴를 선택하면 그림 1과 같은 창이 나타납니다.
2. 이 창의 "기본 페이지" 탭에는 7가지 옵션이 있습니다. "HTML" 항목을 선택하고 "만들기" 버튼을 클릭하면 생성 작업 공간이 공백이 되며 이는 HTML 페이지가 성공적으로 생성되었음을 의미합니다. 코드 보기를 클릭하면 그림 2에 표시된 내용이 나타납니다.
3. 표시된 HTML 페이지 코드의 특정 의미를 무시하고 먼저 "제목 없는 문서 제목"을 "웹 페이지 데뷔"로 변경한 다음 디자인 보기를 선택합니다. 웹 페이지 상단에 프레임을 삽입하려면 "메뉴" → "삽입" → "HTML" → "프레임" → "위"를 클릭하세요. 이때 웹페이지는 상위 프레임과 하위 프레임, 두 개의 프레임으로 구분된다. 프레임을 선택한 후 "메뉴" → "삽입" → "HTML" → "프레임" → "왼쪽" 명령을 선택하면 웹페이지 왼쪽에 프레임이 삽입됩니다.
4. "Ctrl+S"를 클릭하여 각 프레임(top.htm, left.htm, right.htm)을 저장합니다. 그런 다음 왼쪽 프레임을 선택하고 "메뉴" → "삽입" → "하이퍼링크" 명령을 클릭하면 그림 3과 같은 대화 상자가 나타납니다. 이 대화 상자에는 다양한 항목을 입력합니다. 여기서 "text"는 링크에 표시되는 텍스트, "link"는 클릭 후 이동하는 페이지 주소, "target"은 표시되는 프레임입니다. 여기서는 "대상"을 메인프레임(즉, 왼쪽 프레임)으로 선택하고 이 단계에 따라 하이퍼링크를 계속 삽입합니다. 다음으로 오른쪽 프레임(right.htm)의 코드뷰에 들어가서 <body></body>에 <marquee Direction=left align=middle>Welcome to my website!!!</marquee>를 입력하는 텍스트입니다. 특수 효과를 사용하면 텍스트를 왼쪽, 오른쪽, 위, 아래로 이동할 수 있습니다. 방향을 위쪽, 아래쪽, 왼쪽, 오른쪽으로 변경하면 텍스트의 이동 방향이 변경됩니다.
5. 이제 프레임이 포함된 HTML 페이지가 생성되었으므로 상단 프레임(top.htm)에 배너를 추가하겠습니다. 배너는 일부 JavaScript 동적 효과를 수행할 수 있습니다. 동적 교환 효과에 대한 특정 코드는 Top.Htm 페이지의 소스 코드에서 볼 수 있습니다. 여기서는 핵심 코드만 제공합니다.
배너AD[0]=pic173.gif;
배너ADlink[0]=http://www.sina.com;
배너AD[1]=pic1732.gif;
배너ADlink[1]=http://www.sohu.com;
코드 설명: 위는 JavaScript 배열입니다. 배너AD는 사진을 저장하고, 배너AD링크는 사진을 클릭한 후 링크를 저장합니다. 필요에 따라 사진을 추가하거나 뺄 수 있습니다.
6. 오른쪽 프레임에 있는 하이퍼링크에 대한 페이지를 계속해서 만드세요. 특정 콘텐츠는 직접 맞춤 설정할 수 있습니다. "파일" 메뉴를 선택하고 "새로 만들기"를 클릭한 후 HTML을 선택하여 일련의 페이지를 생성합니다. 페이지 이름은 링크를 삽입할 때 작성한 이름과 일치해야 합니다. 저자는 원본 문서에 두 가지 예(최신 뉴스 및 인기 연예인)를 만들었으며 독자는 스스로 더 많은 내용을 추가할 수 있습니다. 이러한 방식으로 HTML 웹사이트의 프로토타입이 생성되며, 그림 4와 같이 페이지의 최종 효과가 나타납니다.
동적 효과는 스크린샷에 반영되지 않습니다. 독자는 IE의 소스 파일에서 Index.htm을 직접 열 수 있습니다. 연 후 마우스 오른쪽 버튼을 클릭하면 "차단된 콘텐츠 허용" 프롬프트 메뉴가 나타납니다. (그림 5).
요약: 이번 호에서는 Dreamweaver를 사용하여 일부 JavaScript, HTML 프레임워크, 하이퍼링크 및 기타 기술을 사용하는 간단한 HTML 사이트를 만드는 방법을 소개합니다. 또한 위에서 본 콘텐츠 차단 메시지는 웹페이지가 사이트에 게시되지 않았기 때문입니다. 다음 호에는 작가님이 더욱 흥미로운 내용을 전해드리겠습니다.