장낙중의 드림위버강좌

홈페이지 만들기(1)

여러분께서 드림위버를 배우는 것은 홈페이지를 만들기 위함일 것이다.

드림위버의 기초를 다지고 응용분야에 대한 지식을 넓히는 모든 행위가 홈페이지를 만들기 위한 작업의 일환일 뿐이다.
그럼에도 불구하고 많은 드림위버강좌가 여러분의 이러한 욕구를 충분히 충족시키지 못하고 있어 때로는 불편을 느껴 왔으리라 생각한다.

이러한 여러분의 욕구에 부응하기 위해 드림위버 응용편에서는 기초적인 것부터 차근차근히 따라하기를 통하여 홈페이지 만들기를 직접 해보도록 하겠다.

여기 만들기 실습에 사용된 홈페이지 소스는 내가 우리 딸아이의 홈페이지를 만들어 주면서 사용했던 재료들이다

여러분께서는 여러분이 사용하고자 하는 재료가 따로 있으리라 생각한다.
여기서 설명하는 것은 드림위버라는 도구를 사용하여 홈페이지가 어떻게 만들어 지는가 하는 것을 보여주기 위함일뿐 실제로 이것을 응용하여 자신의 홈페이지를 아름답게 꾸미는 것은 여러분의 몫임을 알아야 할 것이다.

오늘 만들고자 하는 홈페이지는 좌측에 메뉴프레임과 우측에 메인화면을 둔 개인 홈페이지로는 가장 전형적인 모습의 홈페이지이다.
우선 미리보기를 통하여 만들어질 홈페이지가 어떻게 구성되어 있는지 알아보기로 하자.

미리보기

여기에 사용된 이미지 파일은 총 11개이다.
이러한 이미지 파일들은 원칙적으로 포토샵이나 페인트샵프로 또는 파이어웍스등의 그래픽프로그램을 사용하여 본인이 직접 만드는 것이 좋다.

그러나 이 또한 배워서 사용하기에는 많은 시간과 노력이 뒤따라야 할 것이므로 급한대로 인터넷사이트를 뒤져 이미 만들어진 것들을 가져다가 쓰는 것도 괜찮은 방법이다.

이제 한단계 한단계씩 만들기를 해보기로 하자.

★싸이트 구성하기

드림위버는 웹싸이트와 자신의 피씨내에서의 홈페이지관리사이트를 동일하게 해주기 때문에 어떤 홈페이지를 관리하고자 하면 자신의 피시내에 웹사이트를 관리하기 위한 폴더를 따로 만들어 두는 것이 좋다.
위의 메뉴에서 Site => New site 하면 아래와 같이 싸이트관리 대화상자가 나오는데 좌측 Category에서 Local info를 선택하고 자신이 만들어둔 싸이트관리폴더 명을 이름과 Local root folder 로 지정해두면 편리하다.
다음에 아래의 Webserver info를 선택하고 Server access를 FTP로 지정하면 자신의 홈계정에 대한 정보를 입력할 수 있는 대화상자가 나온다.

서버의 주소 자신의 아이디와 패스워드 root가 될 폴더의 이름등을 각각 서버환경에 맞게 지정한다.
여기서 주의할 점은 자신의 홈페이지가 올라갈 root 가 되는 폴더의 주소를 정확히 표시해두어야 나중에 파일을 업로드할 때 에러가 나지 않는 다는 사실이다.

이와 같이 하면 이제부터 홈페이지를 만들고 관리할 사이트관리창이 나타난다.
윈도우 하단의 Untitled~로 시작하는 탭을 선택하여 다시 홈페이지를 작성하는 Document창으로 돌아와서 이제부터 홈페이지를 편집해보자.

★초기화면에 필요한 파일 미리 만들어 두기

앞서 얘기한 바와 같이 지금 만들고자 하는 홈페이지는 좌측에 메뉴 우측에 메인화면으로 나누어져 있다.

