Dreamweaver 8.0 教程：从入门到精通
Dreamweaver 8.0 是 Adobe 公司（当时还未收购 Macromedia）发布的一款经典网页设计软件，它以其“所见即所得”的可视化编辑环境和强大的代码编辑能力而闻名,是许多网页设计师和开发者的入门首选。
（图片来源网络，侵删）
本教程将分为以下几个部分：
- 第一部分：基础入门 - 认识软件,搭建第一个网站。
- 第二部分：核心功能详解 - 深入学习页面制作的核心技巧。
- 第三部分：进阶技巧 - 学习 CSS、模板和站点管理等高级功能。
- 第四部分：实战演练 - 动手创建一个完整的个人网站。
- 第五部分：资源与提示 - 获取更多帮助和技巧。
第一部分：基础入门
1 初识 Dreamweaver 8.0
- 启动与工作区： 打开 Dreamweaver 8.0，你会看到其经典的工作界面，主要包括：
- 菜单栏： 所有命令的集合。
- 工具栏： 快速访问常用功能，如新建、打开、保存、预览等。
- 文档窗口： 这是你编辑网页的主要区域，可以在“代码”、“设计”和“拆分”三种视图间切换。
- 属性检查器： 选中页面上的任何元素（如文字、图片），这里都会显示其属性,并允许你直接修改。
- 面板组： 如“文件”、“插入”、“CSS 样式”等，可以通过“窗口”菜单来显示或隐藏。
2 创建和管理本地站点
这是最重要的一步！ 在开始制作网页前，必须先建立一个本地站点,用来存放所有网站相关的文件。
- 点击菜单栏的 站点 -> 管理站点。
- 在弹出的窗口中，点击 新建 -> 站点。
- 在弹出的“站点定义”向导中，选择“高级”选项卡。
- 站点名称： 给你的网站起一个名字，如“我的个人网站”。
- 本地根文件夹： 点击文件夹图标，选择一个你电脑上的空文件夹作为网站的根目录。所有网页、图片、CSS 文件都必须放在这个文件夹或其子文件夹中。
- 默认图像文件夹： 可以指定一个专门存放图片的子文件夹，如
images。 - 点击“确定”,你的本地站点就创建好了。
3 创建你的第一个网页
- 在 文件 面板中，右键点击你的站点名称，选择 新建文件。
- 将文件命名为
index.html（这是网站的首页默认名）。 - 双击打开
index.html文件，在 文档工具栏 的 框中，输入“欢迎来到我的个人网站”。 - 在 设计 视图中，点击文档窗口，输入文字“你好，世界！”。
- 按
Ctrl + S保存文件。 - 点击 文档工具栏 中的 实时视图 (或按
F12),在浏览器中预览你的第一个网页！
第二部分：核心功能详解
1 三种视图模式
- 设计视图： 可视化编辑，所见即所得,适合初学者布局。
- 代码视图： 显示纯 HTML、CSS、JavaScript 代码,适合手动编写和修改代码。
- 拆分视图： 上下或左右分区，上面是代码，下面是设计，一边修改代码，一边实时看到效果，强烈推荐使用！
2 文本与段落
- 输入文本： 直接在“设计”视图中输入。
- 格式化文本： 选中文字，在 属性检查器 中可以设置标题（如
<h1>,<h2>）、段落（<p>）、字体、大小、颜色、加粗、斜体等。 - 列表： 可以创建无序列表（项目符号）和有序列表（数字编号）。
3 插入图像
- 确保你的图片（如
photo.jpg）已经放在了之前设置的images文件夹中。 - 将光标放在要插入图片的位置。
- 在 插入 面板中，点击 常用 选项卡，然后点击 图像 图标。
- 在弹出的对话框中，选择
images文件夹中的photo.jpg。 - 在 属性检查器 中，你可以设置：
- 宽/高： 调整图片大小。建议使用图像处理软件（如 Photoshop）调整好尺寸再导入，而不是直接拉伸。
- 源文件： 图片的路径。
- 替换： 图片的描述性文字，当图片无法显示时会显示,且对搜索引擎优化很重要。
- 边框： 给图片添加边框。
4 创建超链接
超链接是网页的灵魂。
- 链接到其他网页： 选中一段文字或一张图片，在 属性检查器 的 链接 框中，输入要链接到的文件名，如
about.html。 - 链接到外部网站： 在“链接”框中输入完整的网址，如
http://www.google.com。 - 锚点链接： 用于链接到长页面中的特定位置。
- 在目标位置插入“命名锚点”（菜单栏 -> 插入 -> 命名锚点）。
- 选中要作为链接的文字，在“链接”框中输入
#锚点名，如#top。
5 创建表格
表格是 Dreamweaver 8.0 时代最重要的页面布局工具。
（图片来源网络，侵删）
- 将光标放在要插入表格的位置。
- 点击 插入 -> 表格。
- 设置表格的 行数、列数、表格宽度、边框粗细 等。
- 单元格操作： 点击单元格可以在其中输入内容或插入图片，在单元格上右键可以合并、拆分单元格。
第三部分：进阶技巧
1 初识 CSS 样式表
CSS (Cascading Style Sheets) 用于控制网页的样式和布局，让内容和表现分离,是现代网页开发的基石。
- 创建内部样式表：
- 点击菜单栏 文本 -> CSS 样式 -> 新建。
- 在“新建 CSS 规则”对话框中，选择“标签（body）”，选择“仅对该文档”。
- 点击“确定”，在弹出的窗口中，你可以设置字体、颜色、背景等。
- 使用 CSS 面板： 打开 窗口 -> CSS 样式 面板，可以更直观地管理、创建和应用 CSS。
2 使用模板
模板可以创建一个包含可编辑区域和不可编辑区域的“母版”页面，之后基于模板创建新页面，可以统一修改网站风格,大大提高效率。
- 创建一个布局完整的页面，如
template.dwt。 - 在 插入 面板中，点击 模板 选项卡，点击 可编辑区域，定义哪些部分可以修改（如文章内容）。
- 保存该页面为模板。
- 之后创建新页面时，选择 文件 -> 新建 -> 从模板新建,即可快速生成风格统一的页面。
3 表单
表单用于收集用户输入，如登录框、注册表单、留言板等。
- 将光标放在要插入表单的位置。
- 点击 插入 -> 表单 -> 表单，这会创建一个红色的虚线框,代表表单区域。
- 在表单区域内，可以插入各种表单对象：
- 文本域： 用于输入单行文本。
- 文本区域： 用于输入多行文本。
- 按钮： 用于提交或重置表单。
- 复选框/单选按钮： 用于多选或单选。
- 列表/菜单： 用于下拉选择。
第四部分：实战演练：创建一个简单的个人网站
-
规划与准备：
（图片来源网络，侵删）- 在电脑上创建一个文件夹
MyPersonalWebsite。 - 在其中创建
images文件夹，放入你的个人照片profile.jpg。 - 用记事本创建一个简单的文本文件
aboutme.txt,复制里面的文字备用。
- 在电脑上创建一个文件夹
-
建立站点：
