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

1、美食网站的设计与开发毕业论文毕业论文美食的设计与开发摘 要设计和开发的质量直接影响到的展示效果和接受程度。基于Flash技术的食品建设模式源自实践中的探索和应用中的反思，使既能保持新颖友好的界面，又能解决Flash反应迟滞、切换速度慢的问题。本论文的撰写是基于食品的设计与实现。我们主要使用了Flash CS4、ActionScript2.0脚本编程、Photoshop、ASP.NET与SQL Server 2005数据库相结合的技术对进行整体设计和制作，并对的功能和性能做了主要测试。本设计以形式介绍具有地方特色的餐饮美食文化。为满足广大用户不同的需求提供了方便快捷的服务。关键词：美食；Flas

2、h 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 Fla

3、sh 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

4、 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章 绪论随着人们生活水平的提高，人们越来越关注自己的饮食状

5、况,所以美食文化也就受到人们的更多的注意，因此我们制作了一个相关的食品。用户在浏览美食信息的同时，除了可以浏览到相关美食的文字信息还可以看到诱人的美食图片，为用户提供全面的参考信息，其次本还实现了在线交流的功能，让用户更快地得到了所需的美食信息。1.1的设计意义相比较传统的传播媒体，基于FLASH的有着自身独特的优势，首先不仅可以像传统媒体一样传播文字和图像信息，更能够传播动态图形甚至视频，声音等信息1。其次，浏览者在浏览的过程中，相比较传统媒体单一的浏览顺序，则为用户提供了很大的自主性，最后，浏览者在介绍信息的过程中，可以运用操作工具参与或创造信息的介绍活动，这种交互的优势也是传统媒体不可能

6、比拟的2。随着计算机技术的不断发展与深化，的制作越来越趋于人性化与美观化，网页设计中已经融入越来越多的动画制作和动态模块。的迷人之处在于综合使用文本、图像、声音、动画和视频等的信息与容，具有丰富的多媒体互动特点3。无可置疑，现如今已成为最吸引人的也最有效的信息传递手段和方式，在网络上有着重要的地位，并发挥着与其重要的作用。1.2的设计思想本主要面对的是网络上的美食爱好者，因此在进行设计时着重考虑了以下几方面的因素：（1）充分展示本所拥有的美食资源和美食信息在容设计方面我们除了收录国各地的众多美食之外还特别介绍了国外的一些特色美食。（2）注重运用先进的设计技术考虑到在交互性与对网页维护等方面的要

7、求，在设计上我们放弃了静态网页设计技术，转而采用FLASH技术进行制作动态网页设计。（3）注重网页的视觉效果合理的色调选择和版面布局会让浏览者产生美的感受，从而激发浏览者想要进一步浏览的兴趣4。因此确定一个的主色调和版面布局很重要，因为我们的是使用FLASH制作的，所以会让观看起来十分简便，效果生动活泼。1.3的研究背景本的研究目的就是通过全面宣传，展示的布局、优点与食品的介绍，随时向浏览者发布的重要信息，使浏览者增加对的了解，增强浏览者与之间的联系。通过计算机网络让浏览者与时得到最新消息与最新更换的美食信息，同时也帮助浏览者更快一步的了解到各地美食的信息5。在这里浏览者也可以提出对本的意见与

8、想法，也可以在本上留下自己对美食的见解与推荐。我们设计出这个就是在展示自己的作品的同时也希望得到浏览者的认可，给浏览者留下深刻的印象。1.4 国外研究现状与分析目前，FLASH越来越受到国人的关注。2001年前后，FLASH软件开始在中国市场风行。这个由美国MACROMEDIA公司推出的一款多媒体动画制作软件，作为交互式动画设计工具，可以将音乐、声效和可动的画面方便地融合在一起，以制作出高品质的动态效果，造就了一种新的动画形式FLASH动画6。FLASH动画最早通过网络流通，并随着网络技术的飞速发展，深入人们的日常生活。这一优秀的矢量动画编辑工具给我们带来了强有力的冲击，使我们能够轻易地将丰富

