第4章表格的使用.ppt

1、第四章 使用表格布局网页（参看教材第三章）,课题引入展示一网页，内容丰富，但结构整齐，没有错位现象,而且有不同的背景颜色。引导学生思考：是怎么做到的呢？（用表格制作）。用表格控制文字、图片、动化等对象的位置，使网页的布局紧凑又整齐美观。常用的页面设计布局类型有：表格、布局表格和层三种，本章着重讲解如何使用表格布局页面。,本章内容1表格和单元格的基本编辑操作2表格属性、单元格属性的设置3导入和导出表格数据教学目标：1、了解表格在网页布局中的作用。2、掌握表格的插入方法和基本编辑方法。3、掌握表格属性、单元格属性的设置。,情感目标： 通过对表格布局网页的学习，提高学生对学习网页制作的兴趣，增强学生

2、的审美观。 教学重点、难点： 表格结构的设计。 表格属性、单元格属性的灵活运用。 教学方法：任务驱动、引导教学。,4.1表格的作用 表格是网页设计制作不可缺少的元素，它以简洁明了和高效快捷的方式将图片、文本、数据和表单的元素有序的显示在页面上（比如制作课程表、名次表、价格表等），使用表格排版的页面在不同平台、不同分辨率的浏览器里都能保持其原有的布局，而在不同的浏览器平台有较好的兼容性。 表格是网页中最常用的排版方式之一。表格之所以重要是因为表格可以实现网页的精确排版和定位。,4.2表格的组成部分和标记 4.2.1.表格的组成部分 表格的各部分的名称介绍 一张表格横向叫行，纵向叫列。行列交叉部分

3、就叫做单元格。 单元格中的内容和边框之间的距离叫边距。单元格和单元格之间的距离叫间距。整张表格的边缘叫做边框。 详见看下图,4.2.2.表格的标记 1.表格的3个基本标记 标记，标识一个表格 标记，标识表格的一行，有多少行就有多少个 标记 标记，标识表格的一列，即一个单元格，一行中有多少个列（单元格），就有多少个 标记。 注意：单元格合并时标记的相关属性是 合并时所占的列数 合并时所占的行数,三者的对应位置关系是： （有多少行就出现多少对） （一行中有多少列就出现多少对） 单元格中的具体元素或内容 ,在HTML文档中，一个表格主要由3种标签组成，分别是、，它们分别对应表格、行、列。包含在内部，

4、而包含在内部。 例如，下面是一个2行2列的表格代码： 第1行第1列 第1行第2列 第2行第1列 第2行第2列 表格以标签开始，以标签结束；第1个开始到结束，代表第1行，依次类推；每一个标签中的第1个开始到结束，代表第1列，第2个开始到结束，代表第2列，依次类推。,4.3表格的基本操作 回顾word中表格的编辑方法：插入、删除、合并、拆分、调整大小等，而在dw中表格的相关操作和word相似。 1插入表格 在文档设计视图中，将光标放在需要创建表格的位置，单击“常用”快捷栏中的表格按钮弹出的“表格”对话框，指定表格的属性后，在文档窗口中插入设置的表格。 也可在代码视图使用表格标记来创建表格。 （演示

5、插入基本表格，调整表格结构。）,插入表格对话框中各选项的含义 “行数”文本框用来设置表格的行数。 “列数”文本框用来设置表格的列数。 “表格宽度”文本框用来设置表格的宽度，可以填入数值，紧随其后的下拉列表框用来设置宽度的单位，有两个选项百分比和（绝对）像素。当宽度的单位选择百分比时，表格的宽度会随浏览器窗口的大小而改变。比如：设置宽度为窗口宽度的60，那么当浏览器窗口大小变化的时候表格的宽度也随之变化；而如果设置宽度为400像素，那么无论浏览器窗口大小为多少，表格的宽度都不会变化。,2设置表格属性 使用“扩展表格”模式可以设置表格的具体属性。“扩展表格”模式是用于临时添加表格的单元格边距和间距

6、并增加表格边框以简化编辑的一种功能。在该模式下能够精确地放置插入点，而不会意外选择错误的表格或其它表格内容。 选择“查看”“表格模式”“扩展表格模式” 注意：在“扩展表格”模式下完成对表格属性的设置后，要返回到“标准”模式。“扩展表格”模式不属于所见即所得环境，因为扩展模式下某些操作(如调整大小)不会得到预期的结果。,在扩展模式下选中一个表格后，可以通过属性面板更改表格属性，也可以使用表格菜单命令来设置。 设置中各选项的含义是： “填充”文本框用来设置单元格边距。 “间距”文本框用来设置单元格间距。 “标题” 定义表格的标题。 “对齐标题”定义表格标题的对齐方式。 “摘要” 可以在这里对表格进

7、行注释。 “单元格边距”文本框用来设置单元格的内部空白的大小。 “单元格间距”,“边框粗细”用来设置表格的边框的宽度。 “页眉”定义页眉样式，可以在四种样式中选择一种。 “对齐”下拉列表框用来设置表格的对齐方式，默认的对齐方式一般为左对齐。 “边框”文本框用来设置表格边框的宽度。 “背景颜色”文本框用来设置表格的背景颜色。 “边框颜色”用来设置表格边框的颜色。 在“背景图像”文本框填入表格背景图像的路径，可以给表格添加背景图像。可以在链接后的文本框中直接输入链接路径，也可单击文本框后的“浏览”按钮，查找并选择图像文件。,3选择单元格对象 选择整个表格，在此提供6种常用的方法： a把鼠标移动到表

