[理学]dreaweaver第2章 网页布局pt.ppt

第2章 网页布局 本章要点 2.1 布局表格 2.2 归纳与提高 2.3 框架 2.4 归纳与提高——框架与框架集 2.1 布局表格 （5）同样方法在第2个表格中插入images文件夹下的图片new.gif，然后将光标插入点定位在图片new.gif后，再插入一个4行1列的表格，在属性面板中设置间距为1，宽度为95%，背景色为#CCCCCC，如图2-13所示。 （6）在第3个表格中插入images文件夹下的图片reg.gif，然后将光标插入点定位在图片reg.gif后，再插入一个7行1列的表格，在属性面板中设置间距为1，宽度为95%。 按住Ctrl键依次单击1、3、5、7单元格，然后在属性面板中设置高度为55，背景色为#FFFFFF；同样方法设置2、4、6单元格的高度为6，背景色为#FFFFFF。 5．切换到设计视图，刚才的表格变成了细线条。 提示：Dreamweaver创建表格时，默认在表格中输入了代码“nbsp；”，这个代码也就是空格的HTML标识。所以只要删除了这个空格，表格的高度就可以随心所欲地设置了。 在表格的修改过程中,有时已经修改了表格的某些行的高度和列的宽度,但又觉得并不合适,这时可以使用清除表格的行高和列宽功能，清除表格中的行高和列宽数值。使表格恢复为最原始的状态。如果表格中有内容，则表格的宽度和高度将调整为正好容纳其中的内容。 Clear Row Heights（清除行高）按钮： 可以清除表格中所有的行高值，包括为表格和单元格设置的行高值等。 Clear Column Widths（清除列宽）按钮： 可以清除表格中所有的列宽值，包括为表格和单元格设置的列宽值等。 上机练习 P41:(1)、(3)、(4) 2.2 归纳与提高 （3）在“属性”面板中： “固定”用来设置表格的宽度为固定宽度。可在其右侧文本框中输入宽度（以像素为单位）； “自动伸展”使表格最右边的列为自动伸展，从而自动填充浏览器窗口右边的空白部分； “高度”框中为表格高度（以像素为单位）； “背景颜色”用来设置布局表格的背景色，可单击“ ”中的箭头直接挑选颜色，也可在右边的文本框中输入6位16进制的颜色代码（RRGGBB）； “填充”为布局单元格内容和单元格边框间的间隔（以像素为单位）； “间距”用来设置相邻单元格间的间隔（以像素为单位）； “属性”面板右边的4个按钮 的含义和作用分别是： ：使单元格宽度一致命令，修改“填充”参数后该选项变为可用。如果布局表格中有固定宽度的单元格，使用该选项按钮将使HTML代码中的宽度与其屏幕外观宽度一致。 ：清除行高，用于删除布局表格中所有单元格的显式高度。在布局表格中，即使单元格是空的，Dreamweaver也会自动指定单元格高度。所以，一般在向单元格输入了内容后，再使用此按钮，否则将使空单元格在垂直方向收缩，某些空白行甚至可能完全从表格中被删除。 ：删除所有间隔图像。从布局表格中删除间隔图像。该命令可能导致表格中的某些列变得非常窄。一般应在合适位置添加间隔图像，除非表格中每列都包含相当宽度的具体内容； ：删除嵌套。用于删除嵌套在另一个布局表格中的布局表格，但不删除表格中内容。原有内容自动包含在外层表格中； 图2-49所示的下拉菜单中，“列设置为自动伸展”命令用于将当前列设置为启动伸展列，“删除间隔图像”命令用于在当前列删除“间隔图像”。下拉菜单中的其他命令含义与“属性”面板对应按钮的含义相同。 在上节的“布局表格参数设置”中，已对间隔图像进行了简单介绍。间隔图像其实是由一个单像素透明GIF图像组成的图像文件，可自动向外伸展到指定像素数宽度，用来控制自动伸展表格中的“间距”宽度，使浏览器保持该列与列中放置的最宽图像一样宽。 当设置某列为自动伸展时，Dreamweaver会自动提示添加间隔图像，可根据需要对每列插入和删除间隔图像，插入的间隔图像不以显式方式出现，但包含间隔图像的列在列标题区域将以双线标识，且列会稍有移位。 提示：如果在自动伸展的表格中不使用间隔图像，则固定宽度列可能会改变大小，如果列中不包含内容，甚至会从设计视图中消失。 2.2.3 布局单元格 2.2.4 常规表格 很多用户会很不习惯使用布局表格，为此，Dreamweaver除了提供布局表格外，还提供了常规表格； 用常规表格也可以进行布局，但必须在标准视图中进行操作； 常规表格还主要用于存放统计或分类数据。 提示：如果用于布局，为了不影响访问者的网页视觉，一般将常规表格的边框宽度属性设置为0。 1. 建立与编辑表格 在标准视图中，使用插入面板中的常用选项区中的表格按钮或“插入|表格”命令打开如图2-54所示的“表格”对话框，按需要设置后确定即