06表格的相关操作教学课件 高教版 中职 网页设计与制作（Dreamweaver CS5） .ppt

06表格的相关操作教学课件 高教版 中职 网页设计与制作（Dreamweaver CS5）表格的相关操作静态网站制作教学资源课件静态网站制作教学资源课件 单击“插入”菜单中的“表格”命令，或单击“插入”工具栏“常用”选项卡中的“表格”按钮，都可以打开“表格”对话框来插入表格。插入表格插入表格“表格宽度”：用于设置表格的总宽度，有两种单位：百分比或是像素。如果以像素为单位，则表格的宽度不会随着显示窗口的变化而改变。一般情况下，网页的总体布局表格都采用像素为单位。而“%”是一个相对单位，是相对于外层容器而言的，如显示屏幕的宽度、框架的宽度、外层单元格的宽度或层的宽度等，内层的嵌套表格才会采用该单位。“边框粗细”：用于设置表格边框的宽度，以像素为单位。如果用户没有明确指定，则大多数浏览器默认边框值为“1”像素，而布局表格的边框粗细一般应为0。“边距”和“间距”：边距是指单元格中文本与单元格边框之间的距离，而间距是指单元格之间的距离，如图2.28所示。插入表格实例实例4：在“练习”站点的“gywm.html”插入如图2.23所示的布局表格。1.插入整个页面的布局表格：表格一，宽度：960像素，行数为6，列数为1，“边框粗细”为0像素，“单元格边距”为0像素，“单元格间距”为0像素。2.在表格“属性”面板的“对齐”属性中选择“居中对齐”，如图2.29所示。插入表格实例图2.29表格“属性”面板（3）在表格一的第二行，插入导航栏的布局表格：表格二，表格宽度：800像素，行数为1，列数为19，“边框粗细”为0像素，“单元格边距”为0像素，“单元格间距”为0像素。（4）在表格“属性”面板中设置表格二为“居中对齐”（5）在表格一的第四行插入页面中部的布局表格：表格三，表格宽度：960像素，行数为1，列数为3，“边框粗细”为0像素，“单元格边距”为0像素，“单元格间距”为0像素。选择表格元素将鼠标移动到表格的上部或底部边缘的外侧，当光标变成表格状态时单击。单击表格中任一单元格，然后在文档窗口左下角任务栏的标签选择器中选择标签。单击表格任一单元格后，单击“修改”菜单“表格”命令中的“选择表格”。表格选中后，所选表格的下边框和右边框会出现选择控制点，如图2.30所示。选择表格元素 选择行或列的方法：移动光标到表格的左边缘或列的上边缘，当光标变成向右或向下的箭头时单击。选择单个单元格：在单元格中单击鼠标，然后在任务栏的标签选择器中选择标签。设置表格属性 选中表格后，属性面板如图2.31所示。在表格的属性面板中，各主要选项的功能如下：“表格”下拉列表框：用于设置表格的Id，即表格的名称，将显示在表格标签里，如“”，这样就可以直接对该表格编写脚本代码。设置表格属性“填充”文本框：用于设置单元格内容和单元格边界之间的宽度，功能同于“表格”对话框中的“单元格边距”。“间距”文本框：用于设置相邻的单元格之间的像素值，功能同于“表格”对话框中的“单元格间距”。“清除列宽”按钮 和“清除行高”按钮 ：用于删除表格中已设置的行高或列宽值。“将表格宽度转换成像素”按钮 ：用于将表格中每列的宽度单位设置为像素。“将表格宽度转换成百分比”按钮 ：用于将表格中每列的宽度单位设置为表格总宽度的百分比。设置单元格属性 单元格的属性面板如图2.31所示。各主要选项的功能如下：“水平”文本框用来设置单元格内元素的水平排版方式，是居左、居右或是居中。设置单元格属性“垂直”文本框用来设置单元格内的垂直排版方式，是顶端对齐、底端对齐、基线对齐或是居中对齐。“不换行”复选框可以防止单元格中较长的文本自动换行。“标题”复选框使选择的单元格成为标题单元格，单元格内的文字自动以标题格式显示出来。实例实例5：用表格制作如图2.33所示的文本导航栏布局表格。1、将插入点光标移到实例4表格一的第二行中，在属性面板上方左侧的标签选择器 中选择行标签，即选择表格一中的第二行，在如图2.34所示的“行”属性面板中，将其行高设为“30”，在“背景颜色”框中输入“#0066CB”，为导航栏设置背景颜色，分别设置单元格中内容的“水平”对齐方式和“垂直”对齐方式为“居中对齐”。2、将插入点光标移到导航栏表格的第一个单元格中，在“单元格”属性面板中设置“宽”度为“77”，如图2.35所示，将该单元格的宽度设为“77”像素，分别设置单元格中内容的“水平”对齐方式和“垂直”对齐方式为“居中对齐”。3、将插入点光标移到表格二的第二个单元格中，在“单元格”属性面板中的“宽”列表值中输入“3”，将该单元格的宽度设为“3”像素，分别设置单元格中内容的“水平”对齐方式和“垂直”对齐方式为“居中对齐”。4、重复（2）、（3）步操作直至完成如图2.36所示的文本导航栏布局表格。