网页设计与制作实用教程 教学课件 作者 马绍惠 第5章 页面布局.pptVIP

第5章 表格、框架、层、行为与网页布局 学习要求 本章重点 表格的插入、选择、创建和设置 框架的创建、保存和删除的使用方法 层和行为的基本操作和设置方法 网页布局的设置和调整。 主要内容 5.1 表格 5.2 框 架 5.3 层 5.4 行为 5.5 网页布局 5.1 表格 表格在页面数据的组织、页面文本和图形的定位控制方面有很强的功能，它不仅可以将文本图片组织起来，还可以起到元素的定位作用，通过表格进行定位，可设计出版式整齐的页面。 表格的插入、选择与编辑 1. 插入表格 将插入点放在要插入位置，单击“插入”→“表格”菜单命令或如图5-1所示的“插入”工具面板的“布局”工具集合中单击“插入表格”按钮，可打开如图5-2所示的“插入表格”对话框。也可直接从“布局”工具集合中将“插入表格”按钮拖拽到文档中需要插入表格的位置。 在“表格”对话框中，设置好各项参数后单击“确 在“表格”对话框中，设置好各项参数后单击“确定”按钮，即可在当前光标所在位置插入一表格。 “插入表格”对话框中，还可以对表格的页眉、对齐方式、摘要以及其他一些辅助功能的设置。 2. 表格的选择 要对表格或表格中的行、列、单元格进行操作，就必须先选中它们。 ⑴ 整个表格的选择 将鼠标指针移动到表格边框的角上或下处，当鼠标变成如图5-3所示的形状时，单击鼠标左键即可选中表格，选中后的表格如图5-4所示。 另外在按住【shift】键的同时，单击表格中的任意位置，或者单击表格中任意位置后，在文档窗口下方状态行的标记选择器中单击table标记，也可选中整个表格。 ⑵ 选择表格的行或列 1)单击要选择表格行或列中的第一个单元格，然后按住鼠标左键，拖动鼠标，直到要选择表格行或列中最后一个单元格，再释放鼠标，即可选中表格行或列。在 此基础上，上下或左右拖动可选择多行或多列。 2)将鼠标移动到单元格之外，当鼠标变为黑色箭头时，单击鼠标可选中行或列，若当鼠标变为黑色箭头时，然后按住鼠标左键，拖动鼠标，直到要选择的多个表格行或列，再释放鼠标，即可选中表格的多行或多列。 3) 单击要选择表格行中的任意一个单元格，然后在文档窗口左下方状态行的标记选择器上单击tr标记，即可选中该表格行. ⑶ 单元格的选择 相邻单元格的选择方法为先选中一个单元格，再按住Ctrl键，单击想要选择的其他单元格，就可以选中目标单元格。或者单击一个单元格，然后拖动鼠标，覆盖过想要选择的单元格，单元格就被选中了。 选择不相邻单元格的方法为先选择包括要选择的单 元格在内的相邻单元格，然后按住Ctrl键，逐个单击不想选择的单元格，就可以保留想要选择的单元格了相邻单元格的选择方法为先选中一个单元格，再按住Ctrl键单击想要选择的单元格，就可以了，效果如图5-8所示. ⑴ 表格的合并 要进行合并的单元格必须连续，否则不能合并。合并单元格的方法有多种：1）选择需要合并的连续单元格，选择“修改”→“表格”→“合并单元格”即可。2）选择需要合并的连续单元格，单击右键，在快捷菜单里选择“表格”→“合并单元格”命令即可。3）选择需要合并的连续单元格，单击单元格属性面板里的合并单元格按钮.如图5-5所示。 ⑵ 表格的拆分 拆分单元格的方法如下：1）选择需要拆分的单元格，选择“修改”→“表格”→“拆分单元格”即可. 2）选择需要拆分的单元格，单击右键，在快捷菜单里选择. “表格”→“拆分单元格”命令即可。3）选择需要拆分单元格，单击单元格属性面板里的合并单元格按钮.如图5-6所示。 4.在表格中添加内容 用户可以方便的在表格中添加文本和图像等内容，只需将光标定位在要添加内容的单元格中，直接输入文本，或者单击“插入”→“图像”菜单命令，插入图像。另外，单击“文本”→“导入”→“表格式数据”或“插入”→“表格对象”→“导入表格式数据”菜单命令可插入外部表格数据。如图5-7为添加了文本的表格页面。 表格格式的设置 1 1. 利用“属性”面板设置表格格式 选中表格或单元格以后，会出现表格或单元格的“属性”面板。在表格“属性”面板中可对表格的行数、列数，宽、高、填充间距、颜色等进行设置。如选中上图所示的表格，在表格“属性”面板(图5-8)中设置“边框颜色”为蓝色，“填充”和“间距”都为0，则其格式如图5-9所示。 2．自动套用格式来设置表格样式 在Dreamweaver