Commands 메뉴 이해하기

홈페이지 작업을 하다보면 단순한 작업을 반복적으로 해야 할때가 있다.. 이럴때 단순작업 꺼리를 저장해 두었다가 불러서 사용하면 쉽게 해결을 할 수 있는 방법이 있는데 이럴 때 사용하는 것이 바로 Commands이다..

자 그럼.. 드림위버의 Commands 메뉴에 대해서 알아보도록 하자...

우선 아래의 그림은 도큐먼트 윈도우(작업창) 메뉴에서 Commands를 클릭하였을 경우 나타나는 항목들이다..

Start Recording (Ctrl + Shift + X) : 도큐먼트 윈도우에서 작업중인 상황을 저장한다.. 즉 단순작업을 반복적으로 할 경우 그 단순작업의 행위를 저장함으로써 다음에 쉽게 사용을 할 수가 있다.. Start Recording을 클릭하고 기록중일 때는 항목이 Stop Recording 으로 메뉴가 바뀐다..

그럼 간단하게 예를 들어 설명을 해 보겠다.. 예제는 테이블을 만드는 것을 Recording 해서 불러오는 과정을 설명하겠다.. 우선 처음에 Command Menu에서 Start Recording 항목을 클릭(단축키 Ctrl + Shift + X)을 한다.. 그러면 기록이 시작되는 것이다..

그리고 Common 오브젝트 파레트에서 테이블을 삽입하는 아이콘 을 클릭하여 테이블을 삽입한다.. 여기서 테이블을 사용하는 자세한 방법에 대해서는 드림위버 테이블 활용하기를 참고하기 바란다.. 아래의 그림대로 값은 뭐 마음대로 설정을 하자..

위에서는 1행 1열의 테이블을 만들었다.. 그리고 나서 마지막으로 Commands 메뉴에서 Stop Recording을 클릭하면 방금전에 추가한 작업은 레코드에 기록이 된다..

이렇게 기록이 된 Command를 활용하는 방법은 Commands 메뉴의 Play Recorded Command 이다..

Play Recorded Command (Ctrl + P) : 기록된 Command를 실행 시킨다.. 방금전에 기록한 1행 1열의 테이블을 만드는 과정을 기록했으므로 지금은 이 항목을 클릭하면 바로 전에 기록했던 테이블이 만들어 진다..

이 테이블은 Ctrl + P 를 클릭하여 만든 테이블이다..

그리고 만약 이러한 작업을 다음에도 활용을 하기 위해서 저장을 하려 한다면 History 파레트에서 테이블을 만드는 항목을 선택하고 아래에 있는 저장 버튼을 클릭하면 저장을 위한 윈도우가 오픈이 되는데 거기서 원하는 이름을 적으면 된다.. 아래의 그림은 History 윈도우에서 테이블 만드는 과정을 선택한 화면이다..

History 윈도우의 아래에 있는 저장 버튼을 클릭하였을때 나타나는 윈도우이다.. 여기에 원하는 이름을 주고 저장을 하면 된다..

그리고 나면 이것은 나중에도 활용이 가능하다.. 확인하는 방법은 Command 메뉴를 클릭해 보면 맨 아래에 방금전에 저장한 "1행 1열 테이블" 이라는 항목이 생겨 있을 것이다.. 아래의 그림은 그 확인 그림이다..

자 그럼 만약에 이 Command에 여러개를 Record해서 기록해 두고 작업을 하면 편하다는 것을 알 수 있을 것이다.. 그러나 오랜 시간이 지나고 나서 Record된 항목들을 편집할 일이 있을 것이다.. 즉 필요없는 것은 삭제를 해야겠죠... 이럴땐 어떻게 하느냐...! 아래의 설명에서 이어 집니다..

Edit Command List ... : 이것은 지금까지 저장한 Command를 편집할 수 있다.. 우선 아래의 그림은 이항목을 선택하였을 경우 나타나는 윈도우이다..

여기서 필요없는 Command는 삭제를 하면 된다..

Get More Commands : 이 항목을 클릭하면 자동으로 새로운 Command를 소개하는 Macromedia 사의 사이트로 이동한다.. 새롭게 개발된 것이 있다면 여기서 다운을 받아 활용을 하면 된다..

Clean Up HTML : 이 항목은 잘못 입력되거나 필요없는 HTML 태그를 삭제해 주고 정리해 주는 기능을 한다.. 아래의 그림은 이항목을 클릭하였을 경우 나타나는 창이다..

Remove Empty Tags
비어있는 Tag를 지워준다..

Redundant Nested Tags
필요없이 중복된 태그를 지워준다..

Non-Dreamweaver HTML Comments 드림위버에서 추가하지 않은 주석을 지워준다..

Dreamweaver HTML Comments 드림위버에서 추가한 주석을 지워준다..

Spedific Tag(s) 지정한 Tag만 지워준다..

Options Combine Nested <font> Tag when Possible 가능한 Font Tag의 중복을 최적화 시켜준다..

Show Log on Completion 이 항목을 실행한 후에 확인 창을 띄운다..