9、的想象力可视化。现如今，Flash已经逐渐被国用户所认识和接受，并随之出现一大批忠实的追随者7。在网络上，对FLASH动画贡献最大的要数那些“闪客”们了，无数年轻人借助FLASH技术实现了他们的创意和梦想。在日本和美国，动画和游戏这一类的技术超出国比较多，日本的动漫位居世界前列是众所周知的8。要想在这一方面能有所作为，仍需加倍努力。在目前中国动画市场资金短缺的环境下，FLASH动画非常适合中国的国情。总之，FLASH动画相对于传统动画的优势非常明显。当前，FLASH动画在中国的发展取得了一定的进展，但是它的全盛时代还没有到来。随着网络时代的到来，传统媒体和非传统媒体必将在相互竞争中不断向前发展

10、，FLASH动画必将随着自身技术和魅力展现出更为广阔的前景9。第2章 需求分析建设的需求分析是建设的第一个阶段，其总的目的是根据调查分析，明确建设的目的与容，使建设能结合企业的实际情况，并满足企业真实需求和用户的需求10。需求分析的容主要包括企业需求调查、目标客户调查与分析、竞争对手调查与分析、市场定位分析、可行性分析、收益分析和风险分析等11。2.1 的界面需求由于我们制作的主题是美食类的，在界面颜色上，我们选择以红色和暗红色为主色调，我们之所以选择红色为主色调一方面是因为红色是生命、活力、健康、热情、朝气、欢乐的象征，另一方面是由于红色容易引起人们的注意，之后配上白色的文字简洁又醒目。在界

11、面排版上，根据调查用户需求的结果，我们在每个栏目页面都会有部分图片展示，再配以适当的文字说明，能够让访问者更加了解中国各地的美食和国外的一些美食以与关于饮食安全方面的常识。因为是Flash，自然要添加一些特殊的效果。比如在主页界面上，我们会设置一些文字的变换过程。每个二级、三级栏目中的文字与图片效果也不一样，样式种类多，会使整个看起来很丰富。2.2的功能需求生活、工作中我们处处都需要资源，做也一样也是需要很多的资源。这些资源既可以充实又可以提供给用户。前提是我们需要弄清楚来访问的用户有什么样的需求，以与他们所需要的资源12。随着人民生活水平的提高，人们对吃有了更高的要求。我们开发这个的目的是为

12、了能够给人们提供更多更好吃的美食，另外也可以广交天下美食爱好者。根据美食文化的特点，我们将分成了七个栏目进行详细制作。1美食菜谱：主要介绍的是川菜、粤菜、闽菜和湘菜四大菜系中的美食，让用户对这四大菜系的美食有更深刻的了解和认识。2美食专题：主要介绍关于家常菜谱、美容瘦身和老人养生这三个方面的美食。3美食厨房：主要介绍一些关于美容方面的菜谱、自己制作的美食DIY以与民间各地的风味小吃。4美食原料：主要介绍一些制作美食的原料，例如肉禽类、蔬菜类以与米面豆类。5西餐导航：主要介绍一些富含国外特色的美食，例如国料理、法国料理以与意大利餐。6饮食资讯：主要是介绍关于饮食安全方面的常识，例如饮食误区、饮食

13、养性与营养饮食。7食家杂谈：主要是为广大美食爱好者提供一个交流和探讨的平台，方便各地美食文化的传播，给人们提供更多美食信息。2.3制作目标本的主要任务是制作一个美食类的，并实现在线交流的功能。访问这个的可以是网络上的任何人，所以我们制作的这个的目的是向所有美食的爱好者介绍中国各地的美食以与国外的一些特色美食。我们对所制作的分了七个方面进行介绍，它们分别是：美食菜谱、美食专题、美食厨房、美食原料、西餐导航、饮食资讯以与食家杂谈，在七个大方面下各自又有各自的子栏目。前台，是对美食的各个方面的详细介绍。后台是实现在线交流发帖的功能，还设置了管理员权限，管理员可以在管理界面对用户所发的帖子进行回复、修

