드림위버에 대해 정리해 보았습니다.

매니안닷컴의 빨간날개님이 작성하신 글입니다.

 

1-1 좋은 홈페이지의 조건

어느 위치에 있든지 사용자가 원하는 정보를 찾기 쉬워야 한다.

다양한 사용자 환경을 고려하여 홈페이지가 잘 보일 수 있도록 호환성을 가져야 한다.

지나친 그래픽 사용은 금한다.

홈페이지 방문자를 항상 고려하며 제작해야 한다.

 

1-2 홈페이지 제작을 위한 프로그램의 종류

웹 편집기

텍스트 편집기

HTML 전용 편집기

위지웍 편집기

기타 디자인을 돕는 프로그램

 

1-3 홈페이지 제작 방법 및 순서

1 주제 정하기

2 홈페이지 자료 수집하기

3 다른 홈페이지 참고하기

4 홈페이지 구상하기

5 화면 구성 및 디자인 하기

6 홈페이지 제작하기

7 서버에 업로드하기

 

1-4 Dreamweaver CS3의 주요 특징

다양한 웹 콘텐츠 제작

효울성 극대화

최상의 작업 방법 적용

 

색의 기본 속성 - 색상, 채도, 명도

 

웹에서의 색상 표현 방법

RGB(Red, Green, Blue) 16진수의 6자리 숫자로 표현

맨 앞 두자리 Red, 가운데 두자리 Green, 마지막 두자리 Blue 의 양을 나타내며 맨 앞에 #를 붙여 표기한다.

위지웍 편집기(WYSIWYG: What You See Is What You Get)

HTML 태그를 모르더라도 홈페이지 작업을 할 수 있도록 도와주는 도구로써 초바자라도 쉽게 홈페이지를 만들도록 해주는 웹페이지 제작을 위한 편집기이다. 다만 자동 태그가 만들어지기 때문에 불필요한 태그가 추가될 수도 있다.

2-1 DreamWeaver CS3의 시작 페이지는 새로운 페이지를 만드는 것을 쉽게 해결해 주고, 이 전에 작업했던 파일들이 나열되어 나타나기 때문에 편리하다.

2-2 작업화면은 그 사용에 따라 3가지로 나누어진다.

[Design style workspace] : 그림, 글 테이블 등을 눈으로 직접 확인하면서 편집할 수 있다.

 

[Code style workspace] : 디자인 편집 모드의 패널 위치가 왼쪽에 배치되는 구조이다.

 

[Split style workspace] : [Design style workspace]와 [Code style workspace]를 동시에 보여준다.

 

2-3 Insert tool bar는 그림, 레이어, 동적 데이터와 같은 오브젝트 삽입 기능을 가지고 있다. 패널은 확대/축소가 가능하며 필요에 따른 패널들을 모아 그룹화 할 수 있다.

 

2-4 로컬 사이트를 만드는 것은 웹 사이트의 똑같은 구조의 폴더를 시스템에 마련해 주는 것으로 이 로컬 사이트를 만들어 놓으면 파일을 새로 만들거나 수정할 때 편리하고, 문서에 삽입되는 이미지나 기타 요소들을 관리하기 쉬워진다.

 

배경색, 배경 그림 [Modify] -> [Page Properties] 선택하거나 [Properties]패널의 [Page Properties] 대화상자에서 설정 배경색과 배경 그림을 같이 설정했을 때 배경 그림이 우선 순위가 더 높기 때문에 배경 그림만 보이게 되므로 주의

 

글꼴 추가 방법

[Properties] 패널에서 [Font] 의 화살표 부분을 클릭하여 [Edit Font List] 를 선택한다.

[Edit Font List] 대화상자가 나타나면 [Add fonts in list below] -> [Available fonts] 에서 원하는 글자체를 선택하고 <<를 클릭한다 OK 버튼을 클릭하면 [Font list] 에 추가된 것을 확인할 수 있다.

 

이미지 삽입 4가지 방법

