毕业答辩论文基于divcss的Tasty美食网站的界面设计样本.doc

毕业答辩论文基于divcss的Tasty美食网站的界面设计

毕 业 论 文（设计）

题 目 基于DIV+CSS的
美食网站界面设计
指导老师 *****
专业班级 *******
姓 名 ***
学 号 *********

2014 年 05 月 30 日
摘 要：美食，贵的有山珍海味，便宜的有街边小吃。美食是不分贵贱的，只要是自己喜欢的，就可以称之为美食。吃前有期待、吃后有回味的东西。美食遭遇心情的时候，美食已不仅仅是简单的味觉感受，更是一种精神享受。美食还体现人类的文明与进步。本网站以美食作为窗口，让海内外观众领略中华饮食之美，进而感知中国的文化传统和社会变迁。本文的主要内容集中在：对网站界面制作过程的详细描述，对div+css布局进行讨论，并对网站开发过程中使用的开发工具和技术做了简要的介绍。
关键词：网页设计；div+css；Dreamweaver；美食网站

目 录
引 言 1
1市场调研 1
网站开发背景和需求 1
同类型网站的分析 2
2 文献检索 3
css样式编写规则 3
div+css布局方式 4
JavaScript编写规则 5
网站配色方案 5
3 设计实践 5
设计立意 5
创作过程 6
7
8
9
10
14
14
15
17
18
制作中遇到的问题和解决方法 20
4 网站的测试 20
结 论 22
致谢 23
参考文献 24

引 言
随着信息时代的来临，IT行业已经成为现今最受关注的行业之一，它发展飞速且在全球范围内广泛、普及应用，人类的生活因此有了革命性的变化。同时，网络技术的发展也取得了卓越的成就，为网站开发、界面设计等奠定了坚实的基础。
论文详细论述了关于一个美食网站的开发的设计过程。在技术上，采用了 Dreamweaver网站开发工具，以 HTML的超大功能结合JavaScript的客户端语言。
本文实现了首页、简介、中式美食、西式美食、联系我们等功能，全面化个人网站的需求。
论文组织如下：首先阐述了该网站的开发背景、意义，详细介绍了div+css理论知识；其次介绍了相关的开发工具及技术基础；接着对网站进行了需求分析，提出了具体的设计方案；然后展现了整个网站的具体实现，包括网页的设计和链接，各功能模块的实现；最后对该网站进行了严格的测试。
1市场调研
网站开发背景和需求
“忽如一夜春风来，千树万树梨花开”，迅猛发展并日益成熟的互联网已经影响到我们生活的方方面面。人们真真切切的体会到了网络带给大家的便捷，互联网也以其独有的优势快速地渗透到越来越多的传统领域。俗话说“民以食为天”，在解决了温饱问题的现代，人们对食物的要求越来越高，已不仅仅局限于能吃饱就好，更多是希望能吃好，追求更多的美食。
近年来，已出现不少网站对美食进行普及宣传，提供大量美食信息，介绍各菜系和小吃的饮食文化、饮食习俗、饮食习惯等，具有一定的可读性和趣味性。在网上推广美食，详述各种美食做法必定可以受到全国乃至全世界的美食爱好者的追捧。 
设计开发此美食网站最基本的意义，就是能够尽可能详细地展示、介绍各种美食信息，同时提供美食爱好者一个交流的平台，使得更多的美食传统做法得到推广，也可激发更多美食创意的产生。
同类型网站的分析
美食网站越来越多，这说明了人们对美食的需求也越来越多。本人在设计之前对同类型网站进行了调研。首先对中华美食网进行分析，。

中华美食网首页
中华美食网首页事个页面采用黄色为背景，导航图片简洁明了，色彩简单，网站多以文字加以图片展示，多采用a链接，内容包涵广，加了滚动图片，动感十足。头部的logo简洁大方，在中规中矩的美食网站中，中华美食网的首页布局紧凑且信息量大，图文并茂又不显杂乱。
接着又分析了美食天下网站，。

