(完整版)美食网站的设计与开发毕业设计

 时间:2017-08-29 20:16:26 贡献者:仝付旺

导读:毕业论文 美食网站的设计与开发目摘录要 ............................................................................................................... 1ABSTRACT ........................................................................

日韩网站精粹-精美韩国传统美食网站主页
日韩网站精粹-精美韩国传统美食网站主页

毕业论文 美食网站的设计与开发

目摘录要 ............................................................................................................... 1ABSTRACT ..................................................................................................... 2 第 1 章 绪论 ..................................................................................................... 3 1.1 网站的设计意义................................................................................ 3 1.2 网站的设计思想................................................................................ 3 1.3 网站的研究背景................................................................................ 4 1.4 国内外研究现状及分析 ................................................................... 4 第 2 章 网站需求分析 ..................................................................................... 5 2.1 网站的界面需求................................................................................. 5 2.2 网站的功能需求................................................................................ 5 2.3 网站制作目标 .................................................................................... 6 2.4 网站可行性分析................................................................................ 6 2.5 网站前期准备 .................................................................................... 6 2.6 网站前台页面分析............................................................................ 7 2.7 网站预定数据流程分析 ................................................................... 7 第 3 章 网站设计 ............................................................................................. 8 3.1 网站结构图 ........................................................................................ 8 3.2 网站开场动画设计............................................................................ 9

3.3 网站一级页面设计............................................................................ 9 3.4 网站二级页面设计.......................................................................... 11 3.5 网站三级页面设计.......................................................................... 12 3.6 各数据表结构 .................................................................................. 13 3.7 数据库的连接 .................................................................................. 14 3.8 数据读取页面功能.......................................................................... 14 第 4 章 网站测试 ........................................................................................... 16 4.1 网站运行环境 .................................................................................. 16 4.2 测试结果及分析.............................................................................. 16 第 5 章 总结 ................................................................................................... 18 参考文献 ......................................................................................................... 19 附录一 ............................................................................................................. 20 致 谢 ............................................................................................................. 23

摘要网站设计和开发的质量直接影响到网站的展示效果和接受程度。

基于 Flash 技术的食品网站建设模式源自实践中的探索和应用中的反思,使网 站既能保持新颖友好的界面,又能解决 Flash 网站反应迟滞、切换速度慢 的问题。

本论文的撰写是基于食品网站的设计与实现。

我们主要使用了 Flash CS4、 ActionScript2.0 脚本编程、 Photoshop、 ASP.NET 与 SQL Server 2005 数据库相结合的技术对网站进行整体设计和制作, 并对网站的功能和 性能做了主要测试。

本设计以网站形式介绍具有地方特色的餐饮美食文化。

为满足广大用户不同的需求提供了方便快捷的服务。

关键词:美食网站;Flash CS4;在线论坛;用户需求

ABSTRACTQuality web design and development directly affect the site display effect and acceptability. Food web construction mode of Flash technology from reflection on exploration and practice based on the site, which can maintain the original friendly interface, and can solve the Flash site response lag, the problem of slow switching speed. This paper is the design and implementation of food web based on. The overall design and production we mainly use the Flash CS4, ActionScript2.0 scripting, Photoshop, ASP.NET and SQL Server 2005 database technology combining the website, and the website function and performance of the main test. This design to form the Food site catering culture with local characteristics. To provide convenient services to meet the different needs of customers. Key words: Food website; Flash CS4; online forum; users demand

第 1 章 绪论随着人们生活水平的提高,人们越来越关注自己的饮食状况,所以美 食文化也就受到人们的更多的注意, 因此我们制作了一个相关的食品网站。

用户在网站浏览美食信息的同时,除了可以浏览到相关美食的文字信息还 可以看到诱人的美食图片,为用户提供全面的参考信息,其次本网站还实 现了在线交流的功能,让用户更快地得到了所需的美食信息。

