第一部分：准备工作（打开和准备文件）

在开始修改之前,你需要先打开你的网页项目。

dreamweaver怎么修改网页
（图片来源网络，侵删）

创建或打开站点

“站点”是 Dreamweaver 的核心概念，它可以帮助你管理网站的所有文件（HTML、CSS、图片等）,确保链接和路径的正确性。

  • 新建站点:

    1. 打开 Dreamweaver。
    2. 点击顶部菜单栏的 站点 > 新建站点。
    3. 在弹出的窗口中，为你的站点起一个名字（我的个人网站”）。
    4. 选择 “本地文件夹” 选项卡，然后点击文件夹图标,选择你电脑上存放网站所有文件的那个文件夹。
    5. 点击“保存”,你的站点就设置好了。

  • 打开现有站点:

    1. 点击顶部菜单栏的 站点 > 管理站点。
    2. 在列表中选择你已有的站点，点击“编辑”或“完成”。

打开要修改的网页文件

在 Dreamweaver 右侧的 “文件” 面板中，你会看到你刚才设置的站点文件夹结构，找到并双击你想要修改的 HTML 文件（index.html）,它就会在编辑器中打开。

dreamweaver怎么修改网页
（图片来源网络，侵删）

第二部分：修改网页的三种主要方式

Dreamweaver 提供了三种视图模式,你可以根据需要选择最适合的一种。

可视化视图（最直观，适合初学者）

这是最简单的方式，所见即所得,直接在页面上点击和修改内容。

  1. 切换视图： 在 Dreamweaver 编辑器的顶部，确保你选择了 “实时视图” 按钮（看起来像一个地球仪），旁边还有 “实时视图” 和 “实时代码” 的组合视图,推荐使用这个组合。
  2. 编辑文本：
    • 直接点击页面上的文字，像在 Word 里一样直接输入、修改或删除。
    • 你可以使用顶部的 “属性检查器”（通常在右下角）来修改文字的格式，如字体、大小、颜色、加粗、斜体等。
  3. 插入图片：
    • 将光标放在你想要插入图片的位置。
    • 点击顶部菜单栏的 “插入 > 图像”。
    • 在弹出的窗口中，选择你电脑上的图片文件。最佳实践是： 先将图片复制到你的站点文件夹内，然后在“文件”面板中直接将图片拖拽到页面上。
  4. 插入链接：
    • 选中你想要添加链接的文字或图片。
    • 在“属性检查器”中，找到“链接”输入框。
    • 你可以：
      • 输入网址： https://www.google.com。
      • 链接到本站其他页面： 点击文件夹图标，在站点文件夹中选择另一个 HTML 文件。
      • 链接到邮箱： 输入 mailto:your-email@example.com。
  5. 插入表格、表单等：
    • 点击顶部菜单栏的 “插入”，你可以找到各种常用元素，如表格、div 标签、列表、表单等。

代码视图（最灵活，适合开发者）

如果你熟悉 HTML、CSS 或 JavaScript,代码视图可以让你进行精确控制。

  1. 切换视图： 点击编辑器顶部的 “代码视图” 按钮。
  2. 直接编辑代码：
    • 你会看到页面的源代码。
    • HTML： 修改 <p> 标签里的内容来改变段落文字，修改 <img> 标签的 src 属性来更换图片。
    • CSS： 你可以在 <style> 标签内或外部的 .css 文件中修改样式，body { background-color: #f0f0f0; }。
    • JavaScript： 修改 <script> 标签内的代码来添加交互功能。
  3. 代码提示： Dreamweaver 提供强大的代码提示功能，在你输入代码时会自动列出可用的标签、属性和函数,大大提高编码效率。

拆分视图（推荐，兼顾两者）

这是最常用、最高效的模式,你可以同时看到实时预览和源代码。

dreamweaver怎么修改网页
（图片来源网络，侵删）
  1. 切换视图： 点击编辑器顶部的 “拆分” 按钮。
  2. 工作方式：
    • 上半部分 是代码视图。
    • 下半部分 是实时视图。
    • 神奇之处在于： 当你在实时视图中点击一个元素（比如一个标题），上半部分的代码会自动高亮显示对应的 HTML 代码，反之，你在代码中点击一行，下半部分的实时视图中对应的元素也会被高亮,这让你能快速定位并理解代码结构。

第三部分：常见修改任务示例

任务1：修改网站的标题

显示在浏览器标签页上，对 SEO 很重要。

  1. 在 “拆分” 或 “代码” 视图下。
  2. 找到 <head> 和 </head> 标签之间的 <title>
  3. 修改 <title> 和 </title> 之间的文字。
<head>我的个人博客</title> <!-- 修改这里 -->
</head>

任务2：修改整个网页的背景颜色

这通常通过 CSS 来实现。

  1. 在 “拆分” 视图下。
  2. 在下半部分的实时视图中，点击页面空白处（通常是 <body> 标签）。
  3. 查看上半部分的代码，会高亮到 <body>
  4. 在 <body> 标签内添加 style 属性。
<body style="background-color: #e6f7ff;"> <!-- 修改这里 -->
    <!-- 页面内容 -->
</body>

更好的方法（推荐）： 修改外部的 CSS 文件。

  1. 在 “文件” 面板中，找到并打开你的 CSS 文件（通常是 style.css）。
  2. 在代码中找到 body 选择器，修改其 background-color 属性。
body {
    margin: 0;
    background-color: #e6f7ff; /* 修改这里 */
    font-family: Arial, sans-serif;
}

任务3：修改导航菜单

导航菜单通常是一系列链接。

  1. 在 “实时” 或 “拆分” 视图中,找到导航菜单部分。
  2. 直接修改链接的显示文字。
  3. 选中链接文字，在“属性检查器”中修改“链接”地址,确保指向正确的页面。
<nav>
    <a href="index.html">首页</a>
    <a href="about.html">关于我</a> <!-- 修改这里的文字和链接 -->
    <a href="contact.html">联系方式</a>
</nav>

第四部分：保存和预览

  1. 保存： 修改完成后，按 Ctrl + S (Windows) 或 Cmd + S (Mac) 保存文件，Dreamweaver 会自动保存 HTML 和相关的 CSS/JS 文件。
  2. 在浏览器中预览：
    • 点击工具栏上的 “在浏览器中预览” 按钮（地球仪图标），选择你常用的浏览器（如 Chrome, Firefox）。
    • 这会打开你的网页，让你看到最终的效果,确保所有修改都正确显示。

总结与建议

  • 新手入门： 从 “实时视图” 开始，先熟悉基本的文本、图片和链接操作。
  • 进阶学习： 尽快过渡到 “拆分视图”，这是理解网页结构和样式的最佳方式，尝试修改一些简单的 CSS 样式,感受代码和效果之间的联系。
  • 善用资源： Dreamweaver 的“属性检查器”是你最好的朋友,它会根据你选中的元素显示可以修改的属性。
  • 学习基础： 虽然 Dreamweaver 可以让你不写代码就做出网页，但花一点时间学习基础的 HTML 和 CSS 知识，会让你如虎添翼,能够解决更复杂的问题。

希望这个详细的指南能帮助你顺利使用 Dreamweaver 修改网页！