이와 같은 페이지를 만드려면 메뉴를 나타내기위한 menu.htm 메인화면을 나타내기 위한 main.htm과 이 두개 페이지를 한 화면에 담기위한 Frame정보만을 갖고 있는 index.htm 이렇게 세가지의 html 문서가 필요하다.

차차로 만들어서 사용해도 되겠지만 드림위버의 특성상 에러를 방지하기 위해 미리 만들어 두기를 하면 여러모로 편리하므로 미리 만들기를 하겠다.

위의 메뉴에서 File => New 해서 Document 상의 아무곳에서나 우측마우스 클릭해서 나오는 팝업메뉴에서 맨 아래의 page property를 선택하고 나오는 대화상자에서 title을 메뉴라 하고 OK 버튼을 누른다음 위의 File => Save as 하여 홈페이지관리폴더내에 menu.htm이라는 파일명으로 저장하기를 한다.

다시 위와 같이 하되 title을 메인이라하고 main.htm으로 저장한다.

이제 menu.htm과 main.htm두개의 Document는 닫고 index.htm의 편집으로 들어 가면된다.

★프레임 나누기

상단의 메뉴에서 Window => Frames 하여 아래의 좌측 그림과 같은 Frames 창을 열어 놓고 다음에는 Object pallete창 메뉴의 ▼표시를 클릭해서 역시 Frames를 선택하면 아래 우측 그림과 같이 프레임의 모양을 선택할 수 있는 Object들이 나타난다.

이 Object 창의 맨 좌측 상단의 것이 우리가 사용할 프레임의 종류이다 이것을 클릭하면 자동으로 프레임이 생성된다.
이제 프레임셋이 생성되었으므로 File => Save Frameset as 하여 index.htm으로 저장한다.

이상으로 모두 세개의 파일이 저장되었는데 여기서 우리가 한가지 알아야 할 것이 있다.

아직 무엇을 만든 것이 하나도 없는데 왜 이리도 저장을 자주 해야만 하는지? 여러분은 궁금히 여기리라 생각한다.
그런데 드림위버를 사용하려면 무엇이건 한단계가 끝날 때마다 저장하는 습관을 들이는 것이 아주 중요하다는 것을 나중에는 알게 될 것이다.(이것이 드림위버를 에러없이 사용하기 위한 중요한 포인트가 되는 것이다.)

★각 프레임에 문서 할당하기.

이제 각 프레임에 위에서 만들어둔 menu.htm과 main.htm을 할당하기로 하자.

아래의 그림에서 처럼 Frames inspector는 leftFrame 과 mainFrame 두개의 프레임으로 나뉘어 있는데 좌측의 leftFrame쪽을 클릭해서 선택하고 Property 창우측의 찾아보기 아이콘을 클릭한 다음 아까 저장한 menu.htm을 선택해준다.

다시 우측의 mainFrame쪽을 클릭해서 선택하고 마찬가지로 main.htm을 선택해준다.
이렇게 지정하면 각 프레임에 각각의 html 문서가 할당이 완료된 것이다.

이 때 각 프레임 Property창 하단의 Margin Width는 모두 "0"으로 한다.(여기서만 그리하는 것임 필요에 따라서는 자신이 원하는 숫자로 할 수 있다.)

★홈페이지 제대로 꾸미기(1-메뉴화면).

이제야 모든 준비가 끝난 셈이다 .
이제 실제로 홈페이지를 꾸며 보기로 하자.

우선 메뉴화면을 꾸며 보기로 하겠다.

Document상의 메뉴화면으로 구분된 한지점에서 우측마우스를 클릭하여 Page property를 선택하고 나타나는 대화상자에서 Background에 칼라번호 #FF9999 를 써 넣는다 . OK!

다음에 역시 메뉴화면쪽에 커서를 두고 Object창 좌측위에서 세번째 Horizontal Rule 삽입도구를 세번 클릭하여 수평선 세개를 삽입한다.