1.1 网站的设计意义相比较传统的传播媒体,基于 FLASH 的网站有着自身独特的优势, 首先网站不仅可以像传统媒体一样传播文字和图像信息,更能够传播动态 图形甚至视频,声音等信息 [1]。

其次,浏览者在浏览的过程中,相比较传 统媒体单一的浏览顺序,网站则为用户提供了很大的自主性,最后,浏览 者在介绍信息的过程中,可以运用操作工具参与或创造信息的介绍活动, 这种交互的优势也是传统媒体不可能比拟的[2]。

随着计算机技术的不断发展与深化,网站的制作越来越趋于人性化与 美观化,网页设计中已经融入越来越多的动画制作和动态模块。

网站的迷 人之处在于综合使用文本、图像、声音、动画和视频等的信息与内容,具 有丰富的多媒体互动特点[3]。

无可置疑,现如今网站已成为最吸引人的也 最有效的信息传递手段和方式,在网络上有着重要的地位,并发挥着及其 重要的作用。

1.2 网站的设计思想本网站主要面对的是网络上的美食爱好者,因此在进行网站设计时着 重考虑了以下几方面的因素: (1)充分展示本网站所拥有的美食资源和美食信息 在网站内容设计方面我们除了收录国内各地的众多美食之外还特别

介绍了国外的一些特色美食。

(2)注重运用先进的网站设计技术 考虑到网站在交互性及对网页维护等方面的要求,在网站设计上我们 放弃了静态网页设计技术, 转而采用 FLASH 技术进行制作动态网页设计。

(3)注重网页的视觉效果 合理的网站色调选择和版面布局会让浏览者产生美的感受,从而激发 浏览者想要进一步浏览的兴趣[4]。

因此确定一个网站的主色调和版面布局 很重要,因为我们的网站是使用 FLASH 制作的,所以会让网站观看起来 十分简便,效果生动活泼。

1.3 网站的研究背景本网站的研究目的就是通过网站全面宣传,展示网站的布局、优点与 食品的介绍,随时向浏览者发布网站的重要信息,使浏览者增加对网站的 了解,增强浏览者与网站之间的联系。

通过计算机网络让浏览者及时得到 网站最新消息及最新更换的美食信息,同时也帮助浏览者更快一步的了解 到各地美食的信息[5]。

在这里浏览者也可以提出对本网站的意见及想法, 也可以在本网站上留下自己对美食的见解与推荐。

我们设计出这个网站就 是在展示自己的作品的同时也希望得到浏览者的认可,给浏览者留下深刻 的印象。

1.4 国内外研究现状及分析目前,FLASH 网站越来越受到国人的关注。

2001 年前后,FLASH 软 件开始在中国市场风行。

这个由美国 MACROMEDIA 公司推出的一款多 媒体动画制作软件,作为交互式动画设计工具,可以将音乐、声效和可动 的画面方便地融合在一起,以制作出高品质的动态效果,造就了一种新的 动画形式——FLASH 动画[6]。

FLASH 动画最早通过网络流通,并随着网

络技术的飞速发展,深入人们的日常生活。

这一优秀的矢量动画编辑工具 给我们带来了强有力的冲击,使我们能够轻易地将丰富的想象力可视化。

现如今,Flash 已经逐渐被国内用户所认识和接受,并随之出现一大批忠 实的追随者[7]。

在网络上,对 FLASH 动画贡献最大的要数那些“闪客” 们了,无数年轻人借助 FLASH 技术实现了他们的创意和梦想。

在日本和美国,动画和游戏这一类的技术超出国内比较多,日本的动 漫位居世界前列是众所周知的[8]。

要想在这一方面能有所作为,仍需加倍 努力。

在目前中国动画市场资金短缺的环境下,FLASH 动画非常适合中 国的国情。

总之,FLASH 动画相对于传统动画的优势非常明显。

当前, FLASH 动画在中国的发展取得了一定的进展,但是它的全盛时代还没有 到来。

