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

②信息尽可能齐全，满足不同用户需求。4.2网站的总体设计借助由代码语言编程所实现的各种交互式效果，增加了网页界面的生动性和复杂性。一般来说，网页的界面主要由下面几个因素构成：=1\*GB3①文字：文字元素是信息传达的主体部分。网页中的文字主要包括标题、信息、文字链接几种主要形式。标题和传统媒体中信息传达的基本作用相同，是内容的简概说明一般比较醒目、优先编排。文字作为占据页面重要比率的元素，同时又是信息重要载体，它的字体、大小、颜色和排布对页面整体设计影响极大。我所使用的文字是宋体12号，因为这样看得比较清楚，使整个页面整洁，网页中都普遍的使用，所以在此我选择12号宋体作为网页的主体文字样式。=2\*GB3②图形：图形在网页界面中具有重要作用。合理的运用图形，可以生动直观、形象地表现设计主题。网页中常用的图形格式包括jpg和gif，这两种格式压缩比高，得到了规范浏览器的支持，下载速度快，具有跨平台的特性，不需要浏览器安装插件即可直接阅览。图形元素包括标题、背景、主图、链接图标四种。本文所使用的图片主要是自己收集的比较精美。网站图片素材如图4.1所示。图4.1图片素材=3\*GB3③页面版式：版式是网页界面设计的重要组成部分，它将文字、图形等视觉元素进行组合配置，使页面整体视觉效果美观和谐，简单大方，便于阅读，实现信息传达的最佳效果。页面版式如图4.2-4.3所示。图4.2页面版式图4.3页面版式=4\*GB3④色彩：彩色网页比单色网页更具吸引力；色彩本身具有象征作用。4.3整体风格设计4.3.1页面属性设计页面中的整体格式和布局都在stley.css中，其中body设计如下:body{ margin:0; padding:0; color:#e2e2e2; font-size:12px; line-height:1.6em; font-family:"LucidaSansUnicode","LucidaGrande",sans-serif; background-color:#313030; background-image:url(../images/templatemo_body.jpg); background-position:centertop; background-repeat:no-repeat}页面的字体为：宋体、大小为12像素，字体颜色#e2e2e2。背景颜色我采用#313030，#313030这种背景色它与其他任何颜色的搭配都比较合适，不显花哨，简洁大方。背景图片用url设置，背景图像的起始位置为页面顶部中间，效果是重复背景图。4.3.2色彩搭配打开一个网站，给用户留下第一印象的既不是网站丰富的内容，也不是网站合理的版面布局，而是网站的色彩。色彩对人的视觉效果非常明显，一个网站设计成功与否，在某种程度上取决于设计者对色彩的运用和搭配。因为网页设计属于一种平面效果设计，在排除立体图形、动画效果之外，在平面图上，色彩的冲击力是最强的，它很容易给用户留下深刻的印象。因此，在设计网页时，必须要高度重视色彩的搭配。本网站的主打色为黑色。黑色是一种很大器的颜色，几乎能与所有的颜色相辅相成。采用这种色彩搭配给游客留下深刻的印象。4.3.3链接效果对于一个页面不仅要设计其字体和其他风格，还要有链接效果，使页面更加的生动，style.css中的链接效果如下：a,a:link,a:visited{color:#FFFFFF;font-weight:normal;text-decoration:none}#site_titlea{font-size:28px;color:#fff;font-weight:700}pa,pa:link,pa:visited{color:#00CCFF;font-weight:normal;text-decoration:none}pa:hover{color:#CC66FF;text-decoration:none;}citea,citea:link,citea:visited{font-size:12px;text-decoration:none;font-style:normal}#gallerylia{ display:block;}#galleryliaimg{}页面的链接效果设置：未访问的链接样式和已经访问过的链接样式字体颜色为#FFFFFF，字体的粗细为中等，文字修饰为无；当鼠标放到链接上的时候，样式字体颜色颜色为#CC66FF，文字修饰为无。网页header部分的效果设置：字体大小为28像素，颜色为#FFFFFF字体的粗细为中等。页面中的文字链接效果设置：未访问的链接样式和已经访问过的链接样式字体颜色为#00CCFF，字体的粗细为中等，文字修饰为无；当鼠标放到链接上的时候，样式字体颜色颜色为#CC66FF，文字修饰为无。引用链接的字号为12像素，文字修饰为无，字体样式为默认值。图片展示界面用的是display控件，表示的是显示模式。bolck表示此元素将显示为块级元素，此元素前后会带有换行符。4.3.4导航设计网站的导航栏目可以让用户对网站的内容及信息一目了然。导航分为：首页、简介、中式美食、西式美食、联系我们。网站采用DIV布局，加上a链接制作而成。相关代码如下：<divclass="home_boxleft"><divclass="row1boxbox1"><divclass="box_with_padding"><h2><ahref="#about">About</a></h2>Foodisnotjustasimpletasteexperience,butalsoaspiritofenjoyment.</div></div><divclass="row1box2"><divclass="box_with_padding"><h2><ahref="#services">ChineseFood</a></h2>TheChinesedietetiquettevariesaccordingtothenatureandpurposeofthefeast.</div></div><divclass="row1box3"><divclass="box_with_padding"><h2><ahref="#testimonial">WesternFood</a></h2>Western-stylefoodisreferredtoasthewesternstylefood,nutritionasthecore. </div></div><divclass="row1box4"><divclass="box_with_padding"><h2><ahref="#contact">Contact</a></h2>Anyopinionsorsuggestions,pleasecontactus. </div></div></div>4.3.5细节设计9PX凹陷细线和有阴影的背景图片的组合设计给网页带来了分成次的美观、图片的选择给人醒目、大方的感觉、按钮的设计给顾客赏心悦目的感觉。4.4首页设计4.4.1DIV分布和概述由于个人网站给人的形象应该是专业、大方，所以主页的设计和布局我采用大方简单又不失活泼的原则。首页整体用1个大的DIV里面包含两个小的（上下个一个）DIV。DIV设置效果为：总体都设置了宽度，居中格式，背景颜色及背景图片，其他还有内边距，高等。所有页面分为logo信息、内容信息、版权信息三个部分。内容界面是一个网站走向成功道路上必不可少的因素。网站的内容代表着一个好网站的素质和形象，所以应该表现的大气、端庄而且精细。还更要表现出一个网站应该有的朝气和活力。因此我首先选中色彩搭配比较大方，整体布局比较清晰简洁的内容模式。在首页的版面，先是用Photoshop对网站模板进行切片，然后用DIV+CSS进行排版。首先自然映入颜面的是logo设计，我用最简单的文字和线条展示logo；网站首页内容分两部分，左边是网站导航部分，每个标题下面都有一句话介绍本标题；右边放了图片，美食图片吸引浏览者的眼球；网站底部信息也只用了简单的文字展示，界面效果如图4.4所示。图4.4页面效果根据因为浏览者在阅读时候经常采用从上到下，从左到右的习惯，主体内容中，我将“导航”放一边，“logo”放在了上面的位置加以简短的宣传文字完美搭配这样能更好地吸引浏览者的眼球。底部不仅能够展示网站的各种优点，而且突出显示出网站整体结尾的完美。导航效果如图4.5所示。图4.5导航效果4.4.2搜索关键字与描述为了有利于搜索引擎的收录，在首页专门设置了mate信息，设置相关关键字和描述。相关代码如下：<metaname="keywords"content="techlayer,freetemplate,onepagelayout"/><metaname="description"content="TechLayerisfreeonetemplatelayoutbyusingcolorfulnavigationsanddarkgraybackground."/>4.5其他界面设计其他界面设计整体风格跟主页布局风格一致，就只是内容布局格式不一样，更加直观、简洁明了，在任何其他界面中点击home图片都可回到首页界面。4.5.1简介界面的设计制作过程在简介界面中，点击“Previous”可退回到首页界面，点击“Next”可进入到中式美食界面。利用DIV+CSS把简介界面中的内容信息部分分为左右两个部分，命名为halfleft和halfright，每个部分中都采用了图片加文字对本网站的信息进行介绍。图片是先从网上找来，再用Photoshop对图片进行修改处理，然后用a链接形式放入界面中。点击图片可进行相册界面。简介界面如图4.6所示。图4.6简介界面4.5.2中式美食界面的设计制作过程在中式美食界面中，点击“Previous”可退回到简介界面，点击“Next”可进入到相册界面。利用DIV+CSS把中式美食界面中的内容信息部分分为左右两个部分，命名为halfleft和halfright。halfleft部分直接使用文字对中式美食进行描述，此部分中还有中式美食八大菜系的分类链接，点击“浙菜系”、“粤菜系”、“川菜系”、“湘菜系”、“闽菜系”、“鲁菜系”、“苏菜系”、“徽菜系”等字样即出现相关菜系中各种菜的制作方法；halfright部分采用了图片加文字对中式美食及中餐文化进行介绍。图片是先从网上找来，再用Photoshop对图片进行修改处理，然后用a链接形式放入界面中。点击图片可进行相册界面。中式美食界面如图4.7所示。图4.7中式美食界面4.5.3相册界面的设计制作过程在相册界面中，点击“Previous”可退回到中式美食界面，点击“Next”可进入到西式美食界面。利用DIV+CSS把相册界面中的内容信息部分分为多个大小相同的部分，每个部分中用a链接形式放入图片。图片是先从网上找来，再用Photoshop对图片进行修改处理，然后放入界面中。相册界面如图4.8所示。图4.8相册界面点击任何一张图片可对图片进行放大展示，查看图片全貌。把图片放大展示后，点击图片中的“PREV”或图片的左半部分可返回上一张图片，点击图片中的“NEXT”或图片的右半部分可进入下一张图片，点击图片右下角的“”或图片外的黑色部分可关闭图片放大展示，返回相册界面。图片放大展示效果如图4.9-4.10所示。图4.9图片放大展示图4.10图片放大展示4.5.4西式美食界面的设计制作过程在西式美食界面中，点击“Previous”可退回到相册界面，点击“Next”可进入到联系我们界面。利用DIV+CSS把西式美食界面中的内容信息部分分为左右两个部分，命名为halfleft和halfright。halfleft部分直接使用文字对中式美食进行描述，此部分中还有对西式美食的分类的链接，点击“开胃头盘”、“营养主菜”、“方便轻食”、“各类茶饮”、“其他”等字样即出现相关分类中各种菜的制作方法；halfright部分采用了图片加文字对西式美食及西餐文化进行介绍。图片是先从网上找来，再用Photoshop对图片进行修改处理，然后用a链接形式放入界面中。点击图片可进行相册界面。西式美食界面如图4.11所示。图4.11西式美食界面4.5.5联系我们界面的设计制作过程在联系我们界面中，点击“Previous”可退回到西式美食界面，点击“Next”可返回到首页界面。利用DIV+CSS把联系我们界面中的内容信息部分分为左右两个部分，命名为halfleft和halfright。halfleft部分直接使用文字述字我们的联系方式及地址；halfright部分只放了地图，点击地图可进入百度地图界面进行查看搜索。下面是地图部分的代码：<divclass="img_nomimg_border"><ahref='/geocoder?address=浙江经贸职业技术学院&output=html'target='_blank'><imgstyle="margin:1px"width="320"height="250"src="/staticimage?width=320&height=250¢er=120.388937,30.323013&zoom=16¢er=浙江经贸职业技术学院"/></a></div>联系我们界面如图4.12所示。图4.12联系我们界面百度地图界面如图4.13所示。图4.13百度地图界面结论时至今日，论文基本完成。从最初的茫然，到慢慢的进入状态，再到对思路逐渐的清晰，整个写作过程难以用语言来表达。历经了几个月的奋战，紧张而又充实的毕业设计终于落下了帷幕。回想这段日子的经历和感受，我感慨万千，在这次毕业设计的过程中，我拥有了无数难忘的回忆和收获。在与指导老师的交流讨论，对美食网站界面设计进一步规划，我便立刻着手资料的收集工作中，当时面对浩瀚的书海真是有些茫然，不知如何下手。在指导老师细心的给我列了提纲，我在图书馆搜集资料，还在网上查找各类相关资料，将这些宝贵的资料全部记在笔记本上，尽量使我的资料完整、精确、数量多，这有利于论文的撰写。然后我将收集到的资料仔细整理分类，及时拿给指导老师进行沟通。资料查找完毕后，我开始着手毕业设计及论文的写作。开发过程中，遇到了困难，通过查阅资料得到了部分解答。在写作过程中遇到困难我就及时和指导老师联系，并和同学互相交流。在大家的帮助下，困难一个一个解决掉，论文也慢慢成型。论文的文字叙述已经完成。开始进行美食网站界面设计。为了制作出自己满意的网站，我仔细学习了关于网页的配色、DIV+CSS的使用等知识。在设计网页界面的初期，由于没有设计经验，觉得无从下手，空有很多设计思想，却不知道应该选哪个，通过查阅资料，逐渐确立系统方案。当我终于完成了所有打字、绘图、排版、校对的任务后整个人都很累，但同时看着电脑荧屏上的毕业设计稿件我的心里是甜的，我觉得这一切都值了。这次毕业论文的制作过程是我的一次再学习，再提高的过程。在论文中我充分地运用了大学期间所学到的知识。通过这段时间的毕业设计，学到了、了解到了很多东西，不仅把以前所学的很多知识充分利用上了，还初步了解了HTML强大的数据库开发能力，对HTML的语言进一步的了解，我体会到了网站开发不仅是编程，它需要方方面面的考虑，同时也必须具备比较全面的知识。我在设计过程中遇到了许多困难，最大的问题就在DIV浮动上，但是在指导老师和同学的帮助下，再加上大量书籍的查阅，最终