1. 下载/获取网页模板文件
  2. 在 Dreamweaver 中编辑这些文件

下面我将为你提供一份详细、分步的图文式指南。

如何用dw编辑网页模板下载
（图片来源网络，侵删）

第一部分：如何下载网页模板

在开始编辑之前，你首先需要获取模板文件,通常有以下几种途径：

从模板网站下载（最常见）

有很多网站提供免费的和付费的网页模板。

  • 推荐网站：

    • ThemeForest (付费，质量最高,种类最全)
    • TemplateMonster (付费,专业模板)
    • BootstrapZero (免费，基于 Bootstrap 框架)
    • HTML5 UP (免费，设计现代,响应式)
    • 国内平台： 站酷、UI中国、码市等也常有设计师提供模板。

  • 下载步骤：

    如何用dw编辑网页模板下载
    （图片来源网络，侵删）
    1. 选择模板： 访问上述任一网站,浏览并选择你喜欢的模板。
    2. 选择许可： 注意查看模板的许可协议,特别是商业使用和免费使用的区别。
    3. 下载文件： 点击“Download”按钮，下载的文件通常是一个压缩包（如 .zip 格式）。
    4. 解压文件： 将下载的 .zip 文件解压到一个你容易找到的文件夹中，解压后，你会看到一堆文件和文件夹,这就是模板的源代码。

使用 Dreamweaver 内置资源（仅限旧版）

如果你使用的是较旧版本的 Dreamweaver（如 CS6 或更早版本），它内置了一个“启动器”或“基本页”功能，可以快速生成一个包含基本结构的 HTML 页面。

  • 操作步骤（以 CS6 为例）：
    1. 打开 Dreamweaver。
    2. 在欢迎界面选择“新建” -> “HTML”。
    3. Dreamweaver 会创建一个非常基础的 HTML5 文档,你可以在此基础上进行编辑。
    • 注意： 这种方法提供的只是一个“骨架”，而不是一个完整的、有设计感的模板,现在更推荐从网上下载专业模板。

第二部分：如何在 Dreamweaver 中编辑网页模板

现在你已经有了模板文件，我们开始用 Dreamweaver 进行编辑。

步骤 1：准备工作 - 安装必要软件

  1. 安装 Dreamweaver： 确保你已经安装了 Adobe Dreamweaver（推荐 CC 版本）。
  2. 安装本地服务器（可选但推荐）： 如果你希望预览 PHP 或其他动态页面，需要安装本地服务器环境，如 XAMPP、MAMP (Mac) 或 WAMP (Windows)，对于纯静态 HTML/CSS/JS 编辑,这一步不是必须的。

步骤 2：在 Dreamweaver 中打开模板文件

  1. 启动 Dreamweaver。

  2. 点击顶部菜单栏的 “文件” -> “打开”。

  3. 在弹出的文件浏览器中，找到并选择你刚刚解压的模板文件夹中的 index.html 文件（或者首页文件，可能是 home.html 等），然后点击“打开”。

  4. 站点管理（非常重要！）：

    • Dreamweaver 会弹出一个提示，询问你是否要将此文件所在的文件夹定义为“站点”。强烈建议你选择“是”。
    • 为什么？ 定义站点后，Dreamweaver 能更好地管理你的所有文件（图片、CSS、JS），可以正确地使用“文件”面板进行拖拽链接,并能正确预览带有相对路径的网页。
    • 点击“是”，然后为你的站点起一个名字（如“我的模板网站”）,选择文件夹的路径即可。

步骤 3：认识 Dreamweaver 的界面

打开文件后，你会看到 Dreamweaver 的主要工作区域：

  • 文件面板： 通常在右侧，显示你整个站点的文件结构，你可以在这里直接点击打开、重命名或删除文件。
  • 文档工具栏： 在顶部，包含“代码”、“拆分”、“设计”三种视图切换按钮，以及“实时视图”、“实时代码”、“在浏览器中预览”等按钮。
  • 属性检查器： 通常在右下角，当选中页面上的某个元素（如文字、图片）时，这里会显示其属性,你可以直接修改。
  • 插入面板： 通常在左侧，提供插入各种元素（如图片、表格、链接）的快捷按钮。

步骤 4：开始编辑（核心内容）

