这个过程在 Dreamweaver 中主要通过其内置的 “资源” (Assets) 面板和 “CSS 设计器” (CSS Designer) 面板来完成，下面我将为你提供一个详细的、分步的指南，从准备工作到最终实现。
（图片来源网络，侵删）
核心思想
切图的核心不是简单地“裁剪”，而是“规划与重构”，你需要思考：
- 哪些部分需要切图？ 不是所有设计稿上的图形都需要切图，纯色背景可以用 CSS 的
background-color实现；渐变背景可以用 CSS 的linear-gradient实现；复杂的图标或带特殊效果的按钮才需要切图。 - 如何切最合理？ 为了提高网页加载速度和适应不同屏幕，我们会使用一种叫做“CSS Sprites”（雪碧图）的技术，将多个小图标合并成一张大图，然后通过 CSS 的
background-position来显示正确的部分，对于需要缩放的元素，我们会使用“切片”功能来导出不同分辨率的版本（如 1x, 2x）以支持高清屏（Retina Display）。
准备工作
- 安装软件： Adobe Dreamweaver (推荐较新版本，如 CC 2025 或更高)。
- 准备设计稿： 一个已经完成的网页设计稿，最好是 PSD、AI 或 PNG 格式，这里我们以最常见的 PSD 文件为例。
- 创建站点： 在 Dreamweaver 中，首先创建一个新的站点，这是非常重要的一步，可以确保你的所有文件（HTML, CSS, 图片）路径正确。
- 打开 Dreamweaver ->
站点->新建站点。 - 给站点命名,并选择一个本地根文件夹（用于存放项目文件）。
- 确保服务器选项为“本地/网络服务器”。
- 打开 Dreamweaver ->
详细操作步骤
我们将通过一个实例来学习：将一个包含 Logo、导航栏、内容区和页脚的网页设计稿进行切图。
第一步：导入设计稿
- 在 Dreamweaver 中，新建一个 HTML 文件（
index.html）。 - 将你的 PSD 设计稿文件直接拖拽到 Dreamweaver 的编辑窗口中，Dreamweaver 会自动解析并显示设计稿。
- 设计稿会出现在一个
<div>容器中，Dreamweaver 会自动生成一个<style>标签来设置这个容器的样式，使其完整显示你的设计稿。
第二步：使用“资源”面板进行规划与切图
这是最关键的一步,我们将使用 Dreamweaver 的“资源”面板来管理和导出图片。
-
打开“资源”面板：
（图片来源网络，侵删）- 通过菜单栏
窗口->资源，或者按快捷键F11。
- 通过菜单栏
-
创建图像文件夹：
- 在“资源”面板中，确保你选中了“图像”类别（图标是一个小风景画）。
- 点击面板右下角的“新建文件夹”图标，创建一个名为
images的文件夹。所有切出来的图都应该放在这个文件夹里。
-
切图与导出（使用“切片”功能）：
- 在 Dreamweaver 的编辑窗口中，选中设计稿上的某个需要切图的部分，Logo。
- 右键点击选中的区域,选择 “创建切片” (Create Slice)。
- 你会看到,选中的区域被一个绿色的矩形框覆盖，这就是“切片”。
- 重复此操作，为所有需要独立导出的图片（如按钮、图标、特殊背景）创建切片，Logo、一个带阴影的按钮、一个社交媒体图标。
-
优化并导出切片：
- 所有切片创建完成后,点击菜单栏的
文件->导出-> “导出切片...” (Export_slices...)。 - 在弹出的对话框中,进行以下设置：
- 图像预览： 选择合适的格式（如 PNG-24 适合透明背景，JPEG 适合照片，GIF 适合简单图形和动画）。
- 设置： 调整图片质量、颜色等。
- 切片：
- 导出选项： 选择“仅导出切片”。
- 设置： 非常重要！ 选择“将图像放入子文件夹”，并指定文件夹名称为
images，这样所有切出来的图片都会自动存放在你之前创建的images文件夹中。
- 点击“保存”。
- 你的
images文件夹里就多了所有切好的图片文件。
- 所有切片创建完成后,点击菜单栏的
第三步：编写 HTML 和 CSS 代码
我们要用 HTML 和 CSS 来用这些切好的图片重新构建页面，而不是直接使用 Dreamweaver 生成的那个巨大容器。
-
清理 HTML：
- 删除 Dreamweaver 自动生成的那个包含整个设计稿的
<div>和<style>，我们从头开始写干净的代码。 - 根据你的页面结构,编写基本的 HTML5 标签。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的网页</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <div id="logo"> <!-- 这里放 Logo 图片 --> </div> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">服务</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> </header> <main> <!-- 页面主要内容 --> </main> <footer> <!-- 页脚内容 --> </footer> </body> </html> - 删除 Dreamweaver 自动生成的那个包含整个设计稿的
-
编写 CSS：
- 创建一个名为
style.css的文件，并在 HTML 中链接它。 - 使用“CSS 设计器”面板来编写和组织你的 CSS。
- 如何应用切好的图：
- Logo： 使用
<img>标签。#logo { width: 200px; /* 设置Logo的宽度 */ height: 60px; /* 设置Logo的高度 */ background-image: url('images/logo.png'); /* 引用切好的Logo图片 */ background-repeat: no-repeat; /* 不重复背景 */ background-position: center; /* 居中显示 */ }或者直接使用
<img>标签（更简单，推荐）：<div id="logo"> <img src="images/logo.png" alt="公司Logo"> </div> - 按钮： 使用
<div>或<a>标签，通过background-image设置。.my-button { width: 150px; height: 40px; background-image: url('images/button.png'); background-repeat: no-repeat; text-indent: -9999px; /* 将文字移出可视区域，但保留可访问性 */ } - 图标： 如果使用了“CSS Sprites”技术（即多个图标在一张图上），你需要精确计算
background-position。.icon-facebook { width: 30px; height: 30px; background-image: url('images/social-icons.png'); background-position: 0 0; /* 假设Facebook图标在左上角 */ } .icon-twitter { width: 30px; height: 30px; background-image: url('images/social-icons.png'); background-position: -30px 0; /* 假设Twitter图标在Facebook右边 */ }
- Logo： 使用
- 创建一个名为
第四步：使用“CSS 设计器”面板辅助布局
“CSS 设计器”面板是 Dreamweaver 的强大工具，可以让你通过可视化方式添加和修改 CSS 属性。
- 在 CSS 设计器中，你可以为你的 HTML 元素（如
#logo,.my-button）添加规则。 - 在“源”部分，你可以创建新的 CSS 文件或附加到现有文件。
- 在“属性”部分，你可以直接修改
Box（盒模型）、Text（文本）、Background（背景）等属性，当你修改Background中的Image时，可以直接从“资源”面板中选择你刚刚切好的图片，Dreamweaver 会自动帮你生成正确的url()路径。
重要技巧与注意事项
- 善用 CSS： 不要把什么都切成图，能用 CSS 实现的（纯色、渐变、阴影、圆角），就尽量用 CSS，这能大大减少 HTTP 请求，加快页面加载速度。
- 响应式切图： 对于需要在不同屏幕尺寸下显示的图片，考虑使用“响应式图像”技术，可以切出不同尺寸的版本（如
small.jpg,medium.jpg,large.jpg），然后使用<picture>标签或srcset属性来根据屏幕宽度加载合适的图片。 - 命名规范： 给切片和文件夹起一个有意义的、规范的名称（如
btn-primary.png,icon-user.svg），方便后期维护。 - Dreamweaver 的辅助功能： Dreamweaver 的“实时视图”和“快速编辑”功能可以帮助你边写代码边预览效果，非常高效。
用 Dreamweaver 切图的完整流程可以概括为：
- 创建站点，打好基础。
- 导入设计稿，作为参考。
- 使用“资源”面板，通过“创建切片”功能规划并导出所需的图片文件到
images文件夹。 - 编写干净、语义化的 HTML 结构。
- 使用“CSS 设计器”或直接编写 CSS，将切好的图片应用到对应的 HTML 元素上，完成页面重构。
虽然现在前端开发更倾向于使用像 Figma、Sketch 这样的设计工具配合 VS Code 等代码编辑器，但 Dreamweaver 的这种可视化辅助切图和编码的方式，对于初学者或者需要快速将设计稿转化为原型的人来说，依然是一个非常实用和高效的工具。
