DW4-1利用表格布局页面.ppt

DW4-1利用表格布局页面.ppt

《DW4-1利用表格布局页面.ppt》由会员分享，可在线阅读，更多相关《DW4-1利用表格布局页面.ppt（23页珍藏版）》请在冰豆网上搜索。

课堂实践课程引导知识技能目标知识讲解项目总结项目四项目四利用表格布局页面利用表格布局页面上一页下一页课程引导课程引导我们学会了制作简单的个人网页。

请浏览我们学会了制作简单的个人网页。

请浏览【滨海滨海中专校中专校】的主页，我校主页中包含了哪些网页元素？

的主页，我校主页中包含了哪些网页元素？

这些文字和图片布局合理，搭配协调。

这些文字和图这些文字和图片布局合理，搭配协调。

这些文字和图片是通过什么方法布局的？

片是通过什么方法布局的？

本节课我们一起学习本节课我们一起学习利用表格布局页面利用表格布局页面的方法。

的方法。

表格能准确定位网页中的文本、图像及其他元素。

表格能准确定位网页中的文本、图像及其他元素。

课堂实践课程引导知识技能目标知识讲解项目总结项目四项目四利用表格布局页面利用表格布局页面上一页下一页复习回顾复习回顾新建网站新建网站“全运会全运会”、新建网页、新建网页index.htmlindex.html，并设，并设置页面属性。

（置页面属性。

（P71P71）11、页面文字：

宋体、大小、页面文字：

宋体、大小99点、颜色点、颜色#666666#666666、背、背景图像景图像bg1.gifbg1.gif、上下边距、上下边距0022、链接文字：

宋体、大小、链接文字：

宋体、大小99点、颜色点、颜色#666666#666666、变变换图像链接换图像链接#333333#333333、已访问链接颜色、已访问链接颜色#666666#666666、下划、下划线样式为线样式为“仅在变换图像时显示下划线仅在变换图像时显示下划线”33、标题、标题/编码：

网页标题编码：

网页标题“全运会全运会”、编码为简体、编码为简体中文中文GB2312GB2312课堂实践课程引导知识技能目标知识讲解项目总结项目四项目四利用表格布局页面利用表格布局页面上一页下一页知识技能目标知识技能目标（11）学会添加表格及嵌套表格，并设置表格属性）学会添加表格及嵌套表格，并设置表格属性（22）掌握添加、删除表格中行）掌握添加、删除表格中行/列的方法。

列的方法。

（33）掌握拆分单元格、合并单元格的方法。

）掌握拆分单元格、合并单元格的方法。

（44）掌握表格元素行、列、单元格属性的设置。

）掌握表格元素行、列、单元格属性的设置。

课堂实践课程引导知识技能目标知识讲解项目总结项目四项目四利用表格布局页面利用表格布局页面上一页下一页展示预览网页浏览效果展示预览网页浏览效果展示预览网页浏览效果展示预览网页浏览效果课堂实践课程引导知识技能目标知识讲解项目总结项目四项目四利用表格布局页面利用表格布局页面上一页下一页网页布局与组成分析网页布局与组成分析（11）本网页为普通的上中下型版式结构，上、）本网页为普通的上中下型版式结构，上、下均为一幅图片，中间为左右型结构，包括多下均为一幅图片，中间为左右型结构，包括多幅图片和几行文字。

幅图片和几行文字。

（22）本网页使用了表格对图片、文字进行合理）本网页使用了表格对图片、文字进行合理布局。

布局。

课堂实践课程引导知识技能目标知识讲解项目总结项目四项目四利用表格布局页面利用表格布局页面上一页下一页66行行22列列11行行11列列44行行11列列首先：

左右首先：

左右11行行22列列其次：

左列其次：

左列22行行11列列的嵌套表格的嵌套表格第三：

第二行的第三：

第二行的三个嵌套表格三个嵌套表格课堂实践课程引导知识技能目标知识讲解项目总结项目四项目四利用表格布局页面利用表格布局页面上一页下一页一、表格一、表格

（一）、插入表格一）、插入表格知识讲解知识讲解11单击菜单单击菜单【插入记录插入记录】【表格表格】2.2.窗口窗口插入插入打开插入工具栏打开插入工具栏-常用常用表格表格3.3.快捷键快捷键CTRL+ALT+TCTRL+ALT+T课堂实践课程引导知识技能目标知识讲解项目总结项目四项目四利用表格布局页面利用表格布局页面上一页下一页知识讲解知识讲解单位：

