布局静态网站设计报告

武 汉科技大 学城市学 院课程设计报告

学 部 信息工程学部

课程名称 电子商务系统分析与设计专 业 08级电子商务01班

学 号 200810178140

姓 名 刘琴

指导老师 王玲

2011年05月02日

一、 网站简介. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1

1.1网站介绍. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1

1.2制作工具. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2

1.3站点介绍. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3

1.4文件夹摆放简介. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3

二、 布局简介. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4

2.1首页布局. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4

2.2个人中心布局工具. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4

2.3朋友布局. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5

2.4作品布局. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5

2.5学校布局. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5

2.6相册布局. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .6

三、 代码简介. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .6

四、 网站内容介绍. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .8

五、 制作心得. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11

六、 参考文献. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12

1

CSS网站布局简介

一、 网站简介

1.1网站介绍

我的网站是介绍自己的个人网站总共15个页面其中导航上有6个链接包括首页、个人中心、朋友、作品、学校、相册。

首页部分介绍了自己的一些简单的资料其中有一份电子杂志是平时的时候为了留作纪念做的很想与老师和同学们分享。

个人中心关于自己的一些详细的信息以及在大学的一些变化里面有两个子网页通过图片链接进入包括我的家乡和我的专业我的家乡是介绍荆州和荆州公安的一些信息而专业就是介绍的电子商务方面的一些信息。

朋友包括三个子网页介绍我的三个好朋友李梦雪、陈丽婷和何立芝好朋友有很多只是因为时间原因没有多余的时间做更多的页面去介绍在后期的完善过程会一一加上因为网站做好不仅仅是因为它是作业、是考试还是自己在大学的知识的积累和美好的回忆。

作品运用SPAY放置了自己的五篇随便平时很喜欢写随便一段时间不写就觉得少了写什么。当然还包括自己喜欢的一些作家很喜欢张小娴喜欢她的文字很真实 因此也用了一个页面专门介绍张小娴。

学校这一部分我仅仅介绍了大学和高中因为资源有限没有一些关于小学和初中的照片也就没办法详细介绍。相册这页是花了最多心思去做的一个页面其中的一个“鼠标经过图片移动”是在平时自学CSS的时候学到的知识因为对制造网站有很大的兴趣所以在平时有时间的时候会在网上下载一些视频和资料用来自学。

相册包含两个子网页分别是班级相册和家人相册。在下面的介绍中会仔细介绍。

1.2制作工具

2

1.3站点介绍

1.4文件夹摆放简介

在文件夹200810178140刘琴里面分为6个子文件夹命名如下图所示为了让读者更快捷的进入我的网站我将inde x页放在了外面。

3

二、布局简介

我的网站包括15个页面八种布局最主要的运用上下、左右布局再细分。

2.1首页布局首页布局采用的是左右结构其中左分为上、 中、下三部分分别添加下拉式、图片链接、 日期三部分。右边是简单的背景加文字组成。大致布局如图1.1

2.2个人中心布局个人中心主要是上下结构其中上部分包括左中右下部分包括四块分别以左上、左下、右上、右下命名这样的布局在感觉上很复杂其实很简单 比如下部分的四个块状它的代码是共同的。大致布局如图2.1

图2.1

4

2.3朋友布局朋友部分的布局很简单简单的上下结构简单的利用图片的固定位置来构造成上部分的左右结构。在我的家乡页面简介中也是运用的相同布

2.4作品布局作品部分运用的是上下结构其中下部分分为左右两块如下图

4.1

2 5学校简介学校部分的布局和三个朋友简介页面的布局是采用的相同布局都是运用的上下结构其中上部分包括左右这种布局与上面的作品布局很像其大致结构如下图5.1

5

图5.1

2.6相册布局相册布局采用的是左右结构再对左部分划分划分为上中下三部分对右部分划分为上下结构。这样的布局在是视觉上可能较为凌乱但是只要运用较为搭配的色彩就不会有这种感觉。布局简图如6.1所示

另外的两种布局较为简单 即对center部分进行划分划分为三到四部分。上6图即为我的网站大致布局模式。为了能在不同的浏览器中显示的效果比较统

