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

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

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

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

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

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

미리보기

여기에 사용된 이미지 파일은 총 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.HTML과 JavaScript

HTML이라는 언어와 이를 탐험(Navigation)하게 할 수 있는 브라우저의 개발은 인터넷이 세계적으로 확산되는데 크게 기여를 한 바 있다.
HTML언어는 세계도처의 컴퓨터(서버)들을 온라인상에 묶어 연결하고 누구나 인터넷망을 통하여 자신의 개인용 컴퓨터에 장착된 브라우저(클라이언트)라는 수단을 써서 어느 곳에 있는 정보라도 순간적으로 접속하여 자료를 얻을 수 있게 한 획기적인 언어이다.

그러나 사람들은 이러한 HTML언어가 단지 서버에 저장된 문서만을 요구에 따라 보여주기만 하는 것으로 그치는 것에 만족하지 못하여 동적이고 클라이언트의 요구에 반응하는 문서를 만들기에 온갖 노력을 기울여 왔다.

그 하나가 여러분께서 게시판이나 방명록 또는 카운터등...여러가지로 사용하고 있는 CGI프로그램이다.
CGI는 여러분이 방문한 사이트에 여러분의 방문 흔적을 남기고 또 다른 방문자가 그것을 언제든지 호출하여 볼 수 있게 해준다.

그러기 때문에 이 역시 동적인 페이지와는 무관한 것이다.

사람들은 그래서 여러가지 언어들을 개발하여 동적인 웹페이지제작을 시도 하게 되었는데 그중 하나가 JavaScript라는 언어이다.

원래 Netscape Navigator에 맞도록 개발된 것이지만 브라우저의 Version이 업그레이드되면서 공통으로 쓸 수 있는 부분이 많아졌으며 마이크로소프트에서도 이에 대응하는 JScript 라는 언어를 개발한 바 있다.

우리는 브라우저상에 보여지는 현상을 가지고 그것이 서버측에서 프로그램을 구동하여 보여지는 것인지 브라우저(클라이언트)가 서버로부터 전송받은 내용을 가지고 한줄 한줄 번역해가며 시행하는 것인지를 잘 구분하지 않고 있는데..

JavaScript 언어는 후자에 속하는 언어인 Interpreter 언어이다.

JavaScript 언어가 Interpreter 언어이기 때문에 이것을 번역하여 보여주는 브라우저의 종류와 Version에 따라 보여지는 것이 달라질 수 밖에 없다는 점을 염두에 두어주기 바란다.
즉 이것을 다시 설명하면 같은 코드로 작성된 소스일지라도 브라우저의 종류에 따라 달리 보여지는 것이 많으므로 늘 양대 브라우저에서 어떻게 나타내어 지는지 신경을 써야만 할 일이라는 것이다.

2.오브젝트,이벤트,액션 비헤이비어...

우리가 자바스크립트를 이해하기 위해서는 간단하게나마라도 오브젝트와 이벤트 그리고 액션이라는 것의 개념을 알고 지나가야만 이해가 빠르다.

오브젝트는 문자 그대로 도큐먼트상에 놓여질 수 있는 모든 대상물을 말한다.
문자도 될 수 있고 그림도 될 수 있으며 앞서 설명한 레이어와 심지어는 형태는 보이지 않지만 문서의 본체임을 알리는 body에 이르기까지 오브젝트라 할 수 있다.

이벤트는 이와 같은 오브젝트에 일어난 사건을 의미한다.

예컨대 어떤 오브젝트위에 마우스가 올라갔을 때 이를 onMouseOver이벤트가 일어났다고 말하고 문서가 로드될때는 body라는 오브젝트에 onLoad 라는 이벤트가 일어났다고 하는 것이다.

액션은 어떤 종류의 오브젝트에 어떤 이벤트를 주었을 때 어떤 일이 일어나게 할 것인가를 정한 것을 말한다.

