찾다

집 >개발 도구 >dreamweaver >Dreamweaver에서 템플릿을 사용하는 방법(코드 포함)

Dreamweaver에서 템플릿을 사용하는 방법(코드 포함)

不言
不言앞으로
2018-09-29 14:56:468689검색

이 문서의 내용은 Dreamweaver에서 템플릿을 사용하는 방법(코드 포함)에 대한 것입니다. 특정 참조 가치가 있으므로 도움이 필요한 친구에게 도움이 되길 바랍니다.

템플릿의 기능:

첫째, 전체 웹사이트의 일관된 모양과 스타일을 유지하는 데 도움이 됩니다.

둘째, 템플릿을 수정한 후 템플릿이 적용된 모든 페이지가 자동으로 업데이트됩니다. .

간단한 예:

// .dwt 템플릿에서 

<!-- TemplateBeginEditable name="myName" -->
    设置可编辑区域
<!-- TemplateEndEditable -->

// 페이지에서 애플리케이션 템플릿의 주소와 지역 등을 선언합니다. 

<HTML>
<!-- InstanceBegin template="/Templates/myTemplates.dwt" codeOutsideHTMLIsLocked="false" -->
  <HEAD>
  </BODY>
<!-- InstanceEnd -->
</HTML>

/ / 템플릿 영역 내 편집 가능 영역 설정

<!-- InstanceBeginEditable name="myName" -->
    放入可编辑区域的内容
<!-- InstanceEndEditable -->


HTML>
HEAD>

TITLE>TemplatesTITLE>


HEAD>
BODY>

TABLE border="0" align="center" cellspacing="0" cellpadding="0">
TR>
    TD>
        
        TABLE border="0" cellspacing="0" cellpadding="0">
        TR>
            TD>img src# 🎜🎜#="Temp_images/head_1.gif">TD>#🎜🎜 #            
TD> img # 🎜🎜#src="Temp_images/head_2.gif">TD >           TD>>& lt;# 🎜🎜#img src="Temp_images/head_3.gif"> TD>        
TR#🎜 🎜 #>        TABLE
># 🎜🎜#    TD
># 🎜🎜#TR>
# 🎜🎜#TR>
    #🎜🎜 🎜# TD>
    
    border="0" cellspacing
="0"# 🎜🎜# cellpadding="0">    TR>       
TD #🎜 🎜#valign="top">        
& lt ;!-- 第三层表格：左边列表  布局：10行1列-->#🎜🎜 #        # 🎜🎜#TABLE border
="0" 셀 간격#🎜 🎜#="0" cellpadding="0"
># 🎜🎜#        TR>
            # 🎜🎜#< ;TD>a href=" tempTest_00.html">img src="Temp_images/left_1.gif"  테두리="0">a >TD>        
#🎜🎜 #TR>        
TR#🎜 🎜 #>           TD> ;a href="tempTest_01.html">#🎜 🎜#img src="Temp_images/left_2.gif" 테두리="0"# 🎜🎜#>a>TD >        TR
># 🎜 🎜#        TR
>            #🎜🎜 #TD>a href ="tempTest_02.html">img src=" Temp_images/left_3.gif" 테두리="0">a#🎜 🎜#>TD>        #🎜 🎜# TR>
        # 🎜 🎜#TR>            TD>a href# 🎜🎜#="tempTest_03.html">img src#🎜🎜 #="Temp_images/left_4.gif" 테두리="0">#🎜🎜 #a>TD>        # 🎜🎜#
TR>       TR
>           TD# 🎜🎜 #
>img src="Temp_images/left_5.gif"#🎜🎜 #>TD>       #🎜 🎜#TR>
       TR #🎜 🎜#>
           TD#🎜 🎜#>< ;img 
src="Temp_images/left_6.gif">#🎜 🎜#TD>        TR# 🎜🎜#>       TR#🎜 🎜#>             
TD>src="Temp_images/left_7.gif">
TD# 🎜🎜#>       TR#🎜 🎜#> ;        TR># 🎜🎜#
           TD>img #🎜 🎜##🎜 🎜#src
="Temp_images/left_8.gif">TD> ;
TR>
TD>img src
 ="Temp_images/left_9.gif"> TD >                                  ​TR> ;             >
