网页设计与制作项目式教程（HTML+CSS）课件10.制作“助农乐购”网站商品页面.pptx
网页设计与制作项目式教程（HTML+CSS）项目四综合电商类网页开发项目——制作“助农乐购”网站商品页面
综合电商类网页开发项目随着互联网的普及和发展，电商网站已经成为人们不可或缺的购物渠道之一。电商网站的使用场景非常广泛，可以满足人们不同的购物需求。电商网站是企业、机构或者个人开展电商的基础设施和信息平台，是实施电商的交互窗口，是从事电商的一种手段。最近，小丁实习的Web前端开发公司承接了一个“助农乐购”电商网站的开发项目，小丁将在前端工程师的指导下学习制作该网站的静态页面。情景导入
“助农乐购”网站页面的实现——注册页教学项目项目
“助农乐购”网站页面的实现——商品页、主页教学项目项目
任务4.1创建“助农乐购”网站项目项目实施任务分析小丁分配到的任务是制作“助农乐购”网站的主页、注册页和商品页，在制作网页之前，小丁需要做一些准备工作，根据网站开发需求以及UI设计师提供的素材，创建网站项目，项目信息如表4-1所示。表4-1“助农乐购”网站项目信息一览表项目名称助农乐购项目页面主页（index.html）、注册页（reg.html）、商品页（goods.html）资源目录样式表目录（css）、图片目录（img）
任务4.1创建“助农乐购”网站项目项目实施操作实施1.新建网站项目在开发软件HBuilderX中新建“助农乐购”网站项目，具体步骤如下：（1）打开开发软件HBuilderX，选择“文件”菜单中的“新建”→“项目”命令。
任务4.1创建“助农乐购”网站项目项目实施操作实施1.新建网站项目（2）在“选择模板”界面中选择“基本HTML项目”，填写项目名称“助农乐购”，浏览选择目录存储的路径位置。
任务4.1创建“助农乐购”网站项目项目实施操作实施2.网站资源管理根据网站资源需求新建目录和文件，在模板基础上，在“助农乐购”根目录上点击右键，选择“新建”→“html文件”，建立reg.html、goods.html文件，并将素材文件夹中的图片资源整理拷贝到img目录内。注意：由于本项目是综合电商类网页的开发，网页的CSS样式代码量会比较大，所以本项目的CSS样式均采用外部引入的方式，后续新建.css文件时需将其都整理到css目录内。
任务4.2制作“助农乐购”网站注册页面项目实施任务分析“助农乐购”网站注册页面效果图
任务4.2制作“助农乐购”网站注册页面项目实施任务分析分析页面的框架结构，主要包括头部区、主体区、脚部区3个部分，其框架结构图及主要设置如下：
任务4.2制作“助农乐购”网站注册页面项目实施任务分析头部区包括网站logo图片、欢迎词、5个超链接，框架结构图及主要设置要求如图所示。
任务4.2制作“助农乐购”网站注册页面项目实施任务分析主体区包括一个注册表单。框架结构图及主要设置要求如图所示。
任务4.2制作“助农乐购”网站注册页面项目实施任务分析脚部区分上下两个区域，上面友情链接区域包括2个链接图片和6个链接列表，下面版权信息区域包括一段版权声明文字。框架结构图及主要设置要求如图所示。
任务4.2制作“助农乐购”网站注册页面知识储备知识导图根据任务分析，在之前掌握知识的基础上，完成本任务还需要学习的主要知识点有表单、选择器进阶，知识导图如图所示。
任务4.2制作“助农乐购”网站注册页面知识储备新知学习1：表单1.表单元素form大家在访问网站时，经常会遇到账号注册、账号登录、搜索、用户调查等功能，这些基本都是使用HTML表单与用户进行的交互。表单元素允许用户在表单中输入内容，如文本框、密码框、单选按钮、复选框、按钮等。当用户信息填写完毕后，进行提交操作，然后表单就可以将用户在浏览时输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。网页内的表单元素是由form标签定义的，其他的表单控件元素必须放在form…/form开始和结束标签之间，否则用户提交数据时会丢失参数。
任务4.2制作“助农乐购”网站注册页面知识储备新知学习1：表单form元素的基本语法格式如下：form标签的常用属性有action、method、name。属性值描述actionURL规定当提交表单时向何处发送表单数据。methodget/post规定用于发送表单数据的HTTP方法，取值为get或text规定表单的名称。
任务4.2制作“助农乐购”网站注册页面知识储备新知学习1：表单2.表单控件表单元素中可以包含许多表单控件元素来实现页面交互的功能，如输入控件、文本域、下拉列表、按钮等。主要的表单控件如表所示。元素标签描述input定义输入域label定义了input元素的标签，一般为输入标题textarea定义文本域(一个多行的输入控件)select定义了下拉选项列表，其选项用option标签定义