이것이 좁은 의미에서의 액션 비헤이비어이지만 드림위버에서 쓰는 비헤이비어는 오브젝트와 이벤트를 포함하는 넓은 의미로 쓰여진다.
또 한가지 중요한 사실은 이벤트가 일어나는 오브젝트와 액션이 일어나는 오브젝트가 늘 같지는 않다는 점을 이해해야 할 것이다.

3.드림위버의 비헤이비어.

드림위버의 비헤이비어는 자바스크립트이다.
즉 다시 말하자면 드림위버의 비헤이비어는 이를 사용하면 코드상 자바스크립트를 생성한다는 말이다.
여러분들께서는 이 싸이트가 열릴 때 "장낙중의 드림위버강좌!"라고 쓰인 글이 우측에서 한자 한자씩 날라들어 오는 것을 보았을 것이다.

이것은 아래와 같이 매우 복잡한 코드로 짜여진 자바스크립트이다.

글짜가 날라들어오는 자바스크립트코드

이러한 자바스크립트코드를 작성하는 일은 매우 번거롭고 자바스크립트라는 언어에 익숙해 있어야만 하는 일이다.
그런데 드림위버의 비헤이비어는 이렇게 복잡하고도 어려운 자바스크립트코드를 단 몇번의 클릭만으로 쉽게 작성할 수 있도록 도와준다.
위의 예제에 대한 것이 이 강좌의 "확장편"에 실려 있으니 참고하기 바란다.

4.드림위버의 비헤이비어-2

자바스크립트를 연구하는 프로그래머들은 자바스크립트를 생산해 낸다.
그리고 이들이 만든 자바스크립트코드들은 그 소스가 공개되어 있는 관계로 빠른 속도로 인터넷상에 퍼져 사용되어진다.

드림위버의 제3개발자들은 이렇게 보편화된 자바스크립트들을 드림위버의 비헤이비어로 만들어 이 또한 공개를 한다.
드림위버 고급사용자들은 이들이 만든 비헤이비어들을 자신의 드림위버프로그램에 접목시켜 이를 활용하는 것이다.

참으로 편한 세상인 것이다.

드림위버의 비헤이비어를 활용하면 아주 복잡하고도 어려운 자바스크립트코드를 단숨에 만들어 낼 수 있으니 말이다.

드림위버의 비헤이비어는 자바스크립트를 아는 프로그래머들이 보면 알겠지만 그 코드가 매우 간결하여 군더더기가 없으며 될 수 있으면 양대 브라우저에서 똑같이 보일 수 있도록 개발되어지는 경우가 많다(물론 그렇지 않은 것도 있지만..)

양대브라우저에서 똑같이 보이는 자바스크립트 ...프로그래머들에게는 얼마나 귀찮은 일인데^^

5.비헤이비어의 설치방법

비헤이비어들은 보통 ZIP 같은 압축파일의 형태로 배포되어진다.
이것을 다운 받아서 Dreamweaver 가 있는 폴더의 Configuration =">" Behavios =">" Actions 폴더내에 Addon이라는 폴더를 생성하고 거기에 압축을 풀어 넣으면 된다.

최근에는 드림위버의 개발사인 매크로미디어에서 세계도처에서 만들어지는 비헤이비어,오브젝트,커멘드등의 "확장"을 드림위버에 접목시키고 사용하는 것을 "관리"하기 위하여 Extension Manager라는 것을 만들어 드림위버사용자에게 배포하고 있는데..아마도 다음 버젼에서는 프로그램자체에 포함되어질 것으로 생각한다.

(Extension Manager는 매크로미디어사를 방문하면 다운 받을 수 있는데..이 강좌 "확장편"에 따로 올려 놓았으니 거기서 다운 받아 설치하는 것이 좋겠다.)

비헤이비어들이 공급되는 또 다른 형태로 확장자가 mxp인 것 ...

