表格及图层讲义

第六次课表格及图层一、表格表格是网页中一个强有力的工具，不仅可以将相关数据有序地排列在一起，还可以精确地定位文字、图像等网页元素在页面中的位置，使得页面在形式丰富多彩又条理清楚。

用表格布局最大好处是即使浏览者改变计算机的分辨率也不会影响网页的浏览效果。

知识点：1.插入表格●启用表格对话框方法：“插入”菜单插入面板“常用”选项卡插入面板“布局”选项卡●对话框中各选项作用：“表格宽度”：以像素为单位或以浏览器窗口的百分比设置“摘要”对表格说明，文本不显示在用户浏览器中，仅在源代码中显示，可提高源代码的可读性。

“单元格边距、间距、边框粗细”等网页布局时都设为0.做数据表格时，对大多数浏览器来说一般分别为1、2、1.提示：边框粗细设置为0时，窗口中不显示表格边框，可“查看”>“可视化助理”>“表格边框”知识点：2.表格的属性●表格的属性属性面板：“填充”：即单元格边距—内容和单元格边框之间的距离，表格值2，网页布局0；“间距”：即单元格间距提示：如果没有指定单元格间距和单元格边距的数值，则多数浏览器按单元格边距设置为1，间距设置为2显示表格。

“对齐”：表格相对于同一段落其他元素的显示位置“清除列宽、行高”：从表格中删除所有明确指定的列宽或行高数值●单元格、行或列的属性“标题”：设置是否将每个单元格格式设置为表格标题单元格的格式知识点：3.表格中插入内容表格可添加各种网页元素，如文本、图像和表格。

表格的尺寸会随内容的尺寸自动调整，●输入文字方法一：直接输入文本，单元格随文本的输入自动扩展方法二：粘贴来自其他文字编辑软件中复制的带有格式的文本。

●插入其他网页元素（1）嵌套表格（2）插入图像方法一：“插入”菜单；方法二：“插入”面板方法三：直接拖曳“插入”面板图像按钮到单元格方法四：从资源管理器、站点资源管理器或桌面上直接拖曳图像到单元格。

知识点：4.选择表格元素要想操作，必须首先选择表格元素●选择整个表格方法一：鼠标放在表格四周边缘，出现完整表格图标，单击左键即可选中整个表格方法二：鼠标插入点放在任意单元格，在文档窗口左下角标签栏选择<table >标签方法三：插入点放到表格中，“修改”>“表格”>“选择表格”方法四：任意单元格右键，“表格”>“选择表格”●选择行或列（1）选择单行或单列鼠标指向行的左边缘或列的上边缘，鼠标指针出现向右或向下的箭头时单击，或者放在任意单元格，单击文档窗口左下角tr标签（选择行）。

（2）选择多行或多列鼠标指向行的左边缘或列的上边缘, 鼠标指针出现向右或向下的箭头时，直接拖曳或按Ctrl同时单击（3）选择单元格方法一：放在任意单元格，单击文档窗口左下角td标签方法二：单击任意单元格，左键不放拖曳选择单元格方法三：放在任意单元格，“编辑”>“全选”方法四：按住Ctrl建单击任何单元格，重复可取消选择。

知识点：5.编辑表格●复制、粘贴、剪切等操作同普通表格●清除表格内容：Delete；删除行或列：“修改”>“表格”>“删除行/列”●缩放表格（1）缩放表格方法一：表格非选中状态下，鼠标放在下面或右面边框上，出现缩放图标，方法二：选中表格，修改属性面板宽和高（2）修改行或列的大小方法一：直接拖曳鼠标方法二：修改属性面板宽、高数值。

●合并、拆分单元格方法一：属性面板方法二：“修改”>“表格”>“拆分/合并单元格”●增加、删除表格的行和列（1）插入单行或单列选择一个单元格后，就可以在这上下或左右插入一行或一列方法一：“修改”>“表格”>插入行/插入列方法二：“插入”>“表格对象”>在上面/下面插入行；列（2）插入多行或多列选中一个单元格，选择“修改”>“表格”>插入行或列提示：表格最后一个单元按Tab键会自动在表格下方新添一行。

知识点：6.网页中的数据表格1.导入Excel或Word文档：“文件”>“导入”2.将网页中的表格导入到其他网页或Word文档中步骤一：首先将网页内的表格数据导出，然后将其导入其他网页或Word文档中。

导出：“文件”>“导出”>“表格”步骤二：在其他网页中导入表格数据：首先启用“导入表格式数据”：方法一：“文件”>“导入”>“表格式数据”方法二：“插入”>“表格对象”>“导入表格式数据”案例：电子科技网步骤一：打开素材文件，“插入”>“表格对象”>“导入表格式数据”步骤二：弹出对话框设置：选择素材中的文本.txt；“单元格边距、间距为2，边框为1步骤三：编辑每行：选中第一行，属性面板“高“：25，背景颜色：#ECECE0步骤四：选中第二行，属性面板“高“：25，背景颜色：#ABA88B，相同方法设置其他行步骤五：选择整个导入表格，属性面板：“宽”：400，“填充”、“间距”设为1，边框设为0.课堂综合案例—时尚家居网步骤一：插入图像1.新建网页文件，修改“页面属性”：字体大小12，上、下、左、右边距设为0（网页尺寸：16:9屏幕：1024-600；4:3屏幕：1024-768）；2.插入表格，两行两列，表格宽度：800像素，选中表格，属性面板“对齐”：居中对齐。

