(教学课件)chapter7利用表格设计与制作网页

第7章利用表格设计与制作网页

——制作“合作伙伴”页面计算机工程学院计算机基础教学部第7章利用表格设计与制作网页

——制作“合作伙伴”页面计算学习目标了解表格在网页制作中的用途掌握表格的基本操作方法掌握利用表格布局网页的方法了解表格数据的导入和导出方法网页设计与制作实用教程（第3版）2深圳职业技术学院计算机基础教研室学习目标了解表格在网页制作中的用途网页设计与制作实用教程（第实训项目深圳慧衡科技有限公司需要设计一个二级页面“网站设计开发技术和网络营销推广合作伙伴”，要求：页面图文并茂，能清晰、准确地列出“技术”、“专业服务”及“网络营销”三类合作伙伴信息，并能灵活跳转到相应页面。网页设计与制作实用教程（第3版）3深圳职业技术学院计算机基础教研室实训项目深圳慧衡科技有限公司需要设计一个二级页面“网站设计开项目分析设计思路：（1）页面元素：网站banner、导航条、页脚信息，主体内容除了必要的文字元素外，还应包含各类合作伙伴网站的logo图像，以突出合作伙伴主题，吸引眼球。（2）版面布局：采取常用的“匡”字形结构，顶部区域用于装载网站的banner和导航条；左侧区域用于装载主要栏目列表；右侧区域用于装载主体内容，底部区域装载页脚信息。（3）配色方案：和整体网站风格保持一致，色彩搭配仍然以蓝白色为基调。网页设计与制作实用教程（第3版）4深圳职业技术学院计算机基础教研室项目分析设计思路：网页设计与制作实用教程（第3版）4深圳职业设计目标网页设计与制作实用教程（第3版）5深圳职业技术学院计算机基础教研室设计目标网页设计与制作实用教程（第3版）5深圳职业技术学院计预备知识1．表格在网页中的用途2．表格的构成：表格由行、列、单元格3部分组成。网页设计与制作实用教程（第3版）6深圳职业技术学院计算机基础教研室3．表格排版的基本思想预备知识1．表格在网页中的用途网页设计与制作实用教程（第3版制作流程任务1：利用表格布局页面任务3：设置表格属性任务4：利用CSS美化表格任务2：在表格中插入元素网页设计与制作实用教程（第3版）7深圳职业技术学院计算机基础教研室制作流程任务1：利用表格布局页面任务3：设置表格属性任务4：任务1——利用表格布局页面1．插入表格2．合并与拆分单元格3．插入嵌套表格4．插入/删除行或列网页设计与制作实用教程（第3版）8深圳职业技术学院计算机基础教研室任务1——利用表格布局页面1．插入表格2．合并与拆分单元格STEP1：插入表格深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）9自上而下依次插入3个表格：表格1（2行1列）、表格2（1行2列）和表格3（1行1列），要求表格的宽度均为1000像素，边框粗细为1，单元格边距及单元格间距均不作设置（取默认值）。STEP1：插入表格深圳职业技术学院计算机基础教研室网页设计STEP2：拆分单元格网页设计与制作实用教程（第3版）10深圳职业技术学院计算机基础教研室将表格2右侧的单元格拆分为4行。STEP2：拆分单元格网页设计与制作实用教程（第3版）10深STEP3：插入嵌套表格网页设计与制作实用教程（第3版）11深圳职业技术学院计算机基础教研室

在表格2的左侧单元格中插入1个3行1列的表格，要求表格的宽度为212像素，边框粗细、单元格边距及单元格间距均为0，效果如下图左侧所示。在表格2右侧的第3行中分别插入3个嵌套表格，效果如下图右侧所示。STEP3：插入嵌套表格网页设计与制作实用教程（第3版）11STEP4：插入/删除行或列网页设计与制作实用教程（第3版）12深圳职业技术学院计算机基础教研室在嵌套表格3中插入2行。