바로 이러한 형태의 비헤이비어는 실행시키기만 하면 드림위버의 Extension Manager가 알아서 알맞은 장소에 드림위버를 확장시켜 관리를 하여준다.

 

드림위버의 비헤이비어들은 이 강좌의 확장편에서 하나하나 소개하고 자료를 배포할 계획이니 그곳에서 참고를 하기 바란다.

이제 앞에서 배운 레이어와 타임라인을 이용하여 웹에서 애니메이션을 어떻게 일으키는지 알아보기로하자.

우선 타임라인인스펙터를 위의 Window =">" Timeline 메뉴를 클릭해서 창을 띄우고 Object pallete에서 Draw layer 를 클릭한 다음 Document window상의 적당한 곳에 레이어(Layer1)를 그린다.

다음에 아래 그림과 같이 레이어의 핸들을 끌어다가(Drag) 타임라인의프레임상에 떨어뜨려서(Drop) 등록을 한다.
타임라인에는 푸른 색의 애니메이션막대가 생기고 이제 타임라인이 레이어를 제어할 수 있게 된 것이다.

위에서 만든 레이어에 적당한 그림을 삽입시키고 타임라인을 이용하여 그림을 이동시켜 보기로 하자.
우선 애니메이션 막대의 길이가 15프레임이고 초당 프레임의 수(FPS)가 15이므로 애니메이션을 원활히 하게 하기 위하여 프레임의 수를 45정도로 늘려 보자.

15번 프레임의 "ㅇ"을 드래그하여 45번 프레임에서 드롭하면 될 것이다.(이렇게 하면 애니메이션이 3초에 끝날 것이다)

다음에 아래의 그림처럼 레이어의 핸들을 이동시키고 싶은 지점까지 끌어다가 놓으면 먼저 있던 위치부터 마지막 위치까지 연결된 가느다란 선이 나타날 것이다.

이제 가장 간단한 애니메이션이 완성된 것이다 이것을 저장하고 미리보기를 하면 위의 그림이 화면상의의 좌측에서부터 우측으로 서서히 이동하는 모습을 볼 수 있다.
주의할 점은 자동으로 실행되게 하기 위해선 타임라인 상단의 Autoplay에 반드시 첵크표시를 하여야 한다는 점이다.

또 계속 되돌아 와서 다시 애니메이션되게 하려면 Loop에 첵크를 하면 된다.

미리보기

직선상을 따라 움직이는 것이 너무 밋밋하여 곡선상을 따라 가게 하고 싶다면 이 또한 간단하다.
아래의 그림처럼 중간지점인 23프레임을 선택하고 마우스 오른쪽 버튼을 눌러 add keyframe 를 선택하여 keyframe 를 삽입한 다음 레이어 핸들을 적당한 방향으로 드래그하여 끌어다 놓기 하면 나머지 프레임의 위치는 자체내에서 알아서 계산해준다.

이제 곡선을 따라 움직이는 간단한 애니메이션이 완성된 것이다.
Autoplay를 첵크하고 저장하여 미리보기를 한번 해보자.

미리보기

타임라인은 Document window 상단메뉴중 Window =">" Timeline 하여 아래 좌측 그림과 같은 Timeline inspector 창을 열 수 있다.

가.플레이어헤드 :


아래그림 좌측 타임라인상에 보면 붉은 사각형으로 표시된 것이 플레이백헤드이다.현재 어느프레임을 보여주고 있는지를 나타낸다.

나.애니메이션막대 :


타임라인 1번 줄에 표시된 푸른색 벨트이다.
애니메이션의 진행이 어떻게 되고 있는지를 보여준다.

다.키프레임 :


위의 애니메이션 막대상에 "ㅇ" 으로 표시된 곳을 키프레임이라 한다.
키프레임에는 할당된 개체에 대한 프로퍼티나 위치등을 지정할 수 있다.

라.FPS,Autoplay,Loop :


