Photoshop CS6与Dreamweaver CS6网页设计实战 三合一完美入门指南

在网页设计领域，图像处理与页面构建是两项核心技能。Adobe Photoshop CS6 和 Dreamweaver CS6 作为经典的创意工具组合，至今仍是许多设计师入门网页设计的首选。本文将带领你了解如何将这两款软件“三合一”运用，从视觉效果到代码实现，高效完成一个网页设计项目。

一、三大环节：Photoshop设计、切图与Dreamweaver布局

所谓“三合一”，即设计稿绘制、切片输出与网页排版三个阶段融为一体。Photoshop负责视觉创意与素材处理，Dreamweaver负责HTML/CSS布局，两者通过切片与图片素材紧密衔接。

1. 用Photoshop CS6绘制网页效果图

打开Photoshop CS6，新建一个宽度为1200像素、高度自定的RGB画布。根据网页风格，使用图层、蒙版、滤镜等工具设计页头、导航栏、内容区和页脚。建议养成命名图层组的习惯，如“header”“nav”“banner”，以便后续切图时快速定位。

尤其要注意的是，Photoshop CS6中的“图层复合”功能可以保存不同页面状态，适合向客户展示方案。设计完成后，务必对所有素材进行校对，确保字体、播放按钮等元素的显示效果一致。

2. 精确切图：从PSD到网页元素

切图是连接PS与DW的桥梁。在Photoshop CS6中，使用“切片工具”划分需要导出为图片的区域。原则是：

• 背景色、纯色文字无需切片，可用CSS实现；
• Logo、图标、渐变背景、特殊字体图案…必须切出为PNG/GIF/JPEG；
• 同类图标可切在一张图上，用CSS Sprite技术合并，减少请求。

依次点击“文件 > 存储为Web所用格式”，选择PNG-24（带透明）或JPEG（照片类），调整优化设置，然后导出“HTML和图像”。你会得到images文件夹和一个包含表格的初始HTML——避免使用这种表格布局，按住Alt键导出图像时选择仅“图像”*以只通过图片文件夹交付设计素材。我们推荐只导出“图像”，因为稍后会在Dreamweaver中手动书写clean HTML结构。

3. 骨架构建：Dreamweaver CS6网页排版快速上手

在Dreamweaver CS6中，全新建档（快捷键Ctrl+N），选择HTML类型，HTML5格式可选，但注意CS6中如果以.html生成，语言声明一般为HTML5 <!doctype html>。切换至“代码”或“拆分”视图，首次可用鼠标在“设计”区域可视化建立DIV+CSS容器层。基本流程：
1）建立文档结构：header、nav、banner、content、footer统一设#page{ width: 960px; margin: auto; }，或1100px自适应。利用CSS面板在 Dreamweaver界面底部设置背景、浮动与对应宽度和高度得到外部构造。背景图片填 psd背景颜色的基调等按照 design complete视觉行实现均匀达到层次立体效果可见部分。如果要让一块区域即有两个背景色的渐变方式，通常只需另加样式文件的CSS方式批量定义宽度或自由高度的伸缩适应页面长短自动。`html