基于div+css的Tasty美食网站的界面设计毕业论文汇编.docx

1、基于div+css的Tasty美食网站的界面设计毕业论文汇编毕 业 论 文（设计） 题 目 基于DIV+CSS的 Tasty美食网站的界面设计 指导老师 * 专业班级 * 姓 名 * 学 号 * 2014 年 05 月 25 日摘 要：美食，贵的有山珍海味，便宜的有街边小吃。美食是不分贵贱的，只要是自己喜欢的，就可以称之为美食。吃前有期待、吃后有回味的东西。美食遭遇心情的时候，美食已不仅仅是简单的味觉感受，更是一种精神享受。美食还体现人类的文明与进步。本网站以美食作为窗口，让海内外观众领略中华饮食之美，进而感知中国的文化传统和社会变迁。本文的主要内容集中在：对web进行概述，对DIV+CSS布

2、局进行讨论，并对网站开发过程中使用的开发工具Dreamweaver和技术做了简要的介绍。本文分为四个部分，第一部分对网站进行概述，第二部分介绍了DIV+CSS，第三部分为网站分析，第四部分是对整个网站的制作进行详解。关键词：网页设计；DIV+CSS；Dreamweaver；美食网站引 言推荐国家的历史有长有短，疆域有大有小，实力有强有弱，人口有多有少，民族构成、宗教信仰、政权性质和经济结构也有差异，故而各国的饮食文化是不一样的。随着个人消费水平的提高，每个人对美食的概念不一样，其中特例就是中餐、西餐的产生以及受人追捧选择。论文详细论述了关于一个美食网站的开发的设计过程。在技术上，采用了 Dre

3、amweaver网站开发工具，以 HTML的超大功能结合JavaScript的客户端语言。本文实现了首页、简介、中式美食、西式美食、联系我们等功能，全面化个人网站的需求。论文组织如下：首先阐述了该网站的开发背景、意义，详细介绍了DIV+CSS理论知识；其次介绍了相关的开发工具及技术基础；接着对网站进行了需求分析，提出了具体的设计方案；然后展现了整个网站的具体实现，包括网页的设计和链接，各功能模块的实现。1网站概述1.1 开发背景“忽如一夜春风来，千树万树梨花开”，迅猛发展并日益成熟的互联网已经影响到我们生活的方方面面。人们真真切切的体会到了网络带给大家的便捷，互联网也以其独有的优势快速地渗透到

4、越来越多的传统领域。俗话说“民以食为天”，在解决了温饱问题的现代，人们对食物的要求越来越高，已不仅仅局限于能吃饱就好，更多是希望能吃好，追求更多的美食。近年来，已出现不少网站对美食进行普及宣传，提供大量美食信息，介绍各菜系和小吃的饮食文化、饮食习俗、饮食习惯等，具有一定的可读性和趣味性。在网上推广美食，详述各种美食做法必定可以受到全国乃至全世界的美食爱好者的追捧。1.2 开发意义设计开发此美食网站最基本的意义，就是能够尽可能详细地展示、介绍各种美食信息，同时提供美食爱好者一个交流的平台，使得更多的美食传统做法得到推广，也可激发更多美食创意的产生。1.3 开发软件1.3.1 梦幻网页的编织者Dr

5、eamweaver CS3Adobe Dreamweaver，简称“DW”，中文名称“梦想编织者”，是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。Adobe Dreamweaver使用所见即所得的接口，亦有HTML编辑的功能。它有Mac、Windows和Linux系统的版本。使用了Opera的排版引擎“Presto”作为网页预览。Dreamweaver是创建和管理网页的专业化可视编辑器。使用Dreamweaver可以轻松创建跨

