HTML5+CSS3网页设计实战 教案 3.3 border边框属性

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。23.3盒子模型的相关属性该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1） 掌握border属性的简写格式，边框线型对应的英文单词。（2） 掌握background属性的简写格式，设置图片背景。能力目标：（1）具备制作精灵图列表的能力。素养目标：（1） 通过border属性对比margin属性，锻炼学生的类比思维。（2） 完成精灵图案例，鼓励学生勇于探索未知，敢于质疑，培养创新思维和解决问题的能力。Border边框属性、background背景属性。Border边框属性、background背景属性。通过相关案例的属性设置前后对比，让学生加强理解与认识。background背景属性设置图片及其偏移量。通过精灵图案例要求学生掌握相关概念及操作步骤。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习margin、padding简写的参数顺序。回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入理解border属性的设置。border属性通常用纯色的实线solid或虚线dashed外观。除了设置border增加装饰效果外，我们还可以给容器定义一定的背景图或者背景色，甚至使用背景图来制作渐变、图像边框，当然这需要课外去了解更多知识。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授3.3.4border边框属性属性值描述borderborder边框属性的简写border-width指定边框的宽度border-style指定边框的样式，其中：dotted点线、dashed虚线、solid实线、double定义两个边框。border-color指定边框的颜色，CSS颜色表达的方式有：颜色名称，如red,blue,green等。十六进制颜色代码：如#FF0000表示红色，#0000FF表示蓝色。RGB值：如rgb(255,0,0)表示红色，rgb(0,0,255)表示蓝色。RGBA值：类似于RGB，但增加了alpha透明度值，如rgba(255,0,0,0.5)半透明红色。border-radius设置四个角的圆角半径（圆角度）。3.3.5background背景属性background-color为背景颜色。background-image为背景图像。background-position为背景图像的位置。background-repeat规定如何重复背景图像。background-size为背景图片的尺寸。【案例7】完成精灵图效果。核心的技法就是将容器设置padding-left，这空出的区域专门用于显示背景图。接下来我们使用如图3-46所示的sprite.png图像文件，完成三个容器显示图标的效果。思路1——可以在Photoshop的图层剪辑（或者两图层），模拟在上一图层中，推动下面图层进行错位，演示精灵图的原理。思路2——用一张A4纸模拟一个li元素，在对应图标位置上挖空一个矩形区域，用一本书放在纸后方，自下往上移动。听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施（1）先编写html结构元素，对应的代码如图3-48所示。（2）编写对应的CSS代码，如图3-49所示。（3）将文件进行保存，并在浏览器中运行以测试效果。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分站点结构目录结构正确，文件命名规范。10ul容器结构容器关系正确、缩进正确。20Nth-of-type伪类代码书写正确，无多余空格。20Background属性设置url路径正确，no-repeat属性正确，x，y轴偏移量正确。50总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课，要求我们掌握：（1）border属性的简写格式，边框线型对应的英文单词。（2）background属性的简写格式，设置图片背景。（3）通过bord