Dreamweaver CS6 建站完整教程：从零开始创建你的第一个网站

本教程将涵盖以下核心步骤：

dreamweaver cs6建站教程
（图片来源网络，侵删）
  1. 准备工作： 安装与启动,理解工作区。
  2. 创建与管理站点： 这是最关键的一步，告诉 Dreamweaver 你的网站文件在哪里。
  3. 创建首页： 设计网站的第一页。
  4. 使用 Dreamweaver 的强大功能插入文本、图片和链接。
  5. 创建CSS样式： 让你的网站变得美观。
  6. 创建子页面： 复制和修改页面,构建网站结构。
  7. 发布网站： 将你的网站上传到服务器。

第一步：准备工作

  1. 安装与启动：

    • 确保你已经成功安装了 Adobe Dreamweaver CS6。
    • 双击桌面图标或从开始菜单启动 Dreamweaver CS6。

  2. 熟悉工作区：

    • 启动后，Dreamweaver 会让你选择一种工作区布局，对于新手，推荐选择 “设计器” 布局。
    • 你会看到一个由多个面板组成的窗口，主要分为三个部分：
      • 文件面板: 位于右侧,用于管理你网站的所有文件和文件夹。
      • 文档工具栏: 位于顶部，包含标题、视图切换按钮（代码/设计/拆分）和文件管理按钮。
      • 文档窗口: 中间最大的区域,是你设计和编辑网页的地方。
      • 属性检查器: 通常位于右下角，用于修改选中元素（如文本、图片）的属性。

第二步：创建与管理站点（至关重要！）

在 Dreamweaver 中做任何事之前，必须先定义一个站点，这相当于告诉 Dreamweaver：“我所有的网站文件都放在这个文件夹里”，这样它才能正确地管理文件路径、实现“上传”和“同步”功能。

  1. 创建本地文件夹：

    dreamweaver cs6建站教程
    （图片来源网络，侵删）
    • 在你的电脑上（D 盘或桌面）创建一个新的文件夹，命名为 my-website,这个文件夹将作为你网站的根目录。

  2. 在 Dreamweaver 中定义站点：

    • 点击顶部菜单栏的 站点 -> 新建站点。

    • 此时会弹出一个“站点设置对象”的对话框。

    • 选择“高级”设置（推荐新手）：

      • 在左侧菜单中，确保选中了 本地站点文件夹。

    • 设置站点名称：

      • 在右侧的 站点名称 输入框中，给你的网站起一个名字，我的个人作品集”，这个名字只是方便你识别,不会出现在网站上。

    • 选择本地站点文件夹：

      • 点击右侧文件夹图标，浏览并选择你刚刚创建的 my-website 文件夹。

    • 设置默认图像文件夹（可选但推荐）：

      • 勾选 默认图像文件夹，然后点击文件夹图标，在 my-website 文件夹内再创建一个名为 images 的文件夹，并选中它，以后你插入的图片会默认保存在这里,保持网站结构整洁。

    • 完成设置：

      • 检查所有设置无误后，点击 保存。

    • 成功标志： Dreamweaver 右侧的 “文件” 面板应该已经显示出了你的 my-website 站点结构，如果还没有，可以点击 查看 -> 映射站点 或按 F8 键来显示。

第三步：创建首页

网站的首页通常命名为 index.html 或 index.htm。

  1. 新建 HTML 文件：

    • 在 “文件” 面板中，右键点击你的站点根目录 my-website。
    • 选择 新建文件。
    • 一个名为 untitled.html 的文件会被创建，立即将它重命名为 index.html。注意： 一定要确保后缀名是 .html。

  2. 切换视图：

    • 在 “文档工具栏” 中，点击 设计 视图，这样你就可以在一个所见即所得的可视化环境中编辑页面,非常适合初学者。

第四步：添加内容

现在我们来为首页添加基本内容。

  1. 和文本：

    • 在 index.html 的编辑窗口中,直接输入文字，

      欢迎来到我的个人作品集
你好！我是张三，一名网页设计师。
这里展示了我的一些最新作品。

    • 选中“欢迎来到我的个人作品集”这一行，然后在 “属性检查器” 中，将 格式 设置为 标题 1。

    • 选中“你好！我是张三...”这一行，将格式设置为 段落。

  2. 插入图片：

    • 准备一张你自己的照片或作品截图，将它复制到你之前创建的 images 文件夹中。
    • 将光标定位在你想插入图片的位置。
    • 点击顶部菜单栏的 插入 -> 图像。
    • 在弹出的对话框中，浏览到 images 文件夹，选择你的图片，点击 确定。
    • 重要提示： Dreamweaver 弹出提示“该文件未在您的站点中...”，请选择 是，这样它会把图片复制到 images 文件夹中,并自动创建正确的路径链接。

  3. 创建链接：

    • 选中你想要添加链接的文本或图片，查看我的作品”。
    • 在 “属性检查器” 的 链接 输入框中，输入一个目标网页的文件名，portfolio.html（这个页面我们后面会创建）。
    • 在 目标 下拉菜单中，选择 _blank，这样当用户点击链接时,新页面会在一个新标签页中打开。

第五步：创建CSS样式（美化网站）

有了，但看起来很朴素，我们使用 CSS（层叠样式表）来美化它。

  1. 创建外部 CSS 文件：

    • 在 “文件” 面板中，右键点击站点根目录 my-website。
    • 选择 新建文件，并将文件重命名为 style.css，CSS 文件专门用来存放网站的样式。

  2. 链接 CSS 文件：

    • 打开 index.html 文件。
    • 在 “文档工具栏” 中，点击 代码 视图,切换到代码编辑模式。
    • 在 <head> 和 </head> 标签之间，插入以下代码：
      <link rel="stylesheet" type="text/css" href="style.css">
    • 这行代码的作用是告诉 index.html 页面，它的样式规则在 style.css 文件里。

  3. 使用 CSS 设计器面板（可视化方式）：

    • 切换回 设计 视图。
    • 如果右侧没有 CSS 设计器 面板，可以通过顶部菜单 窗口 -> CSS 设计器 打开它。
    • 添加新样式：
      • 在 CSS 设计器 面板中，点击 源 旁边的 号。
      • 选择 创建新CSS文件，确保文件名是 style.css，然后点击 确定。
    • 为 body 设置背景色：
      • 在 选择器 区域，点击 号，输入 body,然后回车。
      • 在 属性 区域，展开 背景 分类。
      • 点击 颜色 前的色块，选择一个你喜欢的背景色,比如浅灰色。
    • 设置样式：
      • 再次点击 号，输入 h1,回车。
      • 在 属性 区域，展开 文本 分类。
      • 修改 颜色（比如深蓝色）、字体大小（36px）、字体（宋体”、“微软雅黑”）。
      • 展开 方框 分类，为 **