网页设计与Web编程 吴黎兵 郝自勉 杨鏖丞 chapter05

《网页设计与Web编程 吴黎兵 郝自勉 杨鏖丞 chapter05》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第五章网页布局和框架内容提要5.1布局模式5.2绘制布局表格和布局单元格5.3使用标尺与网格5.4调整布局表格及布局单元格5.5设置布局模式的首选参数5.6框架的使用5.1布局模式法一：“查看”

2、“表格模式”

3、“布局模式”法二：“插入”--“布局”按钮1、切换到“布局”模式5.2绘制布局表格和布局单元格5.2.1绘制布局表格5.2.2绘制布局单元格5.2.3绘制嵌套布局表格5.2.1绘制布局表格步骤一：在插入工具栏下方的“布局”类别中单击按钮，该按钮位于工具栏倒数第二个，此时光标变成加号（+）形状。该布局按钮在“代码”状态下是不能使

4、用的，建议切换到“设计”模式，如：步骤二：将光标放在页面中要绘制布局表格的位置，按下鼠标左键并拖动，从而在页面上绘制出布局表格，如图5-3所示。在拖动过程中，表格的长和宽会动态地在Dreamweaver下方的状态栏中显示出来。标签：辨别和选择表格表格和单元格的宽度(像素)5.2.2绘制布局单元格步骤一：在插入工具栏上的“布局”类别中单击按钮，该按钮位于工具栏最右边，此时光标变成加号（+）形状。步骤二：将光标放在布局表格中要绘制单元格的位置，按下鼠标左键并拖动，在表格中绘制出布局单元格，如左下图所示。布局单元格只能在布局表格内拖动显示

5、，当鼠标在布局表格外的位子拖动是无法绘制布局单元格的。步骤三：布局单元格绘制完成后，在插入工具栏上的“布局”类别中单击“标准”按钮，切换到“标准”模式，布局表格变成普通表格，如右上图所示。用户可以在表格中插入各种页面对象。5.2.3绘制嵌套布局表格步骤一：在插入工具栏上的“布局”类别中单击按钮，光标变成加号（+）形状。步骤二：将光标放在现有布局表格中的空白区域，按下鼠标左键并拖动，在页面上绘制出嵌套布局表格，如下图所示。5.3使用标尺与网格(“布局”模式)1、使用标尺查看”

6、“标尺”

7、“显示”(1)“查看”

8、“网格”

9、“显示网格”2

10、、使用网络(2)“查看”

11、“网格”

12、“网格设置”(3)单击“确定”按钮应用更改并关闭对话框。5.3使用标尺与网格(“布局”模式)网络设置颜色：指定网格线的颜色。显示网格：选中该复选框可以使网格在“设计”视图中可见。靠齐到网格：选中该复选框可以使页面对象和网格线靠齐。间隔：控制网格线的间距。网格设置显示网格5.4调整布局表格及布局单元格5.4.1选择布局表格和布局单元格5.4.2调整布局表格和布局单元格的大小5.4.3移动嵌套布局表格和布局单元格5.4.4设置布局表格和布局单元格的属性5.4.5设置列宽度5.4.1选择布局表格和布局单

13、元格单击两次布局表格顶部的标签，当表格边框上出现选择控制点时，该表格处于选中状态。另外，单击表格中的空白区域，也可以选中表格。单击单元格的边框，边框上出现8个选择控制点，可以确定该单元格处于选中状态。此外，在按住Ctrl键的同时，在单元格中的任意位置单击也可以选中单元格。5.4.2调整布局表格和布局单元格的大小选中布局表格，将光标放在表格的选择控制点上，光标形状变成双向箭头，按下鼠标左键并拖动，可以调整表格的宽度和高度选中单元格，可以拖动选择控制点来调整单元格的宽度和高度5.4.3移动嵌套布局表格和布局单元格只有嵌套布局表格才能移动

14、。首先选中嵌套表格，然后按下鼠标左键拖动表格到合适的位置。选中嵌套表格后，使用方向键也可以移动表格。每按一次键盘上的方向键，表格就会在相应方向移动1个像素。如果在按住Shift键的同时按一次方向键，表格就会在相应方向移动10个像素。移动布局单元格和移动嵌套表格的方法。5.4.4设置布局表格和布局单元格的属性1.设置布局表格的属性布局表格，打开“属性”面板：固定：将表格设置为固定宽度。自动伸展：使表格最右边的列自动伸展。高：设置表格的高度（以像素为单位）。填充：设置单元格内容和单元格边框之间的间隔间距：设置相邻单元格之间的间隔（以像素

15、为单位）。清除行高删除所有间隔图像使单元格宽度一致删除嵌套5.4.4设置布局表格和布局单元格的属性2.设置布局单元格的属性布局单元格，打开“属性”面板：固定：将单元格设置为固定宽度。高：设置单元格的高度（以像素为单位）。背景颜色：设置单元格的背景颜色。水平：设置单元格内容的水平对齐方式,“左对齐”、“居中对齐”、“右对齐”和“默认”垂直：设置单元格内容的垂直对齐方式,“顶端”、“居中”、“底部”、“基线”或“默认”不换行：禁止文字换行。自动伸展：使单元格自动伸展。5.4.5设置列宽度1.使用间隔图像步骤一：单击列标题菜单，选择“添加

16、间隔图像”命令步骤二：如果尚未给站点设置间隔图像，将打开“选择占位图像”对话框。。创建一个GIF图像作为间隔图像，并允许用户选择一个存储该间隔图像文件的文件夹。使用现有的图像文件作为间隔图像5.4.5设置列宽度步骤三：如果选择“创建占