收藏

下载资源 加入VIP,免费下载

第1页 / 共27页

第2页 / 共27页

第3页 / 共27页

第4页 / 共27页

第5页 / 共27页

CSS代码：

#templatmeo_sidebar.sidebar_section{

margin-bottom:

30px;

}

#templatmeo_sidebar.sidebar_section_content{

margin:

00035px;

}

#templatmeo_sidebar.categories_list{

margin:

0;

padding:

0;

list-style:

none;

}

#templatmeo_sidebar.categories_listli{

padding:

0;

margin:

0;

}

.categories_listlia{

display:

block;

color:

#201f1c;

padding:

5px05px20px;

background-image:

url（images/templatemo_list.png）;

background-repeat:

no-repeat;

background-position:

leftcenter;

}

.categories_listlia:

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:

1pxsolid#8ECC11;

.list{

list-style-position:

inside;

}

3.二级子页具体模块制作

图13为二级子页中的典型模块，具体DIV及CSS代码如下。

（如图13）

HTML代码：

首页〉烹饪食谱〉正文

如何煮玉米才能更香甜

2010年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（）{

$（'#playli'）.click（function（）{

vari=$（this）.attr（'alt'）-1;

clearInterval（_h）;

_c=i;

//play（）;

change（i）;

}）

$（"#picimg"）.hover（function（）{clearInterval（_h）},function（）{play（）}）;

play（）;

}）

functionplay（）

{

_h=setInterval（"auto（）",8000）;

}

functionchange（i）

{

$（'#playli'）.css（'background-color','#000000'）.eq（i）.css（'background-color','#FF3000'）.blur（）;

$（"#picimg"）.fadeOut（'slow'）.eq（i）.fadeIn（'slow'）;

}

functionauto（）

{

_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_navUL{font:

12pxArial,Helvetica,sans-serif;padding:

0px;MARGIN:

0px;LIST-STYLE-TYPE:

none;color:

#fff;}

.number_navULLI{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也成功的让我的网页别具一格；导航条加上我所中意的悬停效果，也能使导航具有动态的效果。

网站主要内容的设计是让我花了一些时间的，我希望能在首页中凸显我的网站内容，因此，在首页我放置了四个模块，体现了每个子页面最新更新的内容，若以后我将网站设计为动网，首页的内容也可及时更新。

设计稿完成后，通过老师的指点修改后，我正式开始了网站的制作。

这次我依然使用了MacromediaDreamweaver8这个软件，在网页制作上，这个软件还是十分方便的。

由于前一段时间的学习，制作网页显得不是那么的困难，很快，我便做好了网站的首页，在IE8浏览器里的效果也没有出现偏差。

但我也不敢大意，以前老师说过，网站在不同的浏览器里的效果很有可能出现偏差，让我们一定注意，因此我也下载了360等其他几个浏览器，浏览之后的结果——出现偏差了！

在ie6里首页上的两个图片之间出现了问题。

刚遇到这一类型的问题我也不知道怎么解决，只能向老师请教。

经过老师的指点，说是要将图片的CSS属性设置为img{display:

block;}，加上这个属性后再去浏览网页，果然，问题解决了。

之后的子页制作过程中，我依然遇到了许许多多的小问题，但在网上搜寻答案及询问老师后，都能得到答案，终于在十月中旬完成了网站的设计。

制作了精致膳食养身网给了我很大的收获，不仅学习了很多关于网页的专业知识，也再次认识到学习的重要性及团结协作的重要性，因为在网站制作过程中，不仅仅是老师，同学也给予了我很大的帮助。

在此，郑重感谢老师以及同学们。

这次的网站制作，也将是我难忘的经历。

致谢

在本次论文设计过程中，芮文艳老师对该毕业设计从选题，构思到最后定稿的各个环节给予细心指引与教导,使我得以最终完成毕业论文设计。

这三年中我还得到众多老师及同学的关心支持和帮助。

在此，谨向老师们和同学们致以衷心的感谢和崇高的敬意！

最后，我要向百忙之中抽时间对本文进行审阅，评议和参与本人论文答辩的各位老师表示感谢。

参考文献

[1]杨选辉.网页设计与制作教程[M].北京清华大学出版社.2008.08

[2]杨艳.网页设计与制作.清华大学出版社.2011.07

[