《网页设计与制作》课程教学单元设计：单元4 CSS的应用.docVIP

《网页设计与制作》课程教学单元设计

单元4：CSS的应用

授课教师：网页设计与制作组

授课班级:

学时：10

教学条件

预装网页制作工具Dreamweaver的计算机；局域网环境

教学素材

教材、课件、实训项目单、授课录像、案例库、教学网站等

教学目标设计

知识目标：

理解CSS的特点与规则；

掌握标识符的分类；

掌握CSS的引用方法；

掌握CSS背景样式的设置方法；

掌握文本样式的设置方式；

掌握CSS列表样式的设置方法；

掌握超级链接样式的设置方法；

掌握盒模型的原理与应用；

掌握CSS的定位方式；

掌握DIV+CSS页面布局的方法。

能力目标：

能进行CSS设计与引用；

能使用DIV+CSS进行区块布局与应用。

教学内容

CSS标识符的分类；

CSS的定义与加载方法；

CSS的定位方式；

DIV+CSS页面布局方法。

重点：

CSS的定义与引用方法；

CSS标识符的分类；

DIV+CSS页面布局。

难点：

页面CSS样式的定义规范；

CSS的定位方式；

DIV+CSS页面布局技巧。

课后作业

使用CSS设计完成常规网站的样式及超级链接的样式；

使用DIV+CSS技术进行页面布局。

教学过程设计

任务一：CSS引用（2学时）

主要步骤

教学内容

教学方法

教学手段

师生活动

问题引入

网页中如何控制页面样式？

教师讲授

引导文法

多媒体

教师：提问

学生：讨论

知识讲解

知识点1：CSS简介；

知识点2：CSS的特点与规则；

知识点3：CSS的加载方法；

知识点4：标识符的分类与应用。

启发讲解

讨论归纳

多媒体

课件演示

思考

交流互动

记录笔记

示范操作

操作1：各种CSS的加载方法。

操作2：标识符的分类与使用方法。

问题引导

操作演示

分析归纳

多媒体

系统演示

观摩思考

归纳总结

实战训练

任务单4-1CSS的定义与引用

动手实践

做中学

多媒体

真实系统环境

实践操作

巡视检查

评估

讨论

1.评估讨论实训任务完成的速度；

2.评估讨论实训任务完成的规范性；

3.展示学生的完成效果；

4.考核学生结果。

教师启发

讨论归纳

分数激励

实训项目单

思考

结果演示

课堂

总结

1.CSS简介、特点与使用规则。

2.CSS各种加载方法。

3.标识符的分类与引用。

教师讲解

多媒体

课件演示

整理笔记

引导创新

课后作业

拓展实训4-1：

1.类与ID标识符的详细区分；

2.伪类定义超级链接样式。

教师讲授

多媒体

布置作业

提出要求

教学过程设计

任务2：页面样式设计（4学时）

主要步骤

教学内容

教学方法

教学手段

师生活动

问题引入

网页制作时页面样式设置主要关注那几方面的内容？

教师讲授

引导文法

多媒体

教师：提问

学生：讨论

知识讲解

知识点1：字体、颜色、背景与文字属性；

知识点2：边距、填充与边框属性设置；

知识点3：列表属性设置；

启发讲解

讨论归纳

多媒体

课件演示

思考

交流互动

记录笔记

示范操作

操作1：CSS设置字体、颜色、背景与文字等的样式。

操作2：CSS设置边距、填充与边框等的样式。

操作3：CSS设置列表的样式。

问题引导

操作演示

分析归纳

多媒体

系统演示

观摩思考

归纳总结

实战训练

任务单4-2CCSS定义页面

动手实践

做中学

多媒体

真实系统环境

实践操作

巡视检查

评估

讨论

1.评估讨论实训任务完成的速度；

2.评估讨论实训任务完成的规范性；

3.展示学生的完成效果；

4.考核学生结果。

教师启发

讨论归纳

分数激励

实训项目单

思考

结果演示

课堂

总结

1.字体、颜色、背景与文字属性的样式设计。

2.边距、填充与边框等的样式设置技巧。

3.CSS设置列表样式的技巧。

教师讲解

多媒体

课件演示

整理笔记

引导创新

课后作业

拓展实训4-2：

1.滤镜属性样式设置。

2.在internet中搜索网页页面边距、文字大小、行高等的通用规范，设计制作企业网页中的常规样式。

教师讲授

多媒体

布置作业

提出要求

教学过程设计

任务3区块与层的页面布局（4学时）

主要步骤

教学内容

教学方法

教学手段

师生活动

问题引入

网页搜索DIV+CSS，探讨其优势？

教师讲授

引导文法

多媒体

教师：提问

学生：讨论

知识讲解

知识点1：CSS布局元素类型；

知识点2：盒模型；

知识点3：定位及尺寸属性；

知识点4：单行单列结构布局方法；

知识点5：二列布局结构布局方法；

知识点6：三列布局结构布局方法；

启发讲解

讨论归纳

多媒体

课件演示

思考

交流互动

记录笔记

示范操作

操作1：盒模型的布局。

操作2：DIV定位及尺寸使用。

操作3：单行单列结构。

操作4：二列布局结构。

操作5：二列布局结构。

问题引导

操作演示