8、格右边界外侧，按下鼠标之后往左拖拽，这样可以快速选取整个表格。 b运行“修改表格选择表格”命令选择整个表格。 c在单元格任意处单击，点鼠标右键在弹出菜单菜单中选择“表格选择表格” d用鼠标点击任一个单元格，接着按两下“CtrlA”组合按钮选取整个表格。 e在表格内任意处单击，然后在状态栏选中标签即可,f是把鼠标放在表格边框的任意处，当出现选取标志时单击即可选中整个表格 选中的表格会在周围出现一个黑框表示整张表格选中了。 要选中某一单元格 按住Ctrl键，鼠标在需要选中的单元格单击 选中状态栏中的标签。 要选中连续的单元格，按住鼠标左键从一个单元格的左上方开始向要连续选择单元格的方向拖动或光标先

9、选中的一个单元格，按shift键不放，选取最后一个单元格。,要选中不连续的几个单元格，可以按住Ctrl键，单击要选择的所有单元格即可。要选择某一行或某一列，将光标移动到行左侧或列上方，鼠标指针变为向右或向下的箭头图标时，单击即可。 4单元格属性 把光标移动到某个单元格内，可以利用单元格属性面板对这个单元格的属性（“高”、“宽” “背景” “背景颜色” “边框”等）进行设置。,各属性含义： “水平”文本框用来设置单元格内元素的水平排版方式，是居左、居右或是居中。 “垂直”文本框用来设置单元格内的垂直排版方式，是顶端对齐、底端对齐或是居中对齐。 “不换行”复选框可以防止单元格中较长的文本自动换行。

10、 “标题”复选框使选择的单元格成为标题单元格，单元格内的文字自动以标题格式显示出来。,5表格的行和列 的插入和删除选中要插入行或列的单元格，单击鼠标右键，在弹出菜单中选择“插入行”或“插入列”或“插入行或列”命令。,如果选择了“插入行”命令，在选择行的上方就插入了一个空白行，如果选择了“插入列”命令，就在选择列的左侧插入了一列空白列。 如果选择了“插入行或列”命令，会弹出“插入行或列”对话框，可以设置插入行还是列、插入的数量，以及使在当前选择的单元格的上方或下方、左侧或是右侧插入行或列。 要删除行或列，选择要删除的行或列，单击鼠标右键，在弹出菜单中选择“删除行”或“删除列”命令即可。,6、拆分

11、与合并单元格 拆分单元格时，将光标放在待拆分的单元格内，单击属性面板上的“拆分”按钮，在弹出对话框中，按需要设置即可。 合并单元格时，选中要合并的单元格，单击属性面板中的“合并”按钮即可。,4.4 格式化表格 Dreamweaver内置了格式化的表格库，只要选中表格，选择【命令】|【格式化表格】命令就可以弹出如图所示的“格式化表格”对话框，可以设置各个参数来格式化表格。,4.5嵌套表格 表格之中还有表格即嵌套表格。 浏览器在解析网页的时候，是将整个网页的结构下载完毕之后才显示表格，如果不使用嵌套，表格非常复杂，浏览者要等待很长时间才能看到网页内容。引入嵌套表格，由总表格负责整体排版，由嵌套的表

12、格负责各个子栏目的排版，并插入到总表格的相应位置中，各司其职，互不冲突。,另外，通过嵌套表格，利用表格的背景图像、边框、单元格间距和单元格边距等属性可以得到漂亮的边框效果，制作出精美的音画贴图网页。 创建嵌套表格的操作方法，先插入总表格，然后将光标置于要插入嵌套表格的地方，继续插入表格即可。 4.6导入和导出表格数据 文件导入表格 文件导出表格,用表格布局网页,补充：表格布局的缺点 1使用表格布局页面时，图片和文字不好定位，在预览的时候会出现错位的情况。因为最初创建表格是为了显示表格数据，而不是用于对 Web 页进行布局。 2代码冗长繁琐，维护麻烦，重复代码较多，增加了带宽的消耗和成本。 3表

13、格布局由于表现形式的要求，经常会出现表格的多重嵌套，而浏览器对于表格的解析是将一个表格全部下载解析后才会呈现出来，过多的嵌套严重影响网页打开的速度。,作业： 1.说出表格的作用 2.叙述“表格扩展模式”的作用 3.课后习题,练习1 创建一个学生管理表 在网页中制作一个学生管理表，效果如图3-75所示。先插入一个7行4列的表格，设置表格宽度和高度，然后合并单元格，输入相应的文本即可。,图3-75 学生管理表,练习2 制作圆角细线表格 制作一个圆角细线表格，效果如图所示。先插入一个1行1列的表格，然后用事先制作好的图片（roundCorner.gif）作表格背景，然后将表格拆分为2行，设置第1行的高度为25像素。,从这个练习可以知道，很多