6、平台、跨浏览器的页面。Macromedia的Roundtrip HTML技术允许用户随意导入HTML文档而无需重新设置代码格式。Dreamweaver可以为用户做到：使用动态HTML功能而不用写一行代码。它甚至还可以检查用户的工作成果在所有流行的平台和浏览器中可能发生的错误。它还是一个可以完全自定义的应用程序。用户可以创建自己的对象和命令修改菜单和快捷键，甚至编写JavaScript代码扩展Dreamweaver的行为和属性检查器。在 Dreamwaver 中，它的工具栏全是浮动工具栏，可以将工具栏缩小，也可以关闭。在专业术语里面，他们叫“浮动面板”，利用浮动面板来控制对页面的编写。通过在浮动

7、面板中进行属性设置，这样就直接可以在文档中看到结果，避免了中间过程，提高了工作效率。先来介绍它的三个最重要的浮动面板。（1）启动面板启动面板主要用来快速启动相应的任务，或显示/隐藏相应的浮动面板。如果启动面板是竖的，那么，可以点击它右下角的一个小按钮，它就可以变成横向的了，这时，可能会发现，它的状态栏上也有这个面板上的所有选项。这也就为网页制作者提供了方便。可以直接从右下角点击相应的栏目进入想要进入的对话框。（2）对象面板对象面板主要功能相当于插入菜单，主要是向网页中插入一些对象，如表格，框架，图象，层，Flash 动画等，它通过一个下拉菜单，把要插入的选项都包括在了其中。每一个选项中都有若干

8、个图标，只要在图表上单击一下，就可以插入想要插入的对象了。（3）属性面板属性面板会随着编辑的内容而变化，这个图是文字属性面板，它里面包含了所要编辑的文字的所有内容，包括字体，颜色，大小，连接，缩进等，它的右下角还有一个向下的小三角箭头，单击它，会展开属性面板，它把一些不常用的属性也列出来。展开后，箭头会变成向上，单击它，又会使属性面板复原。属性面板很多，还有图象属性控制面板，层属性控制面板等对象的属性控制面板，用户只要选择要编辑的对象，它就会自动变化。用户对所有由启动面板弹出来的浮动面板在被打开后，可以重新组合，可以将经常用的面板单独地拉出来，只需要将鼠标放到想要拉的按钮上面，然后按住左键拖动

9、就可以了，同理，把他们组合也是一样，用鼠标拖动后，放到上面就可以。1.3.2 图形、图像编辑设计制作软件Adobe Photoshop Adobe Photoshop，简称“PS”，是由Adobe Systems开发和发行的图像处理软件。Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。PS有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。从功能上看，该软件可分为图像编辑、图像合成、校色调色及特功能特色效制作部分等。 图像编辑是图像处理的基础，可以对图像做各种变换如放大、缩小、旋转、倾斜、镜像、透视等；也可进行复制、去除斑点、修

10、补、修饰图像的残损等。图像合成则是将几幅图像通过图层操作、工具应用合成完整的、传达明确意义的图像，这是美术设计的必经之路；该软件提供的绘图工具让外来图像与创意很好地融合。校色调色可方便快捷地对图像的颜色进行明暗、色偏的调整和校正，也可在不同颜色进行切换以满足图像在不同领域如网页设计、印刷、多媒体等方面应用。特效制作在该软件中主要由滤镜、通道及工具综合应用完成。包括图像的特效创意和特效字的制作，如油画、浮雕、石膏画、素描等常用的传统美术技巧都可藉由该软件特效完成。Adobe只支持Windows操作系统和Mac OS操作系统版本的Photoshop， 但Linux操作系统用户可以通过使用Wine来

11、运行Photoshop。2 DIV+CSS2.1 DIV+CSS简介DIV+CSS是web设计标准，它是一种网页的布局方法。与传统中通过表格布局定位的方式不同，它可以实现网页页面内容与表现相分离。提及DIV+CSS组合，还要从XHTML说起。XHTML是一种在HTML基础上优化和改进的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。用DIV盒模型结构给各部分内容划分到不同的区块，然后用CSS来定义盒模型的位置、大小、边框、内外边距、排列方式等。CSS是英语CascadingS

