资源预览内容
第1页 / 共30页
第2页 / 共30页
第3页 / 共30页
第4页 / 共30页
第5页 / 共30页
第6页 / 共30页
第7页 / 共30页
第8页 / 共30页
第9页 / 共30页
第10页 / 共30页
亲,该文档总共30页,到这儿已超出免费预览范围,如果喜欢就下载吧!
资源描述
第3章 表格 本章要点 o 表格的创建与编辑 o 格式化表格 o 插入Flash动画 o 合理布局制作一个页面 3.1 创建表格与编辑表格 3.1.1 表格的创建 3.1.2 编辑表格与排版 3.1.3 格式化表格 3.1.1 表格的创建 o 表格的三个基本组成部分 n 行,表格中的水平间隔。 n 列,表格中的垂直间隔。 n 单元格,表格中一行与一列相交所产生的区域 ,用来存放图片或文字 o 表格的创建 n 执行【插入】|【表格】命令,在弹出的【表格 】对话框中进行相应的设置即可完成表格的创 建。 o 例如:设置行数4,列数3,表格宽度750像素 ,边框粗细0像素,单元格边距0像素,单元 格间距0像素,设置完后单击【确定】按钮。 在【属性】面板中将表格的高设置为200像素 。 可视化助理 o 选中整个表格后,表格下方有绿色的线条、 数字和下三角按钮,它们是Dreamweaver 8提供的“可视化助理”中的表格宽度,就像 标尺一样,数字“750”表示表格的宽度,而 单击右边的下三角按钮可以进行一些设置。 3.1.2 编辑表格与排版 1选择单元格 2调整列的宽度和行的高度 3插入和删除行和列 4拆分和合并单元格 5表格的嵌套 1选择单元格 (1)选择单个的单元格。 (2)连续选择多个单元格。 (3)选择一行或一列。 (4)选择多个非连续的单元格。 (5)选择整个表格。 (1)选择单个的单元格 o 方法 n 在需要选择的单元格中单击鼠标,然后按住鼠 标左键不放,同时向相邻的单元格方向拖动, 这时候单元格就出现黑色边框,表示被选中。 n 按下键盘上的Ctrl键,在单元格上单击鼠标可以 选中单元格。 n 或者在单元格上单击鼠标后,按快捷键Ctrl+A ,也可以选中单元格。 (2)连续选择多个单元格 o 方法 n 横向选择连续的单元格 o 比如,从第一行第一列开始,在第一个单元格中单 击鼠标,然后按住鼠标左键不放并向相邻的单元格 拖动,直到需要选中的单元格出现黑色的边框时释 放鼠标,可以看到,需要选择的单元格已经全部被 选中了。 n 纵向选择连续的单元格 (3)选择一行或一列 o 选择整行单元格 n 可以将鼠标移动到行的最左边,当光标变成一 个向右箭头的时候,单击就可以选中整行单元 格。 o 选择整列单元格 n 将鼠标移动到列的最上面,当光标变成一个向 下箭头的时候,单击就可以选中整列单元格。 n 还可以通过单击相应列下面的绿色下三角按钮 ,在弹出的下拉菜单中单击【选择列】命令。 (4)选择多个非连续的单元格 o 如果要选择多个非连续的单元格,只要按下 Ctrl键,依次单击要选择的单元格,直到所 需要的单元格全部被选中为止。 (5)选择整个表格 o 方法 n 在第一个单元格中单击鼠标,然后按住鼠标左 键不放,向右下角最后一个单元格拖动,直到 所有单元格已经全部被选中。 n 可以将鼠标移动到单元格的边框上,当鼠标变 成 形状时单击,也可以选中整个表格。 n 或者把光标定位到其中一个单元格中,按两次 快捷键Ctrl+A,也可以选中整个表格。 n 还可以单击“750”旁边的绿色下拉按钮。在下拉 菜单中单击【选择表格】命令。 2调整列的宽度和行的高度 o 改变列宽度的方法 n 将鼠标移动到表格的列边框上,当出现 形状 的时候,左右拖动改变列的宽度; n 按照提示 “按键盘上的Shift键并拖动可以保留 其他列的宽度”进行调整。这种调整会使整个表 格的宽度发生变化。 o 改变行高度的方法 n 与改变列宽度的方法相同。 3插入和删除行或列(一) o 插入行或列的方法 n 执行【修改】|【表格】|【插入行或列】命令,弹 出【插入行或列】对话框,在【插入】中选择【行 】或者【列】,并确定要插入的行数或列数以及插 入的位置,设置完后单击【确定】按钮。 n 也可以直接在单元格中右击鼠标,在弹出的快捷菜 单中,选择【表格】菜单中的相应命令来插入行或 列。 n 还可以单击列对应的绿色下拉按钮,在弹出的下拉 菜单中选择【插入列】命令。 3插入和删除行或列(二) o 删除行或列的方法 n 选中行或列后执行【修改】|【表格】|【删除行 】或者【删除列】来实现; n 也可以用鼠标右键单击需要删除的行或列,在 弹出的快捷菜单中选择相应命令,进行行与列 的操作。 4拆分和合并单元格 o 拆分单元格 n 用鼠标右键单击要拆分的单元格,选择【表格】 子菜单中的【拆分单元格】命令; n 或者执行【修改】|【表格】|【拆分单元格】命 令即可。 o 合并单元格 n 鼠标右键单击要合并的单元格,在弹出的菜单中 选择【表格】子菜单中的【合并单元格】命令; n 或者执行【修改】|【表格】|【合并单元格】命 令即可。 5表格的嵌套 o 概念 n 所谓表格的嵌套,其实就是在一个单元格中插 入一个表格。 o 举例 n 例如在第三行第二列的单元格中插入一个表格 ,只要将光标放置到该单元格中,执行【插入 】|【表格】命令,设置完表格的参数后,单击 【确定】按钮即可。 o 把光标定位到插入表格的单元格中,在【属性】面板 中打开【水平】下拉菜单,选择【居中对齐】,打开 【垂直】下拉菜单,选择【居中】,将插入的表格在 单元格中居中对齐,效果如下图所示。 3.1.3 用表格构建完整的页面 一、网页顶部(一般包括图标、广告、导航菜 单) 1、创建一个1行2列,宽为760像素,边框及 边距均为0的表格。 2、选中表格,设置排列方式为居中对齐,背 景色为#3366CC。 3、将光标置于左边单元格中,设置其水平排 列为左对齐,垂直排列为顶端对齐,然后插 入一张图像,一般在此插入的是网站的图标 ,即logo。 3.1.3 用表格构建完整的页面 4、将光标置于右边单元格中,设置其宽度为 500,水平排列为居中对齐,垂直排列为中 间,然后插入图像,一般是网页广告,即 banner。 5、将光标置于刚完成的表格之后,插入/表格 ,创建一个1行1列,宽为760像素,边框及 边距均为0的表格。 6、选中刚创建的表格,设置排列方式为居中 对齐,背景色为#005173。 7、在该表格中依次插入多个图像,作为导航 条菜单。 3.1.3 用表格构建完整的页面 二、网页中部(左边栏目列表、中间网站新闻 、右边栏目列表) 1、在导航条表格后面,插入/表格,创建一个1行3列 ,宽为760像素,边框及边距均为0的表格。并设 置排列方式为居中对齐,背景色为#FFFFFFF。 2、将光标置于左边单元格中,设置其宽度为18%, 水平排列为居中对齐,垂直排列为顶端对齐,然后 插入一张图像,插入一个导航条。 3、将光标置于刚插入的图片后,插入/表格,插入一 个12行1列,宽为90%的表格。设置其单元格间距 为1,背景色为#CCCCCC。 3.1.3 用表格构建完整的页面 4、将光标放在表格第一个单元中,设置其高为20 ,背景色为#FFFFFF。插入/图像,插入一个导 航文字前面的小点。同样设置其他11个单元格 ,这样左边的栏目分类列表就完成了。 5、将光标置于主体表格的中间单元格中,设置其 宽度为66%,水平排列为居中对齐,垂直排列为 顶端对齐,然后插入/图像,插入一个导航条。 6、将光标置于图像后,插入/表格,插入一个4行 1列,宽为95%的表格。设置其单元格间距为1, 背景色为#CCCCCC。 7、将光标置于表格的第一个单元格中,拖动鼠标 ,将4个单元格都选中,设置高为60,背景色为 #FFFFFF。 3.1.3 用表格构建完整的页面 8、将光标置于主体表格右边的单元格中,设置其宽度 为16%,水平排列为居中对齐,垂直排列为顶端 对齐,插入/图像,插入一个导航条。 9、将光标置于图像后,插入/表格,插入一个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、选中表格,设置排列方式为居中对齐,背景色为 #3366CC。 3、将光标置于表格第1行的左边单元格中,设置其宽 度为50%,水平排列为默认,垂直排列为基线, 背景色为#FFFFFF,然后输入版权信息,内容颜 色随便。 4、将光标置于表格第1行右边单元格中,插入/图像 ,插入一个圆角图像,在它后面输入Email字样, 设置其大小和颜色为1和#FFFFFF。 3.1.3 用表格构建完整的页面 5、插入/表单对象/文本域,插入一个文本域,宽度 可以随意。 6、插入/图像,插入一个GO的图像。 7、设置页属性。点击菜单修改/页面属性,在标题 一栏中输入标题,并选择背景图像,将顶部边界 设为0。 说明:将整个网页分部分放到不同的表格中组合而成 ,还可以加快浏览器读取页面的时间。因为浏览器 是读完整个表格后才显示内容的,所以最好不要框 在整个一个表格中。 3.2 应用表格 3.2.1 表格的插入和设置 3.2.2 Flash动画的插入及页面制作 3.2.1 表格的插入和设置 3.2.2 Flash动画的插入及页面制作 导入SWF文件:插入/媒体/FLASH 知识回顾知识回顾 Knowledge Knowledge ReviewReview
网站客服QQ:2055934822
金锄头文库版权所有
经营许可证:蜀ICP备13022795号 | 川公网安备 51140202000112号