1.7.1 传统表格布局(2)


1.7.1 传统表格布局(2)







 
(点击查看大图)图1.14
在左图5个表格中。
第1个表格的高度为12px,定义背景图像images/bg_top1.gif,实现水平平铺;
第2个表格中插入一幅图像images/bg_ top.jpg,插入图像可以自动撑开表格,因此就不需要定义表格高度;
第3个表格定义背景色为白色,并添加几行空格;
第4个表格定义高度为39px,背景图像为images/bg_bottom.gif,实现水平平铺;
第5个表格定义背景色为白色,宽度为60px。
注意,在Dreamweaver 8中插入表格时,会自动在单元格中插入一个 空白符号,单元格会自动形成一个最低12px的高度,如果要定义表格小于12px的高度,应该先在代码中清除 空白符号,如下面代码所示。



<table width="776" border="0" align="center" 
cellpadding="0" cellspacing="0"  bgcolor="#FFFFFF">
<tr>
<td>&nbsp;</td>
</tr>
</table>
上面是表格布局的第一步,即实现第一层网页布局框架。下面可以在中间表格中再嵌入表格,以便实现第二层页面布局,具体操作如下图所示。





 
(点击查看大图)图1.15
这一步的目的是实现麻点边框效果。
在第3个表格中插入一个1行1列的表格,表格属性可以参考上面所列的共同属性。定义表格背景图像为images/bg_dot1.gif,实现水平和垂直方向上的平铺,使表格背景显示麻点效果。
然后在第2层表格中再嵌入一个1行1列的表格,宽度为736px,背景色为白色,其他属性可以参考上面所列的共同属性。
下一步就在第3层嵌套表格内插入一个5行1列的表格,如图1.16所示,表格宽度为712px,其他属性与公共属性中定义的属性值相同。然后在第1行单元格中输入标题;在第2行单元格中插入水平线,水平线高度为2px,在【属性】面板中取消【阴影】复选框的选择,定义无阴影效果;在第3行单元格中输入小标题;第4个单元格暂时空着,为下一步更详细布局作准备;在第5个单元格中输入"返回顶部"锚链接文字,关于如何实现锚链接以实现页内跳转,本例就不再深入介绍了,读者可以查看本例源代码。





 
(点击查看大图)图1.16
最后一步,我们来看看圆角区域的实现方法,关于圆角的详细研究可以参考9.8节内容介绍。在传统表格布局中,要实现圆角一般通过插入一个3行3列的表格,然后在4个顶角单元格中插入制作好的圆角图像,并定义表格背景色与圆角图像的颜色一致即可,如图1.17所示。





 
(点击查看大图)图1.17
在为4个顶角的单元格插入圆角图像时,读者要注意单元格的大小与圆角图像的大小一致,本例为10*10px大小。中间的代码区域为一个表格,并定义背景色为浅灰色,用<pre>和</pre>标签包含代码,以保留代码的预定义格式显示。



标签:
友情链接
轻松育儿世界奇观
苏ICP备16066217号-2