3-4. 코드 재사용
자산(Asset)패널에 포함되어 있는 라이브러리(Library)는 템플릿(Template)와 함께 사용하며 자주 변경되는 사이트 메뉴 패널이나 서브메뉴, 저작권 정보 등 코드 블록화 하여 템플릿, 문서에 삽입하면 가상본의 개념으로 원본을 수정하면 사이트내의 모든 가상본들을 갱신하여 사이트 관리를 쉽게 할 수 있습니다.
라이브러리는 body태그 내에 삽입되는 오브젝트만을 관리하여 다양한 소스코드의 작업에서의 불편한 점을 드림위버MX에서는 코드단편(Snippets)을 사용하여 자바스크립트, ASP등 재사용할 수 있는 관리 툴을 제공합니다.

1) 라이브러리(Library Item) 작성
라이브러리 작성은 자산(Assets)패널에서 새로운 라이브러리 생성버튼을 클릭하여 신규 라이브러리를 생성한 다음 라이브러리 이름을 입력하여 이중 클릭합니다. 사이트내의 클립보드의 기능을 하는 라이브러리는 자산 패널에서 Library버튼을 클릭를 선택하여 사용합니다.
라이브라리 아이템도 HTML 문서작성 방식과 동일하게 작업하며 Library라는 새로운 폴더가 생성되며 그 안에 *.lbi 라는 등록된 라이브러리가 생성됩니다.

snippet0_01.png
[1] 자산 패널에서 라이브러리 선택
[a] 라이브러리 미리보기 창
작성된 라이브러리의 HTML 코드를 브라우징하여 미리보기 합니다.
[b] 라이브러리 목록
사이트 내에 작성된 라이브러리의 목록을 이름, 사이즈, 경로 순으로 표시합니다.
[c] 삽입(Insert)버튼
라이브러리 목록에서 선택된 라이브러리 파일을 HTML문서에 삽입합니다.
[d] 갱신(Refresh Site List)버튼
라이브러리 아이템들의 수정이나 변경시 사이트 목록을 갱신합니다.
[e] 신규 라이브러리 아이템(New Library Item)작성 버튼
새로운 라이브러리 아이템을 작성합니다. Untitled라는 이름으로 작성되며 이름을 변경할 수 있습니다.
[f] 편집(Edit) 버튼
선택된 라이브러리 아이템을 열어 편집합니다.
[g] 삭제(Delete) 버튼
선택된 라이브러리 아이템을 삭제합니다.

참고
라이브러리 서브 메뉴 버튼에는 신규 라이브러리 아이템(New Library Item)작성, 열기(Open), 삭제(Delete), 이름변경(Rename), 페이지 추가(Add To Page), 사이트 윈도우에서 선택(Select In Site Window), 현재 페이지 갱신(Update Current Page), 페이지 갱신(Update Pages...)의 기능을 실행할 수 있습니다.

snippet0_02.png
[2] <<Library Item>>이 표시되는 라이브러리 아이템 문서

[3] 라이브러리에 HTML요소 작성

참고
라이브러리에 적용한 링크나 이미지 경로의 경우 모두 사이트 절대경로로 지정됩니다.

2) 라이브러리 페이지에 적용하기 (Apply Library Item)
등록된 라이브러리는 사이트 내에 이미 작성된 HTML문서, 또는 새롭게 만들어진 HTML문서 내에 적용할 수 있으며 다른 사이트에도 적용가능 합니다.
라이브러리는 템플릿과 함께 사용하여 사이트 자동화를 할 수 있습니다. 특히 템플릿 레이아웃에서 변경이 자주되거나 수정사항이 많아지는 부분을 라이브러리 아이템으로 삽입합니다.
작성방법은 HTML, 템플릿 문서의 라이브러리 적용 위치를 선택한 다음 라이브러리 패널에서 라이브러리 아이템을 선택하고 페이지에 삽입(Insert)버튼을 클릭하여 라이브러리를 삽입합니다.

[4] 라이브러리 아이템이 삽입될 위치 선택

[5] 라이브러리 선택
[6] 삽입 버튼 클릭

3) 라이브러리 속성 검사자(Library Item Properties)
삽입된 라이브러리 아이템은 전체 부분이 노란색으로 표시되며 삽입된 라이브러리는 그 자체로 수정을 하거나 변경을 할 수 없으며 라이브러리 속성 검사자(Library Item Properties)에서 라이브러리 오브젝트를 해체하여 라이브러리에 영향을 받지 않도록 수정하여 사용할 수 있습니다.

