Dreamweaver 8.0 超详细入门教程
Dreamweaver 8.0 是 Adobe 公司（当时为 Macromedia）在2006年发布的经典网页设计与开发软件，它以其“所见即所得”的可视化编辑方式和强大的代码编辑功能,成为了一代网页设计师和开发者的必备工具。
（图片来源网络，侵删）
虽然现在有更现代的工具（如 VS Code, Sublime Text, Adobe XD, Figma 等），但学习 Dreamweaver 8.0 依然有其价值：
- 理解网页基础：它能让你直观地理解 HTML、CSS 和 JavaScript 是如何协同工作的。
- 经典的工作流：了解早期网页设计的流程和思维方式。
- 怀旧与兴趣：对于很多老手来说,它承载着美好的回忆。
第一部分：入门准备与界面初识
安装与启动
- 注意：Dreamweaver 8.0 是非常古老的软件，仅支持 Windows XP/7 和 Mac OS X 10.4/10.5，在现代系统（如 Windows 10/11, macOS）上运行可能会遇到兼容性问题，建议使用虚拟机（如 VirtualBox, VMware）安装旧系统来运行它。
- 启动后，会看到一个欢迎界面，提供了“新建”、“打开最近项目”等选项。
熟悉工作区界面
Dreamweaver 8.0 的界面高度可定制,但默认布局包含以下几个核心部分：
- 菜单栏：包含所有命令，如“文件”、“编辑”、“查看”、“插入”、“修改”、“文本”、“命令”、“站点”、“窗口”和“帮助”。
- 工具栏：提供常用操作的快捷按钮，如“新建”、“打开”、“保存”、“在浏览器中预览”等。
- 文档窗口：这是你的主工作区，用于创建和编辑网页，你可以在这里切换 “设计”视图、“代码”视图 和 “拆分”视图。
- 设计视图：可视化编辑区,所见即所得。
- 代码视图：纯代码编辑区，显示当前页面的 HTML, CSS, JavaScript 代码。
- 拆分视图：上下或左右分区，同时显示设计和代码，是 DW 的核心优势。
- 属性检查器：位于界面下方或右侧，当选中页面上的某个元素（如一段文字、一张图片）时，它会显示该元素的所有可修改属性（如字体、颜色、大小、链接等）,是可视化编辑的核心工具。
- 面板组：位于右侧，包含各种功能面板，如“文件”、“插入”、“CSS 样式”、“应用程序”等，它们可以折叠、展开和拖动组合。
第二部分：创建和管理站点
在开始制作网页之前，最重要的一步是定义一个本地站点，这能帮你管理网站的所有文件和链接，避免“找不到文件”的错误。
- 打开站点管理器：点击菜单栏的
站点->管理站点。 - 新建站点：在弹出的窗口中，点击“新建” -> “站点”。
- 设置站点名称：给你的网站起一个名字，我的第一个网站”。
- 设置本地根文件夹：点击文件夹图标，选择一个你电脑上的空文件夹作为你网站的根目录。所有网页文件都将保存在这个文件夹及其子文件夹中。
- 完成：点击“确定”，再点击“完成”，在右侧的“文件”面板中,你就可以看到你的站点了。
第三部分：核心功能详解
使用“插入”面板添加元素
“插入”面板是可视化设计的核心，它将各种网页元素（文本、图片、表格、链接等）分类放置,你可以像搭积木一样把它们拖到页面上。
（图片来源网络，侵删）
- 常用分类：
- 常用：最常用的元素，如超链接、表格、图片、电子邮件链接等。
- 布局：用于创建页面布局的表格、层（AP 元素）等。
- 文本：各种文本格式化标签，如标题、段落、列表等。
- 媒体：Flash、Shockwave、视频、音频等。
文本编辑与格式化
- 输入文本：直接在“设计”视图中点击并输入。
- 格式化文本：选中文本后，使用“属性检查器”或菜单栏的
文本菜单来设置：- 格式：如“段落”、“标题 1”、“标题 2”等，这对 SEO（搜索引擎优化）很重要。
- 字体：选择字体。
- 大小：设置字号。
- 样式：加粗、斜体、下划线。
- 颜色：设置文本颜色。
插入和管理图片
- 插入图片：将光标放在要插入图片的位置，在“插入”面板的“常用”分类中点击“图像”图标，或使用菜单
插入->图像。 - 选择图片：在弹出的对话框中，选择你的图片文件（如 .jpg, .png, .gif）。强烈建议：先将图片复制到你的站点文件夹内的一个
images子文件夹中，然后从该文件夹选择,这能保证将来上传网站后图片不会丢失。 - 设置图片属性：选中图片后，“属性检查器”会显示以下选项：
- 源文件：图片的路径，如果图片不在站点内，DW 会提示你将其复制到站点。
- 宽度和高度：调整图片显示尺寸，注意：直接拉伸图片会导致变形，最好先用图片处理软件（如 Photoshop）调整好尺寸。
- 替代：为图片添加文字说明,这对SEO和无障碍访问非常重要。
- 边框：给图片添加边框。
- 垂直边距/水平边距：设置图片与周围文本的距离。
创建超链接
超链接是网页的灵魂,用于连接不同的页面或资源。
- 选中元素：选中你想要变成链接的文本或图片。
- 链接到其他页面：在“属性检查器”的“链接”输入框中，直接输入目标页面的文件名（如
about.html）,或者点击文件夹图标浏览并选择站点内的页面。 - 链接到外部网站：在“链接”框中输入完整的网址（如
https://www.google.com）。 - 链接到邮箱：在“链接”框中输入
mailto:+ 邮箱地址（如mailto:example@email.com）。 - 设置目标：“目标”下拉菜单决定了链接在哪个窗口打开。
_blank：在新窗口中打开。_self：在当前窗口打开（默认）。_parent：在父框架中打开。_top：在整个浏览器窗口中打开。
使用表格进行布局
在 CSS 盛行之前，表格是网页布局的主要方式，虽然现在不推荐用表格布局，但学习它有助于理解 DW 的逻辑。
- 插入表格：
插入->表格。 - 设置表格属性：在弹出的对话框中设置行数、列数、表格宽度、边框粗细等。
- 编辑表格：
- 合并单元格：选中多个连续的单元格，右键点击，选择“表格” -> “合并单元格”。
- 拆分单元格：将光标放在一个单元格内，右键点击，选择“表格” -> “拆分单元格”,选择拆分成行或列。
- 调整大小：可以直接拖动表格的边框或角落。
CSS 样式表的应用（核心）
CSS（层叠样式表）负责网页的视觉呈现，如颜色、间距、布局等，DW 提供了强大的 CSS 管理功能。
-
创建外部 CSS 文件（推荐）：
（图片来源网络，侵删）- 在右侧的“CSS 样式”面板中，点击右下角的“新建 CSS 规则”按钮。
- 选择“类”，给样式起一个名字（如
.text-center），然后选择“仅对该文档”。 - 在弹出的对话框中，点击“确定”。
- 在“CSS 规则定义”窗口中，设置你想要的样式（如字体、颜色、对齐方式等）。
- 保存为外部文件：编辑完样式后，在“CSS 样式”面板中，右键点击你刚创建的样式，选择“导出”，将其保存为
.css文件（如style.css）。 - 链接到页面：在任意一个 HTML 页面中，点击“CSS 样式”面板的“附加样式表”按钮，选择你刚才保存的
style.css文件，这样,这个站点的所有页面都可以共享同一个样式表。
-
使用“属性检查器”快速应用样式： 在“属性检查器”中，有一个“样式”下拉框，里面会列出你当前文档中所有可用的 CSS 类，选中文本或元素后,直接从这里选择样式即可应用。
第四部分：预览、上传与管理
在浏览器中预览
- 快捷键：按
F12键。 - 按钮：点击工具栏上的“在浏览器中预览”图标。
- 作用：这是检验网页最终效果的唯一标准，DW 的“设计”视图只是一个参考，不同浏览器（如 IE, Firefox, Chrome）的渲染效果可能不同,务必在真实浏览器中测试。
上传网站到服务器（FTP）
当你完成所有页面制作后,需要将它们上传到网络服务器上才能被访问。
- 定义远程服务器：
站点->管理站点-> 选择你的站点 -> “编辑” -> “高级” -> “远程信息”。 - 选择服务器访问：在“访问”下拉菜单中选择 FTP。
- 填写 FTP 信息：你的网站服务商会提供这些信息：
- FTP 主机：服务器的地址。
- 主机目录：你上传文件存放的文件夹路径（通常是
/public_html或wwwroot）。 - 登录：你的 FTP 用户名。
- 密码：你的 FTP 密码。
- 连接并上传：点击“确定”后，在右侧的“文件”面板中，你会看到“本地文件”和“远程视图”，连接成功后,你可以直接将本地文件拖到远程视图中进行上传。
第五部分：实用技巧与快捷键
- 快捷键：
Ctrl + S：保存。Ctrl + N：新建文件。F12：在浏览器中预览。Ctrl + Tab：在打开的文档间切换。
- 代码提示：在“代码”视图中，DW 会根据你输入的标签和属性提供代码提示,提高编码效率。
- 查找和替换：
编辑->查找和替换，可以快速在整个站点或当前文档中替换文本、代码或链接。 - 检查浏览器兼容性：
文件->检查页面的浏览器兼容性,可以帮你发现代码在不同浏览器中可能存在的问题。
Dreamweaver 8.0 是一个功能强大且人性化的工具，学习它的过程,就是学习网页制作基础的过程。
学习路径建议：
- 定义站点 -> 这是第一步,也是最重要的一步。
- 创建首页 -> 插入文本、图片,练习格式化和超链接。
- 学习 CSS -> 创建外部样式表,美化你的页面。
- 使用表格布局 -> 尝试用表格搭建一个简单的页面结构。
- 预览与上传 -> 学会用 FTP 将你的作品放到网上。
虽然 Dreamweaver 8.0 已经是“古董”，但它所承载的网页设计思想和基本操作，至今仍然是网页开发的基石,希望这份教程能帮助你顺利开启网页设计之旅！
