本科毕设论文-—《美食天下》网站的建设

毕业设计题目《美食天下》网站的建设

毕业设计（论文）原创性声明和使用授权说明

原创性声明

本人郑重承诺：所呈交的毕业设计（论文），是我个人在指导教师的指导下进行的研究工作及取得的成果。尽我所知，除文中特别加以标注和致谢的地方外，不包含其他人或组织已经发表或公布过的研究成果，也不包含我为获得及其它教育机构的学位或学历而使用过的材料。对本研究提供过帮助和做出过贡献的个人或集体，均已在文中作了明确的说明并表示了谢意。

作者签名：日期：

指导教师签名：日期：

使用授权说明

本人完全了解大学关于收集、保存、使用毕业设计（论文）的规定，即：按照学校要求提交毕业设计（论文）的印刷本和电子版本；学校有权保存毕业设计（论文）的印刷本和电子版，并提供目录检索与阅览服务；学校可以采用影印、缩印、数字化或其它复制手段保存论文；在不以赢利为目的前提下，学校可以公布论文的部分或全部内容。

作者签名：日期：

学位论文原创性声明

本人郑重声明：所呈交的论文是本人在导师的指导下独立进行研究所取得的研究成果。除了文中特别加以标注引用的内容外，本论文不包含任何其他个人或集体已经发表或撰写的成果作品。对本文的研究做出重要贡献的个人和集体，均已在文中以明确方式标明。本人完全意识到本声明的法律后果由本人承担。

作者签名：日期：年月日

学位论文版权使用授权书

本学位论文作者完全了解学校有关保留、使用学位论文的规定，同意学校保留并向国家有关部门或机构送交论文的复印件和电子版，允许论文被查阅和借阅。本人授权大学可以将本学位论文的全部或部分内容编入有关数据库进行检索，可以采用影印、缩印或扫描等复制手段保存和汇编本学位论文。

涉密论文按学校规定处理。

作者签名：日期：年月日

导师签名：日期：年月日

摘要

随着网络技术与信息技术的发展，因特网迅速成长，Internet上发布信息主要是通过网站来实现的，获取信息也是要在Internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。随着时代的发展，网站建设越来越接近于一门艺术而不仅仅是一项技术。网页的艺术设计，日益被网站建设者所注重。

本文以《美食天下—食谱大全》网站的建设为例，介绍了网页设计制作的基本方法和相关经验。指出网页设计制作水平式对计算机操作知识中综合知识水平的检验。要提高其设计，制作水平必须从栏目安排、整体布局、文本与图片编辑、网页链接技术到Html语言设置、网页效果测试，乃至软件应用选择方面都要从整体上把握，从环节上努力，观念上更新，在方法上创新，将换位思考模式引入网页设计制作中，从而形成一种以效果最佳为目标的综合性技能。并再实践中积累经验、完善规程、探索技巧、获得成功。

关键字：制作、建设、解析

Abstract

With the development of network technology and information technology, the Internet growing rapidly, Internet published information is mainly achieved through the website, access to information is to be Internet" ocean" according to certain retrieval way information needed to be downloaded from the web site. With the development of the times, the website construction is getting more and more close to an art is not just a technology. Webpage art design, site builders are increasingly attention.

In this paper the world -" food recipes" website construction as an example, introduces the webpage design basic methods and related experience. Pointed out that the webpage design level of knowledge in computer operation knowledge test. To improve the design, production levels must be from the column arrangement, the overall layout, text and picture editing, webpage link technology to the Html language settings, webpage test results, and the selected software applications have to grasp the overall, from links to update, idea, method innovation, the transposition thinking mode into the webpage the production design, thus forming a kind of to best effect as the goal of comprehensive skills. And practice experience, perfect regulations, exploration, success skills.

Keywords: manufacturing、construction、analysis

目录

摘要 (2)

目录 (7)

第一章绪论 (9)

1.1 研究背景 (9)

1.2 研究的内容 (9)

