网页设计与制作第3章.ppt
3.1创建及编辑表格 3.1.1创建表格 3.1.2编辑表格 3.2表格的应用 3.2.1细线表格效果的制作 3.2.2格式化表格 3.2.3分隔线的制作 3.2.4虚线框表格的制作 3.2.5导入表格数据 3.2.6表格排序,第 3 章,表格的应用,3.3表格应用综合实例 3.3.1创建表格 3.3.2插入Flash动画3.4习题与上机操作,创建及编辑表格制作各种表格效果在网页中插入Flash动画能够制作简单的网页,教学进程,本章要点：,3.1 创建及编辑表格,3.1.1 创建表格,教学进程,创建表格的方法,（1）将光标移到要插入表格的位置。（2）在【插入】工具栏中选择【常用】项，单击【表格】按钮，或者执行【插入】|【表格】命令。,1,设置表格的参数,【行数】：确定要创建的表格有几行。【列数】：确定要创建的表格有几列。【表格宽度】：设置表格的宽度。【边框粗细】：设置表格边框的宽度。0就表示没有边框。【单元格边距】：指单元格内容和单元格边框之间的距离，以“像素”为单位。【单元格间距】：单元格和单元格之间的距离，以“像素”为单位。【页眉】：可以选择4种页眉模式。【辅助功能】：可以输入表格的标题、选择标题的对齐模式和输入摘要等信息。,3.1.1 创建表格,2,教学进程,教学进程,3.1.2 编辑表格,选择单元格,选择单个的单元格,连续选择多个单元格,选择多个非连续的单元格,选择整个表格,教学进程,3.1.2 编辑表格,调整列的宽度和行的高度,方法一,将鼠标移动到表格的列边框或行边框上，当出现“双箭头”形状的时候，就可以左右拖动来改变它们的宽度或高度。,可以在属性面板中改变对应的参数,方法二,教学进程,3.1.2 编辑表格,插入行和列,方法一,直接在单元格中右击鼠标，在弹出的快捷菜单中，选择【表格】菜单中的相应命令。,执行【修改】|【表格】|【插入行或列】命令,方法二,单击列或行对应的绿色下三角按钮，在弹出的下拉菜单中选择相应命令。,方法三,教学进程,3.1.2 编辑表格,拆分单元格,方法一,选中要拆分的单元格，用鼠标右键单击它，选择【表格】子菜单中的【拆分单元格】命令,执行【修改】|【表格】|【拆分单元格】命令,方法二,教学进程,3.1.2 编辑表格,合并单元格,方法一,首先选中要合并的两个单元格，然后用鼠标右键单击它们，在弹出的菜单中选择【表格】子菜单中的【合并单元格】命令,或者执行【修改】|【表格】|【合并单元格】命令,方法二,教学进程,3.1.2 编辑表格,表格的嵌套,含义,所谓表格的嵌套，其实就是在一个单元格中插入一个表格。,只要将光标放置到单元格中，执行【插入】|【表格】命令即可。,方法,教学进程,3.2 表格的应用,3.2.1 细线表格效果的制作,制作步骤,（1）插入2行1列的表格（2）将表格的背景设置为黑色（3）选择所有单元格，将背景设置为白色（4）按F12键，观看效果,教学进程,3.2.2 格式化表格,Dreamweaver 8内置了格式化的表格库。选中表格，执行【命令】|【格式化表格】命令。,(1),教学进程,插入一行一列的表格将高度设置为1，可以设置背景颜色,(2),切换到【代码视图】单元格代码为：,(3),将空格代码“”删除,3.2.3 分隔线的制作,方法,教学进程,制作虚线框表格的一种最简单的方法，就是利用表格背景图片来实现。,3.2.4 虚线框表格的制作,效果,导入表格式数据,可以将一些具有制表符、逗号、分号、引号或者其它分隔符格式化好了的表格导入到网页文档中。,教学进程,3.2.5 导入表格数据,对于需要在网页中放置大量格式化数据的情况提供了更加快捷、方便的方法。,教学进程,执行【命令】|【排序表格】命令,3.2.6 表格排序,教学进程,3.3 表格应用综合实例,3.3.1 创建表格,插入一个4行2列，宽750像素，高200像素的表格,1,合并部分单元格,2,表格居中，背景为白色,3,教学进程,3.3.1 创建表格,执行【修改】|【页面属性】命令,1,文字为默认字体，大小为14像素，文本为黑色，背景为灰色,2,左边距、右边距、上边距和下边距都设为0像素,3,设置表格的属性,教学进程,3.3.1 创建表格,将第一行第一列单元格的【宽】设为140，【高】设为120,1,将“logo.gif”文件拖动到第一行第一列的单元格中,2,插入Logo,教学进程,3.3.2 插入Flash动画,执行【插入】|【媒体】|【Flash】命令，插入Flash动画。,1,单击【属性】面板中的【播放】按钮，可观看动画效果。,2,教学进程,设置导航条背景,3,添加导航条内容,4,在左侧输入经典诗句,5,插入Flash动画文件,6,插入日期和版权信息,7,教学进程,3.4 习题与上机操作,问题题,（1）分别描述选择单个单元格、多个连续的单元格、多个不连续的单元格和整个表格的方法。,（2）在表格中，如何调整列的宽度和行的高度？,（3）如何制作单位像素宽的分隔线？,教学进程,上机操作题,（1）在站点目录下新建文件table.htm，插入一个1行3列的表格，插入logo、日期及Flash动画。（2）制作水平分隔线。（3）制作导航条，并书写文本。（4）插入一个1行4列的大表格，根据给定的效果图再进行细化，添加需要的文字及图片，得到最终的效果如下图所示。,