14、改、删除等操作。2.4可行性分析首先，在技术方面，我们所做的主要使用了Flash CS4 、PhotoShop和ASP.NET技术来实现的，数据库使用的是SQL Server 2005。这些软件市场上销售价格较低，网络上也有下载版本，在开发中已经被大量使用，比较成熟，技术上是可行的。其次，在适用性方面，我们是针对美食建立的这个，针对性比较强。在制作容方面我们查阅了书籍和上的各种资料，对中国各地的美食有了比较深入的了解，在此基础上我们才开始着手规划。另外我们的还实现了在线交流发帖的功能。在管理员登陆的情况下用户所发的帖子进行回复、修改、删除等操作。所以，在技术上和适用性上，都是可行的。2.5前期

15、准备在开始着手的时候，我们先看了一些网上比较出色的FLASH，最后我们决定了构建这个食品类的。在确立了选题后，我们做了一份策划，详细的对各种美食进行分类。然后根据分类收集所需要的资料，包括图片，文字简介等，还借鉴了其他一些关于美食的经验。2.6前台页面分析前台分为开场动画，首页，二级页面，三级页面。在色彩上，整体以红色为主色彩，文字方面以白色为主，以黑色和黄色为辅。在总体板式上，首页和各二级页面为独立板式。三级页面，每个栏目下的子栏目为统一板式，但不同栏目下的子栏目板式不一样。在部分二级页面里，除了导航可以进入三级页面外，各二级页面也加入了按钮，更方便进入三级页面。因为我们选取的课题是传播类的

16、食品，所以大胆的使用了红色作为主色调。虽然没有使每个页面的板式不一样，但各栏目下的三级页面统一，简单而不失单调，这样更能给人整齐一致的感觉，也使访问者一目了然。2.7 预定数据流程分析根据在线交流功能的要求，建立数据库，以下是表的各数据项。1用户登录信息表：dbo.tb_Admin标识：AdminID。用户登录信息表：用户登录ID号(AdminID)，用户名(AdminName)，密码(AdminPwd)3个字段。2论坛模块表：dbo.tb_Module标识：ModuleID。模块信息表：模块号(ModuleID)，模块名称(ModuleName)，创建模块日期(ModuleDate) 3个字

17、段。3帮助表：dbo.tb_Help标识：HelpID。帮助信息表：帮助序号(HelpID)，帮助名称(HelpName)，帮助容(HelpConcent)， 3个字段。第3章 设计现在的Flash已经不再是曾经简单的鼠标事件，不再是单一的切换，因为这些Javascript技术已经帮它实现13。现在的Flash在设计中扮演着更为重要的角色，尤其在3D方面的表现，总会让我们目瞪口呆。一个优秀的Flash，就像一部令人印象深刻的电影，给我们带来视觉上的享受。Flash中的容多数甚至全部都是由Flash制作完成的，基本以图形和动画为主所以比较适合做那些文字容不太多，以平面动画效果为主的应用14。3.

18、1 结构图整个结构分为开场动画，一级页面，二级页面和三级页面。一级页面为首页，二级页面有“美食菜谱”、“美食专题”、“美食厨房”、“美食原料”、“西餐导航”、“食家杂谈”，在每个二级栏目下又细分了3到4个三级栏目。图1 结构图3.2 开场动画设计Flash的开场动画在整个中都起着至关重要的作用，一个好的开场动画会紧紧地抓住浏览者的眼球，给浏览者留下深刻的印象，从而提高整个的层次。开场动画，我们设计的比较有美食文化的特色，打开后，音乐开始响起，动画中间出现关于中华美食文化源远流长的介绍性文字，当文字结束后，动画会以泼墨的形式分别出现介绍川菜文化和湘菜文化的图片和文字；当湘文化介绍完之后，变成另一

19、个音乐，慢慢出现的名字和的标语，最后出现本的logo和“点击进入”的文字，当点击“点击进入”时会进入的主页。在开场动画展示的过程中动画右下角一直会有“skip”字样，可以跳过开场动画的播放同样可以进入本的主页。流畅的动画将开场动画界面展示给浏览者。开场动画如图2所示：图2 开场动画3.3一级页面设计的主页是的门面，所以首页的设计是整个的重点容，必须要有吸引大众目光的有创意的版面设计，这样才能更好地宣传与推广。本分为左右两个部分，左边是有关美食的一些介绍文字框，拖动滑竿可以向下滑动后，可看到整个简介的容，左上角是本的Logo标志食家美食网，并在Logo下边配以火在燃烧的动画。左下角是的信息，页面