第二章网站建设前的调研与准备工作 (11)

2.1明确什么是网站制作 (11)

2.2 确定网站的主题 (11)

2.3搜集网站的资料 (11)

2.4 规划网站 (12)

2.5 本章小结 (12)

第三章网站的制作过程 (13)

3.1网页布局的基本概念 (13)

3.2网页布局的方法 (14)

3.2.1纸上布局法 (14)

3.2.2 软件布局法 (15)

3.3 网站首页设计 (16)

3.3.1首页页头和导航的设计 (16)

3.3.2 网站正文的设计 (17)

3.3.3 网站页尾的设计 (25)

3.4本章小结 (26)

第四章网站制作的常见问题 (28)

4.1 常见问题的解析 (28)

4.2 本章小结 (30)

第五章结束语 (31)

5.1 全文总结 (31)

5.2展望 (31)

致谢 (32)

参考文献 (33)

附录 (35)

第一章绪论

1.1 研究背景

在Internet飞速发展的今天，电子数字计算机是20世纪重大科技发明之一，而互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。网页设计是将网站策划案中的内容、网站的主题模式，结合网页设计师的认识，通过艺术设计的手法表现出来；而网页制作通常是根据网页设计师制作的设计稿，按照W4C规范语言将其制作成网页格式。优秀的网页设计师对网页设计与网页制作两道工序都是十分了解的，这样才可以保证网页制作人员在充分掌握设计要素的前提下，制作规范化、符合用户使用习惯、带来良好用户体验的网站。

因此网站建设与维护在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。为了让更多人更容易的搜索到更多的健康的美食食谱。所以，开发美食天下的网站是必须的。

本次设计我计划通过Dreamweaver cs4、Photoshop图像处理软件、Flash 等工具共同来制作完成信息学院网站的设计。当然，这次的制作过程中还需要绑定数据库，最终的完成需要众多软件相互使用。

为了方便人们对美食的搜索，由此我就设计了一个美食网。在本网站中主要介绍了一些有利于人们身心健康的食物，希望可以给忙碌的人们带来一点小小的帮助。

1.2 研究的内容

通过网站，全面宣传，展示健康美食、美食食谱，发布美食信息咨询和与广大爱好美食者建立良好互动的平台，使社会各界人士增加对美食有更深刻的认识，在Internet网上，让爱好美食者及时得到美食网发布的重要信息。提高了办事效率,给美食爱好者者与各种美食之间建立了一种美好的桥梁。希望给各位爱好美食的人带来方便。

本论文主要以实践为基础，利用软件Dreamweaver cs3为工具，设计了一个美食网。

论文以瑞丽美食网为参考开展了研究，分析了系统建设过程中的相关技术，对所涉及的软件平台、软件系统、安全系统的进行理论分析，对系统规划实施中的需求分析、系统结构设计、硬件集成、软件配置等各环节进行研究，并提出性

能测试。其中此论文主要研究了以下内容：

第一章，主要是对本论文的结构做了一个介绍。其中主要包括网站研究的背景和网站研究的内容。

第二章，介绍了网站建设的前期准备工作。其中主要包括明确什么是网站制作、网站主题的选择、搜集网站的资料以及网站的规划。

第三章，介绍美食网首页的具体设计步骤。其中主要包括设计网站的代码和网站的效果图。我的美食网主要介绍了一些基本的美食书普、美食书籍、甜点派对以及人们都感兴趣的健康食品等等。

第四章，解答了一些网站制作中常见的问题。如：为什么在Dreamweaver 中按Enter键换行时，与上一行的距离却很大？等等。

第五章，对全文做了一个小小的总结，并对以后指出了进一步的研究方向。希望在以后可以更加的完善自己的网站，更希望自己的网站可以带给更多的人、更多的帮助。

第二章网站建设前的调研与准备工作

进入21世纪。互联网技术及其网络服务正越来越深入地影响着人们的思维方式和观念，加速了整个社会的现代进程，成为人类社会进步的强大原动力。

