dw网页制作模板教程（如何用dw制作模板）
本文目录
如何用dw制作模板
用dw制作模板的方法：
品牌型号：华硕。
系统版本：UX30K723A。
软件版本：win7，Dreamweaver 8，百度浏览器1.22.1.1。
1、以百度经验首页头部举例，将页面分为两大块。
2、第一大块内容又可以分为两小块，左边为一块，右边为一块。
3、第一大块内容所有样式，如下图。
4、第一大块样式预览，如下图。
5、第二大块中分为两个小块，左边为百度经验图片，右边为input框和按钮。
6、第二块元素的样式如下图。
7、最终代码和效果图如下。
Dreamweaver中创建模板的两种方法
模板的创建有三种方式。
1、直接创建模板
选择“窗口/资源”命令，打开“资源”面板，切换到模板子面板，
单击模板面板上的“扩展”按钮，在弹出菜单中选择“新建模板”这是在浏览窗口出现一个未命名的模板文件，给模板命名。然后单击“”按钮，打开模板进行。
完成后，保存模板，完成模板建立。
2、将普通网页另存为模板
打开一个已经制作完成的网页，删除网页中不需要的部分，保留几个网页共同需要的区域。
选择“文件/另存为模板”命令将网页另存为模板。
在弹出的“另存模板”对话框中，“站点”下拉列表框用来设置模板保存的站点，课选择一个选项。“现存的模板”选框显示了当前站点的所有模板。“另存为”文本框用来设置模板的命名。单击“另存模板”对话框中的“保存”按钮，就把当前网页转换为了模板，同时将模板另存到选择的站点。
单击“保存”按钮，保存模板。系统将自动在根目录下创建Template文件夹，并将创建的模板文件保存在该文件夹中。
在保存模板时，如果模板中没有定义任何可区域，系统将显示警告信息。我们可以先单击“确定”，以后再定义可区域。
3、从文件菜单新建模板
选择“文件/新建”命令，打开“新建文档”对话框，然后再类别中选择“模板页”，并选取相关的模板类型，直接单击“创建”按钮即可。”
怎样在dreamweaver中添加模板
1. 页面
打开DW，新建一个站点，我们就取名为“蜘蛛网”。
新建一个空白页面作为内页（通常一个网站只有一个首页，所以对首页我们可以不做成模板），取名为body.htm。
这个页面，完成如图1。
图1，完成后的body.htm页面，注意A处，此处将作为可区域，下文会针对提及。
2. 生成模板
完成后，我们将此页保存为模板（注意不是保存为普通的htm网页）。通过DW中的FileàSave As Template可以存为模板，执行此命令后会弹出Save As Template窗口，如图2。
图2，Save As Template窗口。
图2中的B处为选择站点，我们选择“ 蜘蛛网”，C处为我们要存为的模板文件名，我们填入body。按右上角的Save保存。
这时我们按F8调出site（站点管理器），在Templates文件夹中可以看到body.dwt（当有模板文件时，DW会自动生成Templates文件夹，dwt为模板类型文件）
3. 模板
在Site中打开body.dwt模板文件，将会发现跟body.htm页面好像没什么分别，但其实是不一样的，在body.htm中是无法添加可区域的。可区域只能在模板文件中添加。
为了让大家更好的理解“可区域”，我们先用此模板生成一个htm文件：点FileàNew From Template，弹出Select Template窗口，在emplates中选择body，再点击右上角的Select即可生成一个新的htm文件。我们将此新建页面改名为body2.htm。现在我们用DW将body.htm与body2.htm两文件都打开，比较一下有什么不同。你会发现在body2.htm页面的右上角写着“Template:body”几个字。（说明此页是由body.dwt模板文件生成）同时你会惊讶的发现body2.htm文件竟然不可以（body.htm可以）。对了，这就是由于在body.dwt模板文件中没有定义“可区域”的结果，使得生成的页面都不可了。所以我们必须在模板文件中添加可区域。下面是添加可区域的步骤：
1） 打开body.dwt模板文件，我们希望中间的表格可以（也就是图1中的A处）。但是要在body.dwt文件中，而不是body.htm），所以要在此处添加可区域。
2） 将鼠标光标放入A处表格里，点击鼠标右键，选择New Editable Region…， 弹出New Editable Region窗口，要求填入此可区域的名称（我们通常称为可区域标记）。我们填入Region01，点击ok关闭此窗口完成当前可区域标记的。此时可以看到在表格中有如图3的显示。
图3，New Editable Region窗口。
说明此处有一个标记为Region01的可区域。
到此为止我们定义了一个可区域，如果有多个区域，同样可以如法炮制。
※还可以通过ModifyàTemplatesàNew Editable Region…生成新的可区域，如果想删除可区域，可通过ModifyàTemplatesàRemove Editable Region…，然后按提示操作即可。
4. 用模板生成页面
其实我们前面也提及过用模板生成页面的步骤，就是通过FileàNew From Template。请参考第三步的有关步骤。现在我们用模板生成一个名为body3.htm的页面。这时你会发现，在body3.htm页面中除了可区域Region01可以外，别的地方鼠标都成了限制状态。我们在此可区域中添加我们需要的内容，比如我们随便写入一篇文章。这样就可以根据我们的需要，利用模板生成页面。
5. 修改模板内容与更新站点文件
打开body.dwt模板文件，将我们需要修改的地方进行修改，比如我们把logo图片换掉或修改任何非可区域，甚至添加或删除可区域等。
下面就用换logo来说明模板是如何更新文件的。
我们把logo图片换成另外我们喜欢的图片，完成后保存body.dwt文件，这时DW会弹出窗口询问是否需要更新文件，选择Update，DW就会自动的将所有用此模板生成的页面都更新，更新时DW会弹出Update Pages窗口，完成后，在Update Pages窗口中会给出更新日志。
※如果选择了don’t Update，DW直接保持模板文件，暂时不更新页面，但我们可以手动更新页面，只要选择ModifyàTemplatesàUpdate Pages…即可。
这时我们打开任意一个用body.dwt生成的页面，如body3.htm。会发现logo图片已经改变。
不难发现，利用这个功能，我们可以轻松的解决站点更新问题，模板的功能十分强大，此文只起到抛砖引玉的作用，很多功能由于篇幅问题未能提及，自己要多尝试，这样才能充分领略DW的模板风采。
在DW中，还有一项称为库的功能，跟模板可以有机的配合，这样会使模板的功能更加强大，如果读者反应有兴趣的话，我愿意为大家献上这一份礼物。
更多文章：
读取assets文件（如何打开assets文件夹中的apk）
2026年9月9日 18:30
2026年9月9日 18:10
cmd异步执行（ADO两个线程中的查询使用同一个数据连接为什么能够异步执行）
2026年9月9日 16:30
2026年9月9日 16:00
最适合上下班代步的车（动力升级！售8880元，体验NB-X125：适合日常通勤）
2026年9月9日 15:10
elementui单选框radio选中（两个单选框,单点击第二个,用js如何实现第二个被选中）
2026年9月9日 15:00
linux清楚历史指令（linux命令历史记录linux命令历史）
2026年9月9日 14:30
2026年9月9日 13:30
passport软件下载（哪里可以下载免费的金山词霸2006版）
2026年9月9日 13:10
耳机小尾巴前端的插头插入手机松动，能换吗？耳机前端是什么耳机音源是什么
2026年9月9日 09:50
