Artile_Title
第二部分、布局篇
蓝色经典—梦觉
本篇我要介绍的是Dreamweaver中的布局部分,如果我们把网页制作看的简单些,它其实就是一些静态的和动态的页面元素的组合,如何合理的将他们组织的美观、条理就需要我们头脑里有一个整体布局的概念。在Dreamweaver中,安排页面内容布局主要是依靠表格来完成的,通过表格的相互嵌套和合并、拆分,可以使你头脑里的设计构思变为现实。此外,框架结构也是实现布局的一种方式,它可以实现导航性非常好的页面结构。下面我就分别介绍一下这两种布局方式的运用。
一、表格篇
表格对每个人来说都是很容易理解的,但要运用的恰当、合理、赋予秩序性,却好像不是很简单,很多朋友抱怨Dreamweaver的表格不如Frontpage操作简单、易用。其实,这里面主要的一个原因是设计者缺乏整体的布局观,如果我们在刚开始就将要实现的布局在头脑里考虑一边,下手的时候你会觉得非常容易的。就软件来说,每个软件都有各自的操作特点,一旦你理解了软件的工作方式,你自然会将它运用的得心应手些。我们以一个常见的网页结构为例介绍表格布局,此页面由顶部的Logo和Banner区,导航菜单区,页面内容区,底部版权区组成。如下图:
(一) 布局方法。由于浏览器显示页面内容时是下在完一个完整的表格后才显示此表格中的所有内容,因此我们应尽可能分为多个各自独立的表格,这样可以加快显示速度,而不应将所有的页面内容都放置在一个大表格中。根据上图所示,我们将我们的页面从上向下分为四个表格。
(二) 属性面板。
打开Object面板,点击
图标插入一个表格,根据需要我们插入一个单行双列的表格,宽度设为780。下面我们打开表格的属性面板,修改表格的各个参数如下图所示:

属性面版的各项参数设置比较简单,关于清除单元格数值的用法我在后面会介绍。我只是提醒大家一定要重视CellPad和CellSpace的设置和作用,CellPad(单元格填充值),表示单元格的边框和它里面内容之间的空白;CellSpace(单元格间距值),表示单元格和单元格之间的距离。这两个值如果理解好了,不仅可以实现单象素的边框,而且可以使你的页面内容布局更加丰富多彩,大家可以多试着练习一下这两个值得变化。如下图我们设定了顶部Logo和Banner所在表格的CellPad为10、CellSpace为0。
(三) 修改表格。
1、插入的默认表格我们还需要对它进行各种修改、合并、拆分,才能满足我们复杂页面的布局需要。如果你熟悉Word软件的用法,你一样可以象操作Word表格一样进行表格的修改,在Dreamweaver中你可以对整个表格、单行、单列、多行、多列(相邻或相隔)、单个单元格、多个单元格(相邻或相隔)进行操作,例如设置多个选择范围的属性、复制多个单元格的内容、清除多个选择区的内容等等,你可以使用Ctrl、Shift键实现多个单元的选择,也可以用鼠标拖动选择多个单元格。如下图:
2、单元格之间的内容可以互相复制和移动,选定一个单元格中的内容,按住Ctrl键的同时拖动到另一单元格,即可将其复制过去。也可以一次选定多个单元格通过复制粘贴将其复制到相同布局的一组单元格中,但必须是布局相同的,例如将一组2x2单元的内容复制到另一组2x2单元组中。如图:
3、修改多个属性。当我们将光标定位在单元格中时,我们看一下此时的属性面版。
这里面需要掌握的主要是拆分和对齐属性。我们可以将当前的单元格进行拆分,也可选择多个单元格进行合并。还可以设定多个单元格内容的对齐方式,朋友们最好使用对齐选项中的Horz(水平)和Vert(垂直)下拉框设定对齐方式,而少用右上角的对齐方式,因为那将增加一个<div>标签,这样可以减少源代码的数量。还有一点要注意的是尽量事先计划好表格的结构,避免反复多次的拆分和合并表格,这样会将表格变得复杂,对以后的工作造成很多麻烦。
(四) 嵌套表格。由于我把表格主要当作一种布局工具,因此对一些常规的表格属性并未作详细介绍,如表格边框、表格色彩、表格背景等等,这些朋友可自己练习一下。为了满足我们页面的需要,我们常常需要进行表格嵌套,进行表格嵌套只需将光标定位在一格单元格中,然后插入一个新的表格即可。总的来说嵌套表格可以最大程度的满足页面布局的要求,如下图:
但是表格的嵌套也有一些不利因素,例如过多的嵌套影响浏览器的解析,影响页面的显示速度,因此建议表格的嵌套不要超过三层。在开始嵌套表格前最好计划好,避免反复的合并拆分、嵌套、取消,尽量少拖动表格来确定表格的大小,多注意底部标示选择器的标签状态,这样可以准确的选择需要的单元格。