随着网络时代的到来,传统媒体和非传统媒体必将在相互竞争中不 断向前发展,FLASH 动画必将随着自身技术和魅力展现出更为广阔的前 景[9]。

第 2 章 网站需求分析网站建设的需求分析是网站建设的第一个阶段,其总的目的是根据调 查分析, 明确建设网站的目的与内容, 使网站建设能结合企业的实际情况, 并满足企业真实需求和用户的需求[10]。

网站需求分析的内容主要包括企业需求调查、目标客户调查与分析、 竞争对手调查与分析、市场定位分析、可行性分析、收益分析和风险分析 等[11]。

2.1 网站的界面需求由于我们制作的网站主题是美食类的网站,在界面颜色上,我们选择 以红色和暗红色为主色调,我们之所以选择红色为主色调一方面是因为红 色是生命、活力、健康、热情、朝气、欢乐的象征,另一方面是由于红色

容易引起人们的注意,之后配上白色的文字简洁又醒目。

在界面排版上,根据调查用户需求的结果,我们在每个栏目页面都会 有部分图片展示,再配以适当的文字说明,能够让访问者更加了解中国各 地的美食和国外的一些美食以及关于饮食安全方面的常识。

因为是 Flash 网站,自然要添加一些特殊的效果。

比如在主页界面上, 我们会设置一些文字的变换过程。

每个二级、三级栏目中的文字与图片效 果也不相同,样式种类多,会使整个网站看起来很丰富。

2.2 网站的功能需求生活、工作中我们处处都需要资源,做网站也一样也是需要很多的资 源。

这些资源既可以充实网站又可以提供给用户。

前提是我们需要弄清楚 来访问网站的用户有什么样的需求,以及他们所需要的资源[12]。

随着人民生活水平的提高,人们对吃有了更高的要求。

我们开发这个 网站的目的是为了能够给人们提供更多更好吃的美食,另外也可以广交天 下美食爱好者。

根据美食文化的特点,我们将网站分成了七个栏目进行详 细制作。

1.美食菜谱:主要介绍的是川菜、粤菜、闽菜和湘菜四大菜系中的美 食,让用户对这四大菜系的美食有更深刻的了解和认识。

2.美食专题:主要介绍关于家常菜谱、美容瘦身和老人养生这三个方 面的美食。

3.美食厨房:主要介绍一些关于美容方面的菜谱、自己制作的美食 DIY 以及民间各地的风味小吃。

4.美食原料:主要介绍一些制作美食的原料,例如肉禽类、蔬菜类以 及米面豆类。

5.西餐导航:主要介绍一些富含国外特色的美食,例如韩国料理、法 国料理以及意大利餐。

6.饮食资讯:主要是介绍关于饮食安全方面的常识,例如饮食误区、 饮食养性及营养饮食。

7.食家杂谈:主要是为广大美食爱好者提供一个交流和探讨的平台, 方便各地美食文化的传播,给人们提供更多美食信息。

2.3 网站制作目标本网站的主要任务是制作一个美食类的网站,并实现在线交流的功 能。

访问这个网站的可以是网络上的任何人,所以我们制作的这个网站的 目的是向所有美食的爱好者介绍中国各地的美食以及国外的一些特色美 食。

我们对所制作的网站分了七个方面进行介绍,它们分别是:美食菜谱、 美食专题、美食厨房、美食原料、西餐导航、饮食资讯以及食家杂谈,在 七个大方面下各自又有各自的子栏目。

前台,是对美食的各个方面的详细 介绍。

后台是实现在线交流发帖的功能,网站还设置了管理员权限,管理 员可以在管理界面内对用户所发的帖子进行回复、修改、删除等操作。

2.4 网站可行性分析首 先 , 在 技 术 方 面 ,我 们 所 做 的 网 站 主 要使 用 了 Flash CS4 、 PhotoShop 和 ASP.NET 技术来实现的, 数据库使用的是 SQL Server 2005。

