DREAMWEAVER TUTORIAL : STEP 1

드림위버를 설치후 실행시키면 아래와 같이 드림위버 작업창이 나타난다. 이 작업창내에서 우리는 간단한 HTML문서에서부터 복잡한 애니메이션 효과를 가진 복잡한 문서까지 큰 어려움없이 만들어 낼 수 있다. 작업창의 상단에는 작업창내에서의 작업을 돕기위한 8가지의 메뉴가 있다.
드림위버는 문서에 스타일을 적용하거나 레이어, 이미지나 테이블, 프레임같은 개체삽입등 HTML문서제작에 자주 사용되는 중요한 기능들은 따로모아 새로운 창으로 제공한다. 메뉴에서 Window를 클릭하면 위로부터 Objects, Properties, Launcher 세가지 서브메뉴가 나타나는데 이들을 클릭하면 중요한 기능만을 뽑아 놓은 별도의 창이 뜬다. 사용자는 각 창의 툴바를 이용해 빠르고 쉽게 원하는 기능을 실행할 수 있다. 드림위버의 사용법을 빠르게 손에 익히려면 단축키와 함께 이들 창을 효과적으로 이용할 수 있어야 한다. 이 Tutorial에서는 앞으로 이들을 각각 Objects, Properties, Launcher라 부르기로 하겠다.

그럼, 각각의 Objects, Properties, Launcher에 대해 좀더 자세히 알아보자.

Objects창에는 드림위버가 HTML문서에 삽입할 수 있는 객체가 나열되어 있으며 이를 클릭함으로써 각 객체를 삽입할 수 있을 뿐 아니라 Properties창을 이용해 쉽게 그 속성을 바꿀 수가 있다.

Objects의 맨 위에 보이는 화살표를 클릭하면 리스트가 나오는 데 Common, Forms, Invisibles라고 되어 있는 것을 볼 수 있을 것이다.

Common은 HTML문서에서 흔히 사용되는 객체를 모아놓은 것으로 왼쪽의 그림이 바로 Common를 선택했을 때의 모습이다. 이미지데이터나 테이블, 레이어등을 쉽게 삽입할 수 있도록 툴바를 모아놓았다. 작업창내의 임의위치에서 이들 툴바를 클릭하게 되면 그 위치에 해당 객체가 삽입되고 동시에 HTML코드도 드림위버에 의해 만들어지는 것이다. 만들어지는 코드는 드림위버의 디렉토리 Configuration -> Objects 내의 HTML문서를 보면 알 수 있고 해당객체에 대한 자바스크립트를 수정하면 객체를 삽입할 때 마다 자신이 원하는 코드가 삽입되도록 만들 수도 있다. (이에 대해서는 본 홈페이지 자료실의 BDK(Behaviour Development KIt)를 다운받아 그 안의 내용을 살펴보면 그 방법을 알 수 있다.)

Forms에서는 버튼이나 텍스트 입력란, 라디오버튼, 체크박스, 리스트박스등의 폼 객체를 삽입할 수 있다.

Invisibles에서는 실제 웹문서상에는 출력되지 않는 주석문이나 개행문자를 삽입할 수 있다.

기본적으로 약 22개의 객체를 가지고 있는데 BDK를 이용하여 자신이 직접 자주 쓰는 것을 객체화하면 그만큼 HTML문서를 만드는데 드는 시간과 노력을 줄일수 있다. 인터넷상에는 이들 기본적인 객체외에도 수많은 개발자들이 만들어놓은 Object가 존재한다. 이들을 다운받아 Configuration -> Objects 밑의 디렉토리를 하나 만들고 그안에 gif 파일과 html 파일을 두면 다음번 드림위버를 실행할 때 이 객체가 설치되어 있는 것을 볼 수 있을것이다.

Common

이미지

테이블

레이어

이제 상단 메뉴판의 Insert 메뉴를 선택하여 서브메뉴를 보자. 앞에서 설명했던 Objects창의 세가지 형식의 객체들이 서브메뉴로 나타나 있는 것을 볼 수 있다. 이와 같이 객체를 삽입하기 위해 메뉴를 이용할 수 도 있고 앞에서와 같이 Objects창의 툴바를 이용할 수도 있다.

이제 드림위버에 내장된 객체외에 개발자가 직접 개발한 사용자정의 객체를 드림위버에 추가하는 방법에 대해 알아보자. Objects에 있는 테이블모양의 툴바를 클릭하면 삽입될 테이블의 모양을 결정하기 위한 대화상자가 아래와 같은 모양으로 뜬다.

