中职高教版高二《网页设计与制作》任务6.1 制作订单结算及处理页面课件

项目6 制作订单结算与处理页面 任务6.1 买家订单结算页面设计 1 CONTENTS 01 活动1 设计购物车页面 02 活动2 设计买家订单结算页面 01 设计购物车页面 购物车是电子商务网站和用户交互的重要模块。电子商务网站要完成购买转化率，除了要有丰富的商品能满足用户需求的商品外，还需要设计出操作简便、界面清晰、付款方便的购物车。一个好的购物车能直接勾起用户购买的欲望，在电子商务整个流程中具有重要作用。购物车主要作用是临时存放用户的购物信息，可以让用户随时进行增删商品、修改数量和统一结算等操作。 淘宝购物车（节选） 【购物车简介】 4 【作业步骤】 （1）浏览购物车。 （2）分析购物车。 （3）设计购物车。 6 淘宝网购物车 京东购物车 苏宁易购购物车 【官方网站举例】 7 唯品会购物车 【官方网站举例】 8 通过对购物车界面的辨析，可以看出购物车由显示模块、修改模块和支付模块组成。 【购物车模块组成】 显示模块 修改模块 支付模块 9 购物车在实际使用中对用户来说，兼具着以下功能： 凑单 促销 收藏 【小助手1】购物车的妙用 10 用户对网页的要求不仅是获取信息，还希望能互相交流。表单作为浏览者交互的一种元素，被应用在网站的各个区域。 表单对象包括文本域、按钮、图像域、复选框、单选框、列表/菜单、文件域以及隐藏域等。在添加表单后，文档中将以红色虚线表示表单区域。表单对象只能插入在红色区域内。为了更合理地安排表单元素，可以使用表格来布局表单元素。插入表格之后，所有的表单元素都可以放置在表格中。 【小助手2】表单介绍 11 表单属性各参数含义： 表单名称：为表单设置一个名称。表单命名之后就可以用脚本语言对它进行控制。 动作：识别处理表单信息的服务器端应用程序。 方法：定义表单数据处理的方式。 【小助手2】表单介绍 12 （1）文本域：在文本域内可输入任何文本、字母或数字类型。输入的文本可以显示为单行、多行、项目符号或星号（多用于密码保护）。 （2）单选按钮：单选按钮是只可以取其一的按钮。在一组按钮内只能选取一个按钮。 （3）复选框：复选框在一组选项中允许选取多个选项。 （4）列表/菜单：下拉菜单和列表都列出了一组用户可以从中选择的值。下拉菜单和列表对象是有一些区别的。下拉菜单只允许单项选择，而列表框则可选取多项。 （5）按钮：按钮可以执行提交或重置菜单的标准任务，也可以执行自定义功能。在插入时可以设置自定义按钮标签或使用预先定义的标签。 【小助手3】常见的表单对象及属性 13 购物车需要的外部交互系统 1.商品：从商品系统主要是获取商品的一些基本信息。有商品的主题、商品的文描、商品的上下架状态、以及商品上的一些特殊属性的标志与标记位。有一些体验比较好的电商平台会将购物车中商品已经下架的商品置灰掉提示用户此商品目前不能进行购买。 【知识链接】 14 购物车需要的外部交互系统 2.库存：从库存系统主要是获取商品目前库存数量情况以及是从哪个仓库出货，后面拆单的时候会用到这个信息。购物车系统会进行判断目前商品的库存是否满足用户购买的数量。如果库存已经卖光会将商品制成灰色提示用户商品已经没有库存。 【知识链接】 15 购物车需要的外部交互系统 3.促销：购物车会将目前用户选中的商品列表传给促销系统。促销系统经过一系列复杂的运算会告诉购车目前这些商品命中了哪些促销。因为一个购物车里面的商品可能有不同商家的，这里还要按照商家的纬度再进行一轮计算。算出每个商家纬度下面有哪些促销。可以说，这里是整个购物车中最复杂的一个环节。各个平台购物车做得好坏的区别主要就体现在这里。 【知识链接】 16 02 设计买家订单结算页面 买家订单结算页面是指用户直接购买或者利用购物车购买后出现页面，主要的功能是实现对订单的再次确认和费用支付。一个实用便捷的买家订单结算页面会让用户体验满意度大大提升。 淘宝网买家订单结算页面（节选） 【买家订单结算页面简介】 19 （1）浏览买家订单结算页面。 （2）分析买家订单结算页面。 （3）设计买家订单结算页面。 【作业步骤】 20 京东商城买家订单结算页面 【官方网站举例】 21 苏宁易购买家订单结算页面 【官方网站举例】 22 通过对买家订单结算页面界面的辨析，可以看出买家订单结算页面都会实现确认收货地址、确认订单信息和支付结算功能。 【买家订单结算页面模块组成】 23 当一个表格无法对网页元素进行复杂定位时，需要在表格的一个单元格中继续插入表格，这叫做表格的嵌套。单元格中的表格是内嵌入式表格，通过内嵌入式表格可以将一个单元再分成许多行与列，而且可以无限地插入内嵌入式表格，但是内嵌入式表格越多，浏览时花费在下载页面的时间越长，因此，表格的嵌套最多不