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)展示学生实战任务完成的效果。评估讨
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Web前端开发之网页设计 教案 单元3 CSS基础 Web 前端 开发 网页 设计 单元 CSS 基础
