爱美手机壳网站的设计与开发(附件)
本课题为响应当前互联网发展背景，结合当前电子商务发展背景设计，页面使用Dreamweaver进行编写，网站使用div布局进行设计与实现，页面样式使用CSS样式文件进行修饰，网站图片通过使用Photoshop图片处理软件进行设计，并使用JavaScript原生脚本语言设计图片动画效果和各类页面动画效果。网站功能模块使用首页、商城中心、关于我们、我们的服务、用户分享、我们团队、等各个模块进行实现网站整体功能。现如今手机已经成为人们追求更方便快捷及娱乐的生活需求，随之手机壳也成为必不可少的装饰品，同时起到对手机的保护作用。因此，本课题所研究的是如何将手机壳做出符合大众化的网站，方便人们在网站上可以了解到更多好看且实用的手机壳。
目录
一、前言 1
（一）网站开发背景 1
（二）网站开发目标 1
（三）网站开发意义 1
（四）课题内容 1
二、爱美手机壳网站的模块分析 1
（一）网站总体布局 1
（二）网站首页模块 2
1．商城中心 2
2．情侣手机壳 2
3．关于我们 2
4．我们的服务 2
5．用户分享 2
6．我们的团队 2
7．网站布局模块 2
三、爱美手机壳网站的页面设计 3
（一）网站首页页面结构 3
1．爱美手机壳首页 3
2．爱美手机壳导航栏 4
3．网站首页滚动效果 5
4．网站首页Body 6
5．网站Footer 9
6．商城中心页面 9
7．关于我们页面 11
8．我们的服务页面 12
9．用户分享页面 13
10．我们团队页面 15
（二）部分子页页面结构 16
1．二级页面 16
2．三级页面 18
四、网站的测试与问题的解决 19
五、总结 20
致谢 21
参考文献 22
一、前言
（一）网站开发背景
在现如今21世纪的 *好棒文|www.hbsrm.com +Q: &351916072&
今天，计算机技术和网络电商发展技术的普及，以计算机技术和网络技术为代表的各类智能化应用软件也应时代发展潮流而产生。计算机技术的迅速发展，带动了电商行业发展的深入进行，以B2B为首的各类淘宝、京东电商网站的迅速崛起，大大促进了人们网上购物、网上订餐。人们通过使用各类智能化应用软件，来帮助人们通过线上浏览选购自己心仪的各类产品，节省出了因在实体店选购商品而花费的休息时间和精力。
结合本人大学所学专业知识和技能，结合本人多年购物经验，我角色设计一款基于手机壳为主题的，为各个爱好手机壳的消费者用户设计的一款在线购物网站，通过设计这样一款手机壳网站，可以帮助更多的消费群体在线浏览查看各类手机壳商品，帮助更多的消费者在线浏览查看。
（二）网站开发目标
爱美手机壳在线购物网站的开发主要目标为设计一款帮助各位消费者用户选购自己心仪的手机壳商品，查看商品详情，查看商品分类，查看我们的服务，结合自身需求浏览查看喜欢的商品。
爱美手机壳在线购物网站的开发前端页面设计要求符合用户需求，力求为用户设计符合用户需求，页面美观大方，且操作简单，符合用户购物流程的一款在线购物智能应用网站。
（三）网站开发意义
爱美手机壳在线购物网站的开发有利于帮助更多消费者可以在线上浏览查看自己心仪的手机壳商品，爱美手机壳在线购物网站的开发有利于帮助店铺商家用户在线管理各类商品信息。
（四）课题内容
制作手机壳网站第一步需要收集手机壳的图片与材质的详细信息，爱美手机壳网站的设计与实现关键用到了两款软件：Adobe Photoshop、Dreamweaver。Adobe Photoshop，Adobe公司开发和发行的图像处理软件，简称“PS”。处理图片以达到自己想要美观效果是它的作用。Dreamweaver是一款网页编辑器，该软件非常适合制作网站和网页，使用Dreamweaver来设计制作网站，用HTML语言编写一款静态网站，在这个环境中编写代码，制作网页以达到自己预期的效果。
二、爱美手机壳网站的模块分析
（一）网站总体布局
通过学习其他知名的商城网站，运用到自己在学校期间所学到的网页制作设计了本网站，为线上的手机壳产品制作了这样的网站，主要为了让不同的消费群体可以查看到各式各样的手机壳产品，这样可以吸引到更多不同的消费群体进入网站，从而进行浏览查看。网站的首页功能导航菜单主要有：首页、商城中心、相关资讯、关于我们、我们的服务、用户分享、我们的团队。这七个模块所设计的页面排版各有所不同，每个页面都会给用户不同的浏览感受，用户只需选择点击不同手机壳分类，便可搜索到自己所喜爱的手机壳。
（二）网站首页模块
网站首页主要为进入本网站的第一个页面，主要设计为静态页面信息展示，动态图片的循环展播，热销商品的展示，新款推荐区域的设计，以及各类产品分类展示信息操作。采用了动态图片轮播展示效果，吸引用户的注意力，采用了头部导航设计菜单，主要分为首页、商城中心、相关资讯、关于我们、我们的服务、用户分享和我们的团队这几个模块。
1．商城中心
用户可浏览商城中心各类商品活动信息，可查看各种不同的手机壳的商品信息，可根据分类查看各种不同的手机壳的相关信息，手机壳的展示主要为手机壳图片介绍、名称及款式样式的详情信息介绍。
2．情侣手机壳
情侣手机壳页面主要为年轻的情侣设计，此页面的手机壳款式新奇，搞怪，温馨，非常适合年轻情侣的用户。里面主要还有店长的推荐和新品推荐的产品。可依据相关推荐和热销产品查看产品信息。
3．关于我们
关于我们这个页面主要为本网站的资质信息介绍所设计，此页面中包括介绍手机壳的发展背景、手机的材质和产品信息的相关介绍。用户可通过查看此页面了解到手机壳的发展背景、材质和相关的历程。
目录
一、前言 1
（一）网站开发背景 1
（二）网站开发目标 1
（三）网站开发意义 1
（四）课题内容 1
二、爱美手机壳网站的模块分析 1
（一）网站总体布局 1
（二）网站首页模块 2
1．商城中心 2
2．情侣手机壳 2
3．关于我们 2
4．我们的服务 2
5．用户分享 2
6．我们的团队 2
7．网站布局模块 2
三、爱美手机壳网站的页面设计 3
（一）网站首页页面结构 3
1．爱美手机壳首页 3
2．爱美手机壳导航栏 4
3．网站首页滚动效果 5
4．网站首页Body 6
5．网站Footer 9
6．商城中心页面 9
7．关于我们页面 11
8．我们的服务页面 12
9．用户分享页面 13
10．我们团队页面 15
（二）部分子页页面结构 16
1．二级页面 16
2．三级页面 18
四、网站的测试与问题的解决 19
五、总结 20
致谢 21
参考文献 22
一、前言
（一）网站开发背景
在现如今21世纪的 *好棒文|www.hbsrm.com +Q: &351916072&
今天，计算机技术和网络电商发展技术的普及，以计算机技术和网络技术为代表的各类智能化应用软件也应时代发展潮流而产生。计算机技术的迅速发展，带动了电商行业发展的深入进行，以B2B为首的各类淘宝、京东电商网站的迅速崛起，大大促进了人们网上购物、网上订餐。人们通过使用各类智能化应用软件，来帮助人们通过线上浏览选购自己心仪的各类产品，节省出了因在实体店选购商品而花费的休息时间和精力。
结合本人大学所学专业知识和技能，结合本人多年购物经验，我角色设计一款基于手机壳为主题的，为各个爱好手机壳的消费者用户设计的一款在线购物网站，通过设计这样一款手机壳网站，可以帮助更多的消费群体在线浏览查看各类手机壳商品，帮助更多的消费者在线浏览查看。
（二）网站开发目标
爱美手机壳在线购物网站的开发主要目标为设计一款帮助各位消费者用户选购自己心仪的手机壳商品，查看商品详情，查看商品分类，查看我们的服务，结合自身需求浏览查看喜欢的商品。
爱美手机壳在线购物网站的开发前端页面设计要求符合用户需求，力求为用户设计符合用户需求，页面美观大方，且操作简单，符合用户购物流程的一款在线购物智能应用网站。
（三）网站开发意义
爱美手机壳在线购物网站的开发有利于帮助更多消费者可以在线上浏览查看自己心仪的手机壳商品，爱美手机壳在线购物网站的开发有利于帮助店铺商家用户在线管理各类商品信息。
（四）课题内容
制作手机壳网站第一步需要收集手机壳的图片与材质的详细信息，爱美手机壳网站的设计与实现关键用到了两款软件：Adobe Photoshop、Dreamweaver。Adobe Photoshop，Adobe公司开发和发行的图像处理软件，简称“PS”。处理图片以达到自己想要美观效果是它的作用。Dreamweaver是一款网页编辑器，该软件非常适合制作网站和网页，使用Dreamweaver来设计制作网站，用HTML语言编写一款静态网站，在这个环境中编写代码，制作网页以达到自己预期的效果。
二、爱美手机壳网站的模块分析
（一）网站总体布局
通过学习其他知名的商城网站，运用到自己在学校期间所学到的网页制作设计了本网站，为线上的手机壳产品制作了这样的网站，主要为了让不同的消费群体可以查看到各式各样的手机壳产品，这样可以吸引到更多不同的消费群体进入网站，从而进行浏览查看。网站的首页功能导航菜单主要有：首页、商城中心、相关资讯、关于我们、我们的服务、用户分享、我们的团队。这七个模块所设计的页面排版各有所不同，每个页面都会给用户不同的浏览感受，用户只需选择点击不同手机壳分类，便可搜索到自己所喜爱的手机壳。
（二）网站首页模块
网站首页主要为进入本网站的第一个页面，主要设计为静态页面信息展示，动态图片的循环展播，热销商品的展示，新款推荐区域的设计，以及各类产品分类展示信息操作。采用了动态图片轮播展示效果，吸引用户的注意力，采用了头部导航设计菜单，主要分为首页、商城中心、相关资讯、关于我们、我们的服务、用户分享和我们的团队这几个模块。
1．商城中心
用户可浏览商城中心各类商品活动信息，可查看各种不同的手机壳的商品信息，可根据分类查看各种不同的手机壳的相关信息，手机壳的展示主要为手机壳图片介绍、名称及款式样式的详情信息介绍。
2．情侣手机壳
情侣手机壳页面主要为年轻的情侣设计，此页面的手机壳款式新奇，搞怪，温馨，非常适合年轻情侣的用户。里面主要还有店长的推荐和新品推荐的产品。可依据相关推荐和热销产品查看产品信息。
3．关于我们
关于我们这个页面主要为本网站的资质信息介绍所设计，此页面中包括介绍手机壳的发展背景、手机的材质和产品信息的相关介绍。用户可通过查看此页面了解到手机壳的发展背景、材质和相关的历程。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/jsjkxyjs/1195.html
