HTML5移动前端开发基础与实战（第2版）（微课版）-PPT 模块4

模块4前端开发演练本模块实战演练如何设计移动端购物系统的常见页面，包括登录、设置、客服、商品详情、购物车、订单页面的设计。购物系统是我们最熟悉的系统，如淘宝、京东等，通过对购物系统的演练学习，可以更容易地理解相关知识。本模块也带领读者实战演练设计一个PC端的页面。HTML5移动前端开发基础与实战（微课版）综合掌握HTML、CSS、JavaScript、DOM操作。知识目标1通过设计移动端、PC端的常见页面，提高综合运用HTML5进行前端开发的能力。职业目标培养团队协同工作能力。培养一丝不苟的工作态度和持之以恒的职业精神。素质目标“登录”几乎是所有系统的必备功能，掌握“登录”页面的设计可以说是系统设计的开端。4.1

登录页面“登录”页面通常需要提供用户名、密码，并进行验证。后台将根据登录信息控制用户权限、记录用户行为，保护操作安全等，本书只针对前端进行设计。4.1.1登录页面介绍4.1.2登录页面演练登录页面演练。演练4.1“设置”也几乎是所有系统的必备功能，掌握“设置”页面的设计可以进一步熟悉项目的开发并增强信心。4.2

设置页面4.2.1设置页面介绍“设置”页面常见功能布局的实现，包括清除缓存、关于、退出登录。4.2.2设置页面演练设置页面演练。演练4.2在线客服作为一个专业的网页客服工具，是方便用户及时和企业进行即时沟通的一项常见功能。在线客服不仅仅是在线客服，同时还为网站提供访客轨迹跟踪、流量统计分析，客户关系管理等功能。4.3

客服页面4.3.1客服页面介绍“客服页面”的设计，包括对话双方的头像、聊天内容、内容部分的箭头指向。4.3.2客服页面演练客服页面演练。演练4.3商品详情是购物系统的必备功能。作为产品的对外展示，直接影响到产品销售额。商品详情的介绍一定要通过用户的角度去设计文案和画面，而不能通过单方面强调自身产品优势的口径去表达。所有产品都是解决用户需求为前提的，在设计时需要多思考产品优势与用户痛点之间的对应关系。4.4

商品详情页面4.4.1商品详情页面介绍“商品详情”页面的设计，包括商品名称、商品描述、原价、售价、优惠活动介绍等。4.4.2商品详情页面演练5G商品详情页面演练。演练4.4购物车功能指的是应用于网店的在线购买功能，它类似于超市购物时使用的推车或篮子，可以暂时把挑选商品放入购物车、删除或更改购买数量，并对多个商品进行一次结款，是购物系统的必备功能之一。4.5

购物车页面4.5.1购物车页面介绍“购物车”页面的设计，包括商品图片、商品名称、价格、数量以及增减数量的按钮等。4.5.2购物车页面演练购物车页面演练。演练4.5订单是购物系统的必备功能。订单提交到购物系统后，系统管理员对订单进行确认有效与无效的操作处理。订单确认后将不能再进行修改。4.6

订单页面4.6.1订单页面介绍“订单”页面的设计，包括收货人、联系电话、收获地址以及订单的相关信息（商品图片、商品名称、价格、数量、规格等）。4.6.2订单页面演练订单页面演练。演练4.64.7

装修网站首页通过装修网站首页学习PC端布局4.7.1装修网站首页介绍装修网站首页如图所示，包括顶部（联系方式）、头部（导航栏）、焦点图（广告栏）、主体（各项内容）、尾部（页脚）。4.7.2装修网站首页演练装修网站首页演练。演练4.7思考本章实战代码的每一行都仔