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

1、（中职）Web前端设计基础 项目八-2电子教案（中职）Web前端设计基础 项目八-2电子教案（中职）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】美化无序列表和有序列表实例，代码如下所示。1 2 3 4 5 美化无序列表和有序列表6 7 *margin:0px;padding:0px;font-family: 微软雅黑

4、;font-size:12px;8 .big01,.big029 width:400px;10 border:1px red dashed;11 margin:10px 0 0 10px;12 13 pmargin:3px 0 0 5px;color:3ef;font-size: 14px;14 .big01 ulmargin-left:40px;list-style-type: disc;15 liline-height: 20px;16 .big02 olmargin-left:40px;17 18 19 20 21 无序列表22 23 政府工作报告再提人工智能 “四问”24 谷歌发布全球

5、首个72量子比特通用量子计算机25 2018家博会开展在即格力将重磅发布节能26 全球首款“4D吃糖”设备：桥本环奈喂你吃糖27 华为CEO透露:今年华为会发布新款智能手表28 29 30 31 有序列表32 33 政府工作报告再提人工智能 业界委员解答“四问”34 谷歌发布全球首个72量子比特通用量子计算机35 2018家博会开展在即 格力将重磅发布节能“黑科技.36 全球首款“4D吃糖”设备：桥本环奈喂你吃糖37 华为CEO余承东透露:今年华为会发布新款智能手表38 39 40 41 在浏览器中预览效果如图所示。二、制作图片列表在CSS 3中list-style-image属性用来定义有序

6、或无序列表项标志的图像，可以将项目符号替换成任意的图像，格式如下：list-style-image: none | url;使用图像作为项目符号时，图像通常显示在列表的外部，在CSS 3中，图像相对于列表项内容的放置位置可以使用list-style-position属性进行控制，格式如下：list-style-position:outside|inside;【例8-5】制作图片列表实例，代码如下所示。1 2 3 4 5 制作图片列表6 7 *margin:0px;padding:0px;font-family: 微软雅黑;font-size:12px;8 .big019 width:320px

7、;10 border:1px red dashed;11 margin:10px 0 0 10px;12 13 pmargin:3px 0 0 5px;color:3ef;font-size: 14px;14 .big01 ulmargin-left:40px;15 li16 line-height: 20px;17 list-style-image: url(images/arrow_right.png);18 19 .poslist-style-position: inside;20 21 22 23 24 图片列表25 26 政府工作报告再提人工智能解答“四问”27 谷歌发布全球首个72

8、量子比特通用量子计算机28 2018家博会开展在即 格力将重磅发布节能29 全球首款“4D吃糖”设备 30 今年华为会发布新款智能手表31 32 33 34 在浏览器中预览效果如图所示。三、列表的复合属性在对项目列表进行操作时，可以直接使用一个复合属性list-style来定义，格式如下： list-style:style; 【例8-6】列表的复合属性实例，代码如下所示。1 2 3 4 5 列表的复合属性6 7 *margin:0px;padding:0px;font-family: 微软雅黑;font-size:12px;8 .big019 width:320px;10 border:1px

9、 red dashed;11 margin:10px 0 0 10px;12 13 pmargin:3px 0 0 5px;color:3ef;font-size: 14px;14 .big01 ulmargin-left:40px;15 liline-height: 20px;list-style: none;16 .poslist-style:inside url(images/arrow_right.png);17 18 19 20 21 列表的复合属性22 23 政府工作报告再提人工智能解答“四问”24 谷歌发布全球首个72量子比特通用量子计算机25 2018家博会开展在即格力将重磅发

10、布26 全球首款“4D吃糖”设备27 今年华为会发布新款智能手表28 29 30 31 在浏览器中预览效果如图所示。教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。知识归纳本节课学习了使用CSS3对项目列表的美化方法。1改变列表项符号，使用list-style-type来实现，不要列表符号使用list-style-t

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