网站设计说明书.doc

DIV+CSS网站建设-精致膳食养身网-毕业设计说明书系 部： 学生姓名: 专业班级： 学 号： 指导教师： 2012年10月15日目录摘要：3一、引言4（一）开发目的4（二）开发技术4（三）开发工具4二、网站内容规划4(一)网站主题4（二）网站内容5三、网站设计5(一）网站形象设计5(二)网站页面设计6四、网站具体制作7（一）DIV结构图7（二）具体模块制作11(三）特效制作17五、网站测试20（一）网站链接测试20（二）页面检查20(三）代码检查20（四)站点文件夹精简20六、总结20致 谢22参考文献22附录23摘要：本论文主要讲述了关于精致膳食养身网的全部内容，包括网站的具体内容，设计思想，制作过程等等。随着人们生活水平的提高,越来越多的人开始关注自己的身体健康,开始关注养生。精致膳食养身网囊括各种养身知识,满足大众对于健康养身的需求。网站采用DIV+CSS方式构建完成，大大缩减页面代码,更好的控制页面布局，结构简明,让人一目了然.网站采用了清新自然的绿色为主色调，颜色明快柔和，界面美观简洁。清新的绿色让浏览者产生视觉上的放松.本网站文本简明、通俗易懂，整体结构清晰、统一。网站资源丰富、层次清楚、内容严谨。网站导航清晰，布局简单却不单调，下面就通过这篇说明书为大家简要的介绍网站的结构、内容、设计思路、色彩使用方案等内容。关键词：DIV+CSS；HTML；膳食养身一、引言（一）开发目的时代的不断发展促进了人们对养生知识的需求。现如今，无论是在网上、报纸杂志上、或是在电视上，各种各样的养身知识层出不穷，让大家无从选择.针对这个问题，我选择制作了精致膳食养生网。精致膳食养身网站融合了多种多样的养生知识，能满足大众对养身的需求，便于人们健康养身。（二）开发技术1. DIV+CSSDIV+CSS大大缩减页面代码，能提高页面浏览速度,缩减带宽成本；结构清晰，容易被搜索引擎搜索到；缩短改版时间.只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点； CSS非常容易编写.你可以像写html代码一样轻松地编写CSS；还能够更好的控制页面布局。 2. JavaScriptJavaScript是一种能让你的网页更加生动活泼的程式语言，也是目前网页中设计中最容易学又最方便的语言.我们可以利用JavaScript轻易的做出亲切的欢迎讯息、漂亮的数字钟、有广告效果的跑马灯及简易的选举，还可以显示浏览器停留的时间。让这些特殊效果提高网页的可观性。 （三）开发工具1. Macromedia Dreamweaver 8 Macromedia Dreamweaver8.0简体中文版是一个可视化的网页设计和网站管理工具，支持最新的Web技术，包含HTML检查、 HTML格式控制、HTML格式化选项、HomeSite/BBEdit捆绑、可视化网页设计、图像编辑、全局查找替换、全FTP功能、处理Flash和 Shockwave等富媒体格式和动态HTML、基于团队的Web创作。2. Adobe Photoshop CS2Adobe Photoshop CS2是电影、视频和多媒体领域的专业人士, 使用 3D 和动画的图形和 Web 设计人员， 以及工程和科学领域的专业人士的理想选择。呈现 3D 图像并将它合并到 2D 复合图像中。轻松编辑视频图层上的动画图形, 让时间停下来。以及使用测量、计数和可视化工具， 探查您的图像。二、网站内容规划（一)网站主题本网站的主题为精致膳食养身网,囊括多种多样养身知识，其主要目的是满足大众对养身知识的需求，增加大家的养身知识。（二）网站内容1。 网站整体结构首页食材营养四季饮食异域美食烹饪食谱水果、蔬菜、鱼鲜春季夏季秋季意大利菜、法国菜、韩国菜烹饪技巧、菜谱、调味品详细介绍详细介绍详细介绍详细介绍图1 网站框架图2.网站基本功能精致膳食养生网可以帮助人们了解更多的关于养生的知识,具体包括首页、食材营养、四季美食、异域美食、烹饪食谱等功能.首页有美食推荐、饮食误区、烹饪食谱、食材营养等网站的最新动态信息。食材营养页面包含了各种关于食材的健康知识，四季美食页面包含了春、夏、秋等季节应该了解的养生美食，异域美食页面则包含了各种外国菜肴的做法，烹饪食谱页面包含了烹饪技巧、菜谱、调味品等内容,以上页面均可随意点击任意标题进入下一级页面了解更详细内容。三、网站设计(一）网站形象设计1. 网站色彩网站采用了清新自然的绿色为主色调,颜色明快柔和，界面美观简洁。清新的绿色让浏览者产生视觉上的放松.同时给人以健康而有生机之感，网页之中图片色彩丰富，橙色等的色彩更能刺激人们的食欲，吸引大众的目光。2.字体设计网站中正文文字均采用宋体1214号字，大标题则采用黑体，具体字体大小根据网站的美观设计制定。3。logo设计(1）设计思想中国膳食博大精深，为在网站中体现这一点,logo的主要字体我选用特殊字体-汉书。以汉书体现标题，显得更有特色.（2）设计步骤将精致膳食养生四字以三角形状堆放，在三角形的中间特别插入一株小草形状的图案作为装饰，贴合主题。（如图2)图2 logo4。导航设计（1）设计思想将导航放置于logo的右边,五个导航并排安置，同时在导航上做了悬停效果，首页上一直有悬停效果展示。(2）设计步骤五个导航并排安置，并除了首页之外,都设置鼠标悬停效果，如首页的效果（图3）及鼠标悬停效果(图4)。图3 导航图4 导航对比图(二）网站页面设计1.首页设计首页设计时，为体现网站优化的思想，将首页划分为四个板块,包括美食推荐、饮食误区、烹饪食谱和食材营养。每个版块都可链接到其相对的子页,排版自然。美食推荐模块中,运用图片转换特效，增添动态效果.（如图5)图5 首页2.子页设计每个子页左侧及右侧的内容是各个模块的快速链接，包括阅读排行榜、饮食误区、友情链接、食材营养等等的内容，可以在浏览这个页面时，能快速链接到自己感兴趣的页面。为以后将网站建设成一个动网,在左上侧安置阅读排行榜这一栏,动网建成之时，栏目能及时更新，以便向大众推荐更好的知识.中间是主要的养生内容，根据模块而改变。(如图6、图7)四、网站具体制作（一）DIV结构图1。首页DIV结构图图6 子页图7 二级子页templatemo_headersite_titletemplatemo_menutemplatemo_content_wrappertemplatemo_contenttemplatmeo_sidebartemplatemo_footer图8 首页DIV框架图8为网站主页的DIV结构图，每个框中文字是每个DIV框架的id，利用这个简单的布局可以体现网站大体的设计布局。（如图8）2。子页DIV结构图图9为网站一级子页的DIV结构图，图中文字为每个DIV的id。templatemo_content_wrapperKuang2Kuang3Kuang1图9 子页DIV框架3.二级子页DIV结构图图10为网站二级子页DIV结构图，图中文字为每个DIV的id。templatemo_content_wrapperKuang2Kuang4图10 二级DIV框架（二)具体模块制作1.首页中具体模块制作图11是首页中的具体模块，在此模块中运用CSS代码给list加上背景图片，使列表更加美观,具体DIV布局及CSS代码如下。（如图11）图11 首页模块HTML代码： 饮食误区/h2 div class=sidebar_section_content ul class=categories_list lia href=yswq_1_1。html”不能和鸡蛋一起吃的食物/li 重新解读“吃啥补啥/li /uldiv id=more”a href=”yswq。html”img src=”images/templatemo_button副本.png width=”50 height=”15” border=0” /a/div CSS代码：templatmeo_sidebar .sidebar_section marginbottom： 30px；#templatmeo_sidebar .sidebar_section_content margin：0 0 0 35px；#templatmeo_sidebar 。categories_list margin: 0;padding： 0;list-style: none；#templatmeo_sidebar 。categories_list li padding: 0;margin： 0;.categories_list li a display: block；color： #201f1c;padding： 5px 0 5px 20px;background-image: url（images/templatemo_list。png)；backgroundrepeat： no-repeat；background-position： left center；。categories_list li a:hover color： 537c11；textdecoration： none;#more float: right；height: 15px;width： 80px；padding-left: 30px；2。子页具体模块制作图12是子页中的典型模块，这个模块中，运用CSS代码设置了下划线，列表的格式以及图片的位置等.具体DIV布局及CSS代码如下（如图12）图12 子页模块HTML代码：div id=”kuang3_1烹饪技巧/div li class=”list/li li class=list/li /div img src=images/27.jpg width=146” height=97 /CSS代码：#kuang3_1 width: 400px；textalign： left;vertical-align： middle；float: left;margin-top： 0px;borderbottomwidth: 1px;borderbottomstyle： solid;borderbottom-color： #999999；fontsize： 18px；fontweight： bold;color: 333333；paddingleft： 10px；padding-top： 20px；paddingbottom： 3px;kuang3_2 fontsize: 14px;color： 000000；float: left；width: 260px;lineheight: 26px；margin-bottom: 10px;margintop: 10px;kuang3_3 height： 94px;width: 146px；float： left；margin-top： 25px；marginbottom： 40px;marginleft： 2px;#kuang2 float: left；width： 290px；margin-right： 10px;border: 1px solid #8ECC11；。listlist-style-position:inside；3.二级子页具体模块制作图13为二级子页中的典型模块,具体DIV及CSS代码如下.（如图13）HTML代码：首页烹饪食谱/a a href=prsp_psjq1。html”正文h2如何煮玉米才能更香甜 /h2/div 2010年9月21号 精致膳食养生网/div div id=”kuang4_2img src=”images/88。jpg width=300” height=”197 / 正文略/p /divCSS代码：kuang4 float： left;width: 580px；marginleft： 20px；font-family： ”黑体”;#kuang4_1 textalign: center；width: 580px；font-family： 黑体；color： 000000;vertical-align: middle;paddingtop: 10px;height： 30px;marginbottom： 10px；margin-top： 10px;#kuang4_4 borderbottomwidth： 2px;border-bottomstyle: solid;borderbottomcolor： #999999；color: 333333;#kuang4_2 float： left;width： 300px;marginright: 140px;marginleft： 140px；margin-top： 10px；kuang4_3 float： left;width： 580px;margin-top： 10px；line-height: 24px；color: 000000;text-indent: 20px；kuang4_4 float: left；width： 580px;kuang4_5 text-align: center;float： left;width： 580px；图13 二级子页模块（三）特效制作首页中美食推荐部分安置了一个特效，来使首页更具动态效果,特效运用了javascript语言，构成图片动态切换及点击切换的效果，能起到宣传推广以及吸引大众眼球的作用。（如图14）图14 特效图片Javascript语言：script type=”text/javascript” src=”tab.js”/scriptSCRIPT src=jquery。min。js type=text/javascript 6 ? 0 ： _c + 1; change（_c）；。img_switch WIDTH:400px;HEIGHT: 300px；overflow:hidden；margintop: 0；margin-right: auto；marginbottom： 0;margin-left： auto；。img_switch_content HEIGHT: 300px;position：relative；width: 400px；float： left；。img_switch_text width: 262px;position: absolute;zindex:5; bottom：5px；left：12px；HEIGHT： 15px； z-index：10000 ！important.number_nav DISPLAY： inline；FLOAT: left;。number_nav UL font：12px Arial， Helvetica， sans-serif；padding: 0px；MARGIN： 0px；LIST-STYLE-TYPE： none；color:#fff;。number_nav UL LI float: left;font-weight： bold；background: #000;float： left;margin-right： 8px;width： 23px;cursor: pointer；line-height： 17px;height： 17px;textalign： center；filter：alpha(opacity=75);-mozopacity:0.75；opacity: 0.75；#pic OVERFLOW: hidden五、网站测试(一)网站链接测试网站完成之后，开始网站的链接测试.从首页开始，测试每一个链接,确保没有一个错误链接,没有一个空链接。（二)页面检查检查每一张页面，在二级子页中，为保证三次点击能到达指定页面，在文章上方加入页面导航条，方便大众浏览网页。(如图15）图15 二级页面导航(三）代码检查检查每一张页面的代码，同时检查外部样式CSS代码,删去不需要的代码,整合类似代码，确保网站中没有多余的代码.给每一个图片加上alt属性，便于搜索引擎搜索到图片文件。(四）站点文件夹精简完成所有网站检查后，开始文件夹的精简,删除没有用到的文字图片等内容。使站点文件夹中不存在不必要的文件。六、总结经过3个月的制作，我总算完成了毕业设计精致膳食养身网.当初毅然决定选择网站设计作为毕业设计，原因是因为大一时期我曾经做过网站,初步了解了制作网站的大致流程。但在跟导师沟通过后，才发现原来这次的网站需要运用DIV+CSS的开发技术，而不是我所熟悉的table布局,从那时就一直很担心，从没听过DIV和CSS的我,能够做出让老师满意的毕业设计吗？暑假来临，在放假之前我已经同老师确定了精致膳食养身这一主题，但我并没有立即开始搜集资料开始网站的制作,因为当时,我甚至还没搞清楚DIV是什么，CSS是什么!趁着放假，我去了书店，买回一本关于DIV+CSS网页布局的书。可是问题又来了，我不能明白书里的内容到底是什么.虽然很想放弃，但是不行,只能继续研究。在这期间,我不止看了买的书，也经常在网上查看一些别人做的网站，当然，也通过QQ向老师提问并获得了解答.功夫不负有心人，我总算能大概了解，如何运用DIV+CSS布局一个完整的网站。终于,在完成了老师要求的开题报告后，我开始了网站资料的搜集.我在网络上找到了一些很棒的关于养身的网站，那些网站的内容都十分全面，给了我很好的借鉴机会，让我补充了很多关于养身的知识。资料收集完毕,就要开始本次毕业设计的重头戏了-网站制作。首先,我先在Photoshop里设计出了我的网站首页，在色彩方面，我选择了清新自然的绿色为主色调,颜色明快柔和，界面美观简洁。清新的绿色也能让浏览者产生视觉上的放松；汉书文字设计出的logo也成功的让我的网页别具一格；导航条加上我所中意的悬停效果，也能使导航具有动态的效果。网站主要内容的设计是让我花了一些时间的，我希望能在首页中凸显我的网站内容，因此，在首页我放置了四个模块,体现了每个子页面最新更新的内容,若以后我将网站设计为动网，首页的内容也可及时更新。设计稿完成后,通过老师的指点修改后，我正式开始了网站的制作。这次我依然使用了Macromedia Dreamweaver 8这个软件,在网页制作上，这个软件还是十分方便的。由于前一段时间的学习，制作网页显得不是那么的困难,很快，我便做好了网站的首页，在IE8浏览器里的效果也没有出现偏差。但我也不敢大意，以前老师说过,网站在不同的浏览器里的效果很有可能出现偏差,让我们一定注意，因此我也下载了360等其他几个浏览器,浏览之后的结果出现偏差了！在ie6里首页上的两个图片之间出现了问题.刚遇到这一类型的问题我也不知道怎么解决,只能向老师请教.经过老师的指点，说是要将图片的CSS属性设置为imgdisplay:block;，加上这个属性后再去浏览网页，果然，问题解决了。之后的子页制作过程中,我依然遇到了许许多多的小问题，但在网上搜寻答案及询问老师后,都能得到答案，终于在十月中旬完成了网站的设计.制作了精致膳食养身网给了我很大的收获，不仅学习了很多关于网页的专业知识，也再次认识到学习的重要性及团结协作的重要性，因为在网站制作过程中，不仅仅是老师，同学也给予了我很大的帮助。在此，郑重感谢老师以及同学们。这次的网站制作，也将是我难忘的经历。致 谢 在本次论文设计过程中，芮文艳老师对该毕业设计从选题,构思到最后定稿的各个环节给予细心指引与教导，使我得以最终完成毕业论文设计。这三年中我还得到众多老师及同学的关心支持和帮助.在此,谨向老师们和同学们致以衷心的感谢和崇高的敬意！最后，我要向百忙之中抽时间对本文进行审阅，评议和参与本人论文答辩的各位老师表示感谢.参考文献1 杨选辉。网页设计与制作教程M.北京清华大学出版社.2008。082 杨艳.网页设计与制作.清华大学出版社。2011.073 赵苗苗。网页设计与实战技术 清华大学出版社。2011.044 袁磊。 网页设计与制作实例教程. 清华大学出版社.2008.105 田明.网页设计与制作.人民邮电出版社。2009.086 张磊。 网页设计与制作:DreamweaverCS3.大连理工大学出版社,2010.117 鲁波. Web站点架设与网页设计。清华大学出版社。2010。098 姚奇富，陈伟 网页制作.高等教育出版社。2010.049 江文。 基于工作过程的网站建设与网页制作。中南大学出版社。2011.0810 梁芳。网页设计与制作(第2版）。清华大学出版社.2011.07附录首页完整代码：htmlheadmeta http-equiv=”ContentType” content=text/html； charset=utf-8 /title精致膳食养生网/titlemeta name=description” content=”Greeny Template - Download free website templates from ” /script language=javascript” type=”text/javascript”function clearText（field) if （field。defaultValue = field。value） field.value = ; else if (field。value = ) field.value = field。defaultValue;！-。STYLE1 color： #000000.STYLE2 color: FFFFFF。STYLE4 font-size： 14;color: 000000;script type=text/javascript src=tab。js”SCRIPT src=”jquery.min.js type=text/javascript var _c = _h = 0;（document).ready（function () (#play li）。click(function（） var i = （this).attr(alt） 1； clearInterval(_h)； _c = i； /play（); change（i）; ） (”pic img).hover(function(）clearInterval(_h）, function(）play（)）; play（）;）function play（） _h = setInterval（auto（)”， 8000)；function change(i) (play li）。css（backgroundcolor,000000）。eq（i）.css(backgroundcolor，FF3000）。blur(); （#pic img).fadeOut（slow)。eq(i)。fadeIn(slow)；function auto（) _c = _c 6 ? 0 : _c + 1; change(_c);/SCRIPT div id=”site_title” h1 /h1 /div lia href=index.html” class=current首 页/a lia href=sjys.html” target=”_parent四季饮食/li lia href=”yyms。html target=”_parent”异域美食/a lia href=”prsp.html”烹饪食谱/a/li /ul /div /div /div ！- end of templatemo_header - ！- end of templatemo_header_wrapper -div id=”templatemo_content_wrapper”div id=templatemo_content” div class=content_section” 美食推荐/h2 img src=images/16.jpg” /img src=images/18.jpg / DIV class=”img_switch_text DIV class=number_nav UL id=play” LI alt=”1” style=”background：f00；1 LI alt=22/LI 3 LI alt=4”4 /UL /DIV /DIV div id=kuang5 img src=”images/lk1.jpg” width=”180 / div class=product_box imgimg src=”images/03.jpg /div