如何用DW制作HTML模板并实现下载功能？

核心概念

理解两个关键概念：

1. Dreamweaver 模板 (.dwt 文件)：

   • 这是一个特殊的 HTML 文件，扩展名是 .dwt。
   • 它定义了网站的“骨架”和“皮肤”，包含了所有页面共有的元素，比如页头、页脚、导航栏、Logo 等。
   • 在模板中,你可以将某些区域设置为可编辑区域，这些区域是最终网页制作者可以修改和填充内容的地方。

2. 基于模板的网页 (.html 文件)：

   • 这是通过 .dwt 模板生成的最终 HTML 页面。
   • 它继承了模板的所有布局和样式,但只能修改在模板中定义的“可编辑区域”。
   • 使用模板的好处是,当你需要修改所有页面的共同部分（比如修改页脚的版权信息）时，只需要修改 .dwt 模板文件，所有基于该模板的页面都可以一键更新，极大提高了效率。

详细步骤：从零开始制作并下载模板

第一步：准备工作（创建站点）

在 Dreamweaver 中使用模板，强烈建议你先定义一个站点，这有助于 DW 管理文件链接和资源。

1. 打开 Dreamweaver。
2. 点击顶部菜单栏的 站点 -> 新建站点。
3. 在弹出的窗口中,你可以选择“基本”或“高级”选项卡，对于新手，“基本”模式更友好。
   • 站点名称：给你的项目起个名字，我的模板项目”。
   • 本地站点文件夹：选择一个本地文件夹来存放你的所有网站文件。D:\MyWebsite。
4. 点击“完成”，你的站点就建立好了。

第二步：创建模板文件

1. 在 Dreamweader 右侧的 “文件” 面板中，右键点击你的站点根目录。
2. 选择 新建...。
3. 在弹出的“新建文档”窗口中，选择左侧的 模板 页面。
4. 在右侧,选择 HTML 模板。
5. 点击 创建。

Dreamweaver 会自动创建一个名为 untitled.dwt.html 的文件，并保存在你站点的根目录下，你可以立即在“文件”面板中重命名它，main_template.dwt。

第三步：设计模板布局并创建可编辑区域

你可以像编辑普通 HTML 页面一样来设计你的模板了。

1. 添加固定内容：

   • 在模板中,设计所有页面共有的部分。
   • 例如：创建一个页头，包含 Logo 和导航菜单；创建一个页脚，包含版权信息和联系方式。

2. 创建可编辑区域：

   • 这是最关键的一步,你需要划定出哪些部分是留给最终用户修改的。

     
     （图片来源网络，侵删）

   • 方法：

     • 将光标定位在你想设置为可编辑区域的位置。
     • 点击顶部菜单栏的 插入 -> 模板对象 -> 可编辑区域。
     • 或者,在右键菜单中选择 模板 -> 新建可编辑区域。

   • 例如：

     • 在页头下方,创建一个名为 EditRegion1 的可编辑区域，用于放置页面标题。
     • 在导航和页脚之间,创建一个名为 EditRegion2 的可编辑区域，用于放置页面的主要内容。
     • 在页脚上方,创建一个名为 EditRegion3 的可编辑区域，用于放置一些浮动内容或广告。

   • Dreamweaver 会用浅色高亮和标签（如 <!-- InstanceBeginEditable name="EditRegion2" -->）来标记可编辑区域。

第四步：保存模板

完成模板设计后,直接按 Ctrl + S 保存即可，DW 会自动保存为 .dwt 格式。

第五步：测试模板（可选但推荐）

在打包之前,最好先测试一下你的模板是否能正常工作。

1. 在“文件”面板中，右键点击你的 .dwt 模板文件。
2. 选择 从模板新建。
3. Dreamweaver 会根据你的模板生成一个 .html 文件，你可以修改其中的可编辑区域，然后保存这个新文件，看看效果是否符合预期。

第六步：打包模板供他人下载

这是你问题的核心,当模板制作完成后，你需要将它打包成一个文件，方便他人下载和使用。

1. 整理文件结构：

   • 在“文件”面板中，确保你的模板文件结构清晰，通常包含：
     • .dwt 模板文件
     • 一个或多个基于该模板的示例 .html 文件（强烈建议提供，方便用户理解）
     • images 文件夹（存放模板用到的图片）
     • css 文件夹（存放样式表）
     • js 文件夹（存放 JavaScript 文件）

2. 打包站点/文件夹：

   • 在“文件”面板中，选中你想要打包的整个文件夹（通常是你的站点根文件夹）。
   • 右键点击选中的文件夹。
   • 选择 压缩。
   • Dreamweaver 会为你生成一个 .zip 压缩文件。

3. 重命名并发布：

   • 找到生成的 .zip 文件，给它一个清晰的名字，我的精美网页模板.zip。
   • 这个 .zip 文件就是你制作好的、可供他人下载的 HTML 模板了，用户只需要下载它，解压后，用 Dreamweaver 打开 .dwt 文件，就可以开始创建新页面了。

给下载者的使用说明（非常重要！）

为了让下载者能顺利使用你的模板,你最好在 .zip 文件里附上一个 使用说明.txt 文件，内容可以包括：

1. 环境要求：需要 Adobe Dreamweaver 软件。
2. 如何使用：
   • 解压 .zip 文件。
   • 用 Dreamweaver 打开 .dwt 模板文件。
   • 修改固定内容（如 Logo、导航链接）。
   • 在可编辑区域中添加自己的内容。
   • 点击 文件 -> 保存，Dreamweaver 会提示你创建一个新的基于模板的 HTML 文件。
3. 图片说明：如果模板中使用了占位图，提醒用户替换成自己的图片。
4. 字体和图标：说明模板中使用的特殊字体或图标库（如 Font Awesome）的获取方式。

通过以上步骤,你就可以熟练地使用 Dreamweaver 制作专业、可复用的 HTML 模板，并将其打包分享给他人了。