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

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

《毕业论文(基于div+css的Tasty美食网站的界面设计).doc》由会员分享，可在线阅读，更多相关《毕业论文(基于div+css的Tasty美食网站的界面设计).doc（27页珍藏版）》请在冰点文库上搜索。

毕业论文（设计）

题目基于DIV+CSS的

美食网站界面设计

指导老师*****

专业班级*******

姓名***

学号*********

2014年05月30日

浙江经贸职业技术学院毕业论文（设计）

摘要：

美食，贵的有山珍海味，便宜的有街边小吃。

美食是不分贵贱的，只要是自己喜欢的，就可以称之为美食。

吃前有期待、吃后有回味的东西。

美食遭遇心情的时候，美食已不仅仅是简单的味觉感受，更是一种精神享受。

美食还体现人类的文明与进步。

本网站以美食作为窗口，让海内外观众领略中华饮食之美，进而感知中国的文化传统和社会变迁。

本文的主要内容集中在：

对网站界面制作过程的详细描述，对div+css布局进行讨论，并对网站开发过程中使用的开发工具和技术做了简要的介绍。

关键词：

网页设计；div+css；Dreamweaver；美食网站

第0页

目录

引言 1

1市场调研 1

1.1网站开发背景和需求 1

1.2同类型网站的分析 2

2文献检索 3

2.1css样式编写规则 3

2.2div+css布局方式 4

2.3JavaScript编写规则 5

2.4网站配色方案 5

3设计实践 5

3.1设计立意 5

3.2创作过程 6

3.2.1美食网站类主题与版面的分析 7

3.2.2美食网站效果图的设计与制作 8

3.2.3界面元素的制作过程 9

3.2.4首页界面的制作过程 10

3.2.5简介界面的制作过程 14

3.2.6中式美食界面的制作过程 14

3.2.7相册界面的制作过程 15

3.2.8西式美食界面的制作过程 17

3.2.9联系我们界面的制作过程 18

3.3制作中遇到的问题和解决方法 20

4网站的测试 20

结论 22

致谢 23

参考文献 24

第0页

引言

随着信息时代的来临，IT行业已经成为现今最受关注的行业之一，它发展飞速且在全球范围内广泛、普及应用，人类的生活因此有了革命性的变化。

同时，网络技术的发展也取得了卓越的成就，为网站开发、界面设计等奠定了坚实的基础。

论文详细论述了关于一个美食网站的开发的设计过程。

在技术上，采用了Dreamweaver网站开发工具，以HTML的超大功能结合JavaScript的客户端语言。

本文实现了首页、简介、中式美食、西式美食、联系我们等功能，全面化个人网站的需求。

论文组织如下：

首先阐述了该网站的开发背景、意义，详细介绍了div+css理论知识；其次介绍了相关的开发工具及技术基础；接着对网站进行了需求分析，提出了具体的设计方案；然后展现了整个网站的具体实现，包括网页的设计和链接，各功能模块的实现；最后对该网站进行了严格的测试。

1市场调研

1.1网站开发背景和需求

“忽如一夜春风来，千树万树梨花开”，迅猛发展并日益成熟的互联网已经影响到我们生活的方方面面。

人们真真切切的体会到了网络带给大家的便捷，互联网也以其独有的优势快速地渗透到越来越多的传统领域。

俗话说“民以食为天”，在解决了温饱问题的现代，人们对食物的要求越来越高，已不仅仅局限于能吃饱就好，更多是希望能吃好，追求更多的美食。

近年来，已出现不少网站对美食进行普及宣传，提供大量美食信息，介绍各菜系和小吃的饮食文化、饮食习俗、饮食习惯等，具有一定的可读性和趣味性。

在网上推广美食，详述各种美食做法必定可以受到全国乃至全世界的美食爱好者的追捧。

设计开发此美食网站最基本的意义，就是能够尽可能详细地展示、介绍各种美食信息，同时提供美食爱好者一个交流的平台，使得更多的美食传统做法得到推广，也可激发更多美食创意的产生。

1.2同类型网站的分析

美食网站越来越多，这说明了人们对美食的需求也越来越多。

本人在设计之前对同类型网站进行了调研。

首先对中华美食网进行分析，中华美食网首页如图1.1所示。

图1.1中华美食网首页

中华美食网首页事个页面采用黄色为背景，导航图片简洁明了，色彩简单，网站多以文字加以图片展示，多采用a链接，内容包涵广，加了滚动图片，动感十足。

头部的logo简洁大方，在中规中矩的美食网站中，中华美食网的首页布局紧凑且信息量大，图文并茂又不显杂乱。

