Web前端开发之网页设计 教案 单元3 CSS基础.docx

《Web前端开发之网页设计 教案 单元3 CSS基础.docx》由会员分享，可在线阅读，更多相关《Web前端开发之网页设计 教案 单元3 CSS基础.docx（10页珍藏版）》请在第一文库网上搜索。

1、Web前端开发之网页设计课程教学单元设计教学单元3CSS基础授课教师：授课班级：学时：20教学条件预装Web前端开发工具HBUikier等的计算机；局域网环境；教学广播软件教学素材教材、教学文档、教学课件、案例项目库、教学平台等教学目标设计知识目标：CSS基本概念(2) CSS选择器CSS文本样式(4) CSS背景和边框样式(5) CSS盒子模型(6) CSS设置超链接和列表样式设置表格和表单样式(8) CSS浮动布局(9) CSS定位布局(10) CSS的继承性与优先级能力目标：了解CSS的基本概念，掌握CSS的基本语法以及在网页中引入CSS的方法。理解选择器的作用，掌握CSS各类型选择器的

2、使用。(3)了解网页文本、网页元素的背景和边框的各种属性，掌握它们的设置方法。(4)理解盒子模型，掌握对网页元素进行内、外边距控制的方法。(5)掌握运用CSS灵活设置超链接、列表、表格以及表单外观样式的技能。(6)了解CSS样式属性的继承性与优先级。教学内容(1)CSS概述、CSS各种加载方法CSS选择器基础，掌握选择器类型特征、适合场景CSS文本样式，理解文本表现形式，掌握文本样式设计(4) CSS背景和边框样式，理解不同网页元素表现形式，掌握背景与边框样式设计(5) CSS盒子模型，理解盒子模型原理，掌握内外边距、边等属性的设计要点(6) CSS设置超链接和列表样式，掌握超链接的样式设计，

3、各导航列表的样式设计CSS设置表格和表单样式，掌握利用表格实现分类，综合利用所学来实现表单设计(8)CSS浮动布局+CSS定位布局，掌握基础布局技术，灵活实现综合页面设计CSS的继承性与优先级，掌握网页元素显示顺序重点：CSS不同场景对加载方式的要求。(2)文本、图片、超链接、列表、表格、表单等各种元素的背景、边框等样式。用浮动、定位布局实现页面样式设计。(4)关注网页元素的继承性与优行级顺序。难点：基础网页元素的样式设置。网页基础结构的样式的设置。(3)表单、列表等复杂结构的设置。(4)灵活运用基础结构来设置复杂的网页结构。教学过程设计任务3-1：CSSIR述(2学时)主要步骤教学内容教学方

4、法教学手段师生活动任务引入什么是CSS?教师讲授启发引入多媒体教师：问题提问学生：问题讨论知识讲解(1)CSS的发展史CSS在网页布局中的三大优势(3)CSS语法规则(4)网页引入CSS的方法启发讲解讨论归纳多媒体课件演示教师：知识讲解学生：记录笔记师生互动交流示范操作操作1：CSS样式设置方法。操作2：网页引入CSS的各种方法。问题引导操作演示分析归纳多媒体系统演示老师：操作演示学生：观摩思考老师：归纳总结实战训练实战1：利用外部样式设置网页字体颜色。实战2：利用行内、内嵌样式来设置网页背景等效果。动手实践做中学多媒体系统操作学生：实践操作老师：巡视检查评估讨论展示学生实战任务完成的效果。评

5、估讨论实战任务完成的正确性。评估讨论实战任务完成的规范性；记载学生实战认为完成的考核结果。教师启发讨论归纳分数激励实训项目单学生：演示交流老师：点评激励课堂总结(1)归纳总结CSS的基本概念。归纳总结CSS三种样式表适用不同场景下元素样式的设置。教师讲解多媒体课件演示学生：整理笔记老师：引导创新课后作业3.1在线练习作业练习在线练习平台老师：布置作业提出要求学生：完成作业教学过程设计任务3-2：掌握CSS选择器的用法。(2学时)主要步骤敕学内容教学方法教学手段师生活动任务引入选择器的作用及基础选择器教师讲授启发引入多媒体教师：问题提问学生：问题讨论知识讲解(1) CSS基本选择器。(2) CS

6、S组合选择器。(3) CSS属性选择器。(4) CSS伪选择器启发讲解讨论归纳多媒体课件演示教师：知识讲解学生：记录笔记师生互动交流示范操作操作1：使用基本选择器选择页面元素。操作2：使用组合选择器选择页面元素。操作3：使用属性选择器选择页面元素。操作4：使用伪选择器选择页面元素。问题引导操作演示分析归纳多媒体系统演示老师：操作演示学生：观摩思考老师：归纳总结实战训练实战1：使用基本选择器选择文本。实战2：使用组合选择器选择文本。实战3：使用属性选择器选择文本。实战4：使用伪选择器选择文本。动手实践做中学多媒体系统操作学生：实践操作老师：巡视检查评估讨论(1)展示学生实战任务完成的效果。评估讨

7、论实战任务完成的正确性。评估讨论实战任务完成的规范性；(4)记载学生实战认为完成的考核结果。教师启发讨论归纳分数激励实训项目单学生：演示交流老师：点评激励课堂总结(1)归纳总结CSS基本、组合选择器。(2)归纳总结CSS属性选择器。归纳总结CSS伪选择器。教师讲解多媒体课件演示学生：整理笔记老师：引导创新课后作业3.2在线练习作业练习在线练习平台老师：布置作业提出要求学生：完成作业任务3-3：掌握CSS3文本样式。(2学时)主要步骤教学内容教学方法教学手段师生活动任务引入回顾CSS常用文本属性的设置教师讲授启发引入多媒体教师：问题提问学生：问题讨论知识讲解(1) CSS文本相关属性。(2) C

