Dreamweaver如何制作网页模板？-网页设计-锦华智联科技

第一部分：准备工作与规划

在打开 Dreamweaver 之前，做好规划是成功的关键。

（图片来源网络，侵删）

确定网站结构：
- 画出网站的草图,明确首页、关于我们、产品列表、联系方式等主要页面。
- 思考哪些元素在所有页面（或大部分页面）上是固定不变的（Logo、主导航栏、页脚版权信息）。
- 思考哪些元素在各个页面上是需要独立修改的（页面标题、正文内容、图片）。
准备素材：
- Logo: 准备好网站的 Logo 图片（如 logo.png）。
- 导航菜单: 确定好导航栏的链接文字（如“首页”、“服务”、“博客”）。
- 图片: 准备好用于网站背景、内容区等的图片。
- 准备好各页面的文本内容。
创建本地站点：
- 在你的电脑上创建一个文件夹作为网站的根目录,D:\MyWebsite。
- 在这个根目录下,创建几个子文件夹来管理不同类型的文件，这是一个良好的习惯：
  - images: 存放所有图片。
  - css: 存放样式表文件。
  - templates: 存放模板文件（这是 Dreamweaver 的标准做法）。
- 在 Dreamweaver 中定义站点：
  - 打开 Dreamweaver，点击顶部菜单 站点 -> 新建站点。
  - 在弹出的窗口中,填写你的站点名称（如 MyWebsite）。
  - 在“站点”选项卡中，点击文件夹图标，选择你刚刚创建的本地根目录 D:\MyWebsite。
  - 确保“服务器”选项卡为空（因为我们现在只做本地开发）。
  - 点击“保存”，你的本地站点就设置好了。

第二部分：创建网页模板

我们开始动手制作模板。

（图片来源网络，侵删）

新建模板文件：
- 在 Dreamweaver 中，点击 文件 -> 新建。
- 在弹出的窗口中,选择 模板页 分类，然后选择 HTML 模板。
- 点击“创建”，Dreamweaver 会自动在 templates 文件夹下创建一个名为 untitled.dwt.html 的文件，请立即将其重命名，main_template.dwt.html。（.dwt 是 Dreamweaver 模板文件的扩展名）
构建页面布局（固定区域）： 现在的 main_template.dwt.html 就像一个“母版”，我们来构建它的骨架，这些区域将是所有子页面的共享部分。
- 插入 Logo 和主导航栏：
  - 在设计视图中,输入你的网站名称或插入 Logo 图片（插入 -> 图像 -> 选择 images/logo.png）。
  - 在 Logo 下方，创建主导航菜单，你可以使用“插入”面板中的“布局”类别下的“表格”或“Div 标签”来布局，对于现代网页，推荐使用 Div + CSS。
  - 输入导航链接文字,如“首页 | 关于我们 | 联系我们”，稍后我们再为它们添加链接。
- 占位符区域：
  （图片来源网络，侵删）
  - 这是最关键的一步,在页面的主体内容区域，点击鼠标，确定光标位置。
  - 点击顶部菜单 插入 -> 模板对象 -> 可编辑区域。
  - 在弹出的对话框中,给这个区域起一个有意义的名字，EditRegion_MainContent，然后点击“确定”。
  - Dreamweaver 会在该位置插入一个带有标签 <div EditRegion_MainContent> 的可编辑区域，你可以在这里写上一些提示文字，如“【此处替换为页面主要内容】”。
- 插入页脚：
  - 在页面底部,创建一个页脚区域。
  - 输入版权信息,如 © 2025 My Company. All rights reserved.。
  - 这个区域通常是固定的,所以不需要定义为可编辑区。
应用 CSS 样式：
- 一个美观的模板离不开 CSS。
- 创建 CSS 文件： 在 css 文件夹中新建一个 CSS 文件，style.css。
- 链接 CSS 文件： 在 main_template.dwt.html 的代码视图中，找到 <head> 标签内，添加以下代码来链接你的样式表：
```
<link href="css/style.css" rel="stylesheet" type="text/css">
```
- 编写样式： 在 style.css 文件中，为模板中的各个元素（如 #header, #nav, #mainContent, #footer）编写 CSS 样式，控制它们的颜色、字体、间距、布局等，你可以在 Dreamweaver 的“CSS 设计器”面板中可视化地编辑样式。
设置链接：
- 选中导航栏中的“首页”文字，在“属性”面板中，为其链接到 index.html（这是我们即将创建的首页）。
- 同样,为“关于我们”链接到 about.html，“联系我们”链接到 contact.html。