不同于中华美食网的内容繁多，美食天下网站事个首页内容较少，事个版面更显清晰整洁，背景采用裸粉色，看过去更为清爽。导航利用div+css在大导航下加了子导航，鼠标移上去时会显示不同的文字信息。不过与中华美食网设计相同的是，该网站也是以黄色为导航背景，内容种类多，版面紧凑。
2 文献检索
本次设计是遵循web标准规范，在dreamweaver中利用div+css，并在文本文档中编写JavaScript代码的形式完成事个网站界面的设计。此外网站的色彩搭配方面也需要格外注意，因此分别对css样式编写的规则、div+css布局方式、JavaScript的编写规则和网页色彩搭配方案做了相关检索。
css样式编写规则
css类型中，内联式是指直接在html标签后写样式代码。而嵌入式就是对本文件内所有的该类型的标签名运用这样的样式，但该样式的标签要放在head中。
嵌入式样式表解决了同一个文件内使用同样样式的多个标签的代码重用，当接触到有很多个文件组成的网站，如果这些独立的网页文件要使用统一的风格，就需要使用外部样式表。。在使用时，在引用该样式表的网页文件内的head标签中使用link标签来引入。
css规则由两个主要的部分构成：选择器，以及一条或多条声明。选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。属性（property）是希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
有三种方法可以在站点网页上使用样式表：
① 外部样式：将网页链接到外部样式表。
② 内页样式：在网页上创建嵌入的样式表。
③ 行内样式：应用内嵌样式到各个网页元素。
div+css布局方式
对于网站div+css设计越来越受到业界的关注，从个人网站到企业及门户网站，页面设计人员已经将div+css作为了业界标准。
如果用div+css来构建和美化网站，那么div就是整个网站的骨架，css样式就是网站的衣服。其中的内容，就是血肉。要入手设计一个网站。那么，就要从div的布局开始。
：

设计中网站的骨架图
JavaScript编写规则
。  
JavaScript代码不应该被包含在HTML文件中，除非这是段特定只属于此部分的代码。在HTML中的JavaScript代码会明显增加文件大小，而且也不能对其进行缓存和压缩。<>应尽量放到body的后面。这样可以减少因为载入script而造成其他页面内容载入也被延迟的问题。 缩进的单位为四个空格。 避免每行超过80个字符。在运算符号，最好是逗号后换行。下一行应该缩进8个空格。及时地更新注释也很重要。错误的注释会让程序更加难以阅读和理解。单行注释的符号是“//”， 多行注释以"/*"开始，以"*/"结束。所有的变量必须在使用前进行声明。将var语句放在函数的首部。
网站配色方案
同色系方案是选择彼此相邻的几种颜色构成的配色方案。例如橙色、橙红色以及橙黄色就可以组成一个同色系方案。使用同色系配色方案可以给人非常协调的感觉，因此在网站设计中非常常用。典型的运用方法就是，用一种颜色作为页面背景，而另外一种在颜色环中与其相邻的颜色作为前景色。
互补色方案则是互补色方案的配置。虽然略显繁琐，但是在现在的网站设计中非常流行，因为互补色适合于制作活泼时尚的效果，可以让网站魅力四射。
另外，在photoshop中，要想构造一个三色方案也是非常容易。首先选中一种颜色，记下他的H（Hue）值，然后为这个值加120以此类推得到第三种颜色，构成一个三色方案。 三色方案中使用了三种彼此之间差别明显的颜色，因此页面显得相当不稳定，是一种可以带来比较另类的感觉的配色方案，将给予浏览者某种紧张感，这是因为这三种颜色均对比强烈。
3 设计实践
设计立意
在中国传统文化教育中的阴阳五行哲学思想、儒家伦理道德观念、中医营养养生学说，还有文化艺术成就、饮食审美风尚、民族性格特征诸多因素的影响下，创造出彪炳史册的中国烹饪技艺，形成博大精深的中国饮食文化。越来越多的人喜欢使用互联网查询信息、交流互动。美食需要传承，也需要交流，美食网站是一个交流美食的平台。
由于本人偏爱美食，时常关注美食信息，也因为所处的软件专业，平时对网站设计和HTML编写等方面有一定的熟悉度，借着此次制作毕业作品的机会，为美食设计一个版式新颖的网站，作为此论文的依据。
本次网站的制作主题确定为简洁型。整个网站以图片为主，减少文字。网页主要以黑色为背景，灰色为辅，以达到清新整洁的页面效果。
各页面之间布局力求工整合理，内容表达清晰。
本美食网站的建设，主要针对美食爱好者及各界需要搜集美食信息的网络用户的需求进行设计开发的，因此，将打造一个界面美观友好，布局合理，栏目功能强大，信息详尽的网站。主要实现如下目标： 
① 向外界宣传美食文化和菜肴传统做法；
② 信息尽可能齐全，满足不同用户需求。
创作过程
利用Photoshop制作出网页效果图，再参考另外的一些美食网站，如中华美食网、美食天下等网站定下框架布局，考虑美食网站的logo设计。
网上搜集素材并下载，图片素材分类取名统一保存在images文件夹下，。