[Insert] 패널에서 [Common]의 images 단추를 클릭하여 [Select Image Source] 대화상자가 나타나면 이미지 선택 삽입 단축키 사용: Ctrl + Alt + I 키를 누르면 [Select Image Source] 대화상자가 나타난다.

[Insert] 패널 이용: 메뉴의 [Insert] -> [image] 를 클릭하면 문서에 이미지를 삽입할 수 있다.

[Asset] 패널 이용: 화면 오른쪽의 [File] 패널에서 [Asset] 에는 로컬사이트 안의 모든 이미지가 등록되어 있어 확인할 수 있다.

삽입하려는 이미지를 [Asset] 패널에서 선택한 후 문서로 드래그 하면 이미지가 삽입된다.

4-1 웹 문서가 빨리 전송될 수 있도록 파일 크기는 작게 만들면서도 화질이 떨어지지 않도록 하는 조건에 맞는 형식에는 'GIF', 'JPG/JPEG', 'PNG'가 있다.

 

4-2 이미지의 상대 경로는 현재 웹 문서를 기준으로 이미지 파일의 위치를 표시하는 것을 말하며 절대 경로는 이미지가 있는 위치를 홈페이지의 전체 주소로 표시하는 것을 말하며 자신의 홈페이지가 아닌 다른 홈페이지에 있는 이미지를 가져올 때 주로 사용한다.

 

4-3 드림위버와 외부 이미지 편집기를 연결하여 이미지를 편리하게 편집할 수 있는 기능을 제공해 준다. 웹 전용 그래픽 프로그램을 사용하는데, 웹 전용 그래픽 프로그램은 크기가 작고 이미지 최적화 기능을 제공하며 이미지를 삽입하여 HTML 문서로 만들 수 있다. 또한 이미지 슬라이싱 기능을 제공함으로써 이미지 편집이 쉽게 이루어진다.

 

4-4 드림위버 자체 내에서도 이미지 편집 기능을 가지고 있어 작업 도중에 간단한 이미지를 편집할 수도 있다.

 

GIF (Graphic Interchange Format)

JPG나 PNG보다 파일 크기가 작지만 최대 256 색상만 표현할 수 있다는 것이 단점이다 주로 메뉴나 아이콘처럼 간단한 이미지에 주로 사용하며 GIF형식은 저장하는 옵션에 따라 다양하게 활용할 수 있다.

투명 GIF: 배경색을 투명하게 만드는 이미지 형식으로 투명 GIF를 삽입했을 때 문서의 배경이 그대로 나타나게 된다.

인터레이스 GIF: 인터레이스 GIF 이미지는 이미지를 읽는 동안 희미하게 나타나면서 모두 읽으면 진하게 나타난다.

애니메이션 GIF: 여러 개의 GIF이미지를 연결하여 애니메이션 효과를 낼 수 있다.

 

JPG/JPEG (Joint Phtographic Experts Group)

사진 이미지를 표현하는 데에 적합한 파일 형식으로 GIF 형식에 비해 사용 가능한 색이 더 많이 있다.

 

PNG (Portable Network Graphics)

익스플로러와 넷스케이프에서 부분적으로 지원하는 형식으로 저장할 때 압축되면서 이미지가 손상되는 것을 최대로 줄여준다.

 

이미지를 삽입하는 방법

1 오른쪽의 [File] 패널에서 이미지를 클릭한 상태로 마우스 드래그하여 이미지를 삽입한다.

2 삽입하려는 셀 안에 마우스 커서를 위치시킨 후 이미지 단추를 클릭하면 [Select Image Source] 대화상자가 나타난다.

  삽입하려는 이미지를 선택한 후 [OK] 버튼을 누르면 이미지가 삽입된다 - 이미지 도구를 이용하여 이미지 삽입하는 방법

 

[Insert Rollover Image] 대화 상자의 속성

[Insert] -> [Insert Objects] -> [Rollover Image] 메뉴를 선택하면 [Insert Rollover Image] 대화상자를 띄울 수 있다.

Image name: 이미지 이름을 정한다.

Original image: 웹 문서에 기본으로 나타나는 이미지를 지정한다.

