网站设计项目说明指导书.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+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结构图，图汉字字为每个DIVid。
templatemo_content_wrapper
Kuang2
Kuang3
Kuang1

图9 子页DIV框架
3.二级子页DIV结构图
图10为网站二级子页DIV结构图，图汉字字为每个DIVid。
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">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].北京清华大学出版社..08
[2] 杨艳.网页设计和制作.清华大学出版社..07
[3] 赵苗苗.网页设计和实战技术 清华大学出版社..04
[4] 袁磊. 网页设计和制作实例教程. 清华大学出版社..10
[5] 田明.网页设计和制作.人民邮电出版社..08
[6] 张磊. 网页设计和制作:DreamweaverCS3.大连理工大学出版社,.11
[7] 鲁波. Web站点架设和网页设计.清华大学出版社..09
[8] 姚奇富，陈伟 网页制作.高等教育出版社..04
[9] 江文. 基于工作过程网站建设和网页制作.中南大学出版社..08
[10] 梁芳.网页设计和制作（第2版）.清华大学出版社..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>
</div>
<div id="kuan