基于div+css的Tasty美食网站的界面设计--毕业论文

毕业论文（设计）题目基于DIV+CSS的Tasty美食网站的界面设计指导老师***专业班级***姓名***学号*********2014年05月25日浙江经贸职业技术学院毕业论文(设计)第1页摘要：美食，贵的有山珍海味，便宜的有街边小吃。美食是不分贵贱的，只要是自己喜欢的，就可以称之为美食。吃前有期待、吃后有回味的东西。美食遭遇心情的时候，美食已不仅仅是简单的味觉感受，更是一种精神享受。美食还体现人类的文明与进步。本网站以美食作为窗口，让海内外观众领略中华饮食之美，进而感知中国的文化传统和社会变迁。本文的主要内容集中在：对web进行概述，对DIV+CSS布局进行讨论，并对网站开发过程中使用的开发工具Dreamweaver和技术做了简要的介绍。本文分为四个部分，第一部分对网站进行概述，第二部分介绍了DIV+CSS，第三部分为网站分析，第四部分是对整个网站的制作进行详解。关键词：网页设计；DIV+CSS；Dreamweaver；美食网站浙江经贸职业技术学院毕业论文(设计)第2页目录引言..................................................................11网站概述..............................................................11.1开发背景.....................................................11.2开发意义.....................................................21.3开发软件.....................................................21.3.1梦幻网页的编织者——DreamweaverCS3.....................21.3.2图形、图像编辑设计制作软件——AdobePhotoshop...........32DIV+CSS...............................................................42.1DIV+CSS简介..................................................42.2级联样式表简介...............................................52.3DIV+CSS布局方式..............................................53网站分析..............................................................63.1可行性分析...................................................63.1.1技术可行性..............................................63.1.2经济可行性..............................................63.1.3社会可行性..............................................73.2需求分析.....................................................73.2.1界面设计需求............................................73.2.2用户对网站的需求........................................74网站设计.............................................................84.1网站设计目标.................................................84.2网站的总体设计...............................................84.3整体风格设计................................................104.3.1页面属性设计...........................................104.3.2色彩搭配...............................................114.3.3链接效果...............................................114.3.4导航设计...............................................124.3.5细节设计...............................................13浙江经贸职业技术学院毕业论文(设计)第3页4.4首页设计....................................................134.4.1DIV分布和概述.........................................134.4.2搜索关键字与描述.......................................154.5其他界面设计................................................154.5.1简介界面的设计制作过程.................................164.5.2中式美食界面的设计制作过程.............................164.5.3相册界面的设计制作过程.................................174.5.4西式美食界面的设计制作过程.............................194.5.5联系我们界面的设计制作过程.............................19结论.................................................................21致谢.................................................................22参考文献...............................................................23浙江经贸职业技术学院毕业论文(设计)第1页引言推荐国家的历史有长有短，疆域有大有小，实力有强有弱，人口有多有少，民族构成、宗教信仰、政权性质和经济结构也有差异，故而各国的饮食文化是不一样的。随着个人消费水平的提高，每个人对美食的概念不一样，其中特例就是中餐、西餐的产生以及受人追捧选择。论文详细论述了关于一个美食网站的开发的设计过程。在技术上，采用了Dreamweaver网站开发工具，以HTML的超大功能结合JavaScript的客户端语言。本文实现了首页、简介、中式美食、西式美食、联系我们等功能，全面化个人网站的需求。论文组织如下：首先阐述了该网站的开发背景、意义，详细介绍了DIV+CSS理论知识；其次介绍了相关的开发工具及技术基础；接着对网站进行了需求分析，提出了具体的设计方案；然后展现了整个网站的具体实现，包括网页的设计和链接，各功能模块的实现。1网站概述1.1开发背景“忽如一夜春风来，千树万树梨花开”，迅猛发展并日益成熟的互联网已经影响到我们生活的方方面面。人们真真切切的体会到了网络带给大家的便捷，互联网也以其独有的优势快速地渗透到越来越多的传统领域。俗话说“民以食为天”，在解决了温饱问题的现代，人们对食物的要求越来越高，已不仅仅局限于能吃饱就好，更多是希望能吃好，追求更多的美食。近年来，已出现不少网站对美食进行普及宣传，提供大量美食信息，介绍各菜系和小吃的饮食文化、饮食习俗、饮食习惯等，具有一定的可读性和趣味性。在网上推广美食，详述各种美食做法必定可以受到全国乃至全世界的美食爱好者的追捧。浙江经贸职业技术学院毕业论文(设计)第2页1.2开发意义设计开发此美食网站最基本的意义，就是能够尽可能详细地展示、介绍各种美食信息，同时提供美食爱好者一个交流的平台，使得更多的美食传统做法得到推广，也可激发更多美食创意的产生。1.3开发软件1.3.1梦幻网页的编织者——DreamweaverCS3AdobeDreamweaver，简称“DW”，中文名称“梦想编织者”，是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。AdobeDreamweaver使用所见即所得的接口，亦有HTML编辑的功能。它有Mac、Windows和Linux系统的版本。使用了Opera的排版引擎“Presto”作为网页预览。Dreamweaver是创建和管理网页的专业化可视编辑器。使用Dreamweaver可以轻松创建跨平台、跨浏览器的页面。Macromedia的RoundtripHTML技术允许用户随意导入HTML文档而无需重新设置代码格式。Dreamweaver可以为用户做到：使用动态HTML功能而不用写一行代码。它甚至还可以检查用户的工作成果在所有流行的平台和浏览器中可能发生的错误。它还是一个可以完全自定义的应用程序。用户可以创建自己的对象和命令修改菜单和快捷键，甚至编写JavaScript代码扩展Dreamweaver的行为和属性检查器。在Dreamwaver中，它的工具栏全是浮动工具栏，可以将工具栏缩小，也可以关闭。在专业术语里面，他们叫“浮动面板”，利用浮动面板来控制对页面的编写。通过在浮动面板中进行属性设置，这样就直接可以在文档中看到结果，避免了中间过程，提高了工作效率。先来介绍它的三个最重要的浮动面板。（1）启动面板启动面板主要用来快速启动相应的任务，或显示/隐藏相应的浮动面板。如果启动面板是竖的，那么，可以点击它右下角的一个小按钮，它就可以变成横向的了，这时，可能会发现，它的状态栏上也有这个面板上的所有选项。这也就为网浙江经贸职业技术学院毕业论文(设计)第3页页制作者提供了方便。可以直接从右下角点击相应的栏目进入想要进入的对话框。（2）对象面板对象面板主要功能相当于插入菜单，主要是向网页中插入一些对象，如表格，框架，图象，层，Flash动画等，它通过一个下拉菜单，把要插入的选项都包括在了其中。每一个选项中都有若干个图标，只要在图表上单击一下，就可以插入想要插入的对象了。（3）属性面板属性面板会随着编辑的内容而变化，这个图是文字属性面板，它里面包含了所要编辑的文字的所有内容，包括字体，颜色，大小，连接，缩进等，它的右下角还有一个向下的小三角箭头，单击它，会展开属性面板，它把一些不常用的属性也列出来。展开后，箭头会变成向上，单击它，又会使属性面板复原。属性面板很多，还有图象属性控制面板，层属性控制面板等对象的属性控制面板，用户只要选择要编辑的对象，它就会自动变化。用户对所有由启动面板弹出来的浮动面板在被打开后，可以重新组合，可以将经常用的面板单独地拉出来，只需要将鼠标放到想要拉的按钮上面，然后按住左键拖动就可以了，同理，把他们组合也是一样，用鼠标拖动后，放到上面就可以。1.3.2图形、图像编辑设计制作软件——AdobePhotoshopAdobePhotoshop，简称“PS”，是由AdobeSystems开发和发行的图像处理软件。Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