Rollover image: 이미지 위에 마우스 포인터를 올려놓았을 때 바뀔 이미지를 지정한다.

Alternate text: 이미지 위에 마우스 포인터를 올려놓았을 때 표시되는 텍스트를 지정한다.

When clicked, Go to URL: 롤오버 이미지를 클릭하면 이동할 홈페이지의 주소나 파일 이름을 저장한다. 롤오버 이미지를 메뉴로 사용할 시에는 이 항목에 링크할 주소를 입력해야 하며 따로 입력하지 않으면 자동으로 # 기호가 입력된다.

 

V Space/H Space: 이미지의 상하좌우에 여백을 지정한다.

3-1 홈페이지를 제작할 때 테이블 사용의 장점

내용을 보기 좋게 정리할 수 있다.

여러 개의 이미지를 하나로 합쳐 보여줄 수 있다.

웹 문서의 레이아웃을 제작하기 쉽다.

 

3-2 테이블은 행과 열로 이루어져 있으며 테이블 대화 상자를 이용하여 행과 열의 값을 설정하고 속성들을 설정하여 테이블을 생성할 수 있다. 또한 속성 창을 이용하여 테이블의 테두리 선 두께, 배경색, 텍스트 속성 등을 설정할 수 있다.

 

3-3 테이블을 생선한 뒤에도 테이블과 셀의 크기를 변경/설정할 수 있으며 셀을 삽입/삭제할 수 있다.

 

셀 삽입

Tab 키를 이용한 행 추가

열의 너비 값을 클릭하는 방법을 이용한 열 추가

작성된 테이블 안쪽에서 마우스 우클릭으로 나타나는 빠른 메뉴에서 [Table] 메뉴의 하위 메뉴인 [Insert Row], [Insert Column] 메뉴를 이용하여 행과 열을 추가할 수 있다.

[Modify] 메뉴에서 [Table] 메뉴의 하위 메뉴인 [Insert Row], [Insert Column] 메뉴를 이용하여 행과 열을 추가할 수 있다.

 

셀을 선택하는 방법

마우스 드래그를 이용하는 방법

Ctrl 키를 이용: Ctrl 키를 누른 상태로 마우스로 셀을 하나씩 클릭하면 원하는 셀들을 다중 선택할 수 있다.

태그 선택기 사용: 선택하려는 셀 안에 마우스 커서를 위치시키면 화면 아래 태그 선택기에 태그 <td> 가 굵은 색으로 표시된다.

이 태그 선택기에서 <td> 를 마우스로 클릭하면 마우스 커서가 위치한 셀이 선택된다.

 

셀을 삭제하는 방법

지우려고 하는 열을 마우스로 드래그하여 선택한 다음 Delete 키를 눌러서 삭제

삭제하려는 행 또는 열에 마우스 커서를 위치시키고 그 셀 안에서 마우스 우클릭으로 나타나는 빠른 메뉴에서 [Table] 메뉴의 하위 메뉴인 [Delete Row]/[Delete Column] 메뉴를 이용하여 행과 열을 삭제할 수 있다.

 

Cell padding: 셀 안의 내용과 셀 테두리선의 여백을 지정한다 아무 값을 입력하지 않으면 기본 값 '1픽셀'이 설정된다.

Cell spacing: 셀과 셀 사이의 여백을 지정한다 아무 값을 입력하지 않으면 기본 값 '2픽셀'이 설정된다.

 

Insert Rows or Columns 대화상자 속성

Insert: 행을 추가할 것인지 열을 추가할 것인지를 선택한다.

Numner of rows: 추가할 행과 열을 설정한다 Insert 항목에서 Columns를 선택하면 자동으로 Number of Columns로 바뀌게 된다.

where: 현재 커서를 기준으로 위쪽과 아래쪽, 왼쪽과 오른쪽에 선택적으로 추가하게 된다.

 

5-1 드림위버는 플래시와 완벽하게 호환이 되기 때문에 웹 편집기로 많이 사용한다. 이 플래시를 사용하여 홈페이지를 더욱 다양하고 다이내믹하게 꾸밀수 있다.

 

