网页的版面布局

版面布局的重要性：
版面布局的重要性：
1. 就仿佛作文中的拟提纲，绘画中的 勾轮廓，是页面创作时的第一步， 也是统领全局的必要手段。
2. 只有合理进行版面布局，才能制作 出美观的页面，而且便于日后的维 护和修改。
谁来充当“容器”?布局版面 是怎样的过程?
在HTML中，要实现“容器”的作用， 最好的方法就是使用表格。
方法一： 打开View菜单，选择TableView(表格视 图)，然后选中LayoutView(布局视图)命 令。
方法二： 在插入面板的Layout(布局)选项卡上， 单击LayoutView(布局视图)按钮，如图 所示。即可进入布局视图状态。
布局选项卡
插 入
绘 制
标 准
表分 视
格层 图
绘 绘制 制布 布 布局 局 局单 视 表元 图 格格
版面的布局可以采用如下四种 方法
方法四：利用dreamweaver提供了一 种新的表格视图——布局视图(Layout View)来布局版面。
优点：利用布局视图，用户快速完成 版面的布局，我们可以像绘图一样， 在页面上任意位置绘制表格和单元格， 或是调整表格和单元格的属性。这样， 布局页面的工作就像绘图一样的轻松。
要在页面中绘制布局表格和布 局单元格，操作步骤：
1．进入布局视图。
2．如果要绘制布局表格，可以单击插入 面板上的“绘制布局表格”按钮，如果 要绘制布局单元格，可以单击插入面板 上的“绘制布局单元格”按钮，这时候 鼠标指针·会变为十字线形状。
要在页面中绘制布局表格和布 局单元格，操作步骤：
3．根据需要，在页面上拖动鼠标，绘制 需要的大小区域，即可完成布局表格和 布局单元格的创建。
网页的版面布局
网页的版面布局可以说是页 面设计中最先需要考虑的步 骤，也是最重要的步骤。
什么是版面布局
在具体添加网页内容之前，应该首先对 网页进行合理的版面布局，确定什么地 方要安放什么内容，或什么地方要实现 什么效果。
什么是版面布局：实际上就是在页面上 指定的位置安放“容器”，以确保“容 器”中的内容只在该地方显示。
了解布局视图
布局视图(LayoutView)：它是一种特殊 的表格视图，它的作用在于用可视化的 方法在页面上绘制复杂表格。
它同传统绘制表格方法的差别在于，在 布局视图中，我们可以在页面上绘制任 意数量和大小的表格，而且在表格中的 任意位置上也可以绘制任意数量和任意 大小的单元格
要进入布局视图，可以按照如 下方法进行操作：
布局版面的过程, 实际上就成为绘制表格的过程。 根据页面布局的需要，表格可能会比较 简单，也可能会非常复杂。
为什么要用表格来布局版面呢?
这是因为表格具有很多特性，能够 满足我们页面布置的多种需要。例如：
如果将表格和单元格的宽度或高度设置
为固定大小，则即使我们改变了浏览器 窗口的大小，单元格中的内容在页面上 的位置也能保持不变，从而实现内容的 绝对定位；
如果表格和单元格的宽度和高度设置为
百分比的形式，则在改变浏览器窗口大 小时，表格和单元格的大小也会随之变 化，因此其中的内容位置也随之变化， 这样又便于实现内容的相对定位。
版面的布局可以采用如下四种 方法：
方法一：通过标准的表格操作来绘制版 面。
缺点：这种操作不仅费力，而且难于控 制，要利用标准的表格操作方法来生成 一个比较复杂的表格，会耗费你大量的 时间，而且往往需要返工。
返回到标准的设计视图
方法一：如果希望返回到标准的设计视 图状态中，可以在View菜单；选择 TableView，然后选中StandardView(标 准视图)命令，
方法二：在插入面板的Layout选项卡上 单击StandardView(标准视图)按钮。
布局的基本步骤
一般来说，应该首先绘制布局表格，然后 在布局表格的有效空间中绘制布局单元格。 Dreamweaver会根据你所绘制的布局单元 格，自动生成其他的单元格。如果你这时 候切换回标准视图，你就可以看到实际所 生成的表格，如图显示了这种特性。
版面的布局可以采用如下四种 方法
方法二：首先利用分层来绘制版面，然后再 将分层转换成表格。
优点：因为分层非赏容易在页面上定位，因 此这种方法在操作上比较简单。但是这种方 法也有缺陷，就是生成的表褡过于复杂，代I 码不够精练，很可能我们只需要三五个单元 格，最终生成的却是包含十数个单元格的表 格局选项卡按钮说明
在插人面板的Layout选项卡中，包含了多种 用于进行版面布局的工具。
其中，“插入表格”和“绘制分层”按钮， 可以分别在文档中插入普通表格和绘制分层， 这两个按钮只在标准视图状态下才有效(关于 表格和分层的操作，我们会在有关章节进行 介绍)；
绘制布局表格和绘制布局单元格工具按钮只 在局视图状态下才有效，这两个工具是我们 这一节介绍的重点。
另外，也可以直接在页面上绘制布局单 元格，这时候Dreamweaver会自动围绕你 绘制的布局单元格，生成一个布局表格， 并根据该布局表格与文档窗口边缘的距离， 确定是否生成其他的单元格，如图所示。
布局的基本步骤(图示)
首先绘制布局 表格
然后绘制布局 单元格
实际生成的 表格
直接绘制布局单元格格 围绕布局单元格生成的布局表格
版面的布局可以采用如下四种
方法
方法三：首先在fireworks中构建切片，然后利 用fireworks的到处特性，导出包含表格和切图 像的HTML。
这种方法优点在于：可以像绘图一样布局版面 (因为布局版面实际上是在Fireworks进行的)， 缺点在于如果希望修改版面，则不得不返回到 Fireworks中重新进行修改，修改完毕，还要 再进行导出操作。如果页面上已经填人了内容， 则还不得不重新填入一次。所以，利用 Fireworks切片来布局版面，通常只能在页面 创作前使用一次，以后就很少使用。
要在页面中绘制布局表格和布 局单元格，可以按照如下方法 进行操作：
4．重复上述步骤，即可绘制新的布局表格，或 是在现有的布局表梧中绘制新的布局单元格。
注意:默认状态下，每绘制一次布局表格或单 元格，都要在插入面板上重新单击一次相应 的工具。