TD>​​​​​​
TD valign="top">
콘텐츠를 오른쪽에 정렬 위쪽 -->                                        ​ < ;
테이블 width="450" border="0"
> tr
>​ td
height="50"> td>    td width="450"> td>
     td >  td>
  tr>
   tr>
     td> td>
    td align ="맞습니다">br>br>
      h1>欢迎来到我的站点！h1> ;
      br>br>br>br>br> ;br>br>br>
         xugang   &nb sp;br >br>
          2008.10.26br>
     td>
    < ;td> td>
  tr>
  tr >
    td> td>
    td> td>
    td> td>
  tr>
table>

        TD>
    TR>
    TABLE>
    TD>
TR>
TABLE>
BODY>

HTM

简单示例：

<HTML><!-- InstanceBegin template="/Templates/myTemplates.dwt" codeOutsideHTMLIsLocked="false" -->
<HEAD>
<!-- InstanceBeginEditable name="doctitle" -->
<TITLE>Templates</TITLE>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
</HEAD>
<BODY>
<!-- 第一层表格  布局：2行1列-->
<TABLE border="0" align="center" cellspacing="0" cellpadding="0">
<TR>
    <TD>
        <!-- 第二层表格：页眉  布局：1行3列-->
        <TABLE border="0" cellspacing="0" cellpadding="0">
        <TR>
            <TD><img  src="/static/imghwm/default1.png"  data-src="Temp_images/head_1.gif"  class="lazy"   alt="Dreamweaver에서 템플릿을 사용하는 방법(코드 포함)" ></TD>
            <TD><img  src="/static/imghwm/default1.png"  data-src="Temp_images/head_2.gif"  class="lazy"   alt="Dreamweaver에서 템플릿을 사용하는 방법(코드 포함)" ></TD>
            <TD><img  src="/static/imghwm/default1.png"  data-src="Temp_images/head_3.gif"  class="lazy"   alt="Dreamweaver에서 템플릿을 사용하는 방법(코드 포함)" ></TD>
        </TR>
        </TABLE>
    </TD>
</TR>
<TR>
    <TD>
    <!-- 第二层表格：内容  布局：1行2列-->
    <TABLE border="0" cellspacing="0" cellpadding="0">
    <TR>
        <TD valign="top">
        <!-- 第三层表格：左边列表  布局：10行1列-->
        <TABLE border="0" cellspacing="0" cellpadding="0">
        <TR>
            <TD><a href="tempTest_00.html"><img  src="/static/imghwm/default1.png"  data-src="Temp_images/left_1.gif"  class="lazy"   border="0" alt="Dreamweaver에서 템플릿을 사용하는 방법(코드 포함)" ></a></TD>
        </TR>
        <TR>
            <TD><a href="tempTest_01.html"><img  src="/static/imghwm/default1.png"  data-src="Temp_images/left_2.gif"  class="lazy"   border="0" alt="Dreamweaver에서 템플릿을 사용하는 방법(코드 포함)" ></a></TD>
        </TR>
        <TR>
            <TD><a href="tempTest_02.html"><img  src="/static/imghwm/default1.png"  data-src="Temp_images/left_3.gif"  class="lazy"   border="0" alt="Dreamweaver에서 템플릿을 사용하는 방법(코드 포함)" ></a></TD>
        </TR>
        <TR>
            <TD><a href="tempTest_03.html"><img  src="/static/imghwm/default1.png"  data-src="Temp_images/left_4.gif"  class="lazy"   border="0" alt="Dreamweaver에서 템플릿을 사용하는 방법(코드 포함)" ></a></TD>
        </TR>
        <TR>
            <TD><img  src="/static/imghwm/default1.png"  data-src="Temp_images/left_5.gif"  class="lazy"   alt="Dreamweaver에서 템플릿을 사용하는 방법(코드 포함)" ></TD>
        </TR>
        <TR>
            <TD><img  src="/static/imghwm/default1.png"  data-src="Temp_images/left_6.gif"  class="lazy"   alt="Dreamweaver에서 템플릿을 사용하는 방법(코드 포함)" ></TD>
        </TR>
        <TR>
            <TD><img  src="/static/imghwm/default1.png"  data-src="Temp_images/left_7.gif"  class="lazy"   alt="Dreamweaver에서 템플릿을 사용하는 방법(코드 포함)" ></TD>
        </TR>
        <TR>
            <TD><img  src="/static/imghwm/default1.png"  data-src="Temp_images/left_8.gif"  class="lazy"   alt="Dreamweaver에서 템플릿을 사용하는 방법(코드 포함)" ></TD>
        </TR>
        <TR>
            <TD><img  src="/static/imghwm/default1.png"  data-src="Temp_images/left_9.gif"  class="lazy"   alt="Dreamweaver에서 템플릿을 사용하는 방법(코드 포함)" ></TD>
        </TR>
        <TR>
            <TD><img  src="/static/imghwm/default1.png"  data-src="Temp_images/left_10.gif"  class="lazy"   alt="Dreamweaver에서 템플릿을 사용하는 방법(코드 포함)" ></TD>
        </TR>
        </TABLE>
        </TD>
        <TD valign="top"> <!-- 右边内容向上对齐 -->

        <!-- 第三层表格：右边内容  布局：2行1列-->
        <!-- InstanceBeginEditable name="right" -->
               <table width="450" border="0">
  <tr>
    <td  height="50"> </td>
    <td width="450"> </td>
    <td > </td>
  </tr>
  <tr>
    <td> </td>
    <td align="right"><br><br>
      <h1>欢迎来到我的站点！</h1>
      <br><br><br><br><br><br><br><br>
          xugang    <br><br>
          2008.10.26<br>
    </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>

        <!-- InstanceEndEditable --></TD>
    </TR>
    </TABLE>
    </TD>
