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

《Web前端开发之网页设计》课程教学单元设计

教学单元3CSS基础

授课教师：授课班级：学时：20

教学条件预装Web前端开发工具HBuilder等的计算机：局域网环境；教学广播软件

教学素材教材、教学文档、教学课件、案例项目库、教学平台等

教学目标设计

知识目标：能力目标：

(1)CSS基本概念(1)了解CSS的基本概念，掌握CSS的基本语法以及

⑵CSS选择器在网页中引入CSS的方法。

(3)CSS文本样式(2)理解选择器的作用，掌握CSS各类型选择器的使

(4)CSS背景和边框样式用。

(5)CSS盒子模型(3)了解网页文本、网页元素的背景和边框的各种属

(6)CSS设置超链接和外衣样式性，掌握它们的设置方法。

⑺设置表格和表单样式(4)理解盒子模型，掌握对网页元素进行内、外边距

⑻CSS浮动布局控制的方法。

(9)CSS定位布局⑸掌握运用CSS灵活设置超链接、列表、表格以及

(10)css的继承性与优先级表单外观样式的技能。

(6)了解CSS样式属性的继承性与优先级。

(1)CSS概述、CSS各种加载方法

⑵CSS选择器基砒，掌握选择器类型特征、适合场景

⑶CSS文本样式，理解文本表现形式，掌握文本样式设计

(4)CSS背景和边框样式，理解不同网页元素表现形式，掌握背景与边框样式设计

教学内容(5)CSS盒子模型，理解盒子模型原理，掌握内外边距、边等属性的设计要点

(6)CSS设置超链接和列表样式，掌握超链接的样式设计，各导航列表的样式设计

(7)CSS设置表格和表单样式，掌握利用表格实现分类，综合利用所学来实现表单设计

(8)CSS浮动布局+CSS定位布局，掌握基础布局技术，灵活实现综合页面设计

(9)CSS的继承性与优先级，掌握网页元素显示顺序

重点：难点：

(1)CSS不同场景对加载方式的要求。(1)基础网页元素的样式设置。

⑵文本、图片、超链接、列表、表格、表单⑵网页基础结构的样式的设置。

等各种元素的背景、边框等样式。(3)表单、列表等复杂结构的设置。

⑶用浮动、定位布局实现页面样式设计。⑷灵活运用基础结构来设置复杂的网页结构。

(4)关注网页元素的继承性与优行级顺序。

教学过程设计

任务3-1：CSS概述(2学时)

主要

教学内容教学方法教学手段师生活动

步骤

任务教师讲授教师：问题提问

什么是CSS?多媒体

引入启发引入学生：问题讨论

(1)CSS的发展史

教师：知识讲解

知识⑵CSS在网页布局中的三大优势启发讲解多媒体

学生：记录笔记

讲解(3)CSS语法规则讨论归纳课件演示

师生互动交流

(4)网页引入CSS的方法

问题引导老师：操作演示

示范操作1：CSS样式设置方法。多媒体

操作演示学生：观摩思考

操作操作2：网页引入CSS的各种方法。系统演示

分析归纳老师：归纳总结

实战1：利用外部样式设置网页字体

实战颜色。动手实践多媒体学生：实践操作

训练实战2：利用行内、内嵌样式来设置做中学系统操作老师：巡视检查

网页背景等效果。

⑴展示学生实战任务完成的效果。

⑵评估讨论实战任务完成的正确性。教师启发

评估学生：演示交流

⑶评估讨论实战任务完成的规范性：讨论归纳实训项目单

讨论(4)记载学生实战认为完成的考核结老师：点评激励

分数激励

果。

(1)归纳总结CSS的基本概念。

课堂多媒体学生：整理笔记

⑵归纳总结CSS三种样式表适用不教师讲解

总结课件演示老师：引导创新

同场景下元素样式的设置。

老师:布置作业

谍后

3.1在线练习作业练习在线练习平台提出要求

作业

学生：完成作业

教学过程设计

任务3-2：掌握CSS选择器的用法。(2学时)

主要

教学内容教学方法教学手段师生活动

步骤

任务教师讲授教师：问题提问

选择器的作用及基础选择器多媒体

引入启发引入学生：问题讨论

(l)CSS基本选择器。

教师：知识讲解

知识(2)CSS组合选择器。启发讲解多媒体

学生：记录笔记

讲解(3)CSS属性选择器。讨论归纳课件演示

师生互动交流

(4)CSS伪选择器

操作1:使用基本选择器选择页面元

索。

操作2：使用组合选择器选择页面元问题引导老师：操作演示

示范多媒体

素。操作演示学生：观摩思考

操作系统演示

操作3：使用属性选择㈱选择页面元分析归纳老师：归纳总结

