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

②信息尽可能齐全，满足不同用户需求。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首页内容效果图导航区块中的效果为鼠标移到导航上时，当前鼠标所在的导航项目栏的背景色加深，移开后又恢复。导航区块的代码如下：<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>导航区块具体效果图如图3.8所示。图3.8导航效果图首页界面内容信息部分展示图代码如下：<divclass="row2"id="home_gallery"><ahref="images/gallery/01-l.jpg"rel="lightbox[home_gallery]"class="left"><imgsrc="images/gallery/01.jpg"alt="image1"/></a><ahref="images/gallery/02-l.jpg"rel="lightbox[home_gallery]"class="left"><imgsrc="images/gallery/02.jpg"alt="image2"/></a><ahref="images/gallery/03-l.jpg"rel="lightbox[home_gallery]"class="left"><imgsrc="images/gallery/03.jpg"alt="image3"/></a><ahref="images/gallery/04-l.jpg"rel="lightbox[home_gallery]"class="left"><imgsrc="images/gallery/04.jpg"alt="image4"/></a><ahref="images/gallery/05-l.jpg"rel="lightbox[home_gallery]"class="left"><imgsrc="images/gallery/05.jpg"alt="image5"/></a><ahref="images/gallery/06-l.jpg"rel="lightbox[home_gallery]"class="left"><imgsrc="images/gallery/06.jpg"alt="image6"/></a><ahref="images/gallery/07-l.jpg"rel="lightbox[home_gallery]"class="left"><imgsrc="images/gallery/07.jpg"alt="image6"/></a><ahref="images/gallery/08-l.jpg"rel="lightbox[home_gallery]"class="left"><imgsrc="images/gallery/08.jpg"alt="image6"/></a></div>首页界面展示图放大后，点击“PREV”或图片的左半部分可返回上一张展示图的放大界面，点击“NEXT”或图片的右半部分可进入下一张展示图的放大界面，八张展示图可循环显示，点击图片右下角的“”或图片外的黑色部分可关闭图片放大展示，返回首页界面。首页界面展示图放大后的效果图如图3.9所示。图3.9首页展示图放大效果图3.2.5简介界面的制作过程此界面除了header与footer部分沿袭首页，中间的main_wrapper部分主要由两部分构成。首先是此界面的标题部分，使用简单文字书写，字体大小为h1，颜色为白色；然后是此界面的内容信息，内容信息利用div+css分为两个部分，两个部分的布局是一样的，都是由图片和解说文字两部分组成。图片使用类img_border{background:#525252;padding:4px;border:1pxsolid#282828}和类img_fl{float:left;margin:3px15px5px0}进行设置，用a链接载入图片。点击简介界面中的home图片可返回首页界面，点击“Previous”可退回到首页界面，点击“Next”可进入中式美食界面。简介界面的效果图如图3.10所示。图3.10简介界面3.2.6中式美食界面的制作过程中式美食界面沿用了简介界面的布局，标题文字大小为h1，颜色为白色。不同点是在中式美食界面中，内容信息中的左边部分去掉了图片，加入了超级链接。使用a链接介绍中式美食八大菜系。图片使用类img_border{background:#525252;padding:4px;border:1pxsolid#282828}和类img_nom{display:block;margin-bottom:15px}进行设置，用a链接载入图片。点击中式美食界面中的home图片可返回首页界面，点击“Previous”可返回简介界面，点击“Next”可进入相册界面。中式美食界面的效果图如图3.11所示。图3.11中式美食界面3.2.7相册界面的制作过程此界面除了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”可进入西式美食界面。相册界面的效果图如图3.12所示。图3.12相册界面相册界面图片放大后的效果图如图3.13、图3.14所示。图3.13图片放大展示图3.14图片放大展示3.2.8西式美食界面的制作过程西式美食界面沿用了中式美食界面的布局，标题文字大小为h1，颜色为白色。使用a链接介绍西式美食不同类别的菜式。图片使用类img_border{background:#525252;padding:4px;border:1pxsolid#282828}和类img_nom{display:block;margin-bottom:15px}进行设置，用a链接载入图片。点击西式美食界面中的home图片可返回首页界面，点击“Previous”可返回到相册界面，点击“Next”可进入联系我们界面。西式美食界面的效果图如图3.15所示。图3.15西式美食界面3.2.9联系我们界面的制作过程联系我们界面也是沿用了中式美食界面的布局，标题文字大小为h1，子标题文字大小为h3，颜色均为白色。内容信息部分分为两块，命名为halfleft和halfright。halfleft部分直接使用文字述字我们的联系方式及地址，此部分中还有可进入到留言板界面的链接，点击蓝色字样“here”便可进入到留言板界面中；halfright部分只放了地图，点击地图可进入百度地图界面进行查看搜索。地图图片使用类img_border{background:#525252;padding:4px;border:1pxsolid#282828}和类img_nom{display:block;margin-bottom:15px}进行设置，用a链接载入图片。点击联系我们界面中的home图片可返回首页界面，点击“Previous”可返回到西式美食界面，点击“Next”可进入到首页界面。地图部分的代码如下：<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>联系我们界面的效果图如图3.16所示。图3.16联系我们界面点击地图进入百度地图搜索查询界面。百度地图界面如图3.17所示。图3.17百度地图界面3.3制作中遇到的问题和解决方法（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的