Dreamweaver CS6案例素材拆解：从HTML/CSS改样式到响应式布局实战

简介：这套案例素材与人民邮电出版社出版的《网页设计与制作——Dreamweaver CS6标准教程（第二版）》配套，面向网页设计新手与课程学习者，旨在通过按章节实操将HTML、CSS等理论知识转化为真实页面。压缩包共1190个文件，以550个jpg、331个gif、116个png等图像资源为主，同时包含90个html页面、17个css样式表、js脚本、swf动画以及少量音频视频文件，整体大小44.95MB，覆盖了从页面结构搭建到样式美化、多媒体嵌入所需的各类素材。目前已有3038人学习使用，适合需要边看边练、以完整案例巩固Dreamweaver CS6关键操作的读者。通过实际调用这些素材，学习者能深入练习HTML5基础标记、CSS布局、表单交互、响应式设计等知识点，并参照书中步骤产出完整网站作品；在反复实践中，还能提升排错与优化能力，为独立完成网页设计与制作打下坚实基础。

1. 这个 Dreamweaver CS6 案例素材包，到底值不值得你花时间解开

很多人拿到《网页设计与制作——Dreamweaver CS6标准教程（第二版）》配套的案例素材.zip，第一反应都是把它解压开，双击某个 index.html，看到一个完整网页，然后关上窗口，心想：这不就是现成的网站吗？照着抄一遍又能学到什么？这个反应我见过太多次，也是对这套素材最大的误读。案例素材不是给你当成品用的，是给你当“底盘”改的——每一章的案例都保留了 HTML 结构与 CSS 样式的完整对应关系，你改一处颜色、挪一排导航、把固定宽度改成响应式布局，效果马上就在旁边显示出来。它解决的真正问题是网页设计入门时反馈链路太长：不会写代码的人不敢动手，会写一点的人又懒得从零搭页面。适合正在上网页设计课的学生、想快速补一遍 CSS 的从业者，以及需要维护一批旧页面又没时间重构的人。Dreamweaver CS6 本身已经老旧，但这套“看成品、拆代码、改参数、看效果”的学习方式，放到今天依然好用。

2. 拆开 zip：目录结构怎么看、素材要怎么归位才不翻车

2.1 先做对一件事：解压到纯英文路径再动手

拿到 zip 后最常见的失败先于学习发生：直接右键解压到桌面，生成一长串“网页设计与制作——Dreamweaver CS6标准教程（第二版）案例素材”这样的中文目录。初看一切正常，html 能打开，CSS 也能加载。一旦你开始创建站点、定义根目录或者插入新图片，问题就冒出来了——CS6 的站点缓存对中文路径支持一向不稳，浏览器的 file:// 协议访问中文目录时又会出现 URL 转义，图片和样式表时好时坏，甚至出现“页面能开但 CSS 全裸”的玄学现象。所以第一步不是解压，而是先把目标路径想好。

# 建议：先在磁盘根目录建一个短路径，再解压 # 在 D 盘创建纯英文目录（不带空格，更不要带中文和破折号） mkdir D:\web\dwcs6 # 解压 zip 到该目录（Windows 上也可以右键压缩包 -> 解压到指定文件夹） # 解压后检查是否解出了双层目录： dir D:\web\dwcs6 # 如果看到 D:\web\dwcs6\网页设计与制作——Dreamweaver CS6标准教程（第二版）案例素材\... # 说明解压产生了嵌套，把内层所有文件移动到 D:\web\dwcs6 下再继续

Windows 下解压容易产生嵌套目录，这里用两个命令就能查出来。mkdir只是先把目录建出来，解压时不要选“解压到当前文件夹”，而是明确指定解压目标，否则多半会生成一层和压缩包同名的壳。后面那条dir是校验用：如果根目录下只有一个文件夹却看不到 index.html 或 chapter01 这一类目录，就是套了壳，把内层文件全部移出来再操作。路径深度控制在两到三级以内，D:\web\dwcs6这种已经足够。

为什么纯英文路径这么重要？中文系统里 Dreamweaver CS6 写站点缓存时按系统 ANSI 编码处理路径，而 HTML 文件里的链接是按 UTF-8 或页面声明的编码读取，两套编码对同一个中文字符生成的字节不一样，于是出现“资源明明在，但偏偏加载不出来”的情况。这不是素材包坏了，是路径编码在多环节传递时对不上。换成英文目录名，这个坑直接绕开，成本最低。

2.2 读懂素材包的两类目录结构：按章分目录还是按站点分目录

第二版案例素材通常延续教材配套资源最常见的组织方式，根目录下要么按“章”切分，要么按“站点”切分，两种结构的用法完全不一样。

