《网页设计与制作教程 第2版 北京市精品教材 教学课件 PPT 作者 赵丰年 吕宜宏 第7章 使用表格》由会员分享，可在线阅读，更多相关《网页设计与制作教程 第2版 北京市精品教材 教学课件 PPT 作者 赵丰年 吕宜宏 第7章 使用表格（17页珍藏版）》请在金锄头文库上搜索。
1、1,第7章 使用表格,2/17,本章要点,7.1 使用表格显示内容 7.2 使用表格布局网页,3/17,7.1 使用表格显示内容,本节介绍在网页中制作表格显示网页数据，内容包括： 表格基本操作 使用表格显示数据,4/17,7.1.1 表格操作,表格用于在网页上显示表格型数据。表格由一行或多行组成，每行又由一个或多个单元格组成。 表格的基本操作包括： 插入表格 表格的属性 选择表格和单元格 拆分和合并单元格 在表格单元中添加内容,5/17,7.1.1 表格操作（续）,在网页中可以使用“插入栏”“表格”按钮 ，在插入点添加表格。 演示插入表格的步骤（p129p130）,6/17,7.1.1 表格操
2、作（续）,表格由行、列以及行列中的单元格组成。表格宽度决定了网页中表格单元格内数据在网页中显示的宽度。 在实际应用表格时，表格宽度可以指定具体以像素值为单位的宽度，也可以指定以百分比为单位的表格宽度，而表格高度一般不需指定，表示根据表格单元格中内容的高度使表格高度自动适应。,7/17,7.1.1 表格操作（续）,如果要修改表格属性，单击表格四周边框选择表格，在表格属性检查中修改表格属性即可，如图 7.3 所示。,8/17,7.1.1 表格操作（续）,单击表格四周边框可以选择表格。也可以单击状态栏HTML标签选择器中的标签来选择文档中的表格。 在表格同属一行的单元格左侧移动鼠标，光标变为向右箭头
3、时，单击即可选择表格行。在表格同属一列的单元格上方移动鼠标，光标变为向下箭头时，单击即可选择表格列。 在单元格中，双击即可选择该单元格，也可以先定位插入点到单元格，然后再单击状态栏 HTML标签选择器中的标签来选择单元格。,9/17,7.1.1 表格操作（续）,拖拽鼠标选择相邻的单元格成为任意矩形区域时，选择“修改”“表格”“合并单击格”命令或者单击属性检查器上的“合并单元格”按钮 ，可以合并所选单元格。,10/17,7.1.1 表格操作（续）,选择单元格后执行“修改”“表格”“拆分单元格”命令或者单击属性检查器上的“拆分单元格”按钮 ，打开“拆分单击格”对话框，如图 7.4 所示。 在“把单
4、元格拆分”选项中选择“行”或“列”，在行数或列数框内输入要拆分单元格的行数或列数，单击“确定”按钮，可以将一个单元格拆分为若干行或列。,11/17,7.1.1 表格操作（续）,在表格中添加内容 在文档插入表格之后就可以在单元格内添加文本、超链接、图像等网页内容，方法是：首先定位插入点到单元格中，然后使用插入栏中的按钮来添加网页对象或文本。,12/17,7.1.2 使用表格显示数据,演示使用表格显示数据（p131p134）,13/17,7.2 使用表格布局网页,由于表格能将页面划分为任意矩形区域，所以是很常用的一种页面布局工具。即使在 CSS 布局非常普及的今天，表格布局仍然被很多网站采用。本节
5、内容包括： 网页布局基础 使用布局表格 综合使用表格和CSS布局,14/17,7.2.1 网页布局基础,网页布局就是指以一定的形式将网页中的信息组织起来，从而使网页易于阅读并达到一定审美标准。 网页布局的作用 布局的实用功能 主次分明、重点突出 导航清晰、便于浏览 布局合理、逻辑性强 布局的审美功能 统一，是指设计作品的整体性、一致性。 分割，是指将页面划分为不同区域，以便妥善安排各种页面组成元素。 对比，是指通过合理运用矛盾和冲突，使设计更加富有生机和活力。,15/17,7.2.2 使用布局表格,为了简化使用表格进行页面布局的过程，Dreamweaver 提供了“布局”模式。 在“布局”模式中，设计者可以在添加内容前使用布局单元格和表格来对页面进行布局。例如，可以沿网页的顶部绘制一个单元格放置标题图形，在网页的左边绘制另一个单元格放置导航条，在右边绘制第三个单元格放置内容。添加内容时，可以按照需要移动布局单元格的位置，以调整布局。,16/17,7.2.2 使用布局表格（续）,演示使用布局表格制作页面（p136p142）,17/17,7.2.3 综合使用表格与CSS,虽然CSS布局有其特定的优势，但由于浏览器对高级CSS特性的支持各不相同，因此“表格+CSS”作为一种过渡的布局技术，目前仍然有很多设计者使用。 演示“表格 + CSS”布局页面（p142p146,
