核心概念：为什么在模板中要特别注意路径？

  1. 模板的复用性：模板文件（.dwt）本身不会被直接浏览，它只是一个“模具”，通过它创建的页面（如 index.html, about.html）会继承模板的结构。
  2. 路径的相对性：相对路径（如 images/logo.png, ../css/style.css）是基于当前文件所在的位置来计算的。
  3. 问题所在：模板文件和通过它生成的页面文件，不在同一个文件夹层级。
    • 模板文件通常存放在一个专门的文件夹，/Templates/。
    • 生成的页面文件存放在网站的根目录或其子目录中，/index.html。

如果你在模板中直接写死一个相对路径，images/logo.png，

dreamweaver 模板 相对路径
（图片来源网络，侵删）
  • 当你编辑模板时，Dreamweaver 会认为 images 文件夹是相对于 /Templates/ 文件夹的。
  • 但当生成 index.html 页面时，浏览器会认为 images 文件夹是相对于 根目录的。

这就会导致路径错误，图片、链接、样式等无法正确加载。

最佳实践：使用 Dreamweaver 的“站点根目录相对路径”

这是解决模板路径问题的最推荐、最可靠的方法，它让所有路径都从你定义的网站根目录开始计算,从而避免了路径层级错乱的问题。

如何设置和使用？

第一步：确保你已正确定义 Dreamweaver 站点

在开始任何操作前，请务必通过 站点 -> 新建站点，正确设置你的本地站点文件夹，Dreamweaver 需要知道你的网站根目录在哪里，才能正确计算“站点根目录相对路径”。

dreamweaver 模板 相对路径
（图片来源网络，侵删）

第二步：插入资源时，选择“站点根目录相对路径”

当你需要在模板中插入图片、链接、CSS 或 JavaScript 文件时,请遵循以下步骤：

  1. 插入图片：

    • 将光标放在模板中需要插入图片的位置。
    • 点击 插入 -> 图像 或使用常用面板的图像图标。
    • 在弹出的“选择图像源文件”对话框中,找到你的图片。
    • 关键步骤：在对话框的下方，找到 “相对于” 选项。
    • 从下拉菜单中，选择 “文档”（默认，错误的做法）或 “站点根目录”（正确的做法）。
    • 选择“站点根目录”后，路径会自动变成类似 /images/logo.png 的形式。
    • 点击“确定”。

  2. 创建链接：

    dreamweaver 模板 相对路径
    （图片来源网络，侵删）
    • 选中需要添加链接的文本或对象。
    • 在属性检查器的“链接”框中,点击文件夹图标浏览文件。
    • 同样，在弹出的对话框底部，将“相对于”设置为 “站点根目录”。
    • 路径会变成 /about.html 或 /products/item1.html。

  3. 链接外部 CSS/JS 文件：

    • 将光标放在 <head> 标签内。
    • 点击 插入 -> HTML -> 链接到外部文件。
    • 选择你的 CSS 或 JS 文件。
    • 在对话框底部，将“相对于”设置为 “站点根目录”。
    • 生成的代码会是 <link href="/css/style.css" rel="stylesheet" type="text/css">。

为什么“站点根目录相对路径”在模板中如此强大？

  • 一致性：无论模板文件在 /Templates/ 多深，生成的页面在根目录还是子目录，所有路径的起点都是网站根目录 ,路径永远不会出错。
  • 可移植性：当你把整个网站文件夹（从站点根目录开始）上传到服务器时，所有基于 的路径都会自动指向服务器上的正确位置,无需做任何修改。

其他路径类型及在模板中的使用

文档相对路径

这是默认的路径类型，格式如 ../images/logo.png 或 css/style.css。

  • 在模板中的问题：如前所述，非常不推荐在模板的主体内容（可编辑区域）中使用，因为它依赖于文档的当前位置,而模板和生成页面的位置不同。
  • 特例：在模板的可选区域中 有一种情况可以安全使用文档相对路径，那就是在模板的可选区域或可编辑标签属性中，你可能想让一个背景图片路径在基于不同模板的页面中有所不同，你可以设置一个可选区域，其中包含一个 style 标签，使用 这样的路径，因为这个路径是相对于最终生成的 HTML 文件的,而不是模板文件本身。

绝对路径

格式如 https://www.yourwebsite.com/images/logo.png。

  • 在模板中的使用：
    • 优点：100% 准确,永远不会因为文件移动而失效。
    • 缺点：无法在本地离线工作,且会使代码变得冗长。
  • 适用场景：
    • 指向外部网站的链接（如 href="https://www.google.com"）。
    • 指向 CDN 上的资源（如 href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"）。
    • 当你网站的图片资源托管在另一个域名上时。
  • 不适用场景：网站本地的资源（图片、CSS、JS），应优先使用“站点根目录相对路径”。

总结与最佳实践清单

路径类型 格式示例 在模板中的推荐度 说明
站点根目录相对路径 /images/logo.png ⭐⭐⭐⭐⭐ (强烈推荐) 处理模板内部链接和资源的黄金标准，确保本地和服务器上路径都正确。
文档相对路径 ../images/logo.png ⭐ (不推荐) 容易出错，仅在特定的高级场景（如可选区域）下谨慎使用。
绝对路径 https://... ⭐⭐ (特定场景使用) 仅用于指向外部网站或 CDN 资源，本地开发时无法使用。

操作清单：

  1. [必须] 在 Dreamweaver 中正确设置你的站点（站点 -> 管理站点）。
  2. [必须] 在模板中插入任何资源（图片、链接、CSS、JS）时，务必在“选择文件”对话框中将“相对于”设置为“站点根目录”。
  3. [推荐] 养成检查代码的习惯，在模板代码中，你看到的应该是 <img src="/images/logo.png"> 而不是 <img src="images/logo.png">。
  4. [可选] 如果链接的是同一目录下的文件，可以使用简化的文档相对路径，如 href="page.html"，这通常也能工作，但为了统一性，使用 /page.html 更佳。

遵循“站点根目录相对路径”的原则，你就可以彻底告别因模板路径问题而导致的图片不显示、链接失效等烦恼了。