Dreamweaver中如何使用模板（附代码）
本篇文章给大家带来的内容是关于Dreamweaver中如何使用模板（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
模板的作用：
一、有助于保持整个网站外观和风格的一致；
二、在模板中进行修改后，所有应用模板的页面都将自动更新。
简单示例：
// 在其.dwt 模板中
<!-- TemplateBeginEditable name="myName" -->
设置可编辑区域
<!-- TemplateEndEditable -->// 在页面中，声明应用模板的地址，以及区域等
<HTML> <!-- InstanceBegin template="/Templates/myTemplates.dwt" codeOutsideHTMLIsLocked="false" --> <HEAD> </BODY> <!-- InstanceEnd --> </HTML>
// 在模板区域内，设置可编辑区域
<!-- InstanceBeginEditable name="myName" -->
放入可编辑区域的内容
<!-- InstanceEndEditable -->简单示例：
<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将会删除这些内容！
以上是Dreamweaver中如何使用模板（附代码）的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
dreamweaver怎么调整文字位置
Apr 09, 2024 am 02:24 AM
Dreamweaver 中调整文本位置可以通过以下步骤完成：选择文本，使用文本位置调整器进行水平调整：左对齐、右对齐、居中对齐；2. 进行垂直调整：上对齐、下对齐、垂直居中；3. 按 Shift 键并使用方向键微调位置；4. 使用快捷键快速对齐：左对齐（Ctrl/Cmd + L）、右对齐（Ctrl/Cmd + R）、居中对齐（Ctrl/Cmd + C）。
dreamweaver网页制作怎么加入视频
Apr 09, 2024 am 01:42 AM
使用 Dreamweaver 嵌入视频：插入视频元素。选择并上传视频文件。设置视频类型、URL、尺寸、自动播放和控件。插入视频。可选：自定义视频外观。
dreamweaver怎么调整行间距
Apr 09, 2024 am 03:00 AM
在 Dreamweaver 中调整行间距分四步进行：选择文本、打开“段落”面板、调整“行距”选项，最后单击“确定”应用更改。
dreamweaver怎么添加图片
Apr 09, 2024 am 03:30 AM
要在 Dreamweaver 中插入图片，请单击“插入”菜单并选择“图像”，然后导航到图片文件并选择它。其他方法包括：拖放文件或直接插入 HTML 代码。调整属性包括更改大小、对齐、添加边框和输入替代文本。
网页设计软件dreamweaver怎么设置为中文
Apr 09, 2024 am 12:39 AM
要将 Dreamweaver 设置为中文，请按以下步骤操作：打开 Dreamweaver；在首选项中将“用户界面语言”更改为“简体中文”或“繁体中文”；重新启动 Dreamweaver；检查“帮助”菜单中的“关于 Dreamweaver”项以验证语言设置。
dreamweaver字体怎么设置
Apr 09, 2024 am 02:54 AM
可以在 Dreamweaver 中通过以下方式设置字体：使用“属性”面板选择字体、字号、颜色。使用 CSS 设置整个网站或特定元素的字体。在 HTML 代码中直接使用“font”标签设置字体。
dreamweaver怎么设置文字大小
Apr 09, 2024 am 02:18 AM
在 Dreamweaver 中设置文字大小，只需：选择文本进入“文本”菜单选择“字体大小”选择所需大小按 Enter 保存
dreamweaver网页制作后怎么导出
Apr 09, 2024 am 01:27 AM
在 Dreamweaver 中导出网页包括以下步骤：导出 HTML 文件：在“文件”菜单中选择“导出”，选择“HTML”，选择文件名和位置，点击“保存”。导出 CSS 和 JavaScript 文件：在“文件”菜单中选择“导出”，选择“CSS”或“JavaScript”，选择文件名和位置，点击“保存”。导出图像：右键单击图像，选择“导出”，选择图像格式和文件名，点击“保存”。
