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