FPS(초당 프레임의 수),Autoplay(타임라인의 자동개시여부),Loop(타임라인의 자동 되돌리기)등을 지정할 수 있다.

마.비헤이비어라인 :

타임라인상의 프레임의 위에 "B"라고 쓰인 별개의 타임라인이 보이는데 여기의 적당한 곳에 앞으로 설명할 비헤이비어를 할당하므로써 액션비헤이비어를 타임라인상에서 제어할 수 있게 해준다.

바.팝업 메뉴 :

타임라인 우측상단의 ▼표시를 클릭하면 위그림 우측과 같은 팝업메뉴가 나타나는데 이와 같은 팝업메뉴를 이용하여 타임라인상에 개체를 추가하고 비헤이비어를 주며 타임라인과 각 프레임에 대한 편집을 할 수 있게 한다.

1.레이어의 삽입

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

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

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

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

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

 

1.레이어

지금까지 우리는 텍스트와 이미지와 테이블과 수평선등 객체들(Object)의 공간배치에 대해 배웠으며 이들을 어떻게 적절히 링크시키는지에 대해서도 배워왔다.
그런데 우리가 이제까지 배워 온 바에 의하면 어느 개체(Object)가 되었건 우리가 삽입하고자 하는 곳에 맘대로 배치되는 것이 아니라 브라우저의 상단좌측에서부터 순차적으로 배치되는 것을 보았다.

물론 테이블을 이용하면 테이블내에서의 각 열과 행을 이용한 수직적 또는 수평적인 배치로 조금 변화를 줄 수있었던 것은 사실이지만 테이블 자체도 가져다 놓고 싶은 곳에 맘대로 가져다 놓을 수 없는 것 아닌가.

레이어(Layer)는 우리를 이러한 제약에서부터 벗어나게 해준다.
다시 말하자면 우리는 레이어를 쓰므로써 위에 말한 모든 개체(Object)들을 자신이 가져다 놓고 싶은 곳이면 아무곳에나 가져다 놓을 수 있게 된것이다.

즉 공간배치를 마음대로 할 수 있게 되었다는 의미다.

레이어의 개념은 투명하고 손잡이가 달린 얇은 필름정도로 생각하면 쉽다.
필름위에는 적당한 그림이나 글짜 또는 다른 개체들을 배치시킬 수 있으며 손잡이를 드래그하여 브라우저 화면상의 아무 곳이나 배치시킬 수 있다.

레이어는 여러장을 겹쳐 놓을 수도 있는데 이 때 맨 위에 올려져 있는 레이어의 개체가 그 아래에 있는 개체위에 있으면 그 아래의 개체를 가려서 보이지 않게 할 수 있다.이것을 추후 다시 설명하겠지만 Z- index라고 하는데 수치가 만들어진 순서에 따라 1에서부터 1씩 증가한다.

레이어에는 적당한 색상을 입힐 수도 있다.
그러므로 공간배치뿐만이 아니라 시각적인 효과까지도 줄 수 있게 된 것이다.

레이어에는 추후에 설명되겠지만 비헤이비어라는 효과를 주어 적당한 시간에 나타나게도 할 수 있으며 사라지게 하거나 이동하게 할 수 있어서 특수한 효과를 줄 수 있다.

 

2.타임라인

지금까지 우리는 개체들의 시간적인 배치에 대해서는 공부한 바가 없다.
즉 다시 말하자면 어떤 개체를 브라우저상의 일정한 곳에 가져다 놓으면 그 개체는 브라우저상의 그곳에 놓인채 그 페이지를 떠날 때까지 꼼짝 않고 있어야만 했다.

정적인 것(Static)만 보여줄 수 있었을 뿐 동적인 것(Dynamic)은 보여줄 수 없었다는 이야기이다.
그런데 타임라인은 우리를 정적인 것에서부터 동적인 것을 보여줄 수있는 페이지를 작성하는데 유용한 툴을 제공한다.

