第一部分：准备工作与核心概念

在开始之前，你需要了解几个核心概念,这会让你事半功倍。

dreamweaver创建网站
（图片来源网络，侵删）

  1. 本地开发环境 vs. 远程服务器

    • 本地开发环境：你的电脑，你可以在电脑上先建好网站的所有页面，测试无误后,再上传到互联网上。
    • 远程服务器：存放你网站文件的互联网空间（通常由虚拟主机服务商提供）。

  2. 网站根文件夹

    • 这是你的网站在电脑上的“大本营”，你网站所有的 HTML、CSS、图片、JavaScript 文件都应该存放在这个文件夹及其子文件夹中。
    • 最佳实践：在电脑的非系统盘（如 D 盘或 E 盘）创建一个专门的文件夹，D:\MyWebsite。

  3. 站点管理

    这是 Dreamweaver 的核心功能，通过“站点”功能，Dreamweaver 会知道你的“网站根文件夹”在哪里，并能智能地管理文件链接、路径,方便你进行上传下载。

    dreamweaver创建网站
    （图片来源网络，侵删）

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

这是最关键的第一步,请务必认真操作。

步骤 1：创建新的本地站点

  1. 打开 Dreamweaver。

  2. 在顶部菜单栏选择 站点 > 新建站点。

    dreamweaver创建网站
    （图片来源网络，侵删）

  3. 此时会弹出“站点设置对象”对话框,有两种方式创建站点：

    • 基本：向导式，适合初学者,会分步引导你完成设置。
    • 高级：专业模式，所有选项都在一个页面里,推荐使用。

我们以“高级”模式为例进行设置：

  1. 站点 选项卡

    • 站点名称：给你的站点起个名字，我的个人博客”，这个名字只在 Dreamweaver 内部使用,不会显示在网站上。
    • 本地站点文件夹：点击文件夹图标，选择你之前准备好的网站根文件夹（D:\MyWebsite）。这是最重要的一步！

  2. 服务器 选项卡

    • 如果你现在只想在本地制作网站，可以暂时跳过这一步，等网站做好后,再回来添加服务器信息进行上传。
    • 点击 号添加新服务器。
    • 基本 视图：
      • 服务器名称：起个名字，如“我的虚拟主机”。
      • 连接方法：选择 FTP (这是最常见的方式)。
      • FTP 地址：你的主机提供商给你的 FTP 服务器地址（如 ftp.yourdomain.com）。
      • 用户名 和 密码：你的 FTP 账号和密码。
      • Web URL：输入你的网站域名（如 http://www.yourdomain.com），这很重要，Dreamweaver 需要它来验证上传。
      • 测试 连接确保成功。
    • 勾选 启用文件检查 和 自动上传 等选项,可以提升效率。

  3. 版本控制 选项卡

    如果你使用 Git 等版本控制工具，可以在这里设置,初学者无需理会。

  4. 高级设置 选项卡

    • 默认图像文件夹：可以指定一个专门存放图片的子文件夹路径（如 images）,方便插入图片时默认打开到该目录。
    • 链接相对于：
      • 文档：推荐，链接路径是相对于当前 HTML 文件的，如果你移动文件,链接可能会断。
      • 站点根目录：强烈推荐！链接路径是相对于你的整个站点根目录的，无论你如何移动或重命名文件，只要它们在站点内，链接就不会断，这是最专业、最稳健的方式。
    • Web 服务器选项：确保这里也选择了正确的服务器。

  5. 点击 保存。

恭喜！你的 Dreamweaver 站点已经成功创建。

第三部分：创建网站文件和结构

我们来搭建网站的“骨架”。

  1. 打开文件面板

    • 在 Dreamweaver 右侧，找到 文件 面板,你应该能看到你刚才设置的站点根文件夹。

  2. 创建文件夹

    • 在文件面板中,右键点击站点根文件夹。
    • 选择 新建文件夹。
    • 创建以下常用文件夹来组织你的文件：
      • images：存放所有图片。
      • css：存放样式表文件（如 style.css）。
      • js：存放 JavaScript 文件（如 script.js）。

  3. 创建主页

    • 网站的主页通常命名为 index.html 或 index.htm。
    • 在文件面板中,右键点击站点根文件夹。
    • 选择 新建文件，并将其重命名为 index.html。

你的文件结构现在看起来应该是这样的：

D:\MyWebsite\
├── css\
├── images\
├── js\
└── index.html

第四部分：设计网页内容

现在我们可以开始设计 index.html 页面了，Dreamweaver 提供了多种视图：

  • 代码视图：直接编写 HTML、CSS、JavaScript 代码。
  • 设计视图：可视化编辑区域，所见即所得（注意：现代网页的复杂效果在设计视图中可能无法完美呈现）。
  • 实时视图：比设计视图更接近真实浏览器效果的预览,但不可编辑。
  • 拆分视图：强烈推荐！ 上半部分是代码，下半部分是实时视图，你可以一边写代码一边看到效果,效率极高。

使用拆分视图创建一个简单页面：

  1. 双击 文件 面板中的 index.html,在主编辑区打开它。
  2. 确保视图模式是 拆分。
  3. 在代码视图中，输入或修改 HTML 结构，Dreamweaver 有强大的代码提示功能。

示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">我的第一个网站</title>
    <!-- 引入外部 CSS 文件 -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <h1>欢迎来到我的网站</h1>
        <nav>
            <a href="#">首页</a> | <a href="#">关于我</a> | <a href="#">联系方式</a>
        </nav>
    </header>
    <main>
        <section>
            <h2>这是我的第一篇文章</h2>
            <p>这是一个段落，我可以写下任何我想分享的内容。</p>
            <img src="images/sample-image.jpg" alt="示例图片">
        </section>
    </main>
    <footer>
        <p>&copy; 2025 我的个人网站. 保留所有权利.</p>
    </footer>
    <!-- 引入外部 JavaScript 文件 (通常放在 body 结束标签前) -->
    <script src="js/script.js"></script>
</body>
</html>
  • 插入图片：在设计视图中，右键选择 图像 > 图像，然后浏览并选择 images 文件夹里的图片。
  • 创建链接：选中文字或图片，在属性检查器中点击文件夹图标，选择要链接到的 HTML 文件。
  • 设置 CSS 样式：
    • 方法一（推荐）：创建一个 css/style.css 文件，在代码中通过 <link> 标签引入（如上例），然后在 CSS 文件中编写样式规则。
    • 方法二：在设计视图中，选中元素，在右侧的 CSS 设计器 面板中直接添加和修改样式。

第五部分：预览与测试

  1. 实时预览：在拆分视图中,下半部分的实时视图会实时显示你的页面效果。
  2. 在浏览器中预览：
    • 按快捷键 F12。
    • 或在顶部菜单选择 文件 > 在浏览器中预览 > 预览在 [你的默认浏览器]。
    • 这会在你电脑的默认浏览器中打开一个静态版本的页面,效果最真实。

第六部分：上传网站到服务器

当你的网站在本地测试完毕后,就可以上传到互联网上了。

确保你在 **`站点设置