[이홍렬의 열려라 홈페이지(4)]첫 페이지 만들기

이번에 찾아간 이홍렬씨의 오피스텔은 공사중이었다. 이사한 지 얼마 안되는 집이라 다시 손볼 일이 생긴 것. 뚝딱뚝딱 수리가 끝날 때까지 한참을 기다리고 나서 기자와 홈페이지 전문가 윤성원씨는 컴퓨터에서 뽑힌 전선들을 다시 꽂느라 구슬땀을 흘려야 했다. 모니터 스캐너 프린터 마이크 등 주변장치가 많아서 전선도 한보따리였다.

이홍렬씨는 진공청소기가 없는지 맨발에 빗자루를 들고 바닥을 쓸어내는 중이었다. “발바닥에 유리조각이라도 박히면 어쩌나….” 주변사람들의 걱정도 아랑곳하지 않고 뺑코 아저씨는 능숙하게 비질을 했다.

그 모습을 지켜보던 윤성원씨가 씩 웃으며 한마디 던졌다. “이선생님, 홀아비 생활 너무 잘하시네요.” 이홍렬씨의 부인과 아이들은 현재 미국에 체류중이다.

▼만들기 전에

홈페이지 안에 들어갈 내용을 작성할 때는 물론이고 홈페이지 형식을 만들 경우에도 작업에 앞서 미리 계획을 잘 세워야 한다. 홈페이지 구성은 건물의 골조에 해당하는 것. 완성된 후에 구조를 바꾸자면 여간 귀찮은 일이 아니다. 따라서 작업에 들어가기 전에 먼저 주요 화면들을 어떤 식으로 구성할지, 어떤 메뉴를 배치해야 할지 잘 생각해 둬야 나중에 후회가 없다.

▼사진을 준비했어요

이홍렬씨와 윤성원씨는 홈페이지 디자인에 이홍렬씨의 캐릭터와 사진을 적극 활용하기로 했다. 내용은 윤성원씨의 디자인 시안을 바탕으로 앞으로 두 사람이 협의해 채워나갈 예정. 우선은 이홍렬씨의 앨범을 뒤져 어린 시절부터 연예계 데뷔 때까지의 사진을 찾아냈다. 찾아낸 사진은 스캐너를 사용해 파일형태로 저장했다. 스캐너가 없는 독자 여러분은 동네 PC방을 잘 이용해 보시길. 요즘엔 스캐너를 갖춰놓은 곳이 꽤 많다.

▼첫 페이지를 만들어보자

1. 우선 새로운 문서의 속성을 지정해주고 저장한다. 문서 바탕에 마우스를 갖다대고 오른쪽 버튼을 누르면 팝업메뉴가 뜬다. 여기서 ‘문서속성’을 선택한다. 그 다음 대화상자 위쪽의 ‘일반’탭을 눌러 글제목 지은이 설명 등을 입력한다. 문서의 사방 여백을 없애기 위해서 ‘스타일’탭을 누른 다음 문서 양쪽 여백을 ‘0’으로 지정한다.

2.‘파일/저장하기’메뉴로 들어가 웹문서를 저장할 폴더를 지정한다. 파일 이름은 default.htm 으로 입력하고 저장한다. 드림엑스(http://www.dreamx.net) 서버에 개설하는 홈페이지는 첫 페이지의 파일이름이 ‘default.htm’이어야 한다.

3. 디자인 시안에서와 같이 화면을 3단으로 나누기 위해 표를 이용한다. ‘표 만들기’ 아이콘을 선택한 다음 마우스를 드래그(왼쪽 버튼을 누른 상태로 원하는 위치로 끌기)하여 2×1의 표를 만든다. 여백의 문단부호는 Delete 키로 삭제한다. 마우스를 표 위에 올려놓고 오른쪽 버튼을 클릭, 메뉴에서 ‘표 속성’을 선택한다.

4. ‘폭 지정’은 100%로, ‘셀 안쪽 여백’‘셀 간격’‘선 두께’는 0으로 지정한다. ‘배경 색깔’을 클릭해 ‘사용자 정의’를 선택하면 자기가 원하는 대로 문서의 배경색을 지정할 수 있다.

5. 테두리가 점선으로 표시된 표의 가운데 선에 마우스를 대고 적당히 아래쪽으로 드래그해 배경 부분이 넓게 보이도록 한다.

6. 표의 가장 밑단을 마우스로 약간 끌어내려 보면 배경에 지정된 이미지를 확인할 수 있다.

7. 아래쪽 셀에 커서를 놓은 상태에서 ‘그림 삽입하기’ 아이콘을 클릭하여 삽입할 그림을 지정한다. 이홍렬씨 홈페이지의 경우 미리 만들어두었던 캐릭터 그림(main.gif)을 선택했다.

8. 프로그램 상단의 메뉴에서 오른쪽 정렬 아이콘을 눌러 그림을 오른쪽으로 배치한다.

9. 이제 삽입한 캐릭터 이미지를 클릭하면 최근 소식을 전하는 ‘뺑코통신’ 페이지로 이동하도록 하이퍼링크(한 문서에서 다른 문서로 이동하게 해주는 통로)를 지정해 주어야 한다. 마우스로 그림을 클릭하여 선택한 상태에서 ‘삽입/하이퍼링크’(또는 F9)를 선택, ‘주소(URL)’란에 연결할 페이지를 써넣는다.(이홍렬씨는 뺑코통신 페이지 이름 ‘news.html’을 적었다.)

11. ‘파일/저장하기’를 선택하여 작업된 상태를 저장한다. 삽입한 그림 파일을 같은 경로에 복사할 것인가를 묻는 창이 나타나는데 ‘확인’ 버튼을 누르면 된다.

12. 첫 페이지의 구성이 완료된 모습.

▼다음주에는

이홍렬씨가 작성한 내용과 디자이너 윤성원씨가 제안한 화면 구성을 종합하여 나머지 페이지를 만드는 과정을 그림으로 따라해 보도록 한다. 이번에 작업한 결과는 http://myhome.dreamx.net/bbangco119에서 다시 확인해 볼 수 있다. 지면에서는 설명하지 않았지만 이홍렬 캐릭터 위에 마우스를 올리면 다른 그림이 나타나는 효과를 추가했다.

<문권모기자>africa7@donga.com

▼홈페이지 만들기 헬프데스크

전화: 02-5599-332, weinfo@namo.co.kr

홈페이지를 만들다가 궁금한 점이 있으면 전화나 E메일로 물어보세요. E메일로는 24시간 이내에 답변을 보내 드립니다.