Dreamweaver 网站制作全攻略：从入门到上线

Dreamweaver 是一个功能强大的“所见即所得”（WYSIWYG）网页编辑器，它既允许你像使用 Word 一样可视化地设计网页，也允许你直接编写和修改 HTML、CSS 和 JavaScript 代码,非常适合初学者和专业人士。

dreamweaver网站制作教程
（图片来源网络，侵删）

第一部分：准备工作与项目规划

在打开 Dreamweaver 之前,做好规划会让后续工作事半功倍。

明确网站目标与内容

  • 目标： 你的网站是做什么的？是个人博客、作品集、企业官网还是电商展示？
  • 网站需要哪些页面？（首页、关于我们、服务/产品列表、联系方式）
  • 结构： 画一个简单的网站结构图,明确页面之间的链接关系。

收集素材

  • 准备好所有页面的文字、标题、段落等。
  • 视觉素材： 收集高质量的图片、Logo、图标等，建议将它们统一放在一个文件夹中,方便管理。
  • 品牌色： 确定网站的主色调和辅助色。

安装 Dreamweaver

确保你已经从 Adobe 官网安装了最新版的 Dreamweaver，并登录了你的 Adobe 账户。

第二部分：创建和管理站点

这是 Dreamweaver 最核心、最强大的功能之一。“站点”是 Dreamweaver 管理你所有网站文件和链接的大本营。

步骤 1：定义新站点

  1. 打开 Dreamweaver，点击顶部菜单栏的 “站点” > “新建站点”。
  2. 此时会弹出“站点设置对象”对话框，我们可以选择 “基本” 或 “高级” 选项卡，对于初学者，“基本” 选项卡更友好。

步骤 2：填写站点信息

  • 基本设置

    dreamweaver网站制作教程
    （图片来源网络，侵删）
    • 站点名称： 给你的网站起一个名字，我的第一个网站”，这个名字只在 Dreamweaver 内部使用,不会显示在网站上。
    • 本地站点文件夹： 点击文件夹图标，选择一个你电脑上的空文件夹作为网站的根目录。强烈建议不要使用中文或特殊符号命名路径（D:\MyWebSite）,所有网站的文件都将存放在这个文件夹里。

  • 高级设置（可选，但推荐）

    • 在左侧选择 “服务器”。
    • 点击 号添加一个新服务器。
    • 基本设置：
      • 服务器名称： 任意命名，如“我的测试服务器”。
      • 连接方法： 选择 “本地/网络”。
      • 服务器文件夹： 选择与你“本地站点文件夹”完全相同的路径，这是关键！它告诉 Dreamweaver,你电脑上的这个文件夹就是你的网站服务器。
      • Web URL： 输入你的网站在本地预览时的地址，通常是 http://localhost/你的文件夹名/。
    • 勾选 “测试” 按钮，如果显示“已成功连接到服务器”,说明设置正确。
    • 点击 “保存”。

步骤 3：认识“文件”面板

  • Dreamweaver 右侧的 “文件” 面板就是你的站点管理器。
  • 它会显示你刚才定义的站点文件夹结构，你可以在这里创建、重命名、删除文件和文件夹。
  • 最佳实践：
    • 创建一个 images 文件夹,专门存放图片。
    • 创建一个 css 文件夹,存放样式表文件。
    • 创建一个 js 文件夹，存放 JavaScript 文件。
    • 网站的首页文件通常命名为 index.html。

第三部分：创建和编辑页面

步骤 1：创建新页面

  1. 在 “文件” 面板中,右键点击站点根目录。
  2. 选择 “新建文件”，将其命名为 about.html（关于我们页面）。
  3. 同样方法创建 contact.html（联系我们页面）。

步骤 2：设置页面属性

  1. 打开 index.html 文件。
  2. 在 “属性”检查器（通常在右下角）中，你可以设置：
    • 这是浏览器标签页上显示的文字，非常重要（如 <title>我的首页 - 我的公司</title>）。
    • 页面背景颜色/背景图片： 点击页面空白处,可以在属性检查器中设置。
    • 文本颜色： 默认的文本颜色。

步骤 3：可视化编辑

  • 直接输入： 像在 Word 里一样,直接点击页面输入文字。
  • 插入元素：
    • 点击顶部菜单栏的 “插入”，可以插入各种元素，如：
      • 图像： 图像 > 图像，选择你的图片文件，Dreamweaver 会自动将图片复制到 images 文件夹下。
      • 表格： 用于布局数据。
      • Div 标签： 用于布局页面区块（这是现代网页布局的核心）。
      • Hyperlink（超链接）： 选中文字或图片，在属性检查器的“链接”框中输入目标文件名（如 about.html）。

第四部分：使用 CSS 美化网站

只使用 HTML，网站会非常朴素，CSS（层叠样式表）负责网站的“外观”。

步骤 1：创建 CSS 文件

  1. 在 “文件” 面板的 css 文件夹上右键，选择 “新建文件”。
  2. 将其命名为 style.css。

步骤 2：链接 CSS 文件

  1. 打开 index.html 文件。
  2. 切换到 “代码”视图。
  3. 在 <head> 和 </head> 标签之间，添加以下代码：
    <link rel="stylesheet" href="css/style.css">

    这行代码告诉浏览器，去寻找并应用 css 文件夹下的 style.css 文件来美化当前页面。