즉 페이지가 로딩되면서 타임라인을 구동시키면 적절한 시간에 다른 페이지로 넘어가는 등의 원하는 특수효과가 나타나게 하거나 페이지내의 글짜나 그림등의 개체를 원하는 위치로 이동하게 만들 수가 있는 것이다.

3.레이어와 타임라인의 결합 =">" 다이나믹 HTML의 세계

레이어를 타임라인에 등록시켜 공간배치를 시간에 따라 제어해 보자.
또 여러장의 레이어위에 각각 개체들을 삽입해놓고 타임라인에 등록하여 각 레이어의 이동 또는 위에서 설명한 Z- index에 변화를 주어 보자.

어떤 일들이 일어날 것인가?

이제부터 드림위버에서는 레이어와 타임라인의 결합으로 간편하게 텍스트나 그림을 이동시킬 수도 있고 나타났다가 사라질 수도 있으며 자동으로 다른 페이지로의 이동이 이루어질 수도 있게 된 것이다.

우리는 이러한 툴을 이용하여 지금까지 보여왔던 정적인 홈페이지에서 벗어나 동적인 방문객의 마우스에 반응하는 그러한 홈페이지를 만들 수 있을 것이다.

레이어와 타임라인을 포함하여 앞으로 다루게 될 비헤이비어,오브젝트,커맨드등은 여러분의 홈페이지를 화려하게 수 놓을 것이다.

폼에 필요한 요소

폼을 만드는 이유는 입력받은 정보를 처리하기 위함이다. 따라서 이렇게 얻어진 정보는 가장 처음에 Insert Form 버튼을 통해서 만들어 졌던 빨간색의 테두리선 시작부분에 클릭을 하고 Property Inspector의 Action과 Method부분에 적당히 입력을 해 주어야 CGI를 통해 여러가지 처리를 할 수가 있다.

폼을 선택했을 때 나타나는 Property Inspector는 위 그림과 같다. 보다시피 Action부분에는 자료를 처리할 CGI파일의 위치이고, Method는 자료처리의 방법을 나타내는데 GET은 URL등의 데이타를 입력받을 때 주로 쓰이는 방식으로 데이타의 크기가 작을때 쓰인다. 반면에 POST는 입력된 데이타의 양이 많고 한꺼번에 처리할 때 쓰인다.

이제 마지막으로 다시작성과 제출의 두 버튼을 만들기 위해 버튼을 만들곳에서 Insert Button을 눌러주면 된다. Label에는 버튼에 쓰여질 글의 내용을 적고, Action부분에서 Reset Form이나 Submit Form을 선택하면 된다.

이제 남은 것은 Object Pallete의 나머지 버튼들에 관한 사항이다. 또다른 예제를 보면, 이 버튼들을 사용한 예를 볼 수 있다. 가장 첫번째에 쓰인것은 Image Field인데 Submit버튼과 같은 기능을 가지고 있다. Alt값은 이미지에서의 Alt와 같은 기능을 한다. 두번째에 쓰인 파일 업로드의 경우는 File Field를 이용한 것으로 Max Char, Char Width등 이미 보아온 옵션들이 있다.

히든 필드

마지막으로 Hidden Field를 사용했는데, 브라우져상에서는 보이지 않지만 Submit 버튼과 함께 전송되는 데이타가 있을 경우 사용한다. Value값에 지정하면 되겠다.

예제파일을 드림위버상에서 볼때의 그림이다. 포인터가 가리키는 것과 같이 실제 브라우져에서 보이지 않는 것들은 특별한 아이콘으로 보여지는데, 이것을 Invisible Elements라고 부르는데 Edit > Preferences > Invisible Elements에서 화면표시의 유무를 지정할 수 있다.

폼 양식의 구성 요소 소개

이번에는 입력양식(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를 만들 수 있다.