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

《网页设计与制作(HTML+CSS+JavaScript)教学全套课件（第2版）刘万辉教学资源任务4 构建网站层叠样式表.doc》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、《网页设计与制作》课程教学单元设计淮安信息职业技术学院《网页设计与制作》课程教学单元设计单元4构建网站层叠样式表授课教师：网页设计与制作授课班级:学时：8教学条件实训室、HBulider或Dreamweaver、投影设备、广播软件、互联网络教学素材教材、课件、实训项目单、授课录像、案例库、教学网站等教学目标设计知识目标：（1）了解CSS3简介；（2）掌握CSS样式设置规则；（3）掌握CSS样式的调用方法；（4）掌握CSS基础选择器的使用方法；（5）掌握CSS3新增选择器的使用方法；（6）掌握CSS的继承与层叠性的应用。能力目标：（1）能正确应用CSS规则，合理选择CSS选择器编写CSS样式；

2、；（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

3、）任务实现代码。第5页共5页《网页设计与制作》课程教学单元设计淮安信息职业技术学院教学过程设计4.1CSS基础选择器的使用方法（学时数：2）主要步骤教学内容教学方法教学手段师生活动任务描述本任务就是在任务3的基础之上，编写基本的CSS样式表，实现网站头部的页面效果。讲授法多媒体教师：分析任务学生：信息交流知识讲授CSS3的发展历史以及主流浏览器的支持情况CSS样式设置规则CSS样式的调用方式讲授法多媒体课件演示教师：讲授知识学生：边听边练学生实践创建一个新页面进行实践CSS样式设置规则、CSS样式的调用方式实验教学法多媒体教师：辅导交流学生：实践练习知识讲授讲解CSS基础选择器：标签选择器、

4、类选择器、ID选择器讲授法多媒体课件演示教师：讲授知识学生：边听边练学生实践创建一个新页面进行实践标签选择器、类选择器、ID选择器。实验教学法多媒体教师：辅导交流学生：实践练习知识讲授讲解标签指定式选择器、包含选择器、群组选择器讲授法多媒体课件演示教师：讲授知识学生：边听边练学生实践创建一个新页面进行实践标签指定式选择器、包含选择器、群组选择器实验教学法多媒体教师：辅导交流学生：实践练习课堂总结CSS样式设置规则CSS样式的调用方式CSS基础选择器教师讲解多媒体课件演示整理笔记引导创新任务拓展浏览腾讯网站页面，认识HMTL与CSS的结构与作用。教师指导学生自学多媒体布置作业提出要求第5页共5

5、页《网页设计与制作》课程教学单元设计淮安信息职业技术学院教学过程设计4.2CSS3新增选择器的使用方法（学时数：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

6、）讲授法多媒体课件演示教师：讲授知识学生：边听边练学生实践学生创建一个新页面进行实践子代选择器（E>F）、相邻兄弟选择器（E+F）、普通兄弟选择器（E~F）实验教学法多媒体教师：辅导交流学生：实践练习知识讲授讲解结构伪类选择器：基本的结构性伪类选择器、子元素伪类选择器讲授法多媒体课件演示教师：讲授知识学生：边听边练学生实践学生创建一个新页面进行实践基本的结构性伪类选择器、子元素伪类选择器实验教学法多媒体教师：辅导交流学生：实践练习课堂总结（1）属性选择器（2）关系选择器（3）结构伪类选择器教师讲解多媒体课件演示整理笔记引导创新任务拓展浏览京东网站页面，认识属性选择器、关系选择器、结构伪类选择

7、器教师指导学生自学多媒体布置作业提出要求第5页共5页《网页设计与制作》课程教学单元设计淮安信息职业技术学院教学过程设计4.3CSS新选择与继承与层叠性（学时数：2）主要步骤教学内容教学方法教学手段师生活动知识讲授伪元素、伪类选择器、UI元素状态伪类选择器讲授法多媒体课件演示教师：讲授知识学生：边听边练学生实践学生创建一个新页面进行实践伪元素、伪类选择器、UI元素状态伪类选择器实验教学法多媒体教师：辅导交流学生