网页制作教程第04课

第4章布局页面学习目标本章要点上机练习习题学习目标在网页布局方面，表格起着举足轻重的作用，通过设置表格以及单元格的属性，可以对页面中的元素进行准确定位，有序地排列数据并对页面进行更加合理的布局。布局视图是网页设计中一项重要的内容，利用页面布局功能可以将以前繁琐的页面布局工作变得简单而轻松。本章将讲解利用表格和页面布局功能布局页面的方法。本章要点创建表格编辑表格布局视图模式页面布局的基本应用创建表格表格在网页制作中的应用非常广泛，它可以使页面层次更清晰，条理更清楚，可以严格地控制对象摆放的位置，对网页中的文本、图像、Flash动画等元素进行准确定位，并能有序地排列各种页面数据。表格的元素组成插入表格表格的元素组成表格主要由行、列、单元格和边框4种元素组成。表格的元素组成表格中4种元素的含义分别如下：单元格：表格中的每一个小格称为一个单元格。行：水平方向的一排单元格称之为一行。表格共有5行。列：垂直方向的一排单元格称之为一列。表格共有4列。边框：组成表格的线条称之为边框。插入表格在Dreamweaver8中，插入表格可以通过“常用”面板或“插入”菜单来完成。插入表格“表格”对话框中主要参数的含义分别如下：“行数”文本框：用于设置插入表格的行数。“列数”文本框：用于设置插入表格的列数。“表格宽度”文本框：用于设置插入表格的宽度。在其右侧的下拉列表框中可以选择表格的宽度单位，有“像素”和“百分比”两种。插入表格“边框粗细”文本框：用于设置表格边框线的粗细，以像素为单位。“单元格边距”文本框：用于设置单元格中内容与单元格边界间的距离，以像素为单位。“单元格间距”文本框：用于设置表格中单元格间的距离，以像素为单位。【例4-1】通过“常用”面板在页面中插入一个5行3列的表格。表格的编辑合理运用表格对页面布局有着至关重要的作用。可以说表格是Dreamweaver8页面布局的核心。但直接创建出来的表格往往不能满足需要，还需对其进行编辑，使其符合要求，下面就对如何编辑表格进行介绍。选择表格元素输入页面元素设置表格属性添加/删除行或列单元格的合并及拆分应用举例——创建细线表格选择表格元素在对表格进行编辑操作之前，首先应掌握如何选中需要编辑的表格元素。对于表格而言，可以选择单行、单列、多行、多列、连续或不连续的单元格及整个表格。选择单行或者单列选择连续的多行或多列选择不连续的多行或多列选择连续的单元格选择不连续的单元格选择整个表格选择单行或者单列要选择表格的行或者列，可将鼠标光标指向该行的左边线或该列的上边线并单击，即可选择单行或者单列。当表格的某个行或列被选择后，选择的行或列中所有单元格四周都会出现黑色粗框。选择单行和选择单列选择连续的多行或多列如果要选择多行或多列相邻的单元格，可将鼠标光标移动到需要选择行的左侧边框处或列的上方边框处，当其变为黑色箭头形状时，单击鼠标并拖动即可选择相邻的多行或多列。选择连续的多行和选择连续的多列选择不连续的多行或多列如果要选择不相邻的多行或多列，可先选择一行或一列，然后按住Ctrl键并依次在其他行的左边框或列的上边框单击，即可选择不相邻的多行或多列。选择不连续的多行和选择不相邻的多列选择连续的单元格先选择一个单元格，然后按住Shift键并单击其他要选择的单元格，或在一个单元格中单击并横向或纵向拖动鼠标，即可选择多个连续的单元格。选择不连续的单元格按住Ctrl键，分别单击不连续的各单元格即可，若再次单击已被选择的单元格，则可取消该单元格的选中状态。选择整个表格选择整个表格有多种方法。最简单的方法有两种，第一种是将鼠标光标指向表格框线，当出现红色外框线时单击；第二种方法是将鼠标光标置于表格单元格中，然后单击状态栏中的“<table>”标签。选择整个表格输入页面元素创建表格后，通常需要在表格中输入文本、插入图像等页面元素，也可以在单元格中插入表格或对常规数据进行编辑操作。在表格中插入文本插入图像嵌套表格在表格中插入文本在表格中插入文本，只需在表格的单元格中直接输入文本或将复制的文本粘贴到表格单元格中即可。插入图像在表格中插入图像与直接在网页中插入图像的方法相同。【例4-2】在表格的某个单元格中插入图像。嵌套表格在表格的单元格中可以再插入表格，插入单元格中的表格称为嵌套表格。嵌套表格可以将单元格再分为许多行和列，并且可以无限制地插入。但嵌套表格插入得越多，浏览器的下载时间就越长，因此嵌套表格的层数不应过多，一般不要超过3层。设置表格属性在Dreamweaver8中，通过设置表格和单元格的属性，可以修改表格和单元格的各项参数，使其满足布局需求。下面将分别介绍表格和单元格的属性设置设置表格属性置单元格属性设置表格属性选择页面中插入的表格，其“属性”面板。设置表格属性通过表格“属性”面板可以设置表格的名称、行列数、宽度和高度等参数。各参数的具体含义如下：“表格Id”下拉列表框：用于设置表格的名称，可在该下拉列表框中直接输入。“行”文本框：用于设置表格的行数。“列”文本框：用于设置表格的列数。“宽”文本框：用于设置表格的宽度，其单位是“像素”或“%”。设置表格属性“高”文本框：设置表格的高度，其单位的设置同“宽”文本框相同。“填充”文本框：设置单元格内容与边框的距离。“间距”文本框：设置每个单元格间的距离。“对齐”下拉列表框：设置表格对齐方式，有左对齐、居中对齐和右对齐3种。“边框”文本框：表格边框宽度，以像素为单位，当数值为“0”时没有边框。设置表格属性设置表格属性设置表格属性“背景颜色”颜色框：用于设置表格的背景颜色。“背景图像”文本框：用于设置表格的背景图像。“边框颜色”颜色框：用于设置表格边框的颜色。设置单元格属性通过“属性”面板可以单独设置单元格的属性，将光标放置于单元格中或单击要设置属性的单元格后，单元格“属性”面板。设置单元格属性通过单元格“属性”面板可以设置单元格中内容的对齐方式、单元格的宽度和高度、背景颜色和背景图像等参数。单元格“属性”面板中各项参数的含义如下：“水平”下拉列表框：设置单元格中内容的水平对齐方式，有默认、左对齐、居中对齐和右对齐4种方式。“垂直”下拉列表框：设置单元格中内容的垂直对齐方式，有默认、顶端、居中、底部和基线5种方式。设置单元格属性“宽”、“高”文本框：设置单元格宽度和高度。“背景”文本框：设置单元格的背景图像。“背景颜色”颜色框：设置单元格的背景颜色。“边框”颜色框：设置单元格边框的颜色。设置单元格属性添加/删除行或列为了制作的需要，有时需在已经创建的表格中添加或删除行或列。添加行或者列删除行或者列添加行或者列将光标放置到表格的单元格内，选择“修改/表格/插入行”命令，或将光标放置到单元格内，单击鼠标右键，在弹出的快捷菜单中选择“表格/插入行”命令，或按Ctrl+M快捷键都可以添加一行。将光标放置到表格的单元格内，选择“修改/表格/插入列”命令，或将光标放置到单元格内，单击鼠标右键，在弹出快捷菜单中选择“表格/插入列”命令，或按Ctrl+Shift+A快捷键都可以添加一列。删除行或者列将光标放置到单元格内，选择“修改/表格/删除行”命令，或单击鼠标右键，在弹出的快捷菜单中选择“表格/删除行”命令可删除一行。将光标放置到单元格内，选择“修改/表格/删除列”命令，或单击鼠标右键，在弹出的快捷菜单中选择“表格/删除列”命令可删除一列。单元格的合并及拆分为了页面制作的需要，有时需要对已创建表格中的单元格进行合并或拆分，下面分别介绍。合并单元格拆分单元格合并单元格合并单元格的前提是要合并的单元格必须是连续的多个单元格，对不连续的单元格无法进行合并操作。合并单元格比较简单，只需选择要合并的单元格后，执行相应的命令即可。【例4-3】合并连续单元格。拆分单元格拆分单元格是将单个单元格拆分为多个单元格，在拆分时需指定拆分的行数或列数。应用举例——创建细线表格细线表格就是边框只有1像素粗细的表格，但在Dreamweaver中，将表格边框设置为“1”时，所创建的表格的边框其实并不止1像素。因此要创建细线表格，可以将表格的单元格间距设置为“1”，然后通过分别为表格和单元格设置不同的背景颜色来实现。布局视图模式为了简化利用表格布局页面的过程，Dreamweaver提供了布局视图模式。在布局视图模式下可以方便地绘制表格、单元格，并定制和移动这些表格单元格。下面对布局视图模式进行讲解。布局视图模式介绍布局视图模式的切换和退出布局视图模式介绍前面介绍的用表格进行网页布局定位的方法是通过直接设定表格的参数来实现的，对于简单的情况，这种方法尚能胜任，如果布局较复杂，手工设置表格则是一件极其繁琐的工作，而通过布局视图模式则可方便地完成。当在页面中创建布局单元格时，Dreamweaver会自动创建一个布局表格用来放置布局单元格。布局单元格不能存放在布局表格之外，在创建页面布局时可以在同一个布局表格中放置多个布局单元格或创建多个布局表格。布局视图模式的切换和退出切换到布局视图模式页面布局的基本应用在布局视图模式中，可以绘制布局表格或布局单元格，并分别设置其属性。绘制布局表格和单元格清除布局表格高度设置布局表格宽度移动/调整布局表格和布局单元格应用举例——在页面中使用布局视图绘制布局表格和单元格绘制布局表格和单元格绘制布局表格绘制布局单元格绘制布局表格在布局视图模式下绘制布局表格。布局表格以绿色的轮廓线、灰色背景显示，在表格的左上角会显示表格标签，通过标签，可以分辨并选择布局表格，其宽度值显示在表格下边线中间。绘制布局单元格在布局视图模式下绘制布局单元格。页面布局表格不能相互重叠，但可以将一个布局表格绘制在另一个布局表格中，以生成嵌套表格，而且对外部表格所进行的更改不会影响嵌套表格中的单元格。清除布局表格高度在Dreamweaver中，创建布局表格时会自动为所有创建的表格设置高度，当向其中输入文本和插入图像时，就不需要再设置高度。清除布局表格高度有以下两种方法：清除布局表格高度设置布局表格宽度在布局视图模式中可以设置布局表格的宽度，包括固定宽度和自动伸展。设置固定宽度设置自动伸展设置固定宽度设置布局表格宽度为固定宽度。设置自动伸展将布局表格宽高设置为自动伸展有以下两种方法：选择要设置自动伸展的布局表格后，在“属性”面板中选中“自动伸展”单选按钮。单击布局表格标题栏上的列标题菜单，在弹出的下拉菜单中选择“列宽设置为自动”命令。移动/调整布局表格和布局单元格在页面布局中，可以通过移动操作简捷地定位布局表格和布局单元格，但在布局表格或布局单元格的周围，必须要有一定的可移动空间，这样被灰色包围的布局单元格与嵌套表格才可以被移动。用键盘上的方向键来控制布局表格或布局单元格的移动，每次只能移动1像素的距离；按Shift键的同时用方向键移动，每次可移动10像素的距离。移动/调整布局表格和布局单元格调整布局单元格尺寸时，首先应选中该单元格，使之出现边角控制点。将光标移动到边角控制点并拖动鼠标，即可调整单元格的大小。布局单元格的边界和大小不能超出它所在的布局表格。调整布局表格尺寸时，首先要选择该表格，然后将鼠标光标移动到边角控制点，根据箭头方向拖动鼠标可调整布局表格的大小。显示布局单元格控制点和调整布局表格的大小

应用举例——在页面中使用布局视图

下面在布局视图模式中进行页面的布局，掌握布局视图模式的使用方法，完成布局后的页面（光盘:\最终效果\第4章\index2.html）。上机练习本章上机练习将分别使用表格和布局视图模式对“英雄巴乔”页面（光盘:\实例素材\第4章\baqiao.html）进行布局并添加图像，完成后的最终效果如图4-47所示（光盘:\最终效果\第4章