Dreamweaver CS6 教程：从零开始制作你的第一个网站
Dreamweaver CS6 是一款功能强大的网页设计和开发工具，它集成了可视化编辑器和强大的代码编辑器，非常适合初学者和专业人士。
（图片来源网络，侵删）
第一部分：准备工作与界面初识
安装与启动
确保你已经成功安装了 Dreamweaver CS6，启动后，你会看到一个“欢迎屏幕”。
- 新建：从这里可以创建新文件或新站点。
- 打开最近的项目：快速访问你最近编辑过的文件。
- 主要功能：快速访问常用功能，如创建 HTML、CSS、PHP 等文件。
界面概览
Dreamweaver 的界面由几个关键面板组成，了解它们至关重要。
- 菜单栏：包含所有命令，如“文件”、“编辑”、“查看”、“插入”等。
- 工具栏：提供常用操作的快捷按钮，如“在浏览器中预览”、“文件管理”等。
- 文档窗口：这是你设计和编写代码的主区域，可以在这里看到网页的最终效果。
- 插入栏：提供了快速插入各种元素（如图片、表格、链接、媒体）的按钮。
- 面板组：位于界面右侧，是 Dreamweaver 的核心控制区，主要包括：
- 文件：管理你网站的所有文件和文件夹。
- CSS 样式：创建和管理 CSS 样式表，控制网页的外观。
- 应用程序：用于动态网站开发（如 PHP、ASP），初学者可以先忽略。
- 标签选择器：显示当前光标所在位置的 HTML 标签（如
<body>,<p>,<div>），方便快速定位和修改。 - 属性检查器：这是最重要的面板之一！ 选中任何页面元素（如图片、文字、表格），这里就会显示其属性，你可以直接在这里修改。
第二部分：创建和管理站点
在开始制作网页之前,强烈建议你先创建一个站点，这能确保所有文件路径正确，避免图片、链接等显示不出来。
- 点击菜单栏的 站点 > 新建站点。
- 在弹出的对话框中,切换到 “站点” 选项卡。
- 站点名称：给你的网站起一个名字，我的第一个网站”，这个名字只是方便你识别，不会公开显示。
- 本地站点文件夹：点击文件夹图标，选择一个你电脑上的空文件夹，用于存放网站的所有文件，在桌面创建一个名为
MyFirstWebsite的文件夹。 - 点击 “保存”。
创建站点后,观察右侧的 “文件” 面板，现在它应该显示你刚刚创建的本地文件夹，你可以创建新的 HTML 文件、CSS 文件和文件夹，保持网站结构整洁。
（图片来源网络，侵删）
第三部分：核心技能实战
我们将通过制作一个简单的个人介绍页面来学习核心技能。
创建和编辑 HTML
- 在 “文件” 面板中，右键点击站点根目录，选择 新建文件，将其命名为
index.html。index.html是网站首页的默认文件名。 - 双击打开
index.html，默认情况下，你可能处于 “设计” 视图，这是一个所见即所得的编辑器。
添加文本：
- 直接在文档窗口中点击并输入文字,欢迎来到我的个人主页！”。
- 选中文字,在 “属性检查器” 中可以修改字体、大小、颜色、对齐方式等。 **
- 将光标放在文字前。
- 在 “插入” 栏的 “常用” 分类中，找到 按钮（一个带 H1, H2, H3 的图标），选择 1”，这会生成
<h1>标签，对 SEO（搜索引擎优化）很重要。
插入图片：
- 准备一张图片（
photo.jpg），并将其放入你站点文件夹内的一个images子文件夹中（先在“文件”面板里创建这个文件夹）。 - 将光标放在你想插入图片的位置。
- 点击 “插入” 栏的 “常用” 分类中的 “图像” 按钮。
- 在弹出的窗口中,选择你刚才的
photo.jpg。关键一步：确保 “相对于” 选项选择的是 “文档”，这会使用相对路径，保证无论你把整个网站文件夹拷贝到哪里，图片都能正确显示。 - 插入后,选中图片，在 “属性检查器” 中可以修改图片的宽、高、替换文本（alt 属性，对无障碍访问很重要）。
创建链接：
（图片来源网络，侵删）
- 选中一段文字,点击这里了解更多关于我的信息”。
- 在 “属性检查器” 的 “链接” 文本框中，输入一个网址，
https://www.google.com。 - 如果要链接到网站内部的另一个页面（
about.html），可以直接输入文件名about.html。
使用 CSS 美化网页
HTML 负责结构，CSS 负责样式，我们使用 “CSS 样式” 面板来管理样式。
创建一个外部 CSS 文件（推荐做法）：
- 在 “文件” 面板中，新建一个文件，命名为
style.css。 - 在 “CSS 样式” 面板中，点击右下角的 “附加样式表” 按钮（一个带链条的图标）。
- 在弹出的窗口中,选择你刚刚创建的
style.css，并确保 “添加为” 选择的是 “链接”，然后点击“确定”。
定义和应用 CSS 样式：
- 确保
style.css文件在 “CSS 样式” 面板中被选中。 - 点击面板右下角的 “新建 CSS 规则” 按钮（一个带 + 号的图标）。
- 选择器类型：选择 “类”。
- 选择器名称：输入一个以点 开头的名字，
.main-title。 - 定义在：确保选择的是
style.css。 - 点击“确定”，会弹出“CSS 规则定义”窗口。
- 在这里你可以定义各种样式：
- 类型：修改字体、大小、颜色、行高等。
- 背景：设置背景颜色或图片。
- 区块：设置文本对齐、字母间距等。
- 方框：设置元素的宽、高、内边距、外边距等。
- 设置完成后点击“确定”，回到你的
index.html文件，选中一个元素（比如一个<h1>标签），在 “属性检查器” 的 “类” 下拉菜单中，选择你刚刚创建的.main-title样式。
使用“实时视图”和“实时代码”
- 切换到 “实时视图”，你可以看到一个与浏览器几乎完全一致的、不可编辑的预览效果。
- 按住
Ctrl键（Mac上是Cmd），在“实时视图”中点击某个元素，Dreamweaver 会自动切换到 “实时代码” 视图，并高亮显示该元素对应的代码，这对于学习 HTML 和 CSS 结构非常有帮助。
第四部分：视图模式详解
Dreamweaver 提供了多种视图模式，灵活使用它们能极大提高效率。
- 设计：所见即所得的视图，适合初学者进行布局和内容编辑。
- 代码：纯代码视图，显示当前文件的完整 HTML、CSS、JavaScript 代码，你可以直接在这里编写和修改代码。
- 拆分：最常用的视图之一！ 左侧是代码，右侧是设计视图，你在一边的任何修改都会实时反映在另一边，非常适合学习和调试。
- 实时视图：不可编辑的浏览器预览模式，效果最真实。
- 实时代码：在实时视图的基础上，可以查看和编辑代码。
第五部分：实用技巧与进阶
使用表格进行布局（传统方法）
虽然现在更推荐使用 Div+CSS 布局，但表格在展示数据、制作简单布局时依然非常实用。
- 插入表格：通过 “插入” 栏的 “表格” 按钮。
- 设置表格属性：选中表格后，在“属性检查器”中可以设置行数、列数、宽高、边框、间距等。
- 合并/拆分单元格：选中单元格，在“属性检查器”中有相应的按钮。
使用 Spry 框架（CS6 特色）
Spry 是 Adobe 开发的一个 AJAX 框架，可以轻松创建交互式组件，无需编写复杂代码。
- 插入 Spry 组件：在 “插入” 栏中切换到 “Spry” 分类。
- 常用组件：
- Spry 菜单栏：创建横向或纵向的下拉菜单。
- Spry 选项卡式面板：创建选项卡内容区，点击不同标签显示不同内容。
- Spry 折叠式面板：创建可折叠/展开的内容区域。
- 插入后,可以在 “CSS 样式” 面板中轻松修改这些组件的外观。
查找和替换
这是一个非常强大的功能,可以批量修改整个网站的代码或内容。
- 快捷键：
Ctrl + F(Windows) /Cmd + F(Mac)。 - 你可以搜索特定的文本、标签，甚至使用正则表达式进行高级搜索，并将搜索结果替换为其他内容。
总结与资源
Dreamweaver CS6 是一个功能全面的工具，本教程覆盖了从创建站点、编写 HTML、应用 CSS 到使用高级功能的完整流程。
学习建议：
- 多动手实践：跟着教程做一遍，然后尝试自己创建一个包含多个页面的完整网站。
- 熟悉快捷键：学习常用快捷键可以大大提高效率。
- 善用帮助文档：遇到问题时，按
F1键打开官方帮助文档。 - 理解代码：即使主要使用“设计”视图，也要尝试通过“拆分”视图去理解 HTML 和 CSS 是如何工作的。
资源推荐：
- 官方帮助：Adobe Dreamweaver CS6 帮助中心 (F1)
- 在线社区：Adobe 官方论坛、知乎、CSDN 等平台有大量关于 Dreamweaver 的讨论和教程。
祝你学习愉快,早日成为一名网页设计高手！
