“锐雯”主题屏壁纸网站设计与实现-计算机网络技术

目录TOC\o"1-3"\h\u17648一、设计背景 3189111.1选题背景 3127311.2选题意义 35854二、设计思路 3202892.1开发环境与工具 3176662.2技术架构 318749三、需求分析 3306623.1设计目标 3122023.2功能需求 476713.3性能要求 412246四、作品设计 4183844.1总体设计 4110844.2详细设计 45234.3数据库设计 412264五、功能实现 4120175.1模块1实现 4315295.X模块X实现 420730六、作品测试 473766.1测试概述 470066.2测试过程 4234686.3测试结果 476七、设计总结 421888参考文献（四号黑体，居中,段前后1行） 429080附录（黑体小三、中间空四格、居中，新起一页） 5一、设计背景1.1选题背景随着经济生活水平的持续提高，人们已经不再单单追求感官上的满足。而是逐渐转向了一种心灵上的愉悦享，人们对自己喜欢的事物和风景总是拥有好心情，随着现在越来越多的人用电脑，电脑开机后第一眼看见的就是电脑桌面，一张好看的壁纸能让人心情愉悦，大概人人都希望穿得漂漂亮亮、潇潇洒洒、整齐得体的出现在众人面前吧!这可是“爱美之心”在做怪,您对自己如此,对您的“爱机”也不能让它披一件朴素“外衣”就万事大吉了。在闲暇之余,不要忘记给自己的“爱机”化妆打扮一个,让它“招摇于桌”尽显风采呀!您不必大费周折,只需您点进我的壁纸网站逛逛,您决不会失望,因为精彩的璧纸等着您!本壁纸网站和其它壁纸网站不同的是，大部分网站虽然壁纸也都是高清无瑕疵，但是有些壁纸网站是要付费才能下载原图的，而我的壁纸网站都是免费分享给大家下载使用的，并且都是原图没有压缩水印的超清壁纸，本次毕业设计就是想分享自己找到的一些好看壁纸给大家。1.2选题意义作为打开电脑第一眼就看到的桌面壁纸，设置一个赏心悦目的桌面壁纸是必不可少的，手机也是一样的，每次打开手机看时间第一眼看见的也是手机锁屏壁纸，我这个网站就是解决广大网友们找不到自己喜欢的电脑壁纸问题，本网站和大部分壁纸网站不同的是我的壁纸网站排版简约，分类清晰，下载快捷，游客进入网站可以直接通过分类寻找自己喜欢的壁纸并且右键下载就可以了，下载的壁纸不会被压缩，比一般网站都要简单易操作，一般壁纸网站右键下载的都是被压缩过的图片，而我的不会被压缩，通过本次毕业设计，想做一个自己喜欢乃至广大网友喜欢的电脑壁纸网站，解决广大网友找不到自己喜欢的电脑壁纸的烦恼，给广大网友提供一个优质的壁纸网站。二、设计思路2.1开发环境与工具开发工具：HBuilderX，PS开发环境：软件环境：Windows10家庭中文版，谷歌浏览器硬件环境：处理器—Intel（R）Core(TM)i7-1050UCPU@1.80GHz2.3GHz内存—8.00GB系统类型：64位操作系统，基于×64的处理器设计思路：先构思首页“锐雯”主题的风格，排版，色彩，然后查询有关“锐雯”的壁纸及显示选秀台词，先把首页“锐雯”这个主题的页面排版设计好，再设计网站其它版块的内容及壁纸排版，然后寻找各种优质高清壁纸，再然后把壁纸添加到网站中并且实现壁纸分类，最后查看网站有什么排版不当，色调不搭问题，再进行修改优化。2.1.1(三级标题用黑体小四)2.2技术架构1.HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。2.CSS3是CSS（层叠样式表）技术的升级版本，是在网页中自定义样式表的选择符，然后在网页中大量引用这些选择符。3.（JS）——JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。4.(PS)——AdobePhotoshop（简称PS）是集图像扫描、编辑修改、图像制作、广告创意，图像输入与输出于一体的图形图像处理软件三、需求分析3.1设计目标我设计本次壁纸网站的初心和目的就是通过本次毕业设计，想做一个自己喜欢乃至广大网友喜欢的电脑壁纸网站，解决广大网友找不到自己喜欢的电脑壁纸的烦恼，给广大网友提供一个优质的壁纸网站，简单又朴实。3.2功能需求从用户体验角度来设计，网页的浏览可以是游客的身份，无需登录注册那么繁琐，进入网站就可以直接寻找自己喜欢的壁纸右键下载就好，壁纸不会被压缩，网站简单快捷，简单易操作，都是中文字体展示，一些国外壁纸网站就是英文展示，很多网友用户看不懂还要翻译才知道这个导航栏是什么意思，我的网站可能看着普普通通，但是真的很实用，壁纸都是优质超清无水印的壁纸，并且下载不会压缩，然后都是分类上传，用户寻找简单，下载便捷，网站一目了然，无其他不相关的东西展示，简约大方，给用户一种非常简单轻松的体验，实现用户一分钟就可以找到自己喜欢的壁纸并且下载，通过对广大网友喜欢的壁纸分析，本次网站设计的主要功能如下：网站主题为大部分人喜欢的一款游戏里的英雄为主题设计的。壁纸分类有八个板块，分别是英雄联盟、唯美风景、唯美人物、动漫风景、动漫人物、可爱动物、影视壁纸以及其它壁纸，其中可爱动物壁纸为大部分女性用户喜欢，动漫风景和人物为男性用户喜欢，唯美风景为已经在工作的上班族所喜爱，使用这些板块的壁纸要多提供一些。除了电脑壁纸，手机壁纸也是不可缺少的，所以本网站还设有手机壁纸板块，其中分类也多为大部分人使用一些类型，男性用户大部分使用美女锁屏壁纸，而女性用户大部分使用明星壁纸锁屏，使用这个板块的壁纸也要多找一些上传上去给用户使用。3.3性能要求硬件要求：1.80GHz以上CPU，256M以上内存操作系统要求：支持Windows10/7/8浏览器支持：谷歌浏览器（GoogleChrome）响应速度：采用了HTML5缓存机制，实现了懒加载容易维护：前台采用Table表格布局，容易维护和扩展作品设计4.1总体设计图1-1：网站设计总图网站设计图介绍：本次壁纸网站设计主要分为五大主板块和和十二个子板块，分别是壁纸分类下有八个子版块英雄联盟、唯美风景、唯美人物、动漫风景、动漫人物、可爱动物、影视壁纸、其它壁纸八类，还有四个子板块分别是美女壁纸、明星壁纸、二次元、简约壁纸，导航栏背景颜色和网站背景颜色均为渐变色设计，增加网站的美观。首页是以“英雄联盟”这款网络游戏中的一个英雄“放逐之刃—锐雯”设计的主题首页展示，分别有这个英雄的全部皮肤以及选秀台词和一个与“锐雯”这个英雄有些渊源的英雄“压缩”组成，精选壁纸都是挑选壁纸中的极品壁纸，最后一个是上传壁纸板块，这个功能还没实现我预期的效果，设计这个的初衷就是让大家一起分享自己发现的高清优质壁纸，毕竟一个人的力量有限，人多力量大，网站壁纸除了我找到的一些好看的壁纸分享给大家，大家也可以把自己找到的好看的壁纸分享给别人，大家相互帮助，分别上传自己喜欢的壁纸到网站上，这才是我设计的愿景，一个广大网友都喜欢的壁纸分享网站。4.2详细设计图2-1：首页设计图网站首页介绍：网站首页是以“英雄联盟”为主题设计的，首页是以“锐雯”皮肤为轮播图展示，下方是这个英雄的选秀台词，在下面就是和“锐雯”这个英雄有羁绊另外一个英雄“亚索”。图2-2：精选壁纸设计图精选壁纸介绍：精选壁纸里面的壁纸都是人物和风景两类壁纸，其中包括现实中的人物壁纸风景壁纸以及动漫人物壁纸和风景壁纸四个大类，都是我精选挑选的精品中的精品，画质都是4K、8K的超清画质，质量也是非常高，大家应该都是从精选壁纸里面找到自己喜欢的壁纸。图2-3：壁纸分类板块设计图壁纸分类介绍：壁纸分类板块主要分为八个板块，分别是英雄联盟、唯美风景、唯美人物、动漫风景、动漫人物、可爱动物、影视壁纸、其它壁纸，画质都是1080P起步，画质都是很清晰的，种类相对也比较多，大家应该都能从里面找到自己喜欢的壁纸。图2-4：手机壁纸设计图手机壁纸介绍：本壁纸网站不仅有电脑壁纸还有手机壁纸，手机壁纸分为四大类，分别为美女壁纸、明星壁纸、二次元、简约壁纸四类，壁纸图片都是1080P的高清壁纸，不模糊全屏壁纸，大家手机壁纸也可以在这里找到一款自己喜欢的壁纸做手机壁纸。图2-5：上传壁纸设计图上传壁纸介绍：本网站是我分享壁纸给大家的网站，当然大家也可以分享自己找到的高清优质的壁纸给别人，本网站设计了上传壁纸界面，大家可以把自己喜欢的，认为看好优质的壁纸上传到壁纸到网站上面给大家下载使用，上传必须是高清不模糊的壁纸，并且是本网站没有的壁纸，不能重复上传一样的壁纸。五、功能实现5.1模块1实现总体概括网站有五个主页面，分别是首页、精选壁纸、壁纸分类、手机壁纸、上传壁纸五个界面，其中壁纸分类里面有八个子页面，分别是英雄联盟、唯美风景、唯美人物、动漫风景、动漫人物、可爱动物、影视壁纸、其它壁纸八个界面，还有手机壁纸里面的四个子页面，分别是美女壁纸、明星壁纸、二次元、简约壁纸四个界面，网站总共十五个界面，二百二十五张壁纸，均为超清优质壁纸。主页面模块界面图3-1：首页模块展示图首页主要分布主要是上分渐变色导航栏搭配渐变色的背景颜色，中下方是“锐雯”皮肤的轮播图，然后锐雯的选秀台词，再下方就是一个和“锐雯”黎明使者皮肤和“亚索”黑夜使者皮肤以及他们的合照。图3-2：精选壁纸展示图精选壁纸主要以粉色，浅蓝色，浅黄色，浅绿色色调为主，看久了也不会眼睛疲劳，给人一种活力，青春，元气满满的感觉，壁纸也都比较简约，看久了不会眼花。图3-3：壁纸分类展示图壁纸分类分为八大类，分别是英雄联盟、唯美风景、唯美人物、动漫风景、动漫人物、可爱动物、影视壁纸、其它壁纸，壁纸分类的首页是英雄联盟，这类壁纸就是我主题壁纸，“锐雯”这个英雄就是英雄联盟这个游戏里面的一个英雄，所以我把这类壁纸放在壁纸分类的首页，这个英雄联盟这个游戏是一个合作类型的游戏，需要五个人的默契与配合，所以壁纸我基本是都是选取一个系列皮肤的壁纸，很少选单个英雄的壁纸，因为这是一款多人配合类游戏，不是单人游戏，它因需要默契与配合而打出一些惊艳四座的操作或者说“团战”而吸引人，这就是“电子竞技”的魅力。图3-4：手机壁纸展示图手机壁纸主要人物为主，因为我觉得手机都是竖起来比较长不是想电脑这样比较宽，所以我认为以人为主好看一点，风景的话也行但是没有人物那么有观赏性，所以大部分都是一些强长相甜美的女生或者一些帅气的男生已经明星为壁纸，动漫里面的人物也有，因为看动漫的人也比较多，除此之外一些不怎么喜欢人物的用户可以选择简约壁纸，干净整洁。图3-5：上传壁纸展示图上传壁纸是老师提醒想出来的一个特色，因为本身我做壁纸网就是分享自己收藏的一些好看超清的壁纸给大家使用，所以也提倡大家分享自己喜欢的壁纸给别人，性格相同的人喜欢的壁纸也类似，所以大家都分享自己喜欢的壁纸的话，那么这个网站就可以满足全部用户的要求，找到自己喜欢的壁纸下载使用，界面构思主要是左边一个介绍语“欢迎大家上传1080P的优质壁纸”文字描述，下方是上传按钮，左边是我超喜欢的一个动漫女人物为背景放在右边展示。电脑壁纸子页面模块界面：图4-1：英雄联盟壁纸展示图4-2：其它壁纸展示图4-3：唯美风景壁纸展示图4-4：唯美人物壁纸展示图4-5：动漫风景壁纸展示图4-6：动漫人物壁纸展示图4-7：可爱动物壁纸展示图4-8：影视壁纸展示手机壁纸子页面模块界面：图5-1：手机美女壁纸展示图5-2：手机明星壁纸展示图5-3：手机二次元壁纸图5-4：手机简约壁纸5.X模块X实现六、作品测试6.1测试概述“锐雯”主题屏壁纸网站是一个静态的壁纸网站，本次测试主要测试网站的兼容性，网站的性能，超链接以及壁纸下载是否被压缩模糊以及网站是否卡顿。6.2测试过程本次测试用小米笔记本Redmibook14分别在谷歌浏览器，火狐浏览器，IE浏览器以及360浏览器中测试，其中谷歌浏览器性能最佳，效果最好，反应速度最快，IE浏览器最慢，超链接都有反应，点击对应的地方会跳转到相应的网页，下载的壁纸也都是原画质并没有被压缩网站运行不卡顿。6.3测试结果由于是首次编写一个完整的网站，网站有的地方没有考虑周全的问题，比如在兼容性这一块，还是会多多少少的不足，不过经过进行多次重复测试，以及时发现了存在的问题并及时修正。设计总结这次毕业设计的网站为壁纸网站，和其它壁纸网络不同的是该网站设计的风格为简约，小清新风格，使人心情都能变好，壁纸风格都以简约，清新，唯美；本次设计和别人网站不一样的是，本网站除了有好看的电脑壁纸之外还有手机壁纸，并且网站有个上传功能，网友能分享自己喜欢的壁纸，本次设计的不足就是没有搜索功能，不能让网页直接搜索自己要的壁纸，但是该网站全部壁纸都以分类。这次毕业设计和以前做的网站不同的是，以前网站都是以小组为单位，和同学一起完成的，这次是自己一个人完成，难免有些坎坷，但是没有关系，在这次独立完成毕业设计的过程中，不仅拾起了以前忘记的和没学过的知识，也学会了在面对未知的、不懂的问题时，自己会独立思考，会去利用网络资源去解决问题。同时也对代码的理解又有了更进一步的加深。这次毕业设计经历了一个很大的疫情，新型冠状病毒感染了太多人了，死亡了太多了人了，从一个感染到十个在到一百个就一天时间，传播速度太快了，还好有白衣天使的守护和国家的关注、关心，疫情很快就得到了控制，治愈的人越来越多，疫情也得到了很好的控制，中国三天建造一个医院也让我重新认识了中国速度，让我感受了生而华夏的荣幸，这次疫情也让我每天都在家做毕业设计改进我的壁纸网站。这个网站的实现离不开指导老师的细心指导，离不开同学们的相互帮助，没有指导老师和各位同学的帮助，我的网站是实现完成不了的，在此特别感谢我的指导老师和同学们对我的帮助。通过本次毕业设计的制作，我认为将之前学过的知识进行了巩固，加深了对H5和CSS的理解，提升了自己的专业知识，体验到了将以前学到的知识使用起来做自己喜欢的网站的那种成就感，还享受到了把自己好的东西分享给别人的那种喜悦，这一点很重要，一个人的快乐，那只是一个小快乐，当你分享给一群人，那么它就变成了大快乐了，人要懂得分享自己好的“事物”！通过这次毕业设计，让我明白了不是什么项目和设计都要有很多人才能完成，很多事情自己一个人就能完成，只是没有认真对待，没有努力解决不会的问题，以及遇到问题就妥协的态度，有了这次的毕业设计，会为我以后的学习以及工作铺路。而在未来的学习工作中，我也会保持一种不断学习，不断求知的态度。参考文献文献：[1]CSS链接样式在网页设计中的应用及分析[J].刘鹏.数字技术与应用.2018(02)[2]CSS在网页制作中的应用[J].余平.甘肃科技纵横.2006(04)[3]DreamWeavercs6