按章分目录的结构长这样：chapter01、chapter02……每章目录下有一个或几个独立案例，案例自带 index.html、css、images，甚至可以单独打开运行。这种结构适合“学一章做一章”，站点根目录直接指向当前章，章与章互不干扰，最适合新手逐个击破。按站点分目录的结构则更接近真实项目：目录下有几个完整小站，每个站里多个 html 页面，页面之间用相对路径互相跳转，公共样式和图片放在站点的共用资源目录里。这种结构练的是“整站制作”，但要求先把站点定义做对，否则常见的结果就是首页能看、二级页面全是乱样式。

怎么快速判断自己拿到的是哪一种？看根目录。如果根目录下直接放着 index.html 或 .dwt 模板文件，多半是站点式；如果满眼都是 chapter01、lesson01 这类数字目录，就是章节式。第二版素材在改版时一般会保留旧版里还能用的案例，把一批过时的表格布局页面替换成 HTML5 语义化结构，目录编号可能和你手上的章节目录对不上，优先以 readme.txt 或“使用说明”里写的对应关系为准。

注意：如果根目录下找到了 readme.txt，先打开它。里面通常会写明每个案例适用的章节、设计稿来源和素材打包说明，能省下大量猜目录的时间。

2.3 分清 html、css、images、psd 各自的作用边界

新手面对案例素材常犯的一个错，是分不清哪些文件可以随便改、哪些文件改了也白改。按常见素材包里的文件类别列一张表，对照着看就不会下错手。

psd 文件是很多人忽略的宝藏。第二版素材里提供案例首页的设计稿源文件时，通常的练习路径是先用 Photoshop 改设计，再按切图规范输出成网页用的 jpg/png，放回 images 目录替换旧图。这样“设计能力”和“前端还原能力”能同时练到，而不是只在 HTML 里换颜色。对第一次接触这套素材的人，我的建议是：第一个案例只动 css，不要动 html 结构。css 改错了，删掉那一行就能恢复；html 里的标签嵌套一旦改乱，后面每一步都会被带偏。css 才是这套素材留给你的后悔药。

3. 在 Dreamweaver CS6 里跑通第一个案例：站点定义、实时预览与第一次改样式

3.1 新建站点指向解压目录：三个关键字段决定后面所有路径

打开素材里的 chapter01 目录，很多人做的第一件事是直接双击 index.html——浏览器确实能开，但这一步绕过了整个学习流程的核心：站点定义。Dreamweaver CS6 里的“站点”不是一个部署概念，它只是告诉开发环境“你的项目根目录在哪”。站点面板里的文件树、相对地址的解析、CSS 设计器的资源列表，全部以这个根为基础。根不对，后面所有相对路径全错，而错误的表现千奇百怪。

站点名称：DWCS6_Ch01 本地根文件夹：D:\web\dwcs6\chapter01 默认图像文件夹：D:\web\dwcs6\chapter01\images

这是我在 CS6 里建局部站点最常用的填写方式。站点名称随意，但建议带上章号，多个站点并存时一眼能认出；本地根文件夹必须指到含 index.html 的那一层，指进 css 或 images 属于方向性错误；默认图像文件夹选 images，作用是以后插入新图时自动生成相对路径，不会把图片地址写成 file:/// 的绝对路径。如果素材是站点式结构，根目录要指到最外层站点目录，而不是某一章。

每章建一个独立站点这条建议，对新手尤其重要。有人图省事，只建一个大站点指向整个素材包根目录，结果站点面板里同时躺着几十个 index.html，找目标文件全靠翻，改到一半还容易改错文件。学习阶段宁可多维护几个“局部站点”，也别用一个大站点把自己绕晕。

3.2 用代码视图 + 实时视图交替改页面，少踩一半坑

站点定义好之后，双击站点面板里的 index.html，页面会打开在 CS6 的编辑区。接下来是工作习惯的问题：很多人默认停留在“设计视图”里改页面，把这里当成 Word 用。设计视图对完全不懂代码的人确实友好，但它会把你的操作“翻译”成代码，而翻译结果经常不像人写的——拖一下图片，img 标签里多出一排 width/height 属性；敲两下回车，塞出一堆没必要的<p>和<br>。学网页设计，我更推荐用“拆分”视图：上半是代码，下半是实时效果，改一行立即看到结果。

基础操作链路是这样：在拆分视图中，光标点到 css 文件里某个属性的数值处直接改数字；或者切到 index.html 的代码区，改完按 Ctrl+S 保存，再把鼠标点回下面的实时预览区，页面会按最新的 CSS 刷新。F12 随时召起系统默认浏览器做终检，但这一步是用来确认兼容性的，不是每改一个字号的都要开一次浏览器。

提示：CS6 的实时视图基于旧版 WebKit 内核，显示效果只能当参考。最终验收场景必须是系统浏览器（Chrome 或 Edge 都行），CS6 里看着对、浏览器里崩版的情况在旧案例里非常常见，原因在第 4 章单独说。