드림위버의 테이블삽입기능은 행과 열, 그리고 크기만을 조절할 수 있는 조금은 미약한 기능을 가지고 있다. 물론 테이블을 삽입한 후에 Properties창에서 테이블속성에 변화를 줄 수 있지만 가능하면 테이블을 삽입할 때 그 간격이나 크기등 보다 많은 속성을 지정해 줄 수 있으면 훨씬 수월한 작업을 할 수 있다. 그래서 필자는 드림위버 객체를 제공하는 홈페이지에서 확장 테이블객체를 얻었다. 이런 파일들은 보통 그안에 개발자에 대한 소개와 저작권정보, HTML 소스파일, 그리고 Objects창에 등록할 툴바 이미지를 담고 있다. 이제 이 이미지데이터와 HTML파일을 Configuration -> Objects -> Common 디렉토리에 복사하여 기존의 파일을 덮어쓴다. 그리고 다시 드림위버를 재실행시키고 Objects에서 테이블 툴바를 클릭하면 아래와 같이 보다 많은 속성값을 줄 수 있는 확장된 대화상자가 뜬다.

이와 같은 방법을 이용하면 객체뿐 아니라 뒤에서 다루게 될 Behavior도 추가및 수정이가능하다.

앞에서 삽입가능한 여러 객체를 볼 수 있었는데 이중 HTML문서제작시 가장 많이 사용하게 되는 것은 이미지와 테이블, 그리고 레이어 객체등의 일부분이다. 이들 객체의 속성은 다음에서 설명할 Properties라고 하는 또하나의 창에서 변경할 수 있다.

Properties는 아래와 같이 이미지의 속성, 테이블의 속성, 그리고 일반 텍스트의 글꼴 및 모양등의 여러가지 속성을 키입력및 버튼만으로 쉽게 바꿀 수 있는 창으로 사용자가 어떤 객체를 선택하느냐에 따라 Properties창의 내용이 바뀌어진다. 각 경우에서의 Properties창의 내용을 살펴보자.

위의 그림은 일반 텍스트에서의 Properties창을 띄웠을 때 나타나는 화면이다.
HTML문서에서 텍스트는 여러가지 속성을 갖는다. 폰트및 크기와 같은 것에서부터 볼드체나, 이탤릭체와 같은 모양에 대한 값을 줄수도 있고, 좌우나 중앙으로 정렬도 바꾸어 줄 수 있다. 해당 텍스트를 리스트로 바꿀 수도 있으며 다른 문서로 이동을 위한 링크도 붙일 수 있다. 이러한 텍스트가 가지는 여러가지 속성을 이 Properties창 하나에 간략히 표시하여 사용자가 자세한 태그문법을 몰라도 쉽게 텍스트의 모양에 변화를 줄 수 있도록 한 것이 드림위버에서 Properties창이 가지는 장점이다.

위의 그림은 사용자가 이미지를 선택했을 때 표시되는 Properties창의 내용이다.
왼쪽 상단을 보면 이미지임을 알리는 image표시와 함께 이미지의 크기가 나와 있다. image 바로 아래의 입력란에는 이 이미지데이터에 대한 고유의 이름을 줄 수 있다. 즉, 커서가 이미지위에 있을 때 그림을 다른 것으로 바꾼다거나 하는 조작(이것을 Image rollover라 한다)을 할 때 해당 이미지들에 접근하여 다른 이미지로 치환시켜주는데 이때 각 이미지들을 구별하기 위해 부여하는 이름을 이 입력란에 주는 것이다. 자바스크립트를 사용하여 이벤트를 주지 않는다면 아무값도 주지 않아도 무방하다. 나머지는 이 이미지가 갖는 속성을 보여주고 있다.
이미지의 가로및 세로크기는 이미지데이터를 불러들였을 경우 자동적으로 원본 데이터의 크기로 지정된다. 이값을 원하는 크기로 수정하여 확대및 축소시킬 수 있다. 여기에는 정수로서 픽셀(px)단위로 값을 줄 수 도 있고 30%와 같이 배율단위로도 줄 수 있다. 즉, W(idth)를 30%로 설정할 경우 브라우저윈도우의 30%를 차지하는 이미지가 된다. Src는 이미지데이터가 있는 파일위치이고 Link는 해당 이미지를 통해 다른곳으로 이동하고자 할 때 주는 url 주소이다. Align으로는 이미지와 텍스트간의 정렬을 바꾸어 줄 수 있다. 아래의 Alt에는 해당 이미지가 브라우저에 읽혀지기 전에 미리 보여주는 텍스트이다. 이미지의 경계값을 주려면 Border에 값을 준다.
우측 하단을 보면 Map 버튼과 Edit Image버튼이 있다. Map버튼은 해당 이미지에 대해 이미지 맵(Image Map)처리를 하고자 할 때 사용하며 내장된 이미지맵 에디터를 불러온다. 드림위버에서 이미지맵처리를 하는 방법은 무척 간단하다. 아래의 이미지에 대해 맵처리를 해보자. 이미지를 선택하고 Map버튼을 눌러 에디터를 불러온다.

