网页布局基础知识
网页布局是指通过合理安排,使网页上的元素以一定顺序和结构显示出来。在进行网页布局时,首先要多参考各类网站的布局模式,然后再根据需要设计适合自己网站的布局类型。
1.网页布局类型
常见网页布局类型有以下几种。
•“T”形布局,是指页面顶部为网站标志和导航条,下面左侧为主菜单,右侧显示内容的布局。
•“口”形布局,是指网页上方显示网站标志和导航条,下方显示版权信息,中间部分的左侧是主菜单,右侧放置友情链接,中间放置主要内容的布局。•“三”形布局,是指页面上横向两条色块,将页面整体分割为3部分,中间正文一般为文字的布局。
•“POP”形布局,又称“随意”形布局。
网页布局注意事项
平时在构建网页布局时,需要注意以下几点。
(1)设置合适的显示器分辨率
(2)布局类型一致
(3)不要随意改动网页布局
(4)在构建网页布局时,可以使用标尺、辅助线和网格等进行网页元素的移动与定位。
使用表格布局网站首页
表格
表格由若干行和列组成,行和列交叉的区域称为单元格。一般以单元格为单位来插入网页元素,也可以行和列为单位来修改性质相同的单元格。
1.创建表格
表格在网页中的应用非常广泛,插入表格的方法也很简单。
2.表格属性
插入表格后,通过选择不同的表格对象,可以在“属性”面板中看到它们的各项参数,修改这些参数可以得到不同风格的表格。
3.选择表格元素
一般要先选择表格元素,然后才能对其进行操作。一次可以选择整个表格、多行或多列,也可以选择一个或多个单元格。
4.编辑表格
表格是Dreamweaver CS6页面排版的核心,创建并设置好表格以后,就可以向其中添加各种元素了,如文本、图像等。
5.合并单元格
合并单元格是指将多个单元格合并为一个单元格。合并单元格首先要选择欲合并的单元格,然后采取以下几种方法中的一种进行操作。
•在菜单栏中选择“修改/表格/合并单元格”菜单命令。•右击鼠标,在弹出的快捷菜单中选择“表格/合并单元格”菜单命令。•单击“属性”面板左下角的“合并所选单元格,使用跨度”按钮 。
6.拆分单元格
拆分单元格是针对单个单元格而言的,可看成合并单元格操作的逆操作。首先需要将鼠标光标定位在要拆分的单元格中,然后再执行拆分操作。
7.嵌套表格
在Dreamweaver中,在单元格中还可以插入表格,这叫嵌套表格。
8.使用扩展表格模式
直接使用表格进行网页布局,各个布局表格的嵌套关系不直观。此时可以使用“扩展”布局模式。