12、tyleSheets（层叠样式表单）的缩写，它是一种用来表现HTML或XML等文件式样的计算机语言。简单地说，DIV用于搭建网站结构（框架）、CSS用于创建网站表现（样式/美化），实质即使用XHTML对网站进行标准化重构，使用CSS将表现与内容分离，便于网站维护，简化HTML页面代码，可以获得一个较优秀的网站结构便于日后维护、协同工作和搜索引擎蜘蛛抓取。以下是DIV+CSS的特点简介： 符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。 支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好

13、的兼容。 搜索引擎更加友好。相对与传统的table, 采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。 样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。 CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。 表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。2.2 级联样式表简介有三种方法可以在站点网页上使用样式表： 将网页链接到外部样式表。 在网页上创建嵌入的样式表。 应用内嵌样式到各个网页元素。 2.3 DIV+CSS布局方式对于网站DIV+CSS设计越来越受到业界的关注，从个人网站到企业

14、及门户网站，页面设计人员已经将DIV+CSS作为了业界标准。如果用DIV+CSS来构建和美化网站，那么DIV就是整个网站的骨架，CSS样式就是网站的衣服。其中的内容，就是血肉。要入手设计一个网站。那么，就要从DIV的布局开始。本网站的骨架架构如图2.1所示： 图2.1 设计中网站的骨架图 3 网站分析3.1 可行性分析3.1.1技术可行性此系统对开发环境的硬件，软件要求都不高，目前市场上一般计算机硬件资源均能满足系统开发需求。（1）硬件需求包含了处理器、操作系统等，具体硬件需求如表3.1所示。表3.1硬件环境表处理器（CPU）最低要求：600兆赫（MHz）Pentium处理器推荐：建议采用1千

15、兆赫（GHz）Pentium处理器操作系统可在以下任何一个系统中：Microsoft Windows 2000 Professional SP4Microsoft Windows 2000 Server SP4Microsoft Windows 2000 Advanced Server SP4Microsoft Windows 2000 Datacenter Server SP4Microsoft Windows XP Professional x64 Edition (WOW)Microsoft Windows XP Professional SP2Microsoft Windows XP

16、Home Edition SP2Microsoft Windows XP Media Center Edition 2002 SP2Microsoft Windows XP Media Center Edition 2004 SP2Microsoft Windows XP Media Center Edition 2005RAM1最低要求：192 兆字节 (MB)推荐：256 MB 或更高显示器最低要求：800 x 600 256 色推荐：1024 x 768 增强色 - 16 位鼠标Microsoft 鼠标或兼容的指针设备（2）软件需求主要有Adobe Dreamweaver CS3及服务器

17、配置IIS5.0以上。3.1.2经济可行性 本美食网站设计与开发所要求的硬件（计算机及相关硬件）和软件（Dreamweaver+Photoshop等）均在市面上易于购买或可直接从网上下载并免费使用，不需要再花费大量的资金去购买高成本的设备，大大提高了在设计过程中的工作效率。因此，本系统在经济上是可行的。3.1.3社会可行性 本网站的开发符合国家法律法规，能健康独立的运行，操作使用方便，能免费提供大量美食信息，用户通过本平台不仅可以查阅到自己需要的信息资源，还能进行评论和交流，满足不同地方的美食爱好者的需求。3.2 需求分析在中国传统文化教育中的阴阳五行哲学思想、儒家伦理道德观念、中医营养养生学

18、说，还有文化艺术成就、饮食审美风尚、民族性格特征诸多因素的影响下，创造出彪炳史册的中国烹饪技艺，形成博大精深的中国饮食文化。越来越多的人喜欢使用互联网查询信息、交流互动。美食需要传承，也需要交流，美食网站是一个交流美食的平台。3.2.1界面设计需求 在崇尚个性的今天，设计者们将页面设计表示的淋漓尽致。用户欣喜的看到那些僵化的设计模式正在被逐个打破，网页设计充满了朝气。但是，作为网页设计者，不能一味的只追求个性的表现，还必需兼顾到用户和客户的习惯，在表现本身的风格的同时，在功能上使用户更加便利。网站导航如图3.1所示。图3.1 网站导航功能利用DIV+CSS定位各个界面、链接实现点击文字链接移动