这些软件市场上销售价格较低,网络上也有下载版本,在网站开发中已经 被大量使用,比较成熟,技术上是可行的。

其次,在适用性方面,我们是针对美食建立的这个网站,针对性比较 强。

在制作内容方面我们查阅了书籍和网站上的各种资料,对中国各地的 美食有了比较深入的了解,在此基础上我们才开始着手规划网站。

另外我 们的网站还实现了在线交流发帖的功能。

在管理员登陆的情况下用户所发 的帖子进行回复、修改、删除等操作。

所以,在技术上和适用性上,都是可行的。

2.5 网站前期准备在开始着手的时候,我们先看了一些网上比较出色的 FLASH 网站, 最后我们决定了构建这个食品类的网站。

在确立了选题后,我们做了一份 网站策划, 详细的对各种美食进行分类。

然后根据分类收集所需要的资料, 包括图片,文字简介等,还借鉴了其他一些关于美食网站的经验。

2.6 网站前台页面分析网站前台分为开场动画,首页,二级页面,三级页面。

在色彩上,网站整体以红色为主色彩,文字方面以白色为主,以黑色 和黄色为辅。

在总体板式上,首页和各二级页面为独立板式。

三级页面,每个栏目 下的子栏目为统一板式,但不同栏目下的子栏目板式不一样。

在部分二级页面里,除了导航可以进入三级页面外,各二级页面也加 入了按钮链接,更方便进入三级页面。

因为我们选取的课题是传播类的食品网站,所以大胆的使用了红色作 为网站主色调。

虽然没有使每个页面的板式不一样,但各栏目下的三级页 面统一,简单而不失单调,这样更能给人整齐一致的感觉,也使访问者一 目了然。

2.7 网站预定数据流程分析根据网站在线交流功能的要求,建立数据库,以下是表的各数据项。

1.用户登录信息表:dbo.tb_Admin 标识:AdminID。

用户登录信息表: 用户登录 ID 号(AdminID), 用户名(AdminName), 密码(AdminPwd)3 个字段。

2.论坛模块表:dbo.tb_Module

标识:ModuleID。

模块信息表:模块号(ModuleID),模块名称(ModuleName),创建模 块日期(ModuleDate) 3 个字段。

3.帮助表:dbo.tb_Help 标识:HelpID。

帮助信息表:帮助序号(HelpID),帮助名称(HelpName),帮助内容 (HelpConcent), 3 个字段。

第 3 章 网站设计现在的 Flash 网站已经不再是曾经简单的鼠标事件,不再是单一的切 换,因为这些 Javascript 技术已经帮它实现[13]。

现在的 Flash 在网站设计 中扮演着更为重要的角色,尤其在 3D 方面的表现,总会让我们目瞪口呆。

一个优秀的 Flash 网站,就像一部令人印象深刻的电影,给我们带来视觉 上的享受。

Flash 网站中的内容多数甚至全部都是由 Flash 制作完成的, 网站基本 以图形和动画为主所以比较适合做那些文字内容不太多,以平面动画效果 为主的应用[14]。

3.1 网站结构图整个网站结构分为开场动画,一级页面,二级页面和三级页面。

一级 页面为首页,二级页面有“美食菜谱” 、 “美食专题” 、 “美食厨房” 、 “美食 原料” 、 “西餐导航” 、 “食家杂谈” ,在每个二级栏目下又细分了 3 到 4 个三 级栏目。

图 1 网站结构图

3.2 网站开场动画设计Flash 网站的开场动画在整个网站中都起着至关重要的作用,一个好 的开场动画会紧紧地抓住浏览者的眼球,给浏览者留下深刻的印象,从而 提高整个网站的层次。

