Dreamweaver 完整制作教程：从入门到精通
Dreamweaver (简称 DW) 是一款强大的网页设计和开发工具，它最大的特点是 “可视化设计” 和 “代码编辑” 的完美结合，无论你是设计师还是程序员，都能在 DW 中找到自己舒适的位置。
本教程将分为以下几个部分：
- 第一部分：准备工作与环境熟悉
- 第二部分：创建你的第一个网页
- 第三部分：核心概念：本地站点
- 第四部分：文本、图像与链接
- 第五部分：CSS 样式美化网页
- 第六部分：表格与布局
- 第七部分：使用模板提高效率
- 第八部分：发布你的网站
- 第九部分：总结与进阶
第一部分：准备工作与环境熟悉
安装 Dreamweaver
你需要安装 Adobe Dreamweaver，它是 Adobe Creative Cloud (CC) 套件的一部分，你需要订阅 Adobe 服务才能使用，你可以从 Adobe 官网下载并安装最新版本。
启动 Dreamweaver 并了解工作区
启动 Dreamweaver 后，你会看到一个欢迎界面，我们先关闭它，直接进入工作区。
Dreamweaver 的工作区主要由以下几个部分组成：
- 菜单栏 (Menu Bar): 位于顶部，包含所有命令，如“文件”、“编辑”、“插入”、“修改”等。
- 工具栏 (Toolbar): 提供常用操作的快捷按钮，如“新建”、“打开”、“保存”、“在浏览器中预览”等。
- 文档窗口 (Document Window): 中间最大的区域，是你设计和编辑网页的地方，你可以在这里切换 “设计”视图、“代码”视图 和 “实时视图”。
- 设计视图: 可视化编辑界面，所见即所得。
- 代码视图: 显示和编辑 HTML, CSS, JavaScript 等代码。
- 实时视图: 一个只读的、更接近真实浏览器效果的预览模式。
- 属性检查器 (Property Inspector): 通常位于右下角，当选中文档中的某个元素（如一段文字、一张图片）时，这里会显示该元素的属性（如字体、大小、颜色、链接等），你可以直接在这里修改。
- 面板组: 位于右侧，包含各种面板，如“文件”、“插入”、“CSS 设计器”等，你可以通过拖动标题栏来折叠、展开或组合这些面板。
第二部分：创建你的第一个网页
创建新 HTML 文件
- 点击菜单栏的 文件 > 新建。
- 在弹出的对话框中,选择 “基本页”，然后在右侧的“页面类型”中选择 “HTML”。
- 点击 “创建”。
一个新的空白 HTML 文档就打开了。
保存文件
- 点击菜单栏的 文件 > 保存。
- 选择一个你用来存放网站的文件夹（在桌面创建一个名为
my_website的文件夹），并将文件命名为index.html。- 重要提示:
index.html是网站的首页，通常命名为这个。
- 重要提示:
你的文档窗口顶部会显示文件名 index.html。
第三部分：核心概念：本地站点
在 Dreamweaver 中，“站点” (Site) 是最重要的概念，它不是一个文件夹，而是一个 Dreamweaver 项目，它记录了网站中所有文件之间的关系。
创建本地站点可以让你：
- 管理所有网站文件和文件夹。
- 使用相对路径链接文件和图片。
- 轻松地将整个网站上传到服务器。
如何创建本地站点？
- 点击菜单栏的 站点 > 新建站点。
- 在弹出的窗口中,切换到 “站点” 选项卡。
- 站点名称: 给你的站点起个名字，我的第一个网站”，这个名字只在 Dreamweaver 内部使用。
- 本地站点文件夹: 点击文件夹图标，选择你刚才保存
index.html的那个文件夹（my_website）。 - 确保 “共享” 选项卡中的设置保持默认即可（除非你使用 Git）。
- 点击 “保存”。
查看右侧的 “文件” 面板，你应该能看到你的 index.html 文件了，这就是你的站点管理器。
第四部分：文本、图像与链接
现在我们来给 index.html 添加内容。
插入和编辑文本
- 在 设计视图 中，将光标放在文档窗口中。
- 直接输入文字,“欢迎来到我的网站！”
- 选中这段文字,在底部的 “属性检查器” 中，你可以修改：
- 格式: 将其设置为“标题 1”（H1），这是最重要的标题。
- 字体: 选择一个字体。
- 大小: 设置字号。
- 颜色: 点击颜色方块选择文字颜色。
插入图像
- 在你的站点文件夹
my_website里，放一张图片，比如命名为hero.jpg。 - 在 Dreamweaver 的 “文件” 面板中，直接将
hero.jpg拖拽到index.html文档窗口的合适位置。 - 选中插入的图片,在 “属性检查器” 中进行设置：
- 宽/高: 调整图片大小。
- 源文件: 确认图片路径是否正确。
- 替换: 输入图片的描述文本，这有助于SEO和当图片无法显示时显示文字。
- 边框: 可以给图片加一个边框。
插入超链接
- 选中你想要添加链接的文字或图片。
- 在 “属性检查器” 的 “链接” 文本框中，输入要跳转到的地址。
- 外部链接: 输入完整的网址，
https://www.google.com。 - 内部链接: 输入站点内其他文件的路径，
about.html。 - 锚点链接: 在“链接”框中输入 加上锚点名称，
#top。
- 外部链接: 输入完整的网址，
- 目标: 通常选择
_blank，表示在新的浏览器标签页中打开链接。
第五部分：CSS 样式美化网页
CSS (层叠样式表) 是用来控制网页外观的语言，Dreamweaver 提供了强大的 CSS 设计器。
使用“CSS 设计器”面板
- 确保右侧的 “CSS 设计器” 面板是打开的。
- 在 CSS 设计器 面板中，点击 “源” 下方的 “添加源” 按钮，选择 “创建新 CSS 文件”。
- 给新样式表文件命名,
style.css，并点击 “创建”。 - Dreamweaver 会自动将这个 CSS 文件链接到你的 HTML 文件中。
创建和应用 CSS 规则
我们来美化整个页面。
-
在 CSS 设计器 面板中，点击 “选择器” 下方的 “添加选择器” (+) 按钮。
-
给选择器命名,
body，这代表我们将为整个页面设置样式。 -
在下方的 “属性” 区域，你可以设置各种样式：
- 背景: 点击背景颜色块，选择一个背景色。
- 文本: 设置默认的字体、字号、颜色等。
- 布局: 设置页面的宽度（
1200px）和居中对齐。
-
创建特定元素的样式：
- 再次点击 “添加选择器” (+)，输入
h1。 - 在属性中设置标题的字体大小、颜色、对齐方式等。
- 再创建一个
.container选择器（注意有点，这是类选择器），用于包裹内容，设置宽度、边距等。
- 再次点击 “添加选择器” (+)，输入
-
应用样式：
- 回到你的 HTML 文档，选中你想要应用样式的元素。
- 在 “CSS 设计器” 面板的 或 标签下，直接点击你创建好的选择器（如
.container），样式就会被应用。
通过这种方式,你可以轻松地创建出美观的网页布局。
第六部分：表格与布局
虽然现代网页布局更多使用 Flexbox 和 Grid，但表格在展示结构化数据（如课程表、成绩单）时依然非常有用。
插入表格
- 将光标放在你想插入表格的位置。
- 点击菜单栏 插入 > 表格。
- 在对话框中设置：
- 行数: 5
- 列数: 3
- 表格宽度: 600 像素
- 边框粗细: 1
- 点击 “确定”。
表格被插入后,你可以直接在单元格内输入内容，并像编辑文本和图片一样，通过 “属性检查器” 调整表格和单元格的对齐、边框等属性。
提示: 对于页面整体布局，建议使用 “插入 > Div 标签”，并结合 CSS 进行布局，这比使用表格布局更现代、更灵活。
第七部分：使用模板提高效率
如果你的网站有多个页面（如首页、关于我们、联系我们），并且它们有相同的头部和底部，使用模板可以大大提高效率。
创建模板
- 打开你的
index.html文件。 - 点击菜单栏 文件 > 另存为模板。
- 给模板命名,
site_template.dwt，然后点击 “保存”。 - 在模板文件中,锁定（不可编辑）那些所有页面都相同的部分，例如导航栏和页脚。
- 选中要锁定的区域（比如整个导航栏）。
- 在 “属性检查器” 中，点击 “模板” 选项卡，然后点击 “新建可编辑区域”。
- 给这个可编辑区域命名,
EditRegion1。 - 重要： 只有被标记为“可编辑区域”的部分，在基于模板创建的页面中才能被修改。
基于模板创建页面
- 点击菜单栏 文件 > 新建。
- 在“新建文档”对话框中，选择 “模板” 选项卡。
- 从左侧的“模板用于”列表中选择你的站点。
- 在中间的列表中选择你刚刚创建的
site_template.dwt。 - 点击 “创建”。
- 一个新页面被创建了,你只能修改
EditRegion1里的内容，而导航栏和页脚被保护起来，保存这个新页面（about.html）。
第八部分：发布你的网站
当你完成了所有页面的设计和制作,就可以将网站上传到互联网上了，这需要你有一个 Web 托管服务（虚拟主机） 和 FTP 信息。
使用“管理站点”功能设置远程服务器
- 点击菜单栏 站点 > 管理站点。
- 选择你的站点,点击 “编辑”。
- 在弹出的设置窗口中,切换到 “服务器” 选项卡。
- 点击 “添加新服务器” (+) 按钮。
- 基本设置:
- 选项卡: 选择 “FTP”。
- 服务器名称: 填写你的服务器名称，如“我的主机”。
- FTP 地址: 你的 FTP 服务器地址（由你的主机提供商提供）。
- 目录: 你的网站在服务器上的根目录（通常是
/public_html或/www）。 - 登录: 你的 FTP 用户名。
- 密码: 你的 FTP 密码。
- 高级设置:
- 连接类型: 选择 “FTP”。
- 使用被动 FTP: 勾选此项，这能解决很多连接问题。
- 点击 “测试” 按钮，如果连接成功，会提示“Dreamweaver 成功连接到服务器”。
- 点击 “保存”，“完成”。
上传文件
- 在 “文件” 面板中，确保你选择了“本地视图”，能看到你电脑上的所有文件。
- 点击面板右上角的 “连接到远程服务器” 按钮（一个闪电图标）。
- 连接成功后,右侧会显示“远程视图”，即你服务器上的文件。
- 在左侧选中你想要上传的所有文件和文件夹,然后点击 “上传文件” 按钮（一个向上的箭头）。
- 等待上传完成,你的网站就成功发布了！
第九部分：总结与进阶
恭喜你！你已经掌握了 Dreamweaver 的基本操作，可以独立完成一个静态网站的制作了。
回顾核心要点：
- 站点是基础: 始终先建立站点，再开始制作。
- 视图切换: 灵活运用“设计”、“代码”和“实时视图”。
- CSS 是灵魂: 学会使用“CSS 设计器”是美化的关键。
- 模板是利器: 对于多页网站，模板能让你事半功倍。
- 属性检查器: 你的好朋友，随时帮你调整元素属性。
进阶学习方向：
- 深入学习 HTML5 和 CSS3: 了解更丰富的标签和更强大的布局技术（Flexbox, Grid）。
- JavaScript 和 jQuery: 学习如何为网页添加交互效果，如轮播图、表单验证等，Dreamweaver 也支持代码提示。
- 响应式设计: 学习如何使用媒体查询，让你的网站在不同尺寸的设备（手机、平板、电脑）上都能良好显示。
- CMS 集成: Dreamweaver 可以很好地与 WordPress 等内容管理系统集成，进行主题开发。
Dreamweaver 是一个功能强大的工具，但它只是工具，真正的网页设计师和开发者，需要不断学习 HTML、CSS 和 JavaScript 这些核心语言，Dreamweaver 是帮助你高效实现想法的助手，而不是替代你思考的大脑。
祝你学习愉快,早日成为网页设计高手！