19、界面，页面中包含首页界面、简介界面、中式美食界面、相册界面、西式美食界面、联系我们界面。3.2.2用户对网站的需求 美食网站主要功能是提供美食交流等服务。其中，信息发布是各种类型的美食信息包括美食所用材料、做法等。而对于美食交流服务，用户联系我们，给我们反馈建议或意见。4 网站设计4.1 网站设计目标本美食网站的建设，主要针对美食爱好者及各界需要搜集美食信息的网络用户的需求进行设计开发的，因此，将打造一个界面美观友好，布局合理，栏目功能强大，信息详尽的网站。主要实现如下目标： 向外界宣传美食文化和菜肴传统做法； 信息尽可能齐全，满足不同用户需求。4.2 网站的总体设计借助由代码语言编程所实现的

20、各种交互式效果，增加了网页界面的生动性和复杂性。一般来说，网页的界面主要由下面几个因素构成： 文字：文字元素是信息传达的主体部分。网页中的文字主要包括标题、信息、文字链接几种主要形式。标题和传统媒体中信息传达的基本作用相同，是内容的简概说明一般比较醒目、优先编排。文字作为占据页面重要比率的元素，同时又是信息重要载体，它的字体、大小、颜色和排布对页面整体设计影响极大。我所使用的文字是宋体12号，因为这样看得比较清楚，使整个页面整洁，网页中都普遍的使用，所以在此我选择12号宋体作为网页的主体文字样式。 图形：图形在网页界面中具有重要作用。合理的运用图形，可以生动直观、形象地表现设计主题。网页中常用

21、的图形格式包括jpg和gif，这两种格式压缩比高，得到了规范浏览器的支持，下载速度快，具有跨平台的特性，不需要浏览器安装插件即可直接阅览。图形元素包括标题、背景、主图、链接图标四种。本文所使用的图片主要是自己收集的比较精美。网站图片素材如图4.1所示。图4.1图片素材 页面版式：版式是网页界面设计的重要组成部分，它将文字、图形等视觉元素进行组合配置，使页面整体视觉效果美观和谐，简单大方，便于阅读，实现信息传达的最佳效果。页面版式如图4.2-4.3所示。图4.2 页面版式图4.3 页面版式 色彩：彩色网页比单色网页更具吸引力；色彩本身具有象征作用。 4.3 整体风格设计4.3.1 页面属性设计页

22、面中的整体格式和布局都在stley.css中，其中body设计如下:body margin: 0; padding: 0; color: #e2e2e2; font-size: 12px; line-height: 1.6em; font-family: Lucida Sans Unicode, Lucida Grande, sans-serif; background-color: #313030; background-image: url(./images/templatemo_body.jpg); background-position: center top; background-

23、repeat: no-repeat页面的字体为：宋体、大小为12像素，字体颜色#e2e2e2。背景颜色我采用#313030， #313030这种背景色它与其他任何颜色的搭配都比较合适，不显花哨，简洁大方。背景图片用url设置，背景图像的起始位置为页面顶部中间，效果是重复背景图。4.3.2 色彩搭配打开一个网站，给用户留下第一印象的既不是网站丰富的内容，也不是网站合理的版面布局，而是网站的色彩。色彩对人的视觉效果非常明显，一个网站设计成功与否，在某种程度上取决于设计者对色彩的运用和搭配。因为网页设计属于一种平面效果设计，在排除立体图形、动画效果之外，在平面图上，色彩的冲击力是最强的，它很容易给用

