网 页 设 计 与 制 作 教 案
授课教师 授课班级 授课日期
课 题 制作“助农乐购”网站注册页面 计划学时 6
知识
目标
了解表单的概念，能说出其作用。
知道表单控件元素的类型并能够区分。
理解 CSS 进阶选择器的用途。
能力
目标
掌握表单及其控件元素的使用方法。
掌握 CSS 进阶选择器的使用方法。教学目标
素质
目标
通过“助农乐购”网页内容的制作，让学生树立推动农村经济发展，助力
乡村振兴的意识，培养学生的社会责任感。
通过规范编码习惯，培养学生精益求精的工匠精神，提升职业素养。
教学重点
表单及其控件元素的编码规则及设置方法
CSS 进阶选择器的编码规则及设置方法
教学难点
根据实际需求，合理应用表单控件元素
根据实际需求，合理选择 CSS 进阶选择器的类型
教学模式
及教学方法
理实一体化、线上+线下混合教学模式
项目教学法、任务驱动法、讲授法。
教学活动及主要环节 素质培养
课前导学
1.观看学习平台相关微课视频。
2.让学生搜集不同网站的注册表，至少 3 个。
3.完成课前测试题。
课中践学
【情景导入】
通过微课视频进行情景导入，引出“助农乐购”电商网站的开发
项目，让学生明确学习任务。
通过学习平台学习相关内
容，让学生养成自主学习
的习惯。
通过“助农乐购”网页内容的
制作，让学生树立推动农
村经济发展，助力乡村振
兴的意识，培养学生的社
【项目实施】
任务 ：创建“助农乐购”网站项目
一、任务分析
根据网站开发需求以及 UI 设计师提供的素材，创建网站项目，
项目信息如下表所示：
“助农乐购”网站项目信息一览表
项目名称 助农乐购
项目页面 主页（）、注册页（）、
商品页（）
资源目录 样式表目录（css）、图片目录（img）
二、操作实施
1.新建网站项目
在开发软件 HBuilderX 中新建“助农乐购”网站项目，具体步骤
如下：
（1）打开开发软件 HBuilderX，选择“文件”菜单中的“新建”→
“项目”命令。
（2）在“选择模板”界面中选择“基本 HTML 项目”，填写项目
名称“助农乐购”，浏览选择目录存储的路径位置。
2.网站资源管理
根据网站资源需求新建目录和文件，在模板基础上，在“助农
乐购”根目录上点击右键，选择“新建”→“html 文件”，建立 、
文件，并将素材文件夹中的图片资源整理拷贝到 img 目
录内
由于本项目是综合电商类网页的开发，网页的 CSS 样式代码量
会比较大，所以本项目的 CSS 样式均采用外部引入的方式，后续新
建.css 文件时需将其都整理到 CSS 目录内。
任务 制作“助农乐购”网站注册页面
一、任务分析
小丁先制作“助农乐购”网站注册页面，根据页面的设计需求和
最终效果图，分析页面的框架结构，主要包括头部区、主体区、脚
部区 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.讲解子选择器的作用及设置方法
通过例题让学生巩固练习其编码规则。
三、操作实施
任务实践 ：搭建页面基础
任务实践 ：制作页面头部区
任务实践 ：制作页面主体区
任务实践 ：制作页面脚部区
学生在知识学习的基础上，对照任务分析，进行操作实践，完
成“助农乐购”网站注册页面的制作。（学生动手操作，教师巡回
指导，对共性问题进行讲解，对个性问题进行答疑。）
四、任务拓展
布置拓展任务：利用所学，根据以上注册页面的效果，设计制
作一个登录页面。（学生可在完成基本任务的前提下，完成拓展任
务。）
课后拓学
1.完成任务 的课后练习。
2.扫码观看任务 中的微课视频，预习新课。
数字化、图形化的方式来
呈现，培养其数字素养。
通过分组讨论，培养学生
的合作意识和沟通协作能
力。
通过学习新知，积极思考，
引导学生培养创新思维和
解决问题的能力。
通过规范编码习惯，培养
学生精益求精的工匠精神，
提升职业素养。
