《Web前端开发》教学讲义 Web前端设计基础 项目二-2.docxVIP

教学课题 项目2 网页中的文本的排版—2.2知识准备 授课班级 授课时间 教学目标 知识目标 1.掌握在网页中添加文字列表的方法； 2.掌握在网页中添加图片的方法。 能力目标 1.培养学生自主学习、分析问题和解决问题的能力； 2.培养学生熟练运用所学知识的能力。 德育目标 1.鼓励学生主动学习，提高学习兴趣，提升学生的专业素质； 2.培养学生的团队合作精神。 学情分析 通过上节课的学习，已经掌握了在网页中添加各种文本的方法、文本格式化标签的使用以及文字的排版标签的应用。 本节课让大家学习后能利用标签自如地处理大段文字的排版和简单的图文混排。 教学重点 1.文字列表； 2.添加图片。 教学难点 1.建立有序列表； 2.建立无序列表； 3.建立自定义列表； 4.网页中添加图片。 教学方法 项目教学法、多媒体辅助教学法、讲练结合法 教学过程 教学环节 教学内容 师生活动 新课导入 给学生展示一个网页页面，通过页面中文字列表及页面中的图片，导入本节课的内容。 教师提出问题，学生可分组讨论，协作探究。 技能学习 一、文字列表 1. 建立有序列表ol ol li有序列表项/li li有序列表项/li li有序列表项/li /ol 【例2-3】建立有序列表实例，代码如下所示。 1 !DOCTYPE html 2 html lang=en 3 head 4 meta charset=UTF-8 5 title有序列表/title 6 style 7 ol{float:left;width:100px;} 8 /style 9 /head 10 body 11 ol 12 liHTML/li 13 liCSS/li 14 liJavaScript/li 15 lijQuery/li 16 /ol 17 ol type=A 18 liHTML/li 19 liCSS/li 20 liJavaScript/li 21 lijQuery/li 22 /ol 23 ol type=a 24 liHTML/li 25 liCSS/li 26 liJavaScript/li 27 lijQuery/li 28 /ol 29 ol type=I 30 liHTML/li 31 liCSS/li 32 liJavaScript/li 33 lijQuery/li 34 /ol 35 ol type=i 36 liHTML/li 37 liCSS/li 38 liJavaScript/li 39 lijQuery/li 40 /ol 41 /body 42 /html 在浏览器中预览效果如图所示。 2. 建立无序列表ul ul li无序列表项/li li无序列表项/li li无序列表项/li /ul 【例2-4】建立无序列表实例，代码如下所示。 1 !DOCTYPE html 2 html lang=en 3 head 4 meta charset=UTF-8 5 title无序列表/title 6 style 7 ul{float:left;width:100px;} 8 /style 9 /head 10 body 11 ul 12 liHTML/li 13 liCSS/li 14 liJavaScript/li 15 lijQuery/li 16 /ul 17 ul type=disc 18 liHTML/li 19 li