다음에 이미지 삽입도구를 클릭하여 준비한 이미지 파일가운데 홈페이지를 나타내는 버튼이미지 파일을 선택해서 삽입한다.
이 때 버튼의 크기가 프레임의 크기를 넘으면 프레임을 나누는 선위에서 커거사 양쪽 화살표로 바뀐상태에서 적당한 위치만큼 끌어다 놓기를 하면 적당한 위치에 프레임이 오게 된다.

수평선을 사이사이마다 한개씩 넣으면서 필요한 이미지들을 순서대로 삽입한 다음에 위에서 부터 아래까지 모두 드래그하여 선택한 상태에서 프로퍼티창의 우측하단쯤에 있는 "가운데로 모이게 하는 아이콘"을 클릭하여 아래의 그림처럼 모두 가운데로 모이게 한다.

이제 각 버튼에 문서 또는 주소들을 링크시키는 일만 남았다.

★게시판과 방명록 구하기.

메뉴판에는 "함께 얘기를", "다녀간 흔적", "나만의 장소" 이렇게 세가지 보드를 링크시켜 쓰도록 되어 있다.
이제부터 Holy Board로 유명한 CGIWorld로 가서 방명록 한개와 게시판 두개를 얻어 링크시켜 보기로 하자.

CGI World의 주소는 http://www.cgiworld.net/ 이다 .

신청한 결과 방명록의 주소는
http://guestbook.cgiworld.net/index.cgi?id=midluck

게시판의 주소는 각각(두개)
http://board2.cgiworld.net/index.cgi?id=midluck
http://board2.cgiworld.net/index.cgi?id=midluck1

★홈페이지 제대로 꾸미기(2-메뉴판에 링크시키기)

위의 주소들을 각각의 버튼에 링크시키면 되는데 링크시키는 것은 너무나 간단하다.
즉, 아래의 그림에서와 같이 링크시킬 버튼을 선택한 상태에서 Property창의 Link항목에 링크시킬 주소를 적어 넣고 Target항목에 mainFrame을 선택하면 끝난다.

이렇게 위에서 얻은 방명록 주소 한개와 게시판주소 두개를 세개의 버튼에 각각 링크시켜 보자.(아주 쉽군요^^)

"홈페이지로"버튼은 내비게이션을 하다가 다시 원래의 홈페이지로 돌아오게 하기 위해서 쓰이는 버튼인데 지금 내비게이션은 우측의 mainFrame에서만 진행되고 있으므로 원래 mainFrame에 있던 main.htm을 Target을 mainFrame로 하여 링크시키면 될 것이다.

방법은 위에서 한것과 동일하지만 링크시킬 주소난에 주소를 쓰는 것이 아니라 아래의 그림에서와 같이 찾아보기창을 불러내어 해당 파일을 선택하면 된다.

"자주 가는 곳"버튼에는 자신이 즐겨 찾는 곳을 html문서로 만들어 방문객에게 서비스하는 버튼인데 위에서 부터 제대로 따라 해온 사람이라면 자주가는 곳의 html문서를 쉽사리 만들 수도 있고 또 이 버튼에다가 그문서를 링크시킬 수도 있을 것이다.(각자의 숙제^^)

우체통처럼 생긴 애니메이션그림에는 자신에게 이메일을 오게 할 수 있는 링크를 걸어야 하는데 보통은 Link난에 "mailto:자신의 이메일주소" 이렇게 해도 아웃룩등의 메일 클라이언트 프로그램을 구동시켜 자신에게 이메일을 쓸 수 있는 상태로 만들어 주지만 여기서는 앞서 얘기한 cgiworld에서 제공하는 무료 폼메일을 사용하기로 해 보자.

다시 그곳을 방문해서 Freeware => 폼메일 을 클릭하고 들어가면
링크난에 쓸 주소를 "http://formmail.cgiworld.net/email.cgi?receiver=MyEmailAddress"와 같이 쓰라고 지시하고 있다.
여기에 나의 주소인 dream@goldfive.co.kr을 넣어서 다시 만들어 보겠다.

http://formmail.cgiworld.net/email.cgi?receiver=dream@goldfive.co.kr

