网站设计说明书.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+CSS
DIV+CSS大大缩减页面代码，能提高页面浏览速度,缩减带宽成本；结构清晰，容易被搜索引擎搜索到；缩短改版时间.只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点； CSS非常容易编写.你可以像写html代码一样轻松地编写CSS；还能够更好的控制页面布局。
2. JavaScript
JavaScript是一种能让你的网页更加生动活泼的程式语言，也是目前网页中设计中最容易学又最方便的语言.我们可以利用JavaScript轻易的做出亲切的欢迎讯息、漂亮的数字钟、有广告效果的跑马灯及简易的选举，还可以显示浏览器停留的时间。让这些特殊效果提高网页的可观性。
（三）开发工具
1. Macromedia Dreamweaver 8
Macromedia Dreamweaver8.0简体中文版是一个可视化的网页设计和网站管理工具，支持最新的Web技术，包含HTML检查、 HTML格式控制、HTML格式化选项、HomeSite/BBEdit捆绑、可视化网页设计、图像编辑、全局查找替换、全FTP功能、处理Flash和 Shockwave等富媒体格式和动态HTML、基于团队的Web创作。
2. Adobe Photoshop CS2
Adobe Photoshop CS2是电影、视频和多媒体领域的专业人士, 使用 3D 和动画的图形和 Web 设计人员， 以及工程和科学领域的专业人士的理想选择。呈现 3D 图像并将它合并到 2D 复合图像中。轻松编辑视频图层上的动画图形, 让时间停下来。以及使用测量、计数和可视化工具， 探查您的图像。
二、网站内容规划
（一)网站主题
本网站的主题为精致膳食养身网,囊括多种多样养身知识，其主要目的是满足大众对养身知识的需求，增加大家的养身知识。
（二）网站内容
1。 网站整体结构
首页
食材营养
四季饮食
异域美食
烹饪食谱
水果、蔬菜、鱼鲜

春季夏季秋季
意大利菜、法国菜、韩国菜
烹饪技巧、菜谱、调味品
详细介绍
详细介绍
详细介绍
详细介绍