开场动画,我们设计的比较有美食文化的特色,打开网站后,音乐开 始响起,动画中间出现关于中华美食文化源远流长的介绍性文字,当文字 结束后,动画会以泼墨的形式分别出现介绍川菜文化和湘菜文化的图片和 文字;当湘文化介绍完之后,变成另一个音乐,慢慢出现网站的名字和网 站的标语,最后出现本网站的 logo 和“点击进入”的文字,当点击“点击 进入”时会进入网站的主页。

在开场动画展示的过程中动画右下角一直会 有“skip”字样,可以跳过开场动画的播放同样可以进入本网站的主页。

流畅的动画将网站开场动画界面展示给浏览者。

网站开场动画如图 2 所示:

图 2 开场动画3.3 网站一级页面设计网站的主页是网站的门面,所以首页的设计是整个网站的重点内容, 必须要有吸引大众目光的有创意的版面设计,这样才能更好地宣传与推广 网站。

本网站分为左右两个部分,左边是有关美食的一些介绍文字框,拖动 滑竿可以向下滑动后,可看到整个简介的内容,左上角是本网站的 Logo 标志——食家美食网,并在 Logo 下边配以火在燃烧的动画。

左下角是网 站的版权信息,页面上有带有很多动画效果的文字,为网站增加动感。

本 网站的字体颜色多为白色,方便浏览者观看。

网站的右边以翻页的形式出 现 6 张图片形成了两排,呈现出一排三张图片的格局。

六张图片整齐的排 列在页面中央,且六张图片任一张都是可点击的,点击图片会有出现一些 相关的文字介绍或者图片,这时右上方会出现关闭按钮,点击关闭以后将 恢复到网站的首页。

网站的右下角有音乐条可以控制网站背景音乐音量的 大小及音乐的开关。

图 3 为首页效果图:

图 3 一级页面我们设计网站时,在网站里添加了背景音乐,考虑到有些用户可能不 想听到背景音乐,所以我们在网站的下放设计了音乐条用来控制背景音乐 的开关以及音量的大小。

为了达到控制音乐这种效果, 我们想了很多方法, 以下是部分代码(详细代码见附录一) : MySound1=new Sound(); MySound1.loadSound("Morning.mp3",true); MySound1.start(); MySound1.onSoundComplete = function() { MySound1.start(); }; ……

3.4 网站二级页面设计网站的二级页面分为: “美食菜谱” , “美食专题” , “美食厨房” , “美 食原料” , “西餐导航” , “饮食资讯”六个板块。

在样式上,我们的每个版 块都达到了不一样的效果,在二级页面我们采用的颜色大致相同,简洁而 不失大气,并且在二级页面上,除了点击导航上的三级子栏目外,也可以 在页面上找到相应的按钮进入三级页面。

以“美食专题”为例,在美食专题这个页面中,左部分是以图片的形 式呈现在我们面前,当鼠标经过某一张图片时,会出现另一张图片,当鼠 标经过图片旁边的文字时会出现相关的介绍性文字。

页面的右侧是一棵不 断生长的花草图案及飘落的文字,是用来增加页面的美观度。

从而使网站 的视觉效果更为震撼。

页面的上方出现进入到三级页面的导航。

图 4 为美食专题页面展示效果:图 4 二级页面

以下是实现图片展示的部分代码: stop (); a.useHandCursor = false; b.useHandCursor = false; c.useHandCursor = false; d.useHandCursor = false; 我们制作的图片切换在运行时一直显示着手的形状这不是我们需要 的,所以我们使用了上面的代码,用来取消当鼠标经过图片时图片切换而 不显示手形的目的。

这里的 a,b,c,d 代表着页面中所显示的 4 张图片的实例 名。

3.5 网站三级页面设计网站的三级页面,为各栏目下的详细介绍,是将每个二级栏目细分为 3 到 4 个子栏目,分别进行详细介绍。

在风格上,每个二级页面下的子栏 目样式统一,整齐简洁,使网站看起来更加大气规整。

