Dreamweaver에서 디자인 요소를 공유하는 페이지의 내용을 제어하기 위해 중첩 템플릿을 만드는 방법을 학습합니다.

중첩 템플릿은 다른 템플릿에 기반한 디자인 및 편집 가능 영역을 포함하는 템플릿입니다. 중첩 템플릿은 여러 가지 디자인 요소를 공유하며 페이지 간의 차이가 적은 사이트의 페이지 내용을 제어하는 데 유용합니다. 예를 들어 기본 템플릿에는 보다 넓은 디자인 영역이 포함될 수 있으며 사이트의 여러 내용 작성자가 사용할 수 있는 반면, 중첩 템플릿은 사이트에서 특정 섹션에 대한 페이지에 편집 가능 영역을 추가 정의할 수 있습니다.

기본 템플릿의 편집 가능 영역은 중첩 템플릿에 전달되며, 이 영역에 새 템플릿 영역을 삽입하지 않으면 중첩 템플릿에서 만든 페이지에서도 편집 가능한 상태를 유지합니다.

기본 템플릿을 변경하면 기본 템플릿에 기반한 템플릿과 기본 및 중첩 템플릿에 기반한 모든 템플릿 기반 문서에서 변경 사항이 자동으로 업데이트됩니다.

다음 예제의 trioHome 템플릿에는 Body, Nav BarFooter라는 이름의 세 개의 편집 가능 영역이 포함되어 있습니다.

세 개의 편집 가능 영역이 있는 템플릿
세 개의 편집 가능 영역이 있는 템플릿

중첩 템플릿을 만들기 위해 템플릿에 기반한 새 문서를 만든 다음, 문서를 TrioNested라는 이름의 템플릿으로 저장합니다. 중첩 템플릿에서 두 개의 편집 가능 영역이 Body라는 편집 가능 영역에 추가되었습니다.

중첩 템플릿
중첩 템플릿

사용자가 중첩 템플릿으로 전달된 편집 가능 영역에 새 편집 가능 영역을 추가하면 편집 가능 영역의 강조 색상이 주황색으로 바뀝니다. editableColumn의 그래픽과 같이 편집 가능 영역 밖에 추가하는 내용은 중첩 템플릿에 기반한 문서에서는 편집할 수 없게 됩니다. 파란색으로 강조 표시된 편집 가능 영역은 중첩 템플릿에 추가된 영역이든 기본 템플릿에서 전달된 영역이든 상관없이 중첩 템플릿에 기반한 문서에서는 편집 가능한 상태를 유지합니다. 편집 가능 영역이 포함되지 않은 템플릿 영역은 템플릿 기반 문서에 편집 가능 영역으로 전달됩니다.

중첩 템플릿 만들기

중첩 템플릿은 기본 템플릿을 다양하게 변형하여 사용할 수 있는 방법입니다. 템플릿을 여러 번 중첩하면 보다 구체적인 레이아웃을 정의할 수 있습니다.

기본적으로 기본 템플릿의 모든 편집 가능 템플릿 영역은 중첩 템플릿을 통해 중첩 템플릿에 기반한 문서로 전달됩니다. 즉, 기본 템플릿에 편집 가능 영역을 만든 다음 중첩 템플릿을 만드는 경우, 기본 템플릿의 편집 가능 영역이 중첩 템플릿 기반 문서에 나타납니다(중첩 템플릿의 해당 영역에 새 템플릿 영역을 삽입하지 않은 경우).

참고:

중첩 템플릿을 기반으로 하는 문서에서는 편집 가능 영역이 되지 않도록 편집 가능 영역에 템플릿 마크업을 삽입할 수 있습니다. 이러한 영역의 테두리는 파란색이 아니라 주황색으로 나타납니다.

  1. 중첩 템플릿의 기준으로 사용하려는 템플릿에서 문서를 제작할 수 있습니다. 이렇게 하려면 다음 중 하나를 수행하십시오.

    • 에셋 패널의 왼쪽 창에서 [템플릿]을 클릭합니다. 창 아래쪽에서 [새 템플릿]을 선택합니다.

    • [파일] > [새로 만들기]를 선택합니다. 새 문서 대화 상자의 템플릿 범주에서 [페이지]를 선택하고 사용하려는 템플릿이 포함된 사이트를 선택합니다. 템플릿 목록에서 새 문서를 제작할 템플릿을 더블 클릭합니다.

  2. [파일] > [다른 이름으로 저장]을 선택합니다. 다른 이름으로 저장 대화 상자에서 파일 형식 드롭다운 목록의 템플릿 파일을 선택합니다.

  3. 다른 이름으로 저장 대화 상자에 이름을 입력하고 [확인]을 클릭하여 새 문서를 중첩 템플릿으로 저장합니다.

편집 가능 영역이 중첩 템플릿으로 전달되지 않도록 하기

중첩 템플릿에서, 전달되는 편집 가능 영역의 테두리는 파란색입니다. 중첩 템플릿을 기반으로 하는 문서에서는 편집 가능 영역이 되지 않도록 편집 가능 영역에 템플릿 마크업을 삽입할 수 있습니다. 이러한 영역의 테두리는 파란색이 아니라 주황색으로 나타납니다.

  1. 코드 보기에서 전달하지 않을 편집 가능 영역을 찾습니다.

    편집 가능 영역은 템플릿 주석 태그로 정의됩니다.

  2. 다음 코드를 편집 가능 영역 코드에 추가합니다.
    @@(" ")@@

    이 템플릿 코드는 편집 가능 영역을 둘러싸는 <!-- InstanceBeginEditable --><!-- InstanceEndEditable --> 태그 내의 어디에든 배치할 수 있습니다. 예:

    <!-- InstanceBeginEditable name="EditRegion1" --> 
    <p>@@("")@@ Editable 1 </p> 
    <!-- InstanceEndEditable -->

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책