图片搜集截图
，。

文字资料截图
创建页面，做好首页及子页的命名，为样式、脚本分类创建文件夹。
结合photoshop软件制作效果图，利用photoshop软件实现某些元素的裁剪及取材。

在美食网站整体版面布局中，需要更多运用css样式、HTML代码和div+css布局使网站清爽简洁。需要达到的要求：
（1）色彩轻快，版面清爽，搭配合理
由于是美食类网站，所以版面不宜生硬死板，不宜过于花哨缭乱，但也要注意整体格局。采用明亮清晰色彩、板块布局工整。主题风格偏向清爽整洁，网页主要以黑色为背景，灰色为辅。文字颜色以白色为主。采用12像素的正文宋体。
（2）版面合理，页面链接无误。
为避免布局过于混乱，各个div之间的位置间距要控制得当，代码的正确应用，HTML与css的简洁书写，使之有更丰富的动画效果，此外也要保证页面间的链接完整。

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

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

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

子页布局不做修改。

界面元素的制作包括网站中用到的所有图片，如导航图、logo图等。把所有图片依次使用photoshop进行修整、取材。背景需要透明的图片保存为*.png格式，其他图片匀保存为*.jpg。
由于本网站导航栏除了几个数字图片外没再放其他图片，所以只需在dreamweaver中布局后加入文字即可。

首先建立站点，站点下新建images、css、js、data四个文件夹，，图片素材的搜集与自己设计处理过的图片都统一放在images文件夹内。另外控制样式的style和slimbox两个文件放入css文件夹内，init、、、，数据库文件放入data文件夹中。
创建首页，初建header、main_wrapper、footer上中下三大版块，其中在header中再插入site_title，输入网站标题，。

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

导航区块中的效果为鼠标移到导航上时，当前鼠标所在的导航项目栏的背景色加深，移开后又恢复。导航区块的代码如下：
<div class="home_box left">
<div class="row1 box box1">
<div class="box_with_padding">
<h2><a href="#about">About</a></h2>
Food is not just a simple taste experience, but also a spirit of enjoyment. </div>
</div>
<div class="row1 box2">
<div class="box_with_padding">
<h2><a href="#services">Chinese Food</a></h2>
The Chinese diet etiquette varies according to the nature and purpose of the feast. </div>
</div>
<div class="row1 box3">
<div class="box_with_padding">
<h2><a href="#testimonial">Western Food</a></h2>
Western-style food is referred to as the western style food, nutrition as the core. </div>
</div>
<div class="row1 box4">
<div class="box_with_padding">
<h2><a href="#contact">Contact</a></h2>
Any opinions or suggestions, please contact us. </div>
</div>
</div>
。

