表格布局商务网页课件.ppt

《表格布局商务网页课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、项目六表格——布局商务网页任务一使用表格布局页眉任务二使用嵌套表格布局主体页面实训使用表格布局“玉石的种类”页面任务三使用表格布局页脚表格网页本章要点内容:表格的基本概念和组成元素。表格的基本操作。表格的深入使用。利用表格排版。本章学习目标了解表格在网页页面排版中的重要作用。能够对表格进行基本操作并综合实例掌握基本排版技巧。把握表格的排序、数据导入导出以及美化等深入应用。本章学前要求对基本网页操作有所了解，已经学会了文本、图片以及超链接的运用。6.1认识表格如果读者具有计算机基础，学习过Office系列的办公软件，那么表格应该是一个常见的概念，在网页制作的过程中，表格的概念和Office中的

2、表格基本相似，如图6.1所示。图6.1是表格基本元素的示意图，示意图是一张3行×3列的表格，横向叫行，纵向叫列。行列交叉部分就叫做单元格。单元格和单元格之间的距离叫间距。整张表格的边缘叫做边框。单元格中的内容和单元格边框的距离叫单元格填充，又称边距。学习时请注意这几个概念和表格标记中属性的对应关系。图6.1表格基本元素示意图表格和单元格的宽度、高度、边框、背景等属性都可以调整，有利于进行全页面的布局排版，特别是边框宽度可以设置为0，从而在浏览器中隐藏表格，让用户感觉不到表格的存在。表格的每个单元格实际上可以看成一个独立的容器，可以插入几乎所有的网页元素，其位置相对于表格来说是固定的，但却伴随着

3、表格宽度高度的更改，因此插入的网页元素可以按照设计者的意愿放置在网页的任何角落。另外，表格的行和列可以被随时插入、删除、复制、粘贴，单元格还可以被拆分或合并，这都为制作网页带来了巨大的灵活性。正是表格具有以上的特点，因此通常认为熟悉运用表格是制作高质量高水准网页的重要手段，尤其是现在那些知名的大型网站，已经离不开表格的帮助。以下是一些经典的使用表格网页，图6.2是联想公司的网站，图6.3是著名的265上网导航。以上两个实例是运用表格的典型案例，其中联想公司的网站看不到表格的边框，265上网导航的网站明显有表格边框，而且边框很细，布局复杂。实例1实例2提示：在HTML语言中，表格由表格标记、行

4、标记、单元格标记三个标记构成，举例说明一个两行两列表格的基本标记就是如下：

5、，由两个大的表格组成，其中第二张表格还涉及到了表格的嵌套使用。本章就以这个实例的制作过程作为介绍表格网页制作的主线，从头到位按按步骤对表格创建、修改和调整的常规用法进行连贯的讲解，与此同时以简单的HTML语言描述所做操作在HTML语言中的引起的变化，希望读者能够自己分析更多的表格实例，尽快的掌握表格的使用技巧。图6.4本章实例步骤1：新建一个基本的HTML网页并保存，命名为index.html，在属性面板中将本页的对齐方式设置为中间对齐，在插入表格之前，我们先建立一个样式表，使得表格内的文字大小都为12“表格”，样式表如下：table{font.si

6、ze:12px;}步骤2：在插入栏选择表格按钮或选择“插入”菜单的“表格”命令，系统弹出表格对话框如图6.5所示。图6.5“表格”对话框步骤3：初步设置表格，行数为2，列数为1，宽度600，单元格边距为0，单元格间距为2，“页眉”选择“无”，表格的“标题”可以不填写，“对齐标题”可选择默认，“摘要”一般为空，设置完毕单击“确定”，生成表格，如图6.6所示。在表格对话框中，“表格宽度”的单位是像素，也可以是百分比。“边框粗细”、“单元格边距”和“单元格间距”的单位都是像素。在“辅助功能”区域，如果我们填写“标题”，则会在表格的上部自动插入我们输入的文本作为表格的标题，在“对齐标题

7、”中可以选择该标题的对齐方式，默认的对齐方式为居中对齐。标题在HTML语言中的标记是，代码如下：