一个网站的成功与否与建设前的网站规划有着极其重要的关系，只有进行详细的规划，才能避免在网站建设中出现的许多问题，使网站建设能顺利进行。网站规划对网站建设起到计划和指导的作用，对网站的内容和维护起到定位作用。

2.1明确什么是网站制作

想要设计一个好的网站，首先我们得明白什么事网站制作。那么什么是网站制作呢？通俗的来说就是网站通过页面结构定位，合理布局，图片文字处理，程序设计，数据库设计等一系列工作的总和。也是将网站设计师的图片用HTML方式展示出来，属于前台工程师的一项任务，前台工程师任务包括：网站设计、网站用户体验、网站JAVA效果、网站制作等工作。

网站制作是网站策划师、网络程序员、网页设计师等岗位，应用各种网络程序开发技术和网页设计技术，为企事业单位、公司或个人在全球互联网上建设站点，并包含域名注册和主机托管等服务的总称。

2.2 确定网站的主题

网站主题就是你建立的网站所要包含的主要内容，一个网站必须要有一个明确的主题。网络上的网站题材千奇百怪、琳琅满目，只要你想的到的，就可以把它制作出来。但是一般来说自己选择的题材最好是自己擅长的或者喜爱的内容，因为这样在制作时才不会觉得力不从心。所以我选择的题材是和食物有关的“食谱大全”。

2.3搜集网站的资料

明确了网站的主题以后，就要围绕自己所选的主题开始搜集材料了。常言道：“巧妇难为无米之炊”。要想让自己的网站有血有肉，能够吸引住用户，你就要尽量搜集材料，搜集得材料越多，以后制作网站就越容易。

材料既可以从图书、报纸、光盘、多媒体上得来，也可以从互联网上搜集，然后把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。

《美食天下—食谱大全》网站中所用的资料主要是来自网络。

2.4 规划网站

网站就像设计师设计大楼一样，图纸设计好了，才能建成一座漂亮的楼房。网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等，你只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。也只有如此制作出来的网页才能有个性、有特色，具有吸引力。

规划的内容应该主要包括如下几项：

（1）域名和主机的选择（域名需要依靠网站主题以及用户范围来选择，主机则根据网站在大小、安全、稳定上的需求）知名的如中国网络服务（2）网站一个网站设计得成功与否，很大程度上决定于设计者的规划水平，规划的定位（如定位于赢利性网站，还是企业网站，或是公益性的……）（3）网站的用途（是用来赢利的，还是做产品线上营销的，或是做品牌推广和整合的）

（4）网站的发展目标（需要达到的目标，需要为这个目标而努力的）（5）网站的拓扑图构画（网站包括哪些栏目，采用什么样的制作结构）（6）网站制作技术的采用（用哪种语言开发，在什么平台上开发）

（7）网站的推广（需要做具体什么样的工作去推广网站，是否需要在前期开发的时候就考虑到后期的推广，如SEO专家的建议）

（8）网站的维护（是自主维护，还是外包维护，维护的内容包括哪些，后期改版的时间间隔安排等）

（9）网站安全 (网站定期进行安全检测及备份等安全操作)

（10）网站的主题颜色（网站颜色可以直接反应出企业的行业所属）

2.5 本章小结

本章主要介绍建设网站前期的调研与准备工作。其中主要包括明确什么是网站制作、网站主题的选择、网站资料的来源以及网站的规划。

第三章网站的制作过程

网站主页就好象是宣传栏或者店面——对访问者产生第一印象，都希望尽量给人留下好的印象。

一般来说，好的网站应该给人有这样的感觉：

干净整洁；条理清楚；

专业水准；引人入胜。

3.1网页布局的基本概念

