第4章网页布局(表格、布局表格).ppt

第4章构建网页布局4.1使用表格4.1.1创建表格4.1.2选择表格和单元格4.1.3设置表格和单元格的属性1．设置表格和单元格的宽度与高度2．为表格和单元格设置背景颜色及背景图像课堂练习1使用表格构建“火百合”主页布局课堂练习2制作细线表格4.1.4合并与拆分单元格2．拆分单元格4.1.5添加或删除行和列4.1.6格式化表格课堂练习3制作嵌套表格课堂练习4制作圆角表格4.2使用布局表格布局网页
4.2.1.模式简介及注意事项
在dw中使用表格有以下3种模式：
标准模式：具体内容添加和显示的模式。
表格扩展模式：使用表格对页面进行布局的模式，也是传统模式。
布局模式：使用布局表格对页面进行布局的模式，可以在添加内容前使用布局单元格和表格来对页面进行布局；也可以在布局模式中将文本、图像和其他内容添加到布局单元格中，这和在标准模式中一样。
布局模式同时具有表格和层的共同性质，继承了层的准确定位和可移动性，还继承了表格的行列属性。
模式切换的操作方式：查看---表格模式----标准模式/布局模式/表格扩展模式。
在不同模式下，工具栏的各个按钮作用不同。
注意：只有在“设计”视图中才可切换到“布局”模式。在布局模式中不能像布局表格的空白区域插入内容，只能创建布局单元格，布局单元格才是承载具体内容的容器。
4.2.2.绘制布局表格
按住ctrl键可以绘制多个布局表格。4.2.3绘制布局单元格：
按住ctrl键拖动可以连续绘制多个布局单元格。
注意要点：
如果页面已包含内容，则只能在现有内容的下方空白区绘制新的布局表格。
在一个布局表格中可创建多个布局单元格;布局单元格不能存在于布局表格之外;更不能在一个布局单元格中创建布局表格。也可以仅在准备添加内容时绘制每一个单元格。
当绘制的布局单元格不在布局表格中，则自动创建一个布局表格作为该单元格的容器，这时表格与页边距相差8个像素。
表格不能互相重叠，可以嵌套。一个表格可以完全包含在另一个表格当中。将插入点放置到一个布局表格中，即可绘制嵌套布局表格。嵌套布局表格的大小不能超过包含它的表格。布局表格不能添加在布局单元格中4.2.4设置布局表格和布局单元格的属性和参数

1.布局表格可以设置尺寸、背景、自动伸展等属性。
2.设置布局单元格属性
在布局模式中，只有在布局单元格内部插入页面内容。
（1）设置布局单元格的位置（移动：单击该单元格的边缘用鼠标拖放；设置背景、对齐方式；清除单元格高度：选择属性检查器中的“清除行高”）。
（2）设置布局单元格内容的格式（调整大小：属性面板或直接拖放
（3）为布局单元格添加间隔图像（需设置列自动伸展）3.在布局模式中查看表格与单元格宽度
布局表格和单元格的宽度会出现在该表格的顶部或底部。宽度旁边是表格标题菜单与列标题菜单的箭头。使用菜单可以快速访问一些常用命令。
有时可能不出现列宽；可能会看到以下任何一种情况：
（1）无宽度：如果您未看到表格的宽度或列的宽度，则说明没有在HTML代码中指定该表格或列的宽度。
（2）波浪线：出现波浪线表示这种列是置为自动伸展的列。
（3）双线：包含间隔图像的列在列宽周围具有双线。该列可能稍有移位，顶部或底部会显示双线以表明它包含一个间隔图像。

（4）两个数字：当拖动表格的右下角来调整表格的大小，或者添加到单元格中的内容比该单元格的设置宽度大时，会出现这种情况。如果出现两个数，则说明“设计”视图中显示的可视宽度与HTML代码中指定的宽度不一致。

例如，如果您将某列的宽度设置为200像素，而添加的内容将宽度延长为250像素，则该列的顶部将显示两个数字：200（代码中指定的宽度）和(250)（带括号，表示该列呈现在屏幕上的可视宽度）。4.使用间隔图像：
间隔图像是不可见的、单像素的、透明GIF图像，用于控制自动伸展表格中的间距，以维持表格和单元格的宽度。若不在自动伸展表格中使用间隔图像，则表格列的大小将发生改变或消失（如果表格不包括内容）。若要将列的最小宽度限制到某一特定值，可在该列中插入一个间隔图像。单击列标题菜单，然后选择“添加间隔图像”（也可同法“删除间隔图像）。
5.网格线：从任何新布局单元格的边缘向外延伸到包含该单元格的布局表格的边缘，这些线可以方便将新单元格和以前的单元格对齐，并显现基础HTML表格的结构。Dreamweaver网格已设置，并且这种网格不会根据单元格的位置发生更改，因此可以用它来设计页面的布局。6.固定宽度列：具有特定的宽度值。
7.自动伸展列：就是表格可以按照屏幕比例来自动调整宽度，相当于将表格的宽度定义为百分比；如果布局中包括自动伸展列，则该布局会始终填充访问者浏览器窗口的整个宽度。常见的布局是让页上包含主要内容的列自动伸展，这会将所有其它列自动设置为固定宽度。例如，假设您的布局在页的左边有一个较宽