Clean Up Word HTML : Word에서 작업된 HTML 문서는 소스 자체에 불필요한 요소가 삽입된다던가 혹은 부피가 커지는 소스가 많이 생길 수 있다.. 따라서 이러한 소스를 드림위버의 환경(?)에 맞도록 수정을 해준다.. 이 항목을 클릭하면 아래와 같은 창이 오픈된다..다시 Basic 과 Detailed 2개의 항목으로 분류가 되는데 바로 밑의 그림은 Basic을 선택하였을 경우의 그림이다..

Clean Up HTML from Word 2000과 Word 97/98 중 선택이 가능한데 어느곳에서 작업된 것인지를 선택해 주면 된다..

Remove all Word specific markup 워드에서 지정하여 사용한 태그들을 제거한다..

Clean up CSS CSS를 지운다..

Clean up <font> tags <font> 태그를 지운다..

Fix invalidly nested tags 정확하지 않게 중복된 태그를 지운다..

Set background color 배경색을 다시 지정한다..

Apply source formatting 지정된 형식을 적용한다..

Show log on Completion 이 항목을 실행한 후에 확인 창을 띄운다..

아래의 그림은 Detailed를 선택하였을 경우의 그림이다.. 워드에서 작업한 문서의 HTML 소스를 상세한게 정의하여 Clean Up을 실행하는 화면이다.. 자세한 설명은 생략한다..

Add/Remove Netscape Resize Fix.. : 지난번 강의에서 익스플로러와 넷스케이프간의 레이어에 대한 표준화가 이루어 지지 않아 레이어를 사용했을 경우 약간의 차이가 나고 넷스케이프에서 깨지는 현상을 없애도록 HTML 태그의 <head></head> 사이에 자바스크립트 소스를 추가해 준다..

그렇게 함으로써 레이어가 깨지지 않도록 방지해 주는 기능을 하는 것이다.. 이 항목을 클릭을 하면 아래의 창이 뜬다..

여기서 그냥 Add 버튼을 클릭하면 자동으로 헤드부분에 스크립트 소스가 생성된다.. 그러면 끝이다..

Optimize Image in Fireworks : 이 항목은 현재 작업하고 있는 문서에 이미지가 삽입되어 있을 경우 그 이미지를 선택한 상태에서 이 항목을 클릭하면 아래의 창이 뜬다..

위의 창은 Fireworks에서 이미지를 사용하기 위해서 PNG(Fireworks File Format) 파일을 사용할 것인지를 묻는 창이다.. 여기서 Yes를 클릭하면 PNG파일을 찾아서 선택해 주면 되고 No를 클릭하면 PNG 파일을 찾지 않고 현재 선택되어진 파일을 사용한다..

만약 위의 경우처럼 작업 할때마다 창이 뜨는것이 싫다면 이미지 아랫부분의 Fireworks Source Files에서 선택할 수 있는 항목들 중에서 하나를 선택하면 된다.. 그 항목들은 다음과 같다..

Ask When Launching 이 항목을 선택했을때 항상 위의 창을 띄워서 물어보게 만든다..

Always Use Source PNG 항상 소스파일 PNG 를 이용한다..

Never Use Source PNG 묻지 않고 바로 현재문서에 삽입된 그림을 이용한다..

위의 그림에서 Yes or NO 를 클릭하고 나면 아래와 같은 창이 뜨는데 이것은 드림위버의 화면이 아니라 Fireworks에서 보여주는 화면이다.. 그러므로 물론 자신의 시스템에 Fireworks가 설치되어 있다면 창이 뜰 것이고 설치가 되어 있지 않다면 당연히 창이 뜨지 않는다..

여기서 이미지를 최적화 한다는 것은 이미지의 화질을 양호한 상태로 보존 하면서 파일의 용량을 줄이므로서 로딩이 빨리되도록 한다는 것이다..

정확한 사용법은 Fireworks 강좌나 책을 보고 공부하시기 바랍니다.. 여기서는 드림위버 강좌이므로 여기까지만 하겠습니다..

Create Web Photo Album : 이 항목은 말 그대로 앨범을 만들어 준다.. 이 또한 Fireworks를 통하여 특정한 폴더에 있는 이미지들을 지정된 사이즈의 이미지 크기로 앨범형식의 HTML 문서로 만들어 준다.. 우선 아래의 창은 이항목을 클릭하였을 경우 나오는 창이다..

Photo Album Title 앨범의 타이틀을 적는다.

Subheading Info 앨범의 보조 설명을 정는다..

Other Info 앨범에 관한 보조정보를 적는다..

Source Images Folder 앨범에 들어갈 이미지 소스가 있는 폴더를 선택한다..

Destination Folder 앨범이 만들어질 폴더를 선택한다..

Thumbnail Size 이미지의 규격화된 사이즈를 설정한다..

Show Filename 파일명을 보여줄 것인가에 대한 설정

Columns 열의 갯수를 지정한다..

Thumbnail Format GIF 128, GIF 256, JPEG-Better Quality, JPEG-Smaller File중 선택을 할 수 있다..

Photo Format 이미지 파일의 형식을 설정한다..