20、上有带有很多动画效果的文字，为增加动感。本的字体颜色多为白色，方便浏览者观看。的右边以翻页的形式出现6图片形成了两排，呈现出一排三图片的格局。六图片整齐的排列在页面中央，且六图片任一都是可点击的，点击图片会有出现一些相关的文字介绍或者图片，这时右上方会出现关闭按钮，点击关闭以后将恢复到的首页。的右下角有音乐条可以控制背景音乐音量的大小与音乐的开关。图3为首页效果图：图3 一级页面我们设计时，在里添加了背景音乐，考虑到有些用户可能不想听到背景音乐，所以我们在的下放设计了音乐条用来控制背景音乐的开关以与音量的大小。为了达到控制音乐这种效果，我们想了很多方法，以下是部分代码（详细代码见附录一）：My

21、Sound1=new Sound();MySound1.loadSound(Morning.mp3,true);MySound1.start();MySound1.onSoundComplete = function() MySound1.start();3.4二级页面设计 的二级页面分为：“美食菜谱”，“美食专题”，“美食厨房”，“美食原料”，“西餐导航”，“饮食资讯”六个板块。在样式上，我们的每个版块都达到了不一样的效果，在二级页面我们采用的颜色大致一样，简洁而不失大气，并且在二级页面上，除了点击导航上的三级子栏目外，也可以在页面上找到相应的按钮进入三级页面。以“美食专题”为例，在美食专题

22、这个页面中，左部分是以图片的形式呈现在我们面前，当鼠标经过某一图片时，会出现另一图片，当鼠标经过图片旁边的文字时会出现相关的介绍性文字。页面的右侧是一棵不断生长的花草图案与飘落的文字，是用来增加页面的美观度。从而使的视觉效果更为震撼。页面的上方出现进入到三级页面的导航。图4为美食专题页面展示效果:图4二级页面以下是实现图片展示的部分代码： stop (); a.useHandCursor = false; b.useHandCursor = false; c.useHandCursor = false; d.useHandCursor = false;我们制作的图片切换在运行时一直显示着手的形

23、状这不是我们需要的，所以我们使用了上面的代码，用来取消当鼠标经过图片时图片切换而不显示手形的目的。这里的a,b,c,d代表着页面中所显示的4图片的实例名。3.5三级页面设计的三级页面，为各栏目下的详细介绍，是将每个二级栏目细分为3到4个子栏目，分别进行详细介绍。在风格上，每个二级页面下的子栏目样式统一，整齐简洁，使看起来更加大气规整。我们所制作的美食展示主要是在“美食菜谱”，“美食专题”，“美食厨房”，“美食原料”，“西餐导航”，“饮食资讯”六个栏目中进行详细介绍，各个板块下的三级页面形式各异，但是每个板块下的三级页面风格是统一的。以下截取了“美食厨房”栏目下的“美食DIY”页面作为展示：图5

24、 三级页面“美食DIY”这个页面的特色就是形式比较独特新颖，页面的左侧是想要介绍的几道美食的图片，而右边是各个美食相应的制作方法。中间的三个按钮是当浏览者点击某一个按钮时会出现相应的一道美食和它的制作方法。整个页面的效果符合了“美食厨房”这个主题，展现形式别具一格。3.6 各数据表结构数据库技术随着数据应用和需求的变化而不断发展。创建数据库的过程就是确定数据库的名称、所有者、大小以与存储该数据库的文件和文件组。同时需要理清楚各项之间的相应关系，才可以进行正常的运行。1用户登录信息表:dbo.tb_Admin标识：AdminID。预定信息表：登录ID号(AdminID)，是否确认(AdminNa

25、me)，价格(AdminPwd)3个字段。表1 用户登录信息表 字段 数据类型 允许空 是否为主键 AdminID int no yes AdminName bit yes no AdminPwd intyes no2浏览模块信息表：dbo.tb_Module标识：Module_ID。模块信息表：模块号(ModuleID)，模块名称(ModuleName)，创建模块日期(ModuleDate) 3个字段。表2 浏览模块信息表 字段 数据类型 允许空 是否为主键ModuleIDintnoyesModuleNamebityesnoModuleDateintyesno3帮助表：dbo.tb_Help

