0
点赞
收藏
分享

微信扫一扫

网页布局

网页布局基础知识

网页布局是指通过合理安排,使网页上的元素以一定顺序和结构显示出来。在进行网页布局时,首先要多参考各类网站的布局模式,然后再根据需要设计适合自己网站的布局类型。

1.网页布局类型

常见网页布局类型有以下几种。

•“T”形布局,是指页面顶部为网站标志和导航条,下面左侧为主菜单,右侧显示内容的布局。

•“口”形布局,是指网页上方显示网站标志和导航条,下方显示版权信息,中间部分的左侧是主菜单,右侧放置友情链接,中间放置主要内容的布局。•“三”形布局,是指页面上横向两条色块,将页面整体分割为3部分,中间正文一般为文字的布局。

•“POP”形布局,又称“随意”形布局。

网页布局注意事项

平时在构建网页布局时,需要注意以下几点。

(1)设置合适的显示器分辨率

(2)布局类型一致

(3)不要随意改动网页布局

(4)在构建网页布局时,可以使用标尺、辅助线和网格等进行网页元素的移动与定位。

使用表格布局网站首页

表格

表格由若干行和列组成,行和列交叉的区域称为单元格。一般以单元格为单位来插入网页元素,也可以行和列为单位来修改性质相同的单元格。

1.创建表格

表格在网页中的应用非常广泛,插入表格的方法也很简单。

网页布局_合并单元格

2.表格属性

插入表格后,通过选择不同的表格对象,可以在“属性”面板中看到它们的各项参数,修改这些参数可以得到不同风格的表格。

网页布局_网页布局_02

3.选择表格元素

一般要先选择表格元素,然后才能对其进行操作。一次可以选择整个表格、多行或多列,也可以选择一个或多个单元格。

4.编辑表格

表格是Dreamweaver CS6页面排版的核心,创建并设置好表格以后,就可以向其中添加各种元素了,如文本、图像等。

网页布局_嵌套_03

5.合并单元格

合并单元格是指将多个单元格合并为一个单元格。合并单元格首先要选择欲合并的单元格,然后采取以下几种方法中的一种进行操作。

•在菜单栏中选择“修改/表格/合并单元格”菜单命令。•右击鼠标,在弹出的快捷菜单中选择“表格/合并单元格”菜单命令。•单击“属性”面板左下角的“合并所选单元格,使用跨度”按钮 。

6.拆分单元格

拆分单元格是针对单个单元格而言的,可看成合并单元格操作的逆操作。首先需要将鼠标光标定位在要拆分的单元格中,然后再执行拆分操作。

网页布局_网页布局_04

7.嵌套表格

在Dreamweaver中,在单元格中还可以插入表格,这叫嵌套表格。

网页布局_网页布局_05

8.使用扩展表格模式

直接使用表格进行网页布局,各个布局表格的嵌套关系不直观。此时可以使用“扩展”布局模式。

网页布局_合并单元格_06


举报

相关推荐

0 条评论