网页设计与制作项目式教程（HTML+CSS）电子教案 10.制作“助农乐购”网站商品页面.docx
网页设计与制作教案
授课教师
授课班级
授课日期
课题
制作“助农乐购”网站商品页面
计划学时
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.完成项目延伸任务，将结果文件上传至教学平台。
通过学习平台学习相关内容，让学生养成自主学习的习惯。
通过“助农乐购”网页