11.制作“助农乐购”网站主页.docx

网页设计与制作教案

授课教师

授课班级

授课日期

课题

制作“助农乐购”网站主页

计划学时

8

教学目标

知识目标

知道精灵图的作用。

理解定位布局概念及作用。

能力目标

掌握用CSSbackground-position属性设置精灵图的方法。

掌握用CSSposition属性进行定位布局的方法。

素质目标

通过“助农乐购”网页内容的制作，让学生树立推动农村经济发展，助力乡村振兴的意识，培养学生的社会责任感。

通过规范编码习惯，培养学生精益求精的工匠精神，提升职业素养。?通过锻炼思维方式，培养学生的工程思维和数字素养。

教学重点

background-position属性设置精灵图的方法。

position属性进行定位布局的方法。

教学难点

精灵图background-position属性值中位置值的计算。

根据实际需求，合理选择position属性进行定位布局。

教学模式

及教学方法

理实一体化、线上+线下混合教学模式

项目教学法、任务驱动法、讲授法。

教学活动及主要环节

素质培养

课前导学

1.观看学习平台相关微课视频。

2.完成课前测试题。

3.分小组收集经典的网页布局效果，上传到学习平台。

课中践学

【明确任务】

让学生展示小组收集的经典网页布局效果，然后展示“助农乐购”网站主页效果，引出本次课的制作内容，让学生明确学习任务。

任务4.3制作“助农乐购”网站商品页面

一、任务分析

小丁制作完了商品页以后，就开始着手制作网站主页，根据页面的设计需求，分析页面的框架结构，主要包括头部区、主体区、脚部区3个部分，其中头部区、脚部区跟商品页的是一样的，所以主要分析主体区的框架结构。主体区主要包括“广告导航”、“热卖推荐”部分。

二、知识储备

根据任务分析，在之前掌握知识的基础上，完成本任务还需要学习的主要知识点有CSS精灵图、定位布局。

新知学习1：CSS精灵图

1.CSS精灵图的概念

CSS精灵图（sprite）是一种背景图片的应用方式，将多个小图片整合到一张透明背景的大图片中，然后将这个大图作为背景图，通过background-position属性来使用。核心目的是有效地减少服务器接受和发送请求的次数，提高页面的加载速度。在使用精灵图时，需要精确测量每个小背景图片的大小和位置。

2.background-position属性值

（1）不同位置的属性值

（2）位置值的计算

3.CSS精灵图应用举例

（1）制作精灵图

（2）用background-position属性设置精灵图位置

新知学习2:定位布局

1.定位布局的作用及类型：

静态定位、相对定位、绝对定位、固定定位。

2.position属性常用值：

3.定位的偏移量：

4.设置定位布局的基本语法规则：

定位元素{

position:定位方式;

left:像素值;

right:像素值;

top:像素值;

bottom:像素值;

}

5.堆叠属性z-index

三、操作实施

任务实践4.4.1：搭建页面基础

任务实践4.4.2：制作广告导航区

任务实践4.4.3：制作热卖推荐区

学生在知识学习的基础上，对照任务分析，进行操作实践，完成“助农乐购”网站主页的制作。（学生动手操作，教师巡回指导，对共性问题进行讲解，对个性问题进行答疑。）

四、任务拓展

布置拓展任务：利用所学，在主页右边设计制作一个导航工具栏，要求在窗口固定位置，不随页面滚动。

【项目小结】

通过本项目的学习，大家完成了助农乐购网站的注册页、商品页以及主页的制作任务，掌握了表单、iframe框架、CSS进阶选择器的使用方法以及CSS精灵图和定位布局的应用，职业技能和职业素养都得到了充分的提高。

【项目延伸】

请同学们在本项目前期制作的基础上，继续制作购物车页、订单页等页面。

课后拓学

1.完成任务4.4的课后练习。

2.扫码阅读“AI加油站”，完成拓学任务。

3.完成项目延伸任务，将结果文件上传至教学平台。

通过学习平台学习相关内容，让学生养成自主学习的习惯。

通过分组收集资料，提升学生搜索归纳的能力，以及通过欣赏优秀的网页作品，提升自己的审美。

通过任务分析，锻炼学生分析问题的能力，以及用数字化、图形化的方式来呈现，培养其数字素养。

位置值的计算对于学生来说是难点，对于难度稍高的任务，学生在学习过程中一定会碰到这样那样的困难，鼓励引导学生不要气馁，面对困难更要迎难而上，培养学生攻坚克难的品质。

通过网页布局的学习，引导学生思考每个人的人生同样需要布局和规划才能树立更明确的职业和生活理想。

在制作网页布局的过程中注重学生职业素养的培养，培育学生养成科学严谨、精益求精的工匠精神。

通过学习延伸和拓展，让学生进一步夯实课堂所学，并提升自主学习的能力。