接着又分析了美食天下网站，该网站首页截图如图1.2所示。

图1.2美食天下网站首页

不同于中华美食网的内容繁多，美食天下网站事个首页内容较少，事个版面更显清晰整洁，背景采用裸粉色，看过去更为清爽。

导航利用div+css在大导航下加了子导航，鼠标移上去时会显示不同的文字信息。

不过与中华美食网设计相同的是，该网站也是以黄色为导航背景，内容种类多，版面紧凑。

2文献检索

本次设计是遵循web标准规范，在dreamweaver中利用div+css，并在文本文档中编写JavaScript代码的形式完成事个网站界面的设计。

此外网站的色彩搭配方面也需要格外注意，因此分别对css样式编写的规则、div+css布局方式、JavaScript的编写规则和网页色彩搭配方案做了相关检索。

2.1css样式编写规则

css类型中，内联式是指直接在html标签后写样式代码。

而嵌入式就是对本文件内所有的该类型的标签名运用这样的样式，但该样式的标签要放在head中。

嵌入式样式表解决了同一个文件内使用同样样式的多个标签的代码重用，当接触到有很多个文件组成的网站，如果这些独立的网页文件要使用统一的风格，就需要使用外部样式表。

建立后缀名.css的文本文件。

在使用时，在引用该样式表的网页文件内的head标签中使用link标签来引入。

css规则由两个主要的部分构成：

选择器，以及一条或多条声明。

选择器通常是您需要改变样式的HTML元素。

每条声明由一个属性和一个值组成。

属性（property）是希望设置的样式属性（styleattribute）。

每个属性有一个值。

属性和值被冒号分开。

有三种方法可以在站点网页上使用样式表：

①外部样式：

将网页链接到外部样式表。

②内页样式：

在网页上创建嵌入的样式表。

③行内样式：

应用内嵌样式到各个网页元素。

2.2div+css布局方式

对于网站div+css设计越来越受到业界的关注，从个人网站到企业及门户网站，页面设计人员已经将div+css作为了业界标准。

如果用div+css来构建和美化网站，那么div就是整个网站的骨架，css样式就是网站的衣服。

其中的内容，就是血肉。

要入手设计一个网站。

那么，就要从div的布局开始。

本网站的骨架架构如下图2.1所示：

图2.1设计中网站的骨架图

2.3JavaScript编写规则

JavaScript程序应独立保存在后缀名为.js的文件中。

JavaScript代码不应该被包含在HTML文件中，除非这是段特定只属于此部分的代码。

在HTML中的JavaScript代码会明显增加文件大小，而且也不能对其进行缓存和压缩。

应尽量放到body的后面。

这样可以减少因为载入script而造成其他页面内容载入也被延迟的问题。

 缩进的单位为四个空格。

 避免每行超过80个字符。

在运算符号，最好是逗号后换行。

下一行应该缩进8个空格。

及时地更新注释也很重要。

错误的注释会让程序更加难以阅读和理解。

单行注释的符号是“//”， 多行注释以"/*"开始，以"*/"结束。

所有的变量必须在使用前进行声明。

将var语句放在函数的首部。

2.4网站配色方案

同色系方案是选择彼此相邻的几种颜色构成的配色方案。

例如橙色、橙红色以及橙黄色就可以组成一个同色系方案。

使用同色系配色方案可以给人非常协调的感觉，因此在网站设计中非常常用。

典型的运用方法就是，用一种颜色作为页面背景，而另外一种在颜色环中与其相邻的颜色作为前景色。

互补色方案则是互补色方案的配置。

虽然略显繁琐，但是在现在的网站设计中非常流行，因为互补色适合于制作活泼时尚的效果，可以让网站魅力四射。

另外，在photoshop中，要想构造一个三色方案也是非常容易。

首先选中一种颜色，记下他的H（Hue）值，然后为这个值加120以此类推得到第三种颜色，构成一个三色方案。

三色方案中使用了三种彼此之间差别明显的颜色，因此页面显得相当不稳定，是一种可以带来比较另类的感觉的配色方案，将给予浏览者某种紧张感，这是因为这三种颜色均对比强烈。

3设计实践

3.1设计立意

在中国传统文化教育中的阴阳五行哲学思想、儒家伦理道德观念、中医营养养生学说，还有文化艺术成就、饮食审美风尚、民族性格特征诸多因素的影响下，创造出彪炳史册的中国烹饪技艺，形成博大精深的中国饮食文化。

越来越多的人喜欢使用互联网查询信息、交流互动。

美食需要传承，也需要交流，美食网站是一个交流美食的平台。

