Dreamweaver CS5 教程：从入门到精通
Dreamweaver CS5 是 Adobe 公司推出的网页设计软件，它集可视化编辑和代码编写于一体，是当时网页设计师和开发者的首选工具之一，虽然现在有更新的版本，但其核心设计理念和操作方式至今仍有借鉴意义。
第一部分：基础入门 (认识你的工作区)
在开始制作网页之前,我们需要熟悉 Dreamweaver CS5 的工作界面。
启动 Dreamweaver CS5 打开软件后，首先会看到一个 “欢迎屏幕”，这里你可以：
- 新建文件：创建 HTML、CSS、PHP 等不同类型的文件。
- 打开最近项目：快速访问你最近编辑过的网站。
- 主要功能：查看视频教程、新建/打开项目等。
我们选择 “新建” -> “HTML”，然后点击“创建”，进入主工作区。
工作区布局详解 Dreamweaver CS5 的工作区非常灵活，主要由以下几个部分组成：
- 菜单栏：位于顶部，包含所有命令，如“文件”、“编辑”、“插入”、“修改”等。
- 插入栏：位于菜单栏下方，提供了各种常用元素的快速插入按钮，如布局、表单、媒体、文本等，可以切换为“常用”、“布局”、“表单”等类别。
- 文档工具栏：位于文档窗口的顶部，包含视图切换按钮（代码、设计、实时视图）、标题设置、文件管理等功能。
- 文档窗口：中间最大的区域，是你设计和编辑网页的地方。
- 面板组：位于右侧，是 Dreamweaver 的核心功能区域，默认包含：
- 文件：管理你网站的所有文件和文件夹，是站点管理的核心。
- 插入：与顶部的插入栏功能类似，但以面板形式存在。
- CSS 样式：创建和管理 CSS 样式表，是美化的关键。
- 应用程序：用于动态网站开发（如 PHP、ASP），初学者可以先忽略。
- 标签检查器：查看和编辑当前选中 HTML 元素的属性。
- 属性检查器：位于最下方，是使用频率最高的面板，当选中文本、图片、链接等元素时，它会显示该元素的所有可修改属性（如字体、大小、颜色、链接地址等）。
第二部分：核心功能详解
站点管理 - 创建你的第一个网站 在 Dreamweaver 中，“站点” 是一个非常重要的概念，它是一个管理所有网页、图片、链接和相关文件的“容器”，只有定义了站点，Dreamweaver 才能正确管理文件路径和链接。
- 步骤：
1. 点击菜单栏 **“站点” -> “新建站点...”**。
2. 在弹出的对话框中，切换到 **“高级”** 选项卡（初学者推荐）。
3. **本地根文件夹**：点击文件夹图标，选择一个本地电脑上的空文件夹作为你的网站根目录，`D:\mywebsite`。**所有网站文件都应该放在这个文件夹里。**
4. **默认图像文件夹**：同样选择一个子文件夹，用于存放图片，`D:\mywebsite\images`。
5. **站点名称**：给你的站点起一个名字，如“我的第一个网站”。
6. 点击 **“确定”**。在右侧的 “文件” 面板中，你就能看到你刚刚创建的站点结构了。
可视化编辑与代码视图 Dreamweaver 的强大之处在于它可以在两种视图间自由切换。
-
设计视图：
-
优点：所见即所得，无需编写代码即可通过拖拽、点击等方式布局页面，非常适合初学者。
-
操作：直接在文档窗口中输入文字，然后使用 “属性检查器” 设置字体、颜色、大小，点击 “插入” 栏中的按钮，可以插入表格、图片、链接等。
-
代码视图：
-
优点：可以精确控制代码，查看或修改 HTML、CSS、JavaScript 等源代码。
-
操作：点击 “文档工具栏” 中的 “代码” 按钮即可切换，代码视图有语法高亮、自动提示等功能，方便编写。
-
拆分视图：
-
强烈推荐初学者使用！ 这个视图将窗口一分为二，上半部分是代码，下半部分是设计结果，当你修改代码时，可以立刻在设计视图中看到效果，反之亦然，这是学习代码和设计之间对应关系的最佳方式。
CSS 样式 - 美化你的网页 CSS (层叠样式表) 是控制网页外观（布局、颜色、字体等）的核心技术。
- 创建 CSS 样式表：
1. 打开 **“CSS 样式”** 面板。
2. 点击面板右下角的 **“新建 CSS 规则”** 按钮。
3. **选择器类型**：
* **类**：可以重复使用，以点 `.` 开头，如 `.mytext`。
* **ID**：在页面中唯一，以 `#` 开头，如 `#header`。
* **标签**：直接为 HTML 标签（如 `<p>`, `<h1>`）定义样式。
4. **选择器名称**：为你的样式起一个名字。
5. **定义在**：选择 **“新建样式表文件”**，这样会创建一个独立的 `.css` 文件，便于管理和复用。
6. 点击“确定”，保存 CSS 文件到你的站点文件夹中。
7. 在弹出的样式定义窗口中，你可以设置字体、颜色、背景、边框、方框（用于布局）等属性，设置好后点击“确定”。- 应用 CSS 样式：
- 在设计视图中选中一段文字或一个元素。
- 打开 “属性检查器”，在 “目标规则” 或 “类” 下拉菜单中选择你刚刚创建的 CSS 样式即可。
布局 - 使用表格和 AP Div
- 表格：虽然现在主要用于展示数据，但在早期，表格是网页布局的主要方式，点击 “插入” -> “表格”，可以设置行数、列数、宽度等。
- AP Div (绝对定位 Div)：CS5 中更灵活的布局方式，AP Div 是一个可以随意拖拽定位的“图层”。
- 插入：点击 “插入” -> “布局对象” -> “AP Div”。
- 编辑：直接在 AP Div 中输入内容或插入图片，然后拖动其边缘调整大小，拖动其移动位置。
第三部分：实战演练 - 制作一个简单的个人主页
我们来综合运用上面的知识,制作一个包含标题、个人简介和照片的简单主页。
目标文件：index.html
步骤 1：准备素材
- 在你的站点根文件夹
mywebsite下，创建一个名为images的文件夹。 - 准备一张你的个人照片,命名为
profile.jpg，并放入images文件夹。
步骤 2：创建主页文件
- 在右侧 “文件” 面板中，右键点击站点根文件夹，选择 “新建文件”。
- 将新文件命名为
index.html。
步骤 3：设置页面标题
- 打开
index.html文件。 - 在 “文档工具栏” 的 输入框中，输入“我的个人主页”。
步骤 4：创建并应用 CSS 样式
- 打开 “CSS 样式” 面板，点击 “新建 CSS 规则”。
- 选择器类型为 “类”，名称为
.page-title，定义在“新建样式表文件”。 - 保存为
styles.css。 - 在样式定义窗口中：
* **字体**：选择你喜欢的字体，如“微软雅黑”。
* **大小**：设置为 `36px`。
* **颜色**：设置为深蓝色，如 `#003366`。
* **修饰**：勾选“无”。点击“确定”。
步骤 5：设计页面内容
- 在设计视图中,输入标题文字：“欢迎来到我的世界”。
- 选中这段文字,在 “属性检查器” 的 “类” 下拉菜单中选择
.page-title，你会发现标题样式立刻改变了。 - 按回车换行,输入个人简介，如：“我是一名网页设计师，热爱创造美好的网络体验。”
- 将光标定位到简介下方,点击 “插入” -> “图像”，选择
images/profile.jpg插入照片。 - 选中图片,在 “属性检查器” 中可以设置图片的宽度、高度、边框等。
步骤 6：预览你的网页
- 按快捷键 F12，或者点击 “文档工具栏” 中的 “在浏览器中预览” 按钮。
- 系统会用默认浏览器打开你的
index.html文件，你应该能看到一个带有美化标题、简介和个人照片的网页了！
第四部分：进阶与提示
- 模板功能：如果你的网站有多个页面（如“关于我”、“联系方式”），它们通常有相同的头部和底部，使用 “文件” -> “新建” -> “页面模板” 可以创建一个模板，然后在其他页面中基于模板创建，修改模板后所有页面都会自动更新。
- 超链接：选中文字或图片，在 “属性检查器” 的 “链接” 框中输入要跳转的文件名或网址（如
about.html或http://www.google.com）。 - 学习资源：
- 官方帮助：按
F1键，可以打开 Dreamweaver CS5 的官方帮助文档，非常详尽。 - 在线教程：在 YouTube、Bilibili 等视频网站搜索 “Dreamweaver CS5 教程”，有大量视频资源可供学习。
- 官方帮助：按
Dreamweaver CS5 是一款功能强大的工具，它降低了网页开发的门槛，让不懂代码的人也能做出漂亮的网页，对于初学者来说，掌握 站点管理、可视化编辑、CSS 样式 和 代码/设计视图切换 是最重要的。
希望这份教程能帮助你顺利入门,开启你的网页设计之旅！祝你学习愉快！