위와 같이 될 것이다.
이 주소를 링크난에다가 쓰고 역시 Target은 mainFrame으로 한다.

이쯤에서 위의 메뉴 File => Save all 한번쯤 하여 그간 작업한 결과를 모두 저장하는 것이 좋겠다.(앞에서 한 얘기를 상기할 것)

이렇게 하면 leftFrame에 링크된 menu.htm의 작성이 모두 끝난 것이다.

혹 여러분이 이제까지 작업한 menu.htm이 어떻게 만들어진 것일까 궁금하면 위의 메뉴 File => Open 하여 menu.htm을 열어 보기 바란다.

★홈페이지 제대로 꾸미기(1-메인화면)

우리는 시작하기에 앞서 빈문서를 열고 제목만 메뉴라고 정한 문서를 main.htm이라 저장한 일이 있다.
이제부터는 main.htm의 편집에 들어가는 것이다.

main.htm의 편집이라고 하여 main.htm을 따로이 불러내어 편집하는 것이 아니라 지금 menu.htm을 편집한 것과 마찬가지로 mainFrame쪽의 빈 공간에 커서를 가져다 놓고 편집을 하면 자동적으로 main.htm이 편집되는 것이다.

우선 페이지의 속성을 정하기 위하여 우측 마우스버튼을 클릭하고 나오는 팝업메뉴의 맨 마지막 page property를 클릭하면 아래의
그림과 같이 페이지의 속성(property)을 정하는 대화상자가 나오는데 background image 창 우측의 browse 버튼을 눌러 배경이미지로 사용될 이미지파일을 선택하기로 하자.

★홈페이지 제대로 꾸미기(2-메인화면)

이제 메인화면에 들어갈 개체들을 레이어라는 용기를 이용하여 적당한 위치에 배치시켜 보기로 하자.

우선 나의 홈페이지 로고를 화면 상단 중앙에 배치시키기 위하여 화면 상단 중앙쯤에 아래의 그림과 같이 레이어를 그려준다.

다음에 레이어내에 커서를 놓고 그림삽입도구를 이용하여 그림을 삽입시킨다음 레이어 좌측 상단의 레이어핸들을 이리 저리 끌어다가 자신이 배치시키고 싶은 적당한 위치에 배치시킨다.

이와 같이 메인화면 구성을 위하여 준비한 몇가지 이미지 파일들을 각각 레이어를 만들어서 각각의 레이어 위에 삽입시키고 레이어를 적당한 위치로 끌고 가서 마음대로 배치해보도록 하자.

아래 그림에서와 같이 몇가지 그림을 더 삽입하고 그림을 적당한 곳에 배치하였는데 이 부분은 각자 자신이 인터넷에서 주워 모은 클립아트나 애니메이션 또는 아이콘등을 적절히 조합해서 배치시키도록할 것이다.

다음에는 초기화면이니 만치 자신의 홈에 온 손님께 간단한 인삿말정도를 써서 역시 화면내 적당한 위치에 배치시켜 보기로 하자.
방법은 역시 마찬가지로 레이어를 한개 만들고 그 레이어위에 적당한 인삿말을 쓴 다음 텍스트의 크기와 색깔글꼴과 모양등을 정한 다음 적당한 위치에 배치시키면 끝날 것이다.

★이제 마지막 남은 것(카운터)

카운터는 자신의 홈페이지에 몇명이 다녀 갔는지를 숫자로 보여주는 일종의 CGI프로그램이다.
CGI가 허용되는 계정이라면 자신의 고유의 카운터를 프로그램하여 달 수 있는데 대부분의 계정이 그러하지 못하다.

카운터는 방명록이나 게시판같이 무료로 임대해주는 곳이 많이 있는데 역시 앞서 얘기한 CGIWorld의 것을 임대해서 쓰기로 하자
방문을 해서 신청을 해보겠다.

카운터를 선택해서 가입절차를 밟으니 문서내에 다음과 같은 html 코드를 삽입하라고 한다.

