布局表格和布局单元格技巧.ppt

在DreamweaverMX中，不仅可以导入外部的数据文件，还可以将网页中的数据表格导出为纯文本的数据文件。最初，使用表格只是为了以更方便阅读的格式显示数据。而现在，表格的格式控制能力可以用来构造网页的框架。先使用较大的表格对网页的版面进行大致的排布，再使用嵌套的表格对细节时行刻画。表格已经不仅仅是一种简单对象，而是一种版面控制和制作模板的强有力的工具。表格包含以下三个基本元素：行列单元格,布局表格和布局单元格,5.2.1使用布局视图和网格辅助线,利用布局表格创建页面布局，必须在布局视图下完成。在布局视图下，设计者可以很容易地把单元格拖动到页面上，然后按照自己的意图随意安排单元格的位置，还可以使页面的宽度固定，或者填充整个浏览器窗口。利用这个功能可以将原来繁琐的页面布局工作变得简单而又轻松。在绘制布局表格或布局单元格之前，必须从“标准”模式切换到“布局”模式。如果在“布局”模式中创建布局表格，则在向表格中添加内容或对表格进行编辑之前最好切换回“标准”模式。,1使用布局视图,1、如果正在“代码”视图中工作，由于在“代码”视图中无法切换到“布局”模式，所以必须执行【查看】|【设计】命令，或执行【查看】|【代码和设计】命令，切换到设计视图。2、选择显示布局视图：在【插入】工具栏的【布局】选项卡中单击【布局模式】按钮。执行【查看】|【表格模式】|【布局模式】命令。3、弹出一个从【从布局模式开始】提示对话框。如果不想以后再显示该对话框，选中下面的“不再显示此消息”复选框即可。4、单击【确定】按钮，【布局】选项卡中的【插入表格】按钮和【描绘层】按钮将变成灰色，这表示这两个对象不能在布局视图下使用；而原来是灰色的【绘制布局表格】和【绘制布局单元格】按钮则变成了彩色，可以使用这两个对象进行页面布局。,在【文档】窗口的顶部，单击标有“布局模式”的彩色边框条中的【退出】按钮。执行【查看】|【表格模式】|【标准模式】命令。单击【插入】栏上的【布局】选项卡中的【标准模式】按钮。,2退出布局模式,若要退出“布局”模式，请执行以下操作之一：,执行【查看】|【网格】|【显示网格】命令，则页面编辑区域会出现网格辅助线。,（1）显示网格,3使用网格辅助线,在布局视图中，为了更好的显示文本、图象等元素的具体位置，规划页面布局，可以使用网格辅助。,网格辅助线将页面划分成一个个的方格，便于对齐文本、图象、层对象等基本元素。执行【查看】|【网格】|【靠齐到网格】命令，可以使需要对齐的元素在移动过程中自动对齐到相近的网格。,（2）对齐到网格,（3）网格设置,对于显示出来的网格，可以通过更改默认设置，达到需要的效果。执行【查看】|【网格】|【网格设置】命令，弹出【网格设置】对话框，设置网格的整体格式。,在“布局”模式中，不能使用在“标准”模式中可以使用的【插入表格】和【绘制层】工具。若要使用这些工具，必须先切换到“标准”模式。,绘制完成布局表格后，有可能要更改布局表格的宽度或高度，可执行以下操作之一：移动鼠标至布局表格右边缘，当鼠标光标变为形状时，在编辑区内拖动鼠标更改布局表格的宽度。移动鼠标至布局表格边缘，当鼠标光标变为形状时，在编辑区内拖动鼠标更改布局表格的宽度或高度。,2选择单元格,1、在“布局模式”下新建布局表格。2、新建一个布局单元格：在【插入】工具栏的【布局】选项卡中单击【绘制布局单元格】按钮。单击【绘制布局单元格】按钮，鼠标光标变为+形状，在编辑区拖动鼠标绘制一个布局单元格。3、绘制完成后，在默认状态下，布局单元格边框是蓝色，背景色是白色，布局单元格被选中时以红色显示。如果需要，也可以在用户参数设置中对上述有关颜色进行更改。,3新建布局单元格,如果要绘制多个布局单元格，只能在布局表格的剩余区域中创建布局单元格，不能绘制嵌套布局单元格。具体操作与新建布局单元格的基本步骤相同。,4绘制多个布局单元格,当新建布局单元格时，如果和另一个单元格相距很近（小于8个像素）或者和布局表格的边界相距很近（小于8个像素），这个单元格将会自动吸附。如果要取消自动吸附功能，在绘制单元格的同时，按住Alt键即可。,自动吸附功能,移动鼠标至布局单元格右边缘，当鼠标光标变为形状时，在编辑区内拖动鼠标更改布局单元格的宽度。移动鼠标至布局表格边缘，当鼠标光标变为形状时，在编辑区内拖动鼠标更改布局表格的宽度或高度。,5更改布局单元格宽度/高度,绘制完成布局单元格后，有可能要更改布局单元格的宽度或高度，可执行以下操作之一：,5.2.3绘制嵌套布局表格,如果要绘制多个布局表格，既可以在页面布局的空白区域中创建布局表格，也可以在现有布局单元格和表格的周围或嵌套在现有布局表格中创建布局表格。如果页面已包含内容，而且要在页面布局的空白区域添加布局表格，则只能在现有内容的下方绘制新的布局表格。,1绘制非嵌套布局表格,要绘制非嵌套布局表格，就须在页面布局现有布局表格下方的空白区域中创建布局表格。,1、在“布局”模式下，编辑区内现有布局表格的外部新建另一个布局表格。2、鼠标光标变为+形状，拖动鼠标绘制布局表格。,由于嵌套表格内的单元格不受外层布局表格的行和列的影响，所以在网页布局时经常要用到嵌套表格。在绘制嵌套布局表格时可以使用网格。通过显示网格，可以更好地对布局单元格和布局表格进行精确定位。,2绘制嵌套布局表格,1、在“布局”模式下，编辑区内现有布局表格的内部新建另一个布局表格。2、鼠标光标变为+形状，拖动鼠标绘制布局表格。,从代码部分看，嵌套布局表格相当于在原布局表格的单元格中再插入一个布局表格。,嵌套布局表格的大小不能超过外层表格的大小。,5.2.4设置布局表格和布局单元格属性,布局表格有许多属性，而且大多数可以通过Dreamweaver中的【布局表格属性检查器】进行修改。,1布局表格基本格式,设置表格的整体格式，执行以下操作：选中布局表格，执行【窗口】|【属性】命令，打开【布局表格属性检查器】，如图所示。,“布局表格”属性检查器,2布局表格高级格式,在【属性检查器】中，在高级选项中右侧有几个按钮，在按钮上停留一定的时间后，鼠标附近就会出现一条文字，显示按钮的名称，从名称中可以了解其大致的用途。,3布局单元格整体格式,设置表格的整体格式，执行以下操作：选中单元格，执行【窗口】|【属性】命令，打开【布局单元格属性检查器】，如图所示。,“布局单元格”属性检查器,4填充布局单元格,利用布局模式进行页面布局时，布局表格中只能创建布局单元格，不能创建页面内容。只有创建了所有布局单元格后，才能在布局单元格内白色区域内创建页面元素。,1、在布局模式下，执行【编辑】|【首选参数】命令。2、弹出【首选参数】对话框，在【分类】对话框中选择【布局模式】。3、在“布局模式”选项卡右