模板的作用:
一、有助于保持整个网站外观和风格的一致;
二、在模板中进行修改后,所有应用模板的页面都将自动更新。
// 在其.dwt 模板中
<!-- TemplateBeginEditable name="myName" -->
设置可编辑区域
<!-- TemplateEndEditable -->
// 在页面中,声明应用模板的地址,以及区域等
<HTML>
<!-- InstanceBegin template="/Templates/myTemplates.dwt" codeOutsideHTMLIsLocked="false" -->
<HEAD>
</BODY>
<!-- InstanceEnd -->
</HTML>
// 在模板区域内,设置可编辑区域
<!-- InstanceBeginEditable name="myName" -->
放入可编辑区域的内容
<!-- InstanceEndEditable -->
简单示例:
Demo
<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"> </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将会删除这些内容!