第6章.表格的用.ppt

3.选中所有单元格，在【属性】面板中将【背景颜色】设置为#ffffcc。 4.在单元格中分别输入相应的内容，在【属性】面板中将【大小】设置为12像素。如图6-17： 5.保存文档，按F12键在浏览器中预览效果 为何在Dreamweaver中把单元格宽度或高度设置为1没有效果 Dreamweaver生成表格时会自动地在每个单元格里填充一个“nbsp；”代码，即空格代码。如果有这个代码存在，那么把该单元格宽度和高度设置为l就没有效果。实际预览时该单元格会占据10像素左右的宽度。如果把“nbsp；”代码去掉，再把单元格的宽度或高度设为1，就可以在IE中看到预期的效果。但是在NS(Netscape)中该单元格不会显示，就好像表格中缺了一块。在单元格内放一个透明的GIF图像，然后将【宽度】和【高度】都设置为1，这样就可以同时兼容IE和NS了。 如何实现当鼠标移到某个单元格上时，该单元格自动变换背景色 利用onMouseOver和onMouseOut可以实现当鼠标移到表格中某个单元格上时，该单元格会自动变换颜色，onMouseOver是指当鼠标指针指向对象时，onMouseOut是指当鼠标指针移开时，具体操作步骤如下。 1.将光标放置在相应的位置，选择菜单中的【插入】|【表格】命令，插入1行9列的表格，在【属性】面板中将【高】设置为23像素，【对齐】设置为【居中对齐】。如图6-18 Dreamweaver基础篇 Dreamweaver -----基础教案 Dreamweaver基础篇 第六讲 表格的应用 回顾 ?了解超级链接的基本概念 ?掌握创建链接的方法 ?掌握外部链接的创建 ?掌握E-mail链接的创建 ?掌握锚点链接的创建 ?掌握图像热点链接的创建 ?掌握超级链接的常见技巧 学习目标 掌握表格的插入 掌握表格属性的设置 掌握选择表格的方法 掌握编辑表格和单元格 掌握利用表格布局网页 掌握利用表格布局网页时的常见技巧 6.1 插入表格 在Dreamweaver中，表格可以用于制作简单的图表，还可以用于安排网页文档的整体布局，起着非常重要的作用。利用表格设计页面布局，可以不受分辨率的限制。 表格基础是随着添加正文或图像而扩展的。表格由行、列和单元格3部分组成。行贯穿表格的左右，列则是上下方式的。单元格是行和列交汇的部分，它是输入信息的地方。单元格会自动扩展到与输入信息相适应的尺寸。如果设置了表格边框，浏览器会显示表格边框和其中包含的所有单元格。如图6-1，6-2，6-3： 【行】：表格中的水平间隔。 【列】：表格中的垂直间隔。 【单元格】：表格中一行与一列相交所产生的区域。 在Dreamweaver中插入表格非常简单，具体操作步骤如下。 1.将光标放置在要插入表格的位置，选择菜单中的【插入】|【表格】命令，打开【表格】对话框，在对话框中将【行数】设置为4，【列数】设置为2，【单元格宽度】设置为550像素。 如图6-4： 2.单击【确定】按钮，插入表格。 提示：单击【常用】插入栏中的冒按钮，打开【表格】对话框，设置各项参数插入表格。 3.在表格中输入相应的文字。 6.2 设置表格的各项属性 直接插入的表格有时并不能让人满意，在Dreamweaver中，通过设置表格或单元格的属性，可以很方便地修改表格的外观。 设置表格的属性 设置表格属性的具体操作步骤如下。 选中要设置属性的表格，在【属性】面板中将【间距】设置为l，【对齐】设置为【居中对齐】，【边框】设置为l，【边框颜色】设置为#D00DFF。如图6-5： 表格【属性】面板参数如下。如图6-6： 【表格Id】：输入表格的名称。 【行】和【列】：输入表格的行数和列数。 【宽】和【高】：输入表格的宽度和高度，其单位可以是像素或百分比。 【像素】：选择该项，表明该表格的宽度值是像素值，这时表格的宽度是绝对宽度，不随浏览器窗口的变化而变化。 【百分比】：选择该项，表明该表格的宽度值是表格宽度与浏览器窗口宽度的百分比数值，这时表格的宽度是相对宽度，它会随着浏览器窗口大小的变化而变化。 【填充】：单元格内容和单元格边界之间的像素数。 【间距】：相邻的表格单元格间的像素数。 【对齐】：设置表格的对齐方式，有【默认】、【左对齐】、【居中对齐】和【右对齐】4个选项。 【边框】：用来设置表格边框的宽度。 【背景颜色】：设置表格的背景颜色。 【边框颜色】：设置表格的边框颜色。 【背景图像】：设置表格的背景图像。 ：用于清除列宽。 ：将表格宽由百分比转换为像素。 ：将表格宽由像素转换为百分比。 ：用于清除行高。 ：将表格高由百分比转换为像素。 ：将表格高由像素转换为百分比。 提示：如果没有明确指定表格边框的值，大多数浏览器按表格边框为l显示表格。 设置单元格属性 设置单元格