收藏

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

第1页 / 共9页

第2页 / 共9页

第3页 / 共9页

第4页 / 共9页

第5页 / 共9页

4.5对板块进行定义

4.5.1对整个页面的长度、宽度、内外边距、边框、字体、字体大小和背景图片进行定义。

把内外边距和边框设置为零，字体设置为“Arial,Helvetica,sans-serif”，设置三个字体用来保证在浏览器缺少第一种字体时，会自动转换为后一种字体。

把字体设置为12个像素，把行高设置为1.5间距，把宽度设为布满整个网页，把可否显示设置为此元素作为块级表格来显示，表格前后带有换行符，把背景设为以小图重复铺满全屏。

CSS代码如下：

body{margin:

0;padding:

0;font-family:

Arial,Helvetica,sans-serif;font-size:

12px;line-height:

1.5em;color:

#fff;width:

100%;display:

table;background:

url（images/templatemo_bg.jpg）repeat-x#666;}4.5.2对各个div进行定义。

A.匾额

我们先确定匾所占的图区的宽度和高度，并在用CSS代码进行设置。

我们先设置宽度为百分之百，高度为78像素，内外边距设置为0。

背景图设为重复铺满，向左浮动。

Html代码如下：

CSS代码如下：

#templatemo_menu_panel{width:

100%;height:

78px;margin:

0auto;background:

url（images/templatemo_menu_bg.jpg）repeat-x;float:

left;}效果如图：

B隔区

在匾额与下面的主部分之间，我们应设置一段距离，这样画面才不会显得那样别扭。

同样我们也采用div的css定义来实现这个设想。

这里我们将高度设置为默认，宽度设为400像素，上边距设为70像素，左边距设为36像素，浮动设为左浮动，内连对象设为默认。

Html代码如下：

好累好泪的微博

myhomepage

#templatemo_logo_section{width:

400px;height:

auto;margin-top:

70px;margin-left:

36px;float:

left;display:

inline;}

效果如图：

C嵌入子表格

我们通过设置左右表格，对整个主表格进行划分，再在子表格再进行嵌套子子表格，这样就把表格划分成为了左边三块子子表格，右边三块子子表格，然后在子子表格里面设置为上下两个子子表格，在上子表格加入导航条，在下子表格用于书写内容。

由于，表格所用的Css左右写法都一样，所以就左右各解释一条代码。

首先，左边第一个子子表格，我们通过设置表格的宽度、高度、背景、浮动、元素的上内边距，元素的左内边距、颜色、字形大小来定义。

我们将其宽度设置为499像素，高度设为35像素，背景设为链入背景图片，浮动设置为右浮动，元素的上内边距设置为18像素，元素的左内边距设置为20像素，字形大小设置为17像素。

Html代码如下：

我的最爱名言CSS代码如下：

.templatemo_post_top_right{width:

499px;background:

url（images/templatemo_post_top_right.jpg）no-repeat;height:

35px;float:

right;padding-top:

18px;padding-left:

20px;color:

#fff;font-size:

17px;}效果如图：

右边图片区设置

首先把右边图片也进行Css版面定义，用DIV进行陈列，先设置其宽度和背景，然后再分为四个图片区。

同样，我们也在HTML中设置链接导航条。

图片区设置元素上外边距为20像素，元素的左外边距为22像素，边界设置为0.

HTML代码如下：

我的照片

CSS代码如下：

.templatemo_section_middleimg{

margin-top:

20px;

margin-left:

22px;

border:

none;

}

templatemo_section_middle{width:

320px;background:

#001724;}

效果如图：

D版权申明

版权申明这是每个网页不可或缺的一部分,类似一个国家宣誓主权一样。

在这里，我们还是使用层来实现。

HTML代码如下：

版权申明：

好累好累个性网页CSS代码如下：

#templatemo_footer{width:

100%;height:

28px;background:

url（images/templatemo_footer_bg.jpg）repeat-x;text-align:

center;padding-top:

15px;color:

#fff;}

4.6通过上面的设计工作，我们已经完成了网页的基本设置。

这时我们还要做最后的工作，那就是网页调试。

调试完后，假如没有问题了，那就叫最终完工。

我们这个网页经过调试，没有发现问题，在整理了各项文件后，整个网页的效果截图如下：

5.网页制作总结

通过制作网页我充分的认识了实践的重要性，他比老师授课所让我们体会到的更加重要，任何知识必须在实践中才能体会其真正的用法和含义，所以这次制作网页让我收获颇大，对我的网页制作具有很强的实践性。

湖南商学院北津学院课程设计评审表

姓名

王成武

系部

信息学院

专业班级

信管1022班

题目：

个人网站设计与开发

评

审

意

见

评审项目

成绩

立题或选题（10分）

获取信息能力（10分）

方案的新颖性（10分）

方案的综合性（20分）

方案的内容（40分）

文档的格式（10分）

总评100%

成绩

指导教师职称

讲师

签名

评审时间：

2011年月日