为便于以后增加栏目列表之间的行距，将左侧嵌套表格修改为5行。STEP4：插入/删除行或列网页设计与制作实用教程（第3版）任务2——在表格中插入页面元素1．在表格1中插入页面元素2．在表格2中插入页面元素3．在表格3中插入页面元素网页设计与制作实用教程（第3版）13深圳职业技术学院计算机基础教研室任务2——在表格中插入页面元素1．在表格1中插入页面元素2STEP1：在表格1中插入页面元素网页设计与制作实用教程（第3版）14深圳职业技术学院计算机基础教研室STEP1：在表格1中插入页面元素网页设计与制作实用教程（第STEP2：在表格2中插入页面元素网页设计与制作实用教程（第3版）15深圳职业技术学院计算机基础教研室STEP2：在表格2中插入页面元素网页设计与制作实用教程（第STEP3：在表格3中插入页面元素网页设计与制作实用教程（第3版）16深圳职业技术学院计算机基础教研室STEP3：在表格3中插入页面元素网页设计与制作实用教程（第任务3——设置表格属性1．设置整个的表格属性2．设置表格行、列及单元格属性3．制作圆角表格网页设计与制作实用教程（第3版）17深圳职业技术学院计算机基础教研室任务3——设置表格属性1．设置整个的表格属性2．设置表格行STEP深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）181．设置整个的表格属性设置表格1、表格2和表格3的对齐方式为“居中对齐”，填充、间距和边框设置为0。2．设置表格行、列及单元格属性将表格2左侧单元格的宽度设置为230px，并将其嵌套表格置于单元格的左上方。用相同的方法将右侧所有嵌套表格第1行的行高设置为60。利用1px透明“space.gif”图像制作表格细线。3．制作圆角表格将主体内容区域制作为圆角矩形STEP深圳职业技术学院计算机基础教研室网页设计与制作实用教任务4——利用CSS样式美化表格1．美化表格中的元素2．美化表格背景3．美化表格边框网页设计与制作实用教程（第3版）19深圳职业技术学院计算机基础教研室任务4——利用CSS样式美化表格1．美化表格中的元素2．美STEP1：美化表格中的元素深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）20

美化标题3。

修饰左侧栏目的链接文本颜色。

美化“网站技术和营销专题”文字列表。

美化“慧衡专业服务”文字列表。STEP1：美化表格中的元素深圳职业技术学院计算机基础教研室STEP2：美化表格背景网页设计与制作实用教程（第3版）21深圳职业技术学院计算机基础教研室修饰栏目列表中的标题2背景。利用CSS样式美化左侧栏目所在表格的单元格背景。STEP2：美化表格背景网页设计与制作实用教程（第3版）21STEP3：美化表格边框网页设计与制作实用教程（第3版）22深圳职业技术学院计算机基础教研室将表格1与表格2的间距设置为10px。将表格3的上边框设置为宽度为5px的橘红色边框。美化页脚导航链接表。STEP3：美化表格边框网页设计与制作实用教程（第3版）22项目总结深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）23项目总结深圳职业技术学院计算机基础教研室网页设计与制作实用教课后练习配套实训

利用配套实训文件夹下提供的素材文件，根据所学的表格及前面的知识，自主设计与制作一个介绍八音琴的网页，要求如下：利用表格设计与制作页面。使用CSS样式适当美化页面。同步测试

通过教材第7章“同步测试”检验自己是否掌握了本章的相关知识点与技能点。网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室课后练习配套实训

利用配套实训文件夹下提供的素材文件，根据所第7章利用表格设计与制作网页

——制作“合作伙伴”页面计算机工程学院计算机基础教学部第7章利用表格设计与制作网页