最开始，网页呈现在你面前的时侯，它就好像一张白纸，它需要你任意挥洒你的设计才思。在开始的时侯，你需要明白，虽然你能控制一切你所能控制的东西，但假如你知道什么是一种约定俗成的标准或者说大多数访问者的浏览习惯，那么你可以在此基础上加上自己的东西。你当然也可以创造出自己的设计方案，但如果你是初学者，那么最好明白网页布局的基本概念。

网页的基本布局包括一下几个方面：

（1）页面尺寸

由于页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于你无法突破显示器的范围，而且因为浏览器也将占去不少空间，留下给你的页面范围变得越来越小。一般分辨率在800x600的情况下，页面的显示尺寸为：780x428个象素；分辨率在640x480的情况下，页面的显示尺寸为:620X311个象素；分辨率在1024X768的情况下，页面的显示尺寸为：1007x600。从以上数据可以看出，分辨率越高页面尺寸越大。

浏览器的工具栏也是影响页面尺寸的原因。一般目前的浏览器的工具栏都可以取消或者增加，那么当你显示全部的工具栏时，和关闭全部工具栏时，页面的尺寸是不一样的。

在网页设计过程中，向下拖动页面是惟一给网页增加更多内容(尺寸)的方法。但我想提醒大家除非你能肯定站点的内容能吸引大家拖动，否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容，那么你最好能在上面做上页面内部连接，方便访问者浏览。

（2）整体造型

什么是造型，造型就是创造出来的物体形象。这里是指页面的整体形象，这种形象应该是一个整体，图形与文本的接合应该是层叠有序。虽然，显示器和浏览器都是矩形，但对于页面的造型，你可以充分运用自然界中的其它形状以及它们的组合：矩形，圆形，三角形，菱形等。

（3）页头

页头又可称之为页眉，页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。这样，访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键，它将牵涉到下面的更多设计和整个页面的协调性。页头常放置站点名字的图片和公司标志以及旗帜广告。本网页页头部分使用的是一个漂亮的FISH插件。

（4）文本

文本在页面中出现都数以行或者块(段落)出现，它们的摆放位置决定者整个页面布局的可视性。在过去因为页面制作技术的局限，文本放置的位置的灵活性非常小，而随着DHTML的兴起，文本已经可以按照自己的要求放置到页面的任何位置。

（5）页脚

页脚和页头相呼应。页头是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方。你能看到，许多制作信息都是放置在页脚的。

（6）图片

图片和文本是网页的两大构成元素，却一不可。如何处理好图片和文本的位置成了整个页面布局的关键。而你的布局思维也将体现在这里。

一般网页里面如果图片使用过多，给人的感觉会是觉得该网站太过花哨，但是如果不使用图片的话，给人的感觉会是觉得该网站太过枯燥，让人们根本就没有浏览的兴趣。所以在使用图片的时候要把握住分寸，不可以太多，但也不可以不用。并且所使用的图片要接近网页的主题，不可以以难用。

（7）多媒体

除了文本和图片，还有声音，动画，视频等等其它媒体。虽然它们不是经常能被利用到，但随着动态网页的兴起，它们在网页布局上也将变得更重要。在使用多媒体时最好在网页上设计一个使用该多媒体的开关，并且开关要设计在一个醒目的地方，这样有利于用户。

3.2网页布局的方法

网页布局的方法有两种，第一种为纸上布局；第二种为软件布局。

3.2.1纸上布局法

纸上布局法就是让自己在纸上把自己想要设计的网站画一个草图，这样就有利于自己网站的建设。

如我的网站的首页草图是：

3.2.2 软件布局法

如果你不喜欢用纸来画出你的布局意图，那么你还可以利用软件来完成这些工作。这个软件就是Photoshop。Photoshop所具有的对图像的编辑功能用到设计网页布局上更显得心应手。不像用纸来设计布局，利用Photoshop可以方便的使用颜色，使用图形，并且可以利用层的功能设计出用纸张无法实现的布局意念。

其实除了用photshop外，我们还可以使用系统自带的绘图功能。使用绘图

软件既简单又方便。就如我的网页用绘图软件绘制为