
第4章表格与页面布局 一、要点解析 本章主要介绍表格的基本操作、单元格的基木操作、,表格的自动套用格式、表格的创建、 表格的编粗、创建布局单元和表格。 教学要求: 拿弄:如何插入、编網表格,创建布局单元和表格。 理解:表格在网页排版中的作用。 了解:使用页面布局模式进行国页排版的方法。 表格的几个同题 使用表格可以情来素地最示列表的数据。实将上表格的作用这这不止显小数据。它在网寅定位上一直园 看重要的作用,尤其是对于使用套正测莫器的网友米说,使用表格定位的网页比使用图层定位的网顶更具 有优势。 《一)创建表格 第一步:在Dreamwerer MX中话行播入→表格命令,弹出属性授置窗口,其中行和“列分别对应 看表感的行数和列数,堂度表示表格的宽度。面”边相则是边框的堂度,时还可以设定表格的样式。 根墨自己的首要来设置表格的相应属性即可, 小规示表格的宽度和高度可以适过刻宽基窗口百分比或者使用艳时像素值案定又,比如设置宽度为 留口宽度的60%,那么当润觉器留口大小变化时候表格的度度也随之变化:面如果授置宽度为400像素, 零么无论例蓖器窗口大小为多少,表格的宽度都不金变化。 播入表档 行数: 单元移镇充: 0 确定 列傲:2 单元您同更 0 果消 宽度:10 百分比 边相 0 图门表格对话标 第二步:点击窗口中的确定按枉之后即可在D©wener MX中新建一个表格,而且通过商口下花 的属性面极还可以对其过行者知表格线条的像色,表格的背景色,单元格的对齐方式等参数迪行调整
第 4 章 表格与页面布局 一、要点解析 本章主要介绍表格的基本操作、单元格的基本操作、表格的自动套用格式、表格的创建、 表格的编辑、创建布局单元和表格。 教学要求: 掌握:如何插入、编辑表格,创建布局单元和表格。 理解:表格在网页排版中的作用。 了解:使用页面布局模式进行网页排版的方法。 表格的几个问题 使用表格可以清晰地显示列表的数据,实际上表格的作用远远不止显示数据,它在网页定位上一直起 着重要的作用,尤其是对于使用非 IE 浏览器的网友来说,使用表格定位的网页比使用图层定位的网页更具 有优势。 (一)创建表格 第一步:在 Dreamweaver MX 中运行“插入→表格”命令,弹出属性设置窗口,其中“行”和“列”分别对应 着表格的行数和列数,“宽度”表示表格的宽度,而“边框”则是边框的宽度,同时还可以设定表格的样式, 根据自己的需要来设置表格的相应属性即可。 小提示:表格的宽度和高度可以通过浏览器窗口百分比或者使用绝对像素值来定义,比如设置宽度为 窗口宽度的 60%,那么当浏览器窗口大小变化的时候表格的宽度也随之变化;而如果设置宽度为 400 像素, 那么无论浏览器窗口大小为多少,表格的宽度都不会变化。 [图 1]表格对话框 第二步:点击窗口中的“确定”按钮之后即可在 Dreamweaver MX 中新建一个表格,而且通过窗口下部 的属性面板还可以对其进行诸如表格线条的颜色、表格的背景色、单元格的对齐方式等参数进行调整

(二)表格嵌套 第一步:新建一个网瓦,先把网顶设为国中对齐,再插入一个表格,定义为四行一列,度度为7%像 素,边配为T。 第二步:在利刚建好的表格上,点击一下第一行,再插入相关图片。 第三步,在表格的第二行插入一个一行四列的表格,每格宽度设为25%,居中对齐。写上栏日名称: 第四步:在表格的第三行加上文字和网面。 第五步,在表格的第因行授为居中对齐。如上水平线和饭权。效果如图, 欢迎光临我的主页 我的更好 执的相转 的作品 ,大家欢理加中山市首宿“家校通”网页制市培。这是我的个人主,望大家 喜欢 欢 迎 米 Cmo加30g2拾拉末度 图1 (三)表格编辑 观在网顶已经有了基本的结构,但不够完表,畏还可以2置各个表格的达和和青聚,使主真更加 观。首先速中第二行里帐套的里个表格,在表格属性里而设置膏最和边框。经过设置后,王页就会变成图 1的数果了, 欢迎光临我的主页 周阿节 欢 Cdrl址eaeh200u.12h表值 图
(二)表格嵌套 第一步:新建一个网页,先把网页设为居中对齐,再插入一个表格,定义为四行一列,宽度为“776 像 素”,边框为“0”。 第二步:在刚刚建好的表格上,点击一下第一行,再插入相关图片。 第三步:在表格的第二行插入一个一行四列的表格,每格宽度设为 25%,居中对齐,写上栏目名称。 第四步:在表格的第三行加上文字和动画。 第五步:在表格的第四行设为居中对齐,加上水平线和版权。效果如图 1。 [图 1] (三)表格编辑 现在网页已经有了基本的结构,但不够完表。我们还可以设置各个表格的边框和背景,使主页更加美 观。首先选中第二行里嵌套的那个表格,在表格属性里面设置背景和边框。经过设置后,主页就会变成图 1 的效果了。 [图 1]

