为了加深对DIV层布局的理解，下面就来体验一把什么是DIV层布局。 使用Dreamweaver来绘制如图1所示的层布局页面，具体操作岁骤如下：  图1 DIV层布局页面 (1) 打开Dreamweaver，新建一个空白文档。 (2) 在插入栏的“布局”类别中单击“绘制层”按钮 。 (3) 在“文档”窗口的“设计”视图中，执行下列操作之一： ● 按下鼠标左键拖动以绘制一个层。 ● 通过按住Ctrl键并按下鼠标左键进行拖动来连续绘制多个层（只要不松开Ctrl键，就可以继续绘制新的层）。 (4) 绘制完如图1所示的3层之后，选中第一个层，然后在“属性”面板中设置层的背景色为红色，如图2所示。同理，为第二个和第三个层分别设置背景色为黄色和绿色。最后的页面效果如图1所示。  图2 设置层的背景色 图1DIV层布局页面对应的HTML代码如下： 示例1: <HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>div创建步骤</TITLE> <STYLE type="text/css">
<!--
#Layer1 { /*id样式选择符，方便层的引用*/
position:absolute;/*绝对定位*/
left:9px; /*层1距离浏览器左边的距离*/
top:12px; /*层1距离浏览器上边的距离*/
width:418px; /*层1的宽度*/
height:58px; /*层1的高度*/
z-index:1; /*层叠顺序编号*/
background-color: #FF0000; /*层背景色*/
}
#Layer2 {
position:absolute;
left:9px;
top:72px;
width:419px;
height:55px;
z-index:2;
background-color: #FFFF00;
}
#Layer3 {
position:absolute;
left:9px;
top:128px;
width:419px;
height:58px;
z-index:3;
background-color: #009900;
} -->
</STYLE>
</HEAD> <BODY>
<DIV id="Layer1"></DIV> <!--层引用样式-->
<DIV id="Layer2"></DIV>
<DIV id="Layer3"></DIV>
</BODY>
</HTML>
示例1中的#Layer1是一个ID选择器，ID选择器使用HTML元素的ID属性，其用法与类选择器很类似。ID选择器的定义格式为： #ID名{样式规则;} 注意ID名前面有“#”号，ID名也可以随意命名，但在整个网页中必须唯一，不能重名。某个标签（如<DIV>）希望采用该ID选择器的样式，语法格式为： <P ID="ID名"> </P> <DIV id=”Layerl”></DIV> 最佳布局 对于淘宝网首页大家想想用DIV层布局合理吗？根据DIV层布局的优缺点，淘宝网首页的确非常适合采用DIV层布局，不过，还有一丝疑虑，就是淘宝网首页中还有很多有规律、结构均匀的内容或数据，如果用DIV层来布局将是一件非常痛苦的事，那怎么办？有了！对于复杂的不规则的区域，我们采用DIV层布局；对于有规律、结构均匀的内容或数据，我们采用表格布局。这样就能很好地解决淘宝网页面布局问题，这也说明对于大型的商业网站，最佳布局方式是DIV层布局+表格布局。 下面通过示例2来说明如何使用DIV层布局+表格布局。 示例2: (1) 打开HTML文档，在<HEAD>与</HEAD>之间相应的位置输入以下代码： <STYLE type="text/css">
<!--
#head {
position:absolute;
left:10px;
top:6px;
width:950px;
height:100px;
z-index:1;
}
#content {
position:absolute;
left:10px;
top:110px;
width:950px;
height:139px;
z-index:2;
background-color: #009900;
}
#foot {
position:absolute;
left:10px;
top:252px;
width:950px;
height:131px;
z-index:3;
background-color: #FFFF00;
}
-->
</STYLE> (2) 在网页<BODY>与</BODY>之间相应的位置输入如下代码： <DIV id="head">
<TABLE width="100%" border="0">
<TR>
<TD width="50%" rowspan="2"><IMG src="http://www.mamicode.com/images/logo.gif" width="240" height="31"></TD>
<TD width="17%" align="right"><IMG src="http://www.mamicode.com/images/banner_1.gif" width="51" height="24"></TD>
<TD width="6%" align="right"><IMG src="http://www.mamicode.com/images/banner_2.gif" width="51" height="24"></TD>
<TD width="8%" align="right"><IMG src="http://www.mamicode.com/images/banner_3.gif" width="73" height="24"></TD>
<TD width="5%" align="right"><IMG src="http://www.mamicode.com/images/banner_4.gif" width="39" height="24"></TD>
<TD width="7%" align="right"><IMG src="http://www.mamicode.com/images/banner_5.gif" width="62" height="24"></TD>
<TD width="7%" align="right"><IMG src="http://www.mamicode.com/images/banner_6.gif" width="61" height="24"></TD>
</TR>
<TR>
<TD colspan="6" align="right">您好，欢迎来淘宝！[<A href="http://www.mamicode.com/register/register.html" target="_blank">免费注册</A>][<A href="http://www.mamicode.com/login/login.htm" target="_blank">登录</A>] 阿里旺旺 支付宝</TD>
</TR>
</TABLE>
</DIV>
<DIV id="content"></DIV>
<DIV id="foot"></DIV> (3) 保存文档，在浏览器中预览效果，如图3所示：  图3 DIV+Table布局页面效果 本章总结 ● 需求分析是对业务的深入分析，准确捕获客户想干什么。 ● 网站制作主要包括创建站点、制作首页、制作模板和制作样式。 ● 测试网页主要从3个方面进行，即页面是否美观、是否有死链接和能否兼容不同浏览器。 ● 首页的制作可以从页面内容和页面布局进行着手。 ● 框架布局有存在的理由，表格布局不可抛弃，DIV层布局是发展趋势。 本章作业： 运用所学知识用DIV+Table布局制作如下图所示的页面效果。 注意事项： 1、创建3个层，并分别为不同的层设置相关颜色。 2、在content层里插入表格，然后合并相关的单元格，最后插入文字和图片。 网页学习网提示：光看教程是无法让你掌握HTML知识，最好是完成作业后才进入下一次教程，动起手来吧！ 点击下载第六章案例及作业资源 返回《HTML入门经典》教程列表 | 