由于本人偏爱美食，时常关注美食信息，也因为所处的软件专业，平时对网站设计和HTML编写等方面有一定的熟悉度，借着此次制作毕业作品的机会，为美食设计一个版式新颖的网站，作为此论文的依据。

本次网站的制作主题确定为简洁型。

整个网站以图片为主，减少文字。

网页主要以黑色为背景，灰色为辅，以达到清新整洁的页面效果。

各页面之间布局力求工整合理，内容表达清晰。

本美食网站的建设，主要针对美食爱好者及各界需要搜集美食信息的网络用户的需求进行设计开发的，因此，将打造一个界面美观友好，布局合理，栏目功能强大，信息详尽的网站。

主要实现如下目标：

①向外界宣传美食文化和菜肴传统做法；

②信息尽可能齐全，满足不同用户需求。

3.2创作过程

利用Photoshop制作出网页效果图，再参考另外的一些美食网站，如中华美食网、美食天下等网站定下框架布局，考虑美食网站的logo设计。

网上搜集素材并下载，图片素材分类取名统一保存在images文件夹下，下载搜集图片如图3.1所示。

图3.1图片搜集截图

有关介绍美食网站的文字素材复制并保存在meishi.txt中，文字资料如图3.2所示。

图3.2文字资料截图

创建页面，做好首页及子页的命名，为样式、脚本分类创建文件夹。

结合photoshop软件制作效果图，利用photoshop软件实现某些元素的裁剪及取材。

3.2.1美食网站类主题与版面的分析

在美食网站整体版面布局中，需要更多运用css样式、HTML代码和div+css布局使网站清爽简洁。

需要达到的要求：

（1）色彩轻快，版面清爽，搭配合理

由于是美食类网站，所以版面不宜生硬死板，不宜过于花哨缭乱，但也要注意整体格局。

采用明亮清晰色彩、板块布局工整。

主题风格偏向清爽整洁，网页主要以黑色为背景，灰色为辅。

文字颜色以白色为主。

采用12像素的正文宋体。

（2）版面合理，页面链接无误。

为避免布局过于混乱，各个div之间的位置间距要控制得当，代码的正确应用，HTML与css的简洁书写，使之有更丰富的动画效果，此外也要保证页面间的链接完整。

3.2.2美食网站效果图的设计与制作

美食网站效果图由网上模板下载所得，在photoshop软件中打开，首页模板效果如图3.3所示。

图3.3首页效果图

banner部分不做修整，导航部分主要是后面在dreamweaver中修改文字，只把内容信息的右边部分全部改为图片模式，如图3.4所示。

图3.4首页效果图

子页整体布局继承首页布局，只在内容信息部分异于首页。

子页模版效果图如图3.5所示。

图3.5子页效果图

子页布局不做修改。

3.2.3界面元素的制作过程

界面元素的制作包括网站中用到的所有图片，如导航图、logo图等。

把所有图片依次使用photoshop进行修整、取材。

背景需要透明的图片保存为*.png格式，其他图片匀保存为*.jpg。

由于本网站导航栏除了几个数字图片外没再放其他图片，所以只需在dreamweaver中布局后加入文字即可。

3.2.4首页界面的制作过程

首先建立站点，站点下新建images、css、js、data四个文件夹，文字搜集的素材归于meishi.txt中，图片素材的搜集与自己设计处理过的图片都统一放在images文件夹内。

另外控制样式的style和slimbox两个文件放入css文件夹内，init、jquery.localscroll-min、jquery.min、jquery.scrollTo-min和slimbox2五个js文件放入js文件夹内，数据库文件放入data文件夹中。

创建首页，初建header、main_wrapper、footer上中下三大版块，其中在header中再插入site_title，输入网站标题，如图3.6所示。

图3.6site_title效果图

中间区块分为左右两个版块，依次命名为home_boxleft、home_boxright。

左边为导航区块，右边为网站展示图区块。

导航区块利用div+css平均布局为四块，每块中都使用a链接加入相应图片，输入导航文字，导航文字大小设置为h2，颜色为白色并给导航文字设置链接，去下划线，点击导航文字进入相应界面；右边部分利用div+css平均分为六个区块，每个区块都使用a链接加入展示图，点击任何一张展示图都可进行放大显示。

首页界面中内容信息部分的效果如图3.7所示。

图3.7首页内容效果图

导航区块中的效果为鼠标移到导航上时，当前鼠标所在的导航项目栏的背景色加深，移开后又恢复。

导航区块的代码如下：

About

Foodisnotjustasimpletasteexperience,butalsoaspiritofenjoyment.