第6章-利用表格设计和制作网页-网页设计与制作实用教程电子教案课件.ppt

《第6章-利用表格设计和制作网页-网页设计与制作实用教程电子教案课件.ppt》由会员分享，可在线阅读，更多相关《第6章-利用表格设计和制作网页-网页设计与制作实用教程电子教案课件.ppt（21页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、主编：刘艳丽副主编：许晞主编：刘艳丽副主编：许晞主编：刘艳丽副主编：许晞主编：刘艳丽副主编：许晞 秦高德秦高德秦高德秦高德 高妍高妍高妍高妍5/26/2023学习目标学习目标掌握创建表格的方法；掌握创建表格的方法；掌握表格的基本操作方法；掌握表格的基本操作方法；掌握表格属性的设置方法；掌握表格属性的设置方法；掌握单元格属性的设置方法；掌握单元格属性的设置方法；了解表格的高级应用技巧；了解表格的高级应用技巧；掌握利用掌握利用“布局模式布局模式”规划网页的方法；规划网页的方法；了解表格数据的导入和导出方法。了解表格数据的导入和导出方法。5/26/20232第6章利用表格设计和制作网页目录目录利用表

2、格进行页面布局的实例利用表格进行页面布局的实例 表格的高级应用技巧表格的高级应用技巧利用利用“布局模式布局模式”规划网页规划网页表格的其他应用表格的其他应用 本章小结本章小结配套实训配套实训练习题练习题5/26/20233第6章利用表格设计和制作网页利用表格进行页面布局的实例利用表格进行页面布局的实例设计目标设计目标页面分析页面分析实训引导实训引导制作步骤制作步骤5/26/20234第6章利用表格设计和制作网页页面分析页面分析本本页页面面自自上上而而下下由由页页眉眉、导导航航栏栏、主主内内容容区区及及页页脚脚4 4部部分分组组成成，需需要要使使用用4 4个个外外表表格格来来合合理理地地进进行网

3、页布局。其中行网页布局。其中第第1 1个表格，用于定位页眉和导航栏板块；个表格，用于定位页眉和导航栏板块；第第2 2个个表表格格用用于于定定位位主主内内容容区区中中的的“用用户户登登录录”和和“公告通知公告通知”板块；板块；第第3 3个个表表格格，用用于于定定位位主主内内容容区区中中的的“热热门门话话题题”和主要栏目简介；和主要栏目简介；第第4 4个表格，用于定位页脚板块个表格，用于定位页脚板块 （教程（教程P108P108）返回返回5/26/20236第6章利用表格设计和制作网页实训引导实训引导1 1本页面中使用的图像文件由配套光盘本页面中使用的图像文件由配套光盘webcoursechapt

4、er06imageswebcoursechapter06images文件夹提供。文件夹提供。2 2页面中的文字资料页面中的文字资料txt6.txttxt6.txt、素材网页、素材网页（ex6_login.htmlex6_login.html和和ex6_remenhuati.htmlex6_remenhuati.html）、样式文）、样式文件件css_chapter6.csscss_chapter6.css由配套光盘由配套光盘webcoursechapter06materialswebcoursechapter06materials文件夹提供，将文件夹提供，将css_chapter6.csscs

5、s_chapter6.css样式文件复制到本地站点样式文件复制到本地站点futurefuture文文件夹下。件夹下。3 3页面效果请参见配套光盘页面效果请参见配套光盘webcoursechapter06webcoursechapter06文文件夹下的件夹下的index6.htmlindex6.html文件文件 。返回返回5/26/20237第6章利用表格设计和制作网页制作步骤制作步骤首先新建一个文件，将页面属性设置为：文本大小为首先新建一个文件，将页面属性设置为：文本大小为1212像素，背景颜色为像素，背景颜色为“#CCCCCC”“#CCCCCC”，上边距、左边距的值均为，上边距、左边距的值均

6、为0 0，网页标题（，网页标题（TitleTitle）为）为“畅想未来畅想未来”，链接的，链接的“下划线样式下划线样式”为为“仅在变换图像时显示下划线仅在变换图像时显示下划线”。然后将网页保存到本。然后将网页保存到本地站点的根文件夹地站点的根文件夹futurefuture下，取名为下，取名为index6.htmlindex6.html。接下来依次。接下来依次按照下述内容进行操作：按照下述内容进行操作：1 1通过绘制表格来设计页面布局。通过绘制表格来设计页面布局。2 2在表格中插入页面元素，如文本、图像等。在表格中插入页面元素，如文本、图像等。3 3利用利用CSSCSS样式美化表格中的文本以及表

