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

网站设计 刘雪燕 物理科学与技术学院 Email: lxy5462@ 表格应用综合实例 5.1.4 使用“扩展表格”模式 扩展表格模式可以临时向文档中的所有表格添加单元格边距和间距，并且增加表格的边框以使编辑操作更加容易。利用这种模式，用户可以选择表格中的项目或者准确地放置插入点。 切换到“扩展表格”模式 如果正在代码视图中工作，须切换到设计视图或者代码和设计视图模式。 切换到“扩展表格”模式，Dreamweaver可向页面上的所有表格添加单元格边距与间距，并增加表格边框。 可按下列方法之一切换到“扩展表格”模式。 1 选择【查看】/ 【表格模式】/ 【扩展表格模式】 2 在“插入”栏的“布局”类别中单击“扩展表格模式”按钮 文档窗口的顶部出现“扩展表格模式”工作条 5.1.5 设置表格 可以通过设置表格及表格单元格的属性或将预先设置的设计应用于表格来更改表格的外观。 若要设置表格中文本的格式，可以对所选的文本应用格式设置或使用样式。 1. 查看和设置表格属性 通过表格“属性”面板可以设置表格的各项参数值。选中整张表格，这时的属性面板如图所示: 边框颜色： 这是一个颜色框，可以设置整个边框的颜色，包括单元格边框。 提示： 在HTML中，还可以设置边框架颜色的另外两个属性，即亮边框（Bordercolorlight）和暗边框(Bordercolordark)， 一般情况下,表格的左边框和上边框可以用加亮的颜色显示，右边框和下边框可以用较暗的颜色显示，整个边框呈立体感。 Bordercolorlight设置表格左边和上边的边框， Bordercolordark设置表格右边和下边的边框。 例如,下列语句定义了表格的亮边框为亮红色,暗边框颜色为暗红色。table border=″20″ bordercolorlight=″#ff0000″ bordercolordark=″#990000″ 注意： 表格边框设置的是整个表格四周的边框宽度，而不是各个单元格的边框宽度，但border=0时，整个表格都没有边框。 7. 设置表格背景 BgColor（背景颜色）: 这是一个颜色框,可以设置表格的背景颜色。可以单击颜色按钮选择颜色,也可以直接在颜色框中输入颜色的十六进制数值。 BgImage(背景图像): 在该文本框中，可以设置表格的背景图像。可以直接输入图像文件的URL地址，也可以单击右方的文件夹按钮，从磁盘上选择图像文件。如果同时设置背景颜色和背景图像,则显示的是背景图像。 使用这两个属性,可以设置与页面不同的表格背景。 8. 清除表格的行高和列宽 在表格的修改过程中,有时已经修改了表格的某些行的高度和列的宽度,但又觉得并不合适,这时可以使用清除表格的行高和列宽功能，清除表格中的行高和列宽数值。使表格恢复为最原始的状态。如果表格中有内容，则表格的宽度和高度将调整为正好容纳其中的内容。 9. 转换表格的宽度 表格宽度的度量有两种方式，一种是绝对的像素值，这时表格的宽度不随浏览器窗口的变化而变化；另一种是百分比数值，这时表格的宽度随浏览器的窗口变化而变化。 这两种方法各有其优缺点。 使用绝对宽度，能够准确地保持单元格中数据的格式和位置，但是如果浏览器窗口过小，则需要拖动浏览器的水平滚动条浏览表格，这不便于对表格整体的观察。 使用相对宽度，则能够保持在浏览器窗口中看到整个表格行，但是随着浏览器窗口的变化，表格中内容的格式和位置可能也会发生变化，这在很多时候不利于对数据的查看。 在Dreamweaver中，提供了将表格的宽度数值在像素和百分比之间进行转换的功能，根据需要，随时将表格的宽度设置为需要的度量方式。 2. 查看和设置单元格、行和列的属性 行、列、单元的格式化指设置单元格的高度、宽度、单元格内部内容的对齐方式等。设置表格的行、列和单元格的格式，首先要选中相应的表格元素，然后在属性面板上设置相应属性的值。 请注意，选中单元格和选中表格时的属性面板是不一样的（如图所示）. 但选中的是行、表格列还是单元格时属性面板的内容都是一样的。因为行、列也不过是多个单元格的集合而已。 3. 设置单元格的边框颜色和背景 单元格的边框颜色和背景是指定单元格四周的边框颜色和局部背景颜色，不是整个表格的边框和背景，也