网页设计与制作项目式教程（HTML+CSS）电子教案 10.制作“助农乐购”网站商品页面.docxVIP

网页设计与制作教案

授课教师

授课班级

授课日期

课题

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

计划学时

6

教学目标

知识目标

了解表单的概念，能说出其作用。

知道表单控件元素的类型并能够区分。

理解CSS进阶选择器的用途。

能力目标

掌握表单及其控件元素的使用方法。

掌握CSS进阶选择器的使用方法。

素质目标

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

通过规范编码习惯，培养学生精益求精的工匠精神，提升职业素养。

教学重点

表单及其控件元素的编码规则及设置方法

CSS进阶选择器的编码规则及设置方法

教学难点

根据实际需求，合理应用表单控件元素

根据实际需求，合理选择CSS进阶选择器的类型

教学模式

及教学方法

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

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

教学活动及主要环节

素质培养

课前导学

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

2.让学生搜集不同网站的注册表，至少3个。

3.完成课前测试题。

课中践学

【情景导入】

通过微课视频进行情景导入，引出“助农乐购”电商网站的开发项目，让学生明确学习任务。

【项目实施】

任务4.1：创建“助农乐购”网站项目

一、任务分析

根据网站开发需求以及UI设计师提供的素材，创建网站项目，项目信息如下表所示：

“助农乐购”网站项目信息一览表

项目名称

助农乐购

项目页面

主页（index.html）、注册页（reg.html）、商品页（goods.html）

资源目录

样式表目录（css）、图片目录（img）

二、操作实施

1.新建网站项目

在开发软件HBuilderX中新建“助农乐购”网站项目，具体步骤如下：

打开开发软件HBuilderX，选择“文件”菜单中的“新建”→“项目”命令。

在“选择模板”界面中选择“基本HTML项目”，填写项目名称“助农乐购”，浏览选择目录存储的路径位置。

2.网站资源管理

根据网站资源需求新建目录和文件，在模板基础上，在“助农乐购”根目录上点击右键，选择“新建”→“html文件”，建立reg.html、goods.html文件，并将素材文件夹中的图片资源整理拷贝到img目录内

由于本项目是综合电商类网页的开发，网页的CSS样式代码量会比较大，所以本项目的CSS样式均采用外部引入的方式，后续新建.css文件时需将其都整理到CSS目录内。

任务4.2制作“助农乐购”网站注册页面

一、任务分析

小丁先制作“助农乐购”网站注册页面，根据页面的设计需求和最终效果图，分析页面的框架结构，主要包括头部区、主体区、脚部区3个部分，得到框架结构图及主要设置参数。

三个部分主要内容如下：

1.头部区

包括网站logo图片、欢迎词、5个超链接。

2.主体区

包括一个注册表单。

3.脚部区

分上下两个区域，上面友情链接区域包括2个链接图片和6个链接列表，下面版权信息区域包括一段版权声明文字。

二、知识储备

根据任务分析，在之前掌握知识的基础上，完成本任务还需要学习的主要知识点有表单、选择器进阶。

新知学习1：表单

提出问题：表单在网页中的作用？（学生分组讨论回答，然后教师进行讲解。）

1.表单元素form

（1）讲解表单元素的作用以及form元素的基本语法格式；

（2）讲解form标签的常用属性：action、method、name。

2.表单控件

讲解表单控件及其属性：输入元素input、标注元素label、多行文本元素textarea、下拉列表元素select、按钮元素button。

新知学习2:CSS选择器进阶

复习上个项目CSS选择器的相关知识，引出CSS选择器的进阶知识学习任务。

1.讲解属性选择器的作用及设置方法

2.讲解后代选择器的作用及设置方法

3.讲解子选择器的作用及设置方法

通过例题让学生巩固练习其编码规则。

三、操作实施

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

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

任务实践4.2.3：制作页面主体区

任务实践4.2.4：制作页面脚部区

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

四、任务拓展

布置拓展任务：利用所学，根据以上注册页面的效果，设计制作一个登录页面。（学生可在完成基本任务的前提下，完成拓展任务。）

备注：如果是项目最后一个教案，记得加上“项目小结”和“项目延伸”的内容，PPT课件同。分别放在如下位置：

【项目小结】

课后拓学

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

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

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

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

通过“助农乐购”网页