Dreamweaver 디자인 뷰 및 코드 보기에서 템플릿 및 템플릿 기반 문서를 인식하는 방법을 살펴봅니다.
디자인 뷰에서 템플릿 인식
디자인 뷰에서 편집 가능 영역은 문서 창에서 사각형 외곽선으로 둘러싸여 나타납니다. 영역의 이름을 보려면 문서 창의 아래쪽 창을 확인하십시오.
문서 창의 제목 표시줄에서 템플릿 파일을 식별할 수 있습니다. 파일의 파일 확장명은. dwt 입니다.
코드 보기에서 템플릿 인식
코드 보기에서 편집 가능한 콘텐츠 지역은 HTML에서 다음 주석으로 표시됩니다:
<!-- TemplateBeginEditable> 및 <!-- TemplateEndEditable -->
코드 색상 환경설정을 사용하여 나만의 색상 구성표를 설정할 수 있으므로 코드 보기에서 문서를 볼 때 템플릿 지역을 쉽게 구별할 수 있습니다.
이 주석 사이의 모든 내용은 템플릿에 기반한 문서에서 편집할 수 있습니다.편집 가능한 지역의 HTML 소스 코드는 다음과 같을 수 있습니다:
<table width="75%" border="1" cellspacing="0" cellpadding="0">
<tr bgcolor="#333366">
<td>Name</td>
<td><font color="#FFFFFF">Address</font></td>
<td><font color="#FFFFFF">Telephone Number</font></td>
</tr>
<!-- TemplateBeginEditable name="LocationList" -->
<tr>
<td>Enter name</td>
<td>주소 입력</td>
<td>전화번호 입력</td>
</tr>
<!-- TemplateEndEditable -->
</table>
코드 보기에서 템플릿 코드를 편집할 때 Dreamweaver가 사용하는 템플릿 관련 주석 태그를 변경하지 않도록 주의하십시오.
디자인 뷰에서 템플릿 기반 문서 인식
템플릿 기반 문서의 편집 가능 영역은 문서 창의 디자인 뷰에서 점선의 사각형 외곽선으로 둘러싸여 나타납니다. 창의 아래쪽에 영역의 이름을 표시됩니다.
편집 가능 영역 외곽선뿐 아니라 전체 페이지에도 다른 색상의 외곽선이 표시되며, 오른쪽 위 모서리의 탭에는 문서의 기반이 되는 템플릿의 이름이 표시됩니다. 이 강조 표시된 사각형은 문서가 편집 가능 영역의 외부 내용을 변경할 수 없는 템플릿을 기반으로 하고 있음을 나타냅니다.
코드 보기에서 템플릿 기반 문서 인식
코드 보기에서 템플릿에서 파생된 문서의 편집 가능한 영역은 편집할 수 없는 영역의 코드와 다른 색상으로 나타납니다.편집 가능한영역 또는 편집 가능한 매개변수의 코드만 변경할 수 있으며 잠긴 영역에는 입력할 수 없습니다.
편집 가능 내용은 HTML에서 다음과 같은 Dreamweaver 주석으로 표시됩니다.
<!‑‑ InstanceBeginEditable> 및 <!‑‑ InstanceEndEditable ‑‑>
이러한 댓글 사이의 모든 내용은 템플릿 기반 문서에서 편집할 수 있습니다. 편집 가능한 지역의 HTML 소스 코드는 다음과 같습니다:
<body bgcolor="#FFFFFF" leftmargin="0">
<table width="75%" border="1" cellspacing="0" cellpadding="0">
<tr bgcolor="#333366">
<td>이름</td>
<td><font color="#FFFFFF">주소</font></td>
<td><font color="#FFFFFF">전화번호</font></td>
</tr>
<!-- InstanceBeginEditable name="LocationList" -->
<tr>
<td>이름 입력</td>
<td>주소 입력</td>
<td>전화번호 입력</td>
</tr>
<!-- InstanceEndEditable -->
</table>
</body>
편집할 수 없는 텍스트의 기본 색상은 회색입니다. 환경설정 대화 상자에서 편집 가능한 지역과 편집할 수 없는 지역에 대해 다른 색상을 선택할 수 있습니다.
