05第5章Dreamweaver8设计页面布局(二)解释.ppt

网站设计;第5章　Dreamweaver 8设计页面布局(二);;表格应用综合实例;;表格(Tables) ;;5.1.4 使用“扩展表格”模式;切换到“扩展表格”模式;1 选择【查看】/ 【表格模式】/ 【扩展表格模式】;2 在“插入”栏的“布局”类别中单击“扩展表格模式”按钮 ;文档窗口的顶部出现“扩展表格模式”工作条;5.1.5 设置表格;插入表格;表格元素;改变单元格的大小;1. 查看和设置表格属性;使用表格属性面板;表格的3种对齐方式; 边框颜色： 这是一个颜色框，可以设置整个边框的颜色，包括单元格边框。 提示： 在HTML中，还可以设置边框架颜色的另外两个属性，即亮边框（Bordercolorlight）和暗边框(Bordercolordark)， 一般情况下,表格的左边框和上边框可以用加亮的颜色显示，右边框和下边框可以用较暗的颜色显示，整个边框呈立体感。 Bordercolorlight设置表格左边和上边的边框， Bordercolordark设置表格右边和下边的边框。;设置表格; 例如,下列语句定义了表格的亮边框为亮红色,暗边框颜色为暗红色。table border=″20″ bordercolorlight=″#ff0000″ bordercolordark=″#990000″ 注意： 表格边框设置的是整个表格四周的边框宽度，而不是各个单元格的边框宽度，但border=0时，整个表格都没有边框。;border=20,Cell padding=2,Cell Space=3时的表格边框;border=0时的表格边框;7. 设置表格背景 BgColor（背景颜色）: 这是一个颜色框,可以设置表格的背景颜色。可以单击颜色按钮选择颜色,也可以直接在颜色框中输入颜色的十六进制数值。 ;设置表格; BgImage(背景图像): 在该文本框中，可以设置表格的背景图像。可以直接输入图像文件的URL地址，也可以单击右方的文件夹按钮，从磁盘上选择图像文件。如果同时设置背景颜色和背景图像,则显示的是背景图像。 使用这两个属性,可以设置与页面不同的表格背景。;设置表格;8. 清除表格的行高和列宽 在表格的修改过程中,有时已经修改了表格的某些行的高度和列的宽度,但又觉得并不合适,这时可以使用清除表格的行高和列宽功能，清除表格中的行高和列宽数值。使表格恢复为最原始的状态。如果表格中有内容，则表格的宽度和高度将调整为正好容纳其中的内容。;清除多余行高;清除多余列宽;9. 转换表格的宽度 表格宽度的度量有两种方式，一种是绝对的像素值，这时表格的宽度不随浏览器窗口的变化而变化；另一种是百分比数值，这时表格的宽度随浏览器的窗口变化而变化。; 这两种方法各有其优缺点。 使用绝对宽度，能够准确地保持单元格中数据的格式和位置，但是如果浏览器窗口过小，则需要拖动浏览器的水平滚动条浏览表格，这不便于对表格整体的观察。 使用相对宽度，则能够保持在浏览器窗口中看到整个表格行，但是随着浏览器窗口的变化，表格中内容的格式和位置可能也会发生变化，这在很多时候不利于对数据的查看。; 在Dreamweaver中，提供了将表格的宽度数值在像素和百分比之间进行转换的功能，根据需要，随时将表格的宽度设置为需要的度量方式。;2. 查看和设置单元格、行和列的属性; 请注意，选中单元格和选中表格时的属性面板是不一样的（如图所示）. 但选中的是行、表格列还是单元格时属性面板的内容都是一样的。因为行、列也不过是多个单元格的集合而已。;3. 设置单元格的边框颜色和背景 单元格的边框颜色和背景是指定单元格四周的边框颜色和局部背景颜色，不是整个表格的边框和背景，也不是所有单元格的边框架和背景。 通过单元格边框颜色和背景的设置，可以使不同的区域有不同的边框颜色和背景。如果设置的单元格边框颜色与背景颜色相同，可以实现局部无线表格的效果（如图所示）。;局部无线表格;设置单元格边框颜色;设置单元格的背景图像;设置单元格的背景色;4. 控制单元格内容的换行方式 由于表格单元格的区域受到限制，在显示长文本时如何换行就显得比较重要。 不换行： 如果不选中该复选框，则在单元格中输入文本时，长度超出了单元格的宽度，文本会自动换行，单元格的高度增加，宽度保持不变。 反之，如果选中该复选框，则在单元格中输入文本时，文本长度超出了单元格的宽