snippet0_06.png
[7] 라이브러리가 삽입된 결과

snippet0_07.png
[a] 열기(Open)
라이브러리의 소스를 찾아 라이브러리를 수정합니다.
[b] 원본 해체(Detatch From Original)
라이브러리를 해체하여 해당 오브젝트를 수정할 수 있도록 합니다. 이 기능을 사용하면 나중에 라이브러리가 갱신되어도 그 결과에 영향을 받지 않게 됩니다.
[c] 재창조(Recreate)
페이지에 적용된 라이브러리가 라이브러리 폴더나 라이브러리 아이템이 사라졌을 경우 라이브러리 팔레트에 재등록을 합니다.

4) 라이브러리 아이템 업데이트(Update Library Item)
사이트 전체에 메뉴를 적용하여 페이지를 만들었을 경우 일반적인 경우라면 메뉴에 URL을 수정해야 할 경우 메뉴가 삽입된 페이지를 모두 찾아 하나하나 수정해야 합니다. 라이브러리를 적용했을 경우 해당 라이브러리 아이템을 라이브러리 패널에서 수정하면 라이브러리를 적용한 페이지를 모두 찾아 코드를 갱신해 줍니다.
갱신하고자 하는 라이브러리를 선택한 후 라이브러리 속성 팔레트에서 열기(Open)버튼을 클릭하거나 라이브러리 아이템을 이중 클릭하여 라이브러리 작업 윈도우를 열어 수정을 합니다.

snippet0_08.png
[8] 라이브러리 작업 윈도우에서 변경할 오브젝트선택
 
snippet0_09.png
[9] 선택한 오브젝트의 링크 경로 변경

snippet0_10.png
[10] 파일 저장(Save)하여 업데이트 라이브러리 아이템 대화상자에서 목록확인
[11] Update버튼 클릭

snippet0_11.png
[12] 갱신된 정보 표시
[13] 닫기(Close)버튼 클릭

참고
라이브러리나 템플릿은 편집, 수정, 저장하면 업데이트 된 결과물에 대해 사이트에 연결된 모든 페이지를 페이지 업데이트(Update Pages) 대화상자에서 파일정보를 표시합니다.  Modify>Library>Update Pages...를 선택하여 직접 라이브러리와 템플릿을 업데이트할 수 있습니다.

[14] 변경된 라이브러리가 적용된 페이지 확인 결과
[15] 상태막대에 변경된 링크확인

참고
라이브러리 TAG
라이브러리가 포함되 있는 문서 내에는 다음과 같은 TAG가 삽입됩니다.
<!-- #BeginLibraryItem "/Library/menu.lbi" -->
<!-- #EndLibraryItem -->

5) 코드단편(Snippets)
코드단편은 자바스크립트, 메타파일, 텍스트, 머리글, 명령, 바닥글, 억세스 가능성, 양식요소 등의 코드를 라이브러리처럼 관리하여 사이트와 상관없이 재사용할 수 있는 도구입니다. 코드(Code)패널 그룹에 포함되어 있으며 Window>Snippets에서 확인할 수 있습니다.
ASP, JSP, PHP 등의 프로그램 소스코드나 자바스크립트, HTML오브젝트 같은 코드단편을 선택, 우측 마우스 버튼에서 새 코드 단편 만들기(Create New Snippets)를 실행하여 신규 코드를 추가할 수 있습니다.
 
snippet0_13.png
[1] 새 코드 단편 만들기(Create New Snippets)를 실행한 결과
[a] 이름(Name)
코드단편 패널에서 확인할 수 있는 이름을 입력합니다.
[b] 설명(Description)
코드단편의 사용 설명을 입력합니다. (공유할 경우 다른 작업자에게 사용방법 설명)
[c] 코드단편 형식(Snippet Type)
코드가 삽입될 때 선택영역 줄 바꿈(Wrap Selection), 블록 삽입(Insert Block)과 같은 형식으로 적용하게 합니다.
[d] 앞에 삽입(Insert Before)
선택한 블록 또는 코드의 영역 앞에 코드단편을 삽입합니다.
[e] 뒤에 삽입(Insert After)
선택한 블록 또는 코드의 영역 뒤에 코드단편을 삽입합니다.
[f] 미리보기 형식(Preview Type)
코드단편 미리보기 창에 나타날 형식을 디자인(Design), 코드(Code)로 표시할지 결정합니다.

