第6章　利用表格的设计和制作网页 网页的设计与制作实用教程电子教案.pptVIP

第6章　利用表格设计和制作网页 * 网页设计与制作实用教程 主编：刘艳丽　副主编：许晞 秦高德 高妍 学习目标 掌握创建表格的方法； 掌握表格的基本操作方法； 掌握表格属性的设置方法； 掌握单元格属性的设置方法； 了解表格的高级应用技巧； 掌握利用“布局模式”规划网页的方法； 了解表格数据的导入和导出方法。 目录 利用表格进行页面布局的实例 表格的高级应用技巧 利用“布局模式”规划网页　 表格的其他应用 本章小结 配套实训 练习题 利用表格进行页面布局的实例 设计目标 页面分析 实训引导 制作步骤 设计目标 设计“畅想未来”网站的首页，效果如下图所示。 返回 制作步骤 首先新建一个文件，将页面属性设置为：文本大小为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。 * * *