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