外部样式表保存后，实时视图同样会自动更新，不需要重新打开页面。但如果你动了站点面板里的文件结构，比如移动了 css 目录，就必须重新进一次实时视图，否则加载的还是旧路径。

3.3 动手改第一个样式：从换横幅颜色到调间距

找一个案例里最显眼的横幅区域——绝大多数素材案例会有一个顶部 banner，CSS 里对应 .banner 类。改样式先从这里下手，因为它的视觉效果跨度大，颜色一变整个页面的气质都变，初学者最容易获得正反馈。

/* 素材案例中的横幅区域样式，按你实际打开的案例修改类名 */ .banner { width: 960px; /* 固定宽度，改百分比可实现流式布局 */ height: 320px; /* 高度决定横幅整体比例 */ background-color: #2a5caa; /* 主色调，改成 #c00 立刻变警示风 */ color: #ffffff; /* 文字颜色，深色背景配白字最稳 */ line-height: 320px; /* 单行文字垂直居中的简写技巧 */ text-align: center; /* 水平居中 */ } .banner h1 { font-size: 24px; /* 字号，建议用 px 起步 */ letter-spacing: 2px; /* 字间距，改大一点有标题气场 */ }

逐个参数说：width 改成 100% 再配合 max-width: 960px，能同时获得“移动端不溢出”和“桌面端不变形”两个好处；height 在固定宽度时代没问题，但页面变窄后 320px 会显得太高，所以响应式改造时要在媒体查询里覆盖；background-color 是最简单的替换入口，想进阶就换成 background-image 配渐变；line-height 等于容器高度这种方式只对单行文字有效，文字一换行，第二行会被挤到容器外面。改完保存，回实时视图看一眼颜色和文字变化，这就是第一次完整的“改码—验证”循环。

3.4 预览失败的快速排查表

刚定义完站点时最容易碰到的问题，是 F12 预览时页面表现异常。按实际经验里出现的频率排列，列成一张排查表。

最后一行需要单独解释：CS6 预览用的是 file:// 协议，而 ajax 请求通常需要 http:// 或 https:// 环境，否则浏览器控制台会直接报跨域错误。这不是素材的问题，是协议限制。遇到就先起一个本地静态服务（命令行里项目目录下执行python -m http.server，或任意静态服务器工具都行），再用 localhost 地址预览。

4. 用这套案例素材自学，五个常见问题排查与避坑

4.1 CSS 全部失效而 HTML 正常：根路径和站点缓存谁在捣乱

现象：双击 html 文件，浏览器里文字、图片都在，就是没有任何样式，页面变成白底黑字的一坨。原因几乎都出在 CSS 的引用路径上。素材包解压后移动过目录，或者按 2.1 检查时没注意双层目录，html 里的 css/style.css 相对路径就断了。另一个更隐蔽的原因是站点缓存：Dreamweaver CS6 在根目录变更后不会立刻重建文件索引，站点面板里看着有 css，实际加载时读的还是旧缓存。解决：先回 index.html 的 head 里看 link 标签，把 href 里的相对路径和站点面板里的实际目录逐段比对；路径一致仍不生效，执行一次“站点→重新缓存”，或者干脆关闭站点再重新定义。这类问题多数两步内能解决。

4.2 中文全部乱码：文件编码和声明不一致

现象：页面标题正常了，正文全是菱形问号，或者部分段落正常、部分段落仍然乱。原因：HTML 文件里写的是<meta charset="utf-8">，但素材文件实际保存为 GB2312/GBK 编码，浏览器按 UTF-8 解码时中文全部错位。这种情况在中文环境特别常见：CS6 在中文系统上的默认保存编码跟随系统区域，而网页标准又推荐 UTF-8，两边一次不一致，预览就翻车。解决：用记事本或任意编辑器打开 html 文件，看“另存为”对话框里的编码类型；把文件统一转为 UTF-8，并让<meta charset>与文件实际编码保持一致。更治本的习惯是，在 CS6 的“修改→页面属性”里把文档编码设成 UTF-8 再写内容，以后新建页面都用这个设置做起点，乱码问题可以从源头杜绝。

4.3 改了 CSS 刷新没变化：两级缓存的旧数据在作怪

现象：CSS 里把横幅颜色从蓝色改成红色，保存了，浏览器预览里还是蓝色。原因按顺序排查有三个。第一是浏览器缓存：CSS 文件被缓存后，普通刷新不会重新请求它，用强制刷新 Ctrl+F5 或 Ctrl+Shift+R 解决。第二是改错了文件：素材包里同名 css 可能存在于多个子目录，你改的是 A 目录下的 style.css，index.html 引用的却是 B 目录下的那个。解决是在浏览器开发者工具的“Sources”或“Network”面板里看当前页面实际加载的 css 文件路径，回到站点面板改同一个文件。第三是编辑器没保存：CS6 里改完没按 Ctrl+S 就切到浏览器，分屏工作时尤其多见。按出现概率排序的话，第三种比想象中高得多。

4.4 图片大片裂开：大小写、特殊字符和目录层级

现象：页面结构、样式全部正常，就是图片区域全是叉号和替代文本。原因出在文件名和路径两个层面。素材打包时图片名常见banner_01.jpg、产品图片 (1).png这种风格，HTML 里引用的是banner_01.JPG，或者文件名里带着空格和中文括号，浏览器在 file:// 协议下解析就会出问题。解决：第一步，把 images 目录里所有文件名改成小写英文字母加下划线或连字符，比如product_01.png，同时用 Ctrl+F 在整个站点里把对应引用同步替换；第二步，检查站点面板里的文件层级，确保 img 标签里的 src 起始位置和当前 html 的相对位置一致，多一层../少一层../都会裂图。CS6 的站点面板里直接重命名文件时，会弹窗询问是否更新引用，选是就能自动同步，这是 CS6 里最值得养成的习惯。

4.5 案例在 CS6 实时视图里正常、在 Chrome 里崩版：老代码与新渲染引擎的边界

现象：CS6 实时视图里一切都对，F12 在 Chrome 里打开后，导航错位几个像素、字体换成了默认样式、间距莫名变大。原因：CS6 实时视图基于旧版 WebKit，渲染逻辑停留在那个时代的浏览器标准；素材里部分案例可能来自更早的版本，css 里带着*html、_height这类老 hack，新浏览器会直接忽略这些规则，于是间距和对齐就乱了。解决：以 Chrome/Edge 的渲染结果为准返工，用标准布局替换 hack 写法。最常见的三个替换点：float 清除浮动改用 flex 或 grid 容器、字体引入改用标准 @font-face 或系统字体栈、Cufon 这类老字体替换脚本直接移除。这不算素材的缺陷，反而是最值得练手的兼容性练习——每一处崩版都在告诉你新浏览器对哪些老写法已经不再容忍。

5. 用案例素材做三项通用改造，从“改案例”变成“做模板”

5.1 把固定宽度改成响应式：三个最小改动点

固定宽度的案例在新浏览器上最明显的问题就是窄屏横向滚动。改造只需要动三个点，完全不用动 HTML 结构：head 里加 viewport meta，把最外层的width: 960px改成max-width: 100%，再给大块区域补一组媒体查询。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

.container { width: 100%; max-width: 1200px; /* 桌面端限制最大宽度，窄屏自动收缩 */ margin: 0 auto; } @media (max-width: 768px) { .container { padding: 0 12px; } .banner { height: 200px; line-height: 200px; } }

这套改法对素材里大多数固定宽度案例都成立。viewport 让移动端按设备宽度渲染；max-width 替代固定 width 解决溢出；媒体查询里只覆盖需要变形的模块。每调一个案例就记录哪些类目容易改动，几章下来你就有了一张常见的响应式改动点清单，以后再拿到新页面，第一眼就看得出哪里需要动。

5.2 用查找替换批量换掉案例里的默认信息

整站式案例通常预置了一堆占位内容：电话、地址、公司名、邮箱。一页页手工改既慢又容易漏。CS6 的查找替换支持“整个当前本地站点”范围，能一次性替换所有页面里的相同文本。操作上先打开“查找和替换”，搜索范围选“整个当前本地站点”，源文件选“文本”，输入旧文本和新文本后，逐个预览差异再批量替换。建议分两轮：第一轮替换公司名、电话这类短文本；第二轮再处理地址、邮箱这类长文本，避免一轮替换出错后难以定位。

5.3 把改好的案例抽成起始模板

素材改到第三四个案例之后，你会发现有些页面结构自己已经舍不得改回原样。这时候可以把改完的案例抽成起始模板：把导航、页脚、公共样式、HTML 骨架复制到一个单独的模板目录，以后做新页面直接从这里开始，而不是从零新建。CS6 支持 .dwt 模板文件，定义可编辑区域后，多页面统一改版非常方便；单干时复制一份“骨架目录”也够用。保留版本记录的习惯值得从一开始养成——每改一版复制一份带日期的目录，后悔药就是这么存的。我见过不少初学者把案例素材当成品站用，几天后发现页面被改得到处是半成品；而进步最快的人，做法都是把素材当底盘，每次只换一个部件、验证一个效果、记一条笔记。学完素材包不等于会做网页，但把每章案例都拆着改一遍之后，你对 HTML 和 CSS 的掌控感会完全不一样。希望帮到你。

本文还有配套的精品资源，点击获取