简介面向网页设计入门与进阶学习者这份压缩包收录了《网页设计与制作——Dreamweaver CS6标准教程第二版》的完整配套案例素材适合结合教材章节系统自学或课堂教学使用。素材以图像、动画、音视频等多媒体元素为基础配合HTML页面、CSS样式表和JavaScript脚本能跟随教材一步步搭建出真实可用的网站项目。压缩包共1190个文件约44.95MB其中jpg、gif、png格式的图片素材数量最多另有html/htm静态页面、css样式、js交互脚本等类型覆盖从页面搭建、图文排版到交互特效的系列练习场景。这套素材已有3034人学习下载适合需要对照教材逐章实操、系统掌握网页设计核心技能的自学者。反复演练这些案例可以扎实掌握基础HTML标记、CSS布局控制、多媒体嵌入、响应式适配以及网站发布等实用能力为独立完成网页项目打下牢固基础。1. Dreamweaver CS6 案例素材一份让网页设计课少熬两个通宵的课件包这套《网页设计与制作——Dreamweaver CS6 标准教程第二版》配套案例素材包我拆开看过的第一反应是当年做网页设计课作业要有它至少能少熬两个通宵。它不是网上那种零散网页模板而是和教材章节一一挂钩的完整素材目录——HTML基础、CSS排版、表格页面、模板与库最后拼成几个可以直接预览的专题站点。解压后你会看到按站点规范组织好的.html、.css、图片目录和 DW 专属的模板、库文件。它的价值不只是省去找图、写样式的功夫而是帮你理解 Dreamweaver CS6 里「站点定义」这一整套能长期复用的工作流。适合正在上网页设计课的学生、用 CS6 备课的老师以及想快速找回 DW 流程的自学者。素材拿到手先别急着双击页面把它定义成站点再说。2. 先把素材包变成 DW 能看懂的站点站点定义、目录规范和相对路径三件事很多同学拿到案例素材的第一动作是双击 index.html然后抱怨「图片全裂、样式全没」。素材包其实没坏是没告诉 Dreamweaver 这些文件属于同一个站点。DW 的站点定义并不是发布网站而是在本地建立一个文件关系索引CSS、图片、链接全部靠它解析。用资源管理器直接打开文件浏览器按磁盘绝对路径寻找资源一旦遇到以/开头的站点根目录相对路径解析直接失效。所以「打开素材包」的正确姿势从来不是双击 HTML而是先在 DW 里定义站点再从这个站点面板去浏览和编辑页面。这一步跨过去后面的模板和库才有动手的基础。2.1 站点不是玄学为什么这套素材必须先定义站点再打开Dreamweaver CS6 的核心工作流是「定义站点 → 编辑页面 → 预览验证」。站点本质上是一个本地文件夹加一份缓存索引DW 通过它在设计视图里模拟出真实网站的资源关系。教材配套素材在组织上就是按站点规范来的样式单独放css/图片集中在images/脚本归js/模板和库文件单独成目录。这样划分的原因很直接改样式不用翻 HTML换图不用动代码整站换肤只动一个文件。一个典型的教材案例素材解压后目录结构长这样webroot/ # 站点根目录也是案例素材的主目录 ├── css/ │ ├── reset.css # 重置浏览器默认样式 │ └── style.css # 教材案例主样式表 ├── images/ │ ├── banner.jpg # 首页横幅图 │ ├── bg.png # 平铺背景 │ └── spacer.gif # 透明间隔图表格布局遗留 ├── js/ │ ├── jquery-1.8.3.min.js # 教材配套的 jQuery │ └── common.js # 公共脚本 ├── templates/ │ └── page.dwt # 模板文件 ├── libs/ │ └── nav.lbi # 导航条库项目 ├── index.html # 站点首页 ├── about.html # 关于页面 └── contact.html # 联系页面这个目录树里的css/、images/、js/是任何网页项目的基本骨架。templates/和libs/是 DW 专属资源浏览器不会直接打开它们而是在编辑普通页面时被调用。spacer.gif会被很多人误当成垃圾文件甚至病毒我后面专门讲它解开素材包之后先放着别删。如果素材里还带design/之类的文件夹里面多半是 PSD 设计稿那是网页设计课上「PS 切图 → DW 排版」流程的产物。2.2 定义站点的操作参数本地根目录、默认图像文件夹和缓存一次设对安装好 Dreamweaver CS6 之后我建议你先改一个设置菜单「编辑 → 首选参数 → 常规」取消「启动时显示欢迎屏幕」。这个小动作和站点定义无关但能省去每次打开软件多关一个弹窗的烦躁。接着按下面步骤定义站点。首先确认解压层级。下载下来的 zip 解压后经常是「案例素材 → 网页设计与制作案例素材 → webroot」三层嵌套你要找的是真正包含css/、images/、index.html的那一层把它作为站点根目录。如果直接把最外层文件夹设成站点根目录CSS 引用路径会整体错位一级后面会花大量时间在找路径上。然后打开菜单「站点 → 新建站点」在「站点设置对象」对话框里配置设置项推荐值说明站点名称course_web只作为 DW 内的标识不要带空格和中文本地站点文件夹D:\webroot素材包真正的根目录默认图像文件夹D:\webroot\images插入图片时自动生成相对路径链接相对于文档教材案例多数按此写法启用缓存勾选模板与库的更新提示依赖它左侧切换到「高级设置 → 本地信息」「默认图像文件夹」指向images/勾选「启用缓存」。缓存文件会在站点目录下生成一个.dws文件记录每个文件的改动时间更新库和模板时DW 靠它判断哪些页面需要刷新。这里要强调一点网站根目录务必放在全英文路径下比如D:\webroot2025。很多人习惯把素材放在桌面或「我的作业」这种中文目录里直接导致缓存初始化失败这是后话。2.3 相对路径与「链接相对于」设置样式丢失的一半根源在这素材包里的 HTML 引用 CSS 有两种写法这也是网页设计课上老师反复强调的难点。第一种是「相对于文档」比如hrefcss/style.css意思是「从当前 HTML 文件所在目录出发找css/文件夹下的style.css」。第二种是「相对于站点根目录」比如href/css/style.css第一个/代表站点根目录。后者在 DW 的设计视图里能正常渲染因为 DW 知道站点根在哪但只要用浏览器以file://协议打开浏览器会把这个/解析成磁盘分区的根目录于是图片和样式全部 404。这就是同一个素材在 DW 里看着正常、在浏览器里全乱的典型原因。!-- 写法一相对于文档教材案例最常用本地双击也能正常预览 -- link relstylesheet hrefcss/style.css img srcimages/banner.jpg altbanner !-- 写法二相对于站点根目录必须依赖服务器环境本地 file:// 下会断裂 -- link relstylesheet href/css/style.css img src/images/banner.jpg altbanner如果翻开案例素材发现大量写法二我的处理办法是统一改成写法一因为课程作业通常以本地预览方式演示不需要部署到远程服务器。DW 里用「编辑 → 查找和替换」查找范围选「整个当前本地站点」查找src/images/替换成srcimages/href/css/同理。注意只替换 HTML 文件里的引用不要动 CSS 文件内部的url()写法那个是相对于 CSS 文件本身的。2.4 三步确认站点定义成功定义完站点先别急着改页面快速验证三件事。第一站点面板里根目录旁边应有绿色对勾或磁盘图标展开后能看到完整文件列表。第二右键index.html选「在浏览器中预览」选择 Chrome 或 Firefox页面图片和样式都在说明路径没问题。第三菜单「站点 → 检查站点范围的链接」结果面板里没有红色的.html断链条目。这三步都过才能说这个素材正式接入了你的电脑环境。注意如果站点根目录选错层级通常是验证第三步时冒出一堆../../的断路错误回到 2.2 重新选根目录即可。3. 把教材案例改成你的课程设计模板、CSS 换肤和库项目一次讲透教材配套案例做得很完整但直接照搬交作业显然不行。把它变成「自己的」课程设计不是复制几页改改文字而是要动三个层次模板控制骨架、CSS 控制外观、库项目控制重复模块。这章我把这三件事逐个展开按这个顺序改几十个页面也能一次改完。3.1 模板、库、外部 CSSDW 的「一处修改全站生效」三件套先讲清楚这三者的分工不然很多人会把模板和库弄混。模板.dwt管的是整个页面的公共骨架比如顶部导航、左侧栏、页脚这些区域在模板里被锁定普通页面只能编辑被标记为「可编辑区域」的部分。库项目.lbi管的是页面内部的一段重复片段比如导航条、版权栏它比模板更小粒度。外部 CSS 管的是所有页面的视觉样式颜色、字体、间距全在这里。改版时我的顺序是先改 CSS 看颜色对不对再动模板调结构最后改用库项目更新导航和页脚。如果一上来就逐页复制粘贴改到第三页基本就乱了。3.2 把首页另存为模板可编辑区域命名是后面改版的关键在站点面板中右键index.html选择「另存为模板」。DW 会自动在站点根目录下创建Templates/文件夹把模板存成page.dwt。存完之后第一件事不是改内容而是标记可编辑区域。选中有变化的正文区域菜单「插入 → 模板对象 → 可编辑区域」命名成mainContent。打开代码视图你会看到模板文件的核心结构!-- templates/page.dwt -- !DOCTYPE html html langzh-CN head meta charsetutf-8 title网页设计课程案例/title link relstylesheet href../css/style.css /head body div classheader !-- 锁定区域全站统一顶部 -- /div !-- TemplateBeginEditable namemainContent -- div classmain h1这里是首页正文每个继承页面可以各自修改/h1 /div !-- TemplateEndEditable -- div classfooter !-- 锁定区域页脚版权 -- /div /body /html注意link href../css/style.css前面的../。模板文件位于Templates/目录下相对 CSS 文件向上退了一层所以必须加../这是新手最容易忽略的细节。TemplateBeginEditable和TemplateEndEditable之间的内容在每个继承页面里都能独立编辑标记之外的内容在子页面中是锁定状态光标点不进去。可编辑区域名称只能用字母、数字和下划线不要用中文否则在 DW 的实时视图里可能出现识别异常。保存模板时DW 会弹出「更新页面」对话框列出所有引用该模板的页面这里全部勾选更新。3.3 CSS 换肤不动一个标签把蓝色商务站改成中秋专题教材案例默认配色通常是蓝色商务风作业想要不一样最省力的做法是换肤。所谓换肤就是不碰 HTML 结构只改css/style.css里的颜色值。如果课程主题是中秋节可以做成暖金色调。/* 原案例默认配色蓝色商务风 */ body { background-color: #eef4fb; font-family: Microsoft YaHei, Arial; } .header { background-color: #1e5a9e; } .nav a:link, .nav a:visited { color: #fff; } .title { color: #1e5a9e; border-bottom: 2px solid #ccc; } /* 中秋专题改版暖金色 */ body { background-color: #fdf6ec; } .header { background-color: #8b4513; } .nav a:link, .nav a:visited { color: #ffd49c; } .title { color: #8b4513; border-bottom: 2px solid #d9c2a4; }选择器一个都不动只替换颜色值。#fdf6ec是米白底色配暖色页面不刺眼#8b4513是赭石色接近月饼礼盒的棕色#ffd49c是浅金色用在导航文字上和深棕背景对比度足够。改完之后把images/banner.jpg换成自己找的中秋素材图页面气质立刻不一样。想定位某段文字在 CSS 里由哪条规则控制最简单的方法是浏览器 F12 选中元素看右侧 Styles 面板里的选择器名再回到 DW 的style.css里查找。注意 CS6 的设计视图对 CSS3 特性支持很弱如果用了border-radius、渐变这类属性DW 里显示错乱是正常的以浏览器预览为准这也是很多学生对着设计视图调半天、越调越乱的根源。如果作业要求用 HTML5 标签可以在模板文件里把div classheader换成headerCSS 选择器.header保持不变浏览器渲染效果一致。DW 设计视图可能对 HTML5 布局标签识别不佳但代码视图和浏览器都是正常的不用慌。3.4 库项目导航栏改一次整站导航跟着变素材包里多个页面共享同一个导航栏如果没有库项目改一个页面的导航要重复操作所有页面。库项目的正确用法是在index.html里选中导航区域ul classnav菜单「修改 → 库 → 添加对象到库」DW 会在站点根目录生成libs/文件夹并创建一个.lbi文件。然后打开about.html、contact.html把原来的导航 HTML 删掉从右侧「资源面板 → 库」把刚才创建的库项目拖进页面。之后想改导航比如加一个菜单项只需要编辑libs/nav.lbi保存时 DW 弹出提示「是否更新所有含此库项目的文件」选「更新」整站导航瞬间一致。有人说这功能不就是复制粘贴吗区别在于复制粘贴是散了架的一堆副本库项目有一个唯一的「母版」改一次全站同步。模板和库可以嵌套使用模板控制整体骨架库控制骨架里的重复细节。素材包里带libs/目录的案例就是为了让你课上练这个流程。3.5 加一点 JavaScript 让静态页动起来表单校验和轮播网页设计课作业如果只有静态页面容易被老师觉得诚意不够。加一段不依赖框架的 JavaScript 是最稳的做法。素材包自带的js/目录里通常已经有教材配套脚本在common.js里追加一个最简表单校验函数比引入第三方插件省心// js/common.js 中追加最简表单校验适合课程作业场景 function checkForm(form) { var name form.name.value.trim(); var email form.email.value.trim(); if (name ) { alert(请填写姓名); return false; } if (email.indexOf() -1) { alert(邮箱格式不正确); return false; } return true; } // 在 contact.html 中调用form onsubmitreturn checkForm(this)这段代码里trim()去掉首尾空格indexOf()判断邮箱是否含这是最保守的校验方式浏览器兼容性好CS6 时代完全够用。更活泼的做法是放一张轮播图在已引入 jQuery 的前提下几行setInterval切换img的src不需要额外插件。不管用哪种脚本记得把script标签放在/body之前并且先确认素材包里js/jquery-1.8.3.min.js已经被引用了避免重复引入不同版本的 jQuery 导致冲突。4. 避坑清单CS6 案例素材最常碰到的五个翻车现场这一章是血泪经验。指导课程设计时学生遇到的问题翻来覆去就是这几类每条我都按「现象 → 原因 → 解决」写你改素材时遇到类似问题直接按序号排查即可。4.1 图片和样式全丢十有八九是路径与站点没对上现象浏览器打开页面文字都在图片全裂CSS 完全没生效但回到 DW 的设计视图里看页面却是正常的。原因DW 设计视图按站点根目录解析资源所以它知道/css/style.css去哪找浏览器用file://协议打开时/被解析成磁盘根目录自然找不到。另一种情况是页面文件放在子目录里CSS 还写成css/style.css少了个../层级对不上。解决先把站点定义好再打开站点面板里的文件预览。然后检查所有link、img、script标签的href和src凡是以/开头的统一改成相对路径。如果页面在子目录用../css/style.css。改完在 DW 里重新「在浏览器中预览」确认不要只信设计视图。4.2 spacer.gif 到底是什么文件透明间隔图不是病毒但删不删要看布局现象素材包images/里总有一个spacer.gif只有 1×1 像素透明无内容。有些页面里它像是一张空白小图还撑出一条细线或额外空白。原因这是表格布局时代的产物。当年用表格排版时浏览器对空单元格的宽度解析不一致设计者放一张 1 像素透明 GIF 把单元格撑到设定宽度保证布局不塌。教材第二版保留它是因为早期章节讲表格布局的案例需要用到。如果在 DIVCSS 布局的页面里看到它多半是不小心拖进去的遗留物。解决先判断页面用的是什么布局。打开设计视图点选包含spacer.gif的单元格如果页面整体是表格结构不要删删了单元格宽度可能塌陷。如果页面是div布局右键删除这个图片再看间距是否变化没变化就直接清理掉。不要因为它名字里有spacer就怀疑是病毒它就是一个老实的透明图。4.3 模板页面点不进文本可编辑区域没设对现象用模板生成的页面里想改标题或正文光标怎么点都进不去文字区域像是被焊死了一样。原因模板里没把这块区域标记为可编辑区域。在.dwt文件中只有TemplateBeginEditable和TemplateEndEditable之间的内容能被继承页面修改其他部分全部锁定。如果整个正文区都没插可编辑区域子页面就变成纯展示页面任何文字都动不了。解决回到模板文件选中需要修改的正文区块重新「插入 → 模板对象 → 可编辑区域」命名后保存。DW 弹出更新提示时选更新所有页面。如果子页面已经被改动过但又急着改内容另一个救急手段是「修改 → 模板 → 从模板中分离」页面脱离模板后所有区域都能编辑代价是失去全站同步能力。这个操作能救急但我建议只在最后定稿阶段用。4.4 中文路径和全角字符机房 U 盘拷出来的素材最容易翻车现象素材在桌面「我的网页设计作业\」文件夹里DW 提示站点缓存错误或者站点面板初始化失败浏览器预览部分图片 404。原因路径或文件名里有中文、全角字符、空格。DW 的缓存机制和浏览器对中文路径的编码处理不一致导致文件引用解析失败。教材案例文件的原始名称是英文小写很多学生作业交到一半把文件另存成「关于我.html」「我的主页.html」一旦移动位置引用全乱。解决从第一天就把站点根目录放在全英文路径比如D:\webroot2025所有文件名统一小写加连字符如about.html、mid-autumn.html。已有中文文件名时在站点面板里重命名然后手动修复页面里的引用。最后删除站点根目录下的.dws缓存文件重新定义站点让 DW 重建缓存问题基本消失。4.5 改了样式不生效浏览器缓存、内联样式与设计视图误导三头夹击现象在style.css里把.title的颜色改成红色浏览器刷新后还是蓝色或者只在某个页面改了样式其他页面纹丝不动。原因通常是三个原因叠加。第一浏览器缓存了旧 CSS刷新时直接读缓存。第二素材页面的 HTML 里有内联样式stylecolor:#...内联样式的优先级高于外部 CSS外链改了也压不住。第三DW 设计视图渲染引擎和真实浏览器不一致设计视图里看着没变浏览器里其实已经变了。解决浏览器按 CtrlF5 强制刷新绕过缓存。在代码视图里搜索style看到内联样式优先删掉让样式统一走外部 CSS。然后以「在浏览器中预览」的结果为准不要对着设计视图调颜色。最后在 DW 的「CSS 样式」面板里选中目标元素看哪条规则最终生效Selector 列表里排在前面的就是赢家。这三个地方都查一遍样式不生效的问题基本能定位。5. 交付前最后一遍验证站点断链检查和浏览器控制台排查素材改完、作业快交之前最怕的不是没改好而是某个子页断链、某个脚本报错平时没注意到演示时才在老师面前露馅。我改完任何素材都会强制走两遍验证第一遍交给 DW第二遍交给浏览器。5.1 先跑 DW 的站点范围链接检查在站点面板中选中站点根目录菜单「站点 → 检查站点范围的链接」。执行完打开结果面板切到「断掉的链接」选项卡能看到所有失效的页面引用。双击每条断链DW 会跳转到对应文件里出错的位置。检查范围覆盖 HTML 页面之间的跳转、图片引用、外部 CSS 引用比肉眼翻文件可靠得多。注意用过模板或库更新之后必须要重新跑一遍这个检查因为全站更新时可能批量改写链接。5.2 再用浏览器控制台兜底DW 的检查能覆盖断链但覆盖不了 JavaScript 报错和资源加载状态。用浏览器打开首页按 F12 打开开发者工具按下面这张表逐项过面板看什么判定方式Console红色报错、脚本异常有红色Error就必须修Network所有请求的状态码点击后刷新页面出现 404 就定位Elements选中元素看最终生效的样式确认外部 CSS 覆盖了内联样式Network 面板是最容易发现「漏网之鱼」的地方。刷新一次页面看所有请求里有没有非 200 的条目。图片断链、CSS 没加载、JS 路径错在这里全部现形。尤其是模板批量生成的页面每个页面都去 Network 里扫一遍不太现实但至少把首页和两个子页面作为样本检查。5.3 全站查找替换统一版权信息素材包里通常还留着教材作者的版权信息或年份交作业前必须清理。用「编辑 → 查找和替换」查找范围选「整个当前本地站点」查找2013或教材作者名替换成自己的名字和当前年份点替换全部。这个功能会一次改写站点内所有匹配的文件比逐个页面手动改干净得多。但替换前建议先看一下查找结果数量如果某个词出现在图片文件名里替换方式要格外小心只替换 HTML 内容而不是文件名。我曾经帮一个学生改企业站素材所有页面肉眼检查都正常最后老师打开「联系我们」页一张图片是裂开的。原因是那张图在子目录里有一份副本后来清理目录时删掉了副本但contact.html的引用还留在原处。这种问题不是改素材时造成的而是改完后少了最后一遍全站检查。从那以后我不管改什么素材交付前都强制走一遍「站点范围链接检查 F12 Network 清一遍 404」两个面板都干净才敢打包。改教材案例素材也是同理文件多、引用关系复杂肉眼看不全这份验证习惯比任何技巧都值钱。希望帮到你。本文还有配套的精品资源点击获取 Dreamweaver CS6案例素材使用指南：站点定义、模板与CSS换肤实战
简介面向网页设计入门与进阶学习者这份压缩包收录了《网页设计与制作——Dreamweaver CS6标准教程第二版》的完整配套案例素材适合结合教材章节系统自学或课堂教学使用。素材以图像、动画、音视频等多媒体元素为基础配合HTML页面、CSS样式表和JavaScript脚本能跟随教材一步步搭建出真实可用的网站项目。压缩包共1190个文件约44.95MB其中jpg、gif、png格式的图片素材数量最多另有html/htm静态页面、css样式、js交互脚本等类型覆盖从页面搭建、图文排版到交互特效的系列练习场景。这套素材已有3034人学习下载适合需要对照教材逐章实操、系统掌握网页设计核心技能的自学者。反复演练这些案例可以扎实掌握基础HTML标记、CSS布局控制、多媒体嵌入、响应式适配以及网站发布等实用能力为独立完成网页项目打下牢固基础。1. Dreamweaver CS6 案例素材一份让网页设计课少熬两个通宵的课件包这套《网页设计与制作——Dreamweaver CS6 标准教程第二版》配套案例素材包我拆开看过的第一反应是当年做网页设计课作业要有它至少能少熬两个通宵。它不是网上那种零散网页模板而是和教材章节一一挂钩的完整素材目录——HTML基础、CSS排版、表格页面、模板与库最后拼成几个可以直接预览的专题站点。解压后你会看到按站点规范组织好的.html、.css、图片目录和 DW 专属的模板、库文件。它的价值不只是省去找图、写样式的功夫而是帮你理解 Dreamweaver CS6 里「站点定义」这一整套能长期复用的工作流。适合正在上网页设计课的学生、用 CS6 备课的老师以及想快速找回 DW 流程的自学者。素材拿到手先别急着双击页面把它定义成站点再说。2. 先把素材包变成 DW 能看懂的站点站点定义、目录规范和相对路径三件事很多同学拿到案例素材的第一动作是双击 index.html然后抱怨「图片全裂、样式全没」。素材包其实没坏是没告诉 Dreamweaver 这些文件属于同一个站点。DW 的站点定义并不是发布网站而是在本地建立一个文件关系索引CSS、图片、链接全部靠它解析。用资源管理器直接打开文件浏览器按磁盘绝对路径寻找资源一旦遇到以/开头的站点根目录相对路径解析直接失效。所以「打开素材包」的正确姿势从来不是双击 HTML而是先在 DW 里定义站点再从这个站点面板去浏览和编辑页面。这一步跨过去后面的模板和库才有动手的基础。2.1 站点不是玄学为什么这套素材必须先定义站点再打开Dreamweaver CS6 的核心工作流是「定义站点 → 编辑页面 → 预览验证」。站点本质上是一个本地文件夹加一份缓存索引DW 通过它在设计视图里模拟出真实网站的资源关系。教材配套素材在组织上就是按站点规范来的样式单独放css/图片集中在images/脚本归js/模板和库文件单独成目录。这样划分的原因很直接改样式不用翻 HTML换图不用动代码整站换肤只动一个文件。一个典型的教材案例素材解压后目录结构长这样webroot/ # 站点根目录也是案例素材的主目录 ├── css/ │ ├── reset.css # 重置浏览器默认样式 │ └── style.css # 教材案例主样式表 ├── images/ │ ├── banner.jpg # 首页横幅图 │ ├── bg.png # 平铺背景 │ └── spacer.gif # 透明间隔图表格布局遗留 ├── js/ │ ├── jquery-1.8.3.min.js # 教材配套的 jQuery │ └── common.js # 公共脚本 ├── templates/ │ └── page.dwt # 模板文件 ├── libs/ │ └── nav.lbi # 导航条库项目 ├── index.html # 站点首页 ├── about.html # 关于页面 └── contact.html # 联系页面这个目录树里的css/、images/、js/是任何网页项目的基本骨架。templates/和libs/是 DW 专属资源浏览器不会直接打开它们而是在编辑普通页面时被调用。spacer.gif会被很多人误当成垃圾文件甚至病毒我后面专门讲它解开素材包之后先放着别删。如果素材里还带design/之类的文件夹里面多半是 PSD 设计稿那是网页设计课上「PS 切图 → DW 排版」流程的产物。2.2 定义站点的操作参数本地根目录、默认图像文件夹和缓存一次设对安装好 Dreamweaver CS6 之后我建议你先改一个设置菜单「编辑 → 首选参数 → 常规」取消「启动时显示欢迎屏幕」。这个小动作和站点定义无关但能省去每次打开软件多关一个弹窗的烦躁。接着按下面步骤定义站点。首先确认解压层级。下载下来的 zip 解压后经常是「案例素材 → 网页设计与制作案例素材 → webroot」三层嵌套你要找的是真正包含css/、images/、index.html的那一层把它作为站点根目录。如果直接把最外层文件夹设成站点根目录CSS 引用路径会整体错位一级后面会花大量时间在找路径上。然后打开菜单「站点 → 新建站点」在「站点设置对象」对话框里配置设置项推荐值说明站点名称course_web只作为 DW 内的标识不要带空格和中文本地站点文件夹D:\webroot素材包真正的根目录默认图像文件夹D:\webroot\images插入图片时自动生成相对路径链接相对于文档教材案例多数按此写法启用缓存勾选模板与库的更新提示依赖它左侧切换到「高级设置 → 本地信息」「默认图像文件夹」指向images/勾选「启用缓存」。缓存文件会在站点目录下生成一个.dws文件记录每个文件的改动时间更新库和模板时DW 靠它判断哪些页面需要刷新。这里要强调一点网站根目录务必放在全英文路径下比如D:\webroot2025。很多人习惯把素材放在桌面或「我的作业」这种中文目录里直接导致缓存初始化失败这是后话。2.3 相对路径与「链接相对于」设置样式丢失的一半根源在这素材包里的 HTML 引用 CSS 有两种写法这也是网页设计课上老师反复强调的难点。第一种是「相对于文档」比如hrefcss/style.css意思是「从当前 HTML 文件所在目录出发找css/文件夹下的style.css」。第二种是「相对于站点根目录」比如href/css/style.css第一个/代表站点根目录。后者在 DW 的设计视图里能正常渲染因为 DW 知道站点根在哪但只要用浏览器以file://协议打开浏览器会把这个/解析成磁盘分区的根目录于是图片和样式全部 404。这就是同一个素材在 DW 里看着正常、在浏览器里全乱的典型原因。!-- 写法一相对于文档教材案例最常用本地双击也能正常预览 -- link relstylesheet hrefcss/style.css img srcimages/banner.jpg altbanner !-- 写法二相对于站点根目录必须依赖服务器环境本地 file:// 下会断裂 -- link relstylesheet href/css/style.css img src/images/banner.jpg altbanner如果翻开案例素材发现大量写法二我的处理办法是统一改成写法一因为课程作业通常以本地预览方式演示不需要部署到远程服务器。DW 里用「编辑 → 查找和替换」查找范围选「整个当前本地站点」查找src/images/替换成srcimages/href/css/同理。注意只替换 HTML 文件里的引用不要动 CSS 文件内部的url()写法那个是相对于 CSS 文件本身的。2.4 三步确认站点定义成功定义完站点先别急着改页面快速验证三件事。第一站点面板里根目录旁边应有绿色对勾或磁盘图标展开后能看到完整文件列表。第二右键index.html选「在浏览器中预览」选择 Chrome 或 Firefox页面图片和样式都在说明路径没问题。第三菜单「站点 → 检查站点范围的链接」结果面板里没有红色的.html断链条目。这三步都过才能说这个素材正式接入了你的电脑环境。注意如果站点根目录选错层级通常是验证第三步时冒出一堆../../的断路错误回到 2.2 重新选根目录即可。3. 把教材案例改成你的课程设计模板、CSS 换肤和库项目一次讲透教材配套案例做得很完整但直接照搬交作业显然不行。把它变成「自己的」课程设计不是复制几页改改文字而是要动三个层次模板控制骨架、CSS 控制外观、库项目控制重复模块。这章我把这三件事逐个展开按这个顺序改几十个页面也能一次改完。3.1 模板、库、外部 CSSDW 的「一处修改全站生效」三件套先讲清楚这三者的分工不然很多人会把模板和库弄混。模板.dwt管的是整个页面的公共骨架比如顶部导航、左侧栏、页脚这些区域在模板里被锁定普通页面只能编辑被标记为「可编辑区域」的部分。库项目.lbi管的是页面内部的一段重复片段比如导航条、版权栏它比模板更小粒度。外部 CSS 管的是所有页面的视觉样式颜色、字体、间距全在这里。改版时我的顺序是先改 CSS 看颜色对不对再动模板调结构最后改用库项目更新导航和页脚。如果一上来就逐页复制粘贴改到第三页基本就乱了。3.2 把首页另存为模板可编辑区域命名是后面改版的关键在站点面板中右键index.html选择「另存为模板」。DW 会自动在站点根目录下创建Templates/文件夹把模板存成page.dwt。存完之后第一件事不是改内容而是标记可编辑区域。选中有变化的正文区域菜单「插入 → 模板对象 → 可编辑区域」命名成mainContent。打开代码视图你会看到模板文件的核心结构!-- templates/page.dwt -- !DOCTYPE html html langzh-CN head meta charsetutf-8 title网页设计课程案例/title link relstylesheet href../css/style.css /head body div classheader !-- 锁定区域全站统一顶部 -- /div !-- TemplateBeginEditable namemainContent -- div classmain h1这里是首页正文每个继承页面可以各自修改/h1 /div !-- TemplateEndEditable -- div classfooter !-- 锁定区域页脚版权 -- /div /body /html注意link href../css/style.css前面的../。模板文件位于Templates/目录下相对 CSS 文件向上退了一层所以必须加../这是新手最容易忽略的细节。TemplateBeginEditable和TemplateEndEditable之间的内容在每个继承页面里都能独立编辑标记之外的内容在子页面中是锁定状态光标点不进去。可编辑区域名称只能用字母、数字和下划线不要用中文否则在 DW 的实时视图里可能出现识别异常。保存模板时DW 会弹出「更新页面」对话框列出所有引用该模板的页面这里全部勾选更新。3.3 CSS 换肤不动一个标签把蓝色商务站改成中秋专题教材案例默认配色通常是蓝色商务风作业想要不一样最省力的做法是换肤。所谓换肤就是不碰 HTML 结构只改css/style.css里的颜色值。如果课程主题是中秋节可以做成暖金色调。/* 原案例默认配色蓝色商务风 */ body { background-color: #eef4fb; font-family: Microsoft YaHei, Arial; } .header { background-color: #1e5a9e; } .nav a:link, .nav a:visited { color: #fff; } .title { color: #1e5a9e; border-bottom: 2px solid #ccc; } /* 中秋专题改版暖金色 */ body { background-color: #fdf6ec; } .header { background-color: #8b4513; } .nav a:link, .nav a:visited { color: #ffd49c; } .title { color: #8b4513; border-bottom: 2px solid #d9c2a4; }选择器一个都不动只替换颜色值。#fdf6ec是米白底色配暖色页面不刺眼#8b4513是赭石色接近月饼礼盒的棕色#ffd49c是浅金色用在导航文字上和深棕背景对比度足够。改完之后把images/banner.jpg换成自己找的中秋素材图页面气质立刻不一样。想定位某段文字在 CSS 里由哪条规则控制最简单的方法是浏览器 F12 选中元素看右侧 Styles 面板里的选择器名再回到 DW 的style.css里查找。注意 CS6 的设计视图对 CSS3 特性支持很弱如果用了border-radius、渐变这类属性DW 里显示错乱是正常的以浏览器预览为准这也是很多学生对着设计视图调半天、越调越乱的根源。如果作业要求用 HTML5 标签可以在模板文件里把div classheader换成headerCSS 选择器.header保持不变浏览器渲染效果一致。DW 设计视图可能对 HTML5 布局标签识别不佳但代码视图和浏览器都是正常的不用慌。3.4 库项目导航栏改一次整站导航跟着变素材包里多个页面共享同一个导航栏如果没有库项目改一个页面的导航要重复操作所有页面。库项目的正确用法是在index.html里选中导航区域ul classnav菜单「修改 → 库 → 添加对象到库」DW 会在站点根目录生成libs/文件夹并创建一个.lbi文件。然后打开about.html、contact.html把原来的导航 HTML 删掉从右侧「资源面板 → 库」把刚才创建的库项目拖进页面。之后想改导航比如加一个菜单项只需要编辑libs/nav.lbi保存时 DW 弹出提示「是否更新所有含此库项目的文件」选「更新」整站导航瞬间一致。有人说这功能不就是复制粘贴吗区别在于复制粘贴是散了架的一堆副本库项目有一个唯一的「母版」改一次全站同步。模板和库可以嵌套使用模板控制整体骨架库控制骨架里的重复细节。素材包里带libs/目录的案例就是为了让你课上练这个流程。3.5 加一点 JavaScript 让静态页动起来表单校验和轮播网页设计课作业如果只有静态页面容易被老师觉得诚意不够。加一段不依赖框架的 JavaScript 是最稳的做法。素材包自带的js/目录里通常已经有教材配套脚本在common.js里追加一个最简表单校验函数比引入第三方插件省心// js/common.js 中追加最简表单校验适合课程作业场景 function checkForm(form) { var name form.name.value.trim(); var email form.email.value.trim(); if (name ) { alert(请填写姓名); return false; } if (email.indexOf() -1) { alert(邮箱格式不正确); return false; } return true; } // 在 contact.html 中调用form onsubmitreturn checkForm(this)这段代码里trim()去掉首尾空格indexOf()判断邮箱是否含这是最保守的校验方式浏览器兼容性好CS6 时代完全够用。更活泼的做法是放一张轮播图在已引入 jQuery 的前提下几行setInterval切换img的src不需要额外插件。不管用哪种脚本记得把script标签放在/body之前并且先确认素材包里js/jquery-1.8.3.min.js已经被引用了避免重复引入不同版本的 jQuery 导致冲突。4. 避坑清单CS6 案例素材最常碰到的五个翻车现场这一章是血泪经验。指导课程设计时学生遇到的问题翻来覆去就是这几类每条我都按「现象 → 原因 → 解决」写你改素材时遇到类似问题直接按序号排查即可。4.1 图片和样式全丢十有八九是路径与站点没对上现象浏览器打开页面文字都在图片全裂CSS 完全没生效但回到 DW 的设计视图里看页面却是正常的。原因DW 设计视图按站点根目录解析资源所以它知道/css/style.css去哪找浏览器用file://协议打开时/被解析成磁盘根目录自然找不到。另一种情况是页面文件放在子目录里CSS 还写成css/style.css少了个../层级对不上。解决先把站点定义好再打开站点面板里的文件预览。然后检查所有link、img、script标签的href和src凡是以/开头的统一改成相对路径。如果页面在子目录用../css/style.css。改完在 DW 里重新「在浏览器中预览」确认不要只信设计视图。4.2 spacer.gif 到底是什么文件透明间隔图不是病毒但删不删要看布局现象素材包images/里总有一个spacer.gif只有 1×1 像素透明无内容。有些页面里它像是一张空白小图还撑出一条细线或额外空白。原因这是表格布局时代的产物。当年用表格排版时浏览器对空单元格的宽度解析不一致设计者放一张 1 像素透明 GIF 把单元格撑到设定宽度保证布局不塌。教材第二版保留它是因为早期章节讲表格布局的案例需要用到。如果在 DIVCSS 布局的页面里看到它多半是不小心拖进去的遗留物。解决先判断页面用的是什么布局。打开设计视图点选包含spacer.gif的单元格如果页面整体是表格结构不要删删了单元格宽度可能塌陷。如果页面是div布局右键删除这个图片再看间距是否变化没变化就直接清理掉。不要因为它名字里有spacer就怀疑是病毒它就是一个老实的透明图。4.3 模板页面点不进文本可编辑区域没设对现象用模板生成的页面里想改标题或正文光标怎么点都进不去文字区域像是被焊死了一样。原因模板里没把这块区域标记为可编辑区域。在.dwt文件中只有TemplateBeginEditable和TemplateEndEditable之间的内容能被继承页面修改其他部分全部锁定。如果整个正文区都没插可编辑区域子页面就变成纯展示页面任何文字都动不了。解决回到模板文件选中需要修改的正文区块重新「插入 → 模板对象 → 可编辑区域」命名后保存。DW 弹出更新提示时选更新所有页面。如果子页面已经被改动过但又急着改内容另一个救急手段是「修改 → 模板 → 从模板中分离」页面脱离模板后所有区域都能编辑代价是失去全站同步能力。这个操作能救急但我建议只在最后定稿阶段用。4.4 中文路径和全角字符机房 U 盘拷出来的素材最容易翻车现象素材在桌面「我的网页设计作业\」文件夹里DW 提示站点缓存错误或者站点面板初始化失败浏览器预览部分图片 404。原因路径或文件名里有中文、全角字符、空格。DW 的缓存机制和浏览器对中文路径的编码处理不一致导致文件引用解析失败。教材案例文件的原始名称是英文小写很多学生作业交到一半把文件另存成「关于我.html」「我的主页.html」一旦移动位置引用全乱。解决从第一天就把站点根目录放在全英文路径比如D:\webroot2025所有文件名统一小写加连字符如about.html、mid-autumn.html。已有中文文件名时在站点面板里重命名然后手动修复页面里的引用。最后删除站点根目录下的.dws缓存文件重新定义站点让 DW 重建缓存问题基本消失。4.5 改了样式不生效浏览器缓存、内联样式与设计视图误导三头夹击现象在style.css里把.title的颜色改成红色浏览器刷新后还是蓝色或者只在某个页面改了样式其他页面纹丝不动。原因通常是三个原因叠加。第一浏览器缓存了旧 CSS刷新时直接读缓存。第二素材页面的 HTML 里有内联样式stylecolor:#...内联样式的优先级高于外部 CSS外链改了也压不住。第三DW 设计视图渲染引擎和真实浏览器不一致设计视图里看着没变浏览器里其实已经变了。解决浏览器按 CtrlF5 强制刷新绕过缓存。在代码视图里搜索style看到内联样式优先删掉让样式统一走外部 CSS。然后以「在浏览器中预览」的结果为准不要对着设计视图调颜色。最后在 DW 的「CSS 样式」面板里选中目标元素看哪条规则最终生效Selector 列表里排在前面的就是赢家。这三个地方都查一遍样式不生效的问题基本能定位。5. 交付前最后一遍验证站点断链检查和浏览器控制台排查素材改完、作业快交之前最怕的不是没改好而是某个子页断链、某个脚本报错平时没注意到演示时才在老师面前露馅。我改完任何素材都会强制走两遍验证第一遍交给 DW第二遍交给浏览器。5.1 先跑 DW 的站点范围链接检查在站点面板中选中站点根目录菜单「站点 → 检查站点范围的链接」。执行完打开结果面板切到「断掉的链接」选项卡能看到所有失效的页面引用。双击每条断链DW 会跳转到对应文件里出错的位置。检查范围覆盖 HTML 页面之间的跳转、图片引用、外部 CSS 引用比肉眼翻文件可靠得多。注意用过模板或库更新之后必须要重新跑一遍这个检查因为全站更新时可能批量改写链接。5.2 再用浏览器控制台兜底DW 的检查能覆盖断链但覆盖不了 JavaScript 报错和资源加载状态。用浏览器打开首页按 F12 打开开发者工具按下面这张表逐项过面板看什么判定方式Console红色报错、脚本异常有红色Error就必须修Network所有请求的状态码点击后刷新页面出现 404 就定位Elements选中元素看最终生效的样式确认外部 CSS 覆盖了内联样式Network 面板是最容易发现「漏网之鱼」的地方。刷新一次页面看所有请求里有没有非 200 的条目。图片断链、CSS 没加载、JS 路径错在这里全部现形。尤其是模板批量生成的页面每个页面都去 Network 里扫一遍不太现实但至少把首页和两个子页面作为样本检查。5.3 全站查找替换统一版权信息素材包里通常还留着教材作者的版权信息或年份交作业前必须清理。用「编辑 → 查找和替换」查找范围选「整个当前本地站点」查找2013或教材作者名替换成自己的名字和当前年份点替换全部。这个功能会一次改写站点内所有匹配的文件比逐个页面手动改干净得多。但替换前建议先看一下查找结果数量如果某个词出现在图片文件名里替换方式要格外小心只替换 HTML 内容而不是文件名。我曾经帮一个学生改企业站素材所有页面肉眼检查都正常最后老师打开「联系我们」页一张图片是裂开的。原因是那张图在子目录里有一份副本后来清理目录时删掉了副本但contact.html的引用还留在原处。这种问题不是改素材时造成的而是改完后少了最后一遍全站检查。从那以后我不管改什么素材交付前都强制走一遍「站点范围链接检查 F12 Network 清一遍 404」两个面板都干净才敢打包。改教材案例素材也是同理文件多、引用关系复杂肉眼看不全这份验证习惯比任何技巧都值钱。希望帮到你。本文还有配套的精品资源点击获取