完成后的模板预览： 你的 main_template.dwt.html 文件现在看起来应该像这样：一个包含 Logo、导航栏、一个可编辑的内容区域和固定页脚的完整页面，但关键在于，只有 EditRegion_MainContent 这个区域是可以在子页面中修改的。

第三部分：基于模板创建新页面

模板创建好了,现在我们用它来生成实际的网页。

创建首页：
- 在 Dreamweaver 中，点击 文件 -> 新建。
- 选择 站点中的页 分类。
- 在“模板”列表中，你会看到刚刚创建的 main_template。
- 确保在“页面类型”中选择 HTML。
- 点击“创建”。
- Dreamweaver 会弹出一个警告，告诉你该文件基于模板，并且不能直接修改锁定区域，点击“确定”。
- 保存这个新文件,将其命名为 index.html 并放在网站根目录下。
编辑可编辑区域：
- 在 index.html 中，你会看到页面的布局和模板完全一样。
- 只有 EditRegion_MainContent 区域是可编辑的，点击这个区域，你就可以输入首页的欢迎文字、图片等内容了。
- 保存并预览（按 F12），你就能看到一个独立的首页。
创建其他页面：
- 重复上述步骤,创建 about.html 和 contact.html。
- 在 about.html 中，编辑“关于我们”的内容。
- 在 contact.html 中，编辑“联系方式”的内容。
- 重要提示： 如果你需要修改所有页面共有的部分（比如修改了 Logo 或导航栏的某个链接），你不需要手动修改每一个子页面，你只需要打开 main_template.dwt.html 进行修改，Dreamweaver 会提示你是否更新所有使用了该模板的页面。

第四部分：高级技巧与管理

模板的可选区域：
- 有时,你可能希望某个区域在某些页面显示，而在另一些页面隐藏，一个“返回首页”的按钮，可能只在子页面中出现，在首页不显示。
- 在 main_template.dwt.html 中，选中你想要设置为可选的区域（比如一个包含“返回首页”按钮的 <div>）。
- 点击 插入 -> 模板对象 -> 可选区域。
- 给这个区域命名,Show_Back_Home。
- 保存模板后,在基于模板创建的页面中，你可以通过 修改 -> 模板属性 来控制这个区域是否显示。
模板的重复区域：
- 当你需要创建可重复的元素时（如产品列表、新闻列表），这个功能非常有用。
- 在模板中,选中一个列表项（例如一个产品条目的 <div>）。
- 点击 插入 -> 模板对象 -> 重复区域。
- 保存模板后,在子页面中，你可以通过右键点击重复区域，选择“模板对象” -> 添加重复项 或 删除重复项 来动态增减列表项。
更新站点：
- 每当你修改了 main_template.dwt.html 并保存后，Dreamweaver 的“文件”面板中，所有基于该模板的页面旁边都会出现一个黄色的更新提示。
- 右键点击模板文件,选择 更新页面...，可以一次性更新整个站点。

第五部分：导出与发布

检查链接：
- 在发布前,务必检查所有链接（内部链接和外部链接）是否有效，使用 站点 -> 检查页面 -> 检查整个本地站点链接 功能。
上传到服务器：
- 在 Dreamweaver 中，切换到“文件”面板。
- 点击“管理站点”，选中你的站点，进入“服务器”选项卡。
- 点击号，添加你的远程服务器信息（FTP、SFTP 等）。
- 设置好后,在“文件”面板中，你可以直接将本地文件拖拽到远程服务器上进行上传。

总结与注意事项

模板的本质： Dreamweaver 模板通过锁定区域和可编辑区域，实现了“一次修改，全局更新”的效果，极大地提高了网站维护的效率。
工作流： 先创建模板 -> 再基于模板生成子页面 -> 最后修改模板并更新。
现代替代方案： 虽然 Dreamweaver 仍然是强大的工具，但现代前端开发更多会使用 Vue.js, React, Angular 等框架，或者像 WordPress 这样的 CMS 系统，它们通过组件化或主题系统实现了更灵活和强大的模板功能，但对于学习静态网页制作和快速搭建小型展示网站，Dreamweaver 模板功能依然非常实用。

希望这份详细的指南能帮助你成功使用 Dreamweaver 制作出自己的第一个网页模板！