HTML5+CSS3网页设计实战 教案 3.4 福娃图片外观造型

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。2本章基础练习该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1） 容器圆角度设置。（2） 元素旋转、平移能力目标：具备编写常见形状外观对应的css样式的能力。素养目标：（1） 通过福娃，了解北京奥运会的荣光，增强学生的民族自豪感，对祖国稳定繁荣的信心。（2） 在课程内容中融入中华优秀传统文化元素，增强学生的文化自信，激发他们传承和创新中华文化的热情。使用border-radius属性生成圆形、胶囊形、门型等形状的容器外观，为五位福娃添加造型。Border-radius属性、transform属性。通过调整相关属性值的大小，对属性值有更深刻印象。transform属性。通过教师演示，让学生认识相关属性。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习瀑布流布局有什么特点？回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入Css样式中，虽然在图片外观设计上远远做不到像Photoshop那般强大，但基本的图片处理及功能还是轻而易举实现的，比如颜色、透明度、形状、投影、甚至可以使用一些滤镜。虽然可以做到这些图片效果，但对于商业应用来说，我们并不推荐，因为这会造成客户端资源的损耗，从外观上商业网站讲究简明扼要，不花俏。今天我们学习一下如何定义图片的形状，但思路不仅限于图片，只要是容器都可以采用今天的做法。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授1.Border-radius属性‌border-radius‌是‌CSS中的一个属性，用于设置元素边框的圆角半径，允许自定义元素的形状。它可以使元素的角变得圆滑，从而创造出各种视觉效果，如椭圆、叶子、花瓣等形状。border-radius属性的语法和用法。border-radius‌属性可以接受一到四个值，分别对应元素的四个角（左上、右上、右下、右下）。2.transform属性‌transform是CSS3中的一个属性，用于对元素进行旋转、缩放、移动或倾斜等变换。它允许对元素进行2D或3D转换，从而改变元素的视觉效果。旋转（rotate）：用于顺时针或逆时针旋转元素。扭曲（skew）：用于沿X轴或Y轴扭曲元素。缩放（scale）：用于按比例缩放元素。移动（translate）：用于移动元素。听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施【练习6】使用border-radius属性生成圆形、胶囊形、门型等形状的容器外观，为下面五位福娃添加造型，福娃原始图片如图3-82所示。☆思政讲解：历年中国举办多少次奥运会？期间所采纳的吉祥物融合了什么中国元素？北京奥运会开幕式中，令你印象最深的表演是什么？（1）编写HTML代码，如图所示。（2）编写对应的CSS代码，如图所示。（3）预览效果，达到预期后保存HTML文件。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分站点结构目录结构正确，文件命名规范。10Html结构容器关系正确20Border-radius属性属性值正确，效果美观40Transform属性Rotate、translate参数正确30总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课学习，要求我们掌握：（1）容器圆角度设置。（2）元素旋转、平移（3）具备编写常见形状外观对应的css样