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

1、网页设计与制作实用网页设计与制作实用教程（第教程（第3 3版）版）高等教育出版社高等教育出版社第7章利用表格设计与制作网页制作“合作伙伴”页面计 算 机 工 程 学 院 计 算 机 基 础 教 学部学习目标 了解表格在网页制作中的用途 掌握表格的基本操作方法 掌握利用表格布局网页的方法 了解表格数据的导入和导出方法网 页 设 计 与 制 作 实 用 教 程（第 3 版）2深圳职业技术学院计算机基础教研室实训项目深圳慧衡科技有限公司需要设计一个二级页面“网站设计开发技术和网络营销推广合作伙伴”，要求：页面图文并茂，能清晰、准确地列出“技术”、“专业服务”及“网络营销”三类合作伙伴信息，并能灵活跳

2、转到相应页面。网 页 设 计 与 制 作 实 用 教 程（第 3 版）3深圳职业技术学院计算机基础教研室项目分析设计思路：（1）页面元素：网站banner、导航条、页脚信息，主体内容除了必要的文字元素外，还应包含各类合作伙伴网站的logo图像，以突出合作伙伴主题，吸引眼球。（2）版面布局：采取常用的“匡”字形结构，顶部区域用于装载网站的banner和导航条；左侧区域用于装载主要栏目列表；右侧区域用于装载主体内容，底部区域装载页脚信息。（3）配色方案：和整体网站风格保持一致，色彩搭配仍然以蓝白色为基调。网 页 设 计 与 制 作 实 用 教 程（第 3 版）4深圳职业技术学院计算机基础教研室设计

3、目标网 页 设 计 与 制 作 实 用 教 程（第 3 版）5深圳职业技术学院计算机基础教研室预备知识1表格在网页中的用途2表格的构成：表格由行、列、单元格3部分组成。网 页 设 计 与 制 作 实 用 教 程（第 3 版）6深圳职业技术学院计算机基础教研室3表格排版的基本思想制作流程任务1：利用表格布局页面任务3：设置表格属性任务4：利用CSS美化表格任务2：在表格中插入元素网 页 设 计 与 制 作 实 用 教 程（第 3 版）7深圳职业技术学院计算机基础教研室任务1 1 利用表格布局页面1插入表格2合并与拆分单元格3插入嵌套表格4插入/删除行或列网 页 设 计 与 制 作 实 用 教 程

4、（第 3 版）8深圳职业技术学院计算机基础教研室STEP1STEP1：插入表格深圳职业技术学院计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）9自上而下依次插入3个表格：表格1（2行1列）、表格2（1行2列）和表格3（1行1列），要求表格的宽度均为1000像素，边框粗细为1，单元格边距及单元格间距均不作设置（取默认值）。STEP2STEP2：拆分单元格网 页 设 计 与 制 作 实 用 教 程（第 3 版）10深圳职业技术学院计算机基础教研室将表格2右侧的单元格拆分为4行。STEP3：插入嵌套表格网 页 设 计 与 制 作 实 用 教 程（第 3 版）11深圳职业技术学

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

6、计算机基础教研室STEP1STEP1：在表格1 1中插入页面元素网 页 设 计 与 制 作 实 用 教 程（第 3 版）14深圳职业技术学院计算机基础教研室STEP2STEP2：在表格2 2中插入页面元素网 页 设 计 与 制 作 实 用 教 程（第 3 版）15深圳职业技术学院计算机基础教研室STEP3STEP3：在表格3 3中插入页面元素网 页 设 计 与 制 作 实 用 教 程（第 3 版）16深圳职业技术学院计算机基础教研室任务3 3 设置表格属性1设置整个的表格属性2设置表格行、列及单元格属性3制作圆角表格网 页 设 计 与 制 作 实 用 教 程（第 3 版）17深圳职业技术学院计

7、算机基础教研室STEPSTEP深圳职业技术学院计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）181设置整个的表格属性设置表格1、表格2和表格3的对齐方式为“居中对齐”，填充、间距和边框设置为0。2设置表格行、列及单元格属性将表格2左侧单元格的宽度设置为230px，并将其嵌套表格置于单元格的左上方。用相同的方法将右侧所有嵌套表格第1行的行高设置为60。利用1px透明“space.gif”图像制作表格细线。3制作圆角表格将主体内容区域制作为圆角矩形任务4 4 利用CSSCSS样式美化表格1美化表格中的元素2美化表格背景3美化表格边框网 页 设 计 与 制 作 实 用 教

8、程（第 3 版）19深圳职业技术学院计算机基础教研室STEP1STEP1：美化表格中的元素深圳职业技术学院计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）20美化标题3。修饰左侧栏目的链接文本颜色。美化“网站技术和营销专题”文字列表。美化“慧衡专业服务”文字列表。STEP2STEP2：美化表格背景网 页 设 计 与 制 作 实 用 教 程（第 3 版）21深圳职业技术学院计算机基础教研室修饰栏目列表中的标题2背景。利用CSS样式美化左侧栏目所在表格的单元格背景。STEP3：美化表格边框网 页 设 计 与 制 作 实 用 教 程（第 3 版）22深圳职业技术学院计算机基础教研室将表格1与表格2的间距设置为10px。将表格3的上边框设置为宽度为5px的橘红色边框。美化页脚导航链接表。项目总结深圳职业技术学院计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）23课后练习1.1.配套实训配套实训利用配套实训文件夹下提供的素材文件，根据所学的表格及前面的知识，自主设计与制作一个介绍八音琴的网页，要求如下：利用表格设计与制作页面。使用CSS样式适当美化页面。2.2.同步同步测试测试通过教材第7章“同步测试”检验自己是否掌握了本章的相关知识点与技能点。网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室