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

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

1、（中职）Web 前端设计基础 项目二-2 电子教案教学课题教学课题项目 2 网页中的文本的排版2.2 知识准备授课班级授课班级授课时间授课时间教学目标教学目标知识目标知识目标1.掌握在网页中添加文字列表的方法；2.掌握在网页中添加图片的方法。能力目标能力目标1.培养学生自主学习、分析问题和解决问题的能力；2.培养学生熟练运用所学知识的能力。德育目标德育目标1.鼓励学生主动学习，提高学习兴趣，提升学生的专业素质；2.培养学生的团队合作精神。学情分析学情分析通过上节课的学习，已经掌握了在网页中添加各种文本的方法、文本格式化标签的使用以及文字的排版标签的应用。本节课让大家学习后能利用标签自如地处理大

2、段文字的排版和简单的图文混排。教学重点教学重点1.文字列表；2.添加图片。教学难点教学难点1.建立有序列表；2.建立无序列表；3.建立自定义列表；4.网页中添加图片。教学方法教学方法项目教学法、多媒体辅助教学法、讲练结合法教学过程教学过程教学环节教学环节教学内容教学内容师生活动师生活动新课导入给学生展示一个网页页面，通过页面中文字列表及页面中的图片，导入本节课的内容。教师提出问题，学生可分组讨论，协作探究。技能学习一、文字列表一、文字列表1.建立有序列表建立有序列表有序列表项有序列表项有序列表项【例 2-3】建立有序列表实例，代码如下所示。12345有序列表67olfloat:left;wid

3、th:100px;89教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。（中职）Web 前端设计基础 项目二-2 电子教案101112HTML13CSS14JavaScript15jQuery161718HTML19CSS20JavaScript21jQuery222324HTML25CSS26JavaScript27jQuery282930HTML31CSS32JavaScript33jQuery343536HTML37CSS38JavaScript39jQuery404142在浏览器中预览效果如图所示。2.建立无序列表建立无序列表

4、无序列表项无序列表项无序列表项教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。（中职）Web 前端设计基础 项目二-2 电子教案【例 2-4】建立无序列表实例，代码如下所示。12345无序列表67ulfloat:left;width:100px;89101112HTML13CSS14JavaScript15jQuery161718HTML19CSS20JavaScript21jQuery222324HTML25CSS26JavaScript27jQuery282930HTML31CSS32JavaScript33jQuery3435

5、36在浏览器中预览效果如图所示。教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。（中职）Web 前端设计基础 项目二-2 电子教案3.建立自定义列表建立自定义列表定义名词定义描述【例 2-5】建立自定义列表实例，代码如下所示。12345自定义列表6789文本排版10换行标签 br11段落标签 p12标题标签 h1h613文字列表14有序列表 ol15无序列表 ul16自定义列表 dl171819在浏览器中预览效果如图所示。二、添加图片二、添加图片1.img 标签标签 src 属性属性2.img 标签标签 alt 属性属性3.img

6、标签标签 title 属性属性（中职）Web 前端设计基础 项目二-2 电子教案【例 2-6】使用相对路径插入图像实例，文件结构及代码如图所示。在浏览器中预览效果如图所示。知识归纳本节课学习了在网页中添加图像、列表等标签元素内容，掌握了、等标签的使用方法。标签标签格式格式说明说明分割（块元素）区域（行内元素）无序列表 有序列表定义名词定义描述自定义列表图像教师讲授，学生归纳总结，并作适当的笔记。课后作业一、选择题1.制作网页时，如果想在段落内每个项目前面加上 1、2、3 等有顺序的数字，可以使用_标签。ABCD2.制作网页时，如果想在段落内每个项目前面加上“”符号，可以使用_标签。ABCD学生上机完成任务并提交，进行分组互评。（中职）Web 前端设计基础 项目二-2 电子教案3.img 标签的_属性用于指定图像源文件所在的路径。AsrcBaltCtitleDwidth二、上机实训上机完成例 2-3 到例 2-6 的实例操作。教学反思教学反思（中职）Web 前端设计基础 项目二-2 电子教案感谢您的支持与使用感谢您的支持与使用如果内容侵权请联系删除如果内容侵权请联系删除仅供教学交流使用仅供教学交流使用