了解基于 CSS 的页面布局

许多 Web 站点都使用基于表格的布局显示其页面上的信息。表格对于显示表格数据(如重复元素的行和列)很有用,并且很容易在页面上创建。但表格往往还会生成大量难于阅读和维护的代码。此外,由于所需的标签数量很大,并且可能需要进行"嵌套",因此表格可能会给使用屏幕读取器查看 Web 页的残障人士带来不便。

基于 CSS 的布局(即,使用块元素代替表格行和列的布局)所包含的代码数量要比具有相同特性的基于表格的布局中的代码数量少很多。基于 CSS 的布局通常使用 <div> 标签,而不是 <table> 标签来创建用于布局的 CSS 布局块。可以将这些 CSS 布局块放置在页面上的任意位置,并为它们指定属性,如边框、边距、背景颜色等。此外,由于代码更为简单和短小,因此使用屏幕读取器查看 Web 页的用户可以更容易地浏览使用 CSS 构建的页面。

使用 Dreamweaver 可以创建层。Dreamweaver 层是一个 HTML 页面元素,您可以将它放置在页面上的任意位置。更具体地说,它是一个包含绝对位置的 <div> 标签(或其它任何标签)。可以使用 Dreamweaver 将层拖动到页面上,然后将其放置在所需的位置。层充当保存资源(如图像、Flash 文件、文本等)的内容块。

Dreamweaver 层是绝对定位元素。也就是说,它们包含一个相对于页面的上边距和左边距设置的特定位置。不能使用层创建基于 CSS 的布局,然后将页面内容居中显示。因此,本教程中的布局与您在教程:创建基于表格的页面布局中创建的布局略有不同。

有关 Dreamweaver 层的更多信息,请参见《使用 Dreamweaver》中的使用 CSS 对页进行布局




未找到评论

 

评论添加到页面后给我发送电子邮件 | 评论报告

当前页: http://www.ecnnl.com/doc/dreamweaver/8_cn/using/gs_09_c2.htm

 

E中荷|荷兰华人电子商务