单位：

像素像素百分比百分比课堂实践课程引导知识技能目标知识讲解项目总结项目四项目四利用表格布局页面利用表格布局页面上一页下一页一张表格横向叫行行，纵向叫列列。

行列交叉部分就叫做单元格单元格单元格中的内容和单元格边框之间的距离叫边距边距。

单元格和单元格之间的距离叫间距间距。

整张表格的边缘叫做边框边框。

边框粗细、单元格边距、单元格间距设置为边框粗细、单元格边距、单元格间距设置为00与空白与空白的区别的区别课堂实践课程引导知识技能目标知识讲解项目总结项目四项目四利用表格布局页面利用表格布局页面上一页下一页知识讲解知识讲解

（二）、表格参数设置

（二）、表格参数设置（11）在）在“行数行数”文本框中输入文本框中输入“33”，在，在“列数列数”文本框中输入文本框中输入“11”；（22）在）在“表格宽度表格宽度”文本框输入文本框输入“900900”，其后的，其后的下拉列表框中选择宽度的单位为下拉列表框中选择宽度的单位为“像素像素”；（33）边框粗细）边框粗细、单元格边距单元格边距、单元格间距设置为单元格间距设置为00；（44）表格对奇方式：

居中对齐）表格对奇方式：

居中对齐课堂实践课程引导知识技能目标知识讲解项目总结项目四项目四利用表格布局页面利用表格布局页面上一页下一页（三）、嵌套表格（三）、嵌套表格指在表格的某个单元格中再插入一个表格，其宽度受指在表格的某个单元格中再插入一个表格，其宽度受所在单元格的宽度限制。

当单个表格不能满足布局的需求所在单元格的宽度限制。

当单个表格不能满足布局的需求时，可以进行嵌套表格的创建。

时，可以进行嵌套表格的创建。

活动引导活动引导11：

插入插入33行行11列的表格，居中对齐，间距等均为列的表格，居中对齐，间距等均为00第二行单元格内插入第二行单元格内插入11行行22列的嵌套表格，表格宽度列的嵌套表格，表格宽度100%100%，边框粗细、间距、边距均为，边框粗细、间距、边距均为00课堂实践课程引导知识技能目标知识讲解项目总结项目四项目四利用表格布局页面利用表格布局页面上一页下一页知识讲解知识讲解（四）、选择表格和表格元素（四）、选择表格和表格元素在进行表格操作之前，我们必须首先选定被在进行表格操作之前，我们必须首先选定被操作的对象，对于表格而言，可以选定整个表操作的对象，对于表格而言，可以选定整个表格、单行、单列、多行、多列、连续或不连续格、单行、单列、多行、多列、连续或不连续的单元格。

的单元格。

课堂实践课程引导知识技能目标知识讲解项目总结项目四项目四利用表格布局页面利用表格布局页面上一页下一页11、选中整个表格有以下几种方法：

、选中整个表格有以下几种方法：

11）、将光标移到表格边框线上，当边框线为红色）、将光标移到表格边框线上，当边框线为红色且光标变为且光标变为形状时，单击鼠标左键即可。

形状时，单击鼠标左键即可。

22）、将光标移到表格的边框上，当鼠标光标变为）、将光标移到表格的边框上，当鼠标光标变为或或的形状时单击鼠标即可。

的形状时单击鼠标即可。

将光标插入点定位到表格的任一单元格中，单击窗将光标插入点定位到表格的任一单元格中，单击窗口左下角标签选择器中的口左下角标签选择器中的标签即可。

标签即可。

33）、将光标插入点定位到表格的任意单元格中，）、将光标插入点定位到表格的任意单元格中，表格上端或下端将弹出绿线的标志，单击最上端标表格上端或下端将弹出绿线的标志，单击最上端标有表格宽度的绿线中的下拉按钮，在弹出的快捷菜有表格宽度的绿线中的下拉按钮，在弹出的快捷菜单中选择单中选择“选择表格选择表格”命令即可。

命令即可。

课堂实践课程引导知识技能目标知识讲解项目总结项目四项目四利用表格布局页面利用表格布局页面上一页下一页22、行、列的选中方法如下：

、行、列的选中方法如下：

