您当前的位置: 站长圈 > 网页设计

DW 网页布局——表格实例

来源:站长圈|0 作者:adminzzq 点击: 0
用表格控制页面的好处是:能使各种元素在页面中的布置显得整齐统一、井然有序。Dreamweaver 8.0 为制作网页提供了强大的表格处理功能。在Dreamweaver 8.0 中插入表格的途径有两种,一是从菜单栏里的“插入”菜单可以插入表格。

二是从常用工具栏中的“表格”按钮插入表格。

在弹出的表格对话框中设置表格的属性。

还可以在Dreamweaver 8.0 操作界面的下方属性面板里修改表格的相关属性。

现在开始用表格布置网页。
首先给页面的body部分加一个样式,设定其填充与边界均为0。

或在Dreamweaver 里的页面属性里设置。

再作页面整体布局。一般网页分头部、中部、底部三个部分。在Dreamweaver 里插入一个三行一列的表格(分别为头部、中部、底部三个部分),宽度为800px,其余为0,并居中对齐。
再分别向三个部分插入表格,以起定位作用,向第一行插入一个2行1列的表格(可以根据自己的布局要求设置,下同),放置网页头部的banner、logo与导航,宽度为800px。并设banner区域高度为150px,导航区域高度为30px。向第二行插入一个2行3列的表格(暂把主体内容按三列布局),表格宽度为800px,高度为600px,左右两列宽度各为200px,高度分别为320px,中间列宽度为400px,高度分别为320px。向第三行插入一个1行1列宽度为800px,高度为100px的表格,放置底部信息。一个简单的表格布局网页已经完成。

下面是美化我们的页面。
以背景图片的形式给各个区块插入图片,或设置背景色。
制作导航条和为各板块命名。
在头部的导航区插入一个1 行多列的表格(根据导航条数定列)。
在每个板块插入定位表格,并命名。

最后效果。