Dreamweaver中如何使用模板（附代码）

互联网 18-9-29

本篇文章给大家带来的内容是关于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>Templates</TITLE></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><img src="Temp_images/head_3.gif"></TD></TR></TABLE></TD></TR><TR><TD><TABLE border="0" cellspacing="0" cellpadding="0"><TR><TD valign="top"><TABLE border="0" cellspacing="0" cellpadding="0"><TR><TD><a href="tempTest_00.html"><img src="Temp_images/left_1.gif" border="0"></a></TD></TR><TR><TD><a href="tempTest_01.html"><img src="Temp_images/left_2.gif" border="0"></a></TD></TR><TR><TD><a href="tempTest_02.html"><img src="Temp_images/left_3.gif" border="0"></a></TD></TR><TR><TD><a href="tempTest_03.html"><img src="Temp_images/left_4.gif" border="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><img src="Temp_images/left_7.gif"></TD></TR><TR><TD><img src="Temp_images/left_8.gif"></TD></TR><TR><TD><img src="Temp_images/left_9.gif"></TD></TR><TR><TD><img src="Temp_images/left_10.gif"></TD></TR></TABLE></TD><TD valign="top">  <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>    <br><br><br></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="Temp_images/head_1.gif"></TD>             <TD><img src="Temp_images/head_2.gif"></TD>             <TD><img src="Temp_images/head_3.gif"></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="Temp_images/left_1.gif" border="0"></a></TD>         </TR>         <TR>             <TD><a href="tempTest_01.html"><img src="Temp_images/left_2.gif" border="0"></a></TD>         </TR>         <TR>             <TD><a href="tempTest_02.html"><img src="Temp_images/left_3.gif" border="0"></a></TD>         </TR>         <TR>             <TD><a href="tempTest_03.html"><img src="Temp_images/left_4.gif" border="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><img src="Temp_images/left_7.gif"></TD>         </TR>         <TR>             <TD><img src="Temp_images/left_8.gif"></TD>         </TR>         <TR>             <TD><img src="Temp_images/left_9.gif"></TD>         </TR>         <TR>             <TD><img src="Temp_images/left_10.gif"></TD>         </TR>         </TABLE>         </TD>         <TD valign="top"> <!-- 右边内容向上对齐 -->          <!-- 第三层表格：右边内容  布局：2行1列-->         <!-- InstanceBeginEditable name="right" -->                <table width="450" border="0">   <tr>     <td  height="50">&nbsp;</td>     <td width="450">&nbsp;</td>     <td >&nbsp;</td>   </tr>   <tr>     <td>&nbsp;</td>     <td align="right"><br><br>       <h1>欢迎来到我的站点！</h1>       <br><br><br><br><br><br><br><br>           xugang&nbsp;&nbsp;&nbsp;&nbsp;<br><br>           2008.10.26<br>     </td>     <td>&nbsp;</td>   </tr>   <tr>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>   </tr> </table>          <!-- InstanceEndEditable --></TD>     </TR>     </TABLE>     </TD> </TR> </TABLE> </BODY> <!-- InstanceEnd --> </HTML>

注意要点：

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

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

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

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

将现有文件保存为模板：

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

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

新建空白模板：

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

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

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