|
为了加深对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="images/logo.gif" width="240" height="31"></TD>
<TD width="17%" align="right"><IMG src="images/banner_1.gif" width="51" height="24"></TD>
<TD width="6%" align="right"><IMG src="images/banner_2.gif" width="51" height="24"></TD>
<TD width="8%" align="right"><IMG src="images/banner_3.gif" width="73" height="24"></TD>
<TD width="5%" align="right"><IMG src="images/banner_4.gif" width="39" height="24"></TD>
<TD width="7%" align="right"><IMG src="images/banner_5.gif" width="62" height="24"></TD>
<TD width="7%" align="right"><IMG src="images/banner_6.gif" width="61" height="24"></TD>
</TR>
<TR>
<TD colspan="6" align="right">您好，欢迎来淘宝！[<A href="register/register.html" target="_blank">免费注册</A>][<A href="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入门经典》教程列表
|