素。

操作4：使用伪选择器选择页面元素。

实战1：使用基本选择器选择文本。

实战实战2：使用组合选择器选择文本。动手实践多媒体学生：实践操作

训练实战3：使用属性选择器选择文本。做中学系统操作老师：巡视检查

实战4：使用伪选择器选择文本。

⑴展示学生实战任务完成的效果。

⑵评估讨论实战任务完成的正确性。教师启发

评估学生：演示交流

⑶评估讨论实战任务完成的规范性：讨论归纳实训1项目单

片论老师：点评激励

(4)记载学生实战认为完成的考核结分数激励

果。

(1)归纳总结CSS基本、组合选择器。

课党多媒体学生：整理笔记

(2)归纳总结CSS属性选择器。教师讲解

总结课件演示老师：引导创新

⑶归纳总结CSS伪选择器。

老师：布置作业

谍后

3.2在线练习作业练习在线练习平台提出要求

作业

学生：完成作业

教学过程设计

任务3-4：掌握CSS背景和边框样式。(2学时)

主要

教学内容教学方法教学手段师生活动

步骤

任务分析文本、图片等元素CSS教师讲授教师：问题提问

多媒体

引入背景和边框属性的需要启发引入学生：问题讨论

教师：知识讲解

知识(l)CSS设置背景相关属性启发讲解多媒体

学生：记录笔记

讲解⑵CSS设置边框相关属性讨论归纳课件演示

师生互动交流

操作1:设置背景色、背景图片的位

问题引导老师；操作演示

示范置、位置绑定以及重复样式。多媒体

操作演示学生：观摩思考

操作操作2：设置边框线的颜色、粗细尺系统演示

分析归纳老师：归纳总结

寸、类型相关样式。

实战1：设置不同图片背景效果。

实战动于实践多媒体学生；实践操作

实战2：为网页元素设置边框的各种

训练做中学系统操作老师：巡视检查

不同样式效果。

⑴展示学生实战任务完成的效果。

⑵评估讨论实战任务完成的正确性。教师启发

评估学生：演示交流

⑶评估讨论实战任务完成的规范性：讨论归纳实训1项目单

讨论(4)记载学生实战认为完成的考核结老师：点评激励

分数激励

果。

(1)归纳总结CSS背景属性的使用。

课堂⑵归纳总结渐变背景色的设置方法。多媒体学生：整理笔记

教师讲解

总结⑶归纳总结网页元素的边框样式设课件演示老师：引导创新

置方法。

老师：布置作业

谍后

3.4在线练习作业练习在线练习平台提出要求

作业

学生：完成作业

教学过程设计

任务3-5：掌握CSS盒模型基本属性。(2学时)

主要

教学内容教学方法教学手段师生活动

步骤

任务教师讲授教师：问题提问

讲述盒模型的构成及其基本属性。多媒体

引入启发引入学生：问题讨论

⑴盒模型margin,padding»border

教师：知识讲解

知识等基础属性启发讲解多媒体

学生：记录笔记

讲解(2)CSS显示模式讨论归纳课件演示

师生互动交流

⑶设置内外边距及外边距合并

操作1：使用内外边距属性设置盒模

型。问题引导老师：操作演示

示范多媒体

操作2：块元素、行元素、行间块元操作演示学生：观摩思考

操作系统演示

素的设置。分析归纳老师：归纳总结

操作3：外边距的合并。

实战1：设置内外边距来改变页面元

实战素效果。动手实践多媒体学生：实践操作

训练实战2：使用外边距合并实现垂直方做中学系统操作老师：巡视检瓷

向效果。

(1)展示学生实战任务完成的效果。

⑵评估讨论实战任务完成的正确性。教师启发

评估学生：演示交流

⑶评估讨论实战任务完成的规范性：讨论归纳实训项目单

F论(4)记载学生实战认为完成的考核结老师：点评激励

分数激励

果。

⑴归纳总结盒模型的基础属性。

课堂多媒体学生：整理笔记

⑵归纳总结CSS显示模式的特性。教师讲解

总结课件演示老师：引导创新

⑶归纳总结垂直方向的外边距设置。

老师：布置作业

谍后

3.5在线练习作业练习在线练习平台提出要求

作业

学生：完成作业

教学过程设计

任务3-6：掌握CSS设置超链接和列表样式。(2学时)

主要

教学内容教学方法教学手段师生活动

步骤

任务通过CSS设置各种超储接和列表样教师讲授教师：问题提问

多媒体

引入式启发引入学生：问题讨论

