网页规划

使用dreamweaver cs5 软件，设计制作个人网站首页并完成报告。

作品要求：

1、站点名称为“学号+姓名”。站点用到的所有图片素材要放在名为“images”的文件夹中；首页名称为“index.html或index.htm”；css样式要存放在独立的样式表文件中，名称为“style.css”。

2、网页必须使用Css+div进行布局。

3、网页内容要求必须包含文字、图片、友情链接、版权信息，其他内容也可以根据自己的需要进行添加。

4、网页中要有使用ul+css设计的导航。

5、网页内容不可过少，网页颜色搭配要协调美观，布局合理清楚。

6、每位同学要独立完成，不能出现重复。如有雷同，两人都按“0分”计算。

一、先在桌面建立一个文件夹为“学号+姓名”。在文件夹中要简洁明了，在这个文件夹中建立一个images的文件夹和Education.css文件最后由一个Education.html去运行。

在images中放入所需要的图片（图片有点多，无法全部列出）

1、先打出这个网站所需要的框架，分为哪几部分构成，才能充分的知道自己所需要的（做模板先必须以一种浅色为模块，通常颜色为：#EEEEEE，也就是灰色）

2、现在我们开始制作这个网站：先建立一个ID：wrap（包括）在Education.css中设定.{ padding: 0px; margin: 0px } .wrap{width: 960px; margin: 0 auto; background: #FFFFFF;margin-top: 10px;}这在游览器中显示的是一个以白色为背景，宽为960像素，整体居中，上外边框为10像素；建立div 中的ID为header

#harder{height:100px;background:url(images/bg.jpg);}高为100像素，背景图片，在这个div内部在建立一个div用来放图片，这里所说的图片是指

图

1-1

和图片并排的是导航栏也就如图这个样子，是如何实现的呢？其实很简单

图1-2

在div中建立一个关于文字的ID命名header_font后在Education.css在设定#img{

background:url(images/logo.png);width:308px;height:96px;float:left;}

#harder_font{float:right;margin-right:20px;margin-top:30px;}做完这一步呢？就如图1-3所示。

图1-3

在设定header_nav的导航栏，用项目选择列表设定，HTML文档中

然后去Education.css中设定

#harder_nav{height:42px;background:#EAEAEA;margin-top:10px;}

#nav{height:42px; background:url(images/nav_bg.jpg) repeat-x left top;}

#nav li{float:left;margin-top:15px;margin-left:28px;}

#nav li a{font-weight:bold;color:#FFFFFF;font-size:15px;}

#nav li a:hover{color:#FFCC00;}

显示图片为图1-4

图1-4

为了体现网站的美感添加了一张图片header_img

#harder_img{height:260px;background:url(images/banner.jpg) no-repeat;margin-top:10px;}

图1-5

现在开始做主体div ID header_top 分为两个部分，一是这面的活动区，二是时间区

#harder_top{height:50px;margin-top:10px;border:1px solid #0099FF;}

#harder_top li{float:left;margin-top:15px;margin-left:15px;}

#harder_top li a{color:#000000;font-size:12px;}

#harder_top li a:hover{color:#FFCC00;cursor:auto;}

#date{float:right;width:230px;padding:5px;line-height:20px;}

如图1-6所示其中边框是border:1px solid #0099FF;

1像素、实线、颜色.

图1-6

之后建立一个中间的wrap包装#wrap_body{height:920px;margin-top:10px;}

在这个div中分为三个部分：

#left{width:270PX;height:920px;float:left;}

#middle{width:483PX;height:920px;float:left;margin-left:10px;}

#right{width:187px;height:920px;float:left;margin-left:10px;}

图2-1

所示的是我们将要编写的部分

看到图片了吗？

上面是个图片

#left_img{background:url(images/ad01.jpg) no-repeat;width:270px;height:230px;}

.left_title{margin-top:10px;height:30px;

background:url(images/nav_bg.jpg) repeat-x left top;}

.left_title p{padding-top:5px;text-align:center;color:#FFFFFF;

font-weight:bold;}

.left_body{height:180px;margin-top:5px;border:1px solid #0099FF;}

.left_bodya{font-size:small;color:#00009C;float:left;width:160px;margin-left:10px;line-height:20px;}

.left_body p{float:right;font-size:small;}

这就完成了

图2-2

中间的部分

图2-3

.middle_body{height:130px;border:2px solid #0099FF;}

.middle_body

a{font-size:small;color:#00009C;float:left;width:300px;margin-left:10px;

line-height:20px;margin-top:5px;}

.middle_body p{float:right;font-size:small;}

.middle_body1

img{width:100px;height:100px;margin-top:10px;margin-left:10px;float:left;}

.middle_body1{height:220px;border:2px solid #0099FF;}

.middle_body1

a{font-size:small;color:#00009C;float:left;width:300px;margin-left:10px;

line-height:20px;margin-top:5px;}

.middle_body1 p{float:right;font-size:small;}

.middle_body1 h5{float:right;margin-top:10px;width:330px;}

.middle_body2{height:100px;border:1px solid #0099FF;}

.middle_body2

a{font-size:small;color:#00009C;float:left;width:300px;margin-left:10px;

line-height:20px;margin-top:5px;}

.middle_body2 p{float:right;font-size:small;}

#middle_wrad{height:120px;}

#middle_wrad

img{width:100px;height:100px;margin-top:10px;margin-left:16px;float:left;}

图2-4

图片的右边

#right img{margin-top:5px;margin-left:5px;}

#right_body{border:1px solid #0099FF;}

.right_img{background:url(images/icon02.jpg);width:78px;height:27px;margin-top:14px;

margin-left:10px;float:left;}

.right_img p{margin-top:5px;margin-left:12px;color:#000;font-size:small;}

.right_img a{text-decoration:none;color:#000;}

.right_img a:hover{color:#FFCC00;}

最后就是firend和footer

Firend中的其实就是学生的一些作品

及images向左浮动

#firder{height:200px;border-top: 2px solid #00a2e9;}

#firder

img{width:120px;height:120px;margin-top:10px;margin-left:16px;float:left;}

图3-1

图

3-2

#footer{height:50px;border-top: 2px solid #00a2e9;}

#footer p{text-align:center;}

图3-3

看整体的效果图：

图4-1

图

4-