附：

css.css

body {

margin:

 0px;

padding:

 0px;

}

div#header {

clear:

 both;

height:

 50px;

background-color:

 aqua;

padding:

 1px;

}

div#left {

float:

 left;

width:

 150px;

background-color:

 red;

}

div#right {

float:

 right;

width:

 150px;

background-color:

 green;

}

div#middle {

padding:

 0px 160px 5px 160px;

margin:

 0px;

background-color:

 silver;

}

div#footer {

clear:

 both;

background-color:

 yellow;

}

说明：

HTML 代码中各部分出现的顺序是非常重要的。

左栏和右栏 div 必须在中栏之前出现。

这样才可

以让这两个边栏浮动到它们的位置上（屏幕两侧），并让中栏的内容将“流”入它们之间的空间。

如果浏览

器在一个或者两个边栏 div 之前先发现中栏，那么中栏将占据屏幕的一侧或者两侧，这样浮动的部分就会

跑到中栏的下面而不是中栏的旁边了。

div#header 和 div#footer 样式（style）中的 clear:

both 申明用来确保这浮动部分不会占据标

题和页脚的空间。

div#header 样式中的 padding:

1px 申明用来消除页头背景色中的异常边，如果

padding 设置为零，那么在 Netscape 浏览器中就会看到这个异常。

div#left 样式中的 float:

left 申明是用来把左栏挤压到左侧。

width:

150px 申明用来设置栏的固定

宽度，不过你也可以把它的宽度设置为其它具体值。

类似的，div#right 样式中的 float:

right 申明用来

把右栏 div 挤压到右侧。

在本例中，float 把左栏和右栏完全挤压到浏览器窗口的左边缘和右边缘。

然而，

如果这些 div 被其它 div 包含，那么 float 将会把它们挤压到包含它们的 div 的边缘。

在 div#middle 样式中，clear 申明允许中栏的内容“流淌”在两个边栏之间。

padding:

0px 160px

5px 160px 申明设置了到左栏和右栏的填充，这样允许 150 象素宽度的栏 div，在加上 10 象素的间距。

这个例子非常粗糙和简单，但是它很好的演示了用浮动 div 来创建三栏液态布局的边栏这一基本技术

（附：

使用DIV+CSS布局网站的优点和缺陷

随着WEB2.0标准化设计理念的普及，国内很多大型门户网站已经纷纷采用IV+CSS制作方法，奋斗网络也

成为了CSS网页布局技术学习的先锋站点，从实际应用情况来看，此种方法绝对好于表格制作页面的方法。

　　如今大部分网站仍然采用表格嵌套内容的方式来制作网站，虽然此方法对于我们来说比较熟悉、比较

上手；但是，它却阻碍了一种更好的、更有亲和力的、更灵活的，而且功能更强大的网站设计方法——

DIV+CSS。

　　CSS网页布局的意义体现在如下方面：

　　一、使页面载入得更快

　　由于将大部分页面代码写在了CSS当中，使得页面体积容量变得更小。

相对于表格嵌套的方式，

DIV+CSS将页面独立成更多的区域，在打开页面的时候，逐层加载。

而不像表格嵌套那样将整个页面圈在

一个大表格里，使得加载速度很慢。

　　二、降低流量费用

　　页面体积变小，浏览速度变快，这就使得对于某些控制主机流量的网站来说是最大的优势了。

　　三、修改设计时更有效率

　　由于使用了DIV+CSS制作方法，在修改页面的时候更加容易省时。

根据区域内容标记，到CSS里找到

相应的ID，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式。

　　四、保持视觉的一致性

　　DIV+CSS最重要的优势之一：

保持视觉的一致性；以往表格嵌套的制作方法，会使得页面与页面，或

者区域与区域之间的显示效果会有偏差。

而使用DIV+CSS的制作方法，将所有页面，或所有区域统一用

CSS文件控制，就避免了不同区域或不同页面体现出的效果偏差。

　　五、更好地被搜索引擎收录

　　由于将大部分的HTML代码和内容样式写入了CSS文件中，这就使得网页中正文部分更为突出明显，

便于被搜索引擎采集收录。

　　六、对浏览者和浏览器更具亲和力

　　我们都知道网站做出来是给浏览者使用的，对浏览者和浏览器更具亲和力，DIV+CSS在这方面更具优

势。

由于CSS富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统一和

不变形。

　　说了这么多CSS网页布局的意义与优点，同时也不能轻视CSS网页布局的副作用：

　　一、DIV+CSS尽管不是高不可及，但至少要比表格定位复杂的多，即使对于网站设计高手也很容易出

现问题，更不要说初学者了。

　　二、CSS网站制作的设计元素通常放在1个外部文件中，或几个文件，有可能相当复杂，甚至比较庞

大，如果CSS文件调用出现异常，那么整个网站将变得惨不忍睹。

　　三、虽然说DIV+CSS解决了大部分浏览器兼容问题，但是也有在部分浏览器中使用出现异常，比如火

狐浏览器，在IE中显示正常的页面，到了火狐浏览器中可能会面目全非。

当然这应该是浏览器的问题，但

是可以说在目前来看，DIV+CSS还没有实现所有浏览器的统一兼容。

　　四、DIV+CSS对搜索引擎优化与否,取决于网页设计的专业水平,而不是DIV+CSS本身。

DIV+CSS网页

设计并不能保证网页对搜索引擎的优化，甚至不能保证一定比HTML网站有更简洁的代码设计，何况搜索

引擎对于网页的收录和排序显然不是以是否采用表格和CSS定位来衡量，这就是为什么很多传统表格布局

制作的网站在搜索结果中的排序靠前，而很多使用CSS及web标准制作的网页排名依然靠后的原因。

因为

对于搜索引擎而言，网站结构、内容、相关网站链接等因素始终是网站优化最重要的指标。

综合以上讨论的DIV+CSS优势和略势，我认为不可盲目跟风，如何更有效、更合理的运用WEB2.0设

计标准，这需要很长时间的学习和锻炼。

而如何将DIV+CSS运用的更好，我觉得这需要通过不断的实践和

体检，积累丰富的设计经验，才能很好的掌握这门技术。

）

实验四  ASP 网页设计

一、实验目的及要求

1．熟悉一两种脚本语言

2．能使用ASP进行简单的网页编程，掌握几种常见的ASP的内建对象使用方法，了解

几种ASP常用外部组件的使用方法

二、实验内容

1．使用脚本语言显示一个时钟

2．做一个用户登陆的简单ASP网页

三、实验过程

4_1 一个显示时间的vbscript网页 datetime.html/datatime.asp

document.write（"今天的日期是：

" & date（））

document.write（""）

document.write（"时间是：

" & time（））

4_2 一个显示时钟的javascript网页 clock.html/clock.asp

function startTime（）

{

var today=new Date（）

var h=today.getHours（）

var m=today.getMinutes（）

var s=today.getSeconds（）

// add a zero in front of numbers<10

m=checkTime（m）

s=checkTime（s）

document.getElementById（'txt'）.innerHTML=h+":

"+m+":

"+s

t=setTimeout（'startTime（）',500）

}

function checkTime（i）

{

if （i<10）

{i="0" + i}

return i

}