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

下载本文档

6
0
约4.33千字
约 6页
2021-09-16 发布于湖北
举报
版权申诉

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

1、本文档共6页，可阅读全部内容。
2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击这里二次下载。
4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
5、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
6、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
7、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
8、VIP文档为合作方或网友上传，每下载1次，网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档

教学课题项目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 <li>HTML</li> 13 <li>CSS</li> 14 <li>JavaScript</li> 15 <li>jQuery</li> 16 </ol> 17 <ol type="A"> 18 <li>HTML</li> 19 <li>CSS</li> 20 <li>JavaScript</li> 21 <li>jQuery</li> 22 </ol> 23 <ol type="a"> 24 <li>HTML</li> 25 <li>CSS</li> 26 <li>JavaScript</li> 27 <li>jQuery</li> 28 </ol> 29 <ol type="I"> 30 <li>HTML</li> 31 <li>CSS</li> 32 <li>JavaScript</li> 33 <li>jQuery</li> 34 </ol> 35 <ol type="i"> 36 <li>HTML</li> 37 <li>CSS</li> 38 <li>JavaScript</li> 39 <li>jQuery</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

您可能关注的文档

文档评论（0）

一帆风顺 + 关注: 实名认证

文档贡献者

该用户很懒，什么也没介绍

咨询Ta 进入空间

1亿VIP精品文档

更多 >

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