2.3.2-﹤ img ﹥ 标签其他属性（教案）-《网页设计与制作(html5+css3+javascript)》同步教学（清华大学出版社）

教案 编号：PT-323 流水号：116 （首页）共 4页 课程 《网页设计与制作(html5+css3+javascript)》 一体化 理论 章节（课题）及内容 ﹤ img ﹥ 标签其他属性 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 知识与技能：掌握〈img〉标签的其他属性，如title、style、class等，并能够熟练运用。 · 过程与方法：通过案例分析、小组讨论等方式，培养学生的自主学习能力和解决问题的能力。 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 1. 〈img〉标签的其他属性及其用法。 2. 运用〈img〉标签属性进行网页设计。 教学难点 1. 如何根据实际需求选择合适的〈img〉标签属性。 2. 如何将所学知识应用到实际网页设计中。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 · 案例分析法：通过分析实际案例，让学生了解〈img〉标签属性的实际应用。 · 小组讨论法：鼓励学生分组讨论，共同解决问题，提高团队协作能力。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 1. 回顾上节课学习的〈img〉标签的基本属性，如src、alt、width、height等。 2. 展示一张带有title、style、class属性的图片，引导学生观察并思考这些属性的作用。 2分钟 讲授新课 练习指导 一、知识点总结 1. 〈img〉标签的其他属性包括title、style、class等。 2. title属性用于为图片添加提示信息；style属性用于为图片添加内联样式；class属性用于为图片添加类名。 3. 在实际网页设计中，应根据需求选择合适的〈img〉标签属性。 二、运用〈img〉标签属性进行网页设计 1. 使用title属性为图片添加提示信息 ```html <img src="example.jpg" alt="A description of the image" title="这是一张美丽的风景图"> ``` 当鼠标悬停在图片上时，会显示“这是一张美丽的风景图”。 2. 使用style属性为图片添加内联样式 ```html <img src="example.jpg" alt="A description of the image" style="border: 1px solid black; background-color: lightgray;"> ``` 为图片添加1像素实线边框和浅灰色背景色。 3. 使用class属性为图片添加类名，并在外部样式表中定义样式 HTML代码： ```html <img src="example.jpg" alt="A description of the image" class="custom-image"> ``` CSS代码（外部样式表）： ```css .custom-image { border: 1px solid black; background-color: lightgray; } ``` 为图片添加1像素实线边框和浅灰色背景色。 通过以上示例，我们可以看到如何运用〈img〉标签的其他属性进行网页设计。在实际应用中，根据需求选择合适的属性，可以使网页设计更加丰富多彩。 10分钟 7分钟 自主学习 8分钟 练习训练 · 为一张图片添加title属性，使其在鼠标悬停时显示“这是一张美丽的风景图”。 · 为一张图片添加style属性，设置其边框为1像素实线，背景色为浅灰色。 12分钟 布置作业 1. 完成课后习题，巩固所学知识。 2. 设计一个简单的网页，要求使用至少三个不同的〈img〉标签属性。 1分钟 总结回顾 1. 〈img〉标签的其他属性包括title、style、class等。 2. title属性用于为图片添加提示信息；style属性用于为图片添加内联样式；class属性用于为图片添加类名。 3. 在实际网页设计中，应根据需求选择合适的〈img〉标签属性。 第 1 页，共 2 页 学科网（北京）股份有限公司 $$