文档介绍：授课教师：
章节
内容
教学
目标
重点
难点
教学
方法
教学
环境

实用标准
《网页美工设计》课程教案
授课班级：地点：
网
约10分钟约6分钟
约6分钟
约4分钟
约8分钟
约12分钟
约 20 分钟学生实践约50分钟
约 40 分钟学生实践
约4分钟总结
文案大全
实用标准
《网页美工设计》课程教案
授课教师：
授课班级：
地点：
章节
Dreamweaver 表格操作；
内容
CSS 样式表应用。
教学
1)
掌握 Dreamweaver 中表格的设计方法；
目标
2)
CSS 样式表的使用方法和技巧。
重点
1)
熟练掌握 Dreamweaver 中表格的基本操作方法；
难点
2)
了解网页设计中 CSS 样式表的作用和设置方法。
教学
课堂讲授、案例讲解与指导
方法
教学
计算机机房
环境
教学过程及内容提要
一、
引入
1、
回顾上次课所学习的内容：网页设计基础理论知识，
Dreamweaver 软件使用初步；
2、
提出问题：对 Word 中表格操作还熟练吗？
CSS是什么？如何设
置网页中各种元素的显示效果？
二、告知学生课堂任务
本次课所学习的主要内容是 Dreamweaver 中表格的使用和 Dreamweaver 创建 CSS样式表；
三、逐步演示讲解分析教学内容
教 1、网页中表格的作用：
学（ 1）内容组织和定位；
过（ 2）网页排版；
程 2、表格布局和 Div 布局区别：
设各有优势。
计表格：简单，好用，学起来很容易上手。各种浏览器都支持！基本
上不会变形。但是代码冗余较多，维护起来也不怎么方便。
DIV+CSS优点：代码冗余小，所以网站打开速度快一些。维护起来
非常方便。但是要兼容 IE6 IE7 火狐等浏览器的话，开始学就会
很头疼这个问题的。往往在 IE6 里面看着整个网页是好的，但是到
了 IE7 或者火狐里面就全乱了。
推荐：用 div 做框架， table 用来储存数据。
3、 Dreamweaver 中表格的基本操作：
（ 1）表格和单元格的选择及属性设置；
（ 2）行和列的添加和删除；
（ 3）单元格的合并和拆分；
（ 4）表格的嵌套；

课时：
时间
备注
分配
约4分钟
约 6 分钟学生理解
约30分钟
文案大全
实用标准
4、实例演示讲解：使用表格制作一像素细线；操作步骤：
1)插入 1行 1列表格；
2) 设置单元格背景颜色；
3) 设置单元格高度为 1；
4) 转到代码视图；
5) 把单元格中的 &nbsp; 删除。
5、辅导学生实训操作；
6、 Dreamweaver 中 CSS样式表的使用：
1） CSS样式表文件的创建；
2）创建 CSS样式：网页链接样式 2；
3）创建 CSS样式：网页凹下链接样式；
4）创建 CSS样式：类链接样式；
5）创建 CSS样式：滤镜样式。
7、辅导学生进行 CSS样式实训操作；
8、案例演示讲解：个人主页首页布局设计
1）创建网页；
2）设置网页属性；
3）使用表格布局网页（上中下型）；
4) 使用 Photoshop 制作页面头部 Ban