毕业论文——重庆美食网站的原型设计与制作

1、全日制本科生毕业论文题 目：重庆美食网站的原型设计与制作学 院：计算机与信息科学学院专业年级：计算机科学与技术学生姓名:学号：指导教师： 职称：年月日重庆美食网站的原型设计与制作摘 要：本毕业设计是一个关于重庆美食展示的网页设计。结合html> css javascript 和ajax等脚本语言，axu“原型制作工具，以及配合各种网页开发工具，制作出原型和网页。 网页的主要信息就是围绕着美食，将重庆的美食统一归纳呈现给广大用户群体，方便人们浏 览之后更好的了解重庆美食。关键词：html； css； javascript；原型制作abstract： the graduation proje

2、ct is to do a show about chongqing food web design combined with html, css, javascript and ajax scripting language, axure prototyping tools, as well as with a variety of web development tools, create prototypes and web pages. the main information page is around the food, the chongqing cuisine unifie

3、d induction presented to the general user community to facilitate a better understanding of people after browsing chongqing cuisine.key words： html； css； javascript； prototyping中华的饮食文化博大精深。在山和云之间，在云和水之间的重庆，美食不胜 枚举。随着人民生活水平不断的提高，人们对美食的追求成为一种高质量生活的 标准，牛活需要继续，人们的吃喝就不会停止，所以现在吃喝方面的服务也更加 完美，人们为了追求美好生活的享受常

4、常会花费很多功夫。在信息技术飞速发展的今天，人们获取信息的方式更多是来源于互联网，很 多人在出行之前都会上internet做攻略，会提前做好计划，去哪里玩，之后吃什 么，网络上的资源很齐全，虽然攻略是每个人用心写就的，但是很难说别人写的 攻略对自己来说是不是值得，因为不知道自己和写攻略的人口味兴趣是否一致， 同样是“酸辣粉不错，微辣”，重庆人写的和浙江人写的含义能一样吗？而且对于 外来人员来说，直接网上搜索的信息不齐全，不是很好做判断，可能对于他们， 一说起重庆，最木能的反应就是吃火锅，可是火锅种类繁多，各有特色，到底哪 一种比较适合自己，也不得而知。上各大网站搜索，基木上都是零碎的美食信息,

5、 找不到一个详细介绍重庆饮食的网站。所以我选择建立一个重庆美食介绍的网站 将重庆的美食统一归纳呈现给大家，方便人们浏览之后更好的了解重庆美食，节 约时间成木也便于更好的确定饮食计划。这是我设计制作的主要原因。1开发环境1.1开发环境介绍(1) 操作系统:win7o(2) 开发软件：axurerp 7. 0 phpstorm8. 0. lo(3) 浏览器：360浏览器,chrome浏览器，firefox浏览器。1.2使用技术介绍1. 2. 1原型制作axureaxurc rp是一个专业的快速原型设计工具“。axure,代表美国axure公司； rp则是rapid prototyping (快速原

6、型)的缩写。在web方向，产品部门使用最 多，不用进行编程，就可以快速创建符合用户需求的网站原型，可以自动生成iitml 原型，提供基本的网站模型，让技术部门参考定义数据接口以及确定网站的结构。 1.2.2 静态页与布局html. div+csshtml (hyper text markup language):超文本标记语言，是一种用于创建网页 的标准标记语言而不是编程语言。html是网站的结构层，展示页面内容，是建 设网站的基础技术，浏览器使用html标签和脚本来诠释网页内容，但不会将他们 显示在页面上。在实际的项口屮，如果网速真的很差，最开始加载只能加载出html 结构，那么也应该保证展

7、现在浏览器中的内容也应该是可读的，结构比较清晰的。 1997年12月18日，html4. 0作为w3c推荐标准发布，在2014年10月28 s , html5 作为w3c推荐标准发布，最新版是html5. 0,使用最广泛的是html4. 01版本。css是层叠样式表(cascading style sheets),是用于控制网页样式并允许 将样式信息与网页内容分离的一种标记性语言，css有三大优势：一次性指定外 观，一次性改变外观和外观与内容分离。div+css是一种网页的布局方法，与最 开始的通过表格布局的方式不同，css可以控制div的排列状态，如果想要改变布 局，简单的改动css便可以产