步骤 3：使用 CSS 设计器

  1. 回到 “设计”视图。
  2. 打开右侧的 “CSS 设计器” 面板。
  3. 在 “源” 选项卡中，点击 号，选择 “附加现有 CSS 文件”，然后选择你刚刚创建的 style.css。
  4. 你可以在 “CSS 设计器” 中为页面元素添加样式了。
    • 创建新规则： 点击 body 标签，在属性面板中设置全局字体、颜色等。
    • 使用类选择器： 在代码视图中给某个 <h1> 标签添加 class="my-title"，然后在 CSS 设计器中创建 .my-title 规则，设置其字体大小、颜色、对齐方式等。

第五部分：使用“实时视图”与“实时代码”

这是 Dreamweaver 的一大亮点,让你在可视化编辑时也能精确控制代码。

dreamweaver网站制作教程
（图片来源网络，侵删）
  1. 实时视图： 这是你的设计画布,所见即所得。
  2. 实时代码视图： 在实时视图下方，有一个“实时代码”标签，它会实时显示你当前在“实时视图”中操作的 HTML 代码。
  3. 使用技巧：
    • 在“实时视图”中，将鼠标悬停在一个元素（比如一个标题）上,该元素的代码会高亮显示。
    • 点击高亮代码，Dreamweaver 会自动跳转到代码视图中对应的 <h1> 标签，你可以直接在这里修改或添加 class。

第六部分：响应式设计与“媒体查询”

为了让网站在不同设备（手机、平板、电脑）上都有良好的显示效果,我们需要使用响应式设计。

步骤 1：使用“流体网格布局”

  1. 在创建新文件时，选择 “流体网格布局”。
  2. Dreamweaver 会为你创建一个包含断点的框架，你可以为手机、平板和桌面分别设计布局。
  3. 注意： 这种方法较老,现代开发更推荐下面这种灵活的方式。

步骤 2：手动添加媒体查询（推荐）

  1. 在你的 style.css 文件中,你可以使用媒体查询来针对不同屏幕尺寸应用不同样式。

  2. 想让屏幕宽度小于 768px（平板和手机）时,导航栏变成垂直堆叠：

    /* 默认样式（桌面端） */
nav {
  display: flex;
  justify-content: space-around;
}
/* 平板和手机端 */
@media (max-width: 768px) {
  nav {
    flex-direction: column; /* 改为垂直排列 */
    align-items: center;
  }
}

  3. 切换到 “实时视图”，拖动浏览器窗口的边缘来改变窗口大小,你就能实时看到样式变化的效果。

第七部分：预览与测试

  1. 实时预览： 在“实时视图”中直接查看效果。
  2. 在浏览器中预览：
    • 按 F12 键。
    • 或点击工具栏上的 “在浏览器中预览” 图标。
    • Dreamweaver 会用你系统默认的浏览器打开你的网站。
  3. 测试： 在不同的浏览器（Chrome, Firefox, Edge, Safari）和不同尺寸的设备上测试你的网站,确保一切正常。

第八部分：发布网站

当你的网站完成后，需要将它上传到网络服务器上,才能让其他人访问。

前提条件：

  • 你已经购买了一个 域名（如 www.mywebsite.com）。
  • 你购买了一个 虚拟主机/服务器。

步骤 1：在 Dreamweaver 中设置远程服务器

  1. 打开 “站点 > 管理站点”，选择你的站点，点击 “编辑”。
  2. 切换到 “服务器” 选项卡。
  3. 点击 号,添加一个新服务器。
  4. 基本设置：
    • 服务器名称： 如“我的远程服务器”。
    • 连接方法： 选择 “FTP”（最常用）。
    • FTP 地址： 你的主机服务商提供的 FTP 地址。
    • 用户名： 你的 FTP 账户名。
    • 密码： 你的 FTP 密码。
    • 根目录： 你的网站在服务器上的存放路径（通常是 public_html 或 www）。
  5. 勾选 “测试”,确保连接成功。
  6. 重要： 在下方的 “站点设置” > “服务器” 中，勾选你刚刚添加的远程服务器，并将其设置为 “Web URL”，这样，当你上传文件后，Dreamweaver 会自动用这个 URL 来预览。

步骤 2：上传文件

  1. 在 “文件” 面板中，确保你选择了“本地”视图,可以看到你电脑上的所有文件。
  2. 点击工具栏上的 “连接” 按钮,连接到远程服务器。
  3. 连接成功后，会显示“远程”视图,你可以看到服务器上的文件。
  4. 选中本地站点中的所有文件和文件夹，点击 “上传文件” 图标。
  5. 等待上传完成,你的网站就正式上线了！

总结与进阶

恭喜你！你已经掌握了使用 Dreamweaver 制作网站的全过程。

  • 回顾核心： 站点管理是基础，HTML/CSS，可视化编辑是效率，FTP上传是发布。
  • 进阶学习：
    • 深入学习 HTML5 和 CSS3： 了解语义化标签和更强大的样式功能。
    • 入门 JavaScript： 使用 Dreamweaver 的“代码提示”功能学习 JS,为网站添加交互效果。
    • 使用 Bootstrap 或 Foundation： 这些是流行的 CSS 框架,可以帮你快速构建响应式网站。
    • 使用“模板”功能： 创建一个包含导航栏和页脚的模板，然后基于模板生成所有页面,实现一键更新。

Dreamweaver 是一个功能强大的工具，但最终决定网站质量的，还是你对网页设计原理、用户体验和前端技术的理解，多练习，多探索,你很快就能成为一名出色的网页设计师！