3.在CSS样式面板“新建CSS规则”，弹出的对话框中：“选择器类型”—“类”；“选择器名称”—.d1。

弹出“.d1的CSS规则定义”，左侧的“分类”>“背景”>“Background-image”插入素材“image01”.4.光标置入第一行第一列单元格，右键，选择“CSS样式”>“d1”，属性面板设置：“水平”：右对齐，“垂直”：顶端，“宽”：209，“高”：4745.新建CSS样式“.d2”,在弹出的“.d2的CSS规则定义”对话框中插入背景图像“image02”6.光标置入第一行第2列单元格，右键选择“Css样式>d2”，属性面板设置“垂直”：底部。

7.第二行第一列单元格插入图像image03，第2行第2列插入图像image04。

骤二：制作导航条1.光标置入第一行第一列单元格，插入4行1列，宽度140像素的表格；2.在第一行单元格中插入图像image06，相同方法分别将图片9、5、10插入到第2、3、4行单元格中。

3.在主表格第一行第二列单元格中插入1行2列，宽度285的表格，属性面板“对齐”下拉列表中选择“居中对齐”4.新建Css样式d3，弹出“.d3的CSS规则定义”对话框，在左侧“分类”列表中选择“背景”>“background-image”，选择image07，确定5.光标置入第一列单元格，右键选择d3样式，属性面板“宽度”：254，“高度”：361步骤三：插入表格（主体文字表格）1．将光标置入单元格中，插入3行2列，宽度100百分比表格。

2.选中第1列3行单元格，“属性”面板单击“合并所选单元格”，“宽”选项输入“10”3.光标置入表格第一行第一列单元格，插入3行1列宽度100百分比表格。

步骤四：设置表格1.新建Css样式d4，设置背景图像为image08,光标置入第一行单元格，鼠标右键选择Css样式d4，为单元格应用样式，属性面板将“高”设置为24，按多次Ctrl+Shift+Space，输入需要的空格，然后输入文字“买房常识”2.新建Css样式t1，将文字颜色设为#1c6e82,为文字应用样式，并在属性面板将字加粗。

3.将光标置入第二行单元格中，属性面板“高”数值设为9，在拆分视图窗口中选中该单元格的“&nbsp”标签，删除。

4.返回设计视图窗口中，将光标置入到第3行，新建Css样式d5，插入背景图像img12，鼠标右键应用样式，面板中高设为114，（插入列表文字背景）5.在单元格中输入需要的文字，属性面板单击项目列表。

6.将光标置入到住表格的第二行（总第4行），属性面板设置高巍18,。

7.选中主表格第一单元格插入的表格（前3行）复制，光标放在主表格的第3行（总第5行），粘贴。

修改文字内容8.将光标放置到右侧单元格中，在属性面板“水平”项中选左对齐，“垂直”中选顶端。

9.插入表格，2行1列，表格宽度24像素。

光标置入第一行，插入图像11.gif，在属性面板“垂直边距”数值框中输入5.用相同的方法，将图片img13.gif插入到第二行中。

二、层课堂案例——圣诞礼品屋1.打开index文件，单击“插入”面板“布局”选项卡上的“绘制AP DIV”按钮，绘制图层，插入图像；2.依次插入另外两个图层和图像（按住Ctrl键就可以继续绘制新的层）3.指定图层的背景色和背景图像：背景色：设置“属性面板”背景颜色背景图像：调出CSS样式面板，（“高级-ID伪类选择器等”），设置北京图像文件：beijing.jpg。

知识点1：创建层：方法一：插入面板“布局”选项方法二：直接将插入面板布局选项卡中的图标拖曳到文档窗口中方法三：“插入”>“布局对象”>“AP Div”显示或隐藏层边框：“查看”>“可视化助理”>“隐藏所有”知识点2：选择层1.选择一个层：利用面板：“窗口”>“AP元素”，弹出控制面板（功能：可以防止层重叠、更改层的可见性，将层嵌套或重叠，选择一个或多个层），单击该层名称文档窗口中选择一个层，有以下几种方法：方法一：单击一个层的边框方法二：在一个层中按住Ctrl+Shift并单击；方法三，单击一个选择层的选择柄，如果选择柄不可见，可以在该层中的任意位置单击以显示该选择柄2.选择多个层：方法一：利用“窗口”>“AP元素”，弹出控制面板，按住Shift键单击该多个层名称方法二：文档窗口知识点3：设置层的默认属性。