왼쪽에 네개의 도구가 보인다. 위와 같이 각각의 링크처리를 하고싶은 영역을 적당한 도구를 이용하여 드래그하여 선택한다. 위에서는 사각형 도구를 이용하여 다섯개의 영역으로 나누었다. 우측하단에는 영역선택을 위한 좌표가 출력된다. Link라에는 해당 메뉴를 클릭했을 때 이동할 url을 적어주고 오른쪽 Alt는 이미지에 대한 Alt와 같은 의미를 갖는다. Target은 새로이 이동을 하여 guestbook.html을 보여 줄 때 어느 창으로 보여줄 것인지를 결정한다. 새로운 창을 띄워 보여주고자 한다면 _blank를 선택하고 현재의 브라우저 윈도우에 출력하고자 한다면 _self또는 아무것도 선택하지 않아도 된다. 좌측 상단에 Mapname에 고유이름을 주는것을 잊지 말도록 하자.

다시 Properties창으로 돌아가 우측하단에 남은 버튼 Edit Image를 보자.
이것은 현재 선택한 이미지를 수정하기 위해 이미지 편집프로그램을 실행시킨다. 드림위버에는 자체 이미지편집기가 없으며 자신이 즐겨쓰는 이미지편집 프로그램을 등록하면 Properties창내에서 쉽게 이미지편집 프로그램을 불러와 작업을 할 수 있다. 작업후 수정된 이미지는 그대로 드림위버에서 갱신된다. 외부 프로그램은 Edit -> Preferences 메뉴에서 External Editors를 클릭하여 등록시킬 수 있다. 외부편집프로그램은 이미지뿐 아니라 HTML 편집기도 등록이 가능하다. 필자의 경우 이미지 에디터로는 PaintShop Pro 5.0을 등록하여 사용하고 있으며 Ultra Editor를 HTML 외부편집프로그램으로 등록하여 드림위버에서 작업한 문서를 마무리지을 때 사용한다.

위의 그림은 테이블을 선택했을 때 나타나는 Properties창의 내용이다. 이미지와 마찬가지로 테이블에도 고유의 이름을 줄 수 있다. 이 이름은 이미지나 테이블 뿐 아니라 자바스크립트에서 객체로 간주하는 모든 것에 줄 수 있다. 이는 브라우저가 윈도우내에 나타나는 모든 내용을 객체로 간주하기 때문에 가능하다. 자세한 것은 자바스크립트 기초쌓기를 참고하도록 하자.
테이블이 갖는 속성으로는 우선 행과 열이 있으며 크기와 테이블의 두께에도 값을 줄 수 있다. 이미지와 마찬가지로 픽셀뿐 아니라 배율(%)로도 줄 수 있다. CellSpace는 테이블을 이루는 각 셀간의 간격을, CellPad는 셀안의 내용과 셀의 가장자리와의 간격을 말한다. CellPad를 0으로 주고 일정 두께를 주면 셀안의 내용이 가장자리에 바로 붙어버리므로 보기에 좋지 않다. 따라서 테이블안의 내용이 적지 않을 경우 CellPad도 적당한 값을 주는 것이 보기좋다. 그 아래에는 테이블 셀에 줄 수 있는 속성으로 테이블의 배경색, 경계색등을 지정해 줄 수 있다.

위의 그림은 레이어를 선택했을 때 나타나는 Properties창의 내용이다. 레이어는 브라우저 윈도우내에에 좌표값을 가지고 자유로이 배치될 수 있는 객체로 브라우저 4.0 이상에서만 지원된다. 기존의 이미지와 테이블등이 윈도우내에 자리를 고정하여 위치하던 것에 비해 레이어는 Z-Index를 추가하여 3차원 공간에 자리잡음으로써 이미 한계에 다다른 단순 HTML문서에 다양한 표현방법을 제공하고 있다.

이외에도 Properties창은 이미지, 테이블, 레이어뿐 아니라 프레임등 여러가지 다른 객체를 선택했을 때에 따라 다양한 속성을 갖는데 여기서는 그 창의 기능과 모습만을 잠시 살펴보았다. 자세한 내용은 각 객체에 대한 설명에서 알아보기로 하고 Launcher에 대해서 보도록 하자.