网站设计项目说明指导书.doc

DIV+CSS网站建设精巧膳食养身网毕业设计说明书系 部： 学生姓名： 专业班级： 学 号： 指导老师： 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结构图，图汉字字为每个DIVid。templatemo_content_wrapperKuang2Kuang3Kuang1图9 子页DIV框架3.二级子页DIV结构图图10为网站二级子页DIV结构图，图汉字字为每个DIVid。templatemo_content_wrapperKuang2Kuang4图10 二级DIV框架（二）具体模块制作1.首页中具体模块制作图11是首页中具体模块，在此模块中利用CSS代码给list加上背景图片，使列表愈加美观，具体DIV布局及CSS代码以下。（图11）图11 首页模块HTML代码： 饮食误区 不能和鸡蛋一起吃食物 重新解读“吃啥补啥” CSS代码：#templatmeo_sidebar .sidebar_section margin-bottom: 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);background-repeat: no-repeat;background-position: left center;.categories_list li a:hover color: #537c11;text-decoration: none;#more float: right;height: 15px;width: 80px;padding-left: 30px;2.子页具体模块制作图12是子页中经典模块，这个模块中，利用CSS代码设置了下划线，列表格式和图片位置等。具体DIV布局及CSS代码以下（图12）图12 子页模块HTML代码：烹饪技巧更多 怎样煮玉米才能更香甜 她人轮蹲奥运 我们做意大利面 CSS代码：#kuang3_1 width: 400px;text-align: left;vertical-align: middle;float: left;margin-top: 0px;border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: #999999;font-size: 18px;font-weight: bold;color: #333333;padding-left: 10px;padding-top: 20px;padding-bottom: 3px;#kuang3_2 font-size: 14px;color: #000000;float: left;width: 260px;line-height: 26px;margin-bottom: 10px;margin-top: 10px;#kuang3_3 height: 94px;width: 146px;float: left;margin-top: 25px;margin-bottom: 40px;margin-left: 2px;#kuang2 float: left;width: 290px;margin-right: 10px;border: 1px solid #8ECC11;.listlist-style-position:inside;3.二级子页具体模块制作图13为二级子页中经典模块，具体DIV及CSS代码以下。（图13）HTML代码： 首页烹饪食谱 正文怎样煮玉米才能更香甜 9月21号 精巧膳食养生网 正文略 CSS代码：#kuang4 float: left;width: 580px;margin-left: 20px;font-family: 黑体;#kuang4_1 text-align: center;width: 580px;font-family: 黑体;color: #000000;vertical-align: middle;padding-top: 10px;height: 30px;margin-bottom: 10px;margin-top: 10px;#kuang4_4 border-bottom-width: 2px;border-bottom-style: solid;border-bottom-color: #999999;color: #333333;#kuang4_2 float: left;width: 300px;margin-right: 140px;margin-left: 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语言： 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(background-color,#000000).eq(i).css(background-color,#FF3000).blur(); $(#pic img).fadeOut(slow).eq(i).fadeIn(slow);function auto() _c = _c 6 ? 0 : _c + 1; change(_c);.img_switch WIDTH:400px;HEIGHT: 300px;overflow:hidden;margin-top: 0;margin-right: auto;margin-bottom: 0;margin-left: auto;.img_switch_content HEIGHT: 300px;position:relative;width: 400px;float: left;.img_switch_text width: 262px;position: absolute;z-index: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;text-align: center;filter:alpha(opacity=75);-moz-opacity: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.北京清华大学出版社.082 杨艳.网页设计和制作.清华大学出版社.073 赵苗苗.网页设计和实战技术 清华大学出版社.044 袁磊. 网页设计和制作实例教程. 清华大学出版社.105 田明.网页设计和制作.人民邮电出版社.086 张磊. 网页设计和制作:DreamweaverCS3.大连理工大学出版社,.117 鲁波. Web站点架设和网页设计.清华大学出版社.098 姚奇富，陈伟 网页制作.高等教育出版社.049 江文. 基于工作过程网站建设和网页制作.中南大学出版社.0810 梁芳.网页设计和制作（第2版）.清华大学出版社.07附录首页完整代码：精巧膳食养生网function clearText(field) if (field.defaultValue = field.value) field.value = ; else if (field.value = ) field.value = field.defaultValue; 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(background-color,#000000).eq(i).css(background-color,#FF3000).blur(); $(#pic img).fadeOut(slow).eq(i).fadeIn(slow);function auto() _c = _c 6 ? 0 : _c + 1; change(_c);.img_switch WIDTH:400px;HEIGHT: 300px;overflow:hidden;margin-top: 0;margin-right: auto;margin-bottom: 0;margin-left: auto;.img_switch_content HEIGHT: 300px;position:relative;width: 400px;float: left;.img_switch_text width: 262px;position: absolute;z-index: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;text-align: center;filter:alpha(opacity=75);-moz-opacity:0.75;opacity: 0.75;#pic OVERFLOW: hidden 首 页 食材营养 四季饮食 异域美食 烹饪食谱 美食推荐 1 2 3 4 div id=kuan