第一步：准备工作与规划
在打开 Dreamweaver 之前，先做好规划,这会让后续工作事半功倍。
（图片来源网络，侵删）
- 确定模板类型：你要制作什么类型的网站模板？（企业官网、个人博客、作品集、电商等）
- 规划页面结构：一个典型的网页模板通常包含哪些部分？
- Header (页眉)：通常包含 Logo、主导航菜单。
- Hero Section (主视觉区)：网站最上方的醒目区域,常用于展示标语或大图。
- Main Content (主要内容区)：页面的核心信息，比如文章列表、产品展示等。
- Sidebar (侧边栏)：次要信息，如分类、标签、广告位等。
- Footer (页脚)：版权信息、联系方式、友情链接等。
- 创建项目文件夹：在你的电脑上创建一个主文件夹，
my-website-template，在这个文件夹里，再创建几个子文件夹：images/：存放所有图片素材。css/：存放样式表文件。js/：存放 JavaScript 文件。
第二步：创建新站点
在 Dreamweaver 中，使用“站点”功能可以管理你的所有文件，实现本地文件与服务器文件的同步,并让路径管理变得简单。
- 打开 Dreamweaver，点击顶部菜单栏的 站点 > 新建站点。
- 在弹出的窗口中，切换到 “站点” 选项卡。
- 站点名称：给你的项目起个名字，"My Website Template"。
- 站点根文件夹：点击文件夹图标，选择你刚才创建的那个主文件夹
my-website-template。
- 点击 “保存”，Dreamweaver 会自动在根文件夹下创建一个
_notes文件夹,用于存放站点信息。
第三步：设置默认新文档
为了确保每次新建的 HTML 文件都包含我们需要的结构（比如引入 CSS 和 JS 的链接）,我们可以设置一个默认模板。
- 点击顶部菜单栏的 编辑 > 首选参数 (Windows) 或 Dreamweaver > 首选参数 (Mac)。
- 在左侧选择 “新建文档”。
- 在右侧的 “默认新文档类型” 中，选择 “HTML5”。
- 勾选 “默认CSS样式表”，然后点击 “创建”。
- 在弹出的窗口中：
- 文件名：输入
style.css，它会自动保存在你之前创建的css文件夹中。 - 放置于：选择 “站点根目录下”。
- 添加到：选择 “ 标签中”。
- 文件名：输入
- 点击 “创建”，你每次新建 HTML 文件时，都会自动链接到这个
style.css。
第四步：使用 Dreamweaver 视图模式创建布局
Dreamweaver 提供了三种视图模式,你可以结合使用。
-
实时视图：
（图片来源网络，侵删）- 这是最直观的视图，所见即所得,类似在浏览器中查看。
- 点击左上角的 “实时视图” 按钮。
- 使用 “插入” 面板（如果没看到，菜单栏选择 窗口 > 插入），可以拖拽各种元素到页面上，如
<div>、段落、图片等。 - 我们可以先用
<div>元素搭出我们规划好的页面结构（Header, Hero, Main, Sidebar, Footer），并为每个div设置一个易于理解的id或class名称，<div id="header">,<div class="hero-section">。
-
代码视图：
- 这是直接编写和查看 HTML/CSS/JS 代码的地方。
- 在实时视图中插入的元素,会实时反映在代码视图中。
- 你也可以直接在这里编写代码，代码提示功能会非常强大,提高效率。
-
实时代码视图：
这是实时视图和代码视图的结合，在实时视图中，你将鼠标悬停在某个元素上，下方会高亮显示对应的代码，点击即可跳转到代码视图进行编辑，这对于初学者理解 HTML 结构非常有帮助。
第五步：使用 CSS 设计器进行样式设计
这是 Dreamweaver 的核心功能之一，可以让你在不写一行代码的情况下，通过可视化面板来设计 CSS 样式。
（图片来源网络，侵删）
- 确保 CSS 文件（
style.css）已链接到你的 HTML 文件中。 - 在右侧面板组中，找到并打开 “CSS 设计器” 面板。
- 创建媒体查询（响应式设计的关键）：
- 在 CSS 设计器面板的顶部，你会看到一个 “媒体查询” 图标（像一个小电视）。
- 点击 号，选择 “横向断点” (Landscape) 或 “纵向断点” (Portrait)，通常我们会选择
min-width（最小宽度）来为不同设备设计样式。 - 创建一个断点
min-width: 768px（针对平板电脑）和min-width: 992px（针对桌面电脑）。
- 应用样式：
- 在 CSS 设计器面板的 “源” 部分，点击
style.css。 - 在 “选择器” 部分，输入你想要设置样式的选择器，
#header或.hero-section。 - 在下方的 “属性” 区域，你可以像使用 Photoshop 或 Word 一样，设置：
- 布局：宽度、高度、边距、内边距、浮动、定位等。
- 背景：背景颜色、背景图片。
- 文本：字体、字号、颜色、对齐方式。
- 边框：边框样式、宽度、颜色。
- 每当你修改一个属性，Dreamweaver 都会自动在
style.css文件中生成对应的 CSS 代码。
- 在 CSS 设计器面板的 “源” 部分，点击
示例：设计页眉
- 在选择器中输入
#header。 - 在“属性”中设置一个背景颜色（
#333）。 - 设置
padding（20px 0）来增加内边距。 - 在布局中，设置
width为100%。
第六步：添加交互行为（可选）
如果你想让模板更生动，可以添加一些简单的交互效果，如下拉菜单、选项卡等。
- 打开 “行为” 面板（菜单栏：窗口 > 行为）。
- 选中你想要添加行为的元素（一个导航菜单项）。
- 点击行为面板中的 号。
- 从列表中选择一个行为，“显示-隐藏元素”。
- 在弹出的窗口中，设置要显示或隐藏的目标元素（一个子菜单），并设置触发条件（鼠标悬停
onMouseOver）。 - Dreamweaver 会自动为你生成所需的 JavaScript 代码。
第七步：创建可编辑区域（模板的核心功能）
“模板”的精髓在于 可编辑区域，当你将一个 HTML 文件保存为模板后，只有被标记为可编辑的区域，在使用该模板创建新页面时才能被修改，其他区域（如页眉、页脚、导航栏）将被锁定,以保证整个网站风格的一致性。
- 将你的 HTML 文件（
index.html）另存为模板文件，点击 文件 > 另存为模板。 - 在弹出的窗口中，输入模板名称（
main_template），然后点击 “保存”，文件名会变为main_template.dwt。 - 回到你的 HTML 文件中，选中那些在使用模板时需要用户自定义的内容，在 Hero Section 中,你希望用户能修改标题和文字描述。
- 选中这些元素，然后在菜单栏选择 插入 > 模板对象 > 可编辑区域。
- 为这个可编辑区域起一个名字（
HeroContent），然后点击 “确定”。 - 重复此过程，为你希望用户修改的所有部分（如文章标题、文章内容、侧边栏小部件等）都创建可编辑区域。
提示：Dreamweaver 会用浅蓝色高亮显示可编辑区域，并用黄色高亮显示锁定区域,非常直观。
第八步：使用模板创建新页面
模板制作完成后,就可以用它来快速生成网站的其他页面了。
- 点击 文件 > 新建。
- 在弹出的窗口中，选择 “模板” 选项卡。
- 在左侧选择你的站点，在中间选择你刚刚创建的模板
main_template。 - 点击 “创建”。
- Dreamweaver 会生成一个基于模板的新 HTML 文件，你会发现，只有你定义的可编辑区域可以修改，而页眉、页脚等部分都被锁定了。
- 保存这个新页面,然后开始填充你的内容。
第九步：保存与发布
- 保存所有文件：按
Ctrl + S(Windows) 或Cmd + S(Mac) 保存所有打开的文件，包括 HTML、CSS 和 JS 文件。 - 预览：按
F12键，可以在默认浏览器中预览你的网页,检查效果。 - 发布：如果你有自己的服务器，可以在 Dreamweaver 中设置 “远程服务器”（站点设置 > 服务器），然后通过 “文件” 面板将本地文件直接上传到服务器。
总结与技巧
- 善用代码提示：无论是 HTML、CSS 还是 JavaScript，Dreamweaver 的代码提示功能都非常强大，能减少拼写错误,提高效率。
- 使用快捷键：学习一些常用快捷键，如
Ctrl+B(加粗),Ctrl+I(斜体),F5(刷新实时视图) 等。 - 利用资源：Dreamweaver 的 “资源” 面板可以管理你网站中的所有图片、颜色、URL 等,方便重复使用。
- 响应式是趋势：一定要掌握使用 CSS 设计器创建媒体查询,让你的模板在不同设备上都有良好的显示效果。
- 从简单开始：如果你的目标是制作一个复杂的电商模板，建议先从一个简单的单页模板开始,逐步掌握各项功能。
遵循以上步骤，你就可以用 Dreamweaver 成功制作出一个功能完善、外观专业的网页模板了,祝你创作顺利！