5-2 인터넷 속도가 빨라졌다고는 하나, 플래시만으로 홈페이지를 만들면 로딩시간이 길어지기 때문에 방묹자가 많은 홈페이지일 경우에는 간단한 플래시 무비만을 사용하는 것이 좋다.

 

5-3 플래시 무비는 FLA 파일 상태로는 웹문서에 삽입할 수 없으므로 반드시 SWF 파일로 변환해야 한다.

 

5-4 텍스트의 배경색, 글자 색 롤오버 했을 때 변하는 색을 지정하면 마우스가 움직일 때마다 움직이는 플래시 텍스트를 만들 수 있다 또한 다양한 플래시 버튼 스타일을 선택하여 원하는 대로 만들 수 있다.

 

5-5 웹 문서에 배경 음악을 삽입할 수 있으며 설정에 따라 플레이어의 속성을 설정한 뒤, 감추어 사용자가 플레이어를 제어할 수 없게 할 수도 있고 또는 보이게 하여 사용자가 제어할 수 있도록 할 수도 있다.

 

반드시 플래시 프로그램에서 만들어진 'FLA' 파일은 'SWF' 파일로 변환해야 웹 문서에 삽입할 수 있다 플래시 프로그램에서 만들어진 FLA 파일은 확인차 Ctrl + Enter 키를 누르면 플래시 무비가 재생됨과 동시에 'SWF' 파일이 만들어진다.

 

플래시 무비의 배경 투명하게 만들기

1 웹 문서에 배경이미지를 삽입하고 플래시 무비를 삽입한다.

2 삽입한 플래시 무비를 선택한 상태에서 속성창의 Parameters...를 클릭한다.

3 [Parameter] 대화상자가 나타나면 Parameter 항목의 아래를 클릭한 후 입력 박스에 'wmode' 를 입력한다.

  그런 다음 value 항목의 아래를 클릭한 후 입력박스에 'transparent' 를 입력하고 [OK] 버튼을 누른다.

4 드림위버 문서창에서는 플래시 무비의 배경색을 확인할 수 없으므로 F12 키를 눌러 브라우저에서 확인한다.

 

문서에 배경 음악 삽입하기

1 테이블의 앞에 마우스 커서를 옮겨 놓고 Media의 목록 단추를 클릭해서 나타나는 메뉴에서 Pluging를 선택한다.

2 [Select File] 대화 상자가 나타나면 배경음악을 선택한 후 [OK] 버튼을 누른다. 문서 오른쪽에 플러그인 아이콘이 나타나 음악이 삽입된 것을 알 수 있다 음악파일을 삽입할 때 복사를 할 것인지 묻는 대화 상자가 나타나면 [OK] 버튼을 눌러준다.

3 문서창에 플러그인 아이콘을 클릭한 다음 속성창에서 Parameters... 를 클릭한다.

  [Parameter] 대화 상자가 나타나면 Parameter 의 아래에는 매개변수로 hidden 을, Value의 아래에는 매개변수로 True를 직접 입력하여 화면에서 플레이어를 감추기 위한 속성을 설정한다.

 

[Insert Flash Button] 대화 상자 속성

Sample: style 항목에서 선택한 단추의 모습이 나타난다 샘플 단추 위에 마우스 포인터를 올려 놓으면 효과를 확인할 수 있다.

Button text: 단추에 나타낼 내용을 입력한다.

Target: Link를 적용시켜 연결한 내용을 html 페이지의 어느 부분에 나타낼지를 지정해준다.

 

매개변수                     조건문 설명                                          사용할 수 있는 값

AutoStart      페이지가 열릴 때마다 음악을 재생할 것인가?          true: 자동재생

                                                                                         FLAuse: 재생 단추를 클릭해야 재생

Hidden     플레이어를 화면에서 감출 것인가?                         true: 화면에서 플레이어를 감춤

                                                                                        FLAuse: 화면에서 플레이어를 보임

Loop  음악을 얼마나 반복할 것인가?                          true: 반복재생

                                                                           FLAuse: 한번만 재생

                                                                            (숫자): 지정한 횟수만큼 반복 재생

