徽州美食网站的设计优质毕业设计.doc

资源描述

毕业论文（设计）论文题目：徽州美食网站设计院（系部）：计算机科学技术系专业名称：计算机网络专业研究方向：网页网站目录内容摘要……………………………………………………………………………3 绪论……………………………………………………………………４一、网页（一）网页设计背景 ……………………………………………………………4 （二）网页设计概述 ……………………………………………………………5 二、设计语言及软件介绍（一）HTML语言介绍……………………………………………………………5 （二）Dreamweaver介绍……………………………………………………………5 三、设计思绪及步骤（一）设计思想…………………………………………………………………6 （二)需求分析…………………………………………………………………6 （三)设计步骤…………………………………………………………………6 四、设计实现（一）网站主页面设计…………………………………………………….18 （二）菜谱大全界面设计：……………………………………………………21 （三）健康资讯界面设计：………………………………………………………23 （四）健脑饮食界面设计:………………………………………………………25 （五）美食团购界面设计：………………………………………………………28 （六）食材百科界面设计：………………………………………………………29 （七）母婴饮食界面设计………………………………………………………31 （八）美容饮食界面设计：……………………………………………………32 结论展望…………………………………………………………………33 参考文件…………………………………………………………………………34 内容摘要二十一世纪是一个信息化时代。伴随网络信息飞速发展，网络传媒以被越来越多企业看好，而网站就是传媒很好一个方法，现在有很多企业全部在开发属于自己网站，所以研究网站建设是很有必需。本文关键概述了建设一个网站具体过程。包含设计思绪、设计步骤和最终设计实现。有文本应用、创建图像页面、使用CSS修饰网页、创建多媒体网页、利用表单对象创建表单文件、网页连接应用、创建框架页面、使用javaScript行为创建动态效果、关键使用设计语言是HTML。本文还考虑到了软件工程在程序设计中应用，软件工程认为软件开发和多种市场活动亲密相关，所以编写软件时不能脱离软件需求。Dreamweaver也是本文研究关键对象。本文利用Dreamweaver和对应网站开发软件，叙述了网站前后台设计，并对其功效进行了叙述，实现了整个网站功效使用。经过对整个网站设计，说明了在制作过程中碰到常见问题处理方法。【关键字】网络传媒　网站 HTML Dreamweaver 绪论－－－网页网站应用网页设计是多年来兴起设计领域，是继报纸、广播、电视以后又一全新设计媒体。伴随计算机广泛普及，计算机网络也得到了飞速发展，现在网络这个平台让大家感觉一切全部越来越简单，也逐步越来越方面了，慢慢地伴随互联网猛速发展，大家生活和学习似乎离不开网络。因为Internet这个大平台是实现网络资源共享资源库，那么依据它发展历程和现在应用情况和发展趋势，我们能够充足相信网络技术将会极大改善我们生活和工作方法，甚至抽象了解为可能连社会价值观也会发生一定改变。比如说，在最近网络猛速发展过程中，越来越多民间团体、企机关全部纷纷在网上自立门户，这其中最迫切想得到外界了解和认可无疑是那些大小商家们，对她们而言，网络就像一座取之不尽用之不竭天然宝藏，其中蕴藏着无穷机遇和财富，而且不管是企业网站还是个人网站，多种大型门户网站，全部如雨后春笋般层层蓬勃发展壮大起来，这么一来就更深入使这么互联网业展现出绚烂多彩发展局面。我设计毕业论文题目是徽州美食网站设计和实现，包含网站概要设计，关键功效模块，具体功效和具体设计，最终是结论和展望，总结这次毕业设计收获和心得。一、网页（一）网页设计背景伴随二十一世纪到来，大家更深切地感受到计算机在生活和工作中作用越来越关键，越来越多职业需要含有计算机应用技能。掌握计算机是职业需要，更是事业发展需要。网页设计和制作是计算机能力具体表现，而一个网站也是一家企业不可缺乏一部分。对于我们来说必需要掌握网页设计相关知识（二）网页设计概述网站是企业向用户和网民提供信息（包含产品和服务）一个方法，是企业开展电子商务基础设施和信息平台，离开网站（或只是利用第三方网站）去谈电子商务是不可能。企业网址被称为“网络商标”，也是企业无形资产组成部分，而网站是Internet上宣传和反应企业形象和文化关键窗口二、设计语言及软件介绍（一）HTML语言介绍超文本标识语言，即HTML（Hypertext Markup Language），是用于描述网页文档一个标识语言。是标准通用标识下一个应用，也是一个规范，一个标准，它经过标识符号来标识要显示网页中各个部分。网页文件本身是一个文本文件，经过在文本文件中添加标识符，能够告诉浏览器怎样显示其中内容（如：文字怎样处理，画面怎样安排，图片怎样显示等）。浏览器按次序阅读网页文件，然后依据标识符解释和显示其标识内容，对书写犯错标识将不指出其错误，且不停止其解释实施过程，编制者只能经过显示效果来分析犯错原因和犯错部位。 (二）Dreamweaver介绍 Dreamweaver是一个可视化网页设计和网站管理工具，支持最新Web技术，包含HTML检验、HTML格式控制、HTML格式化选项、可视化网页设计、图像编辑、全局查找替换、全FTP 功效、处理Flash和Shockwave等富媒体格式和动态HTML、基于团体Web创作。在编辑上你能够选择可视化方法或你喜爱源码编辑方法。三、设计思绪及步骤（一）设计思想 1、网站内容要丰富齐全，需要包含一个主页面和七个子页面，子页面包含“菜谱大全”、“健康资讯”、“健脑饮食”、“美食团购”、“食材百科”、“母婴饮食”、“美容饮食”。 2、主页面采取DIV+CSS和表格混合设计，特效有横幅下拉特效，图片切换特效。另外注册和登录采取数据库技术，能够简单实现，其它还有导航，超级链接，页脚设计等等。 3、子页面能够简单采取表格制作，页面要整齐简单，一目了然。用到图片、素材要经过Photoshop加工、改造。 4、登录页面和后台管理页面等等（二）需求分析经过市场、网上调查和自己对网页网站建立了解，一个网站应该有以下内容需要： 1、网站前台: 网站前台关键是用户浏览本商城网站所得到部分信息，它包含：网站首页，网站导航，网站公告，用户登录、注册，和商品搜索模块信息显示功效。前台模块功效网站公告：用户对网站最新公告了解用户注册：新用户注册用户登录：已注册用户登录网站浏览信息 2、网站后台后台管理页面是商城管理员对整个网站管理，其要求实现：商城产品管理，商城公告管理等多个模块功效。（三）设计步骤网站设计步骤以下： 1、需求分析：依据实际需要设计相关功效模块，并依据此分析给出合理、满足要求设计思绪。 2、搜集材料：搜集网站可能用到图片、文字等等，从图书、报纸、光盘、多媒体上得来，也从互联网上搜集。 3、设计效果图：利用了photoshop工具等使用图像处理软件设计出最终效果图，依据需要进行修改，直到满意为止。 4、网站具体建设：设计视图中设计Web页面外观，设置控件相关属性。 5、调试、优化和公布网站。四、设计实现（一）网站主页面设计：主页面关键制作和设计，包含LOGO，横幅，网站导航，首页分导航、超级链接、FLASH+JS图片切换，页脚设计等。设计效果以下：关键源代码： <title>无标题文档</title> <script src="js/swfobject.js" type="text/javascript"></script> <style type="text/css">  </style> <script type="text/JavaScript">  </script> </head> <body> <table width="1109" height="1529" border="0" align="center"> <tr> <td width="1103" height="1523" align="left" valign="top"><div align="center"> <table width="1101" border="0"> <tr> <td width="1095" height="44"><table width="1075" height="36" border="0" align="center"> <tr> <td width="150" height="32"> <a href="#">返回首页</a></td> <td width="662"> </td> <td width="127"><span class="STYLE4"><a href="#"><a href="#" class="one" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage ('');">设成首页</a></span></td> <td width="164"><span class="STYLE4"><a href="#">意见反馈</a></span></td> </tr> </table> <p align="center" class="STYLE41"><span class="STYLE42"><img src="images/logo.gif" alt="1" width="250" height="30" />徽州美食网站</span><img src="images/logo.gif" width="250" height="30" /></p></td> </tr> </table> <table width="1100" border="0" bordercolor="#FFFFFF" bgcolor="#9966FF"> <tr> <td width="140" height="37"><span class="STYLE9"><a href="#">首页</a></span></td> <td width="140"><div id="Layer1" onmouseover="MM_showHideLayers('Layer1','','show')" onmouseout="MM_showHideLayers('Layer1','','hide')"> <table width="200" height="113" border="0" bordercolor="#9933FF" bgcolor="#99CC99" onmouseover="MM_showHideLayers('Layer1','','show')" onmouseout="MM_showHideLayers('Layer1','','hide')"> <tr> <td bgcolor="#9966FF"><span class="STYLE36">家常菜谱</span></td> </tr> <tr> <td bgcolor="#9966FF"><span class="STYLE36">美容菜谱</span></td> </tr> <tr> <td bgcolor="#9966FF"><span class="STYLE36">营养搭配菜谱</span></td> </tr> </table> </div> <span class="STYLE9"><a href="菜谱大全.html" onmouseover="MM_showHideLayers('Layer1','','show')" onmouseout="MM_showHideLayers('Layer1','','hide')">菜谱大全</a></span></td> <td width="140"><div id="Layer2" onmouseover="MM_showHideLayers('Layer2','','show')" onmouseout="MM_showHideLayers('Layer2','','hide')"> <table width="200" border="0"> <tr> <td height="29" bgcolor="#9966FF"> <span class="STYLE36">营养常识</span></td> </tr> <tr> <td height="28" bgcolor="#9966FF"><span class="STYLE36">营养健康</span></td> </tr> <tr> <td height="29" bgcolor="#9966FF" class="STYLE36">营养手册</td> </tr> </table> </div> <span class="STYLE30"><a href="健康资讯.html" onmouseover="MM_showHideLayers('Layer2','','show')" onmouseout="MM_showHideLayers('Layer2','','hide')">健康资讯</a></span></td> <td width="140"><div id="Layer3"> <table width="200" height="61" border="0" onmouseover="MM_showHideLayers('Layer3','','show')" onmouseout="MM_showHideLayers('Layer3','','hide')"> <tr> <td height="27" bgcolor="#9966FF" class="STYLE36">相册</td> </tr> <tr> <td height="26" bgcolor="#9966FF" class="STYLE36">随拍</td> </tr> </table> </div> <span class="STYLE9"><a href="健脑饮食.html" onmouseover="MM_showHideLayers('Layer3','','show')" onmouseout="MM_showHideLayers('Layer3','','hide')">健脑饮食</a></span></td> <td width="140" bgcolor="#9966FF"><span class="STYLE9"><a href="美食团购.html">美食团购</a></span></td> <td width="140"><span class="STYLE9"><a href="食材百科.html">食材百科</a></span></td> <td width="140"><span class="STYLE9"><a href="母婴饮食.html">母婴饮食</a></span></td> <td width="140"><span class="STYLE9"><a href="美容饮食.html"> 美容饮食</a></span></td> </tr> </table> <table width="1093" height="181" border="0"> <tr> <td width="448" height="177" align="left" valign="top"><div id="jiaodianContent"></div> <script type="text/javascript"> //焦点 var xmlData="<list><item><title>近期活动</title><img>images/59045.jpg</img><url></url><item><title> 菠菜</title><title2>美食精选</title2><img>images/63797.jpg</img><url></url></item><item><title>家常菜菜谱</title><title2>专题食谱</title2><img>images/07664.jpg</img><url></url></item><item><title>12鲜肉</title><title2></title2><img>images/09188.jpg</img><url></url></item><item><title>土豆</title><title2></title2><img>images/1.jpg</img><url></url></item><item><title></title><title2></title2><img>images/88480.jpg</img><url></url></item><item><title></title><title2></title2><img>images/93291.jpg</img><url></url></item><item><title></title><title2></title2><img>images/47593.jpg</img><url></url></item><item><title></title><title2></title2><img>images/61998.jpg</img><url></url></item><item><title></title><title2></title2><img>images/71442.jpg</img><url></url></item><item><title></title><title2></title2><img>images/41464.gif</img><url></url></item><item><title></title><title2></title2><img>images/58248.gif</img><url></url></item><item><title></title><title2></title2><img>images/71442.gif</img><url></url></item><item><title>牛奶</title><title2></title2><img>images/70031.jpg</img><url></url></item><item><title></title><title2>让口水飞</title2><img>images/12724.jpg</img><url></url></item><item><title></title><title2></title2><img>images/22547a33126743d9a69_765048.jpg</img><url></url></item></item><item><title></title><img>images/05731.jpg</img><url></url><item><title></title><title2></title2><img>images/26198.jpg</img><url></url></item><item><title></title><title2></title2><img>images/88480.jpg</img><url></url></item><item><title></title><title2></title2><img>images/93291.jpg</img><url></url></item><item><title></title><title2></title2><img>images/47593.jpg</img><url></url></item><item><title></title><title2></title2><img>images/61998.jpg</img><url></url></item><item><title></title><title2></title2><img>images/64153.jpg</img><url></url></item><item><title></title><title2></title2><img>images/41464.gif</img><url></url></item><item><title></title><title2></title2><img>images/58248.gif</img><url></url></item><item><title></title><title2></title2><img>images/71442.gif</img><url></url></item><item><title></title><title2></title2><img>images/70031.jpg</img><url></url></item><item><title></title><title2>让口水飞</title2><img>images/12724.jpg</img><url></url></item><item><title></title><title2></title2><img>images/22547a33126743d9a69_765048.jpg</img><url></url></item></item><item><title></title><img>images/44541.jpg</img><url></url><item><title></title><title2></title2><img>images/47593.jpg</img><url></url></item><item><title></title><title2></title2><img>images/61998.jpg</img><url></url></item><item><title></title><title2></title2><img>images/64153.jpg</img><url></url></item><item><title></title><title2></title2><img>images/41464.gif</img><url></url></item><item><title></title><title2></title2><img>images/58248.gif</img><url></url></item><item><title></title><title2></title2><img>images/71442.gif</img><url></url></item><item><title></title><title2></title2><img>images/70031.jpg</img><url></url></item><item><title></title><title2>让口水飞</title2><img>images/1.jpg</img><url></url></item><item><title></title><title2></title2><img>images/1.jpg</img><url></url></item></item><item><title>本周主打</title><img>images/68518.jpg</img><url></url><item><title></title><title2></title2><img>images/41464.gif</img><url></url></item><item><title></title><title2></title2><img>images/58248.gif</img><url></url></item><item><title></title><title2></title2><img>images/71442.gif</img><url></url></item><item><title>牛奶</title><title2></title2><img>images/70031.jpg</img><url></url></item><item><title></title><title2>让口水飞</title2><img>images/12724.jpg</img><url></url></item><item><title></title><title2></title2><img>images/22547a33126743d9a69_765048.jpg</img><url></url></item></item><item><title></title><img>images/75516.jpg</img><url></url><item><title></title><title2></title2><img>images/70031.jpg</img><url></url></item><item><title></title><title2>让口水飞</title2><img>images/12724.jpg</img><url></url></item><item><title></title><title2></title2><img>images/1.jpg</img><url></url></item></item></list>"; var flashvars = {xmlData:xmlData}; var params = {menu:false,wmode:"transparent"}; var attributes = {}; （二）菜谱大全界面设计：设计效果以下：关键源代码： <td width="150" height="32"> <a href="#">返回首页</a></td> <td width="662"> </td> <td width="127"><span class="STYLE4"><a href="#"><a href="#" class="one" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage ('');">设成首页</a></span></td> <td width="164"><span class="STYLE4"><a href=

展开阅读全文