将光标移到所需行的左侧，当光标变为将光标移到所需行的左侧，当光标变为形状且该形状且该行的边框线变为红色时单击鼠标即可选中该行。

行的边框线变为红色时单击鼠标即可选中该行。

将光标移到所需列的上端，当光标变为将光标移到所需列的上端，当光标变为形状且该形状且该列的边框线变为红色时单击鼠标左键即可选中该列。

列的边框线变为红色时单击鼠标左键即可选中该列。

33、单元格的选中方法如下：

、单元格的选中方法如下：

单个单元格的选中：

单击单个单元格的选中：

单击多个单元格：

连续区域多个单元格：

连续区域shiftshift键键不连续区域不连续区域ctrlctrl键键课堂实践课程引导知识技能目标知识讲解项目总结项目四项目四利用表格布局页面利用表格布局页面上一页下一页知识讲解知识讲解二、添加、删除行和列二、添加、删除行和列11、菜单：

插入行或列、菜单：

插入行或列“修改修改”“表格表格”“插入行插入行CTRL+MCTRL+M或或插入列插入列CTRL+SHIFT+ACTRL+SHIFT+A”删除行或者列删除行或者列选择选择“修改修改”-“表格表格/删除行删除行/列列”命令，可删除光标命令，可删除光标插入点所在的行或者列。

插入点所在的行或者列。

22、右击、右击-快捷菜单：

将光标插入点定位到所需单元格中，快捷菜单：

将光标插入点定位到所需单元格中，单击鼠标右键在弹出的快捷菜单中选择单击鼠标右键在弹出的快捷菜单中选择“表格表格/删除删除行行”命令可删除光标插入点所在的行或者列；命令可删除光标插入点所在的行或者列；课堂实践课程引导知识技能目标知识讲解项目总结项目四项目四利用表格布局页面利用表格布局页面上一页下一页三、拆分单元格、合并单元格三、拆分单元格、合并单元格11、菜单操作：

修改、菜单操作：

修改-表格表格-拆分单元格拆分单元格22、选中要合并的单元格区域，单击菜单、选中要合并的单元格区域，单击菜单修改修改-表格表格-合并单元格合并单元格合合并并拆拆分分课堂实践课程引导知识技能目标知识讲解项目总结项目四项目四利用表格布局页面利用表格布局页面上一页下一页知识讲解知识讲解四、表格元素行、列、单元格属性的设置四、表格元素行、列、单元格属性的设置选中要设置属性的单元格、行或列，其中的设置与表选中要设置属性的单元格、行或列，其中的设置与表格属性的设置大致相同，这里就不再赘述。

格属性的设置大致相同，这里就不再赘述。

课堂实践课程引导知识技能目标知识讲解项目总结项目四项目四利用表格布局页面利用表格布局页面上一页下一页活动引导活动引导22：

11、在表格的、在表格的第二行的第二行的，左侧单元格宽度，左侧单元格宽度240240像素，水像素，水平居中，垂直顶端对齐，平居中，垂直顶端对齐，22、在第二行嵌套、在第二行嵌套22行行11列的宽度为列的宽度为200200像素的表格，间像素的表格，间距等为距等为0033、在嵌套表格的第一行插入、在嵌套表格的第一行插入title.jpgtitle.jpg图片，图片，44、在嵌套表格的第二行单元格：

水平居中，垂直顶端、在嵌套表格的第二行单元格：

水平居中，垂直顶端对齐，并嵌套三个表格对齐，并嵌套三个表格44行行11列、列、11行行11列、列、66行行11列，表列，表格宽度均为格宽度均为198198，间距等为，间距等为00，表格背景颜色，表格背景颜色#FFFFFF#FFFFFF课堂实践课程引导知识技能目标知识讲解项目总结项目四项目四利用表格布局页面利用表格布局页面上一页下一页活动引导活动引导33：

完善网页内容：

完善网页内容（11）44行行11列表格高度：

列表格高度：

120120像素、居中对齐，内像素、居中对齐，内容分别为：

代表团成绩、竞赛成绩、奖牌容分别为：

代表团成绩、竞赛成绩、奖牌/总分、竞总分、竞赛日程赛日程（22）44行行11列表格的第二行、第四行，单元格背景列表格的第二行、第四行，单元格背景#efefef#efefef（33）中间）中间11行行11列的表格高度列的表格高度1010像素，并删除像素，并删除  （44）66行行11列的表格