个人美食网站

摘 要在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。Internet上发布信息主要是通过网站来实现的，获取信息也是要在Internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。为了让更多客人了解不同信息的情况，提高信息共享度。本网站通过用Dreamweaver、Javascript、CSS等编写的美食网站，其主要包括几个模块:首页、美味时尚、地方特色、专题、最新推荐等。通过本网站系统能提供各种与美食相关的信息以及各种美食信息的交流。与其它企业网站一样，也应通过Internet来对外宣传网站。关键字：Dreamweaver Javascript Internet DIV CSSAbstractIn the Internet today, with the rapid development of Internet become people to quickly get, distribution and transfer information important channel, it in people politics, economy, life aspects plays an important role. Internet information placed mainly through the website to realize, obtaining information is also to be in the Internet sea in accordance with certain retrieval methods will be required information from web site download. Therefore website construction in the Internet application status are obvious, it has become the government, enterprises, an important part of informatization construction, thus much attention. In order to let more guests to understand different information, improve information sharing degree.This website passes to use Dreamweaver,javascript,CSS etc. of delicacies website, it mainly includes a few mold piece:home page,delicacies specialty area,sweet article specialty area, delicacies material,forum etc. Passing this website system can provide various and the delicacies related information and various delicacies information of exchanges. Similar to other business enterprise websiteses,should also pass Intemet to publicizee a website outward.This website passes to use Dreamweaver,javascript,CSS etc. of delicacies website, it mainly includes a few mold piece:home page,delicacies specialty area,sweet article specialty area, delicacies material,forum etc. Passing this website system can provide various and the delicacies related information and various delicacies information of exchanges. Similar to other business enterprise websiteses,should also pass Intemet to publicizee a website outward.Keywords: Dreamweaver Javascript Internet DIV CSS目 录引 言1第一章 网页制作概述21.1网页的基础知识21.1.1 Internet简介21.1.2 网页的概述21.1.3 站点与网页的建立21.2个人网站设计的主要因素31.2.1网站的定位31.2.2网站的构思3第二章 开发工具和运行环境42.1 网站设计的基本知识42.2 Dreamweaver 开发工具概述42.3 HTML简介52.4 HTML技术介绍52.4.1网页和Html语言52.4.2 CSS简介62.5 Flash 概述72.6 网站运行环境7第三章 美食网站需求分析93.1 美食网站功能描述93.2 系统的可行性分析9第四章 网站系统的实现104.1 素材的准备104.2 首页的制作104.3 其他网页的制作154.3.1 美味时尚模块实现154.3.2 地方特色模块实现164.4 网页中特效的制作16第五章 网站测试与维护215.1 网站的建成215.2 网站的发布21总 结22参考文献2427引 言2010年上半年，我国餐饮市场消费需求较旺，景气指数明显攀升，营业额继续保持较强的增长势头。据国家统计局统计，上半年餐饮业实现营业额3373.7亿元，与去年同期增长24.5%：其中一季度实现营业额1742.3亿元，同比增长16.6%；二季度餐饮业实现营业额1631.4亿元，同比增长达到34.2%，增幅较大，主要是去年同期餐饮业受非典影响增幅下降10.1个百分点，同比基数较低的因素影响。据推算，我国现有餐饮网点达到400万个，其中个体私营企业380万个，占到95%左右；外资合资与国有企业约20万个，占到5%左右，企业结构不断调整，行业规模继续扩大。近两年来，一大批网站正在吸引着人们的眼球。然而，除了少数网站受到风险投资的青睐并实现飞跃式发展之外，很大一部分正处于迷茫摸索甚至挣扎的状态。在餐饮业这样一个与老百姓“衣食住行”息息相关的传统领域，各种网站走出了不同电子商务之路，催生出餐饮业电子商务发展。随着生活质量的提高，对饮食消费理性化、经营特色化和市场细分化的特点日益突现出来。调查反映，2010年上半年的餐饮消费在需求能力有所提高的同时，顾客的就餐选择性和多样性的特点明显，更加追求企业的品牌特色、营养健康和环境服务的综合水平，特别是对餐饮企业的经营特色化和差异性的要求不断提高，特色餐饮对消费的吸引力明显增强。餐饮企业的创新能力不断提升，在经营业态、菜品推出、风味设计和文化氛围等方面加大开发力度，市场细分化趋势增强，更加丰富多彩。随着饮食市场的不断变化对业界提出了一系列新的要求，而通过电子商务网站形式加强企业的竞争能力已经成为一种趋势，所以我建立了一个美食网站。本文主要针对该网站的各方面内容进行描述。第一章 网页制作概述1.1网页的基础知识1.1.1 Internet简介 Internet 最早来源于美国国防部高级研究计划局DARPA的前身ARPA建立的ARPAnet，该网于1969年投入使用。从60年代开始，ARPA就开始向美国国内大学的计算机系和一些私人有限公司提供经费，以促进基于分组交换技术的计算机网络的研究。1968年，ARPA为ARPAnet网络项目立项，这个项目基于这样一种主导思想：网络必须能够经受住故障的考验而维持正常工作，一旦发生战争，当网络的某一部分因遭受攻击而失去工作能力时，网络的其他部分应当能够维持正常通信。最初，ARPAnet主要用于军事研究目的它有五大特点：(1) 支持资源共享；(2) 采用分布式控制技术；(3) 采用分组交换技术；(4) 使用通信控制处理机；(5) 采用分层的网络通信协议。1.1.2 网页的概述网站，就是指在网际网路上，根据一定的规则使用HTML等工具制作的用于展示特定内容的相关网页的集合。简单地说，网站是一种通讯工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯，或者利用网站来提供相关的网络服务。人们可以通过网页浏览器来访问网站，获取自己需要的资讯或者享受网络服务。网页是构成网站的基本元素，是承载各种网站应用的平台。通俗说，网站就是由网页组成的。网页通常是HTML格式。1.1.3 站点与网页的建立在制作网页之前，首先要创建和设置本地站点。首先要创建本地站点的文件夹，命名为index.html,然后分别建立“首页”、“美味时尚”、“地方特色”、“专题”等主要网页。然后在“美味时尚”中有设分页，将内容进一步扩展。编辑网页时，直接点击右侧文件中的相应网页即可。1.2个人网站设计的主要因素1.2.1网站的定位网站的定位很重要，制作一个好的网站，必须对网站风格及内容有一个准确的定位。美食网站的主题通常取决于网站作者的爱好和兴趣。本网站的一个美食网站，所以命名为“小馋猫美食网”。1.2.2网站的构思美食网的前台主要包括首页、美味时尚、地方特色、专题、最新推荐等模块。为了方便读者对系统文件有更清晰的认识和使用，我使用了以下一个设计构思：首 页美味时尚专 题地方小吃图1-1 系统功能图第二章 开发工具和运行环境2.1 网站设计的基本知识静态编程最重要的特征就是由程序自动生成网页，最终形成供浏览器解释的HTML。那么如何设计出精美的网页以及动态更新交互的站点，这就需要网页编程与网页制作相结合。本章主要介绍网站建设所必须掌握的基础知识，如网页文档的结构、超链接、表格和表单等基本的HTML标识的写法要求，网页编辑的常用工具，动态网站项目工程的设计步骤要求，以及网站的发布与维护、网站的主机方案等相关知识。2.2 Dreamweaver 开发工具概述Dreamweaver是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件，随着Dreamweaver 8的发布，更坚定Dreamweaver在该领域的地位。它集网页设计、网站开发和站点管理功能于一身，具有可视化、支持多平台和跨浏览器的特性，是目前网站设计、开发、制作的首选工具。突出的特点主要有灵活的编写方式；可视化编辑界面；功能更多的CSS支持CSS可视化设计、CSS检查工具；动态跨浏览器验证；强大的WEB站点管理功能；内建的图形编辑引擎；丰富的媒体支持能力等。将世界一流水平的“设计”和“代码”编辑器合二为一，在设计窗口中精华源代码，使用户能够按工作的需要定制自己的用户界面。1. 利用丰富的CSS样式表支持构筑复杂，标准规范的站点。同时提供了丰富的用于快速的工具和样式属性控制工具。2. 跨浏览器有效性检查。保存时自动地检查当前文档跨浏览器的有效性，兼容性。3. 使用内置的图像编辑器程序让开发更加节省时间。裁剪，缩放等一些辅助性的图像编辑功能可以不用离开Dreamweaver就能够完成，编辑工具是内嵌的Macromedia Fireworks技术。4. 增强与其他软件的结合能力，包括Flash,Fireworks及其他设计开发工具。5. 支持Macromedia Flash 元素。通过内置的Flash构件，Dreamweaver 8增加了页面的交互性，导入一个Flash构件就像定制标签一样轻松。6. 基本支持改良:插入条,表格工具都有改进!7. 增强代码编写工具:编辑代码更省时,例如右键编写代码工具,增强的查找和替换,高效的属性面板。8. 改进的设计开放环境:一个改良的用户界面,更高的实用性,非常亲切和有逻辑,让你快速找到你想要的东西,一个新的开始屏幕让你快速访问最近的文件和教程资源。2.3 HTML简介全称：HyperText Mark-up Language。 译称：超文本标记语言。 简意：一种为普通文件中某些字句加上标识的语言，其目的在于运用标记（tag）合文件 达到预期的效果。 HTML 是在 SGML 定义下的一个描述性的语言，或可说 HTML 是 SGML 的一个应用程式。HTML 不是程式语言，如 C+ 和 Java 之类，它只是标记语言，基本上你只要明白了各种 标记的用法便算学懂了 HTML，HTML 的格式非常简单，只是由文字及标记组合而成，于 编辑部方面，任何文字编辑器都市可以，只要能将档案存为文本格式即可， 用专门的网页编辑工具当然更好。2.4 HTML技术介绍Macromedia公司的Roundtrip HTML技术让用户可以随意导入HTML文件而无需重新设置代码格式，用户还可以利用Dreamweaver清除或重新格式化HTML代码，实现代码的优化。2.4.1网页和Html语言我们的网页是用html语言编写的一个网站，html中文翻译为“超文本标记语言”，所谓“超文本”就是指页面内可以包含图片，链接，多媒体等非问字的元素，通过html语言将这些元素表示出来，就形成了html代码。浏览器的工作主要是将这些标记语言进行“翻译”，并按照定义的格式显示出来，这就是我们所看到的网页。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。 另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。其主要特点如下：（1）简易性，HTML版本升级采用超集方式，从而更加灵活方便。（2）可扩展性，HTML语言的广泛应用带来了加强功能，增加标识符等要求，HTML采取子类元素的方式，为系统扩展带来保证。（3）平台无关性。虽然PC机大行其道，但使用MAC等其他机器的大有人在，HTML可以使用在广泛的平台上。2.4.2 CSS简介CSS (层叠样式表) 是一系列格式设置规则，它们控制 Web 页面内容的外观。使用 CSS 设置页面格式时，请将内容与表现形式分开。页面内容（即 HTML 代码）驻留在 HTML 文件自身中，而用于定义代码表现形式的 CSS 规则驻留在另一个文件（外部样式表）或 HTML 文档的另一部分（通常为文件头部分）中。使用 CSS 可以非常灵活并更好地控制具体的页面外观，从精确的布局定位到特定的字体和样式。CSS 允许控制 HTML 无法独自控制的许多属性。除设置文本格式外，还可以使用 CSS 控制 Web 页面中块级别元素的格式和定位。CSS 的主要优点是: 它提供了便利的更新功能；更新一处的 CSS 规则时，使用该已定义样式的所有文档的格式都会自动更新为新样式。外部 CSS 样式表是一系列存储在一个单独的外部 CSS (.css) 文件（并非 HTML 文件）中的 CSS 规则。利用文档文件头部分中的链接，该文件被链接到 Web 站点中的一个或多个页面。内部（或嵌入式）CSS 样式表是一系列包含在 HTML 文档文件头部分的 style 标签内的 CSS 规则2.5 Flash 概述Flash是Macromedia公司开发一款优秀的网页动画开发软件，从简单的动画到复杂的交互式Web应用程序，它使用户可以创建任何作品。通过添加图片、声音和视频，可以使Flash应用程序媒体丰富多彩。Flash包含了许多种功能，如拖入用户界面组件、将动作脚本添加到文档的内置行为，以及可以添加到对象的特殊效果。这些功能使Flash不仅功能强大，而且易于使用。最叹引人的还是Flash作品SWF文件体积出奇的小，并且可以以插件的形式加入到网页中，通常几分钟的复杂动画才几百KB，是目前网络中最常用的动画格式。Flash MX 2004是Web设计人员、交互式媒体专业人员或开发多媒体内容的主要专家的理想工具。该版本注重于创建、导入和处理多种类型的媒体（音频、视频、位图、矢量、文本和数据）。2.6 网站运行环境 服务器： 操作系统： windows XP Server； Web服务器：IIS5.0 数据平台：Access 客户端： 任意操作系统下的浏览器均可。 配置要求： CPU Intel或兼容机Pentium 166Mhz或以上 企业版：至少64M建议128M或更多 内存 标准版：至少512M 开发版：至少512M 硬盘 Service：至少80G，一般为160G English Query：80M显视器 VGA或更高分辨率在服务器端的电脑上运行microsoft windows XP server，或者是Windows V7的Personal Web，安装好Macromedia Dreamweaver 8，将用Macromedia Dreamweaver 8制作的文件名的后缀一定要改为 .html ，然后上传到服务器上一个有执行权的目录下，浏览器端的电脑，只要是上得了英特网的就可以了，目前的个人电脑基本上都符合这个程序的浏览与运行，比如现在的浏览器是微软的explorer使用的最多，然后不管是内网和外网，只要用浏览端浏览器的地址栏输入正确的要浏览WEB的地址或叫路径发送，服务端就会根据浏览器的要求执行 Macromedia Dreamweaver 8 程序，脚本程序将一整套命令发送给脚本解释器 ( 即脚本引擎 ) ，由脚本解释器进行翻译并将其转换成服务器所能执行的命令，得到答案并将标准的 HTML 页面，返回给用户浏览端。第三章 美食网站需求分析在进行一个网站项目开发之前，应对这一开发项目进行了需求分析，以确定网站开发者需要完成哪些工作才能满足用户的需求。3.1 美食网站功能描述在现今的信息共享的时代，网络信息化管理工作系统经信息量大、数据准确、速度快、管理工作全面等特点在现实生活中得到广泛地应用。互联网商业的普及应用已经成为网络经济的大势所趋。本章介绍的美食网站是建立在用户和美食信息之间的，用户可以方便、快捷地查找到自己所需要了解的有关于食物制作方法的信息，可以足不出户就能了解到自己喜欢的美食的制作方法的基本信息，从而提高自己的做菜水平以及在以后生活中能够有需要的去体验不一样的口味。3.2 系统的可行性分析(1)实用性网站的宗旨是根据用户需求的有关食物信息和现今发展形势提供有关与美食制作的详细信息，(2)技术性网站提供给客户了了解食物的的基本信息和各种历史信息，使客户能够更好的在本站内获得他们所需的东西。(3)经济性网站能够提供给致力于推广美食文化的企业或者个人来达到所能达到的经济效益，并且能够达到预期的推广效果。第四章 网站系统的实现4.1 素材的准备准备做网站的素材是最重要的一环，不仅要收集许多内容各异的文字图片，还要设计各种网站的排版格式与美工。这个网站的排版格式是我自己用Dreamweaver画出来的，其中的图片有的是自己处理的，也有些是从网上下载后自己用Photoshop、Fireworks处理的。4.2 首页的制作先把素材整理成一些整齐的目录，最好就在网页需要放置的目录下，我把它放在文件夹“网页/image和flash”下。定义站点是选择这个目录，这样素材就全位于站点以内，处理比较方便。1、定义站点（1）启动Dreamweaver。（2）打开“站点”菜单，选择“新建站点”命令。图4-1 站点的定义（3）在弹出的“站点定义”对话框中的“站点命令”文本框中输入“小馋猫美食网”，在下面的“本地根目录文件夹”文本框中输入本地网站预保存的路径，单击“确认”按钮。（4）随即在组合面板中弹出“站点”面板，现在可以在其中添加页面了。（5）右键单击“站点”面板中的根目录，在弹出菜单中选择“新建文件”命令，把新建文件的名称改为”index.html”。（6）双击index.html，进入页面编辑状态。（7）首先划分整个页面的布局。点击“布局”按钮进入布局模式，划分页面，将整个页面划分为五部分：上面横幅部分，用来表明页面的主题；接着横幅部分是一小块链接部分，用来链接其他的几个页面；左面较为狭窄的部分，是一些链接，算是修饰部分吧；右面是主要部分，页面的主要内容放在这里；最底下的小块部分，说明网站的制作者和联系方式。图4-2 表格建立（8）然后在页面头部添加背景图片： ，并在头部右侧写好自己网站的各个部分名称，并且设置好背景图片设置好链接 首 页 美味时尚 地方特色/a专 题   （图5-3）图5-3（9）然后在页面中部的左侧设置上背景和相关CSS设置，写上些自我介绍的文字。（图5-4）图 5-4（10）在页面的左上角插入5张图片，放入事先设置好的表格。运用javascript的代码，做一个变换效果。代码如下： Loading. 黑巧克力玫瑰蛋糕 原料：低筋粉90克、蛋黄4个 、蛋白4个、好时Special Dark特浓黑巧克力。 做法：1、4个蛋黄，加入30克白糖搅匀颜色变淡，比较粘稠时，再加入50克橄榄油、50克水拌匀，再筛入低筋粉90克，奶粉20克，泡打粉2克，盐2克。 2、4 白中滴入白醋，分三次加入150克白糖打发，直至将打蛋器立起，被打发的蛋清. （11）在页面的中部加上个人简介 并且设置好CSS样式和各个链接。图 5-5(12)最后添加首页站内索引，相关链接的链接，代码如下： 韩式大酱汤 草莓酸奶沙拉 菊花三泡台 tr方便面煎蛋饼 黑芝麻豆渣饼 蒙布朗 贵州美食 感受云南民俗 紫薯椰蓉球 花生酱吐司 之心可乐饼等4.3 其他网页的制作4.3.1 美味时尚模块实现图 5-6这一组是美味时尚页面，我使用了的是图像链接，代码如下： /p4.3.2 地方特色模块实现图 5-7 4.4 网页中特效的制作网页特效的运用在整个网站中并不是最重要的，但也是不可取少的，它在一定程度上起到了画龙点睛的作用！也许你会说，有没有特效无所谓，只要网页构思好，网页页面设计的得好就可以了！这种想法是不对的，过多的网页特效会使得页面显得杂乱而且不整洁，但是适度的网页特效却能使网页更具有灵动性，更能吸引人的眼球！在我们的网站的不同页面中分别运用了一些网页特效，是从网上下载的网页特效的代码，具体如下：1、滚屏特效效果：该特效的效果和幻灯片播放效果类似，多个图片循环出现，不停互换。在所有页面中都有体现。图 5-8图5-9代码如下：var s=function()var interv=2000; /切换间隔时间var interv2=10; /切换速速var opac1=80; /文字背景的透明度var source=fade_focus /图片容器id/获取对象function getTag(tag,obj)if(obj=null)return document.getElementsByTagName(tag)elsereturn obj.getElementsByTagName(tag)function getid(id)return document.getElementById(id);var opac=0,j=0,t=63,num,scton=0,timer,timer2,timer3;var id=getid(source);id.removeChild(getTag(div,id)0);var li=getTag(li,id);var div=document.createElement(div);var title=document.createElement(div);var span=document.createElement(span);var button=document.createElement(div);button.className=button;for(var i=0;ili.length;i+)var a=document.createElement(a);a.innerHTML=i+1;a.onclick=function()clearTimeout(timer);clearTimeout(timer2);clearTimeout(timer3);j=parseInt(this.innerHTML)-1;scton=0;t=63;opac=0;fadeon();a.className=b1;a.onmouseover=function()this.clas sName=b2;a.onmouseout=function()this.className=b1;sc(j);button.appendChild(a);/控制透明度function alpha(obj,n)if(document.all)obj.style.filter=alpha(opacity=+n+);elseobj.style.opacity=(n/100);/控制焦点按钮function sc(n)for(var i=0;ili.length;i+)button.childNodesi.className=b1;button.childNodesn.className=b2;title.className=num_list;title.appendChild(span);alpha(title,opac1);id.className=d1;div.className=d2;id.appendChild(div);id.appendChild(title);id.appendChild(button);/渐显var fadeon=function()opac+=5;div.innerHTML=lij.innerHTML;span.innerHTML=getTag(img,lij)0.alt;alpha(div,opac);if(scton=0)sc(j);num=-2;scrolltxt();scton=1;if(opac0)timer=setTimeout(fadeout,interv2)elseif(jli.length-1)j+elsej=0;fadeon();/滚动文字var scrolltxt=function()t+=num;span.style.marginTop=t+px;if(num3)timer3=setTimeout(scrolltxt,interv2)else if(num0&t62)timer3=setTimeout(scrolltxt,interv2)elsescton=0;fadeon();/初始化window.onload=s;|xGv00|1d9efe72e6c0a6843b8e0c919b8b9f76|xGv00|7ae188d82f1163746583ef18aa3a58e8 首 页 美味时尚 地方特色 专 题   Loading. 黑巧克力玫瑰蛋糕 原料：低筋粉90克、蛋黄4个 、蛋白4个、好时Special Dark特浓黑巧克力。 做法：1、4个蛋黄，加入30克白糖搅匀颜色变淡，比较粘稠时，再加入50克橄榄油、50克水拌匀，再筛入低筋粉90克，奶粉20克，泡打粉2克，盐2克。 2、4 白中滴入白醋，分三次加入150克白糖打发，直至将打蛋器立起，被打发的蛋清. /div第五章 网站测试与维护5.1 网站的建成网站建成后并不意味着网站建设的结束，网站内容需要不断更新， 并且网站发布前要进行细致周密的测试，以保证正常浏览和使用。主要测试内容： 1、服务器稳定性、安全性。2、程序软件的测试。 3、网页兼容性测试，如浏览器、显示器。 4、根据需要的其他测试。5.2 网站的发布网站发布后也要定时的对网站进行维护，以保证网站的正常浏览和使用。主要的维护内容有：1、服务器及相关软硬件的维护，对可能出现的问题进行评估，制定响应时间。 2、内容的更新、调整等。 3、制定相关网站维护的规定，将网站维护制度化、规范化。总 结实践是检验真理的唯一标准，当然也是检验学习成果的标准。通过这次毕业设计让我对前面学过的许多课程有了更为深刻的理解，也是我对这两年所学的东西的一个综合体现。然而这次设计让我感受颇深，它让我体会到了理论知识结合实践的重要性，光有理论知识是远远不够的。首先，我选的课题是旅游美食网站设计，随之而来的就是我如何来确定该网站的主题,起初自己把问题想的过于简单了，总觉得