snippet0_14.png
[2] 저장된 코드단편
[a] 코드단편 미리보기 창
작성된 코드의 코드, 디자인을 브라우징하여 미리보기 합니다.
[b] 코드단편 목록
사이트 내에 작성된 라이브러리의 목록을 이름, 설명 순으로 표시합니다.
[c] 삽입(Insert)버튼
코드단편에서 선택된 코드블록을 문서에 삽입합니다.
[d] 새 코드단편 폴더 생성(New Snippets Folder)
코드단편을 관리할 수 있는 폴더를 생성합니다.
[e] 새 코드단편(New Snippets)
새로운 코드단편을 작성합니다. Untitled라는 이름으로 작성되며 이름을 변경할 수 있습니다.
[f] 편집(Edit) 버튼
선택된 코드단편 아이템을 열어 편집합니다.
[g] 삭제(Delete) 버튼
선택된 코드단편 아이템을 삭제합니다.
 
[3] 문서에 코드단편 삽입 결과

참고
코드단편은 라이브러리처럼 코드단편에서 편집하여 내용이 갱신되어도 사이트에 사용된 결과물이 변경되지 않습니다.

3-5. SSI(Server Side Include)삽입하기
Web페이지를 동적으로 변화시킬 수 있는 방법에는 JavaScript, CGI, ASP와 같은 프로그램을 사용하여 제작할 수 있습니다. SSI(Server Side Include)는 코드블록화 외부의 HTML문서, TEXT문서, CGI 프로그램을 페이지 내로 가져와 사이트를 동적으로 변화시킬 수 있습니다.

1) 드림위버에서 SSI 삽입하기
문서 내에 SSI를 사용하여 다른 *.txt 나 *.html을 직접삽입 할 수 있습니다. 이 기능은 단순히 문서를 삽입한다는 개념보다는 지속적으로 업데이트 되어야 하는 부분을 원 페이지를 고치지 않고 다른 경로에 있는 txt나 html문서부분을 사용하여 손쉽게 사이트 정보를 변경할 수 있습니다.
오브젝트 삽입 윈도우에서 스크립트 탭을 선택하여 SSI삽입 (Insert Server Side Include) 아이콘을 클릭하거나 Insert>Server Side Include를 선택하여 삽입할 파일을 지정합니다.
 
snippet0_16.png
[1]SSI삽입 버튼 클릭

snippet0_17.png
[2]포함시킬 문서 선택
 
snippet0_18.png
[3] 파일경로로 SSI가 삽입된 결과
주의
HTML문서를 로컬 사이트에 미리 저장하지 않을 경우 경고 대화상자가 나타납니다.

참고
SSI삽입은 주석 코드를 사용하여 작성합니다.

2) SSI 요소 수정
작업화면에 삽입된 SSI 오브젝트 요소를 선택하면 SSI속성 팔레트가 나타나며 파일명(Filename), Type 가상경로(Virtual), 파일경로(File) , 편집(Edit)으로 나뉘어 집니다.
 
snippet0_19.png
[4] include.txt 파일이 삽입된 결과
[a] 파일이름(Filename)
SSI로 불러온 외부 파일이름을 표시합니다. 우측 폴더 아이콘을 클릭하여 파일을 다시 선택할 수 있습니다.
[b] 편집(Edit)
현재 삽입한 파일을 드림위버에서 직접 편집합니다.
[c] 형식(Type)
파일경로(File)는 실제 디렉토리 구조상의 파일 경로를 의미하며 가상경로(Virtual)는 서버의 절대경로를 의미합니다.

참고
드림위버에서 사용하는 SSI는 사이트 내에 매번 변경되는 각종 오브젝트를 작성하여 Header, Footer또는 날짜, 갱신시간 등에 사용할 수 있습니다.

3) 이외의 SSI 명령어
SSI는 표1.과 같이 6가지의 명령어를 가지고 있으며 각각 하는 일은 서버에서 얻는 정보를 토대로 클라이언트 브라우저에 그 정보를 표시하는 일을 합니다.
웹서버를 직접 운영하는 경우에는 이 명령어를 사용할 수 있지만 개인 사용자는 MIME에서 shtml설정은 물론 SSI명령이 지원되는 ISP인지 알아 보셔야 합니다.

예> <!--#command tag1="value1" tag2="value2" -->
<!--#include virtual=""-->
SSI에 대한 자세한 정보는 NCSA의 SSI 튜토리얼에서 확인해 보시기 바랍니다.
http://hoohoo.ncsa.uiuc.edu/docs/tutorials/includes.html
SSI명령어 기능
config Time, size, error 메시지의 형식을 지정할 때 사용
echo SSI 환경변수 값을 SSI문서에 삽입할 때 사용
exec 시스템 명령어나 CGI 프로그램을 실행시키고 결과를 SSI문서에 삽입할 때 사용
fsize 파일의 크기를 SSI 문서에 삽입할 때 사용
flastmod 파일의 가장 최근 갱신일자/시간을 SSI문서에 삽입할 때 사용
include 다른 파일, ASP, JSP등의 문서를 SSI문서에 포함시킬 때 사용

