《Web前端开发之网页设计》课程教学单元设计
教学单元3    CSS基础
授课教师：    授课班级：    学时：20
教学条件
预装Web前端开发工具HBUikier等的计算机；局域网环境；教学广播软件
教学素材
教材、教学文档、教学课件、案例项目库、教学平台等
教学目标设计
知识目标：
⑴CSS基本概念
(2)CSS选择器
⑶CSS文本样式
(4)CSS背景和边框样式
(5)CSS盒子模型
(6)CSS设置超链接和列表样式
⑺设置表格和表单样式
(8)CSS浮动布局
(9)CSS定位布局
(10)CSS的继承性与优先级
能力目标：
⑴了解CSS的基本概念，掌握CSS的基本语法以及在网页中引入CSS的方法。
⑵理解选择器的作用，掌握CSS各类型选择器的使用。
(3)了解网页文本、网页元素的背景和边框的各种属性，掌握它们的设置方法。
(4)理解盒子模型，掌握对网页元素进行内、外边距控制的方法。
(5)掌握运用CSS灵活设置超链接、列表、表格以及表单外观样式的技能。
(6)了解CSS样式属性的继承性与优先级。
教学内容
(1)CSS概述、CSS各种加载方法
⑵CSS选择器基础，掌握选择器类型特征、适合场景
⑶CSS文本样式，理解文本表现形式，掌握文本样式设计
(4)CSS背景和边框样式，理解不同网页元素表现形式，掌握背景与边框样式设计
(5)CSS盒子模型，理解盒子模型原理，掌握内外边距、边等属性的设计要点
(6)CSS设置超链接和列表样式，掌握超链接的样式设计，各导航列表的样式设计
⑺CSS设置表格和表单样式，掌握利用表格实现分类，综合利用所学来实现表单设计
(8)CSS浮动布局+CSS定位布局，掌握基础布局技术，灵活实现综合页面设计
⑼CSS的继承性与优先级，掌握网页元素显示顺序
重点：
⑴CSS不同场景对加载方式的要求。
(2)文本、图片、超链接、列表、表格、表单等各种元素的背景、边框等样式。
⑶用浮动、定位布局实现页面样式设计。
(4)关注网页元素的继承性与优行级顺序。
难点：
⑴基础网页元素的样式设置。
⑵网页基础结构的样式的设置。
(3)表单、列表等复杂结构的设置。
(4)灵活运用基础结构来设置复杂的网页结构。
教学过程设计
任务3-1：CSSIR述(2学时)
主要
步骤
教学内容
教学方法
教学手段    师生活动
任务引入
什么是CSS?
教师讲授启发引入
多媒体
教师：问题提问学生：问题讨论
知识
讲解
(1)CSS的发展史
⑵CSS在网页布局中的三大优势
(3)CSS语法规则
(4)网页引入CSS的方法
启发讲解讨论归纳
多媒体课件演示
教师：知识讲解学生：记录笔记师生互动交流
示范操作
操作1：CSS样式设置方法。
操作2：网页引入CSS的各种方法。
问题引导操作演示分析归纳
多媒体系统演示
老师：操作演示学生：观摩思考老师：归纳总结
实战训练
实战1：利用外部样式设置网页字体颜。
实战2：利用行内、内嵌样式来设置网页背景等效果。
动手实践做中学
多媒体系统操作
学生：实践操作老师：巡视检查
评估
讨论
⑴展示学生实战任务完成的效果。
⑵评估讨论实战任务完成的正确性。
⑶评估讨论实战任务完成的规范性；
⑷记载学生实战认为完成的考核结果。
教师启发讨论归纳分数激励
实训项目单
学生：演示交流老师：点评激励
课堂
总结
(1)归纳总结CSS的基本概念。
⑵归纳总结CSS三种样式表适用不同场景下元素样式的设置。
教师讲解
多媒体课件演示
学生：整理笔记老师：引导创新
课后作业
3.1在线练习
作业练习
在线练习平台
老师：布置作业提出要求
学生：完成作业
教学过程设计
任务3-2：掌握CSS选择器的用法。(2学时)
主要
步骤
敕学内容
教学方法
教学手段    师生活动
任务引入
选择器的作用及基础选择器
教师讲授启发引入
多媒体
教师：问题提问学生：问题讨论
知识
讲解
(1)CSS基本选择器。
(2)CSS组合选择器。
(3)CSS属性选择器。
(4)CSS伪选择器
启发讲解讨论归纳
多媒体课件演示
教师：知识讲解学生：记录笔记师生互动交流
示范
操作
操作1：使用基本选择器选择页面元素。
操作2：使用组合选择器选择页面元素。
操作3：使用属性选择器选择页面元素。
操作4：使用伪选择器选择页面元素。
问题引导操作演示分析归纳
多媒体系统演示
老师：操作演示学生：观摩思考老师：归纳总结
实战
训练
实战1：使用基本选择器选择文本。实战2：使用组合选择器选择文本。实战3：使用属性选择器选择文本。
实战4：使用伪选择器选择文本。
动手实践做中学
多媒体系统操作
学生：实践操作老师：巡视检查
评估
讨论
(1)展示学生实战任务完成的效果。
⑵评估讨论实战任务完成的正确性。
⑶评估讨论实战任务完成的规范性；
(4)记载学生实战认为完成的考核结果。
教师启发讨论归纳分数激励
实训项目单
学生：演示交流老师：点评激励
课堂
总结
(1)归纳总结CSS基本、组合选择器。
(2)归纳总结CSS属性选择器。
⑶归纳总结CSS伪选择器。
教师讲解
多媒体课件演示
学生：整理笔记老师：引导创新
课后作业
3.2在线练习
作业练习
在线练习平台
老师：布置作业提出要求
学生：完成作业

css 属性选择器
任务3-3：掌握CSS3文本样式。(2学时)
主要
步骤
教学内容
教学方法
教学手段
师生活动
任务引入
回顾CSS常用文本属性的设置
教师讲授启发引入
多媒体
教师：问题提问学生：问题讨论
知识
讲解
(1)CSS文本相关属性。
(2)CSS设置多列文本。
(3)CSS设置自定义字体。
启发讲解讨论归纳
多媒体课件演示
教师：知识讲解学生：记录笔记师生互动交流
示范
操作
操作1：基础文本样式设置。
操作2：设置文本垂直居中的样式。
操作3：文本综合样式设置。
操作4：设置文字修饰的样式。
问题引导操作演示分析归纳
多媒体系统演示
老师：操作演示学生：观摩思考老师：归纳总结
实战
训练
实战1：文本综合样式设置。
实战2：设置文字修饰的样式。
动手实践做中学
多媒体系统操作
学生：实践操作老师：巡视检查
评估
讨论
⑴展示学生实战任务完成的效果。
⑵评估讨论实战任务完成的正确性。
⑶评估讨论实战任务完成的规范性；
⑷记载学生实战认为完成的考核结果。
教师启发讨论归纳分数激励
实训项目单
学生：演示交流老师：点评激励
课堂
总结
⑴归纳总结CSS文本相关属性的使用。
⑵归纳总结CSS文本修饰属性的使用。
教师讲解
多媒体课件演示
学生：整理笔记老师：引导创新
课后作业
3.3在线练习
作业练习
在线练习平台
老师：布置作业提出要求
学生：完成作业

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。