Dreamweaver에서 템플릿을 사용하는 방법
저자：Eve Cole
업데이트 시간：2009-05-30 18:50:16
웹 디자인 도구인 Dreamweaver(이하 DW, 현재 최고 버전은 4.02, 이 기사의 예는 버전 4.0)에는 템플릿이라는 매우 강력한 기능이 있습니다!
그렇다면 템플릿의 매력은 무엇일까요? 어떤 특징이 있나요?
템플릿을 사용하면 사이트의 모든 페이지에 나타나는 요소를 확고히 할 수 있습니다.
템플릿을 사용하여 웹 페이지를 생성하면 전체 사이트가 통일된 스타일을 가질 수 있습니다.
템플릿만 수정하면 각 페이지를 수동으로 수정할 필요 없이 템플릿이 적용된 모든 WEB 페이지를 수정할 수 있습니다. 예를 들어 저작권을 변경해야 할 때 페이지별로 저작권을 수정해야 하나요? 만약 수천 페이지가 있다면 어떨까요? 나는 당신이 처음에는 두세 개 정도 클 것이라고 믿습니다. 하지만 템플릿을 사용하면 문제가 되지 않습니다.
다음은 템플릿 사용을 빠르게 익히는 데 도움이 될 수 있는 보다 포괄적인 예입니다.
1. 페이지 편집
DW를 열고 "Spider Web"이라는 이름으로 새 사이트를 만듭니다.
새 빈 페이지를 내부 페이지로 만들고(일반적으로 웹 사이트에는 홈페이지가 하나만 있으므로 홈페이지 템플릿을 만들 필요가 없습니다) 이름을 body.htm으로 지정합니다.
이 페이지를 편집하고 그림 1과 같이 완료합니다.
그림 1, 편집이 완료된 후의 body.htm 페이지는 편집 가능한 영역으로 사용될 A 지점에 주목하세요. 아래에서 설명하겠습니다.
2. 템플릿 생성
편집이 완료된 후 이 페이지를 템플릿으로 저장합니다(일반 htm 웹페이지로 저장되지 않음). DW에서 파일→템플릿으로 저장을 통해 템플릿으로 저장할 수 있습니다. 이 명령을 실행하면 그림 2와 같이 템플릿으로 저장 창이 나타납니다.
그림 2, 템플릿으로 저장 창.
그림 2에서 B는 사이트 선택이고 "Spider Web"을 선택하고 C는 저장하려는 템플릿 파일 이름이며 본문을 채웁니다. 저장하려면 오른쪽 상단에 있는 저장을 누르세요.
이때 F8을 눌러 사이트(사이트 관리자)를 불러오면 Templates 폴더에 body.dwt가 있는 것을 볼 수 있습니다(템플릿 파일이 있을 경우 DW는 자동으로 Templates 폴더를 생성하는데 dwt는 템플릿 종류입니다) 파일)
3. 템플릿 편집
body.dwt 템플릿 파일을 사이트에서 열어보면 body.htm 페이지와 별반 차이가 없어 보이지만 실제로는 body.htm에 편집 가능한 영역을 추가할 수 없습니다. 편집 가능 영역은 템플릿 파일에만 추가할 수 있습니다.
모든 사람이 "편집 가능 영역"을 더 잘 이해할 수 있도록 먼저 이 템플릿을 사용하여 html 파일을 생성합니다. 파일→새 템플릿에서 새로 만들기를 클릭하면 템플릿 선택 창이 팝업되고 템플릿에서 본문을 선택한 다음 상단에서 선택을 클릭합니다. 오른쪽 모서리에서 새 htm 파일을 생성합니다. 이 새 페이지의 이름을 body2.htm으로 바꿉니다. 이제 DW를 사용하여 body.htm 및 body2.htm 파일을 모두 열고 차이점을 비교합니다. body2.htm 페이지의 오른쪽 상단에 "Template:body"라는 단어가 적혀 있습니다. (이 페이지는 body.dwt 템플릿 파일에서 생성됩니다.) 동시에 body2.htm 파일을 편집할 수 없다는 사실에 놀랄 것입니다(body.htm은 편집 가능). 그런데 이는 body.dwt 템플릿 파일에 "편집 가능 영역"이 정의되어 있지 않아 생성된 페이지를 편집할 수 없기 때문입니다. 따라서 템플릿 파일에 편집 가능한 영역을 추가해야 합니다. 편집 가능 영역을 추가하는 단계는 다음과 같습니다.
1) body.dwt 템플릿 파일을 엽니다. 중간 테이블(즉, 그림 1의 A)을 편집할 수 있기를 바랍니다. 하지만 body.htm이 아닌 body.dwt 파일에 있으므로 여기에 편집 가능한 영역을 추가하세요.
2) 테이블 A에 마우스 커서를 놓고 마우스 오른쪽 버튼을 클릭한 후 새 편집 가능 영역...을 선택합니다. 새 편집 가능 영역 창이 팝업되어 이 편집 가능 영역의 이름을 입력하라는 메시지가 표시됩니다(보통 우리는 이를 편집 가능 영역 표시라고 부릅니다). Region01을 채우고 확인을 클릭하여 이 창을 닫고 현재 편집 가능 영역 표시 편집을 완료합니다. 이때 그림 3과 같이 표로 표시되는 것을 볼 수 있습니다.
그림 3, 새 편집 가능 영역 창.
Region01이라고 표시된 편집 가능한 영역이 있습니다.
지금까지 편집 가능한 영역을 정의했습니다. 편집 영역이 여러 개인 경우에도 동일한 작업을 수행할 수 있습니다.
※수정à템플릿à새 편집 가능 영역…을 통해 새 편집 가능 영역을 생성할 수도 있습니다. 편집 가능 영역을 삭제하려면 수정à템플릿à편집 가능 영역 제거…를 사용한 후 지시에 따릅니다.
4. 템플릿을 사용하여 페이지 생성
실제로 템플릿을 사용하여 페이지를 생성하는 단계는 FileàNew From Template을 통해 수행된다고 이전에 언급했습니다. 3단계의 관련 단계를 참조하세요. 이제 템플릿을 사용하여 body3.htm이라는 페이지를 생성합니다. 이때 body3.htm 페이지에서 편집이 가능한 편집 가능한 영역인 Region01을 제외한 다른 곳에서는 마우스가 제한되어 있는 것을 확인할 수 있습니다. 이 편집 가능한 영역에 필요한 콘텐츠를 추가합니다. 예를 들어 마음대로 기사를 작성할 수 있습니다. 이러한 방식으로 템플릿을 사용하여 필요에 따라 페이지를 생성할 수 있습니다.
5. 템플릿 콘텐츠 수정 및 사이트 파일 업데이트
body.dwt 템플릿 파일을 열고 수정해야 할 영역을 수정합니다. 예를 들어 로고 이미지를 바꾸거나 편집할 수 없는 영역을 수정하거나 편집 가능한 영역을 추가하거나 삭제할 수도 있습니다.
다음에서는 로고 변경을 사용하여 템플릿이 파일을 업데이트하는 방법을 보여줍니다.
로고 이미지를 원하는 다른 이미지로 변경하고 완료 후 body.dwt 파일을 저장합니다. 이때 DW는 파일 업데이트가 필요한지 묻는 창을 띄우고 DW는 자동으로 모든 페이지를 업데이트합니다. 이 템플릿으로 생성되면 DW는 업데이트 중에 업데이트 페이지 창을 표시합니다. 완료되면 업데이트 페이지 창에 업데이트 로그가 제공됩니다.
※업데이트하지 않음을 선택하면 DW가 템플릿 파일을 직접 유지하고 페이지를 일시적으로 업데이트하지 않습니다. 그러나 수동으로 페이지를 업데이트할 수 있습니다. 수정à템플릿à페이지 업데이트...를 선택하면 됩니다.
이때 body3.htm과 같이 body.dwt로 생성된 페이지를 엽니다. 로고 이미지가 변경된 것을 확인할 수 있습니다.
이 기능을 사용하면 사이트 업데이트 문제를 쉽게 해결할 수 있습니다. 템플릿 기능은 매우 강력합니다. 이 기사는 공간 문제로 인해 많은 기능을 언급할 수 없습니다. DW의 템플릿 스타일을 마음껏 사용해 보세요.
DW에는 라이브러리라는 기능도 있는데, 템플릿과 유기적으로 결합할 수 있어 템플릿을 더욱 강력하게 만들어줄 것입니다. 관심이 있으신 독자님들께 이 선물을 드리고 싶습니다.