26、标识：HelpID。帮助信息表：帮助序号(HelpID)，帮助名称(HelpName)，帮助容(HelpConcent)， 3个字段。表3 帮助表字段数据类型允许空是否为主键HelpIDintnoyesHelpNamebityesnoHelpConcentintyesno以上为数据库的三表结构。3.7 数据库的连接数据库是用于存储数据信息的系统，通过其他语言程序可以读取数据库息，或将信息存储到数据库中。本数据库的连接采用的是ASP.NET技术。我们制作的数据库连接将代码写入了Web.Config文件，以下为部分代码：3.8数据读取页面功能在“在线论坛”功能里，主要是提供“在线浏览帖子”、“用户

27、登录”、“发表帖子”，管理员还可以“管理帖子”、“管理模块”、“管理用户”功能。在论坛里，用户可以畅所欲言，有好的关于美食文化的帖子都可以积极发表，在论坛里发现好的帖子也可以好好收藏。图6为“管理员登陆”页面截图：图6 数据读取“管理员登陆”图第4章 测试测试指的是当一个制作完成，上传到服务器之后针对的各项性能情况的一项检测工作。它与软件测试有一定的区别，它除了要求外观的一致性以外，还要求其在各个浏览器下的兼容性，以与在不同环境下的显示差异15。4.1 运行环境运行环境：操作平台：Windows XP/ Windows 7数据库：Microsoft SQL Server 2005运行环境：Mi

28、crosoft Internet Information Services (IIS) 5.14.2 测试结果与分析1测试结果第一，先根据程序说明文档配置IIS，在Microsoft SQL Server 2005里添加数据库后，还需要将本地数据库名称添加到数据库安全性用户中，然后进行测试。第二，测试“美食菜谱”下四个页面的效果，在IIS下运行，点击导航上的“美食菜谱”按钮，可以看到二级页面，几分别代表着所要介绍的地方菜系的图片依次进行运动，移动到合适的位置，当鼠标经过任何一代表某个菜系的图片时，在几图片的中间空白位置会出现介绍该图片所代表菜系的文字。在图片的右边是用来三级页面的按钮。点击进入

29、三级页面，5图片以W的形状出现在界面上，鼠标经过图片出现文字介绍。测试其他的按钮都是成功的。第三，测试“美食专题”下的三个页面的效果，首先点击导航上的“美食专题”按钮，界面上出现几图片组成的大图片，这属于鼠标经过事件，当鼠标经过某一图片时，这图片就会切换成另一图片，当鼠标经过文字时会出现文字介绍。图片上边分别为进入三级页面的按钮。点击进入三级页面，当点击某一小图片时，图片会变大并配以文字介绍。测试其他的按钮都能成功连接。第四，测试“美食厨房”下的三个页面的效果，首先点击导航上的“美食厨房”按钮，页面像幕布一样切换出来，左侧四小图片叠放在一起，都是可点的，点击以后右侧的大图片会以不同样式自动切换

30、出来，页面中间是详细的文字介绍。文字上方是四个带的按钮，点击以后进入三级页面，左侧是几图片的切换，单击按钮时，右侧配以相对图片的文字介绍。测试其他的按钮都能够。第五，测试“美食原料”下的三个页面的效果，首先点击导航上的“美食原料”按钮，页面上会出现三在运动的图片，在图片的下方为相对图片的文字介绍。图片的左边是看上去让页面美观的运动图片，图片上边分别是进入三级页面的按钮。点击进入三级页面，界面上出现一图片，这同样属于鼠标事件，当鼠标经过图片的某一个区域时会在图片上出现相应的文字。当点击按钮时图片会切换到另一图片，界面的右边是介绍该页面的文字。测试其他的按钮都能够。第六，测试“西餐导航”下的三个页面的效果，首先点击导航上的西餐导航按钮，页面右侧是几图片的自行切换，界面下边是该页面的一些文字介绍，文字上方是用图片做成的进入三级页面的按钮，点击进入三级页面，页面左边出现文字介绍，右边会慢慢移动到适合的位置，这里的图片有置顶的动能，鼠标经过某一图片，该图片置顶，当点击这图