网页制作教程第04课课件.ppt

《网页制作教程第04课课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第4章布局页面学习目标本章要点上机练习习题学习目标在网页布局方面，表格起着举足轻重的作用，通过设置表格以及单元格的属性，可以对页面中的元素进行准确定位，有序地排列数据并对页面进行更加合理的布局。布局视图是网页设计中一项重要的内容，利用页面布局功能可以将以前繁琐的页面布局工作变得简单而轻松。本章将讲解利用表格和页面布局功能布局页面的方法。本章要点创建表格编辑表格布局视图模式页面布局的基本应用创建表格表格在网页制作中的应用非常广泛，它可以使页面层次更清晰，条理更清楚，可以严格地控制对象摆放的位置，对网页中的文本、图像

2、、Flash动画等元素进行准确定位，并能有序地排列各种页面数据。表格的元素组成插入表格表格的元素组成表格主要由行、列、单元格和边框4种元素组成。表格的元素组成表格中4种元素的含义分别如下：单元格：表格中的每一个小格称为一个单元格。行：水平方向的一排单元格称之为一行。表格共有5行。列：垂直方向的一排单元格称之为一列。表格共有4列。边框：组成表格的线条称之为边框。插入表格在Dreamweaver8中，插入表格可以通过“常用”面板或“插入”菜单来完成。插入表格“表格”对话框中主要参数的含义分别如下：“行数”文本框：用于

3、设置插入表格的行数。“列数”文本框：用于设置插入表格的列数。“表格宽度”文本框：用于设置插入表格的宽度。在其右侧的下拉列表框中可以选择表格的宽度单位，有“像素”和“百分比”两种。插入表格“边框粗细”文本框：用于设置表格边框线的粗细，以像素为单位。“单元格边距”文本框：用于设置单元格中内容与单元格边界间的距离，以像素为单位。“单元格间距”文本框：用于设置表格中单元格间的距离，以像素为单位。【例4-1】通过“常用”面板在页面中插入一个5行3列的表格。表格的编辑合理运用表格对页面布局有着至关重要的作用。可以说表格是Dr

4、eamweaver8页面布局的核心。但直接创建出来的表格往往不能满足需要，还需对其进行编辑，使其符合要求，下面就对如何编辑表格进行介绍。选择表格元素输入页面元素设置表格属性添加/删除行或列单元格的合并及拆分应用举例——创建细线表格选择表格元素在对表格进行编辑操作之前，首先应掌握如何选中需要编辑的表格元素。对于表格而言，可以选择单行、单列、多行、多列、连续或不连续的单元格及整个表格。选择单行或者单列选择连续的多行或多列选择不连续的多行或多列选择连续的单元格选择不连续的单元格选择整个表格选择单行或者单列要选择表格的行

5、或者列，可将鼠标光标指向该行的左边线或该列的上边线并单击，即可选择单行或者单列。当表格的某个行或列被选择后，选择的行或列中所有单元格四周都会出现黑色粗框。选择单行和选择单列选择连续的多行或多列如果要选择多行或多列相邻的单元格，可将鼠标光标移动到需要选择行的左侧边框处或列的上方边框处，当其变为黑色箭头形状时，单击鼠标并拖动即可选择相邻的多行或多列。选择连续的多行和选择连续的多列选择不连续的多行或多列如果要选择不相邻的多行或多列，可先选择一行或一列，然后按住Ctrl键并依次在其他行的左边框或列的上边框单击，即可选择不

6、相邻的多行或多列。选择不连续的多行和选择不相邻的多列选择连续的单元格先选择一个单元格，然后按住Shift键并单击其他要选择的单元格，或在一个单元格中单击并横向或纵向拖动鼠标，即可选择多个连续的单元格。选择不连续的单元格按住Ctrl键，分别单击不连续的各单元格即可，若再次单击已被选择的单元格，则可取消该单元格的选中状态。选择整个表格选择整个表格有多种方法。最简单的方法有两种，第一种是将鼠标光标指向表格框线，当出现红色外框线时单击；第二种方法是将鼠标光标置于表格单元格中，然后单击状态栏中的“

7、整个表格输入页面元素创建表格后，通常需要在表格中输入文本、插入图像等页面元素，也可以在单元格中插入表格或对常规数据进行编辑操作。在表格中插入文本插入图像嵌套表格在表格中插入文本在表格中插入文本，只需在表格的单元格中直接输入文本或将复制的文本粘贴到表格单元格中即可。插入图像在表格中插入图像与直接在网页中插入图像的方法相同。【例4-2】在表格的某个单元格中插入图像。嵌套表格在表格的单元格中可以再插入表格，插入单元格中的表格称为嵌套表格。嵌套表格可以将单元格再分为许多行和列，并且可以无限制地插入。但嵌套表格插入得越多，

8、浏览器的下载时间就越长，因此嵌套表格的层数不应过多，一般不要超过3层。设置表格属性在Dreamweaver8中，通过设置表格和单元格的属性，可以修改表格和单元格的各项参数，使其满足布局需求。下面将分别介绍表格和单元格的属性设置设置表格属性置单元格属性设置表格属性选择页面中插入的表格，其“属性”面板。设置表格属性通过表格“属性”面板可以设置表格的名称、行列数、宽度和高度等参