编辑网页主要分为三大块：内容、样式、链接。

A. 编辑内容 (HTML)

  • 切换视图： 你可以在 “设计”视图（所见即所得，适合新手）和 “代码”视图（直接修改 HTML，适合精准控制）之间切换。“拆分”视图可以同时看到两者,非常推荐。
  • 修改文本： 直接在设计视图中点击文字，然后像在 Word 里一样修改它，也可以在代码视图中找到 <p>, <h1>, <h2> 等标签内的文本进行修改。
  • 替换图片：
    1. 在设计视图中点击你想要替换的图片。
    2. 在下方的 “属性检查器” 中，点击“源文件”旁边的文件夹图标。
    3. 在弹出的窗口中选择你自己的图片文件。建议： 将你的图片也放在站点文件夹内的一个 images 子文件夹中,这样网站上传后图片路径才不会出错。
    4. 你还可以在属性检查器中修改图片的“替代文本”（对 SEO 和无障碍访问很重要）、宽度和高度。
  • 添加/删除内容块： 模板通常由不同的区块组成（如导航栏、横幅、内容区、页脚），你可以通过代码视图找到对应的 <div> 或 <section> 标签，复制粘贴来添加新的内容块,或者直接删除不需要的块。

B. 修改样式 (CSS)

网页的外观（颜色、字体、间距、布局）都由 CSS 控制。

  • 打开 CSS 文件： 在 “文件”面板 中，找到并双击打开 css 文件夹里的 .css 文件（如 style.css）。
  • 使用 CSS 设计器： Dreamweaver 的 “CSS 设计器” 面板（通常在右侧）是修改样式的利器。
    1. 在 CSS 文件中，点击你想要修改的样式规则（.header 代表头部样式）。
    2. 在“CSS 设计器”面板中,你会看到该规则的所有属性。
    3. 你可以直接在这里修改 “背景”（颜色、图片）、“文本”（颜色、字体）、“布局”（宽度、高度、边距）等。
  • 使用代码提示： 在代码视图中，当你输入 CSS 属性时，Dreamweaver 会提供代码提示,提高效率。
  • 常见修改：
    • 改颜色： 找到 color 或 background-color 属性。
    • 换字体： 找到 font-family 属性。
    • 改间距： 找到 margin (外边距) 和 padding (内边距) 属性。

C. 修改链接

  • 文本/图片链接：
    1. 在设计视图中选中要设置链接的文字或图片。
    2. 在下方的 “属性检查器” 中，找到“链接”输入框。
    3. 输入目标地址，可以是 http://www.example.com 这样的外部链接，也可以是 about.html 这样的内部页面链接。
    4. 你还可以设置“目标”（如 _blank 表示在新标签页打开）和“标题”（鼠标悬停时显示的提示文字）。
  • 导航菜单链接： 导航菜单通常是多个列表项（<li>）的集合，重复上述步骤,为每个导航项设置正确的链接即可。

步骤 5：保存和预览

  1. 保存： 每次修改后，按 Ctrl + S (Windows) 或 Cmd + S (Mac) 保存文件。
  2. 预览： 这是最关键的一步，确保你的修改是正确的。
    • 方法一（推荐）： 点击文档工具栏上的 “在浏览器中预览” 按钮（地球图标），选择你的浏览器（如 Chrome, Firefox）。
    • 按 F12 键，这是 Dreamweaver 的快捷预览键。
    • 检查效果： 在浏览器中检查所有内容、样式和链接是否都正常工作。

总结与最佳实践

  1. 备份！备份！备份！ 在开始大规模修改前，务必将整个模板文件夹复制一份作为备份，如果改坏了,可以从备份恢复。
  2. 从简单开始： 先修改文字、图片和颜色等基础内容,等熟悉了再尝试修改复杂的布局和样式。
  3. 学习基础： 如果你想更深入地自定义，建议花一点时间学习基础的 HTML 和 CSS 知识，这会让你在 Dreamweaver 中如虎添翼。
  4. 善用资源： Dreamweaver 有非常详细的帮助文档和大量在线教程,遇到问题时可以随时搜索。

遵循以上步骤，你就可以轻松地使用 Dreamweaver 下载并编辑任何一个网页模板了,祝你玩得开心！