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

全日制本科生毕业论文题 目： 重庆美食网站的原型设计与制作 学 院： 计算机与信息科学学院 专业年级： 计算机科学与技术 学生姓名： 学号： 指导教师： 职称： 年 月 日0重庆美食网站的原型设计与制作 摘 要：本毕业设计是一个关于重庆美食展示的网页设计。结合HTML、CSS、JavaScript和Ajax等脚本语言，Axure原型制作工具，以及配合各种网页开发工具，制作出原型和网页。网页的主要信息就是围绕着美食，将重庆的美食统一归纳呈现给广大用户群体，方便人们浏览之后更好的了解重庆美食。关键词：HTML；CSS；JavaScript；原型制作Abstract：The graduation project 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 unified induction presented to the general user community to facilitate a better understanding of people after browsing Chongqing cuisine.Key words：HTML；CSS；JavaScript；Prototyping中华的饮食文化博大精深。在山和云之间，在云和水之间的重庆，美食不胜枚举。随着人民生活水平不断的提高，人们对美食的追求成为一种高质量生活的标准，生活需要继续，人们的吃喝就不会停止，所以现在吃喝方面的服务也更加完美，人们为了追求美好生活的享受常常会花费很多功夫。在信息技术飞速发展的今天，人们获取信息的方式更多是来源于互联网，很多人在出行之前都会上Internet做攻略，会提前做好计划，去哪里玩，之后吃什么，网络上的资源很齐全，虽然攻略是每个人用心写就的，但是很难说别人写的攻略对自己来说是不是值得，因为不知道自己和写攻略的人口味兴趣是否一致，同样是“酸辣粉不错，微辣”，重庆人写的和浙江人写的含义能一样吗？而且对于外来人员来说，直接网上搜索的信息不齐全，不是很好做判断，可能对于他们，一说起重庆，最本能的反应就是吃火锅，可是火锅种类繁多，各有特色，到底哪一种比较适合自己，也不得而知。上各大网站搜索，基本上都是零碎的美食信息，找不到一个详细介绍重庆饮食的网站。所以我选择建立一个重庆美食介绍的网站将重庆的美食统一归纳呈现给大家，方便人们浏览之后更好的了解重庆美食，节约时间成本也便于更好的确定饮食计划。这是我设计制作的主要原因。1 开发环境1.1 开发环境介绍（1）操作系统：Win7。（2）开发软件： AxureRP 7.0、 PhpStorm8.0.1。（3）浏览器：360浏览器，Chrome浏览器， Firefox浏览器。1.2 使用技术介绍1.2.1 原型制作AxureAxure RP是一个专业的快速原型设计工具1。Axure，代表美国 Axure 公司；RP 则是 Rapid Prototyping（快速原型）的缩写。在web方向，产品部门使用最多，不用进行编程，就可以快速创建符合用户需求的网站原型，可以自动生成HTML原型，提供基本的网站模型，让技术部门参考定义数据接口以及确定网站的结构。1.2.2 静态页与布局HTML、DIV+CSSHTML(Hyper Text Markup Language):超文本标记语言，是一种用于创建网页的标准标记语言而不是编程语言2。HTML是网站的结构层，展示页面内容，是建设网站的基础技术，浏览器使用HTML标签和脚本来诠释网页内容，但不会将他们显示在页面上。在实际的项目中，如果网速真的很差，最开始加载只能加载出html结构，那么也应该保证展现在浏览器中的内容也应该是可读的，结构比较清晰的。1997年12月18日，HTML4.0作为W3C推荐标准发布，在2014年10月28日，HTML5作为W3C推荐标准发布，最新版是HTML5.0，使用最广泛的是html4.01版本。CSS是层叠样式表（Cascading Style Sheets），是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言3，CSS有三大优势：一次性指定外观，一次性改变外观和外观与内容分离4。DIV+CSS是一种网页的布局方法，与最开始的通过表格布局的方式不同，CSS可以控制DIV的排列状态，如果想要改变布局，简单的改动CSS便可以产生一种新的布局。1.2.3 动态交互JavaScript与AjaxAjax是异步的 JavaScript 和 XML， 用XMLHttpRequest和web服务器进行数据的异步交换5。利用JavaScript操作DOM，在后台与服务器进行少量数据交换，数据在客户端与服务器之间独立传输，在不重新加载整个网页的情况下，对网页进行局部更新。Ajax为构建良好的用户体验的网络系统提供了良好的支持，是当前开发web系统的一种必备技术。JavaScript，一种直译式脚本语言，是一种动态类型、基于原型的语言。它的源代码不需要经过编译，直接在浏览器中运行时被解释，是一种解释性的语言。有了HTML和CSS，得到的是一个静态的页面，没什么动画，于是就有了JavaScript来给页面添加一些动态的效果，比如网页图片的幻灯片切换，标签切换，分页加载等等。1.3 开发流程想要制作一个网站，需要对产品从开始构思到最终发布都有所了解，所以就需要对整个制作流程有一个比较清晰的认识。一般一个网站的开发流程如图1-1所示。图1-1 网站开发流程图2 原型设计与制作2.1 原型设计在写代码之前，做好设计是非常重要的组成部分。原型是产品的最初形态，确认用户对产品界面布局和操作功能可用性的需求6，经过设计，体验，改进的循环过程，来获得最佳的用户体验，满足用户需求，使产品的后续需求更改量达到最小。产品原型通俗的说就是产品设计完成之前的一个大体框架，在web方向来说，就是将页面模块、元素进行大体上的排版和布局，在适当的加入一些交互性的元素做成动态效果，使其更接近网站的实际效果。确定需求之后再交于技术部门开发，可以避免因为不断的修改需求而导致程序员对代码的无尽修改而造成的时间浪费。2.2 原型制作2.2.1 Axure简介图2-1 Axure面板（1）快捷功能区。Axure与Office Visio十分相像，软件的顶部把一些常用功能的快捷按钮全部集成在这里。面板展示如图2-1所示。（2）站点地图。Axure中的站点地图，会包含整个原型中所有的页面。它的作用是管理整个原型中的所有页面，也能够进行页面的增删和重命名等操作。当双击一个页面名称的时候，这个页面会打开在主编辑区，新建的页面是空的，页面的内容就是我们自己来编辑为我们的设计稿。（3）元件库。一个页面上的内容就是我们通过拖动一个一个的元件来拼合组成的，所以网站里面所显示的内容我们都能在Axure中组合元件搭配展示出来。Axure本身自带了两个英文版的元件库，一个是默认元件库一个是流程图元件库7，可以自己找汉化的元件库，放在指定的目录下（DefaultSeetings/Libraries），就添加了中文版的元件库。在我们进行原型开发时，最常用的是默认元件库。我们在进行原型页面制作时，只需要把元件库里面的元件拖动到主编辑区松开，元件就会被摆放在松开的位置上，通过拖动和位置调整，放置到相应的位置上即可。（4）生成与预览。在Axure中预览或者生成当前文件都有相应的设置。在预览设置和生成的常规设置里，都可以选择使用哪种浏览器查看效果，和设置是否在生成后显示站点地图，在chrome中预览，需要安装相应的插件，对于同时安装了360和chrome浏览器的用户，由于这两个浏览器有冲突，有时候会导致chrome中无法预览相应的动态效果，建议使用firefox浏览器查看。生成与预览方式有一些差别，区别在于同样一个原型在预览和生成的时候它在浏览器的地址栏里面的地址不一样，而且生成会在相应目录里产生她的文件，而预览则不会；进行预览（快捷键F5）的时候，在浏览器中的地址是一个以开头的网址，这种方式打开原型就像把HTML文件上传到服务器之后通过网址打开的效果6。生成原型文件（快捷键F8）时，浏览器地址栏显示的是我们保存文件的文件夹路径。如图2-2所示。图2-2 生成与预览的地址对比2.2.2 母版用Axure制作原型图的时候，有些部件是需要重复使用的，为了方便维护，可以将这些复用部件做成母版，比如header和footer，需要调用的时候直接从母版菜单栏拖拽过来。当你修改母版的时候，所有调用到该母版的页面或区域都会发生相应变动，省去了挨个修改的麻烦，可以减少重复工作量和便于维护修改。具体制作样式如图2-3所示。图2-3 母版原型图2.2.3 元件交互制作导航菜单时，要设置只能一项被选择，当选择一项时，其它选项被取消选择。如果我们想让一组这样的元件只能唯一被选择的话，只需要把这几个选项都选中，然后在属性中设置一个单选按钮的组名称，把它们放到一个组里就能实现唯一被选中的效果。最后，还需将默认选中的元件设置为选中的状态。2.2.4 动态面板动态面板是Axure原型制作中使用非常频繁的一个元件，相当于一个多层的容器，容器的每一层又可以包含多个元件。主要用途就是实现一些动态的交互效果。主要用在一下几个方面：（1）隐藏与显示；（2）滑动效果；（3）拖动效果；（4）多状态效果。多状态效果，是在网站原型中应用非常多的，因为它极大的减少了动态面板的数量，降低了复杂度。在多状态下，动态面板默认会显示排列在第一位的状态中的内容，可以在元件管理以及状态管理中去改变状态的次序。动态面板的尺寸决定了显示的内容，默认情况下如果状态中内容超出了动态面板的尺寸，则不能够完整显示。在本次设计中，主要使用了多状态效果。首页的banner图片轮播切换，tab点击切换，火锅页面的鼠标点击切换都是采用一个动态面板的不同状态实现的，以及动态面板的滑进滑出也是通过状态更换来实现不同效果的展示。具体制作样式如图2-4所示。图2-4 动态面板原型界面3 前端制作前端界面是人与机器之间传递和交换信息的媒介，一个拥有良好结构的界面对用户的感官体验和浏览体验有着至关重要的作用。同时前端的制作时要对网站的性能做相应的优化，让用户在操作时有更好的交互体验。所以综合考虑，本网站由首页、火锅、小面、其他美食四个板块组成：首页是展示重庆比较出名的景色，以及一些美食代表，对网站做一个简略的介绍；火锅篇着重介绍重庆有名的火锅店铺以及他们的特色文化，用户可以通过浏览知道重庆的著名火锅，设计中都采用了外链接，有官方网站的都是直接链接到官方网站，没有的直接链接到百度，百度可以告诉用户更详细的内容；小面篇就着重介绍重庆的小面以及他们的一些简介，重庆小面文化节，产生了重庆前50强的小面，每一个都独具特色，用户可以通过简介查看他们的特色，决定最想要尝试的味道；其他篇介绍重庆除了特别出名的火锅和小面之外的其他美食，比如陈麻花，手工酸辣粉等等。具体的层次结构如图3-1所示。图3-1 网站结构图3.1 样式表现在不同的浏览器中，自定义的标准有一部分有所不同8，为了在不同浏览器中呈现相同的效果，所以需要重写，网上有很多重写的样式，但是为了优化加载速度，一般都是自己的网页中用到了哪些，就自己重写哪一些。 在首页中banner下面部分的圆圈，下面的tab切换板块中的翘边阴影样式，小面篇banner的动画，都是用CSS3来制作。（1）翘边阴影：翘边阴影的制作实际上是在更低层级通过伪类的方式给当前对象制作阴影颜色的矩形9，然后通过拉伸，旋转，变形至刚好的角度，产生以为是阴影的视觉效果。CSS3虽然已经被大多数标准浏览器所支持，但不同的浏览器可能还有着细微的差异，那就可能需要不同的浏览器前缀，或者细微的语法差别，不过在大多数情况下，都可以使用各种不同的语法，并且通过层叠机制来确保哪一条声明最终生效，所以，应该把标准语法排在最后。（2）CSS3动画：Web动画的实现原理，是利用了人眼的视觉暂留的现象，在短时间内连续播放数幅静止的画面，使肉眼因视觉残象产生错觉，而误以为画面在动10。在CSS 3引入Transition（过渡）之前，CSS是没有时间轴的，所有的状态变化，都是即时完成。transition是一次性的，且只能定义开始状态和结束状态，不能定义中间状态。CSS3 Animation就是为了解决这些问题而提出的。它是目前制作Web动画的一处主流方式，也是W3C规范之一。3.2 动态交互在实际的项目开发中，除去界面上固定的图片，其他应该动态更新的数据都应该是定义数据接口，从后端来传入数据。所以在本次制作中，我采用自己定义数据接口并自定义json格式的数据，利用Ajax与服务器通信，通过使用 HTTP 请求，web 页向服务器进行请求，得到来自服务器的响应，得到资源对页面进行渲染。HTTP1.1定义的请求方法有8种，最常用的两种方式为get与post。get 一般用于信息获取，使用URL传递参数，对所发送信息的数量有限制，一般在2000个字符。post一般用于修改服务器上的资源，对所发送信息的数量无限制。本次制作主要使用get方法。各页面的前端制作与原型制作效果图展示如图3-2、图3-3、图3-4、图3-5所示。 图3-2 其他页效果图与原型界面图 图3-3 火锅效果图与原型界面图 图3-4 小面效果图与原型界面图 图3-5 首页效果图与原型界面图4 总结在网站开发过程中，原型设计和制作是非常重要的过程和手段。在公司实习期间，了解到在一个项目的研发流程中，技术团队实际开发之前，都是产品部门在确定需求与制作原型，期间都会与技术团队商讨技术是否可以实现，怎样可以有更加好的用户体验，所以技术团队也都需要了解原型制作方面的一些知识。所以在毕业设计中我选择原型制作与仿站，增强对原型制作的了解，也更深入的学习前端技术，为今后的工作打下基础。本次设计的开发过程中也遇到一些问题，在原型上，由于之前都没有接触过，所以只学了些基本的知识，在原型的制作过程中，都是采取的一些比较基础的方法。在前端制作上，由于采用了一些CSS3属性，IE8之前的浏览器不支持CS