8、SS设置多列文本。(3) CSS设置自定义字体。启发讲解讨论归纳多媒体课件演示教师：知识讲解学生：记录笔记师生互动交流示范操作操作1：基础文本样式设置。操作2：设置文本垂直居中的样式。操作3：文本综合样式设置。操作4：设置文字修饰的样式。问题引导操作演示分析归纳多媒体系统演示老师：操作演示学生：观摩思考老师：归纳总结实战训练实战1：文本综合样式设置。实战2：设置文字修饰的样式。动手实践做中学多媒体系统操作学生：实践操作老师：巡视检查评估讨论展示学生实战任务完成的效果。评估讨论实战任务完成的正确性。评估讨论实战任务完成的规范性；记载学生实战认为完成的考核结果。教师启发讨论归纳分数激励实训项目单学

9、生：演示交流老师：点评激励课堂总结归纳总结CSS文本相关属性的使用。归纳总结CSS文本修饰属性的使用。教师讲解多媒体课件演示学生：整理笔记老师：引导创新课后作业3.3在线练习作业练习在线练习平台老师：布置作业提出要求学生：完成作业教学过程设计任务3-4：掌握CSS背景和边框样式。(2学时)主要步骤教学内容教学方法教学手段师生活动任务引入分析文本、图片等元素CSS背景和边框属性的需要教师讲授启发引入多媒体教师：问题提问学生：问题讨论知识讲解CSS设置背景相关属性CSS设置边框相关属性启发讲解讨论归纳多媒体课件演示教师：知识讲解学生：记录笔记师生互动交流示范操作操作1：设置背景色、背景图片的位置、

10、位置绑定以及重复样式。操作2：设置边框线的颜色、粗细尺寸、类型相关样式。问题引导操作演示分析归纳多媒体系统演示老师：操作演示学生：观摩思考老师：归纳总结实战训练实战1：设置不同图片背景效果。实战2：为网页元素设置边框的各种不同样式效果。动手实践做中学多媒体系统操作学生：实践操作老师：巡视检查评估讨论展示学生实战任务完成的效果。评估讨论实战任务完成的正确性。评估讨论实战任务完成的规范性；(4)记载学生实战认为完成的考核结果。教师启发讨论归纳分数激励实训项目单学生：演示交流老师：点评激励课堂总结(1)归纳总结CSS背景属性的使用。归纳总结渐变背景色的设置方法。归纳总结网页元素的边框样式设置方法。教

11、师讲解多媒体课件演示学生：整理笔记老师：引导创新课后作业3.4在线练习作业练习在线练习平台老师：布置作业提出要求学生：完成作业教学过程设计任务3-5：掌握CSS盒模型基本属性。(2学时)主要步骤教学内容教学方法教学手段师生活动任务引入讲述盒模型的构成及其基本属性。教师讲授启发引入多媒体教师：问题提问学生：问题讨论知识讲解盒模型marginpadding、border等基础属性CSS显示模式设置内外边距及外边距合并启发讲解讨论归纳多媒体课件演示教师：知识讲解学生：记录笔记师生互动交流示范操作操作1：使用内外边距属性设置盒模型。操作2：块元素、行元素、行间块元素的设置。操作3：外边距的合并。问题引

12、导操作演示分析归纳多媒体系统演示老师：操作演示学生：观摩思考老师：归纳总结实战训练实战1：设置内外边距来改变页面元素效果。实战2：使用外边距合并实现垂直方向效果。动手实践做中学多媒体系统操作学生：实践操作老师：巡视检查评估讨论(1)展示学生实战任务完成的效果。评估讨论实战任务完成的正确性。评估讨论实战任务完成的规范性；(4)记载学生实战认为完成的考核结果。教师启发讨论归纳分数激励实训项目单学生：演示交流老师：点评激励课堂总结归纳总结盒模型的基础属性。归纳总结CSS显示模式的特性。(3)归纳总结垂直方向的外边距设置。教师讲解多媒体课件演示学生：整理笔记老师：引导创新课后作业3.5在线练习作业练习

13、在线练习平台老师：布置作业提出要求学生：完成作业教学过程设计任务3-6：掌握CSS设置超链接和列表样式。(2学时)主要步骤教学内容教学方法教学手段师生活动任务引入通过CSS设置各种超链接和列表样式教师讲授启发引入多媒体教师：问题提问学生：问题讨论知识讲解(1)CSS超链接伪类样式。CSS超链接的不同类型样式。CSS各种不同列表的样式设置。启发讲解讨论归纳多媒体课件演示教师：知识讲解学生：记录笔记师生互动交流示范操作操作1：根据文本、图片等类型设置相应的样式效果。操作2：设置超链接的背景色与背景图片。操作3：设置超链接的各中鼠标样式。问题引导操作演示分析归纳多媒体系统演示老师：操作演示学生：观摩思考老师：归纳总结实战训练实战1：设置超链接的基本样式。实战2：设置超链接的背景效果。实战3：设置超链接的鼠标效果。动手实践做中学多媒体系统操作学生：实践操作老师：巡视检查评估讨论(1)展示学生实战任务完成的效果。评估讨论实战任务完成的正确性。评估讨论实战任务完成的规范性；(4)记载学生实战认为完成的考核结果。教师启发讨论归纳分数激励实训项目单学生：演示交流老师：点评激励课堂总结(1)归纳总结CSS超链接样式的设置。归纳总结CSS列表的设置。(3)归纳总结CSS的超链接鼠标效果。教师讲解多媒体课件演示学生：整理笔记老师：引导创