简介面向网页设计初学者及相关课程师生的《网页设计与制作项目案例教程Dreamweaver CS6》电子教案与素材包以案例驱动方式降低门槛可配套教材用于课堂演示、上机实训和课后复习。内容系统覆盖Dreamweaver CS6工作环境与站点管理、HTML与CSS基础文本、图像、链接及选择器、盒子模型、流式/固定/响应式布局、表格与Div页面结构设计并引入JavaScript、jQuery实现按钮、表单和动态效果同时讲解媒体查询与Bootstrap适配多屏以及FTP发布、加载速度和SEO优化等发布环节。每个章节配有可跟做的完整项目案例压缩包约99.9MB内含教学课件、案例源文件、练习题及答案等辅助材料文件数未标注便于按步骤完成从零到一的网页制作并检验学习效果。已有161人学习/下载适合需要系统掌握网页设计全流程的读者参考实践。1. 网页设计与制作教案包第一步不是读教案而是拆站点想象一个刚接手《网页设计与制作》课程的老师开学前一天才拿到电子教案包打开压缩包看到一个教案文件夹配一堆素材第一反应往往是先把 PPT 过一遍然后等上课那天再打开 Dreamweaver CS6 试一试。结果往往是课堂前 10 分钟卡在学生的图片显示不出来上。这份以 Dreamweaver CS6 为配套软件的网页设计与制作项目案例资料核心内容就是教案 素材两件事教案把教学单元按项目案例串起来素材把每个案例用到的图片、页面源文件和站点目录铺好。它解决的恰恰是备课最磨人的部分——不用再从零搭案例、截步骤图、编课后练习。适合三类人刚入职要快速建课的老师、培训机构里要带零基础学员的讲师以及想按学校课程体系自学的学生。打开之后第一件事不是看教案正文而是先确认整个解压目录里的站点结构后面所有操作都建立在这一点上。2. 案例主线与素材组织教案为什么按项目排2.1 案例主线HTML、CSS 与 DW 操作三线交织项目案例教程这几个字基本定义了教案的编排逻辑它不是从什么是 URL这种概念章节开始而是采用案例驱动的方式每节课围绕一个小站点页面展开知识点挂到案例上。常见的案例推进顺序是先做一个个人介绍页只用标题、段落、图片、超链接四个标签把 HTML 结构基础讲完然后做一个旅游风景页引入 CSS 中的字体、颜色、背景和浮动布局接着做一个课程表页面把表格相关标签集中处理最后做一个报名表单页把表单控件和 JavaScript 基础交互放进去。相比按标签类型逐个讲解的教学方式这种按项目排线的教案学生每节课结束都能看到真实页面作业收集率明显高。对老师而言按这个主线备课有个好处教案里每个案例对应的 Dreamweaver 操作比较集中。比如个人介绍页涉及新建 HTML 文档、插入图像、设置页面属性旅游页涉及DIV 的插入、CSS 样式的创建、浮动属性的设置。这些操作都是 CS6 里的高频功能不用为了讲一个标签反复切换面板。需要注意教案按项目排线的同时也会埋一条工具线站点定义、文件面板、拆分视图、实时视图、属性面板、CSS 样式面板。这两条线是交织的不是先讲完工具再讲案例。我在实际教学中发现如果第一节就把所有面板挨个讲一遍学生会失去耐心跟着案例用到哪个面板再打开哪个面板学习效率更稳。2.2 电子教案包里通常分成哪三层拿到资源包先按目录结构分三层教案文档层、案例源文件层、素材层。教案文档层一般是教学大纲、授课教案、课件 PPT 和实训指导书案例源文件层是 DW 可直接打开的站点目录里面有 index.html、about.html 之类的页面以及配套的 css、images 子目录素材层则是更原始的图片、文本、音乐等资源供学生做练习时复制使用。教案源文件站点常见的目录结构是下面这样站点根/ ├── css/ │ └── style.css ├── images/ │ ├── banner.jpg │ └── logo.png ├── js/ │ └── common.js ├── index.html └── contact.html这个结构不是随便约定的。Dreamweaver CS6 的整个工作流都围绕站点展开你在文件面板里看到的是一个站点根目录页面之间的相对路径、资源的引用方式、最后整站上传到服务器全都依赖这个根。教案素材如果一开始就按这个结构排好换机房、换电脑都不会出路径问题。我拿到素材包之后一般会做一次结构清洗把网站根目录单独拷贝出来放到硬盘根目录下路径中不要出现中文名和空格。比如D:\site_demo而不要放在D:\新建文件夹\网页设计作业\最终版\这种路径下。CS6 对路径的处理能力有限中文路径加多层嵌套很容易在设计视图显示异常这是第一个要规避的坑。2.3 为什么很多学校还在用 CS6而不是新版本有人会问现在前端开发都直接用 VSCode 写代码了为什么教案还绑在 Dreamweaver CS6 上这要从教学场景看。网页设计课程面向的往往是非计算机专业或大一新生教学目标不是培养工程化前端能力而是建立网页是什么、HTML 和 CSS 怎么组织页面的认知。CS6 的拆分视图左边代码右边设计实时视图直接渲染效果这种可视化反馈对初学者是最友好的。另外CS6 本身就自带站点管理、FTP 发布、模板和库功能教学里需要的操作一个不缺。后续版本的 Dreamweaver 当然更强但对机房这种配置普遍不高的环境CS6 安装包小、启动快、界面稳定不需要登录账号也不会有频繁的组件更新提示打断课堂节奏作为教学工具足够可靠。但要注意CS6 的设计视图对 CSS3 新特性的支持有限。教案里如果用到圆角、阴影、渐变这些效果设计视图里不会完美显示要以浏览器预览为准。教学中可以明确告诉学生DW 只是写作工具浏览器才是最终裁判。这样既解释了显示差异也培养了正确的验证习惯。3. 落到机房课表教学排程、站点定义与第一次上机3.1 先排课教案到 16 周课表的映射教案到手后不能直接照本宣科要把它映射成一份可执行的课程进度表。网页设计类课程通常每周 2 到 4 课时一个学期 16 周的话大致可以按这个节奏排周次教学内容对应案例当周输出1-2Dreamweaver 安装、工作区、站点定义站点建立演示能打开新建页面3-4HTML 基础标签标题、段落、图片、链接个人介绍页单页面含图片链接5-6表格标签与页面布局课程表页面表格风格页面7-8CSS 基础字体、颜色、背景新闻阅读页外链 CSS 样式9-10DivCSS 盒模型与浮动布局旅游首页三栏浮动布局11-12表单与常见表单控件报名页面含表单字段的页面13-14JavaScript 基础与行为面板图片轮播与弹窗有简单交互页面15-16综合案例与整站发布主题文化站点完成一个多页面站点这个表的价值在于每个阶段都有一个明确的页面输出。教案里若是 12 讲的结构表格第 15-16 周正好空出来做综合实训。排课时还要注意一个细节教案里的案例素材通常是按标准答案配好的老师应该把源文件站点的页面先完整跑通一遍确认首页能打开、图片路径正常、CSS 外链有效。我见过不少教案包PPT 很精美但源文件站点缺了一张 banner 图或者 CSS 路径写错课堂演示时当场翻车。3.2 建站点前必做解压路径、站点名称与编码第一次上机前机房电脑的准备工作比想象中更重要。首先要求学生把 rar 解压到固定位置例如直接解压到D:\根目录并且解压后形成一个独立的站点文件夹。绝对不要解压到桌面因为很多机房的用户目录带有中文用户名后续操作容易遇到路径解析问题。然后让学生打开 Dreamweaver CS6依次选择站点菜单里的新建站点在弹出的对话框中设置四项内容站点名称建议用英文比如 site01。中文站点名虽然能用但在某些模板和插件场景下文件名和站点名混在一起时容易出怪问题。本地站点文件夹选择刚才解压出来的案例根目录。默认图像文件夹选择根目录下面的 images 文件夹。填好这个选项后插入图片时 DW 会自动生成相对路径而不是把图片拷贝到页面同级目录。站点 HTTP 地址本地教学阶段可以留空等学到 FTP 发布章节再补。建完站点后还有一步容易被忽略确认页面编码。教案的页面一般基于 UTF-8但机房电脑上的 CS6 如果不小心被改过默认编码新建页面会出现中文乱码。检查方式是在编辑菜单的首选参数里看新建文档的默认编码统一设成 UTF-8。提示编码问题一旦出现往往是整页中文全部乱码这种灾难式表现。教学时让学生养成两个习惯——新建页面第一件事查看代码开头的meta charsetutf-8作业提交前用浏览器预览一次。3.3 第一次上机只做三件事第一堂上机课不适合讲太多语法我一般会限制学生只做三件事定义站点、新建首页、插入图片。具体流程是在文件面板中右键站点根目录新建一个 index.html 文件双击打开它在代码视图的body标签内定位光标然后插入菜单里选择图像从 images 文件夹中选一张 banner 图片。此时切到拆分视图左侧能看到代码右侧能看到图片预览。如果图片显示不出来最常见的原因是三个站点没有定义、文件名大小写不对、图片路径少写了 images 前缀。这些问题都可以在这一节课集中暴露。第一次上机还有一个很实用的设置让学生把工作区布局切换成设计器模式。路径是窗口菜单里的工作区布局子菜单选择设计器。这个布局把文档工具栏、属性面板放在最顺手的位置与很多教案截图里的界面一致能减少学生对着截图找不到按钮的挫败感。4. Dreamweaver CS6 常见问题避坑spacer.gif、路径与工作区4.1 spacer.gif 是什么文件为什么删掉后布局全乱现象学生在站点文件夹里发现一个叫 spacer.gif 的文件只有几十字节以为是恶意文件或残留垃圾顺手删掉。结果再打开某些页面时设计视图中的表格布局、层布局全乱了代码视图里没有明显异常。原因spacer.gif 是 Dreamweaver 设计视图下用于控制表格列宽和单元格间距的透明占位图片由 DW 在编辑过程中自动生成。它本身无害删掉后源代码里对它的引用还在图片路径就变成了红叉浏览器中表现不明显但设计视图会错位。解决保留这个文件。如果确实不想让最终站点里出现 spacer.gif可以在发布前整站搜索页面里对它的引用用 CSS 的padding或margin替代原布局间隙确认浏览器效果正常后再删除。教学中不必主动讲解这个文件但学生问到时要能解释清楚避免他们好心办坏事。4.2 换一台电脑图片全军覆没现象教案页面上周五还正常这周换到另一间机房打开网页后所有图片都变成红叉CSS 样式也丢了页面变成纯文本加一堆项目符号。原因资源包里的页面很可能使用了绝对路径或带盘符的路径比如img srcfile:///D:/demo/images/a.jpg。换一台电脑后盘符或目录位置变了路径自然失效。另一种情况是学生只拷贝了 html 文件没有连同 images 和 css 文件夹一起拷贝。解决把所有引用改成相对路径。在 Dreamweaver 中打开站点面板确认站点根目录指向资源包解压后的目录然后按CtrlF打开查找和替换查找范围为整个当前本地站点查找file:///开头的绝对路径替换为相对于站点根目录的路径。修改后逐页检查设计视图和浏览器预览。4.3 界面和教案截图对不上现象老师用投影演示时界面截图非常干净学生跟着操作却找不到属性面板或 CSS 样式面板以为自己装错了软件版本。原因CS6 的设计器和编码器两种工作区布局显示的面板完全不同。教案截图通常基于设计器布局拍摄而学生端可能被前一位老师切换过布局也可能被学生自己误拖拽过面板。解决重新设置工作区布局。点击窗口菜单选择工作区布局再选设计器所有面板就会恢复到默认位置。如果面板依然缺失可以继续点击窗口菜单手动勾选属性和CSS 样式两个面板。这个问题在机房教学中几乎每周都会出现建议每节课前统一广播操作一次。4.4 设计视图拖出来的页面切到代码视图就露馅现象学生作业在浏览器里看着还行但打开源代码一看全是 DW 自动生成的冗余标签甚至出现大量内联样式。问学生这是怎么实现的答不上来。原因学生在设计视图里直接选中文本拖拽颜色、拖拽图片位置DW 会生成内联样式和语义不明的标签。这种方式虽然页面效果快但没有经过结构思考代码可读性极差也不利于后续维护。解决上机任务中增加硬性要求——每个页面至少包含一段手写的 HTML 结构CSS 必须写入外部样式文件禁止在标签上直接写 style 属性。我会在每次作业验收时打开源码随机抽查发现整页都是自动生成代码的直接退回重做。这样做倒不是为了为难学生而是因为后期综合案例阶段如果前面欠的债太多排错成本会成倍放大。4.5 Dreamweaver CS6 安装时别碰绿色精简版现象学生电脑上的 CS6 启动正常但行为面板打不开或者服务器行为功能缺失课堂上老师示范的行为交互学生做不出来。原因很多学生为了省事下载了绿化精简版或绿色版 Dreamweaver CS6。这类版本裁剪掉了部分扩展组件教学需要的偶尔恰好就在被裁剪的部分里。解决安装优先走完整安装包安装时选择默认组件不要自定义精简。之前遇到过安装完整版后行为面板依然置灰的情况重启软件一次基本恢复。另外CS6 装好后首次启动会提示选择设计器还是编码器布局这里直接选设计器后续操作就和教案截图一致了。5. 教案素材二轮复用整站替换、自检清单与交接习惯5.1 用查找替换把案例改成新主题教案里的案例主题是固定的但实训作业如果每次都用同样主题学生的作业几乎可以互相复制。我常用的做法是用 CS6 的查找和替换功能把教案站点整体改成另一个主题。比如把江南旅游网换成中秋节网页设计主题只需要四步先在站点面板中选中站点根按CtrlF打开查找替换对话框查找范围选择整个当前本地站点查找内容填江南旅游替换为中秋文化替换完成后再把 banner 图片和标题文本对应替换掉。这个操作表面简单实际能覆盖大多数静态文案。替换完成后必须逐页检查因为案例里可能有杭州三日游这类关键词没有出现在查找词中。建议按标题、导航、图片 alt、表单提示文字四类逐一过一遍漏网之鱼通常藏在这里。整站替换之后同一个教案就能生成文化节、美食节、校园开放日等多个主题版本素材包的复用价值会高很多。5.2 交接前跑一遍素材完整性脚本教案包经过多轮使用后很容易出现某些图片被误删、某些页面改为他用的损伤。为了不把带病资源带入新学期我养成了一个习惯每学期结束前用脚本检查整个站点引用的资源是否完整。#!/bin/bash # 检查站点内所有 HTML 引用的本地图片是否存在 for img in $(grep -rho src[^]* --include*.html . | sed s/src//;s///); do test -f $img echo OK $img || echo MISS $img done这段脚本的逻辑很简单先用 grep 递归抓取所有 HTML 文件里srcxxx的路径再通过 sed 去除前后的引号前缀然后逐一判断文件是否存在。运行前先cd到站点根目录输出的每一行都会标记 OK 或 MISS。MISS 的文件就是需要从原始压缩包恢复的内容。把这个脚本放到教案包的根目录或 U 盘目录里下次接手的人拿到手先运行一遍就能在第一节实操课之前发现问题而不是在课堂上对着红叉临时找图。从那以后我拿到任何一套网页设计教学素材都会强制先走一遍解压—建站点—跑首页—查资源四步确认没问题才排进课表。希望这个习惯也能帮到你。本文还有配套的精品资源点击获取