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

《第六章 利用表格设计和制作网页》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第6章　利用表格设计和制作网页主讲：栾庆磊1/21学习目标掌握创建表格的方法；掌握表格的基本操作方法；掌握表格属性的设置方法；掌握单元格属性的设置方法；了解表格的高级应用技巧；掌握利用“布局模式”规划网页的方法；了解表格数据的导入和导出方法。2第6章　利用表格设计和制作网页目录利用表格进行页面布局的实例表格的高级应用技巧利用“布局模式”规划网页表格的其他应用本章小结配套实训练习题3第6章　利用表格设计和制作网页利用表格进行页面布局的实例设计目标页面分析实训引导制作步骤4第6章　利用表格设计和制作网页设计目标设计“畅想未来”网站的

2、首页，效果如下图所示。返回5第6章　利用表格设计和制作网页页面分析本页面自上而下由页眉、导航栏、主内容区及页脚4部分组成，需要使用4个外表格来合理地进行网页布局。其中第1个表格，用于定位页眉和导航栏板块；第2个表格用于定位主内容区中的“用户登录”和“公告通知”板块；第3个表格，用于定位主内容区中的“热门话题”和主要栏目简介；第4个表格，用于定位页脚板块（教程P108）返回6第6章　利用表格设计和制作网页实训引导1．本页面中使用的图像文件由配套光盘webcoursechapter06images文件夹提供。2．页面中的文字资料

3、txt6.txt、素材网页（ex6_login.html和ex6_remenhuati.html）、样式文件css_chapter6.css由配套光盘webcoursechapter06materials文件夹提供，将css_chapter6.css样式文件复制到本地站点future文件夹下。3．页面效果请参见配套光盘webcoursechapter06文件夹下的index6.html文件。返回7第6章　利用表格设计和制作网页制作步骤首先新建一个文件，将页面属性设置为：文本大小为12像素，背景颜色为“#CCCCCC”，上边

4、距、左边距的值均为0，网页标题（Title）为“畅想未来”，链接的“下划线样式”为“仅在变换图像时显示下划线”。然后将网页保存到本地站点的根文件夹future下，取名为index6.html。接下来依次按照下述内容进行操作：1．通过绘制表格来设计页面布局。2．在表格中插入页面元素，如文本、图像等。3．利用CSS样式美化表格中的文本以及表格的背景、边框。4．设置表格属性，如表格的对齐方式、背景图像和背景色等。5．设置单元格属性，如单元格、行或列内容的对齐方式、背景图像和背景色等。返回8第6章　利用表格设计和制作网页创建表格和表格的

5、基本操作插入空白表格合并与拆分单元格在表格中插入页面元素利用CSS样式美化表格9第6章　利用表格设计和制作网页插入空白表格插入用于页面布局的第1个表格。操作步骤见教程P110。插入用于页面布局的第2、3、4个表格。操作步骤见教程P113。10第6章　利用表格设计和制作网页合并与拆分单元格将第3个表格的第1列的2个单元格进行合并，效果如图6.8所示。操作步骤见教程P114。将第3个表格的第1行第2列单元格进行拆分，效果如图6.8所示。操作步骤见教程P114。11第6章　利用表格设计和制作网页在表格中插入页面元素在第1个表

6、格中插入页面元素，其在扩展表格模式下的显示效果如图6.14所示。操作步骤见教程P116。在第2个表格中插入页面元素，其在扩展表格模式下的显示如图6.15所示。操作步骤见教程P117。在第3个表格中插入页面元素，其在扩展表格模式下的显示如图6.16所示。操作步骤见教程P117。采用前面所述的方法在第4个表格的单元格中分别插入相应的文本，其在扩展表格模式下的显示如图6.17所示。操作步骤略。12第6章　利用表格设计和制作网页利用CSS样式美化表格利用CSS样式美化表格中的文本，操作步骤见教程P119。利用CSS样式美化表格

7、背景，操作步骤见教程P120。利用CSS样式美化表格边框，操作步骤见教程P120。13第6章　利用表格设计和制作网页设置表格属性将用于页面布局的4个外表格居中对齐，操作步骤见教程P122。将“热门话题”表格中的内嵌7行2列表格的单元格间距调整为3，操作步骤见教程P123。将相应表格的高度进行适当的调整。操作步骤见教程P123。14第6章　利用表格设计和制作网页设置表格行、列及单元格属性为第1个外表格的第2行设置背景图像，操作步骤见教程P125。调整第2个外表格各单元格的宽度，效果如图6.28所示。操作步骤见教程P12

8、5。设置第3个外表格及其内嵌表格的单元格属性，效果如图6.29所示。操作步骤见教程P125。为第4个外表格中的各单元格分别设置背景颜色，操作步骤见教程P126。15第6章　利用表格设计和制作网页表格的高级应用技巧利用表格制作水平线和垂直线将第4个表格的第1