</TR>
</TABLE>
</BODY>
<!-- InstanceEnd -->
</HTML>

注意要点：

A  在创建模板时，必须慎重定义可编辑区域和不可编辑区域。

B  模板将自动保存在“Templates”文件夹中，该文件夹在站点的本地根文件夹下。

1. 不能模板从“Templates”文件夹中移出；

2. 不能将非模板文件放在“Templates”文件夹中；

3. 不能将“Templates”文件夹从站点的本地根文件夹中移出。

将现有文件保存为模板：

1.打开要转变成模板的页面；

2.选择“文件”->“另存为模板”，保存模板；

新建空白模板：

1.选择“窗口”->“资源”命令（或按 F11键）。

2.单击“资源”面板上的“模板”图标，显示“模板”面板。

3.单击“模板”面板右下角的“新建模板”图标。

默认情况下，整个模板都处于锁定状态。

添加可编辑区域：

方法一：

在“插入”栏->“常用”选项卡->“模板”图标->“可编辑区域”；

方法二：

在“插入”->“模板对象”->“可编辑区域”；

方法三：

按Ctrl+Alt+V 组合键；

方法四：

右键选中区域->“模板”->“新建可编辑区域”

删除可编辑区域：

选中编辑区域，“修改”->“模板”->“删除模板标记”，该区域将被锁定，不可编辑。

修改编辑模板：

"창"->"리소스"->"템플릿" 아이콘->편집하려는 템플릿을 선택한 다음 두 번 클릭하면 해당 템플릿이 "문서" 창에 나타납니다. 지금 템플릿을 편집하세요.

웹 페이지에 템플릿 적용:

1. 템플릿을 적용할 문서(예: 페이지)를 엽니다.

2. "창"->"리소스"->"템플릿"을 선택합니다. 아이콘->템플릿을 적용하려면 선택하세요.

3. 패널에서 페이지 창으로 템플릿을 드래그하세요(또는 "적용" 버튼을 클릭하세요).

4. 편집 가능한 영역에 데이터를 추가하거나 쓰세요. :

문서 콘텐츠에 이미 콘텐츠가 있는 경우 기존 콘텐츠를 템플릿의 편집 가능 영역으로 이동해야 하며, 그렇지 않으면 Dreamweaver에서 해당 콘텐츠를 삭제합니다!

위 내용은 Dreamweaver에서 템플릿을 사용하는 방법(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
이 기사는 cnblogs.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
이전 기사：win8 시스템에서 dreamweaver cs6 색상 코드의 색상 일치 방법다음 기사：win8 시스템에서 dreamweaver cs6 색상 코드의 색상 일치 방법

관련 기사

더보기