一在布局的时候所以的布局都采用了上中下三部分的模式其中在对center部分加以扩展这样的布局使所以的内容伴随着header 、 center、 footer一起移动这样一来就能达到预期的效果。

书本上介绍的布局模式包括肯多像一列宽度居中、两列固定宽度、三列自适应、高度自适应等这些布局模式在网站中都有用到。

三、代码简介

为了使源代码看起来更简洁在制作的过程中更清晰我的DIV和CSS是分离的每一个页面对应一个CSS相同的布局则直接进行链接就可以达到效果这样的方式不仅省时还很清晰。在平时的网页制作过程中我也会将CSS部分分离。

这里简单的介绍上面介绍的6种布局的代码 由于DIV部分主要是文字及图片这里就不重点介绍。

下面是首页部分的一小段代码

<title>首页</title>

<link href="css/css 1.css"rel="stylesheet" type="text/css" />

6

</head>

<body><div id="header">

<img src="image/wenzi3.png"/><ul id="nav">

<li><a href="page/index.html"><b>首页</b></a></li>

<li><a href="page/gerenzhongxin.html"><b>个人中心</b></a></li>

<li><a href="page/pengyou.html"><b>朋友</b></a></li>

<li><a href="page/zuoping.html"><b>作品</b></a></li>

<li><a href="page/daxue.html"><b>学校</b></a></li>

<li><a href="page/xiangce.html"><b>相册</b></a></li></ul>

</di v>

在后面的网页制作中根据不同的需要设置不同的id再在C S S中更改为自己需要的效果。

再来看看相册中 鼠标经过滑动的效果 DIV部分的代码是如何布局的。

<ul class="hg">

<li><a href="http://user.qzone.qq.com/260706661/infocenter"target="_blank"><img src=". ./image/left.png"alt="" /><span class="title">笑笑的空间</span><spanclass="addres s">http://user.qzone.qq.com/260706661/infocenter</span></a></li>

<li class="bottom"><a href="http://user.qzone.qq.com/729952764/infocenter"target="_blank"><img src=". ./image/b.png"alt="" /><span class="title">立芝的空间</span><spanclass="addres s">http://user.qzone.qq.com/729952764/</span></a></li>

<li class="left"><a href="http://user.qzone.qq.com/252488836/infocenter"target="_blank"><img src=". ./image/d.png""/><span clas s="title">哥哥的空间</span><span class="addres s">http://user.qzone.qq.com/252488836</span></a></li>

<li><a href="http://user.qzone.qq.com/736253131/infocenter"target="_blank"><img src=". ./image/g.png"alt="" /><span class="title">雪的空间</span><span class="addres s">http://user.qzone.qq.com/736253131</span></a></li>

<li><a href="http://user.qzone.qq.com/644748246/infocenter"target="_blank"><img src=". ./image/c.png"alt="" /><span class="title">徒弟的空间</span><span class="addres s">http://user.qzone.qq.com/644748246/

</span></a></li>

<li><a href="http://user.qzone.qq.com/136650253/infocenter"target="_blank"><img src=". ./image/j.png"alt="" /><span class="title">丽婷的空间</span><span class="addres s">http://user.qzone.qq.com/136650253</span></a></li></ul>

下面是C S S值得设置这里只有一个hg这一个id 因此代码部分虽然长却很清晰一目了然。

.hg{width:610p x;overflow:hidden;

7

}

.hg li {background:white;padding:8px;border:1px solid black;flo at:le ft;margin:10px 13px 00;

}

.hg li a{width:250p x;height:161px;display:block;po sition:relative;overflow:hidden;

}

.hg li img{position:absolute;left:0;top:0;width:251 px;

}

.hg li span{display:block;padding:5px 10px;text-align:center;

}

.hg li span.title {font:bold 18px"Times New Roman",Times, serif;color:#06F;padding-top:50px;

}

.hg li span.address {font:12px"Palatino Linotype", "Book Antiqua",Palatino, serif;c o lor:b lue;

}

*html .hg li{disp lay:inline;

}

*html .hg{height:1%;

}

这里就简单介绍这两段代码在充分了解到CSS与DIV分离的好处之后在制作网页的时候我都会选择分离。这样不仅方便链接而且方便更改在不满意某一部分的布局的时候可以直接打开CSS文件直接更改保存后文

8