2024年1月17日发(作者：谯思柔)

目录第一章概述........................................................................................................................11.1项目开发的背景...................................................................................................11.2项目开发的目的...................................................................................................1第二章网站分析.............................................................................................................22.1网站的基本功能描述..................................................................................................22.2用户流程分析.................................................................................................................22.3可行性分析.......................................................................................................................22.3.1技术可行性.................................................................................................................32.3.2经济可行性.................................................................................................................32.3.3社会可行性.................................................................................................................3第三章项目网站设计原则与实现........................................................................43.1总体设计原则.................................................................................................................43.2头部head模块..............................................................................................................43.3鼠标点击head专区中的华为字段跳转到手机介绍.................................53.4商品介绍的动态效果..................................................................................................73.5热销单品模块.................................................................................................................83.6手机专区模块.................................................................................................................93.7笔记本电脑专区模块................................................................................................113.8返回顶部按钮...............................................................................................................12第四章项目测试...........................................................................................................134.1软件测试的目的和方法...........................................................................................134.2测试的具体方法..........................................................................................................13总结.......................................................................................................................................15参考文献...........................................................................................................................17-i-

第一章概述1.1项目开发的背景网上购物迅速发展的重要原因归结于低价和便利，首先，网络销售成本是在于卖方和供货商之间的长期良好合作关系，建立了强大的供应链网站，可以进行大量采购，大大降低了采购的成本。同时，网上购物给用户提供方便的购买途径，只要简单的网络操作，足不出户，即可送货上门，并具有完善的售后服务。1.2项目开发的目的手机将是覆盖人群最广的一种媒体形式。在中国，手机发展的历史只有二十多年，但中国已经有七亿手机用户，普及率近50%，手机的用户数与目前覆盖人群最大的电视用户数相差无几，而且手机用户的数量将很快超过电视用户。手机阅读作为用户认知度较高的重点应用之一，用户数量呈不断攀升的态势。手机的传播成本比较低廉。新的媒体形式应该具有传播成本低廉的特性，手机就具备这样的特点。而华为2015年入选BrandZ全球最具价值品牌榜百强，位列科技领域品牌排名第16位。2018年7月31日，国市场分析机构国际数据公司发布的初步数据显示，2018年第二季度，华为的出货量超过苹果手机，跃居全球第二位。2019年7月17日，在中国质量认证中心官网（3C认证）上，有8款5G手机获得了3C认证，其中包括华为Mate20X5G、MateX5G等四款手机。截止10月22日，华为2019年手机发货已经超过两亿台。且华为似乎是在主流品牌里面，唯一一个覆盖了全价位，华为是主打中高端，而荣耀是负责中低端。是各个消费者都会首选的一个国产品牌。-1-

第二章网站分析2.1网站的基本功能描述首先是网站的首页，网站的首页是展示商品款式、销量、价格等介绍，让有意向的用户能查询具体的详细信息，也不会引起用户的视觉疲劳。在商品的首页旁边还拥有着返回顶部的按钮，这个按钮会在用户浏览到一定位置的时候出现，点击会直接返回到本页面的顶部。商品的详情页面是介绍了商品的详细图片、价格、优惠、促销、赠品，还有选择的颜色、款式、版本，具有加入购物车和结算功能，点击加入购物车，产品会添加到购物车，并计算价格，点击结算会跳转到地址页面。地址页面是需要用户填写姓名、电话、收获信息、详细地址等信息并付款提交。完成这些操作之后用户就能坐等收货啦。2.2用户流程分析在用户进入仿华为网站首页，首先可以通过首页的head栏切换到对应的商品区去购买商品，能节约购买手机的时间。在浏览到前部分的时候右下角会有个回到顶部的按钮显示，点击能回到首页顶部然后隐藏本按钮。点击某个商品会有跳转到本商品的详细界面，且有单独款式可以购买，加入购物车会有购物车图标显示，然后会跳转到商品结算页面，填写地址，购买完毕就可以静等收获啦。2.3可行性分析可行性分析也称为可行性研究,英文名称The-2-feasibility

analysis，特性为三种——预见性、公正性、可靠性，是要求以全面、网站的分析为主要方法，经济效益为核心，围绕影响项目的各种因素，运用大量的数据资料论证拟建项目是否可行。在调查的基础上，针对新项目的开发是否具备必要性和可能性，对新项目的开发从投资、技术、财务等方面进行分析和研究，以避免投资失误或者技术的不成熟而导致项目的终止。可行性分析的目的就是判断项目是否有生命力，是否值得投入更多的人力和资金进行可行性研究，并依此做出是否进行投资的初步决定，可行性分析分为七个方面—投资必要性、技术可行性、财务可行性、组织可行性、经济可行性、社会可行性以及风险因素控制可行性。下面将分别从技术、经济、社会这三个方面对仿华为网站的建设进行分析和研究。2.3.1技术可行性制作仿华为网站就是为了给用户提供方便的购买途径，只要简单的网络操作，足不出户，即可送货上门，并具有完善的售后服务。2.3.2经济可行性仿华为网站网站可兼容性很高，并且一台设备就可完成制作。因此无需再投入资金购买其他设备。项目的开发是基于本人对前端开发的热爱即实践学习而来，并且项目开发过程投入的成本较低，因此开发经费完全可以接受。2.3.3社会可行性本项目的社会可行性主要从法律因素进行研究。法律因素，本项目是根据现有开放的资料汇总而来的，是通过大量的查阅调研创作出的，项目的页面设计是在独立的环境下完成的，无可供抄袭的网站设计。-3-

第三章项目网站设计原则与实现3.1总体设计原则本网站为了设计、实现和后期增添功能的方便，以及用户浏览的舒适性，所以必须采取一定的设计原则。其主要设计原则有：适用性：在实现网站的功能的同时，让用户初次浏览体验舒适，这对于用户再次回访来说是非常重要的，如果第一次能抓住用户的眼球那么就会让用户不知不觉的想要继续浏览下去，而提高后期项目更新后收益的机率。针对性：本网站设计是针对手机、电脑等电子产品以及后期拓展功能面对用户的定向开发设计，所以具有很强的针对性。3.2头部head模块此模块主要功能是针对有确定想买的产品类型下，直接跳转到需要的位置进行浏览购买；此地方采用的1是a标签的锚链接方式完成的，如图3-1所示。图3-1head头部模块其主要代码如下：class="layout">class="header-left">class="logo">src="img/"alt="">href="#">-4-