导航效果图
首页界面内容信息部分展示图代码如下：
<div class="row2" id="home_gallery">
<a href="images/gallery/" rel="lightbox[home_gallery]" class="left"><img src="images/gallery/" alt="image 1" /></a>
<a href="images/gallery/" rel="lightbox[home_gallery]" class="left"><img src="images/gallery/" alt="image 2" /></a>
<a href="images/gallery/" rel="lightbox[home_gallery]" class="left"><img src="images/gallery/" alt="image 3" /></a>
<a href="images/gallery/" rel="lightbox[home_gallery]" class="left"><img src="images/gallery/" alt="image 4" /></a>
<a href="images/gallery/" rel="lightbox[home_gallery]" class="left"><img src="images/gallery/" alt="image 5" /></a>
<a href="images/gallery/" rel="lightbox[home_gallery]" class="left"><img src="images/gallery/" alt="image 6" /></a>
<a href="images/gallery/" rel="lightbox[home_gallery]" class="left"><img src="images/gallery/" alt="image 6" /></a>
<a href="images/gallery/" rel="lightbox[home_gallery]" class="left"><img src="images/gallery/" alt="image 6" /></a>
</div>
首页界面展示图放大后，点击“PREV”或图片的左半部分可返回上一张展示图的放大界面，点击“NEXT”或图片的右半部分可进入下一张展示图的放大界面，八张展示图可循环显示，点击图片右下角的“”或图片外的黑色部分可关闭图片放大展示，返回首页界面。。

首页展示图放大效果图

