简介这份资源是《网页设计与制作——Dreamweaver CS6标准教程第二版》的配套案例素材包面向网页设计初学者、高校相关课程学生及希望系统练习Dreamweaver CS6的开发者用于配合教材完成从HTML标记、CSS样式到网页布局、交互元素与多媒体整合的实操训练。压缩包共收录1190个文件约44.95MB以550张jpg、331个gif、116个png等图像素材为主辅以90个html页面、17个css样式表、18个js脚本及swf、flv、mp3等多媒体文件覆盖页面结构、样式与交互的完整练习链路。目前已有3038人学习下载适合按章节逐步搭建真实网页项目在动手过程中巩固可视化编辑、模板库、CSS设计工具与响应式布局等关键技能为独立完成高质量网页设计与制作打下基础。1. Dreamweaver CS6 案例素材从零搭建一个能交作业的企业站带过几届网页设计课每次到实训周问得最多的不是“标签怎么写”而是“老师Dreamweaver CS6 的案例素材到底怎么用”。很多人拿到一个压缩包解压完看到一堆 html、css、images 文件夹双击 index.html 能打开但自己一改就乱图片裂了、样式飞了、中文乱码了。问题不在素材本身在于没人告诉你这套东西的组织逻辑。Dreamweaver CS6 虽然是个老版本但它的“站点”概念、文件依赖管理、CSS 可视化编辑放到今天依然是理解网页制作工程化的好入口。这篇文章不打算复述菜单栏而是拿一套典型的案例素材当靶子把“怎么把素材变成自己的作品”这条路走通。适合正在做课程设计的学生、需要快速交付静态企业站的初级前端以及想用 Dreamweaver 做原型再转手写代码的人。读完你能独立完成素材解构、站点重建、样式改造和本地验证知道哪些参数必须改、哪些坑一踩就翻车。2. 拆解案例素材目录结构、文件依赖与站点重建2.1 先看懂素材包里的四类文件一套标准的 Dreamweaver CS6 案例素材解压后通常长这样根目录下有一个 index.html若干二级页面如 about.html、contact.html一个 css 文件夹一个 images 文件夹可能还有 js 和 fonts。别急着打开 index.html先做一件事——用资源管理器按“类型”排序把文件分成四类。第一类是页面骨架.html 文件负责结构。第二类是样式表.css 文件控制外观。第三类是媒体资源图片、图标、背景图放在 images 里。第四类是脚本和字体.js 和 .woff/.ttf负责交互和排版。这四类文件之间存在引用关系html 通过link引 css通过img src引图片css 通过url()引背景图。引用路径一旦对不上页面就残。我一般会先打开 index.html看head里引了哪些 css再看body里图片的 src 路径是相对还是绝对。相对路径以../或images/开头绝对路径以file:///或盘符开头。案例素材为了通用通常用相对路径这是好事意味着整个文件夹可以整体搬移。提示如果素材里出现file:///D:/...这种绝对路径说明作者是在自己电脑上直接保存的换台机器必裂。遇到这种全部改成相对路径。2.2 在 Dreamweaver 里新建站点而不是直接打开文件这是新手最容易跳过的一步。直接双击 html 打开Dreamweaver 是以“独立文件”模式工作的它不知道 css 和 images 在哪CSS 样式面板会是空的链接检查也用不了。正确做法是新建站点。打开 Dreamweaver CS6菜单栏选“站点 → 新建站点”站点名称填你的项目名比如corp_site。本地站点文件夹指向你解压后的素材根目录。关键在“高级设置”里的“本地信息”默认图像文件夹选 images。这一步做完Dreamweaver 的文件面板会以树形展示整个项目所有依赖关系一目了然。# 如果你习惯用命令行先检查素材完整性可以这样快速列出所有引用 # 在素材根目录执行找出 html 里引用的资源路径 grep -rhoE (src|href)[^] *.html | sort -u这段命令的作用是把所有 html 文件里的 src 和 href 值提取出来去重。执行后你会得到一份引用清单拿它和实际文件列表对比缺哪个文件立刻就能发现。参数说明-r递归-h不显示文件名-o只输出匹配部分-E支持扩展正则。如果输出里有http://开头的说明引了外部资源离线环境下会加载失败需要替换成本地文件。2.3 用“文件”面板重建依赖关系站点建好后Dreamweaver 的“文件”面板会显示整个目录树。这时候做一次“链接检查”菜单“站点 → 检查站点范围的链接”。它会列出所有断掉的链接、孤立的文件、外部链接。断链通常是图片路径写错或文件缺失孤立文件是没被任何页面引用的资源可以留着也可以清理。检查完链接再点“站点 → 高级 → 重建站点缓存”。这一步会重新扫描所有文件的依赖关系之后你在 CSS 样式面板里改样式Dreamweaver 才能实时预览。很多人说“Dreamweaver 的实时视图没用”八成是没重建缓存。注意重建缓存时如果素材里有中文文件名CS6 偶尔会卡住。建议先把所有文件名改成英文或拼音中文名在跨平台部署时也是隐患。3. 从素材到成品页面改造、样式覆盖与响应式补丁3.1 先改内容再改样式顺序反了会返工拿到素材后最忌讳的是先调样式。你花两小时把首页 banner 调好看了结果发现栏目名称要换、导航要加一项布局一撑开之前的样式全白调。正确顺序是先替换所有文本内容再调整结构最后动 CSS。文本替换用 Dreamweaver 的“查找和替换”最稳。菜单“编辑 → 查找和替换”范围选“整个当前本地站点”查找填素材里的占位文字比如“公司名称”替换成你的实际名称。勾选“区分大小写”避免误伤。替换完所有页面再检查一遍导航和页脚这两处通常在每个页面重复出现。结构改动要小心。比如导航栏加一项不能只加li还要看 CSS 里有没有写死宽度。如果导航用的是float: left加固定宽度加一项就会换行。这时候要么改宽度要么把导航改成 flex 布局。CS6 对 flex 支持有限但手写 CSS 没问题。!-- 改造前的导航固定宽度容易换行 -- ul classnav li stylewidth:120pxa hrefindex.html首页/a/li li stylewidth:120pxa hrefabout.html关于/a/li /ul !-- 改造后用 flex 自适应 -- ul classnav lia hrefindex.html首页/a/li lia hrefabout.html关于/a/li lia hrefcontact.html联系/a/li /ul配套的 CSS 改成.nav { display: flex; gap: 20px; }去掉 li 的固定宽度。这样加多少项都不会换行。参数说明gap控制项间距CS6 的实时视图可能不认但浏览器里正常。如果你必须兼容 IE8那就用margin-right代替 gap。3.2 CSS 覆盖的三个层级和优先级陷阱案例素材的 CSS 通常写在一个 style.css 里选择器比较随意。你直接改原文件风险大万一改坏了不好回退。我一般新建一个custom.css在 index.html 的head里放在 style.css 后面。这样利用 CSS 的层叠规则后面的覆盖前面的原文件不动。但覆盖有优先级问题。如果原样式用了#header .nav li a你只写.nav a权重不够改不动。这时候要么提高选择器权重要么加!important。!important是后悔药能不用就不用用多了后面没法维护。/* custom.css 示例覆盖原导航样式 */ /* 原样式可能是 #header .nav li a { color: #333; } */ /* 直接写 .nav a 权重不够需要对齐或提高 */ #header .nav li a { color: #0066cc; font-weight: bold; } /* 如果实在改不动才用 !important */ .nav a { color: #0066cc !important; }逻辑说明CSS 优先级按“内联 ID 类 标签”计算#header .nav li a有一个 ID、一个类、两个标签权重是 (1,1,2)。.nav a只有一个类一个标签权重 (0,1,1)比不过。所以要么写成同样的选择器要么加 ID。参数说明颜色值#0066cc是常见的链接蓝font-weight: bold加粗。改完在浏览器里按 F12 看计算样式确认覆盖生效。3.3 给老素材补一个移动端适配补丁CS6 时代的案例素材基本都是固定宽度常见的是 960px 或 1000px。放到手机上要么缩小到看不清要么横向滚动。你不需要重写整套响应式加一个 viewport 和几条媒体查询就能救回来。在head里加meta nameviewport contentwidthdevice-width, initial-scale1.0。然后在 custom.css 末尾加媒体查询/* 移动端补丁小于 768px 时生效 */ media screen and (max-width: 768px) { body { width: 100%; padding: 0 10px; box-sizing: border-box; } .nav { flex-direction: column; } img { max-width: 100%; height: auto; } .container { width: 100% !important; } }逻辑说明max-width: 768px是平板和手机的分界这个断点下把固定宽度容器改成 100%导航竖排图片自适应。box-sizing: border-box让 padding 不撑破宽度。!important在这里用于强制覆盖原固定宽度因为原样式可能写了.container { width: 960px; }。参数说明768 是常见断点你也可以用 640 或 480看素材原宽度。改完用浏览器开发者工具的设备模拟看效果重点检查有没有横向滚动条。4. 避坑排查素材改造中最容易翻车的五个点4.1 中文乱码现象是页面文字变问号原因是编码不一致打开页面发现中文全是“锟斤拷”或问号。原因通常是 html 文件保存编码和 meta 声明不一致。CS6 默认可能用 GB2312 保存但 meta 里写的是 UTF-8。解决在 Dreamweaver 里打开文件菜单“修改 → 页面属性 → 标题/编码”编码选 UTF-8然后“文件 → 另存为”编码也选 UTF-8。所有 html 和 css 文件统一成 UTF-8css 文件开头加charset utf-8;。4.2 图片裂了现象是红叉或 alt 文字原因是路径大小写或文件夹层级Windows 不区分大小写Linux 服务器区分。素材里写Images/logo.png实际文件夹是images本地正常传上去就裂。解决统一用小写文件夹名所有引用路径和实际文件大小写完全一致。另外检查../层级二级页面引图片可能需要../images/少一层就裂。4.3 样式不生效现象是改了 css 没反应原因是缓存或选择器权重浏览器缓存了旧 css。解决CtrlF5 强制刷新或者在链接后面加版本号style.css?v2。如果还不行F12 看元素的计算样式确认你的规则有没有被划掉。被划掉就是权重不够按 3.2 的方法提高权重。4.4 实时视图空白现象是 Dreamweaver 里预览一片白原因是站点缓存或浏览器内核CS6 的实时视图依赖站点缓存和内置浏览器。解决先“重建站点缓存”再检查“编辑 → 首选参数 → 预览”把浏览器换成系统默认的 Chrome 或 Edge。如果还不行直接按 F12 在真实浏览器里预览别跟实时视图较劲。4.5 上传后 404现象是本地正常服务器找不到页面原因是文件名大小写或默认首页服务器区分大小写Index.html和index.html是两个文件。解决首页统一命名为index.html全小写。另外确认服务器默认文档配置了 index.html有些环境默认是 index.php。5. 进阶技巧用 Dreamweaver 的模板和库项批量改站素材改造到最后最烦的是改一个页脚要动十几个文件。Dreamweaver CS6 的“模板”和“库项”就是干这个的。模板文件后缀 .dwt把公共区域页头、导航、页脚标记为“可编辑区域”和“不可编辑区域”基于模板生成的页面改模板一次所有页面同步更新。库项后缀 .lbi适合放页脚、版权信息这种小片段拖到页面里改库项文件所有引用处自动更新。操作路径先打开一个页面把页脚那段代码选中菜单“修改 → 库 → 增加对象到库”命名footer。然后到其他页面把原页脚删掉从“资源”面板的“库”里拖footer进去。以后改页脚双击库里的footer.lbi改完保存Dreamweaver 会提示更新所有页面点“更新”即可。注意库项更新依赖站点缓存如果更新没反应先重建缓存。另外库项里的路径要用站点根目录相对路径比如/images/logo.png否则不同层级的页面引用会裂。我自己的习惯是素材改造第一步就建库项把页头页脚抽出来。后面无论加栏目还是换版权年份都是一分钟的事。这个习惯让我在交作业前夜少熬了好几个通宵。希望帮到你。本文还有配套的精品资源点击获取