24、户留下深刻的印象。因此，在设计网页时，必须要高度重视色彩的搭配。本网站的主打色为黑色。黑色是一种很大器的颜色，几乎能与所有的颜色相辅相成。采用这种色彩搭配给游客留下深刻的印象。4.3.3 链接效果对于一个页面不仅要设计其字体和其他风格，还要有链接效果，使页面更加的生动，style.css中的链接效果如下：a, a:link, a:visited color: #FFFFFF; font-weight: normal; text-decoration: none #site_title a font-size: 28px; color: #fff; font-weight: 700 p a, p

25、 a:link, p a:visited color: #00CCFF; font-weight: normal; text-decoration: none p a:hover color: #CC66FF; text-decoration: none; cite a, cite a:link, cite a:visited font-size: 12px; text-decoration: none; font-style: normal #gallery li a display: block;#gallery li a img 页面的链接效果设置：未访问的链接样式和已经访问过的链接样式

26、字体颜色为#FFFFFF，字体的粗细为中等，文字修饰为无；当鼠标放到链接上的时候，样式字体颜色颜色为#CC66FF，文字修饰为无。网页header部分的效果设置：字体大小为28像素，颜色为#FFFFFF字体的粗细为中等。页面中的文字链接效果设置：未访问的链接样式和已经访问过的链接样式字体颜色为#00CCFF，字体的粗细为中等，文字修饰为无；当鼠标放到链接上的时候，样式字体颜色颜色为#CC66FF，文字修饰为无。引用链接的字号为12像素，文字修饰为无，字体样式为默认值。图片展示界面用的是display控件，表示的是显示模式。bolck表示此元素将显示为块级元素，此元素前后会带有换行符。4.3.4

27、 导航设计网站的导航栏目可以让用户对网站的内容及信息一目了然。导航分为：首页、简介、中式美食、西式美食、联系我们。网站采用DIV布局，加上a链接制作而成。相关代码如下： About Food is not just a simple taste experience, but also a spirit of enjoyment. Chinese Food The Chinese diet etiquette varies according to the nature and purpose of the feast. Western Food Western-style food is r

28、eferred to as the western style food, nutrition as the core. Contact Any opinions or suggestions, please contact us. 4.3.5 细节设计9PX凹陷细线和有阴影的背景图片的组合设计给网页带来了分成次的美观、图片的选择给人醒目、大方的感觉、按钮的设计给顾客赏心悦目的感觉。4.4 首页设计4.4.1 DIV分布和概述由于个人网站给人的形象应该是专业、大方，所以主页的设计和布局我采用大方简单又不失活泼的原则。首页整体用1个大的DIV里面包含两个小的（上下个一个）DIV。DIV设置效果为

29、：总体都设置了宽度，居中格式，背景颜色及背景图片，其他还有内边距，高等。所有页面分为logo信息、内容信息、版权信息三个部分。内容界面是一个网站走向成功道路上必不可少的因素。网站的内容代表着一个好网站的素质和形象，所以应该表现的大气、端庄而且精细。还更要表现出一个网站应该有的朝气和活力。因此我首先选中色彩搭配比较大方，整体布局比较清晰简洁的内容模式。在首页的版面，先是用Photoshop对网站模板进行切片，然后用DIV+CSS进行排版。首先自然映入颜面的是logo设计，我用最简单的文字和线条展示logo；网站首页内容分两部分，左边是网站导航部分，每个标题下面都有一句话介绍本标题；右边放了图片，美食图片吸引浏览者的眼球；网站底部信息也只用了简单的文字展示，界面效果如图4.4所示。图4.4 页面效果根据因为浏览者在阅读时候经常采用从上到下，从左到右的习惯，主体内容中，我将“导航”放一边，“logo”放在了上面的位置加以简短的宣传文字完美搭配这样能更好地吸引浏览者的眼球。底部不仅能够展示网站的各种优点，而且突出显示出网站整体结尾的完美。导航效果如图4.5所示。图4.5 导航效果4.4.2 搜索关键字与描述为了有利于搜索引擎的收录，在首页专门设置了mate信息，设置相关关键字和描述。相关代码如下：meta name=keywords content=tech layer, fr