10.制作“助农乐购”网站商品页面.docx

网页设计与制作教案

授课教师

授课班级

授课日期

课题

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

计划学时

8

教学目标

知识目标

知道CSS伪类选择器的定义及用途。

掌握display属性对应的元素类型。

知道iframe框架在网页布局中的作用。

能力目标

掌握超链接CSS伪类的设置方法。

掌握display属性进行元素转换的方法。

掌握iframe框架元素的使用方法。

素质目标

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

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

教学重点

超链接的CSS伪类的编码规则及设置方法。

iframe框架元素的编码规则及设置方法。

教学难点

根据实际需求，合理选择display属性进行元素转换。

教学模式

及教学方法

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

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

教学活动及主要环节

素质培养

课前导学

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

2.完成课前测试题。

课中践学

【明确任务】

展示“助农乐购”网站商品页面效果，让学生说说自己家乡有哪些特产，引出本次课的制作内容，让学生明确学习任务。

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

一、任务分析

小丁制作完了注册页以后，就开始着手制作商品页，先从制作一个“酸辣泡藕带”的商品页入手。分析页面的框架结构，主要包括头部区、主体区、脚部区3个部分，其中脚部区跟注册页的是一样的，所以主要分析头部区和主体区的框架结构。

1.头部区

包括“头部顶端”、“头部搜索”、“头部导航”部分。

2.主体区

包括“导航路径”、“商品预览区”、“商品介绍区”部分。

二、知识储备

根据任务分析，在之前掌握知识的基础上，完成本任务还需要学习的主要知识点有CSS伪类、元素类型转换、iframe框架。

新知学习1：CSS伪类

1.CSS伪类的定义及用途

CSS伪类是用来添加一些选择器的特殊效果。它可以给某些特定的元素设置样式规则，从而添加一些特定的样式，实现更精细化的样式效果。

2.CSS伪类的语法规则

选择器:伪类{样式语句;}

3.超链接的CSS伪类

最常见的是用于超链接样式的控制，链接的不同状态可以以不同的方式显示，如下表所示：

新知学习2:元素类型转换

1.display属性及属性值：

CSS中的display属性可以规定元素应该生成的框的类型，从而用来改变元素的显示类型。

2.display属性的应用举例：横向列表导航栏的制作（让学生分组讨论，需要选取哪种display属性来实现？）

新知学习3:框架元素iframe

1.iframe框架元素的定义和作用

iframe元素是HTML中一种用于将一个网页嵌入到另一个网页中的内联框架元素，用来加载和显示来自不同源的内容，如其他网站或者同一网站内的其他页面。它常常被用于框架集成、嵌入广告或视频、动态加载、跨域通信等方面。

2.iframe标签的常用属性

3.创建ifame框架的基本语法格式

iframesrc=width=800height=600/iframe

三、操作实施

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

任务实践4.3.2：制作页面头部区

任务实践4.3.3：制作商品导航路径

任务实践4.3.4：制作商品预览区

任务实践4.3.5：制作商品介绍区

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

四、任务拓展

布置拓展任务：根据任务实践4.3.5的内容，设计完善商品介绍区的“规格包装”和“商品评价”内容。（学生可在完成基本任务的前提下，完成拓展任务。）

课后拓学

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

2.扫码观看任务4.4中的微课视频，预习新课。

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

通过网站商品页面的特产展示，引导学生说出自己家乡有哪些特产，让学生了解家乡，热爱家乡，树立家国情怀。

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

深入学习超链接的CSS伪类，让超链接样式更丰富、优化超链接代码。追求卓越，精益求精。

通过分组讨论培养学生的团队协作意识以及良好的沟通能力，提升职业素养。

通过制作操作实施，让学生了解代码编写要遵循规范，小错误可能会影响大局面，要有严谨细致的工匠精神。

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