Web信息系统设计基础第5章网页布局和框架..ppt

5.1 布局模式 5.2 绘制布局表格和布局单元格 5.2.1 绘制布局表格 5.2.2 绘制布局单元格 5.2.3 绘制嵌套布局表格 5.2.1 绘制布局表格 步骤一：在插入工具栏下方的“布局”类别中单击 按钮，该按钮位于工具栏倒数第二个，此时光标变成加号（+）形状。该布局按钮在“代码”状态下是不能使用的，建议切换到“设计”模式，如： 步骤二：将光标放在页面中要绘制布局表格的位置，按下鼠标左键并拖动，从而在页面上绘制出布局表格，如图5-3所示。在拖动过程中，表格的长和宽会动态地在Dreamweaver下方的状态栏中显示出来。 5.2.2 绘制布局单元格 步骤一：在插入工具栏上的“布局”类别中单击 按钮，该按钮位于工具栏最右边，此时光标变成加号（+）形状。 步骤二：将光标放在布局表格中要绘制单元格的位置，按下鼠标左键并拖动，在表格中绘制出布局单元格，如左下图所示。布局单元格只能在布局表格内拖动显示，当鼠标在布局表格外的位子拖动是无法绘制布局单元格的。 5.2.3 绘制嵌套布局表格 步骤一：在插入工具栏上的“布局”类别中单击 按钮，光标变成加号（+）形状。 步骤二：将光标放在现有布局表格中的空白区域，按下鼠标左键并拖动，在页面上绘制出嵌套布局表格，如下图所示。 5.3 使用标尺与网格(“布局”模式 ) 1、使用标尺 5.3 使用标尺与网格(“布局”模式 ) 网格设置 5.4 调整布局表格及布局单元格 5.4.1 选择布局表格和布局单元格 5.4.2 调整布局表格和布局单元格的大小 5.4.3 移动嵌套布局表格和布局单元格 5.4.4 设置布局表格和布局单元格的属性 5.4.5 设置列宽度 5.4.1 选择布局表格和布局单元格 单击两次布局表格顶部的标签，当表格边框上出现选择控制点时，该表格处于选中状态。另外，单击表格中的空白区域，也可以选中表格。 5.4.2 调整布局表格和布局单元格的大小 选中布局表格，将光标放在表格的选择控制点上，光标形状变成双向箭头，按下鼠标左键并拖动，可以调整表格的宽度和高度 5.4.3 移动嵌套布局表格和布局单元格 只有嵌套布局表格才能移动。首先选中嵌套表格边缘，然后按下鼠标左键拖动表格到合适的位置。 选中嵌套表格后，使用方向键也可以移动表格。每按一次键盘上的方向键，表格就会在相应方向移动1个像素。如果在按住Shift键的同时按一次方向键，表格就会在相应方向移动10个像素。 5.4.4 设置布局表格和布局单元格的属性 1. 设置布局表格的属性 5.4.4 设置布局表格和布局单元格的属性 2. 设置布局单元格的属性 5.4.5 设置列宽度 1. 使用间隔图像 步骤一：单击列标题菜单，选择“添加间隔图像”命令 5.4.5 设置列宽度 步骤三：如果选择“创建占位图像文件”单选按钮，将打开“保存间隔图像文件为”对话框，指定间隔图像文件名和存储该文件的文件夹，完成后单击“保存”按钮。如果选择“使用现存的占位图像文件”单选按钮，将打开“选择间隔图像文件”对话框，选择现有的图像文件作为间隔图像，完成后单击“确定”按钮。 步骤四：间隔图像插入到列中，该图像是不可见的，列的底部会显示双横线以表明它包含一个间隔图像，如下图。 5.4.5 设置列宽度 2.列设置为自动伸展 步骤一：单击列标题菜单，选择“列设置为自动伸展”命令。 步骤二：如果尚未给站点设置间隔图像，将打开“选择占位图像”对话框，新增了“对于自动伸展表格不要使用间隔图像”单选按钮，选中该选项表示避免向表格中自动添加间隔图像。选择对话框中的某个选项，单击“确定”按钮，完成相应设置。 步骤三：自动伸展列的底部出现波浪线。其余列的底部出现双横线，表明自动添加了间隔图像。 5.4.5 设置列宽度 3.列设置为固定宽度 步骤一：选择列中的一个单元格，打开“属性”面板。 步骤二：选择“固定”单选按钮，在后面的文本框中输入单元格（列）的宽度。 当在“布局”模式中设置好布局表格和布局单元格后，就可以在单元格中输入文本或插入其他页面对象了，表格的空白区域不能插入内容。 当用户添加宽度大于布局单元格的内容时，该单元格将自动扩展。当单元格扩展时，该单元格所在的列随之扩展，周围单元格的大小也会相应地自动调整。 5.5 设置布局模式的首选参数 5.6 框架的使用 5.6.1 关于框架和框架集 5.6.2 创建框架和框架集 5.6.3 选择框架和框架集 5.6.4 保存框架和框架集文件 5.6.5 设置框架和框架集属性 5.6.6 为框架设置链接 5.6.7 处理不能显示框架的浏览器 5.6.1 关于框