文档介绍：实验二
实验内容
利用table完成简单的两栏式布局
利用div+css完成简单的两栏式布局
利用div+css完成简单的三栏式布局
实验目的
熟悉网页布局的原理
熟悉基于table的布局方法
熟悉基于div+css的布局方法
进一步熟悉dreamweaver工具的使用
实验步骤
步骤1 利用table布局完成如下两栏式网页布局
具体要求如下(请看清楚要求~):
页面居中
页面宽度900px
每个版块之间有3个像素的空格
不允许出现表格边框
左边栏宽度650px,右边栏宽度247px
各版块背景色无限制
如果有样式表,请采用外部样式表
步骤二利用div+css完成如下两栏式网页布局
具体要求如下:
页面居中
页面宽度900px
每个版块之间有3个像素的空格
左边栏宽度650px,右边栏宽度247
请采用外部样式表
具体的实现步骤(供参考):
打开dreamweaver,新建一页面
对页面进行一些基本设置,如标题,页面边距等等
【插入】>【布局对象】>【div标签】,弹出如下对话框,输入ID名,连续插入四个DIV
插入完成以后,部分源代码如下:
<div id="banner"></div>
<div id="main"></div>
<div id="announce"></div>
<div id="copyright"></div>
右键点击css样式面板的空白处,新建样式规则
在弹出的对话框,设置如下
设置新建样式表文件的名称
在弹出的对话框分别设置区域的长度,宽度,背景色等等。分别将四个逻辑区域按照要求设置好width he