我们所制作的美食网站展示主要是在“美食菜谱” , “美食专题” , “美 食厨房” , “美食原料” , “西餐导航” , “饮食资讯”六个栏目中进行详细介 绍,各个板块下的三级页面形式各异,但是每个板块下的三级页面风格是 统一的。

以下截取了“美食厨房”栏目下的“美食 DIY”页面作为展示:

图 5 三级页面“美食 DIY”这个页面的特色就是形式比较独特新颖,页面的左侧是 想要介绍的几道美食的图片,而右边是各个美食相应的制作方法。

中间的 三个按钮是当浏览者点击某一个按钮时会出现相应的一道美食和它的制作 方法。

整个页面的效果符合了“美食厨房”这个主题,展现形式别具一格。

3.6 各数据表结构数据库技术随着数据应用和需求的变化而不断发展。

创建数据库的过 程就是确定数据库的名称、所有者、大小以及存储该数据库的文件和文件 组。

同时需要理清楚各项之间的相应关系,才可以进行正常的网站运行。

1.用户登录信息表:dbo.tb_Admin 标识:AdminID。

预定信息表:登录 ID 号(AdminID),是否确认(AdminName),价格 (AdminPwd)3 个字段。

表 1 用户登录信息表 字段 AdminID 数据类型 int bit AdminName AdminPwd int yes no 允许空 no yes 是否为主键 yes no2.浏览模块信息表:dbo.tb_Module 标识:Module_ID。

模块信息表:模块号(ModuleID),模块名称(ModuleName),创建模块 日期(ModuleDate) 3 个字段。

表 2 浏览模块信息表 字段 ModuleID ModuleName ModuleDate 数据类型 int bit int 允许空 no yes yes 是否为主键 yes no no3.帮助表:dbo.tb_Help 标识:HelpID。

帮助信息表:帮助序号 (HelpID) ,帮助名称 (HelpName) ,帮助内容 (HelpConcent), 3 个字段。

表 3 帮助表 字段 HelpID HelpName HelpConcent 数据类型 int bit int 允许空 no yes yes 是否为主键 yes no no以上为数据库的三张表结构。

3.7 数据库的连接数据库是用于存储数据信息的系统,通过其他语言程序可以读取数据 库中信息,或将信息存储到数据库中。

本网站数据库的连接采用的是 ASP.NET 技术。

我们制作网站的数据库连接将代码写入了 Web.Config 文件,以下为 部分代码: 3.8 数据读取页面功能在“在线论坛”功能里,主要是提供“在线浏览帖子” 、 “用户登录” 、 “发表帖子” , 管理员还可以“管理帖子” 、 “管理模块” 、 “管理用户”功能。

在论坛里,用户可以畅所欲言,有好的关于美食文化的帖子都可以积极发 表,在论坛里发现好的帖子也可以好好收藏。

图 6 为“管理员登陆”页面截图:

图 6 数据读取“管理员登陆”图第 4 章 网站测试网站测试指的是当一个网站制作完成,上传到服务器之后针对网站的 各项性能情况的一项检测工作。

它与软件测试有一定的区别,它除了要求 外观的一致性以外,还要求其在各个浏览器下的兼容性,以及在不同环境 下的显示差异[15]。

4.1 网站运行环境网站运行环境: 操作平台:Windows XP/ Windows 7 数据库:Microsoft SQL Server 2005 运行环境:Microsoft Internet Information Services (IIS) 5.14.2 测试结果及分析1.测试结果

美食网站的设计与开发毕业设计 (完整版)“微生活”网站设计与开发毕业设计 美食网站的设计与开发毕业论文 精品 《美食天下》网站的建设毕业设计论文
松露美食图片 河南新乡美食 韩国人来中国寻找美食的综艺节目 开心美食岛布局图 吉林市清真美食街 苹果7微信图片怎么撤回 支付宝头像怎么保存到手机通讯录 头像可爱女生 小女生图片大全可爱萌 女的微信头像大全2015年