网页设计与制作 教学课件 作者 李云程 主编 李亮 周光明 副主编 第7章.pptVIP

第7章 巧用表格 7.1 表格的插入与设置 7.2 表格的管理 7.3 使用表格模板 7.4 表格的妙用 7.4 表格的妙用 * * 表格是整个网页设计的精华。 它不但具有输入数据和进行分类列表的功能， 而且还有更重要的作用―页面布局。 既可以用于页面设计和排版。 也用于控制文本和图像在页面上的位置。 本章将主要学会表格的创建、在表格中插入页面元素、表格属性设置和表格管理，最后学习表格的使用技巧，如制作导航条、利用表格定位页面元素等。 lyc 2008/3/24 深圳职业技术学院软件工程系 李云程制作 制作步骤 1．表格插入。将鼠标放到网页中要插入的位置，有两种方法插入表格。 2．选定表格。可以一次选定全部表格或者是一行、一列或几个单元格。然后进行对齐、边框颜色的背景颜色等属性设置。 3. 在表格中添加内容：可以插入文本、图片等页面元素。 案例 插入表格并设置其属性 通过设置表格或单元格的属性，我们可以改变表格的外观。。 示例效果 制作要求 ：在页面中插入一个3行3列的表格，对表格属性进行设置，第一行设置为标题，表格有1像素宽的边框，表格背景颜色为淡蓝色，表格中的数据居中对齐。 在插入面板中的常用选项卡中单击表格按钮，显示出表格对话框。 选择菜单插入/表格命令 ，显示出表格对话框。 选定整个表格：单击表格左上角或右边框或底边框。 选定一行或一列：将鼠标置于一行的左边框上，或置于一列的上边框上，当出现黑箭头时单击即可。 案例 使用不规则表格 制作要求： 在在页面中插入一个3行4列的表格，然后进行插入一行，删除一列操作，最后进行合并、拆分单元格。 制作步骤 1.插入一个3行4列的表格。 2. 增加或删除表格的行、列。 3. 拆分、合并单元格 。 插入一个表格后，有时经常要在表格中插入一行或一列，或者删除行和列，还有合并单元格等，这就涉及到表格的编辑管理。 示例效果 在需要插入新行（列）的单元格中单击。如要插入一行，则选择菜单 修改/表格/插入行（或列）。 如要插入多行或列，则选择菜单修改 /表格/插入行或列。 选中想要合并的单元格 ，则选择菜单修改 /表格/合并单元格。 选中单元格，选择菜单修改 /表格/拆分单元格。 制作要求：在网页中插入一个表格后，对该表格使用表格模板进行格式化，设置其外观。 制作步骤 1.在网页中插入一个表格 。 2.选中表格，选择菜单命令/格式化表格，在对话框中选择其中一种。 3. 输入要求内容。 系统提供了很多预设的表格模板，提供给设计者以便提高表格格式化的水准和效率。可以直接套用即可 。 案例应用表格模板 示例效果 导航条是网页制作中经常用到的，本节学习利用表格来制作导航条。 1.在网页中插入表格，并进行参数设置。 制作要求：在网页顶部有一导航条，当用户单击不同的栏目时，能链接到不同的网页。。 ２.在表格单元格内插入内容。这里是插入一些图片 。 3.在属性面板上设置表格对齐方式为居中对齐。 4.对每个图片设置内部超级链接。 案例使用表格技术制作导航条 制作步骤 示例效果 前面学习了表格技术，学会了表格的创建、在表格中插入页面元素、表格属性设置和表格管理，最后学习表格的使用技巧，如制作导航条、利用表格定位页面元素进行网页布局设计等。 在利用表格进行网页布局时，一定要将其属性中的边框置设为0，有时也要设置间距值。