Dreamweaver 8.0网页制作教程从哪学？-贝博恩创新科技网

Dreamweaver 8.0 网页制作入门教程

什么是 Dreamweaver 8.0？

（图片来源网络，侵删）

Dreamweaver 是一款由 Adobe 公司（当时是 Macromedia）开发的“可视化网页编辑器”，它最大的特点是：

准备工作

软件安装：你需要先安装 Dreamweaver 8.0，由于是老软件，可以在一些怀旧软件网站或资源站找到安装包和序列号。注意：请务必从安全可靠的来源下载，并注意安装过程中的安全提示。
新建项目文件夹：在你的电脑上新建一个文件夹，my-first-website，之后我们做的所有网页文件和图片都放在这个文件夹里，方便管理。

认识 Dreamweaver 8.0 的工作界面

打开 Dreamweaver 8.0，新建一个 HTML 文件，你会看到几个主要区域：

（图片来源网络，侵删）

菜单栏：包含所有命令，如“文件”、“编辑”、“查看”、“插入”等。
工具栏：常用快捷按钮，如“新建”、“打开”、“保存”、“在浏览器中预览”等。
文档窗口：这是你设计和查看网页的主要区域，你可以在这里看到网页的最终效果。
属性检查器：这是最核心的工具之一，当选中文本、图片、表格等元素时，这里会显示该元素的所有属性（如字体大小、颜色、图片源、链接等），你可以直接在这里修改。
面板组：位于右侧，包含各种面板，如“文件”、“插入”、“CSS 样式”等，可以点击面板名称进行折叠和展开。

目标：制作一个包含标题、一段文字和一张图片的简单网页。

步骤 1：创建和保存站点

“站点”是 Dreamweaver 的核心概念，它告诉 Dreamweaver 你的网站文件存放在哪里，便于管理链接和资源。

步骤 2：新建 HTML 页面

（图片来源网络，侵删）

点击菜单栏的 “文件” -> “新建...”。
在弹出的窗口中,选择 “常规” 选项卡 -> “基本页” -> “HTML”，然后点击“创建”。
一个空白页面出现了,立即保存它！点击 “文件” -> “保存”，将文件命名为 index.html。（网站首页通常命名为 index.html 或 default.html），因为你已经设置了站点，Dreamweaver 会自动把它保存到你指定的 my-first-website 文件夹中。

步骤 3：添加网页标题 会显示在浏览器窗口的标题栏，也是搜索引擎优化的重要部分。

步骤 4：在页面中输入内容

直接在文档窗口（默认是“设计”视图）中点击，然后像打字一样输入内容。

步骤 5：插入图片

步骤 6：设置图片属性

步骤 7：预览你的网页

现在我们的网页很朴素,让我们用 CSS（层叠样式表）来美化它。

方法 1：使用“属性检查器”快速设置文本样式

这是最简单的方法,适合初学者。

方法 2：使用“CSS 样式”面板（更专业的方法）

这种方法可以把样式和内容分离,是现代网页设计的标准。

打开右侧的 “CSS 样式” 面板（如果没有，可以通过“窗口”菜单打开）。
点击面板下方的 “新建 CSS 规则” 按钮。
在弹出的对话框中：
- “选择器类型”：选择“类”。
- “名称”：输入一个你自己的名字，前面必须有一个点，.main-title。
- “定义在”：选择“仅对该文档”。
- 点击“确定”。
接下来会弹出“.main-title 的 CSS 规则定义”窗口，在这里你可以设置更详细的样式：
- 在 “分类” 列表中选择 “类型”。
- 在右侧设置：
  - Font-family：选择字体。
  - Font-size：设置字号（建议用 px 或 em，如 24px）。
  - Color：设置颜色。
  - Font-weight：选择 bold（粗体）。
- 点击“确定”。
回到你的页面,选中标题文字，在“属性检查器”的“类”下拉菜单中，选择你刚刚创建的 .main-title的样式立刻就改变了！