二、典型例题 I、在Dreamweaver8中,下面的操作不能实现插入到下图浅黄区域一行的是( 量新新闻1 2006-12-2 +最新齐间2 200812-2 最新新闻3 200612-2 A。将光标定位在第三行单元格中,选择“修政”菜单下“表格”子装单中的“插 入行”命令 B。在第三行的一个单元格中单由鼠标右键,打开快捷菜单。选择“表格”子菜单 中的“插入行”命令 C,把光标定位在最后一行的第一个单元格中,将该单元格拆分为两行 D.将光标定位在最后一行的最后的一个单元格中,按下Tb健,在当前行下会添 如一个新行 参考容案:C 2、要将左图所示的表格修政为右图所示的状态,不能执行的操作是《D): 3-4ev4euf1 n有车w-44n 0和 0a·0国击aPm有wn色 0用·Q口孟0Pn有好m0 4 0由49 Macremedia Macromedia 左图 右图 A选中整个表格,在属性面板中将表格的行数从1改为2 B依次将左右单元格拆分为两行 C.将光标故在表格中的任意位置,执行俞令“修改/表格插入行或列”。在弹出的对 话框中选择插入行,行数为1,位置为“所选之下“ D.将光标成在表格中的任意位置,执行命令“修政表格插入行“ 3、制作如下图所示的表格效果,需要设置(B)
二、典型例题 1、在 Dreamweaver 8 中,下面的操作不能实现插入到下图浅黄区域一行的是( )。 A.将光标定位在第三行单元格中,选择“修改”菜单下“表格”子菜单中的“插 入行”命令 B.在第三行的一个单元格中单击鼠标右键,打开快捷菜单,选择“表格”子菜单 中的“插入行”命令 C.把光标定位在最后一行的第一个单元格中,将该单元格拆分为两行 D.将光标定位在最后一行的最后的一个单元格中,按下 Tab 键,在当前行下会添 加一个新行 参考答案:C 2、要将左图所示的表格修改为右图所示的状态,不能执行的操作是( D )。 左图 右图 A. 选中整个表格,在属性面板中将表格的行数从 1 改为 2 B. 依次将左右单元格拆分为两行 C. 将光标放在表格中的任意位置,执行命令“修改/表格/插入行或列”,在弹出的对 话框中选择插入行,行数为 1,位置为“所选之下” D. 将光标放在表格中的任意位置,执行命令“修改/表格/插入行” 3、制作如下图所示的表格效果,需要设置( B )

》4144.444g 0t·0日0P鞋女:好m⊙3, A第1行第1个单元格的cpm属性 B.第1行第1个单元格的Own属性 C.第3行第1个单元格的c0印m属性 D.第3行第1个单元格的Owpn属性 4、关于布同模式的使用,正确的有(ABD)。 A首先绘制布局表格,在布局表格中绘制布局单元格 B.拖拽鼠标在工作区直接绘制即可。绘制完毕后还可以调整表格或单元格的大小 C.要注意转换完毕之后,便不能再回到布局横式对表格进行修议,因此一定要慎重燥 作 D.绘制完坪后。在“布局”对象面板按下“标准视图”按粗,将绘制的布具表格转换 成传统表格形式 5、美于表格背景,说法正确的是(D)。 A贝能定义表格背最颜色,不能用图片作为表格有景 B.可以使用颜色或图片作为表格背景图,但图片格式必须是GF格式 C可以使用碳色或图片作为表格背景图,但图片格式必策是PEG格式 D.可以使用顾色或图片作为表格背景图,可以使用任何的GF或者PEG图片文件 6、段置表格的行数和列数,不陵采用的方法是(B). A在插入表格时设置表格的行数和列数 B.打开代码视图。在k>标签中修改相应属性,以修改表格的行数与列数 C.选中整个表格,在属性面版中修改其行数和列数 D.通过拆分,合并或制除行,列案修改行数与列数
A. 第 1 行第 1 个单元格的 colspan 属性 B. 第 1 行第 1 个单元格的 rowspan 属性 C. 第 3 行第 1 个单元格的 colspan 属性 D. 第 3 行第 1 个单元格的 rowspan 属性 4、关于布局模式的使用,正确的有( ABD )。 A. 首先绘制布局表格,在布局表格中绘制布局单元格 B. 拖拽鼠标在工作区直接绘制即可。绘制完毕后还可以调整表格或单元格的大小 C. 要注意转换完毕之后,便不能再回到布局模式对表格进行修改,因此一定要慎重操 作 D. 绘制完毕后,在“布局”对象面板按下“标准视图”按钮,将绘制的布局表格转换 成传统表格形式 5、 关于表格背景,说法正确的是( D )。 A. 只能定义表格背景颜色,不能用图片作为表格背景 B. 可以使用颜色或图片作为表格背景图,但图片格式必须是 GIF 格式 C. 可以使用颜色或图片作为表格背景图,但图片格式必须是 JPEG 格式 D. 可以使用颜色或图片作为表格背景图,可以使用任何的 GIF 或者 JPEG 图片文件 6、 设置表格的行数和列数,不能采用的方法是( B )。 A. 在插入表格时设置表格的行数和列数 B. 打开代码视图,在标签中修改相应属性,以修改表格的行数与列数 C. 选中整个表格,在属性面板中修改其行数和列数 D. 通过拆分、合并或删除行、列来修改行数与列数