HTML5+CSS3网页设计实战 教案 4.7 图像类 img标签

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。24.7图像、视音频类标签该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1）掌握图像路径中的相对、绝对路径。（2）掌握图像常用的样式外观设置。能力目标：（1）具备设计常见形状图片的能力。（2）具备精确计算图片在容器内部采用的尺寸的能力。素养目标：（1）在编程过程中，强调细节管理、质量意识，培养学生追求卓越的工匠精神。图像类标签相对、绝对路径，img标签的类别。通过展示以往学生作业中图片无法显示的问题来讲述路径的设置。完成一组图片外观的样式定义。通过案例讲解及实践，让学生掌握图片标签的用法。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习a链接的四种伪类，以及四种伪类的定义顺序。页面实际操作中，通常定义哪些a标签伪类即可？回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入随着网络带宽的增加，越来越多的网页频繁使用各种尺寸的图片，相对于文字简单外观效果而言，图片具备更多的操作空间，如何定义美观、独特的图片外观，我们要了解img标签的相关属性。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授4.7图像、视音频类标签谈到些标签，初学者容器出错的地方在于“src属性”设置错误，不明白相对路径与绝对路径的区别，经常导致图片刷不出。相对路径：就是相对于当前文件的路径。网页中一般表示路径使用这个方法。相对路径所常用的两个特殊符号，"./"代表目前所在的目录，"../"代表上一层目录。绝对路径：就是该文件在硬盘（主机）上真正的路径，绝对路径在网页中实际很少用到，可以这么理解，在网页中使用http://开头的地址便是绝对路径。4.7.1img标签<img>标签从视觉上常理感觉方方正正、大块的图像标签应该是块级元素，但与感觉相反，img是内联块级标签。听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施【案例13】尝试给如图4-63所示的图片增加不一样的样式效果，比如边框、内边距的设计。（1）书写HTML代码。（2）编写对应的CSS代码。【案例14】制作图片在hover状态下，图片缓慢放大的效果。（1）编写HTML代码。（2）编写对应的CSS代码。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分项目搭建站点结构正确，文件命名合理。10练习1能完成正确的静态页面效果，html及css代码正确。50练习2能完成hover状态下的交互，属性值合理。40总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课，要求我们：（1）掌握图像路径中的相对、绝对路径。（2）掌握图像常用的样式外观设置。（3）具备精确计算图片在容器内部采用的尺寸的能力