第六章 利用表格设计和制作网页.ppt

第6章　利用表格设计和制作网页 第6章　利用表格设计和制作网页 主讲：栾庆磊 学习目标 掌握创建表格的方法； 掌握表格的基本操作方法； 掌握表格属性的设置方法； 掌握单元格属性的设置方法； 了解表格的高级应用技巧； 掌握利用“布局模式”规划网页的方法； 了解表格数据的导入和导出方法。 目录 利用表格进行页面布局的实例 表格的高级应用技巧 利用“布局模式”规划网页　 表格的其他应用 本章小结 配套实训 练习题 利用表格进行页面布局的实例 设计目标 页面分析 实训引导 制作步骤 设计目标 设计“畅想未来”网站的首页，效果如下图所示。 页面分析 本页面自上而下由页眉、导航栏、主内容区及页脚4部分组成，需要使用4个外表格来合理地进行网页布局。其中 第1个表格，用于定位页眉和导航栏板块； 第2个表格用于定位主内容区中的“用户登录”和“公告通知”板块； 第3个表格，用于定位主内容区中的“热门话题”和主要栏目简介； 第4个表格，用于定位页脚板块 （教程P108） 实训引导 1．本页面中使用的图像文件由配套光盘webcourse\chapter06\images文件夹提供。 2．页面中的文字资料txt6.txt、素材网页（ex6_login.html和ex6_remenhuati.html）、样式文件css_chapter6.css由配套光盘webcourse\chapter06\materials文件夹提供，将css_chapter6.css样式文件复制到本地站点future文件夹下。 3．页面效果请参见配套光盘webcourse\chapter06文件夹下的index6.html文件 。 制作步骤 首先新建一个文件，将页面属性设置为：文本大小为12像素，背景颜色为“#CCCCCC”，上边距、左边距的值均为0，网页标题（Title）为“畅想未来”，链接的“下划线样式”为“仅在变换图像时显示下划线”。然后将网页保存到本地站点的根文件夹future下，取名为index6.html。接下来依次按照下述内容进行操作： 1．通过绘制表格来设计页面布局。 2．在表格中插入页面元素，如文本、图像等。 3．利用CSS样式美化表格中的文本以及表格的背景、边框。 4．设置表格属性，如表格的对齐方式、背景图像和背景色等。 5．设置单元格属性，如单元格、行或列内容的对齐方式、背景图像和背景色等。 创建表格和表格的基本操作 插入空白表格 合并与拆分单元格 在表格中插入页面元素 利用CSS样式美化表格 插入空白表格 ?　插入用于页面布局的第1个表格。操作步骤见教程P110。 ?　插入用于页面布局的第2、3、4个表格。操作步骤见教程P113。 合并与拆分单元格 ?　将第3个表格的第1列的2个单元格进行合并，效果如图6.8所示。操作步骤见教程P114。 ?　将第3个表格的第1行第2列单元格进行拆分，效果如图6.8所示。操作步骤见教程P114。 在表格中插入页面元素 ?　在第1个表格中插入页面元素，其在扩展表格模式下的显示效果如图6.14所示。操作步骤见教程P116。 ?　在第2个表格中插入页面元素，其在扩展表格模式下的显示如图6.15所示。操作步骤见教程P117。 ?　在第3个表格中插入页面元素，其在扩展表格模式下的显示如图6.16所示。操作步骤见教程P117。 ?　采用前面所述的方法在第4个表格的单元格中分别插入相应的文本，其在扩展表格模式下的显示如图6.17所示。操作步骤略。 利用CSS样式美化表格 ?　利用CSS样式美化表格中的文本，操作步骤见教程P119。 ?　利用CSS样式美化表格背景，操作步骤见教程P120。 ?　利用CSS样式美化表格边框，操作步骤见教程P120。 设置表格属性 ?　将用于页面布局的4个外表格居中对齐，操作步骤见教程P122。 ?　将“热门话题”表格中的内嵌7行2列表格的单元格间距调整为3，操作步骤见教程P123。 ?　将相应表格的高度进行适当的调整。操作步骤见教程P123。 设置表格行、列及单元格属性 ?　为第1个外表格的第2行设置背景图像，操作步骤见教程P125。 ?　调整第2个外表格各单元格的宽度，效果如图6.28所示。操作步骤见教程P125。 ?　设置第3个外表格及其内嵌表格的单元格属性，效果如图6.29所示。操作步骤见教程P125。 ?　为第4个外表格中的各单元格分别设置背景颜色，操作步骤见教程P126。 表格的高级应用技巧 利用表格制作水平线和垂直线 ?　将第4个表格的第1行单元格制作水平线细线，效果如图6.30所示。操作步骤见教程P126。 制作立体导航栏表格 ?　将第1个表格中的内嵌导航栏表格制作成立体导航栏表格，效果如图6.33所示。操作步骤见教程P128。 利用“布局模式”规划网页 ?　从“标准”模式切换到“布