第七章 DW中的表格.ppt

第七章 DW 中的表格?表格的创建?表格实例?表格的网页定位?总结表格的创建: Insert/Table ,然后弹出一个窗口,如图: Rows :行数 Columns :列数 Width :宽度,可以是相对比例(百分数),也可以是绝对尺寸。 Border :边线是否可见, 0 代表无边线; 1 代表有边线。 Cell Padding :单元格中内容与单元格边线之间的距离。 Cell Spacing :单元格与单元格之间的距离。提示: 创建表格时,如果开始不能确定它的属性,可以使用默认值,然后再通过属性面板进行修改;另外,关于 Width 的设定,一般来说,大表格往往采用绝对尺寸,表格中所套的表格采用相对尺寸,这样定位出来的网页才不会随着显示器分辩率的差异而引起混乱。表格的基本属性设置好后,点按 OK ,这时编辑窗口会出现一个空白表格,如果属性面板打开的话,其属性面板变成如图的样式: 除了上面已经介绍的参数外,属性面板还提供了其他的参数: Align :表格的对齐方式,分别是居左,居中,居右。 Bgcolor :表格的背景颜色。 Brdr Color :边线颜色,只有当 Border 参数为 1 即边线显现时本参数才有意义。 BgImage :表格的背景图片。:清除行高与列宽。:根据表格的当前值,分别将表格比例改为绝对尺寸或者相对比例尺寸。提示: 表格的背景颜色,既可以是整个表格,也可以是某个单元格, (也就是说大表格用一种颜色,某个或某些单元格用另外的颜色。) 因此它的灵活设置往往可以创建出别具一格的网页配色;清除行高与列宽的主要作用是创建规则的表格,制作好表格后,在向单元格输入数据时, Dreamweaver 往往会改变表格单元格尺寸大小,让你本来定置好的表格变得面目全非,这时就可以用清除行高与列宽命令,将表格缩到最小,然后再通过属性面板上的 Width ,重新设置表格的宽度,这时一个规则,均匀的表格就出现了。上面我们谈到的是表格的属性,当取消选择,随便用鼠标点一下任意单元格时,属性面板又会变成另外一种式样,让我们可以对该单元格进行设置,如图的上半部分,可以对表格中字体,链接等进行设置,是属性面板的默认参数,具体解释可见前面的章节;下半部分则是对单元格进行参数设置,它们分别是: Horz :水平位置。 Vert :垂直位置。 W:单元格宽度,可以是百分数(如两个单元格组成一个表格,一个单元格可以设值为 30% ,另一个则设值为 70% ),也可以是绝对尺寸。 H:单元格高度。 No Wrap :强制不断行,所有内容在一行显示。值得提醒的是,此参数往往撑大整个表格,建议不要选。上面的 Bg :单元格背景图片。下面的 Bg :单元格颜色。合并/拆分表格: 合并表格,可以把一行或者一列单元格合并成一个,也可以把同行或同列中某几个单元表格合并起来;拆分表格,可以将一个单元格拆分成几个按行或按列排列的单元格。提示: 合并与拆分表格命令非常有用,它往往是创建复杂表格的最重要的步骤。表格实例: 这个表格是如何制作的呢?(详情请见 中的 )下面就是它的制作过程: 命令,首先建立一个四行三列的表格。如图 (用鼠标点一下第二个表格,然后鼠标按住不放,拖到第三个表格),这时你会发现,后两个表格以高亮进行显示。如图 ,结果如图 ,点按合并单元格图标,结果如图 。提示: 表格的制作方法有很多种,上面我们给出的仅仅是一种做法,你也可以先定制一个三行三列,甚至一行一列的表格,然后通过合并与拆分来完成后面的工作。表格的网页定位: 表格的网页定位,主要是通过将网页内容分成若干个区,然后将相应的内容分别填入不同的表格,从而做成非常规范与专业的网页。上面我们明白了表格的制作方法,下面我们通过一个实例来讲解表格的网页定位技术。大家对"互动学校"这个页面比较感兴趣吧?它看起来有点复杂,不过当你静下心来仔细想一下,你就会明白,它其实是由若干个表格做成的。如图 : 由两个大的表格组成: 上面大表格是图片区,下面是导航区。图片区分为一行两列,左边是赛迪网的 LOGO ,右边是其他图片信息区。图片信息区中插入了一个两行两列的表格,上面一行,将两个单元格合并成一个,然后放上"赛迪信息","赛迪商务","赛迪资询",以及一个防止变形的白色图片;下面一行,左边是互动学校的动画图标,右边单元格中再插入一个三行一列的表格,并加上带链接的"赛迪寻呼","赛迪社区", "信息助理"。下面的表格分为一行两列,前面空格中输入带链接的" 资讯中心| 技术天地| 软件特供| IT 财经| 市场专家| 互动学校