Dreamweaver3-表格.ppt

1、DW3表格布局,本章要点,表格的创建与编辑 格式化表格 插入Flash动画 合理布局制作一个页面,3.1创建表格与编辑表格,3.1.1表格的创建 3.1.2编辑表格与排版 3.1.3格式化表格,3.1.1表格的创建,表格的三个基本组成部分 行，表格中的水平间隔。 列，表格中的垂直间隔。 单元格，表格中一行与一列相交所产生的区域，用来存放图片或文字 表格的创建 执行【插入】|【表格】命令，在弹出的【表格】对话框中进行相应的设置即可完成表格的创建。,例如：设置行数4，列数3，表格宽度750像素，边框粗细0像素，单元格边距0像素，单元格间距0像素，设置完后单击【确定】按钮。在【属性】面板中将表格的高

2、设置为200像素。,可视化助理,选中整个表格后，表格下方有绿色的线条、数字和下三角按钮，它们是Dreamweaver 提供的“可视化助理”中的表格宽度，就像标尺一样，数字“750”表示表格的宽度，而单击右边的下三角按钮可以进行一些设置。,3.1.2编辑表格与排版,1选择单元格 2调整列的宽度和行的高度 3插入和删除行和列 4拆分和合并单元格 5表格的嵌套,1选择单元格,（1）选择单个的单元格。 （2）连续选择多个单元格。 （3）选择一行或一列。 （4）选择多个非连续的单元格。 （5）选择整个表格。,（1）选择单个的单元格,方法 在需要选择的单元格中单击鼠标，然后按住鼠标左键不放，同时向相邻的单

3、元格方向拖动，这时候单元格就出现黑色边框，表示被选中。 按下键盘上的Ctrl键，在单元格上单击鼠标可以选中单元格。 或者在单元格上单击鼠标后，按快捷键Ctrl+A，也可以选中单元格。 选中标志：黑色边框,（2）连续选择多个单元格,方法 横向选择连续的单元格 比如，从第一行第一列开始，在第一个单元格中单击鼠标，然后按住鼠标左键不放并向相邻的单元格拖动，直到需要选中的单元格出现黑色的边框时释放鼠标，可以看到，需要选择的单元格已经全部被选中了。 纵向选择连续的单元格,（3）选择一行或一列,选择整行单元格 可以将鼠标移动到行的最左边，当光标变成一个向右箭头的时候，单击就可以选中整行单元格。 选择整列单

4、元格 将鼠标移动到列的最上面，当光标变成一个向下箭头的时候，单击就可以选中整列单元格。 还可以通过单击相应列下面的绿色下三角按钮，在弹出的下拉菜单中单击【选择列】命令。,（4）选择多个非连续的单元格,如果要选择多个非连续的单元格，只要按下Ctrl键，依次单击要选择的单元格，直到所需要的单元格全部被选中为止。,（5）选择整个表格,方法 在第一个单元格中单击鼠标，然后按住鼠标左键不放，向右下角最后一个单元格拖动，直到所有单元格已经全部被选中。 可以将鼠标移动到单元格的边框上，当鼠标变成 形状时单击，也可以选中整个表格。 或者把光标定位到其中一个单元格中，按两次快捷键Ctrl+A，也可以选中整个表格

5、。 还可以单击“750”旁边的绿色下拉按钮。在下拉菜单中单击【选择表格】命令。,2调整列的宽度和行的高度,改变列宽度的方法 将鼠标移动到表格的列边框上，当出现 形状的时候，左右拖动改变列的宽度，总宽度不变； 按照提示 “按键盘上的Shift键并拖动可以保留其他列的宽度”进行调整。这种调整会使整个表格的宽度发生变化。 改变行高度的方法 与改变列宽度的方法相同。,3插入和删除行或列（一）,插入行或列的方法 执行【修改】|【表格】|【插入行或列】命令，弹出【插入行或列】对话框，在【插入】中选择【行】或者【列】，并确定要插入的行数或列数以及插入的位置，设置完后单击【确定】按钮。 也可以直接在单元格中右

6、击鼠标，在弹出的快捷菜单中，选择【表格】菜单中的相应命令来插入行或列。 还可以单击列对应的绿色下拉按钮，在弹出的下拉菜单中选择【插入列】命令。,3插入和删除行或列（二）,删除行或列的方法 选中行或列后执行【修改】|【表格】|【删除行】或者【删除列】来实现； 也可以用鼠标右键单击需要删除的行或列，在弹出的快捷菜单中选择相应命令，进行行与列的操作。,4拆分和合并单元格,拆分单元格 用鼠标右键单击要拆分的单元格，选择【表格】子菜单中的【拆分单元格】命令； 或者执行【修改】|【表格】|【拆分单元格】命令即可。 合并单元格 鼠标右键单击要合并的单元格，在弹出的菜单中选择【表格】子菜单中的【合并单元格】命

