Dreamweaver CS4教程从哪里开始学？-杰瑞科技汇

第一部分：Dreamweaver CS4 简介

Dreamweaver CS4 是 Adobe 公司推出的专业级网页设计软件,它的最大特点是：

（图片来源网络，侵删）

适用人群：

获取软件： 由于 CS4 已停止销售,你需要从可靠的渠道获取安装包。
安装： 按照安装向导完成安装，在安装过程中,你可以选择安装的语言。
首次启动与工作区设置：
- 首次启动 Dreamweaver 时,会让你选择工作区布局。
- 推荐选择“设计器”，这是最经典、最常用的布局,包含了所有核心面板。
- 你可以通过顶部菜单栏的 窗口 -> 工作区布局 来切换不同的布局。

熟悉界面是高效工作的第一步，Dreamweaver CS4 的界面主要由以下几部分组成：

菜单栏： 包含所有命令，如文件、编辑、查看、插入、修改、站点、窗口、帮助等。
插入栏： 按类别（常用、布局、表单、数据、Spry 等）提供了快速插入网页元素的按钮，如图片、表格、链接、表单等。
文档工具栏： 位于文档窗口顶部，提供视图切换（代码、设计、拆分）、浏览器预览、文件管理、标题设置等功能。
文档窗口： 这是你的主要工作区,用于显示和编辑网页内容。
属性检查器： 这是最核心、最常用的面板，当选中页面上的某个元素（如一段文字、一张图片、一个表格）时，属性检查器会动态显示该元素的所有可设置属性（如文字大小、颜色、图片源、链接等）。
面板组： 位于右侧，包含多个功能面板，如：
- 文件： 管理站点文件，类似于 Windows 的资源管理器。
- CSS 样式： 创建和管理 CSS 样式表,是控制网页样式的核心。
- 应用程序： 用于数据库和服务器相关的高级开发。
- 标签选择器： 显示当前光标所在位置的 HTML 标签结构,可以快速选中父级或子级标签。

重要提示： 在 Dreamweaver 中，强烈建议先定义“站点”，再开始制作网页，这能确保所有链接、图片路径都正确无误。

在右侧的 “文件” 面板中,右键点击你的站点根文件夹。
选择 新建 -> HTML。
Dreamweaver 会在你的站点根目录下创建一个名为 untitled.html 的文件，你可以右键点击它，选择“重命名”，将其改为 index.html。index.html 是网站的首页文件。

在文档窗口中，将视图切换为 “设计” 视图。
点击页面顶部，输入“欢迎来到我的网站！”。
选中这段文字，在底部的 “属性检查器” 中：
- 将 “格式” 设置为 “标题 1” (<h1>)。
- 将 “格式” 设置为 “段落” (<p>)。
- 点击 “居中对齐” 按钮。
- 在 “文本颜色” 中选择一个你喜欢的颜色。
将光标移到下一行，点击 “插入” 栏的 “常用” 分类，点击 “图像” 按钮。
选择一张你准备好的图片，Dreamweaver 会自动将其存放到你之前设置的 images 文件夹中。
选中这张图片，在 “属性检查器” 中：
- 设置 “宽” 和 “高”（保持宽高比，否则图片会变形）。
- 在 “替代” 文本框中输入图片的描述,这有助于搜索引擎优化和屏幕阅读器识别。

恭喜！你已经用 Dreamweaver CS4 创建了你的第一个网页。

（图片来源网络，侵删）

在 CSS 布局普及之前，表格是网页布局的主要方式，表格主要用于展示结构化数据（如课程表、成绩单）。

CSS (Cascading Style Sheets) 是控制网页外观和布局的语言，Dreamweaver 对 CSS 的支持是其强大之处。

创建外部 CSS 文件（推荐）：
1. 在 “文件” 面板中右键，选择 新建 -> CSS 样式表，命名为 style.css。
2. 在 “CSS 样式” 面板中，点击链接外部样式表按钮，选择刚刚创建的 style.css 文件。
3. 你在 HTML 文件中创建的所有样式都会保存在 style.css 文件中,实现内容与样式的分离。
应用 CSS 样式：
（图片来源网络，侵删）
1. 在 “CSS 样式” 面板中，点击 “新建 CSS 规则” 按钮。
2. 选择 “类”，给类起一个名字，如 .text-red（注意类名前有点）。
3. 在下方设置属性，如 color: red;，font-size: 16px;。
4. 点击确定，回到设计视图，选中一段文字，在 “属性检查器” 的 “类” 下拉菜单中选择 .text-red,样式就应用上了。