刘万辉css任务10,网页设计与制作(HTML+CSS+JavaScript)教学全套课件（第2版）刘万辉教学资源任务4 构建网站层叠样式表.doc...

《网页设计与制作》课程教学单元设计 淮安信息职业技术学院

第 PAGE 1 页 共 NUMPAGES 4 页

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

单元4 构建网站层叠样式表

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

授课班级:

学时：8

教学条件

实训室、HBulider或Dreamweaver、投影设备、广播软件、互联网络

教学素材

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

教学目标设计

知识目标：

(1)了解CSS3简介；

(2)掌握CSS样式设置规则；

(3)掌握CSS样式的调用方法；

(4)掌握CSS基础选择器的使用方法；

(5)掌握CSS3新增选择器的使用方法；

(6)掌握CSS的继承与层叠性的应用。

能力目标：

(1)能正确应用CSS规则，合理选择CSS选择器编写CSS样式；；

(2)能根据网页页面效果，编写CSS样式效果

(3)能恰当的使用CSS3新增选择器。

任务描述

本任务就是在任务3的基础之上，编写基本的CSS3样式表，实现网站头部的页面效果。

教学内容

(1)CSS样式设置规则；

(2)CSS样式的调用方法；

(3)CSS基础选择器的使用方法；

(4)CSS3新增选择器的使用方法；

(5)CSS的继承与层叠性的应用。

重点：

(1) CSS样式设置规则与调用方法；

(2) CSS基础选择器的使用方法；

(3) CSS3新增选择器的使用方法；

(4) CSS3新增选择器的使用方法。

难点：

(1) CSS3新增选择器的使用方法；

(2) CSS3新增选择器的使用方法。

任务分析与实现

(1)任务分析；

(2)任务实现代码。

教学过程设计

4.1 CSS基础选择器的使用方法(学时数：2)

主要步骤

教学内容

教学方法

教学手段

师生活动

任务描述

本任务就是在任务3的基础之上，编写基本的CSS样式表，实现网站头部的页面效果。

讲授法

多媒体

教师：分析任务

学生：信息交流

知识讲授

CSS3的发展历史以及主流浏览器的支持情况

CSS样式设置规则

CSS样式的调用方式

讲授法

多媒体

课件演示

教师：讲授知识

学生：边听边练

学生实践

创建一个新页面进行实践 CSS样式设置规则、CSS样式的调用方式

实验教学法

多媒体

教师：辅导交流

学生：实践练习

知识讲授

讲解 CSS基础选择器：

标签选择器、类选择器、 ID选择器

讲授法

多媒体

课件演示

教师：讲授知识

学生：边听边练

学生实践

创建一个新页面进行实践标签选择器、类选择器、 ID选择器。

实验教学法

多媒体

教师：辅导交流

学生：实践练习

知识讲授

讲解标签指定式选择器、包含选择器、群组选择器

讲授法

多媒体

课件演示

教师：讲授知识

学生：边听边练

学生实践

创建一个新页面进行实践标签指定式选择器、包含选择器、群组选择器

实验教学法

多媒体

教师：辅导交流

学生：实践练习

课堂

总结

CSS样式设置规则

CSS样式的调用方式

CSS基础选择器

教师讲解

多媒体

课件演示

整理笔记

引导创新

任务拓展

浏览腾讯网站页面，认识HMTL与CSS的结构与作用。

教师指导

学生自学

多媒体

布置作业

提出要求

教学过程设计

4.2 CSS3新增选择器的使用方法(学时数：2)

主要步骤

教学内容

教学方法

教学手段

师生活动

知识讲授

讲解属性选择器：

E[att^=”value”]、E [att$=”value”]、E [att*=”value”]的使用

讲授法

多媒体

课件演示

教师：讲授知识

学生：边听边练

学生实践

创建一个新页面进行实践 E[att^=”value”]、E [att$=”value”]、E [att*=”value”]的使用。

实验教学法

多媒体

教师：辅导交流

学生：实践练习

知识讲授

讲解关系选择器：

子代选择器(E>F)、相邻兄弟选择器(E+F)、普通兄弟选择器(E~F)

讲授法

多媒体

课件演示

教师：讲授知识

学生：边听边练

学生实践

学生创建一个新页面进行实践子代选择器(E>F)、相邻兄弟选择器(E+F)、普通兄弟选择器(E~F)

实验教学法

多媒体

教师：辅导交流

学生：实践练习

知识讲授

讲解结构伪类选择器：

基本的结构性伪类选择器、子元素伪类选择器

讲授法

多媒体

课件演示

教师：讲授知识

学生：边听边练

学生实践

学生创建一个新页面进行实践基本的结构性伪类选择器、子元素伪类选择器

实验教学法

多媒体

教师：辅导交流

学生：实践练习

课堂

总结

(1)属性选择器

(2)关系选择器

(3)结构伪类选择器

教师讲解

多媒体

课件演示

整理笔记

引导创新

任务拓展

浏览京东网站页面，认识属性选择器、关系选择器、结构伪类选择器

教师指导

学生自学

多媒体

布置作业

提