7、令； 或者执行【修改】|【表格】|【合并单元格】命令即可。,5表格的嵌套,概念 所谓表格的嵌套，其实就是在一个单元格中插入一个表格。 举例 例如在第三行第二列的单元格中插入一个表格，只要将光标放置到该单元格中，执行【插入】|【表格】命令，设置完表格的参数后，单击【确定】按钮即可。,把光标定位到插入表格的单元格中，在【属性】面板中打开【水平】下拉菜单，选择【居中对齐】，打开【垂直】下拉菜单，选择【居中】，将插入的表格在单元格中居中对齐，效果如下图所示。,3.1.3用表格构建完整的页面,一、网页顶部（一般包括图标、广告、导航菜单） 1、创建一个1行2列，宽为760像素，边框及边距均为0的表格。 2

8、、选中表格，设置排列方式为居中对齐，背景色为#3366CC。 3、将光标置于左边单元格中，设置其水平排列为左对齐，垂直排列为顶端对齐，然后插入一张图像，一般在此插入的是网站的图标，即logo。,3.1.3用表格构建完整的页面,4、将光标置于右边单元格中，设置其宽度为500，水平排列为居中对齐，垂直排列为中间，然后插入图像，一般是网页广告，即banner。 5、将光标置于刚完成的表格之后，插入/表格，创建一个1行1列，宽为760像素，边框及边距均为0的表格。 6、选中刚创建的表格，设置排列方式为居中对齐，背景色为#005173。 7、在该表格中依次插入多个图像，作为导航条菜单。,3.1.3用表格

9、构建完整的页面,二、网页中部（左边栏目列表、中间网站新闻、右边栏目列表） 1、在导航条表格后面，插入/表格，创建一个1行3列，宽为760像素，边框及边距均为0的表格。并设置排列方式为居中对齐，背景色为#FFFFFFF。 2、将光标置于左边单元格中，设置其宽度为18%，水平排列为居中对齐，垂直排列为顶端对齐，然后插入一张图像，插入一个导航条。 3、将光标置于刚插入的图片后，插入/表格，插入一个12行1列，宽为90%的表格。设置其单元格间距为1，背景色为#CCCCCC。,3.1.3用表格构建完整的页面,4、将光标放在表格第一个单元中，设置其高为20，背景色为#FFFFFF。插入/图像，插入一个导航

10、文字前面的小点。同样设置其他11个单元格，这样左边的栏目分类列表就完成了。 5、将光标置于主体表格的中间单元格中，设置其宽度为66%，水平排列为居中对齐，垂直排列为顶端对齐，然后插入/图像，插入一个导航条。 6、将光标置于图像后，插入/表格，插入一个4行1列，宽为95%的表格。设置其单元格间距为1，背景色为#CCCCCC。 7、将光标置于表格的第一个单元格中，拖动鼠标，将4个单元格都选中，设置高为60，背景色为#FFFFFF。,3.1.3用表格构建完整的页面,8、将光标置于主体表格右边的单元格中，设置其宽度为16%，水平排列为居中对齐，垂直排列为顶端对齐，插入/图像，插入一个导航条。 9、将光

11、标置于图像后，插入/表格，插入一个7行一列，宽为90%的表格。设置其间距为1，背景色为#CCCCCC。 10、按住Ctrl键，用鼠标点击刚插入的表格的第1、3、5、7单元格，然后设置它们的高为55，背景色为#FFFFFF。 11、选中第2、4、6单元格，设置其高为6，背景色为#FFFFFF。 12、切换到源代码窗口，将第2、4、6单元格中的空格符号“ ”删除。,3.1.3用表格构建完整的页面,三、网页底部（一般包括版权信息及其他相关内容） 1、将光标置于主体表格后，插入/表格，创建一个2行2列，宽为760像素，边框及边距均为0的表格。 2、选中表格，设置排列方式为居中对齐，背景色为#3366C

12、C。 3、将光标置于表格第1行的左边单元格中，设置其宽度为50%，水平排列为默认，垂直排列为基线，背景色为#FFFFFF，然后输入版权信息，内容颜色随便。 4、将光标置于表格第1行右边单元格中，插入/图像，插入一个圆角图像，在它后面输入Email字样，设置其大小和颜色为1和#FFFFFF。,3.1.3用表格构建完整的页面,5、插入/表单对象/文本域，插入一个文本域，宽度可以随意。 6、插入/图像，插入一个GO的图像。 7、设置页属性。点击菜单修改/页面属性，在标题一栏中输入标题，并选择背景图像，将顶部边界设为0。 说明：将整个网页分部分放到不同的表格中组合而成，还可以加快浏览器读取页面的时间。因为浏览器是读完整个表格后才显示内容的，所以最好不要框在整个一个表格中。,3.2应用表格,3.2