표1. SSI 명령어

3-6.자바스크립트(Javascript)
자바스크립트는 넷스케이프사에서 클라이언트에서 동작하는 인터프린터 언어로 썬(Sun)과 넷스케이프사가 만든 언어로 현재 인터넷익스플로러 4.0 이상 버전에서도 사용 가능합니다.
일반 개발자가 개발한 자바스크립트파일 (*.js)을 HTML코드에 삽입하여 클라이언트에게 제공할 수 있습니다.
자바스크립트에 개발에 대한 홈페이지는 http://developer.netscape.com/에서 정보를 얻을 수 있습니다.

1) 스크립트 요소 삽입
오브젝트 삽입 윈도우에서 스크립트(Script)를 선택하여 스크립트 삽입(Insert script) 아이콘을 클릭하거나 Insert>Script를 통해 HTML문서 내에 스크립트를 삽입할 수 있습니다.
스크립트 대화상자의 스크립트 선택에서는 JavaScript, VBScript 중 자신이 사용할 스크립트를 선택합니다.

snippet0_21.png
[1]스크립트(Insert Script) 삽입 버튼클릭
 
snippet0_22.png
[2]스크립트 선택

참고
인터넷 익스플로러에서 사용하는 자바스크립트는 표준 넷스케이프 자바스크립트에서 확장한 부분이 있기 때문에 http://msdn.microsoft.com/default.asp에서 자바스크립트에 대한 내용을 확인하시기 바랍니다.

2) 스크립트 입력
스크립트 삽입 대화상자에서 자바스크립트 코드를 직접 입력합니다. 만일 외부 스크립트를 사용할 경우는 OK버튼을 클릭합니다.
 
snippet0_23.png
[3]내용(Content)에 자바스크립트 코드 입력
[4]OK버튼 클릭

참고
자바스크립트로 문서에 간단한 글자를 입력하는 명령인 document.write
document.writeln("HELLO Javascript");
document.write("안녕하세요");
 
[5] 스크립트가 문서 내 삽입된 결과

3) 스크립트 인스펙터(Script Inspector)
자바스크립트 소스코드가 포함된 작업환경에서 비가시 단축 아이콘을 선택하면 스크립트 속성 팔레트가 나타납니다. Type에서 Client-side를 선택하고 File>Preview in Browser를 실행하여 결과물을 확인합니다.
CD>Lesson7>js1.htm 참조

그림 7-5
[6]삽입된 스크립트 선택
[a] 언어(Language)
언어에는 JavaScript, VBScript를 선택할 수 있습니다.
[b] 형식(Type)
형식은 클라이언트 사이드(Client-side), 서버 사이드(ServerSide)옵션을 선택할 수 있습니다. 클라이언트 사이드는 문서 내에 자바스크립트를 삽입하며 서버 사이드는 자바스크립트를 외부파일로 작성하여 문서에 불러와서 사용합니다.
[c] 소스(Source)
자바스크립트 코드만을 따로 저장하여 외부 파일로 등록된 (*.js) 파일을 선택합니다
[d] 편집(Edit)
입력한 클라이언트 사이드 자바스크립트를 편집하는 기능으로 스크립트 속성 대화상자에서 스크립트를 수정합니다.
 
snippet0_26.png
[7] 스크립트 속성 대화상자
 
snippet0_27.png
[8] 소스보기를 실행하여 삽입된 자바스크립트 소스확인

참고
자바스크립트의 HTML태그는 <script language="JavaScript">~</script>로 구성되며 VBScript를 사용할 경우 JavaScript를 대체하면 됩니다.

5) 결과 확인
자바스크립트는 드림위버에서 확인할 수 없어 File>Preview In Browser>에서 넷스케이프 또는 인터넷 익스플로러를 선택하여 브라우저에서 결과물을 확인합니다.
 
snippet0_28.png
[9] 스크립트 부분 브라우저에서 확인 결과

참고
자바스크립트는 공개된 소스들이 인터넷에 많이 있으며 국내, 해외 검색엔진에서 자바스크립트 관련 홈페이지에서 소스를 다운로드 받아 사용할 수 있습니다.