<a href="http://counter.cgiworld.net/cgi-bin/redirect.cgi?id=midluck1" target=_top><img border=0 alt="HolyNet Free Counter" src=http://counter.cgiworld.net/cgi-bin/counter.cgi?id=midluck1&l=a&d=a&r=0&g=0&b=255></a>

위의 문구는 html 문구이니 드림위버의 Document 상에 넣으면 기능을 발휘하지 않을 것이다.
따라서 위의 문구를 main.htm을 나타내는 html 상에다가 삽입을 하는 일이 필요하다.

그러기 위하여 다음과 같이 해 보자.

우선 카운터를 담을 레이어를 한개 만들고 그위에다가 글짜를 "당신은 저의 홈페이지를 제###번째로 방문하셨습니다."라는 글귀를 적어 넣는다.
다음에 우측하단 오른 쪽 맨끝의 html inspector창을 열고 html inspector창 우측 상단의 "▶ "표시를 클릭하면 작은 메뉴가 나오는데 replace를 선택한다.

아래 그림과 같이 replace 대화상자가 나타나면 Find What에 Text를 선택하고 창에는 ###을 적어 넣는다.

다시 밑의 replace with창으로 내려와서 위의 카운터 삽입코드를 붙여 넣고 마지막으로 우측의 replace버튼을 클릭하면 아래 그림과 같이 카운터코드삽입이 성공한 것이다. 

이제 위의 메뉴에서 File => Save all 을 한번 더 클릭하자 그리하면 정말로 홈페이지 작성은 다 된 것이다.
참으로 어렵사리 여기까지 따라 했다면 이제 다 만든 홈페이지를 웹상에 올려 놓고 감상하는 일만 남은 것이다.

★홈페이지 올리기.

이제 다 만든 홈페이지를 웹상에 올리려면 처음 시작할 때 만들어 두었던 사이트관리모드로 들어가야 한다.
윈도우 하단에 "Site-..."로 시작하는 탭이 있다면 그 탭을 클릭하면 될 것이고 만일 열려 있지 않다면 위의 메뉴에서 "Site => Open site => 나의 홈페이지(이렇게 만들어 두었던 것으로 기억하는데...)" 이와 같이 하여 싸이트 관리창을 연다.

싸이트 관리창에서 만들어진 html 문서들을 모두 선택하고 상단의 put 버튼을 누른다.
물론 온라인 상태이어야 하겠다.

싸이트관리자는 최초에 싸이트구성을 해두었던대로 서버를 찾아서 연결을 하고 선택한 파일들을 업로드하게 되는데 이 때 페이지에 연관되 파일들을 함께 올릴 것이냐고 물어 오면 "yes"한다.

업로드할 파일은 html문서만 선택한 상태인데도 페이지마다 들어가 있는 이미지 파일들도 잘 찾아서 함께 업로드 해줄 것이다.

이제 정말로 다 끝났다.^^

어렵지만 여기까지 따라한 사람들은 이제 자신의 홈페이지주소로 가서 자신의 홈페이지가 서버에 제대로 올라가 있는지 확인 하도록 해보자.

그리고 만들어진 버튼들이 제대로 작동하는지도 알아 보자.

게시판과 방명록들이 작동하는지 카운터도 올라가는지를 알아 보자.
자신의 홈페이지를 방문하는 사람들을 위하여 방명록 첫머리에 인삿말도 달아 두는 것이 좋겠다.

수고들 많으셨습니다.

이제 난이도가 더 높고 더 아름다운 홈페이지를 꾸밀 자신들이 붙었습니까?ㅎㅎㅎ

레이어사용법

1.레이어의 삽입

레이어의 삽입은 아주간단하다.
아래그림 좌측의 Object Pallete에서 보면 좌측상단에서 부터 네번째에 있는 것이 layer Object 이다

이것을 클릭하고 Document Window상의 적당한 곳에 클릭하여 드래그하면 아래그림 중간과 같이 레이어가 그려진다.
이 레이어의 각종 속성을 레이어를 선택한 상태에서 위의 그림 우측에 있는 속성(property) 창에서 보이는 것처럼 레이어의 이름 Z-index 레이어의 크기 와 위치등을 수치로도 정할 수 있다.