8、生一种新的布局。1. 2. 3 动态交互javascript 与 ajaxajax是异步的javascript和xml,用xmlhttprequest和web服务器进行 数据的异步交换販。利用javascript操作dom,在后台与服务器进行少量数据交 换，数据在客户端与服务器之间独立传输，在不重新加载整个网页的情况下，对 网页进行局部更新。ajax为构建良好的用户体验的网络系统提供了良好的支持， 是当前开发web系统的一种必备技术。javascript, 一种直译式脚本语言，是一种动态类型、基于原型的语言。它 的源代码不需要经过编译，直接在浏览器中运行时被解释，是一种解释性的语言。 有了 h

9、tml和css,得到的是一个静态的页面，没什么动画，于是就有了 javascript 来给页面添加一些动态的效果，比如网页图片的幻灯片切换，标签切换，分页加 载等等。1.3开发流程想要制作一个网站，需要对产品从开始构思到最终发布都有所了解，所以就 需要对整个制作流程有一个比较清晰的认识。一般一个网站的开发流程如图1-1 所示。图1-1网站开发流程图2原型设计与制作2.1原型设计在写代码之前，做好设计是非常重要的组成部分。原型是产品的最初形态，确认用户对产品界面布局和操作功能可用性的需求，经过设计，体验，改进的循环过程，来获得最佳的用户体验，满足用户需求，使产品的后续需求更改量达到 最小。产品原

10、型通俗的说就是产品设计完成之前的一个大体框架，在web方向来 说，就是将页面模块、元素进行大体上的排版和布局，在适当的加入一些交互性 的元素做成动态效果，使其更接近网站的实际效果。确定需求之后再交于技术部 门开发，可以避免因为不断的修改需求而导致程序员对代码的无尽修改而造成的 吋间浪费。2.2原型制作2. 2. 1 axure 简介（未命*; axure rp pro 7x）: licensed to axureuvrrduh12 3 £: fc>mofddn k d站点地ibmsaw 三 q maul > common届件库h25®"m home&#

11、187;x2x>x50csco卜4.二-q ti d hometx£h 5hi21 txtt5t交丈mwx呢®%入2m-快捷功能区100% *| 13：二8arialnornvd*s«xomims 珈 mwv匸斫图2-1 axure面板（1）快捷功能区。axure与office visio十分相像,软件的顶部把一些常用 功能的快捷按钮全部集成在这里。面板展示如图2-1所示。（2）站点地图。axure中的站点地图，会包含整个原型中所有的页面。它的 作用是管理整个原型中的所有页面，也能够进行页面的增删和重命名等操作。当 双击一个页面名称的时候，这个页面会打开在主

12、编辑区，新建的页面是空的，页 面的内容就是我们自己来编辑为我们的设计稿。（3）元件库。一个页面上的内容就是我们通过拖动一个一个的元件来拼合组 成的，所以网站里面所显示的内容我们都能在axure中组合元件搭配展示岀来。axure木身自带了两个英文版的元件库，一个是默认元件库一个是流程图元件库, 可以自己找汉化的元件库，放在指定的目录下（defaultseetings/libraries）, 就添加了中文版的元件库。在我们进行原型开发时，最常用的是默认元件库。我 们在进行原型页面制作时，只需要把元件库里面的元件拖动到主编辑区松开，元 件就会被摆放在松开的位置上，通过拖动和位置调整，放置到相应的位置

13、上即可。（4）生成与预览。在axure中预览或者牛成当前文件都有相应的设置。在预 览设置和牛成的常规设置里，都可以选择使用哪种浏览器查看效果，和设置是否 在生成后显示站点地图，在chrome中预览，需要安装相应的插件，对于同时安装 了 360和chrome浏览器的用户，由于这两个浏览器有冲突，有时候会导致chrome 中无法预览相应的动态效果，建议使用firefox浏览器查看。牛成与预览方式有 一些差别，区别在于同样一个原型在预览和生成的时候它在浏览器的地址栏里面 的地址不一样，而且生成会在相应目录里产牛她的文件，而预览则不会；进行预 览（快捷键f5）的时候，在浏览器中的地址是一个以http:

14、/127. 0. 0.1开头的网 址，这种方式打开原型就像把html文件上传到服务器之后通过网址打开的效果。 生成原型文件（快捷键f8）时，浏览器地址栏显示的是我们保存文件的文件夹路 径。如图22所示。q home° homec d file:/c:/users/administrator/documents/axure/html/命名/start.html：:应用 q重夫农村商业银行冬weinreb5（»smioc d :32767/start.html#p=home应用 c重庆农村商业银行克 weinre的便用-mig图2-2生成与预览的地址对比2.

15、2.2母版用axure制作原型图的时候，有些部件是需要重复使用的，为了方便维护， 可以将这些复用部件做成母版，比如header和footer,需要调用的时候直接从母 版菜单栏拖拽过来。当你修改母版的时候，所有调用到该母版的页面或区域都会 发生相应变动，省去了挨个修改的麻烦，可以减少重复工作量和便于维护修改。 具体制作样式如图2-3所示。18折着用僥.包宓g.b i v三国乓：=a 軸越勁嗒"si| first axurc rp pro 7.0 : licensed to axureuser文件(b «(£)视5s3 项目(£)布尺q)发冇(£)

16、団臥cd «to(h)732 y: 108 w: 460 h: 4680% normalm footera t>its rie< default > commonh1headef-nav圜 header5mq笳讶呂色艮性 样式header qita xjbomian huoguoddddndex huoguo xmomanimageuoa 1w(2)?xeh to«1«q® header footer腿1麵5s皿净式口 首页三淫r送中设住蜩名称navj (仅曲倾中生效)io 1 y导入滑总rs图2-3母版原型图2. 2.3元件交互制作导

17、航菜单时，要设置只能一项被选择，当选择一项时，其它选项被取消 选择。如果我们想讣一组这样的元件只能唯一被选择的话，只需要把这几个选项 都选屮，然后在属性屮设置一个单选按钮的组名称，把它们放到一个组里就能实 现唯一被选中的效果。最后，还需将默认选屮的元件设置为选屮的状态。2. 2.4动态面板动态面板是axurc原型制作中使用非常频繁的一个元件，相当于一个多层的 容器，容器的每一层又可以包含多个元件。主要用途就是实现一些动态的交互效 果。主要用在一下几个方面：(1)隐藏与显示；(2)滑动效果；(3)拖动效果；(4) 多状态效果。多状态效果，是在网站原型中应用非常多的，因为它极大的减少了动态面板 的

18、数量，降低了复杂度。在多状态下，动态面板默认会显示排列在第一位的状态 中的内容，可以在元件管理以及状态管理屮去改变状态的次序。动态面板的尺寸 决定了显示的内容，默认情况下如果状态屮内容超出了动态面板的尺寸，则不能 够完整显不。在本次设计中，主要使用了多状态效果。首页的banner图片轮播切换，tab点击切换，火锅页面的鼠标点击切换都是采用一个动态面板的不同状态实现的， 以及动态面板的滑进滑出也是通过状态更换来实现不同效果的展示。具体制作样 式如图2-4所示。u vw发布o ay.0 ihmh)80%冲卞 d以冠x: 2« y: 1820 w： 900 k文样9 mki)dub 二gw

19、解仔hg3i first axure rp pro 7 0: lk<茁垃aa hi k> * <-三q dtfmlt > commo h1«*>e如h2a-趣aewo)? xa t>陰 focatfw. a.zd o qxxu mxs i rts；©£ 无 1w大f 殂3>jl停u" jtf ft«s±fttcsm«25ems”q huoguo ,. more(2>m< 创0龍陆知图2-4动态面板原型界面3前端制作前端界面是人与机器之间传递和交换信息的媒介，一个拥有良好结

