机器学习为什么叫机器学习：术语命名与学科边界
2026/9/29 7:16:45
简介：面向网页设计初学者及相关课程师生的《网页设计与制作项目案例教程（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-2 | Dreamweaver 安装、工作区、站点定义 | 站点建立演示 | 能打开新建页面 |
| 3-4 | HTML 基础标签：标题、段落、图片、链接 | 个人介绍页 | 单页面含图片链接 |
| 5-6 | 表格标签与页面布局 | 课程表页面 | 表格风格页面 |
| 7-8 | CSS 基础：字体、颜色、背景 | 新闻阅读页 | 外链 CSS 样式 |
| 9-10 | Div+CSS 盒模型与浮动布局 | 旅游首页 | 三栏浮动布局 |
| 11-12 | 表单与常见表单控件 | 报名页面 | 含表单字段的页面 |
| 13-14 | JavaScript 基础与行为面板 | 图片轮播与弹窗 | 有简单交互页面 |
| 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 charset="utf-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 src="file:///D:/demo/images/a.jpg">。换一台电脑后盘符或目录位置变了，路径自然失效。另一种情况是学生只拷贝了 html 文件，没有连同 images 和 css 文件夹一起拷贝。
解决：把所有引用改成相对路径。在 Dreamweaver 中打开"站点"面板，确认站点根目录指向资源包解压后的目录，然后按Ctrl+F打开"查找和替换"，查找范围为"整个当前本地站点"，查找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 的"查找和替换"功能，把教案站点整体改成另一个主题。
比如把"江南旅游网"换成"中秋节网页设计"主题，只需要四步：先在"站点"面板中选中站点根，按Ctrl+F打开查找替换对话框；查找范围选择"整个当前本地站点"；查找内容填"江南旅游"，替换为"中秋文化"；替换完成后，再把 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 文件里src="xxx"的路径，再通过 sed 去除前后的引号前缀，然后逐一判断文件是否存在。运行前先cd到站点根目录，输出的每一行都会标记 OK 或 MISS。MISS 的文件就是需要从原始压缩包恢复的内容。
把这个脚本放到教案包的根目录或 U 盘目录里，下次接手的人拿到手先运行一遍，就能在第一节实操课之前发现问题，而不是在课堂上对着红叉临时找图。从那以后，我拿到任何一套网页设计教学素材，都会强制先走一遍"解压—建站点—跑首页—查资源"四步，确认没问题才排进课表。希望这个习惯也能帮到你。
本文还有配套的精品资源，点击获取