2.레이어에 개체(Object)삽입하기

레이어에 개체를 올리는 일또한 아주 간단하다

레이어내의 한지점에 커서를 놓고 올리고자 하는 개체를 그곳에 삽입하기만 하면 된다.
이렇게 레이어에 삽입한 개체는 마음대로 이동 배치시킬 수 있으며 레이어에 여러가지 액션을 걸므로써 개체를 Dynamic한 모습으로 제어할 수 있게 해준다.

폼 양식의 구성 요소 소개

이번에는 입력양식(form)에 대해서 배울차례다.
이번에도 예제를 따라해 보면서, 폼의 생성과 여러가지 속성적용에 대해 알아보겠다. 물론 입력된 데이타를 처리하는 데는 CGI 프로그램도 있어야 되지만, 여기서는 HTML과 관련된 폼양식을 드림위버로 생성시키는 것에 대해서 까지만 살펴보기로 한다.

Object Pallete의 상단에 삼각형을 클릭하면 그림과 같은 모양이 되는데, Forms를 선택한다. 선택한 후에는 폼과 관련된 여러 개체들이 삽입버튼으로 나타나는데 우선 가장 상단에 있는 Insert Form버튼을 누른다. 빨간색 점선으로 테두리가 쳐지면, Insert > Table을 선택해서 8행 2열의 테이블을 삽입하고, Property Inspector에서 border를 '0'으로 설정한다.

이제 첫번째 행에 2번째 열에 커서를 위치하고, 아래 그림에서 맨 윗줄 오른쪽버튼인 Insert Text Field를 눌러서 삽입을 확인한 후 Property Inspector의 Type부분을 Single Line으로 선택한다. 옆에있는 Char Width는 입력상자의 길이를 결정하고 Max chars는 입력시킬 수 있는 글자수를 한정한다. Init Val은 입력상자에 표시될 글자를 입력하는 곳이다.

이번에는 바로 밑에 칸에 암호 입력상자를 만들기 위해서 Insert Text Field버튼을 한번 더 누르고 Type에서 Password를 선택한다. 나머지 사항은 Single Line과 같다. 암호입력상자가 텍스트와 틀린점은 입력시에 입력내용 대신에 별표등으로 표시해 준다는 것이다. 브라우져의 종류 선택부분을 만들기 위해 위치할 칸에서 Insert List/Menu버튼을 누르고 Type은 Menu로 체크후 List Values를 누르고, 그림과 같이 대화상자를 구성하면 된다. 이때 Value값은 나중에 값을 저장했다가 전달하는 역활을 하므로 나름대로 지정해주면 되겠다. 위에서 만든 메뉴와 리스트의 차이점은 리스트는 여러개를 보여주고 선택하는 것이 가능하다는 것이다. 위와 같은 절차로 하되 Property Inspector에서 Type을 리스트로 선택하고 높이와 여러항목을 선택할 수 있도록 하는 Allow Multiple에 체크해주면 된다.

방문목적과 방문횟수에는 check box와 radio button이 사용되었는데, 각각은 모두 Object Pallete에서 Insert Check Box와 Insert Radio Button을 누르거나 메뉴의 Insert > Form Object에서 선택하면 된다. 둘의 차이점이라면 전자는 복수항목을 선택할 수 있다는 것이고, 후자는 1개만을 선택할 때 쓰인다는 것이다. Init State은 화면에 보여질때 체크상태로 보여줄 것인지 아닌지를 선택한다.

이제 예제의 대부분이 완성되었다. 아래 셀로 이동해서 처음에 아이디와 비밀번호를 적기위해 사용하였던 Insert Text Field버튼을 한번 더 누르고, Type에 Multi line을 선택해준다. 그리고 Char width, Num lines에 각각 30과 8을 입력시키면 같은 크기의 Text Area를 만들 수 있다.