图1 网站框架图
2.网站基本功能
精致膳食养生网可以帮助人们了解更多的关于养生的知识,具体包括首页、食材营养、四季美食、异域美食、烹饪食谱等功能.首页有美食推荐、饮食误区、烹饪食谱、食材营养等网站的最新动态信息。食材营养页面包含了各种关于食材的健康知识，四季美食页面包含了春、夏、秋等季节应该了解的养生美食，异域美食页面则包含了各种外国菜肴的做法，烹饪食谱页面包含了烹饪技巧、菜谱、调味品等内容,以上页面均可随意点击任意标题进入下一级页面了解更详细内容。
三、网站设计
(一）网站形象设计
1. 网站色彩
网站采用了清新自然的绿色为主色调,颜色明快柔和，界面美观简洁。清新的绿色让浏览者产生视觉上的放松.同时给人以健康而有生机之感，网页之中图片色彩丰富，橙色等的色彩更能刺激人们的食欲，吸引大众的目光。
2.字体设计
网站中正文文字均采用宋体12—14号字，大标题则采用黑体，具体字体大小根据网站的美观设计制定。
3。logo设计
(1）设计思想
中国膳食博大精深，为在网站中体现这一点,logo的主要字体我选用特殊字体-—汉书。以汉书体现标题，显得更有特色.
（2）设计步骤
将精致膳食养生四字以三角形状堆放，在三角形的中间特别插入一株小草形状的图案作为装饰，贴合主题。（如图2)
图2 logo
4。导航设计
（1）设计思想
将导航放置于logo的右边,五个导航并排安置，同时在导航上做了悬停效果，首页上一直有悬停效果展示。
(2）设计步骤
五个导航并排安置，并除了首页之外,都设置鼠标悬停效果，如首页的效果（图3）及鼠标悬停效果(图4)。
图3 导航
图4 导航对比图
(二）网站页面设计
1.首页设计
首页设计时，为体现网站优化的思想，将首页划分为四个板块,包括美食推荐、饮食误区、烹饪食谱和食材营养。每个版块都可链接到其相对的子页,排版自然。美食推荐模块中,运用图片转换特效，增添动态效果.（如图5)
图5 首页
2.子页设计
每个子页左侧及右侧的内容是各个模块的快速链接，包括阅读排行榜、饮食误区、友情链接、食材营养等等的内容，可以在浏览这个页面时，能快速链接到自己感兴趣的页面。为以后将网站建设成一个动网,在左上侧安置阅读排行榜这一栏,动网建成之时，栏目能及时更新，以便向大众推荐更好的知识.中间是主要的养生内容，根据模块而改变。(如图6、图7)
四、网站具体制作
（一）DIV结构图
1。首页DIV结构图
图6 子页
图7 二级子页

templatemo_header
site_title
templatemo_menu
templatemo_content_wrapper
templatemo_content
templatmeo_sidebar
templatemo_footer

图8 首页DIV框架
图8为网站主页的DIV结构图，每个框中文字是每个DIV框架的id，利用这个简单的布局可以体现网站大体的设计布局。（如图8）
2。子页DIV结构图
图9为网站一级子页的DIV结构图，图中文字为每个DIV的id。
templatemo_content_wrapper
Kuang2
Kuang3
Kuang1

图9 子页DIV框架
3.二级子页DIV结构图
图10为网站二级子页DIV结构图，图中文字为每个DIV的id。
templatemo_content_wrapper
Kuang2
Kuang4

图10 二级DIV框架
（二)具体模块制作
1.首页中具体模块制作
图11是首页中的具体模块，在此模块中运用CSS代码给list加上背景图片，使列表更加美观,具体DIV布局及CSS代码如下。（如图11）
图11 首页模块
HTML代码：
<div class="sidebar_section"〉
〈h2>饮食误区〈/h2>
〈div class="sidebar_section_content"〉
〈ul class="categories_list"〉
〈li>〈a href="yswq_1_1。html”〉不能和鸡蛋一起吃的食物</a></li〉
······
<li><a href="yswq_2_4.html">重新解读“吃啥补啥"</a>〈/li>
〈/ul>
〈div id="more”>〈a href=”yswq。html”〉〈img src=”images/templatemo_button副本.png" width=”50" height=”15” border="0” /〉〈/a></div〉
</div>
</div>
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代码：
<div id=”kuang3_1"〉烹饪技巧
<div id=”kuang2_”〉更多 >〉〈/div>
</div>
<div id=”kuang3_2">
〈li class=”list"〉<a href="prsp_psjq1.html"〉如何煮玉米才能更香甜〈/a></li〉
·······
<li class="list"〉<a href="prsp_psjq6。html"〉别人轮蹲奥运 我们做意大利面〈/a>〈/li〉
</div〉
<div id="kuang3_3"><img src="images/27.jpg" width="146” height="97" /〉</div>
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；
。list{
list-style-position:inside；
}
3.二级子页具体模块制作
图13为二级子页中的典型模块,具体DIV及CSS代码如下.（如图13）
HTML代码：
<div id=”kuang4"〉
〈div id="kuang4_4”〉〈a href=”index.html">首页</a>〉<a href="prsp。html”>烹饪食谱</a〉 〉<a href="prsp_psjq1。html”〉正文</a〉〈/div〉
〈div id="kuang4_1”>
〈h2〉如何煮玉米才能更香甜 </h2〉
〈/div〉
<div id="kuang4_5”>2010年9月21号 精致膳食养生网〈/div〉
<div id=”kuang4_2"〉<img src=”images/88。jpg" width="300” height=”197" /〉</div>
<div id="kuang4_3">
<p>正文略〈/p〉
</div>
</div〉
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语言：
<script type=”text/javascript” src=”tab.js”〉</script〉
〈SCRIPT src="jquery。min。js" type=text/javascript〉</SCRIPT>
<SCRIPT 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(’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）；
}
</SCRIPT>
<style type=”text/css">
。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}
</style>
五、网站测试
(一)网站链接测试
网站完成之后，开始网站的链接测试.从首页开始，测试每一个链接,确保没有一个错误链接,没有一个空链接。
（二)页面检查
检查每一张页面，在二级子页中，为保证三次点击能到达指定页面，在文章上方加入页面导航条，方便大众浏览网页。(如图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属性设置为img｛display:block;}，加上这个属性后再去浏览网页，果然，问题解决了。之后的子页制作过程中,我依然遇到了许许多多的小问题，但在网上搜寻答案及询问老师后,都能得到答案，终于在十月中旬完成了网站的设计.
制作了精致膳食养身网给了我很大的收获，不仅学习了很多关于网页的专业知识，也再次认识到学习的重要性及团结协作的重要性，因为在网站制作过程中，不仅仅是老师，同学也给予了我很大的帮助。在此，郑重感谢老师以及同学们。这次的网站制作，也将是我难忘的经历。
致 谢
在本次论文设计过程中，芮文艳老师对该毕业设计从选题,构思到最后定稿的各个环节给予细心指引与教导，使我得以最终完成毕业论文设计。这三年中我还得到众多老师及同学的关心支持和帮助.在此,谨向老师们和同学们致以衷心的感谢和崇高的敬意！
最后，我要向百忙之中抽时间对本文进行审阅，评议和参与本人论文答辩的各位老师表示感谢.
参考文献
［1] 杨选辉。网页设计与制作教程[M］.北京清华大学出版社.2008。08
[2］ 杨艳.网页设计与制作.清华大学出版社。2011.07
［3] 赵苗苗。网页设计与实战技术 清华大学出版社。2011.04
[4] 袁磊。 网页设计与制作实例教程. 清华大学出版社.2008.10
[5］ 田明.网页设计与制作.人民邮电出版社。2009.08
[6] 张磊。 网页设计与制作:DreamweaverCS3.大连理工大学出版社,2010.11
[7] 鲁波. Web站点架设与网页设计。清华大学出版社。2010。09
［8］ 姚奇富，陈伟 网页制作.高等教育出版社。2010.04
［9] 江文。 基于工作过程的网站建设与网页制作。中南大学出版社。2011.08
［10] 梁芳。网页设计与制作(第2版）。清华大学出版社.2011.07
附录
首页完整代码：
〈html>
〈head>
〈meta http-equiv=”Content—Type” content="text/html； charset=utf-8" /〉
<title〉精致膳食养生网〈/title〉
<meta name=”keywords" content=”Greeny Template， free website templates, CSS， HTML” />
〈meta name="description” content=”Greeny Template - Download free website templates from ” /〉
<link href="templatemo_style。css" rel="stylesheet" type=”text/css" />
<script language="javascript” type=”text/javascript”〉
function clearText（field)
{
if （field。defaultValue == field。value） field.value = '’;
else if (field。value == ’’) field.value = field。defaultValue;
}
</script>
<style type=”text/css">
〈！-—
。STYLE1 ｛color： #000000｝
.STYLE2 ｛color: ＃FFFFFF｝
。STYLE4 { font-size： 14;
color: ＃000000;
｝
——>
</style>
</head>
<script type="text/javascript" src="tab。js”〉</script>
<SCRIPT src=”jquery.min.js" type=text/javascript〉</SCRIPT〉
〈SCRIPT 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（’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);
}
〈/SCRIPT>
<style type=”text/css”〉
.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｝
〈/style〉
〈body〉
〈div id=”templatemo_header_wrapper"〉
〈div id="templatemo_header">
〈div id=”site_title”〉
〈h1〉
<img src=”images/logo副本。png" alt="CSS Templates”/>
〈/h1>
〈/div>
<div id=”templatemo_menu”>
<ul>
〈li>〈a href="index.html” class="current"〉首 页〈/a〉</li〉
〈li〉〈a href="scyy.html" target=”_parent"〉食材营养〈/a></li>
〈li〉〈a href="sjys.html” target=”_parent">四季饮食</a>〈/li〉
〈li>〈a href=”yyms。html" target=”_parent”>异域美食〈/a〉</li>
〈li〉〈a href=”prsp.html”〉烹饪食谱〈/a>〈/li〉
〈/ul>
〈/div〉 <!—— end of templatemo_menu -->
<div class="cleaner">〈/div>
〈/div〉 〈！—- end of templatemo_header -->
</div>
〈！—- end of templatemo_header_wrapper -—〉
〈div id=”templatemo_content_wrapper”〉
〈div id="templatemo_content”>
<div class="content_section”〉
<h2〉〈img src="images/biaozhi.jpg"> 美食推荐〈/h2〉
<DIV class="img_switch_content" id="pic"〉 〈img src=”images/15.jpg” />〈img src="images/16.jpg” /><img src=”images/17。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>
〈LI alt="2">2</LI〉
<LI alt="3”>3</LI>
<LI alt="4”〉4</LI>
〈/UL>
</DIV>
〈/DIV〉
〈/DIV>
〈div id="kuang5"〉
<div id="kuang5_1”><img src=”images/lk1.jpg” width=”180" /〉</div> 〈div class="product_box img"〉〈img src=”images/03.jpg" /〉</div〉