（中职）Web前端设计基础 项目八-2电子教案.docx

《（中职）Web前端设计基础 项目八-2电子教案.docx》由会员分享，可在线阅读，更多相关《（中职）Web前端设计基础 项目八-2电子教案.docx（7页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、（中职）Web 前端设计基础 项目八-2 电子教案教学课题教学课题项目 8 CSS 3 创建网页菜单8.2 知识准备授课班级授课班级授课时间授课时间教学目标教学目标知识目标知识目标 1.掌握 CSS 3 美化项目列表。能力目标能力目标1.培养学生自主学习、分析问题和解决问题的能力；2.培养学生熟练运用所学知识的能力。德育目标德育目标1.鼓励学生主动学习，提高学习兴趣，提升学生的专业素质；2.培养学生的团队合作精神。学情分析学情分析通过前面知识的学习，已经掌握了 HTML 的基本结构、图文混排的方法、网页中表格的制作方法、如何创建超链接和制作音视频播放器、网页中的表单创建方法、CSS 3 的各类

2、选择器的应用和 CSS 3 美化文本、段落和图片的方法。通过网页菜单可以在不同的网页分类中自由切换，网页菜单也是网站内容条理化、交互人性化不可或缺的元素之一。利用项目列表、超链接和 CSS 3 属性，能够制作出美观大方的网页菜单。教学重点教学重点1.美化无序列表和有序列表；2.制作图片列表；3.列表的复合属性。教学难点教学难点1.美化无序列表和有序列表；2.列表的复合属性。教学方法教学方法项目教学法、多媒体辅助教学法、讲练结合法教学过程教学过程教学环节教学环节教学内容教学内容师生活动师生活动新课导入给学生展示一个网页页面，通过网页中项目列表的效果，导入本节课的内容。教师提出问题，学生可分组讨论

3、，协作探究。技能学习一、一、美化无序列表和有序列表美化无序列表和有序列表在以前的项目学习中，有序列表和无序列表的列表项符号都是使用 type 属性来定义的，type 属性值可以为“disc（默认值是实心圆）”、“circle（空心圆）”和“square（实心正方形）”，这是在标签属性中定义的。在 CSS 3 中，不管是有序列表还是无序列表，都使用 list-style-type 属性来定义列表符号，格式如下：list-style-type:属性值;【例 8-4】美化无序列表和有序列表实例，代码如下所示。12345美化无序列表和有序列表教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学

4、生与老师互动，共同完成操作任务，借此查看教学效果。（中职）Web 前端设计基础 项目八-2 电子教案67*margin:0px;padding:0px;font-family:微 软 雅黑;font-size:12px;8.big01,.big029width:400px;10border:1px red dashed;11margin:10px 0 0 10px;1213pmargin:3px 0 0 5px;color:3ef;font-size:14px;14.big01 ulmargin-left:40px;list-style-type:disc;15liline-height:20

5、px;16.big02 olmargin-left:40px;1718192021无序列表2223政府工作报告再提人工智能“四问”24谷歌发布全球首个 72 量子比特通用量子计算机252018家博会开展在即格力将重磅发布节能26全球首款“4D 吃糖”设备：桥本环奈喂你吃糖27华为 CEO 透露:今年华为会发布新款智能手表28293031有序列表3233政府工作报告再提人工智能 业界委员解答“四问”34谷歌发布全球首个 72 量子比特通用量子计算机352018 家博会开展在即 格力将重磅发布节能“黑科技.36全球首款“4D 吃糖”设备：桥本环奈喂你吃糖37华为 CEO 余承东透露:今年华为会发布

6、新款智能手表教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。（中职）Web 前端设计基础 项目八-2 电子教案38394041在浏览器中预览效果如图所示。二、制作图片列表二、制作图片列表在CSS 3中list-style-image属性用来定义有序或无序列表项标志的图像，可以将项目符号替换成任意的图像，格式如下：list-style-image:none|url;使用图像作为项目符号时，图像通常显示在列表的外部，在 CSS 3 中，图像相对于列表项内容的放置位置可以使用list-style-position 属性进行控制，格式如下：

7、list-style-position:outside|inside;【例 8-5】制作图片列表实例，代码如下所示。12345制作图片列表67*margin:0px;padding:0px;font-family:微 软 雅黑;font-size:12px;8.big019width:320px;10border:1px red dashed;11margin:10px 0 0 10px;1213pmargin:3px 0 0 5px;color:3ef;font-size:14px;14.big01 ulmargin-left:40px;15li16line-height:20px;教师操作

8、演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。（中职）Web 前端设计基础 项目八-2 电子教案17list-style-image:url(images/arrow_right.png);1819.poslist-style-position:inside;2021222324图片列表2526政府工作报告再提人工智能解答“四问”27谷歌发布全球首个 72 量子比特通用量子计算机282018 家博会开展在即 格力将重磅发布节能29全球首款“4D吃糖”设备 30今年华为会发布新款智能手表31323334在浏览器中预览效果如图所示。三、列表的

9、复合属性三、列表的复合属性在对项目列表进行操作时，可以直接使用一个复合属性list-style 来定义，格式如下：list-style:style;【例 8-6】列表的复合属性实例，代码如下所示。1234（中职）Web 前端设计基础 项目八-2 电子教案5列表的复合属性67*margin:0px;padding:0px;font-family:微 软 雅黑;font-size:12px;8.big019width:320px;10border:1px red dashed;11margin:10px 0 0 10px;1213pmargin:3px 0 0 5px;color:3ef;font

10、-size:14px;14.big01 ulmargin-left:40px;15liline-height:20px;list-style:none;16.poslist-style:insideurl(images/arrow_right.png);1718192021列表的复合属性2223政府工作报告再提人工智能解答“四问”24谷歌发布全球首个 72 量子比特通用量子计算机252018家博会开展在即格力将重磅发布26全球首款“4D吃糖”设备27今年华为会发布新款智能手表28293031在浏览器中预览效果如图所示。（中职）Web 前端设计基础 项目八-2 电子教案知识归纳本节课学习了使用

11、CSS3 对项目列表的美化方法。1改变列表项符号，使用 list-style-type 来实现，不要列表符号使用 list-style-type:none;实现。2使用图片作为项目列表项符号，用 list-style-image：url（相对路径后者绝对路径）实现。3项目列表项缩进，使用 list-style-position:inside;实现。4列表项的复合属性，使用 list-style:属性值 1 属性值 2属性值 3;属性值最多三个。教师讲授，学生归纳总结，并作适当的笔记。课后作业一、选择题1.有 序 列 表 和 无 序 列 表 的 列 表 项 符 号 都 是 使 用_属性来定义的。

12、AlistBstyleCtypeDsize2._属性用来定义有序或无序列表项标志的图像。Alist-styleBlist-style-imageClist-style-typeDlist-style-position3.列表的复合属性用_来定义。Alist-styleBlist-style-imageClist-style-typeDlist-style-position二、上机实训上机完成例 8-4 和例 8-6 的实例操作。学生上机完成任务并提交，进行分组互评。教学反思教学反思（中职）Web 前端设计基础 项目八-2 电子教案感谢您的支持与使用感谢您的支持与使用如果内容侵权请联系删除如果内容侵权请联系删除仅供教学交流使用仅供教学交流使用