(DC5S超链接伪类样式。教师：知识讲解

知识启发讲解多媒体

⑵CSS超链接的不同类型样式。学生：记录笔记

讲解讨论归纳课件演示

⑶CSS各种不同列表的样式设置。师生互动交流

操作1：根据文本、图片等类型设置

相应的样式效果。问题引导老师：操作演示

示范多媒体

操作2：设置超链接的背景色与背景操作演示学生：观摩思考

操作系统演示

图片。分析归纳老师：归纳总结

操作3：设置超链接的各中鼠标样式。

实战1：设置超链接的基本样式。

实战动手实践多媒体学生：实践操作

实战2：设置超链接的背景效果。

训练做中学系统操作老师：巡视检查

实战3：设置超链接的鼠标效果。

(1)展示学生实战任务完成的效果。

⑵评估讨论实战任务完成的正确性。教师启发

评估学生：演示交流

⑶评估讨论实战任务完成的规范性：讨论归纳实训项目单

讨论(4)记载学生实战认为完成的考核结老师：点评激励

分数激励

果。

⑴归纳总结CSS超链接样式的设置。

课堂多媒体学生：整理笔记

(2)归纳总结CSS列表的设置。教师讲解

总结课件演示老师：引导创新

⑶归纳总结CSS的超链接嗣标效果。

老师：布置作业

课后

3.6在线练习作业练习在线练习平台提出要求

作业

学生：完成作业

教学过程设计

任务3-7：掌握设置表格和表单样式。(2学时)

主要

教学内容教学方法教学手段师生活动

步骤

任务教师讲授教师：问题提问

通过CSS设置各种超链接和列表样式多媒体

引入启发引入学生：问题讨论

(l)C'bb超链接伪类样式。教师；知识讲解

知识启发讲解多媒体

(2)CSS超链接的不同类型样式。学生：记录笔记

法解讨论归纳课件演示

(3)CSS各种不同列表的样式设置…师生互动交流

操作1：根据文本、图片等类型设置相

应的样式效果。问题引导老师：操作演示

示范多媒体

操作2：设置超链接的背景色与背景图操作演示学生：观摩思考

操作系统演示

片。分析归纳老师：归纳总结

操作3：设置超链接的各中鼠标样式。

实战1：设置超链接的基本样式。

实战动手实践多媒体学生：实践操作

实战2：设置超链接的背景效果。

训练做中学系统操作老师：巡视检查

实战3：设置超链接的鼠标效果。

⑴展示学生实战任务完成的效果。

⑵评估讨论实战任务完成的正确性。

教师启发

评估学生：演示交流

(3)评估讨论实战任务完成的规范性：讨论归纳实训项目单

讨论老师：点评激励

(4)记载学生实战认为完成的考核结果。分数激励

⑴归纳总结CSS超链接样式的设置。

课堂多媒体学生：整理笔记

(2)归纳总结CSS列表的设置。教师讲解

总结课件演示老师：引导创新

(3)归纳总结CSS的超链接鼠标效果。

老师：布置作业

课后

3.6在线练习作业练习在线练习平台提出要求

作业

学生：完成作业

教学过程设计

任务3-8/9：掌握CSS浮动布局、定位布局。(4学时)

主要

教学内容教学方法教学手段师生活动

步骤

任务教师讲授教师：问题提问

通过CSS设置网页元素的样式多媒体

引入启发引入学生：问题讨论

(1)C5S浮动命局样式。教师：知识讲解

知识启发讲解多媒体

(2)CSS定位布局。学生：记录笔记

讲解讨论归纳课件演示

⑶CSS页面综合布局。师生互动交流

操作1：利用DIV+CSS实现网页元素

的浮动布局。问题引导老师：操作演示

示范多媒体

操作2：利用DIV+CSS实现网页元素操作演示学生：观摩思考

操作系统演示

的精确定位布局。分析归纳老师：归纳总结

操作3：实现综合页面的祢.局。

实战1：设置网页元素的浮动样式。

实战动手实践多媒体学生：实践操作

实战2：设置网页元素的定位样式。

训练做中学系统操作老师：巡视检查

(1)展示学生实战任务完成的效果。

⑵评估讨论实战任务完成的正确性。教师启发

评估学生：演示交流

⑶评估讨论实战任务完成的规范性：讨论归纳实训项目单

讨论老师：点评激励

(4)记载学生实战认为完成的考核结分数激励

果c

(1)归纳总结CSS中元素浮动布局的

设置。

课堂多媒体学生：整理笔记

⑵归纳总结CSS中元素定位布局的教师讲解

总结课件演示老师：引导创新

设置。

⑶归纳总结CSS的超链接鼠标效果。

老师：布置作业

谍后

3.8-3.9在线练习作业练习在线练习平台提出要求

作业

学生：完成作业

教学过程设计

任务3-10：掌握CSS的继承性与优先级。(2学时)

主要

教学内容教学方法