사용 안내서 취소

템플릿 및 템플릿 기반 문서 인식

 

 

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>Enter Address</td>
<td>Enter Telephone</td>
</tr>
<!-- TemplateEndEditable -->
</table>
<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>Enter Address</td> <td>Enter Telephone</td> </tr> <!-- TemplateEndEditable --> </table>
<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>Enter Address</td> 
    <td>Enter Telephone</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>Name</td>
<td><font color="#FFFFFF">Address</font></td>
<td><font color="#FFFFFF">Telephone Number</font></td>
</tr>
<!-- InstanceBeginEditable name="LocationList" -->
<tr>
<td>Enter name</td>
<td>Enter Address</td>
<td>Enter Telephone</td>
</tr>
<!-- InstanceEndEditable -->
</table>
</body>
<body bgcolor="#FFFFFF" leftmargin="0"> <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> <!-- InstanceBeginEditable name="LocationList" --> <tr> <td>Enter name</td> <td>Enter Address</td> <td>Enter Telephone</td> </tr> <!-- InstanceEndEditable --> </table> </body>
<body bgcolor="#FFFFFF" leftmargin="0"> 
<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> 
  <!-- InstanceBeginEditable name="LocationList" --> 
  <tr> 
    <td>Enter name</td> 
    <td>Enter Address</td> 
    <td>Enter Telephone</td> 
  </tr> 
  <!-- InstanceEndEditable --> 
</table> 
</body>

편집 불가능한 텍스트의 기본 색상은 회색이며 [환경 설정] 대화 상자에서 편집 가능 영역과 편집 불가능 영역의 색상을 다른 색상으로 선택할 수 있습니다.

쉽고 빠르게 지원 받기

신규 사용자이신가요?