Dreamweaver 网页制作新手教程

本教程将分为以下几个部分：

dreamweaver做网页教程
（图片来源网络，侵删）
  1. 第一部分：准备工作 - 了解 Dreamweaver 和创建项目。
  2. 第二部分：认识界面 - 熟悉 Dreamweaver 的工作区。
  3. 第三部分：创建第一个网页 - 使用“实时视图”和“代码视图”。
  4. 第四部分：添加内容 - 文本、图片、列表等。
  5. 第五部分：创建超链接 - 连接页面和外部资源。
  6. 第六部分：使用 CSS 美化网页 - 设置样式,让网页变漂亮。
  7. 第七部分：创建一个简单的个人主页（实战练习） - 综合运用所学知识。
  8. 第八部分：预览、保存与上传 - 查看成果并发布到网络。

第一部分：准备工作

什么是 Dreamweaver？

Adobe Dreamweaver (简称 DW) 是一款专业的网页设计和开发工具，它最大的特点是提供了三种视图模式,让你可以：

  • 可视化设计：像在 Word 里一样拖拽元素来布局。
  • 代码编写：直接手写 HTML、CSS、JavaScript 等代码。
  • 实时预览：在写代码的同时,所见即所得地看到效果。

这种“所见即所得”（WYSIWYG）的特性,特别适合初学者入门。

安装与启动

确保你已经安装了 Adobe Dreamweaver（推荐使用较新版本，如 CC 2025 或更高），安装完成后,启动程序。

创建一个新站点（非常重要！）

在开始制作网页之前，强烈建议你先创建一个“站点”，站点就像一个项目文件夹，Dreamweaver 会用它来管理你的所有网页、图片、样式表等文件,这样可以避免很多路径错误。

dreamweaver做网页教程
（图片来源网络，侵删）
  1. 启动 Dreamweaver 后，点击顶部菜单栏的 站点 -> 新建站点。
  2. 在弹出的窗口中，切换到 站点 选项卡。
  3. 站点名称：给你的项目起一个名字，我的个人主页”。
  4. 站点文件夹：点击文件夹图标，选择一个你电脑上的空文件夹作为你网站的根目录，在桌面创建一个名为 MyWebsite 的文件夹,然后选择它。
  5. 点击 保存。

你已经创建了一个本地站点，Dreamweaver 的右侧面板会显示 文件 面板，里面就是你的 MyWebsite 文件夹,以后所有的网页文件都应该保存在这个文件夹里。

第二部分：认识 Dreamweaver 的工作区

Dreamweaver 的界面看起来可能有点复杂,但核心区域就那么几个。

  1. 菜单栏：包含了所有命令。
  2. 工具栏：包含“文件”、“编辑”、“查看”、“插入”、“修改”、“站点”、“窗口”、“帮助”等按钮，以及最重要的 实时视图、代码视图、拆分视图 切换按钮。
  3. 文档窗口：这是你设计和编写代码的主区域。
  4. 插入面板：方便地插入各种网页元素，如图片、表格、链接等。
  5. CSS 设计器：用于创建和管理 CSS 样式。
  6. 文件面板：管理你站点内的所有文件。
  7. 属性检查器：当选中页面上的某个元素（如图片、文字）时，这里会显示该元素的属性,并允许你修改。

第三部分：创建第一个网页

  1. 在右侧的 文件 面板中，右键点击你的站点文件夹 (MyWebsite)。
  2. 选择 新建文件。
  3. 将这个新文件重命名为 index.html。注意： 网站首页通常命名为 index.html 或 index.htm。

index.html 文件会在文档窗口中打开。

三种视图模式切换

在文档工具栏的右上角,你会看到三个切换按钮：

dreamweaver做网页教程
（图片来源网络，侵删）
  • 代码视图：显示纯代码，对于初学者，可以先不用管它,但了解它很重要。
  • 实时视图：所见即所得的编辑模式，你可以直接在这里输入文字，就像在 Word 里一样,这是初学者最常用的模式。
  • 拆分视图：强烈推荐初学者使用！ 它将屏幕分为上下两部分，上面是代码，下面是实时视图，当你修改上面的代码时，下面的效果会实时更新；反之亦然,这是学习代码和效果的最好方式。

点击 拆分视图。

第四部分：添加内容

在 实时视图 或 拆分视图 的下半部分,我们来添加一些基本内容。

和文本

  • 在光标位置，直接输入 欢迎来到我的个人主页。
  • 按回车键换行，输入 这是一个用 Dreamweaver 制作的简单网页。
  • 按回车键，输入 HTML 教程学习。

你会发现，<p> 标签（段落标签）会自动出现在上方的 代码视图 中，这就是 Dreamweaver 的智能之处。

添加图片

  1. 准备一张图片（比如一张你的照片），命名为 my_photo.jpg。
  2. 将这张图片复制到你之前创建的站点文件夹 MyWebsite 中。
  3. 回到 Dreamweaver,将光标放在你想要插入图片的位置。
  4. 在顶部菜单栏，点击 插入 -> 图像 -> 图像。
  5. 在弹出的窗口中，选择你刚刚复制到 MyWebsite 文件夹里的 my_photo.jpg，然后点击 确定。

图片就插入成功了，你可以选中图片，下方的 属性检查器 会显示图片的宽度和高度等信息，你可以在这里修改图片大小（注意：直接修改宽高会拉伸图片，建议在图片编辑软件中调整好尺寸后再插入）。

第五部分：创建超链接