——制作“合作伙伴”页面计算学习目标了解表格在网页制作中的用途掌握表格的基本操作方法掌握利用表格布局网页的方法了解表格数据的导入和导出方法网页设计与制作实用教程（第3版）26深圳职业技术学院计算机基础教研室学习目标了解表格在网页制作中的用途网页设计与制作实用教程（第实训项目深圳慧衡科技有限公司需要设计一个二级页面“网站设计开发技术和网络营销推广合作伙伴”，要求：页面图文并茂，能清晰、准确地列出“技术”、“专业服务”及“网络营销”三类合作伙伴信息，并能灵活跳转到相应页面。网页设计与制作实用教程（第3版）27深圳职业技术学院计算机基础教研室实训项目深圳慧衡科技有限公司需要设计一个二级页面“网站设计开项目分析设计思路：（1）页面元素：网站banner、导航条、页脚信息，主体内容除了必要的文字元素外，还应包含各类合作伙伴网站的logo图像，以突出合作伙伴主题，吸引眼球。（2）版面布局：采取常用的“匡”字形结构，顶部区域用于装载网站的banner和导航条；左侧区域用于装载主要栏目列表；右侧区域用于装载主体内容，底部区域装载页脚信息。（3）配色方案：和整体网站风格保持一致，色彩搭配仍然以蓝白色为基调。网页设计与制作实用教程（第3版）28深圳职业技术学院计算机基础教研室项目分析设计思路：网页设计与制作实用教程（第3版）4深圳职业设计目标网页设计与制作实用教程（第3版）29深圳职业技术学院计算机基础教研室设计目标网页设计与制作实用教程（第3版）5深圳职业技术学院计预备知识1．表格在网页中的用途2．表格的构成：表格由行、列、单元格3部分组成。网页设计与制作实用教程（第3版）30深圳职业技术学院计算机基础教研室3．表格排版的基本思想预备知识1．表格在网页中的用途网页设计与制作实用教程（第3版制作流程任务1：利用表格布局页面任务3：设置表格属性任务4：利用CSS美化表格任务2：在表格中插入元素网页设计与制作实用教程（第3版）31深圳职业技术学院计算机基础教研室制作流程任务1：利用表格布局页面任务3：设置表格属性任务4：任务1——利用表格布局页面1．插入表格2．合并与拆分单元格3．插入嵌套表格4．插入/删除行或列网页设计与制作实用教程（第3版）32深圳职业技术学院计算机基础教研室任务1——利用表格布局页面1．插入表格2．合并与拆分单元格STEP1：插入表格深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）33自上而下依次插入3个表格：表格1（2行1列）、表格2（1行2列）和表格3（1行1列），要求表格的宽度均为1000像素，边框粗细为1，单元格边距及单元格间距均不作设置（取默认值）。STEP1：插入表格深圳职业技术学院计算机基础教研室网页设计STEP2：拆分单元格网页设计与制作实用教程（第3版）34深圳职业技术学院计算机基础教研室将表格2右侧的单元格拆分为4行。STEP2：拆分单元格网页设计与制作实用教程（第3版）10深STEP3：插入嵌套表格网页设计与制作实用教程（第3版）35深圳职业技术学院计算机基础教研室

在表格2的左侧单元格中插入1个3行1列的表格，要求表格的宽度为212像素，边框粗细、单元格边距及单元格间距均为0，效果如下图左侧所示。在表格2右侧的第3行中分别插入3个嵌套表格，效果如下图右侧所示。STEP3：插入嵌套表格网页设计与制作实用教程（第3版）11STEP4：插入/删除行或列网页设计与制作实用教程（第3版）36深圳职业技术学院计算机基础教研室在嵌套表格3中插入2行。

为便于以后增加栏目列表之间的行距，将左侧嵌套表格修改为5行。STEP4：插入/删除行或列网页设计与制作实用教程（第3版）任务2——在表格中插入页面元素1．在表格1中插入页面元素2．在表格2中插入页面元素3．在表格3中插入页面元素网页设计与制作实用教程（第3版）37深圳职业技术学院计算机基础教研室任务2——在表格中插入页面元素1．在表格1中插入页面元素2STEP1：在表格1中插入页面元素网页设计与制作实用教程（第3版）38深圳职业技术学院计算机基础教研室STEP1：在表格1中插入页面元素网页设计与制作实用教程（第STEP2：在表格2中插入页面元素网页设计与制作实用教程（第3版）39深圳职业技术学院计算机基础教研室STEP2：在表格2中插入页面元素网页设计与制作实用教程（第STEP3：在表格3中插入页面元素网页设计与制作实用教程（第3版）40深圳职业技术学院计算机基础教研室STEP3：在表格3中插入页面元素网页设计与制作实用教程（第任务3——设置表格属性1．设置整个的表格属性2．设置表格行、列及单元格属性3．制作圆角表格网页设计与制作实用教程（第3版）41深圳职业技术学院计算机基础教研室任务3——设置表格属性1．设置整个的表格属性2．设置表格行STEP深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）421．设置整个的表格属性设置表格1、表格2和表格3的对齐方式为“居中对齐”，填充、间距和边框设置为0。2．设置表格行、列及单元格属性将表格2左侧单元格的宽度设置为230px，并将其嵌套表格置于单元格的左上方。用相同的方法将右侧所有嵌套表格第1行的行高设置为60。利用1px透明“space.gif”图像制作表格细线。3．制作圆角表格将主体内容区域制作为圆角矩形STEP深圳职业技术学院计算机基础教研室网页设计与制作实用教任务4——利用CSS样式美化表格1．美化表格中的元素2．美化表格背景3．美化表格边框网页设计与制作实用教程（第3版）43深圳职业技术学院计算机基础教研室任务4——利用CSS样式美化表格1．美化表格中的元素2．美STEP1：美化表格中的元素深圳职业技术学院计算机基础教研室网页设计与