20、构的界面 对用户的感官体验和浏览体验有着至关重要的作用。同时前端的制作时要对网站 的性能做相应的优化，让用户在操作时有更好的交互体验。所以综合考虑，本网 站由首页、火锅、小面、其他美食四个板块组成：首页是展示重庆比较出名的景 色，以及一些美食代表，对网站做一个简略的介绍；火锅篇着重介绍重庆有名的 火锅丿占铺以及他们的特色文化，用户可以通过浏览知道重庆的著名火锅，设计中 都采用了外链接，有官方网站的都是直接链接到官方网站，没有的直接链接到百 度，百度可以告诉用户更详细的内容；小面篇就着重介绍重庆的小面以及他们的 一些简介，重庆小面文化节，产生了重庆前50强的小面，每一个都独具特色，用 户可以通过

21、简介查看他们的特色，决定最想要尝试的味道；其他篇介绍重庆除了 特别出名的火锅和小面之外的其他美食，比如陈麻花，手工酸辣粉等等。具体的 层次结构如图3-1所示。图3-1网站结构图3. 1样式表现在不同的浏览器中，自定义的标准有一部分有所不同，为了在不同浏览器中 呈现相同的效果，所以需要重写，网上有很多重写的样式，但是为了优化加载速 度，一般都是自己的网页中用到了哪些，就自己重写哪一些。在首页中banner下面部分的圆圈，下面的tab切换板块中的翘边阴影样式， 小面篇banner的动画，都是用css3来制作。（1）翘边阴影：翘边阴影的制作实 际上是在更低层级通过伪类的方式给当前对象制作阴影颜色的矩

22、形，然后通过拉 伸，旋转，变形至刚好的角度，产生以为是阴影的视觉效果。css3虽然已经被大 多数标准浏览器所支持，但不同的浏览器可能还有着细微的差异，那就可能需要 不同的浏览器前缀，或者细微的语法差别，不过在大多数情况下，都可以使用各 种不同的语法，并且通过层叠机制来确保哪一条声明最终生效，所以，应该把标 准语法排在最后。（2） css3动ifflj： web动画的实现原理，是利用了人眼的视觉暂 留的现象，在短时间内连续播放数幅静止的画面，使肉眼因视觉残象产牛错觉， 而误以为画面在动。在css 3引入transition （过渡）之前，css是没有时间 轴的，所有的状态变化，都是即时完成。tr

23、ansition是一次性的，且只能定义开 始状态和结束状态，不能定义中间状态。css3 animation就是为了解决这些问题 而提出的。它是目前制作web动画的一处主流方式，也是w3c规范之一。3.2动态交互在实际的项目开发中，除去界面上固定的图片，其他应该动态更新的数据都应 该是定义数据接口，从后端来传入数据。所以在本次制作中，我采用自己定义数 据接口并自定义json格式的数据，利用ajax与服务器通信，通过使用http请 求，web页向服务器进行请求，得到来自服务器的响应，得到资源对页面进行渲 染。http1. 1定义的请求方法有8种，最常用的两种方式为get与posto get 般用于

24、信息获取，使用url传递参数，对所发送信息的数量有限制，一般在2000个字符。post 般用于修改服务器上的资源，对所发送信息的数量无限制。木次 制作主要使用get方法。各页面的前端制作与原型制作效果图展示如图3-2.图3-3、图3-4、图3-5所示。d柑him<ckxsimg皿lood-naffwi ewwmcwwioeofood-<mgtood-imglood«cwme tcmcammr*«w w3«tar<e? " mrorm y wt。food-img图3-2其他页效果图与原型界面图portfottodhkm« >

25、;血啊"图3-3火锅效果图与原型界面图孑咏金庆odmxaw*«knl mb图3-4小面效果图与原型界面图山毎費碳不邵4 "mbi七 y祁 * rbalr sa他fuk« uhrk«i mwmasxn ww« <ni nan 7mwriv vsutate dotofy «h bw«图3-5首页效果图与原型界面图4总结在网站开发过程中，原型设计和制作是非常重要的过程和手段。在公司实习 期间，了解到在一个项目的研发流程屮，技术团队实际开发z前，都是产品部门 在确定需求与制作原型，期间都会与技术团队商讨技术是否可以实现，怎样可以 有更加好的用户体验，所以技术团队也都需要了解