超链接是网页的灵魂，让我们给“HTML 教程学习”这几个字加上一个链接,指向一个知名的教程网站。

  1. 用鼠标选中“HTML 教程学习”这段文字。
  2. 在下方的 属性检查器 中，你会看到一个 链接 的输入框。
  3. 在输入框中，输入目标网址，https://www.w3school.com.cn
  4. 按 Enter 键或点击其他地方。

当你把鼠标移到这段文字上时，鼠标会变成小手形状，点击它就会跳转到 W3School 网站。

第六部分：使用 CSS 美化网页

现在我们的网页内容有了，但样式很单调，CSS（层叠样式表）就是用来美化网页的，Dreamweaver 的 CSS 设计器 面板非常强大。

创建一个 CSS 文件

  1. 在右侧的 文件 面板中，右键点击站点文件夹，选择 新建文件。
  2. 将文件重命名为 style.css。

链接 CSS 文件

我们需要告诉 index.html 页面，要使用 style.css 这个样式表。

  1. 切换到 index.html 的 代码视图。
  2. 在 <head> 和 </head> 标签之间，输入以下代码：
    <link rel="stylesheet" href="style.css">

    Dreamweaver 也可以可视化操作：在 插入 菜单中找到 HTML -> 文件头部标签 -> 链接，然后在弹出的窗口中填写 style.css。

使用 CSS 设计器添加样式

  1. 确保 index.html 文件是当前打开的文件。
  2. 打开右侧的 CSS 设计器 面板。
  3. 点击 源 旁边的 号，选择 附加现有 CSS 文件，然后选择你刚刚创建的 style.css 文件。style.css 就和你的页面关联起来了。

让我们来美化一下标题。

  1. 在 CSS 设计器 面板中，点击 选择器 下方的 号，创建一个新的选择器，命名为 .main-title。（注意， 开头的是类选择器）。
  2. 创建后，在 属性 区域（通常在下方），展开 文本 分类。
  3. 颜色：点击颜色框，选择一个你喜欢的颜色,比如深蓝色。
  4. 字体大小：输入 36px。
  5. 字体粗细：选择 bold（粗体）。
  6. 文本对齐：选择 center（居中）。

回到 index.html 的实时视图，选中你的标题 欢迎来到我的个人主页，然后在 属性检查器 的 类 下拉菜单中，选择你刚刚创建的 .main-title。 是不是立刻变了颜色、大小和样式？这就是 CSS 的威力。

第七部分：实战练习：创建一个简单的个人主页

我们把学到的知识整合起来,创建一个更完整的页面。

目标： 创建一个包含“关于我”、“我的爱好”和“联系方式”的页面。

  1. 结构：使用列表来组织内容。

    • 在 index.html 中，输入 关于我,按回车。
    • 输入 我的爱好,按回车。
    • 输入 联系方式,按回车。
    • 选中这三行，点击菜单栏 格式 -> 列表 -> 无序列表,它们会变成带项目符号的列表。

  2. 美化：

    • 在 style.css 中，为 <body> 标签添加一个背景色，在 CSS 设计器中创建一个 body 选择器，然后添加一个 背景 属性,选择一个浅灰色。
    • 区域设置一个居中的白色背景框，创建一个 .container 类，设置宽度（如 800px）、背景色（白色）、内边距（20px）和外边距（margin: 20px auto;）。
    • 在 index.html 的实时视图中，选中所有内容，然后在属性检查器中为其添加 container 类。
    • 继续用 CSS 美化列表、链接、段落等。

第八部分：预览、保存与上传

预览你的网页

  • 在 Dreamweaver 中预览：按快捷键 F12，Dreamweaver 会在你默认的浏览器中打开你的网页,这是最常用的预览方式。
  • 实时预览：确保你处于 实时视图,所见即所得。

保存文件

养成随时保存的好习惯，可以使用快捷键 Ctrl + S (Windows) 或 Cmd + S (Mac)。

上传到服务器（发布网站）

当你想把网站放到互联网上让别人访问时,就需要上传到服务器。

  1. 你需要准备：一个网站服务器空间（虚拟主机）和 FTP 信息（主机地址、用户名、密码）,这些通常由你的网络服务提供商提供。
  2. 在 Dreamweaver 中设置：
    • 打开 站点 -> 管理站点。
    • 选择你的站点，点击 编辑。
    • 切换到 服务器 选项卡。
    • 点击 号，选择 FTP。
    • 填写你的 FTP 服务器信息。
  3. 上传文件：
    • 设置好后，在右侧的 文件 面板中，点击 连接 按钮。
    • 连接成功后,你会看到远程服务器上的文件列表。
    • 选中本地站点文件夹中的所有文件，点击 上传 按钮。

上传完成后,你的网站就可以通过域名访问了！

总结与进阶

恭喜你！你已经掌握了使用 Dreamweaver 制作网页的基本流程。

  • 核心思想：先建站点，再写页面，用 CSS 美化,最后发布。
  • 学习路径：
    1. 熟练掌握 HTML 标签（标题、段落、列表、图片、链接等）。
    2. 深入学习 CSS 选择器、盒模型、定位、Flex/Grid 布局等。
    3. 了解一点 JavaScript,可以让你的网页更生动。
    4. 学习响应式设计,让你的网页在手机和电脑上都能完美显示。

Dreamweaver 是一个强大的工具，但记住，它只是一个工具，真正驱动网页的是 HTML、CSS 和 JavaScript 这三门核心技术，多练习，多看代码,你很快就能成为一名出色的网页设计师！