此界面除了header与footer部分沿袭首页，中间的main_wrapper部分主要由两部分构成。首先是此界面的标题部分，使用简单文字书写，字体大小为h1，颜色为白色；然后是此界面的内容信息，内容信息利用div+css分为两个部分，两个部分的布局是一样的，都是由图片和解说文字两部分组成。
图片使用类img_border{ background: #525252; padding: 4px; border: 1px solid #282828 }和类img_fl { float: left; margin: 3px 15px 5px 0 }进行设置，用a链接载入图片。
点击简介界面中的home图片可返回首页界面，点击“Previous”可退回到首页界面，点击“Next”可进入中式美食界面。
。

简介界面

中式美食界面沿用了简介界面的布局，标题文字大小为h1，颜色为白色。不同点是在中式美食界面中，内容信息中的左边部分去掉了图片，加入了超级链接。使用a链接介绍中式美食八大菜系。
图片使用类img_border{ background: #525252; padding: 4px; border: 1px solid #282828 }和类img_nom { display: block; margin-bottom: 15px }进行设置，用a链接载入图片。
点击中式美食界面中的home图片可返回首页界面，点击“Previous”可返回简介界面，点击“Next”可进入相册界面。
。

此界面除了header与footer部分沿袭首页，中间的main_wrapper部分主要由两部分构成。首先是此界面的标题部分，使用简单文字书写，字体大小为h1，颜色为白色；第二部分利用div+css平均划分，各区块都使用a链接载入图片。图片使用类section {position:relative;float:left;width: 800px;height: 480px;margin-right: 20px;background: #3c3b3b;}进行设置。
点击任何一张图片可对图片进行放大展示，查看图片全貌。把图片放大展示后，点击图片中的“PREV”或图片的左半部分可返回上一张图片，点击图片中的“NEXT”或图片的右半部分可进入下一张图片，点击图片右下角的“”或图片外的黑色部分可关闭图片放大展示，返回相册界面。
点击相册界面中的home图片可返回首页界面，点击“Previous”可返回到中式美食界面，点击“Next”可进入西式美食界面。
。

、。

西式美食界面沿用了中式美食界面的布局，标题文字大小为h1，颜色为白色。使用a链接介绍西式美食不同类别的菜式。
图片使用类img_border{ background: #525252; padding: 4px; border: 1px solid #282828 }和类img_nom { display: block; margin-bottom: 15px }进行设置，用a链接载入图片。
点击西式美食界面中的home图片可返回首页界面，点击“Previous”可返回到相册界面，点击“Next”可进入联系我们界面。
。

联系我们界面也是沿用了中式美食界面的布局，标题文字大小为h1，子标题文字大小为h3，颜色均为白色。内容信息部分分为两块，命名为half left和half right。half left部分直接使用文字述字我们的联系方式及地址，此部分中还有可进入到留言板界面的链接，点击蓝色字样“here”便可进入到留言板界面中；half right部分只放了地图，点击地图可进入百度地图界面进行查看搜索。
地图图片使用类img_border{ background: #525252; padding: 4px; border: 1px solid #282828 }和类img_nom { display: block; margin-bottom: 15px }进行设置，用a链接载入图片。
点击联系我们界面中的home图片可返回首页界面，点击“Previous”可返回到西式美食界面，点击“Next”可进入到首页界面。
地图部分的代码如下：
<div class="img_nom img_border">
<a href='' target='_blank'>
<img style="margin:1px" width="320" height="250" src=",&zoom=16 ¢er=浙江经贸职业技术学院" />
</a>
</div>
。

点击地图进入百度地图搜索查询界面。。

制作中遇到的问题和解决方法
（1）图片的保存。
此问题出现在网站导航区块中的图片制作方面，在photoshop中做完图片，直接保存为jpg格式，出来的图片背景是白色的，而需要的图片背景是透明的，后来百度发现，保存的需要是png格式，出来的图片背景才会是透明的。
（2）div浮动。
在相册界面中排版问题困扰了很久，自己想要的效果是四张图片并排排列，但是写完代码后图片总是或斜或竖，后来经过反复多次调整代码发现：把四张图片分为两个部分，再在各个部分中再分为两个子部分，每个部分中的左边部分设置float：left，右边部分设置float：right即可实现。
（3）脚本的逻辑书写。
最难的就是脚本的书写，有些比较难以理解，而且最容易出差错。有些在页面打开时就要加载，需要在body里输代码。
（4）网站色彩搭配。
本人最不擅长的就是色彩搭配，刚开始想得很完美，但做出来的效果图总是怪怪的，多次失败后，索性就减少色彩的使用，最终网站以黑色为主，灰色为辅，文字颜色都为白色。整体效果图出来后，总体感觉清晰明了、简单大气。
（5）路径的设置。
刚开始根本没注意到路径的设置，做完网页后在浏览时发现有些内容总是不对，这才发现那些内容设置成了绝对路径。
4 网站的测试
编码完成后，就要对源程序进行测试。软件测试的目的在于争取在第一时间发现程序中的错误，以便于及时纠错，增加软件可靠性。它在整个系统设计实施过程中占有相当的分量。测试是软件开发时期的最后一个阶段，也是软件质量保证中至关重要的一个环节。
测试的目的是为了尽可能的发现程序中存在的错误，其任务就是消除网站故障，保证程序的可靠运行，最终把一个高质量的网站系统交给用户使用。一般来说在每个模块完成之后就要对它作必要的测试，这种测试被称为单元测试，模块的测试者也就是编写者。编码和单元测试属于网站生命周期的同一阶段。这个阶段结束之后，对网站系统还应该进行各种综合测试，这是网站生命周期的另一个独立的阶段，由专门的测试人员承担。
在网页中的测试阶段主要是对网站进行浏览器兼容性测试。在网页测试的阶段我分别安装了IE8、火狐、搜狗、等浏览器，并且进行了逐个测试。在多次实践中或多或少都遇到了不可调节的DIV浮动问题，但是最后还是在老师的指导和书籍查阅后，嵌入表格完成了页面设计，使页面在各个浏览器中显示正常。

结 论
2014年2月，我开始了我的毕业论文工作，时至今日，论文基本完成。从最初的茫然，到慢慢的进入状态，再到对思路逐渐的清晰，整个写作过程难以用语言来表达。历经了几个月的奋战，紧张而又充实的毕业设计终于落下了帷幕。回想这段日子的经历和感受，我感慨万千，在这次毕业设计的过程中，我拥有了无数难忘的回忆和收获。
3月初，在与指导老师的交流讨论，对美食网站界面设计进一步规划，我便立刻着手资料的收集工作中，当时面对浩瀚的书海真是有些茫然，不知如何下手。在指导老师细心的给我列了提纲，我在图书馆搜集资料，还在网上查找各类相关资料，将这些宝贵的资料全部记在笔记本上，尽量使我的资料完整、精确、数量多，这有利于论文的撰写。然后我将收集到的资料仔细整理分类，及时拿给指导老师进行沟通。
4月初，资料已经查找完毕了，我开始着手毕业设计及论文的写作。开发过程中，遇到了困难，通过查阅资料得到了部分解答。最遗憾的是还是不能独立完成数据库设计方面的技术。在写作过程中遇到困难我就及时和指导老师联系，并和同学互相交流。在大家的帮助下，困难一个一个解决掉，论文也慢慢成型。
4月底，论文的文字叙述已经完成。5月开始进行美食网站界面设计。为了制作出自己满意的网站，我仔细学习了关于网页的配色、DIV+CSS的使用等知识。在设计网页界面的初期，由于没有设计经验，觉得无从下手，空有很多设计思想，却不知道应该选哪个，通过查阅资料，逐渐确立系统方案。当我终于完成了所有打字、绘图、排版、校对的任务后整个人都很累，但同时看着电脑荧屏上的毕业设计稿件我的心里是甜的，我觉得这一切都值了。这次毕业论文的制作过程是我的一次再学习，再提高的过程。在论文中我充分地运用了大学期间所学到的知识。
通过这段时间的毕业设计，学到了、了解到了很多东西，不仅把以前所学的很多知识充分利用上了，还初步了解了HTML强大的数据库开发能力，对HTML的语言进一步的了解，我体会到了网站开发不仅是编程，它需要方方面面的考虑，同时也必须具备比较全面的知识。
我在设计过程中遇到了许多困难，最大的问题就在DIV浮动上，但是在指导老师和同学的帮助下，再加上大量书籍的查阅，最终完成了设计。这不但培养了我细心和耐性，树立了一种科学的态度，还对我们以后的工作和学习有了很大的帮助和指导。同时我也认识到本身不存在很多不足的地方，还需要不断的努力来充实自己完善自己，只有这样我们才能学无止境，以求得更大的发展。
致谢
我在老师的指导和同学的帮助下下圆满的完成了毕业设计，在此我衷心的感谢我的指导老师***老师，在百忙之中抽出时间来对我耐心的指导和帮助，并提出了许多宝贵的意见和建议，我的论文才得以顺利完成。
设计的这段时间里，虽然很辛苦，但使我获益非浅，我体会到自己在学习的知识方面存在很多的欠缺，特别是在DIV浮动和数据库方面。但最终在毕业设计的制作中，还是不断的把知识慢慢加深、巩固。
在论文即将完成之际，我的心情无法平静，从开始进入课题到论文的顺利完成，有多少可敬的师长、同学、朋友给了我无言的帮助，在这里请接受我诚挚的谢意！

参考文献
[1] 王征．JavaScript网页特效实例大全．清华大学出版社，2006年9月第一版.
[2] 锐艺视觉编著．Photoshop CS3 图像合成高级技法[M].北京：中国青年出版社，2008:3-11,29.
[3] 项宇峰等．HTML网络编程从入门到精通．清华大学出版社，2006年.
[4] 张景峰等．HTML程序设计．高等教育出版社，2005年9月.
[5] 刑国春，戴金波，张晓君．基于web网络数据库技术探析[J]．情报科学，.
[6] 赵国志，[M].辽宁：美术出版社，2000．
[7] 郑俊生，+CSS+JavaScript的网页布局特效研究[J].电脑知识与技术，(17).
[8] 史晓燕，苏萍编著．网页设计基础（HTML，CSS和JavaScript）．清华大学
出版社，北京交通大学出版社，2006年10月第一版．