chapter7利用表格设计与制作网页.pptxVIP

第7章　利用表格设计与制作网页——制作“合作伙伴”页面计算机工程学院　计算机基础教学部.学习目标了解表格在网页制作中的用途掌握表格的基本操作方法掌握利用表格布局网页的方法了解表格数据的导入和导出方法深圳职业技术学院计算机基础教研室.实训项目深圳慧衡科技有限公司需要设计一个二级页面“网站设计开发技术和网络营销推广合作伙伴”，要求： 页面图文并茂，能清晰、准确地列出“技术”、“专业服务”及“网络营销”三类合作伙伴信息，并能灵活跳转到相应页面。深圳职业技术学院计算机基础教研室.项目分析设计思路：（1）页面元素：网站banner、导航条、页脚信息，主体内容除了必要的文字元素外，还应包含各类合作伙伴网站的logo图像，以突出合作伙伴主题，吸引眼球。（2）版面布局：采取常用的“匡”字形结构，顶部区域用于装载网站的banner和导航条；左侧区域用于装载主要栏目列表；右侧区域用于装载主体内容，底部区域装载页脚信息。（3）配色方案：和整体网站风格保持一致，色彩搭配仍然以蓝白色为基调。深圳职业技术学院计算机基础教研室.设计目标深圳职业技术学院计算机基础教研室.预备知识1．表格在网页中的用途2．表格的构成：表格由行、列、单元格3部分组成。3．表格排版的基本思想深圳职业技术学院计算机基础教研室.制作流程任务1：利用表格布局页面任务3：设置表格属性任务2：在表格中插入元素任务4：利用CSS美化表格深圳职业技术学院计算机基础教研室.任务1 ——利用表格布局页面深圳职业技术学院计算机基础教研室.STEP1：插入表格深圳职业技术学院计算机基础教研室.?　自上而下依次插入3个表格：表格1（2行1列）、表格2（1行2列）和表格3（1行1列），要求表格的宽度均为1000像素，边框粗细为1，单元格边距及单元格间距均不作设置（取默认值）。STEP2：拆分单元格?　将表格2右侧的单元格拆分为4行。深圳职业技术学院计算机基础教研室.STEP3：插入嵌套表格?　在表格2的左侧单元格中插入1个3行1列的表格，要求表格的宽度为212像素，边框粗细、单元格边距及单元格间距均为0，效果如下图左侧所示。?　在表格2右侧的第3行中分别插入3个嵌套表格，效果如下图右侧所示。深圳职业技术学院计算机基础教研室.STEP4：插入/删除行或列?　在嵌套表格3中插入2行。?　为便于以后增加栏目列表之间的行距，将左侧嵌套表格修改为5行。深圳职业技术学院计算机基础教研室.任务2 ——在表格中插入页面元素深圳职业技术学院计算机基础教研室.STEP1：在表格1中插入页面元素深圳职业技术学院计算机基础教研室.STEP2：在表格2中插入页面元素深圳职业技术学院计算机基础教研室.STEP3：在表格3中插入页面元素深圳职业技术学院计算机基础教研室.任务3 ——设置表格属性深圳职业技术学院计算机基础教研室.STEP1．设置整个的表格属性?　设置表格1、表格2和表格3的对齐方式为“居中对齐”，填充、间距和边框设置为0。2．设置表格行、列及单元格属性?　将表格2左侧单元格的宽度设置为230px，并将其嵌套表格置于单元格的左上方。?　用相同的方法将右侧所有嵌套表格第1行的行高设置为60。利用1px透明“space.gif”图像制作表格细线。3．制作圆角表格?　将主体内容区域制作为圆角矩形深圳职业技术学院计算机基础教研室.任务4 ——利用CSS样式美化表格深圳职业技术学院计算机基础教研室.STEP1：美化表格中的元素深圳职业技术学院计算机基础教研室.?　美化标题3。?　修饰左侧栏目的链接文本颜色。?　美化“网站技术和营销专题”文字列表。?　美化“慧衡专业服务”文字列表。STEP2：美化表格背景修饰栏目列表中的标题2背景。利用CSS样式美化左侧栏目所在表格的单元格背景。深圳职业技术学院计算机基础教研室.STEP3：美化表格边框将表格1与表格2的间距设置为10px。将表格3的上边框设置为宽度为5px的橘红色边框。美化页脚导航链接表。深圳职业技术学院计算机基础教研室.项目总结深圳职业技术学院计算机基础教研室.课后练习配套实训利用配套实训文件夹下提供的素材文件，根据所学的表格及前面的知识，自主设计与制作一个介绍八音琴的网页，要求如下：利用表格设计与制作页面。使用CSS样式适当美化页面。同步测试通过教材第7章“同步测试”检验自己是否掌握了本章的相关知识点与技能点。计算机工程学院　计算机基础教研室.感谢观看深圳职业技术学院计算机基础教研室.