HTML5+CSS3网页设计实战 教案 2.2 图像文件规范化

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。22.2图像文件规范化 该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1） 掌握不同格式图像的使用场景。（2） 了解网页中不同区域的图像尺寸范围。能力目标：（1）具备能从网络上下载的素材图标输出为透明度的ps处理能力。素养目标：（1） 了解本章成语的出处，理解成语含义与知识点理解的结合。（2） Photoshop处理图片的强大，引导学生切勿使用技术给社会带来负面影响。图像格式、尺寸、命名图像文件的类型及特点，图像文件合理的命名规则。通过观察企业网页图像文件，加强相关知识的认识。Photoshop输出透明底图片的操作步骤。通过上机练习，加强学生的ps操作能力。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习简述一下HTML文件命名习惯？对于大量的图片文件，如何进行合理的命名?回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入在生活中，我们有时候需要从网页下载图片，有些图片无法直接下载，有些图片并不是需要的透明底的图片，有些图片尺寸不符合要求，如何在网站中，定义图片的相关属性，为浏览器提供相关的素材，这就需要我们了解相关的知识点。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授2.2.1图像格式 jpg压缩比高，适合人像类色彩丰富的图片。 gif通常用于少量色彩的小图标、图片，支持透明但边缘的效果通常有残留的杂色痕迹，还支持小动画。png适合色彩丰富与否图片，支持透明，对图像边缘几乎没有如gif的弊端。知识点：图片格式类型记忆关键词：各有千秋关键词解析：不同格式的图像，适用场合不同，各种浏览器及版本支持程度不同。图标类图片考虑到透明底色原因，一般采用png格式，有部分网站采用svg技术绘制图标，可以认为svg图片是一段纯粹的代码，可以借助一些svg绘图工具来生成代码。☆思政讲解1：每个人都有自身的优点，尽量扬长避短。☆思政讲解2：每位同学在不同学科领域的优势，个体作战不如整合小组优势，团队作战。【提问】如果在设计时缺少图标图片，我们应该如何利用网络找到想要的素材？采用什么搜索关键字？倘若在网络上找到的jpg类型的图标图片，我们需要重新修改一下颜色，一般情况下能否用魔术棒或快速选择工具去进行抠取、换色后输出？如果这种方法有弊端，应该如何改进？听讲，回答问题。讲授知识。提问。演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。2.2.2图像尺寸建议使用1366x768分辨率作为基准，并考虑更高的分辨率。知识点：图像尺寸应该按100%比例输出以免失真记忆关键词：削足适履关键词解析：在Photoshop中处理成效果图的实际大小尺寸，不建议通过CSS控制大小而造成宽高比失真、模糊等。尤其是图标图片，若原意在网页中图标的线条宽度为2像素粗细，但设计时将图标尺寸扩大来处理，在网页中强行把尺寸压缩，相当于把“脚”塞到“童时的鞋”，那线条的宽度很大几率就不再是2像素粗细，偏离了设计师的意图。☆思政讲解1：强调每个人有各自的学习技巧，不考虑自身特点而生搬硬套的话，容易陷入窘境。☆思政讲解2：对于精密仪器来说，一丝一毫的误差经常会被无限放大。在网页中的图片要求做到精美，尤其是一些线框形态的图标，哪怕差1个像素，效果也可能天差地别。听讲讲授知识。2.2.3图像命名图像文件的名称分为头尾两部分，用下划线或中横线隔开，头部分表示此图片的大类性质。范例：banner-sohu.jpgmenu_job.gif听讲讲授知识。任务实施【案例3】在Photoshop中打开“输出透明底色.psd”文件。将图标输出为透明底色，分别用gif、png格式进行保存。然后将这两个图片插入到黑色背景色的网页中，并预览效果观察区别之处。可以看到左侧的GIF格式，在图形边缘会带上斑驳的白色，而右侧的PNG格式则完美表现效果。☆思政讲解：从上面图可以看到，左边图标周围只是残留了1个像素的白色杂色，但是在一些暗色的场景下特别明显。强调细节的把握，规矩的养成。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分图像处理能进行准确的抠图或绘图，图标边缘不残留杂色50插入不同格式图像正确输入对应的图像元素的代码30网站结构文件及文件夹命名及位置正确。20总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课的学习：（1）掌握不同格式图像的使用