毕业论文(基于div+css的tasty美食网站的界面设计).doc

毕业论文（设计）题目基于DIVCSS的美食网站界面设计指导老师专业班级姓名学号2014年05月30日浙江经贸职业技术学院毕业论文设计第0页摘要美食，贵的有山珍海味，便宜的有街边小吃。美食是不分贵贱的，只要是自己喜欢的，就可以称之为美食。吃前有期待、吃后有回味的东西。美食遭遇心情的时候，美食已不仅仅是简单的味觉感受，更是一种精神享受。美食还体现人类的文明与进步。本网站以美食作为窗口，让海内外观众领略中华饮食之美，进而感知中国的文化传统和社会变迁。本文的主要内容集中在对网站界面制作过程的详细描述，对DIVCSS布局进行讨论，并对网站开发过程中使用的开发工具和技术做了简要的介绍。关键词网页设计；DIVCSS；DREAMWEAVER；美食网站浙江经贸职业技术学院毕业论文设计第0页目录引言11市场调研111网站开发背景和需求112同类型网站的分析22文献检索321CSS样式编写规则322DIVCSS布局方式423JAVASCRIPT编写规则524网站配色方案53设计实践531设计立意532创作过程6321美食网站类主题与版面的分析7322美食网站效果图的设计与制作8323界面元素的制作过程9324首页界面的制作过程10325简介界面的制作过程14326中式美食界面的制作过程14327相册界面的制作过程15328西式美食界面的制作过程17329联系我们界面的制作过程1833制作中遇到的问题和解决方法204网站的测试20结论22致谢23参考文献24浙江经贸职业技术学院毕业论文设计第0页引言随着信息时代的来临，IT行业已经成为现今最受关注的行业之一，它发展飞速且在全球范围内广泛、普及应用，人类的生活因此有了革命性的变化。同时，网络技术的发展也取得了卓越的成就，为网站开发、界面设计等奠定了坚实的基础。论文详细论述了关于一个美食网站的开发的设计过程。在技术上，采用了DREAMWEAVER网站开发工具，以HTML的超大功能结合JAVASCRIPT的客户端语言。本文实现了首页、简介、中式美食、西式美食、联系我们等功能，全面化个人网站的需求。论文组织如下首先阐述了该网站的开发背景、意义，详细介绍了DIVCSS理论知识；其次介绍了相关的开发工具及技术基础；接着对网站进行了需求分析，提出了具体的设计方案；然后展现了整个网站的具体实现，包括网页的设计和链接，各功能模块的实现；最后对该网站进行了严格的测试。1市场调研11网站开发背景和需求“忽如一夜春风来，千树万树梨花开”，迅猛发展并日益成熟的互联网已经影响到我们生活的方方面面。人们真真切切的体会到了网络带给大家的便捷，互联网也以其独有的优势快速地渗透到越来越多的传统领域。俗话说“民以食为天”，在解决了温饱问题的现代，人们对食物的要求越来越高，已不仅仅局限于能吃饱就好，更多是希望能吃好，追求更多的美食。近年来，已出现不少网站对美食进行普及宣传，提供大量美食信息，介绍各菜系和小吃的饮食文化、饮食习俗、饮食习惯等，具有一定的可读性和趣味性。在网上推广美食，详述各种美食做法必定可以受到全国乃至全世界的美食爱好者的追捧。浙江经贸职业技术学院毕业论文设计第1页设计开发此美食网站最基本的意义，就是能够尽可能详细地展示、介绍各种美食信息，同时提供美食爱好者一个交流的平台，使得更多的美食传统做法得到推广，也可激发更多美食创意的产生。12同类型网站的分析美食网站越来越多，这说明了人们对美食的需求也越来越多。本人在设计之前对同类型网站进行了调研。首先对中华美食网进行分析，中华美食网首页如图11所示。图11中华美食网首页中华美食网首页事个页面采用黄色为背景，导航图片简洁明了，色彩简单，网站多以文字加以图片展示，多采用A链接，内容包涵广，加了滚动图片，动感十足。头部的LOGO简洁大方，在中规中矩的美食网站中，中华美食网的首页布局紧凑且信息量大，图文并茂又不显杂乱。接着又分析了美食天下网站，该网站首页截图如图12所示。浙江经贸职业技术学院毕业论文设计第2页图12美食天下网站首页不同于中华美食网的内容繁多，美食天下网站事个首页内容较少，事个版面更显清晰整洁，背景采用裸粉色，看过去更为清爽。导航利用DIVCSS在大导航下加了子导航，鼠标移上去时会显示不同的文字信息。不过与中华美食网设计相同的是，该网站也是以黄色为导航背景，内容种类多，版面紧凑。2文献检索本次设计是遵循WEB标准规范，在DREAMWEAVER中利用DIVCSS，并在文本文档中编写JAVASCRIPT代码的形式完成事个网站界面的设计。此外网站的色彩搭配方面也需要格外注意，因此分别对CSS样式编写的规则、DIVCSS布局方式、JAVASCRIPT的编写规则和网页色彩搭配方案做了相关检索。21CSS样式编写规则CSS类型中，内联式是指直接在HTML标签后写样式代码。而嵌入式就是对本文件内所有的该类型的标签名运用这样的样式，但该样式的标签要放在HEAD中。嵌入式样式表解决了同一个文件内使用同样样式的多个标签的代码重用，当接触到有很多个文件组成的网站，如果这些独立的网页文件要使用统一的风格，浙江经贸职业技术学院毕业论文设计第3页就需要使用外部样式表。建立后缀名CSS的文本文件。在使用时，在引用该样式表的网页文件内的HEAD标签中使用LINK标签来引入。CSS规则由两个主要的部分构成选择器，以及一条或多条声明。选择器通常是您需要改变样式的HTML元素。每条声明由一个属性和一个值组成。属性（PROPERTY）是希望设置的样式属性（STYLEATTRIBUTE）。每个属性有一个值。属性和值被冒号分开。有三种方法可以在站点网页上使用样式表①外部样式将网页链接到外部样式表。②内页样式在网页上创建嵌入的样式表。③行内样式应用内嵌样式到各个网页元素。22DIVCSS布局方式对于网站DIVCSS设计越来越受到业界的关注，从个人网站到企业及门户网站，页面设计人员已经将DIVCSS作为了业界标准。如果用DIVCSS来构建和美化网站，那么DIV就是整个网站的骨架，CSS样式就是网站的衣服。其中的内容，就是血肉。要入手设计一个网站。那么，就要从DIV的布局开始。本网站的骨架架构如下图21所示图21设计中网站的骨架图浙江经贸职业技术学院毕业论文设计第4页23JAVASCRIPT编写规则JAVASCRIPT程序应独立保存在后缀名为JS的文件中。JAVASCRIPT代码不应该被包含在HTML文件中，除非这是段特定只属于此部分的代码。在HTML中的JAVASCRIPT代码会明显增加文件大小，而且也不能对其进行缓存和压缩。应尽量放到BODY的后面。这样可以减少因为载入SCRIPT而造成其他页面内容载入也被延迟的问题。缩进的单位为四个空格。避免每行超过80个字符。在运算符号，最好是逗号后换行。下一行应该缩进8个空格。及时地更新注释也很重要。错误的注释会让程序更加难以阅读和理解。单行注释的符号是“//”，多行注释以“/“开始，以“/“结束。所有的变量必须在使用前进行声明。将VAR语句放在函数的首部。24网站配色方案同色系方案是选择彼此相邻的几种颜色构成的配色方案。例如橙色、橙红色以及橙黄色就可以组成一个同色系方案。使用同色系配色方案可以给人非常协调的感觉，因此在网站设计中非常常用。典