7、格的背景、边样式美化表格中的文本以及表格的背景、边框。框。4 4设置表格属性，如表格的对齐方式、背景图像和背设置表格属性，如表格的对齐方式、背景图像和背景色等。景色等。5 5设置单元格属性，如单元格、行或列内容的对齐方设置单元格属性，如单元格、行或列内容的对齐方式、背景图像和背景色等。式、背景图像和背景色等。返回返回5/26/20238第6章利用表格设计和制作网页插入空白表格插入空白表格插入用于页面布局的第插入用于页面布局的第1 1个表格。操作步骤见教个表格。操作步骤见教程程P110P110。插入用于页面布局的第插入用于页面布局的第2 2、3 3、4 4个表格。操作步个表格。操作步骤见教程骤见

8、教程P113P113。5/26/202310第6章利用表格设计和制作网页合并与拆分单元格合并与拆分单元格将第将第3 3个表格的第个表格的第1 1列的列的2 2个单元格进行合并，效个单元格进行合并，效果如图果如图6.86.8所示。操作步骤见教程所示。操作步骤见教程P114P114。将第将第3 3个表格的第个表格的第1 1行第行第2 2列单元格进行拆分，效列单元格进行拆分，效果如图果如图6.86.8所示。操作步骤见教程所示。操作步骤见教程P114P114。5/26/202311第6章利用表格设计和制作网页利用利用CSS样式美化表格样式美化表格利用利用CSSCSS样式美化表格中的文本，操作步骤见教样

9、式美化表格中的文本，操作步骤见教程程P119P119。利用利用CSSCSS样式美化表格背景，操作步骤见教程样式美化表格背景，操作步骤见教程P120P120。利用利用CSSCSS样式美化表格边框，操作步骤见教程样式美化表格边框，操作步骤见教程P120P120。5/26/202313第6章利用表格设计和制作网页设置表格行、列及单元格属性设置表格行、列及单元格属性为第为第1 1个外表格的第个外表格的第2 2行设置背景图像，操作步行设置背景图像，操作步骤见教程骤见教程P125P125。调整第调整第2 2个外表格各单元格的宽度，效果如图个外表格各单元格的宽度，效果如图6.286.28所示。操作步骤见教程

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

11、6.30所示。操作步骤见教程所示。操作步骤见教程P126P126。制作立体导航栏表格制作立体导航栏表格将第将第1 1个表格中的内嵌导航栏表格制作成立体导个表格中的内嵌导航栏表格制作成立体导航栏表格，效果如图航栏表格，效果如图6.336.33所示。操作步骤见教程所示。操作步骤见教程P128P128。5/26/202316第6章利用表格设计和制作网页表格的其他应用表格的其他应用6.7.16.7.1表格数据的导入和导出表格数据的导入和导出如图如图6.416.41所示，将所示，将ExcelExcel工作表工作表ex6_6_1.xlsex6_6_1.xls中的中的数据导入到网页中，效果如图数据导入到网页

12、中，效果如图6.426.42所示。操作步骤所示。操作步骤见教程见教程P132P132。6.7.26.7.2一个自动套用表格格式实例一个自动套用表格格式实例将网页文件将网页文件ex6_table.htmlex6_table.html中的表格进行格式化，中的表格进行格式化，效果如图效果如图6.466.46所示。操作步骤见教程所示。操作步骤见教程P134P134。5/26/202318第6章利用表格设计和制作网页本章小结本章小结 本章通过本章通过“畅想未来畅想未来”网站首页的设计制作，详细介绍网站首页的设计制作，详细介绍了以下内容：了以下内容：（1 1）表格的基本操作和如何利用表格进行页面布局的方）

13、表格的基本操作和如何利用表格进行页面布局的方法，其中包括：创建表格、在表格中插入页面元素、设置表法，其中包括：创建表格、在表格中插入页面元素、设置表格属性（设置表格行、列、单元格的属性和设置表格的总体格属性（设置表格行、列、单元格的属性和设置表格的总体属性）及利用表格来定位页面元素。属性）及利用表格来定位页面元素。（2 2）表格的高级使用技巧，其中包括利用表格制作水平）表格的高级使用技巧，其中包括利用表格制作水平线和垂直线及立体导航栏表格的制作方法。线和垂直线及立体导航栏表格的制作方法。（3 3）利用）利用“布局模式布局模式”规划网页的方法。规划网页的方法。（4 4）表格的其他应用，如自动套用表格格式和表格数据）表格的其他应用，如自动套用表格格式和表格数据的导入和导出。的导入和导出。5/26/202319第6章利用表格设计和制作网页配套实训配套实训 参见教材第135138页，利用提供的素材文件，制作一个介绍八音琴的网站，网页效果如图6.47所示。5/26/202320第6章利用表格设计和制作网页练习题练习题参见教材第138页，完成相应的练习题：填空题填空题单选题单选题思考题思考题5/26/202321第6章利用表格设计和制作网页