本地站点与远程服务器

在开始之前,必须理解 Dreamweaver 的工作方式：

dreamweaver链接网站
（图片来源网络，侵删）
  1. 本地站点：这是您在电脑上创建和编辑的网站文件（HTML, CSS, 图片等），所有开发工作都在这里完成。
  2. 远程服务器：这是存放您网站并使其能被互联网用户访问的服务器（由阿里云、腾讯云、GoDaddy 等服务商提供）。

Dreamweaver 的核心功能就是管理本地站点和远程服务器之间的文件同步。

第一步：设置站点（至关重要！）

在 Dreamweaver 中进行任何操作前，必须先定义一个站点，这能确保 Dreamweaver 知道您的文件结构，并正确处理路径和文件同步。

  1. 打开 Dreamweaver，点击顶部菜单栏的 站点 -> 新建站点。

  2. 站点设置 对话框会弹出，这里有几个关键部分需要填写：

    dreamweaver链接网站
    （图片来源网络，侵删）

    • 基本设置

      • 站点名称：给您的站点起一个容易识别的名字（“我的公司官网”），这个名字只在 Dreamweaver 内部使用，不会显示在网站上。
      • 本地站点文件夹：点击文件夹图标，选择您网站文件在电脑上存放的根目录（D:\MyWebsite）。请确保这个文件夹是空的，或者只包含您的网站文件。

    • 服务器（这是连接远程服务器的关键）

      • 在左侧点击 服务器，然后点击右下角的 号。

      • 基本选项卡：

        dreamweaver链接网站
        （图片来源网络，侵删）
        • 服务器名称：给服务器起个名字（“我的生产服务器”）。
        • 连接方法：根据您的服务器类型选择，最常见的是 FTP，其他选项如 SFTP（更安全）、WebDAV、本地/网络等。
        • FTP 地址：您的 FTP 服务器地址（ftp.yourdomain.com 或服务器的 IP 地址）。
        • 用户名：您的 FTP 登录用户名。
        • 密码：您的 FTP 登录密码。
        • 根目录：非常重要！ 这是您网站文件在服务器上的顶级文件夹，通常会是 /public_html/, /www/, /httpdocs/ 或 。请咨询您的服务器提供商确认正确的根目录。
        • Web URL：您网站的完整网址（https://www.yourdomain.com），Dreamweaver 会用这个来预览您的页面。

      • 高级选项卡：

        • 服务器模型：如果您的网站使用 PHP、ASP 等动态技术，需要在这里选择，如果是纯静态网站，可以忽略。
        • “保存时将文件上传至服务器”：强烈建议取消勾选此项，建议在所有文件都编辑完毕后，手动点击“上传”按钮，以避免上传不完整的文件。

    • 版本控制（可选）：如果您使用 Git 等版本控制系统，可以在这里配置。

    • 站点地图（可选）：可以设置首页文件。

  3. 完成所有设置后,点击 保存。

第二步：在页面中创建链接

站点设置完成后,就可以在具体的 HTML 页面中创建链接了，打开一个 HTML 文件，有以下几种常用方法：

使用“属性”面板（最直观）

  1. 在设计视图中,选中您想要添加链接的文本或图片。
  2. 打开 窗口 -> 属性 以确保属性面板可见。
  3. 在属性面板的 链接 输入框中，输入链接地址。
    • 链接到本地文件：点击右侧的文件夹图标，在弹出的对话框中选择您站点内的另一个 HTML 文件（如 about.html），Dreamweaver 会自动使用相对路径（如 about.html）。
    • 链接到外部网站：直接输入完整的网址（如 https://www.google.com），必须包含 http:// 或 https://。
    • 链接到页面内的锚点：如果页面很长，可以创建锚点链接，首先在目标位置插入一个“命名锚记”（菜单 插入 -> 命名锚记），然后链接地址写成 #锚点名（如 #top）。

使用“插入”菜单

  1. 将光标放在您想要插入链接的位置。
  2. 点击顶部菜单栏的 插入 -> Hyperlink。
  3. 在弹出的对话框中,填写链接信息，然后点击 确定，这个方法和方法一类似，只是操作路径不同。

直接在代码视图中编辑

如果您熟悉 HTML，可以直接切换到 代码 视图，找到需要添加链接的 <a> 

<!-- 链接到本地文件 -->
<a href="about.html">关于我们</a>
<!-- 链接到外部网站 -->
<a href="https://www.adobe.com/dreamweaver" target="_blank">访问 Adobe 官网</a>
<!-- target="_blank" 表示在新标签页中打开链接 -->
<!-- 链接到页面内的锚点 -->
<a href="#contact">联系我们</a> <!-- 点击后跳转到页面内 ID 为 "contact" 的元素 -->

第三步：上传和同步网站

当您在本地站点中编辑完所有文件后,需要将它们上传到远程服务器，才能让其他人访问。

  1. 在 Dreamweaver 右下角，找到 文件 面板（如果没看到，请通过 窗口 -> 文件 打开）。
  2. 在文件面板的顶部,您会看到一个下拉菜单，可以选择您的本地站点。
  3. 点击左侧的 展开以查看本地和远端站点 图标（双向箭头）。
  4. 界面会分为两列：
    • 左侧：您的本地文件。
    • 右侧：您的远程服务器文件（一开始可能是空的）。
  5. 连接到服务器：在右侧面板的顶部，点击 连接到远端服务器 图标（一个闪电/插头符号），如果您的设置正确，Dreamweaver 会开始连接，并显示服务器上的文件列表。
  6. 上传文件：
    • 上传单个文件：在左侧选中一个或多个文件/文件夹，然后点击右侧面板顶部的 上传文件 图标（向上的箭头）。
    • 获取最新文件（如果您在其他地方修改了服务器文件）：在右侧选中文件，点击 获取文件 图标（向下的箭头）。
    • 同步：点击 同步 按钮，这是最强大的功能，可以让您比较本地和远程的差异，然后选择仅上传、仅获取或两者都做，确保两边文件完全一致。

总结与最佳实践

  1. 永远先设置站点：这是所有工作的基础，能避免很多路径问题。
  2. 使用相对路径链接本地文件：链接同一站点内的文件时，让 Dreamweaver 自动生成相对路径（如 images/logo.png），这样无论您的网站放在哪个服务器目录下，链接都能正常工作。
  3. 外部链接用绝对路径：链接到其他网站时，务必使用完整的 https://... 地址。
  4. 谨慎使用“保存时自动上传”：建议手动上传，以防止上传未完成的文件或错误文件。
  5. 善用“同步”功能：在项目开始或结束时，运行一次同步，确保本地和远程文件一致。
  6. 使用实时视图：在 Dreamweaver 中，您可以使用 实时视图 来预览页面效果，它就像在浏览器中看到的一样，非常方便。

通过以上步骤,您就可以熟练地使用 Dreamweaver 来管理您的网站文件并创建各种链接了。