Create Navigation Page For Each Photo 이미지를 클릭하였을 경우 원래의 이미지를 보여줄 페이지 자동제작 옵션이다..

위의 그림처럼 항목을 선택하고 체크하면 예제 파일이 생긴다.. 여기서도 참고할 사항은 드림위버에서 실행이 되는 것이 아니라 Fireworks에서 작업이 진행되는 것이므로 자신의 시스템에 Fireworks가 설치되어 있어야 한다..

위의 항목에서 Ok를 클릭하면 파이어웍스가 실행이 되고 작업을 한 후에 다시 드림위버로 돌아와 아래와 같은창이 뜬다.. 그러면 작업은 끝난 거다.. 간단하게 적용이 된다..

Apply Source Formatting : 이 항목은 HTML문서의 소스 형식을 지정된 포맷으로 변경하는 기능을 가지고 있다.. 이것은 특별하게 소스를 분석하고 직접 코딩 하는 경우에 쉽게 알아보게 하기 위한 기능이다..

이 항목은 단축키 Ctrl + U 를 한후에 Category를 HTML Format을 설정한 것과 동일하게 적용이 된다.. 이 부분에 대한 자세한 설명은 드림위버의 기본환경 설정을 참고하기 바란다..

Format Table : 이 항목은 현재문서에 삽입된 테이블의 형식을 드림위버에서 미리 준비된 형식의 색상과 형태로 빠르게 변경 할 수 있는 기능이다..

Row Colors First 첫번째 열의 색상을 지정한다..

Second 두번째 열의 색상을 지정한다..

Alternate 색상이 한줄 간격으로 삽입될 것인지 두줄, 세줄, 네줄, 간격으로 삽입될 것인지를 지정해준다..

Top Row Align 첫번째 열의 배열을 지정한다.. Left, Right, Center 중 선택

Text Style 첫번째 열의 텍스트의 스타일을 설정한다.. Bold(굵게), Italic(기울림) 등을 설정한다..

Bg Color 첫번째 열의 배경색을 지정한다..

Text Color 첫번째 열의 글자색을 지정한다..

Left Col Align 첫번째 행의 배열을 지정한다.. Left, Right, Center 중 선택

Text Style 첫번째 행의 텍스트 스타일을 설정한다.. Bold(굵게), Italic(기울림) 등을 설정한다..

Border 테이블의 테두리를 설정한다..

Sort Table : 이 항목은 현재 작업하고 있는 문서의 테이블을 일정한 형식에 맞추어 다시 정열을 하는 것이다.. 여기서 주의할 점은 Colspan 혹은 Rowspan을 적용한 테이블은 이 항목을 적용할 수 없다.. 아래의 그림은 이 항목을 클릭하였을 경우 나타나는 윈도우이다..

Sort By
정열하고자 하는 열을 선택한다..

Order
알파벳(Alphabetically) 순으로 정열할 것인지 아니면 숫자(Numerically)순으로 정열할 것인지 결정한 후에 오름차순(Ascending) 혹은 내림차순(Descending)을 선택한다..

Then By
첫째 행이 같다면 두번째로 기준이 될 열을 선택한다..

Options
Sort Includes First Row : 첫째열을 포함해서 정렬을 한다..
Keep Tr Attributes With Sorted Row : 열의 넓이와 속성을 남기고 Sort를 한다..

Set Color Scheme : 이 항목은 HTML 문서의 기본적인 색상을 미리 만들어진 리스트에서 선택하여 빠르게 적용할 수 있는 기능이다.. 위에 있는 Format Table과 같은 원리이다.. 우선 이 항목을 클릭하면 아래와 같은 그림이 나온다..

여기서 우선 좌측의 Background 색상을 지정하고 좌측의 Text and Links의 색상을 지정해 주면 된다.. 그리고 Apply를 적용하면 현재 작업문서에 바로 적용이 된다.. 반복하여 바꾸어 가며 적용해 보면 쉽게 이해가 되며 원하는 색상이 나오면 Ok를 클릭하면 된다..

자 이상으로 드림위버의 메뉴 중에서 Commands 메뉴에 대해서 알아보았다.. 여기서 공부한 Commands 메뉴는 알면 편리하고 몰라도 상관없는 기능들이 대부분이다.. 그렇다고 다 몰라도 된다는 이야기는 아니고 알면 더 없이 편리한 기능이므로 자기가 생각해서 꼭 알아야 겠다는 기능은 반드시 숙지를 하고 넘어 가도록 하자.. 다음 강좌는 드림위버의 Window메뉴에 대해서 알아보도록 하겠다..

혹시 제 강좌 중에 잘못된 부분이나 궁금한 사항이 있으면 언제든지 글 남겨주기 바란다.. 그러면 성심성의껏 충실한 답변을 해 드리도록 하겠습니다.. 그럼 오늘 강좌는 여기까지 입니다..

[Back] [Next]

Since 1998. 05. 02. E-Mail me at sabujak1020@naver.com

울산광역시 울주군 온산읍 영남2길 2. 태영 102호. 온산컴퓨터&폰 Tel:052-237-3092.