Volumn      볼륨                                                      숫자 0~100 사이에서 선택

                                                                           (0: 볼륨 없음  100: 볼륨 최대)

6-1 프레임은 한 화면을 여러 영역으로 나누어 각 영역마다 다른 웹 문서를 보여주는 구조를 말한다. 프레임셋은 문서 안의 모든 프레임을 묶는 역할을 한다.

 

6-2 프레임을 사용하면 문서를 깔끔하게 정리하고 한 화면에 여러개의 문서를 종류별로 배치할 수 있다. 전체 사이트 문서 분량을 줄일 수도 있으며 홈페이지 제작이 쉽다. 하지만 로딩 시간이 더 길어지고 모든환경에서 똑같이 보이지 않으며 레이아웃 이미지를 사용하지 못하는 단점도 있다.

 

6-3 프레임을 사용하는 이유중 하나가 화면의 일부는 고정시키고 원하는 프레임의 내용만 바꿀 수 있다는 점이다.

 

6-4 인라인 프레임은 테이블로 만든 레이아웃에서 프레임 문서처럼 일부 내용은 고정시키고 특정 부분만 바뀔 수 있도록 도와준다.

 

프레임 구조를 만드는 방법

1 [New Document] 대화상자의 [Framesets] 카테고리 이용

[File] -> [New] 메뉴를 클릭하여 [New Document] 대화상자가 나타나면 대화상자의 [Frameset] 카테고리를 이용하여 프레임 구조를 선택하여 나누는 방법

2. [Layout]삽입 툴바의 프레임 아이콘 버튼

[Layout]삽입 툴바에서 Frameset 아이콘을 클릭하면 목록이 나타난다 그중에서 원하는 프레임 구조 형태를 선택하는 방법이다.

3. 프레임 보더에서 직접 드래그

[View] -> [Visual Aids] -> [Frame Borders]명령을 실행하면 프레임 보더가 나타난다. 이 프레임 보더를 마우스 드래그 하여 프레임을 나누는 방법이다.

Ctrl 키를 누른 상태로 위쪽 프레임 보더에서 아래쪽으로 마우스 드래그하면 이전의 프레임으로 나누어진 프레임 형태는 무시하고 프레임이 나누어진다.

4. [Modify] -> [FrameSet] 으로 프레임 나누기

[Modify] -> [FrameSet] 명령을 실행하면 프레임을 나눌 수 있는 메뉴 목록이 나타난다. 이 메뉴를 이용하면 편집창에서 현재 커서가 놓여있는 곳을 기준으로 선택한 프레임 구조로 나누어지게 된다.

[Modify] -> [FrameSet] -> [Split Frame Up]을 클릭하면 프레임이 상하로 나누어진다.

 

프레임 크기를 고정시키고 스크롤 바를 없애려고 한다.

프레임 선택 후 속성의 Scroll: 스크롤 바의 보이기 속성

                     -[No]로 지정: 항상 나타나지 않는다

No resize: 프레임의 크기를 고정하여 웹 브라우저 창에서 방문자가 프레임의 크기를 변경할 수 없게 한다.

 

Src: 프레임에 나타나는 문서의 파일 경로를 지정한다 Browse for file단추를 클릭하여 파일을 선택하거나 직접 파일 이름을 입력한다.

Value/Units: 현재 선택한 프레임을 그림으로 표시하여 선택한 프레임 영역에 대한 가로/세로 높이와 단위를 지정한다. 원하는 프레임을 클릭한 후 Value, Units에서 크기를 지정할 수 있다.

RowCol Selection: .......

Margin width/Margin height: 프레임 주변 내용의 상하좌우 여백 크기를 지정한다.

 

프레임 문서에 링크를 연결하는 순서

1 이미지를 선택후 속성창의 Link로 연결하려는 내용(이미지, html, 텍스트 등등) 선택

2 속성 창의 Target 지정(Link를 적용시켜 연결된 내용을 html페이지의 어느 부분에 나타낼지 지정)한다.

3 F12를 눌러 브라우저에서 확인해 본다.