毕业论文-基于jQuery技术的三亚美食网站的前端设计与实现.doc

2013年度本科生毕业论文（设计）基于 jQuery技术的三亚美食网站的前端设计与实现学 院： 电子信息工程学院 专 业： 数字媒体技术 年 级： 2009 级 学生姓名： 学 号： 导师及职称： 2013年6月2013 Annual Graduation Thesis (Project) of the College Undergraduate Design and Implementation of Sanya Food Website Front-end Based on the Technology of jQuery Department: College of Electronics and Information Engineering Major: Digital Media Technology Grade: 2009Students Name: Xue BingStudent No.: 09217039Tutor: Laboratory Technician Wang Shiyun Finished by June, 2013毕业论文（设计）授权使用说明本论文（设计）作者完全了解琼州学院有关保留、使用毕业论文（设计）的规定，学校有权保留论文（设计）并向相关部门送交论文（设计）的电子版和纸质版。有权将论文（设计）用于非赢利目的的少量复制并允许论文（设计）进入学校图书馆被查阅。学校可以公布论文（设计）的全部或部分内容。保密的论文（设计）在解密后适用本规定。 作者签名： 指导教师签名：日期： 日期： 毕业论文（设计）答辩委员会(答辩小组)成员名单姓名职称单位备注教授电子信息工程学院组长教授电子信息工程学院组员讲师电子信息工程学院组员助教电子信息工程学院秘书琼州学院本科毕业论文 （设计）摘 要随着计算机网络科技的发展，计算机网络已经成为人们日常生活中必不可少的信息渠道，已经覆盖到生活的各个领域。随着Web2.0的兴起，Javascript越来越受到重视，jQuery以其独特优雅的姿态，始终处于这场风暴的中心，受到越来越多人的追捧。民以食为天，但随着人民生活水平的日益提高，人们往往都在为吃什么而感到发愁，制作三亚美食网站的目的是为了帮助人们了解三亚美食。通过前台页面的搭建和jQuery特效的实现，给人们带来舒适享受的网站体验。本文主要做了以下几项工作：首先，根据当前网络发展情况及国际旅游岛实际需求分析网站实现的背景及意义；其次根据网站需求分析规划网站目标，选择软件平台,通过Photoshop 进行页面整体效果设计，运用Editplus及Dreamweaver进行前台页面搭建，通过 IETester测试jQuery相关代码的运行和对浏览器中CSS的兼容性进行调试，以jQuery为网站开发交互设计的主要语言。再次，详细阐述网站前端设计，介绍网站色彩搭配、页面设计，针对网站jQuery特效的理念、应用与实现等方面的做出介绍和论述。最后，对网站的总体完成效果和网站制作过程中遇到的问题及其解决方式进行归纳总结。通过用户需求分析了解用户需要，对网站功能进行具体规划，将网站分为首页、搜索页面、团购信息，热门推荐、关于我们和店家信息六大部分，并应用jQuery技术完成网站内搜索美食排序问题，店家具体位置的地图引用问题和一些页面特效及交互的具体实现。配合整体页面设计和色彩搭配，完成三亚美食网站的前台页面搭建的实现。关键词: 美食网站；前端设计；jQueryABSTRACTWith the development of computer network technology, computer network has become the peoples daily life essential information channels, it covers all areas of life. With the rise of Web2.0, Javascript has been paid more and more attention, jQuery with its unique and elegant posture, always in the center of the storm, more and more people pursued. With the improvement of peoples living standards, people tend to feel worried about what to eat, Sanya website is designed to help people understand the Sanya food. Through the realization of the front page design and jQuery effects, bring people comfortable enjoyment of the site experience. This paper mainly do the following work: first, according to the current network development and the actual demand of international tourist island of background and significance of the site implementation; secondly according to the website needs analysis planning site goals, selection of software platform, using jQuery as the main language website development of interaction design. Again, introduced the website web front end design in detail, according to the website jQuery effects of the concept, application and realization, makes a detailed introduction and discussion. Finally, the overall completion of site effect and site production process encountered problems and solutions were summarized.Through the analysis of user requirement to understand the user need, then makes a specific plann for the site, the site is divided into the home page, search page, group purchase information, recommendations, and stores information , and complete the search food ordering problem sites with the application of jQuery technology, shop realization position map reference problems and some page interaction. With the overall page design and color match, realize Sanya food web front page up.Keywords: food website ；front end engineering ；jQuery目 录第一章 绪论11.1 论文研究的背景与意义11.2 本文的主要工作11.3 论文的组织结构2第二章 相关技术分析32.1 网站目标32.2网站开发工具32.3 jQuery简介、特点及使用3第三章 网站前端设计53.1 网站设计原则53.2 网站页面设计53.2.1网站首页设计53.2.2 网站分页面设计63.3 网站特效设计与实现73.3.1焦点图实现73.3.2图片加载延迟特效的实现83.3.3查看完整地图效果的实现93.3.4 jQuery动画的制作11第四章 总结与展望13参考文献14致 谢15附录A：毕业设计说明书“三亚美食网”琼州学院本科毕业论文 （设计）第一章 绪论1.1 论文研究的背景与意义网络已经成为人们生产生活中必不可少的一部分，据中国互联网络信息中心（CNNIC）发布的第31次中国互联网络发展状况统计报告显示，截至2012年12月底，我国网民规模达到5.64亿。计算机技术与网络通信技术的发展与普及，已经彻底改变了我们的生活方式。社会资源的信息化数据的分布处理；各种计算机资源共享等应用需求大力推动着计算机网络技术向大众化方向发展1。随着Web2.0的兴起，Javascript越来越受到重视，一系列Javascript程序也蓬勃发展起来，从早期的Prototype，Dojo到2006年的jQuery,再到2007年的ExtJS，互联网正在掀起一场JavaScript风暴。jQuery以其独特优雅的姿态，始终处于这场风暴的中心，受到越来越多人的追捧2。海南省自2009年国务院发布国务院关于推进海南国际旅游岛建设发展的若干意见起，受到社会各界的广泛关注。据不完全统计，2011年海南省旅游人数为3000万人，2012年海南省旅游人数为3320万人。由此可见海南的旅游业正在飞速发展。在旅游业飞速发展的同时，不论是海南本地人，还是来自四面八方的游客，人们都免不了关心吃的问题。一个美食网站，既可以继承网络上信息量大、全、快的优点，又可以解决人们关于吃什么的问题。随着整个信息时代的到来，许多现代企业的发展也正在顺应“谁使用了网络，谁就掌握了未来”这个方向发展3。越来越多的群众和商家意识到网络信息的作用，很多商家已经把已有的经营模式和网络结合，为自己在未来的发展奠定基础。基于以海南国际旅游岛背景和Web应用开发环境，结合jQuery技术，开发三亚美食网，对三亚美食网的前端开发设计与实现进行论述。1.2 本文的主要工作本文主要通过视觉原理和交互设计原理来设计三亚美食网网站的前端页面和前端页面的特效实现。通过Editplus和Dreamweaver进行前台页面搭建，运用jQuery技术对网站前端页面特效进行实现。首先，介绍三亚美食网站的背景及其意义。其次，根据用户需求分析确定网站实现功能同时确定网站前端实现的相关技术。整合分析后将网站确定分为：美食搜索，团购，热门推荐，关于我们及店家详细信息介绍几大模块。结合jQuery技术实现网站的交互体验和视觉设计，实现网站的前端设计，并展示部分特效原理及其应用。最后，总结网站应用技术效果，展望jQuery技术及三亚美食网的未来发展前景。并对本文和三亚美食网站作出总结概括。1.3 论文的组织结构全文共分为四章，具体内容如下：第一章：绪论，概括介绍了本网站系统的开发研究背景，并阐述企业对网站提出的要求，以及论文开展的工作。第2章 ：相关技术分析，主要介绍网站系统前台交互所涉及的jQuery技 术。第3章 ：根据用户体验调查和需求分析，给出了网站的模块设计及实现功能。第4章 第四章：总结与展望，对本文设计并实现的三亚美食网站进行总结概括及展望。15琼州学院本科毕业论文 （设计）第二章 相关技术分析2.1 网站目标本系统前台采用HTML+JQUERY的开发框架，根据三亚饮食文化现状以及特点进行开发设计。开发此系统的目的是使游客或当地居民能确切的了解到当地的美食特色同时便于搜索和前往目的地。2.2网站开发工具网站通过Photoshop 进行页面整体效果设计，运用Editplus及Dreamweaver进行前台页面搭建，通过 IETester测试jQuery相关代码的运行和对浏览器中CSS的兼容性进行调试。2.3 jQuery简介、特点及使用 （1）jQuery简介 jQuery是一套跨浏览器的JavaScript库，简化HTML与JavaScript之间的操作。由John Resig在2006年1月的BarCamp NYC上发布第一个版本，到如今已经出到1.71版本4。正如jQuery的口号“write less,do more”所表达的，它使页面前端开发工作变得简单，能胜任的工作却大大增加了。全球前10000个访问最高的网站中，有59%使用了jQuery，是目前最受欢迎的JavaScript库。 （2）jQuery特点及优势jQuery强调的理念是写得少，做得多（write less，do more）。jQuery独特的选择器、链式操作、事件处理机制和封装完善的Ajax都是其他JavaScript库望尘莫及的。概括起来，jQuery有以下优势：轻量级。jQuery非常轻巧，采用UglifyJS压缩后，大小保持在30KB左右。强大的选择器。jQuery允许开发者使用从CSS1达到CSS3几乎所有的选择器，以及jQuery独创的高级而复杂的选择器。出色的DOM操作的封装，jQuery封装了大量常用的DOM操作，使开发者在编写DOM操作相关程序的时候能够得心应手，jQuery轻松地完成各种原本非常复杂的操作，让JavaScript新手也能写出出色的程序。可靠的事件处理机制，jQuery的事件处理机制吸收了JavaScript专家Dean Edwards编写的事件处理函数的精华，使得jQuery在处理事件绑定的时候相当可靠。在预留退路（graceful degradation）、循序渐进以及非入侵式（Unobtrusive）编程思想方面，jQuery也做得非常不错。完善的Ajax。jQuery将所有的Ajax操作封装到一个函数$.ajax()里，使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。出色的浏览器兼容性，作为一个流行的JavaScript库，浏览器的兼容性是必须具备的条件之一。jQuery能够在IE 6.0+、FF 3.6+、Safari 5.0+、Opera和Chrome等浏览器下正常运行。jQuery同时修复了一些浏览器之间的差异，使开发者不必在开展项目前建立浏览器兼容库。链式操作方式。jQuery中最有特色的莫过于它的链式操作方式即对发生在同一个jQuery对象上的一组动作，可以直接连写而无需重复获取对象。这一特点使jQuery的代码无比优雅。隐式迭代。当用jQuery找到带有“.myClass”类的全部元素，然后隐藏它们时，无需循环遍历每一个返回的元素。相反，jQuery里的方法都被设计成自动操作对象集合，而不是单纯的对象，这使得大量的循环结构变得不再必要，从而大幅地减少了代码量。丰富的插件支持。jQuery的易扩展性，吸引了来自全球的开发者来编写jQuery的扩展插件。目前已经有成千上万的官方插件支持，而且还不断有新插件面世。 （3）jQuery的选择及使用今年来，JavaScript的应用越来越广泛，但JavaScript自身存在3个弊端，即复杂的文档对象模型、不一致的浏览器实现和便捷的开发、调试工具的缺乏。在jQuery中，这几大弊端都被完美的隐藏，避免了很多不必要的麻烦，同时结合jQuery的特点优点，网站选择jQuery作为网站特效的实现技术无疑是网站提升网站交互体验的最佳选择。使用jQuery，首先要引用jQuery的库，jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数，在页面中加入以下代码即可6。script type=text/javascript src=/js/jquery.1.7.1.min.js/script页面引用jQuery库后，便可使用jQuery相关代码。琼州学院本科毕业论文 （设计）第三章 网站前端设计3.1 网站设计原则三亚美食网站，顾名思义，是指对三亚地区美食的介绍，可为用户提供搜索，查找，定位等功能，为餐饮企业提供互动的信息平台，实现足不出户，即可了解有关三亚美食的文化。概括起来主要有以下几点设计要求：首先，三亚美食网要能为用户和消费人群提供他们想要了解的信息，例如，有关餐饮行业的最新动态、折扣资讯、健康饮食、餐馆口碑等情况。需建立模块对信息进行发布和更新，只要用户访问本网站，便可以浏览信息。其次，三亚美食网为用户提供了优惠政策，用户通过网站进行预订，或在移动端上下载，领取电子优惠券，在店家内进行消费。此外，为了更好的服务于团体用餐消费，三亚美食网还开设了团购专栏，用户可在网页内浏览信息并进行团购预定，做到省时、省力、省钱。3.2 网站页面设计本文采用Photoshop进行页面总体效果设计，使用 HTML 进行前台搭建，并应用jQuery技术实现网站特效。在设计本网站的时候，最重要的事情就是让顾客能方便、快捷地浏览美食信息，并在最短的时间内找到自己想要的东西。3.2.1网站首页设计网站首页设计的好与坏直接影响到网站的访问数量，因为它是整个系统的灵魂。配色设计原理一书中曾提到过，黑与白的搭配永远是最经典的色彩搭配7。黑与白可以给人带来强烈的视觉冲击，对比鲜明不失效果。网站首页采用黑与白的对比，给用户带来印象深刻的视觉体验。网站首页结构，如图3-1所示：图3-1 网站首页展示3.2.2 网站分页面设计三亚美食网站分页面的色彩搭配与首页效果不同，首页追求的是视觉冲击，吸引读者；分页面的目的是给用户以良好的用户体验和享受，页面色彩搭配不采用具有视觉冲击的黑白色而采用红白色搭配，红色可以给人带来欢快、兴奋的感觉，使用户浏览页面时可以享受美食带来的诱惑，如图3-2所示。 图3-2 网站分页面设计三亚美食网站主要根据用户的浏览顺序及其需求将页面分类，首页设计给人以视觉冲突，整体风格保持一致，给人以不同但不错乱的感觉。具体页面分布如表3-1所示： 表3-1 网站页面分布序号名称功能1首页介绍网站主要功能2搜索根据地区、类别、消费分类搜索3团购浏览商家提供的团购美食及其优惠信息4热门推荐根据会员及用户的点评推荐列出热门菜品5关于我们网站企业信息介绍6店家信息由列表中的菜品转入具体店家介绍 3.3 网站特效设计与实现在jQuery UI一书中，作者曾提到过这样一段话：The great thing about jQuery themes is that they know you change the look of your page easily-just change the directory name to that of the theme you want to use7.这段话充分阐述了页面交互特效对一个网站总体效果的重要性。在本网站中应用特效较多，在本章节中主要从焦点图特效、页面延迟加载和查看完整地图等几个方面进行阐述。3.3.1焦点图实现1）特效效果：在首页页面中放置不同的图片，在页面正常浏览状态下，会固定隔一段时间切换一张图片，如果想具体浏览某张图片，将鼠标放置在图片上方，图片就会固定不切换。若想快速切换浏览，只需点击页面旁边的按键就可对图片进行即时切换，如图3-3所示。 图3-3 焦点图特效实现 2）实现原理：这个插件取得ul标签下的图片的路径，有几张图片生成相应数量的DIV，生成的DIV背景图片设置为ul标签里的图片，图片切换时，把上一张图片消失的时候使用淡出效果，下一张图片出现的时候使用淡入效果，这样就形成了图片切换的淡入淡出效果。slider-wrapper width: 523px;height: 337px;padding: 22px 0 0 107px;background:url(./images1/slider-bg.png)00no-repeat;overflow:hidden;position: relative;z-index: 1;float: left;margin: 0 40px 0 2px; 首先设置一个DIV，将这个DIV加上电脑背景。.然后在这个div里面放一个ul标签， class=“item”ul class=items liimg src=images1/slider-img1.jpg alt= /li liimg src=images1/slider-img2.jpg alt= /li liimg src=images1/slider-img3.jpg alt= /li/ul将这个ul的css设置为隐藏。（由于这个ul标签只是为了方便使用者修改、替换图片，真正页面显示的图片jquery代码会另外生成，所以这个ul标签是隐藏的）。.tiems display:none;最后加上上一张和下一张的控制按钮a class=prev href=#/aa class=next href=#/a3）实现代码$(window).load(function() $(.slider)._TMS(duration:800, /切换时间easing:easeOutQuad, /切换效果slideshow:7000, /自动切换的时间pauseOnHover:true, /鼠标停留在图片上时暂停切换pagination:false, /是否显示页码nextBu:.next, /设定下一张的按钮prevBu:.prev /设定上一张的按钮); 3.3.2图片加载延迟特效的实现1）特效效果：页面加载后，逐个加载各项数据的图片，随着浏览器窗口移动加载，图片加载中有图标提示。实行页面延迟加载可以有效解决同时加载过多图片而导致页面读取速度慢的问题。 图3-4 页面延迟加载特效对比实现图2）实现原理：首先用PS制作一个只有1px的透明图片，将所有需要应用效果的图片的src属性用1px图片代替（若src属性值为空，在IE下会显示一个红叉）。所需要应用效果图片的img标签的图片链接放到自定的data-url属性中，同时定义另一个事件，当窗口移动到图片所在位置时把src属性中的值用data-url中的值替换，实现效果。.loadingbackground:url(/image/ajax-loading.gif) center center no-repeat;把需要应用效果的图片添加class=loading，然后在CSS中设定loading类的样式。3） 实现代码$(.loading).scrollLoading( attr:data-url, /获取元素加载地址属性名 container:$(window), /默认的网页滚动 callback:$.noop /执行回调函数);3.3.3查看完整地图效果的实现特效效果：在店家详情中会显示店家的具体地理位置，但所占篇幅较小，为了让使用者有良好的用户体验，在地图下设置按钮，点击按钮可浏览全屏地图。浏览时点击页面其他位置，地图自动消失。这样既方便用户查看店家具体位置，又不会影响到用户对页面信息的浏览，实现随时查看，随时返回，如图3-5所示。（a）查看完整地图效果前（b）查看完整地图效果后图3-5 “查看完整地图”效果对比图实现原理：首先用一个和窗口大小相同的DIV，id=mapbg，将它的position属性设为fixed，背景颜色设置为黑色，不透明度设定为80%，z-index属性设置为1001。Style=”display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:1001;background:#000;-moz-opacity:0.6;opacity:0.6; filter:alpha(opacity=80);”然后再用一个DIV放置地图，id=h_map，将其position属性设为fixed，宽800px，高600px.将其在浏览器窗口居中显示并将此DIV置于id=mapbg的DIV之上。在这DIV中引用地图的API。style=display:none;position:fixed;width:800px;height:600px;top:50%;left:50%;margin-left:-400px; margin-top:-300px;background:#fff;z-index:1002;在CSS中把id=mapbg 和id=h_map的两个DIV隐藏，当用户点击查看完整地图按钮时显示这两个DIV。全屏地图打开后，当用户点击地图以外的区域时隐藏这两个DIV。$(#btn1).click(function()$(#h_map).fadeIn(500);$(#mapbg).fadeIn(500););3） 实现代码$(#mapbg).click(function()$(#h_map).fadeOut(500);$(#mapbg).fadeOut(500););/fadeIN (),fadeOut() 是jQuery中自带的淡入淡出效果的方法3） 分类搜索背景颜色转变特效效果：3.3.4jQuery动画的制作1） 特效效果：在网站搜索页面中，将信息具体按区域、类型及人均消费进行分类。 分为以下几个种类，如表3-2所示：表3-2 搜索类别详解序号分类类别功能实现1区域通过对三亚几块地区的划分，完成美食搜索，具体分为：河西区、河东区、三亚湾区、大东海区2类型通过美食的种类进行分类，完成搜索，具体分为：主食类、便餐类、海鲜类、小吃类3人均消费按消费水平分为几个阶段：50元以内，50-100元，100-200元在使用过程中由于页面过多，信息过多，在搜索过程中无法确定自己找的是哪个页面，使用红色背景动画标注，使背景红色随着鼠标的移动而变换，更能明确自己所搜索的页面。效果如图所示：图3-6 分类交互的实现2） jQuery的动画功能：jQuery animate()方法用于创建自定义动画。$(selector).animate(params,speed,callback);通过设定的参数定义成动画的css属性。可选的 speed 参数规定效果的时长。它可以取以下值：slow、fast 或毫秒。可选的 callback 参数是动画完成后所执行的函数名称。当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，用marginRight 而不是 margin-right，等等。同时，色彩动画并不包含在核心 jQuery 库中。如果需要生成颜色动画，您需要从 jQ 下载 Color Animations 插件。3） 实现代码$(.select dd aclass!=on).mouseover(function()$(this).stop().animate(backgroundColor:#c00,color:#fff);$(this).css(text-decoration,none););$(.select dd aclass!=on).mouseout(function()$(this).stop().animate(backgroundColor:#fff,color:#000);$(this).css(text-decoration,none););SCRIPT type=text/javascript src=js/jquery.color-2.1.2.min.js/SCRIPT在$(this).stop().animate( 和$(this).stop().animate( 处插入“stop”。在每一个动画执行前加入了stop命令，这样当一个动画没有执行完时播放另一个动画，就会立刻停止所有动画的播放执行下一个动画。第四章 总结与展望本文主要针对三亚美食网站前台页面的设计与实现进行阐述，页面整体布局应用Editplus软件，通过对用户需求的了解搭建页面、设置分页面所要加载的信息，做到使用户进入网站可以一目了然，随时了解自己需要的信息。同时应用jQuery技术，实现页面的特效及其交互设计，更加方便了用户对网站信息的了解，增加网站和用户之间的互动8。网站综合运用HTML+jQuery技术，以网络美食浏览为核心，实现了企业宣传、用户搜索查询等功能，用最先进的理念去规范维护体系内所有资源的管理，以实现信息资源的合理调配，达到最大限度、最高效率的使用目的。软件设计以经营管理为核心，以数据或信息为主导，在充分考虑到信息或数据的正确性与可靠性的前提下来实现网站的最终目标需求。本文将页面设计中一些特效及其实现方法做出