网页制作,清华大学出版社第13章.ppt

1、第13章 层与表格及其应用,13.1 层的创建与基本操作 13.2 层的属性面板和控制面板 13.3 层的应用实例 13.4创建表格的基本操作 13.5表格的编辑修改与格式化 13.6布局表格和布局单元格 137 本章小结,本章重点： 层的创建、编辑和应用的方法 表格的创建、编辑和应用的方法 布局表格与布局单元格的创建、编辑和应用的方法,3.1 层的创建与基本操作 层是网页中用来放置文本、图像、动画、视频和表单等网页元素的载体。层在Dreamweaver 8.0网页编辑窗口中可以自由移动，改变层在网页中的位置，便可实现层中网页元素位置的改变，实际上层的应用技术也是一种网页元素的定位技术。层与行

2、为、时间轴配合使用后，可以控制多个层的叠放次序，层的显示或隐藏，以及可以很方便地设计出动感页面效果和滚动字幕、下拉式菜单等网页特效。,13.1.1创建和删除层 在网页中创建一个新层可以单击【插入】栏的【布局】选项中的【绘制层】按钮，或选择【插入】|【布局对象】|【层】命令来插入层。在同一个页面中，可以创建多个层。在创建好的层中还可以继续创建层，来实现层的嵌套。嵌套层可称为子层，包含嵌套层的那个层称为父层，嵌套层永远在其父层上方，创建层和嵌套层的操作步骤如下。 （1）单击【插入】面板组的【常用】选项卡中的【描绘层】按钮，此时光标变为 + 形状。,（2）在网页编辑区中上选择插入层的位置，然后拖动鼠

3、标便可绘制一个层，此时在网页编辑区窗口中出现一个层，如图13-1所示。在光标所在位置上创建了一个默认属性的层。 （3）将光标插入到已建好的层中，然后选择【插入】|【布局对象】|【层】命令，可在已建的层中插入一个嵌套层。 嵌套层的子层可以在其父层中间，也可以在其父层外边，嵌套层永远在其父层上方。,图 13-1 未被选中激活的层 图13-2 被激活的层 图13-3 被选中的层,13.1.2 激活和选中层 一个层在被激活后，才能将文本、图像、表格、表单、多媒体等网页元素插入到层中，单击层中任意位置，就可激活层，此时光标在层中闪烁，层的左上角出现选择柄，边框线由灰色变为蓝色，如图13-2所示。选中层后

4、，才能对层设置属性和进行调整、移动等操作，如图13-3所示。 选中层的多种方法如下。 （1）先激活层，再单击层左上角的选择柄，可选中该层。 （2）单击层的边框，也可选中层。 （3）如果在当前网页编辑窗口中没有层被激活和选中，按住Shift 键，单击层中任意位置，就可选中该层。按住Shift键，单击每一个要选中的层，可选中多个层。,（4）如果已经选中了多个层，按住Ctrl+Shift 键，再单击要选中的层，可仅选中该层，同时取消对其他层的选择。 （5）按F2功能键或选择【窗口】|【层】命令，在打开的【层】面板中单击该层的名称，就可选中该层。 （6）按住Shift键，在【层】面板中单击每一个要选中

5、的层名称，可选中多个层。,13.1.3 调整、移动和对齐层 1调整层的大小尺寸 创建层后，可通过以下方法调整层的大小尺寸。 （1）选中需要调整的层，此时在层的边框四周出现八个蓝色活动块，用鼠标拖曳某个活动块，即可调整层的大小。 （2）选中需要调整的层，在层【属性】面板的【宽】和【高】两个文本框中输入层的宽度和高度尺寸，可精确调整该层的尺寸。,2移动层 移动层的2种方法如下。 （1）用鼠标移动层时，可将光标移到层左上角的选择柄上，或将鼠标移到层的边框线上，当鼠标指针变成四个十字状箭头时，拖动鼠标即可移动该层。 （2）选中要移动的层，在层【属性】面板的【左】和【上】两个文本框中输入层左上角坐标，便

6、可精确设置这个层在网页中的目标位置。,3对齐层 对齐层的方法如下。 先选中多个要对齐的层，选择【修改】|【排列顺序】命令的下一级菜单中的【左对齐】、【右对齐】、【对齐上缘】、【对齐下缘】命令，可对齐选中的层。选择【设成宽度相同】和【设成高度相同】命令，可使选中的层具有相同的宽度和高度。,13.2 层的属性面板与控制面板 13.2.1设置层的属性 创建了层以后，可利用层的【属性】面板设置层的名称、位置、大小尺寸、背景颜色或背景图像、层的可见性、堆栈顺序、层标记、当层内容溢出时的处理方法、以及层中可见区域的位置和尺寸等等。 选中层的选择柄就可打开层的【属性】面板，如图13-4所示。,图13-4 层

7、的属性面板,层的【属性】面板中的各项设置的意义如下 （1）在【层编号】文本框中设置当前层的名称。层名称中不能带有符号和汉字，也不能以数字开头，只能是英文字母和数字。 （2）在【左】和【上】文本框中设置当前层相对于页面或父层的左上角距离。 （3）在【宽】和【高】文本框中指定层的宽度和高度。 （4）在【Z轴】文本框中可设置当前层的层次属性值。 可以把整个网页的页面看成X-Y平面，把网页上层的Z轴值可看成Z轴的坐标值。这个值决定了当前层放置在哪个层面上，一般Z轴值大的层放在上面，Z轴值小的层放在下面。,（5）在【可见性】下拉式列表中可以设置层的可见性。下拉式列表中的四个选项分别是Default (默

8、认状态)、Inherit (继承父层的可见性)、Visible（设置层为可见）、Hidden（设置层为隐藏）。 （6）在【背景图像】和【背景颜色】文本框中可设置层的背景图片和背景颜色。 （7）在【溢出】拉式列表中，确定当层的内容超出层范围时处理的方式。 其中溢出部分的处理的四个选项分别为Visible（增加层尺寸，显示超出部分的内容）、Hidden（保持层尺寸不变，隐藏超出部分的内容）、Scroll（增加滚动条）、Auto（当内容超出层尺寸时，自动增加滚动条）。 （8）在【剪辑】文本框中设置层的可视区域，【左】、【上】、【右】、【下】文本框中输入的数值表示层可视区域与层边界之间的距离。,13.

9、2.2 层的控制与操作 Dreamweaver 8.0中的层面板是一种能方便、轻松、直观地对层进行控制和操作的工具。选择【窗口】 |【层】命令，或按F2功能键，可打开层面板，如图13-5所示。 在层面板中可以完成对层改名，选定层，修改层的可见性，设置层的叠放次序以及设置层嵌套等操作，操作方法如下。 （1）选定某个层：只需在【层】面板列表中单击该层，即可选定这个层。 （2）更改层名：双击层名称，层名称处出现光标，便可删除原来的层名称，输入新的层名称。,图 13-5 层面板,（3）显示、隐藏层：单击【层】面板左边的显示与隐藏列，可显示或隐藏该层。如果在该列中显示一个睁眼的图标 ，表示显示该层；如果

10、在该列中显示一个闭眼的图标 ，表示隐藏该层；如果在该列中不显示任何图标，表示该层继承其父层的可见性。 （4）改变层的叠放次顺序：单击该层控制窗口的Z列，便可修改该层的层次属性值。或者用鼠标拖曳层，也可以调整该层的叠放次序。 （5）创建和取消嵌套层：按住Ctrl键，然后在【层】面板中拖曳子层到父层上，当父层上出现黑框时松开鼠标，便可创建一个嵌套层，如图13-5示。子层可随父层移动而移动，可继承父层的可见属性，也可另外设置可见属性。只需用鼠标将子层拖离父层，便可取消嵌套层。,（6）禁止层重叠：选中【层】面板【防止重叠】复选框，表示对层操作时禁止各层重叠。要创建嵌套层时必须取消该复选框。 在图13-

11、5所示的【层】面板中，Layer1在最底层，Layer3和 Layer4是 Layer2的嵌套层，在最上层。嵌套层在页面上显示时并不一定位于其父层之中，它的HTML代码嵌套在其父层的HTML代码中，移动父。层时嵌套层会一齐移动。如果从页面上看到某一层位于另一层之中，它们的HTML代码互不包含，就不是嵌套层,13.3 层的应用实例 例13.1制作具有下列要求的网页，网页示意如图13-6所示。 （1）页面的背景图片为bg0040.gif； （2）在页面合适的位置上插入4个层，层的大小为150 150像素。 （3）在层中插入【鼠标经过图像】，原始图像分别是ch13中的tu1_1.jpg、tu2_1.

12、jpg、tu3_1.jpg、tu4_1.jpg，鼠标经过图像分别是ch13中的tu1.jpg、tu2.jpg、tu3.jpg、tu4.jpg； （4）创建2个层，层中输入文字“书精神的粮食”，设置【字体】为“方正舒体”，【大小】为7，【颜色】为#993300，【样式】为“粗体”，将层中文字格式化。并将下面1个层中文字由黄色改为黑色。 （5）将2个文字层略微错开叠放在一起，设计出文字阴影效果，如图13-6所示。 （6）网页文件以exa13-1.htm 为名保存在在本地站点My site中。,制作分析： 本例是用层作为网页元素定位方式的网页实例，制作时要注意层在网页文档窗口和浏览器窗口中位置可能会

13、有偏差，需要调整好。另外，在完成网页制作前，需要正确创建本地站点。新建网页并设置页面属性后，需要将网页保存在本地站点中，这样以后在网页上添加的网页元素就是以相对路径插入的。 操作步骤 见教材259-260页,图 13-6应用实例示意图,13.4创建表格的基本操作 表格不但在组织页面数据时非常有用，而且在网页元素的布局安排上也起着重要的作用，利用表格可以控制文本和图像等对象在页面上的位置。网页一般可用表格和层来对网页元素定位，用层定位的网页元素有时浏览时会发生位置偏移，用表格定位是比较理想的方案。对于页面元素布局不规则的网页则可用布局表格和布局单元格来对网页元素定位，布局表格和布局单元格是使用方

14、便的网页元素定位工具。,13.4.1 新建表格 在网页制作时要新建一个表格，可选择【插入】|【表格】命令，或选择【插入】栏【布局】选项，单击【表格】按钮，也可用快捷键Ctrl+Alt+T，此时网页编辑窗口中会弹出【表格】对话框，如图13-8所示。在此对话框中，可设置表格的属性，然后单击【确定】按钮确认，便可在网页光标所在位置上插入表格。 【表格】对话框中各项参数具体意义如下。 （1）在【行数】和【列数】文本框中可设置表格的行数和列数。 （2）在【表格宽度】文本框中设置表格的宽度，并在右侧的下拉式列表中选择表格宽度的单位，选项分别为像素和百分比，其中百分比是指表格与浏览器窗口的百分比。,（3）在

15、【边框粗细】文本框中设置表格外框线的粗细。 （4）在【单元格边距】文本框中设置单元格的内容和单元格边框之间空白处的宽度。 （5）在【单元格间距】文本框中设置表格中各单元格之间的宽度。 （6）在【页眉】区域中，可选【无】对表格不启用列或行标题；选【左侧】可以将表格的第一列作为标题列，以便为表中的每一行输入一个标题；选【顶部】可以将表的第一行作为标题行，以便为表中的每一列输入一个标题；选【两者】能够在表中输入列标题和行标题。 （7）在【辅助功能】区域中，可以在【标题】文本框中输入一个显示在表格外的表格标题；可在【对齐标题】下拉列表中指定表格标题相对于表格的显示位置；在【摘要】文本框中给出了表格的说

16、明，但是该文本不会显示在用户的浏览器中。,图13-8插入【表格】对话框,在网页上插入一个表格后，可根据需要在某些单元格中插入文本、图像或各种多媒体对象。在插入文字对象前必须先将光标定位在该单元格中，然后可直接输入文字或将复制在剪贴板中的文字对象粘贴进单元格内。 在表格中插入图像或其它多媒体对象的方法是先将光标定位在某一单元格内，然后单击【插入】栏【布局】选项中的【图像】或【媒体：flash】按钮，在下拉列表中选择要插入的相应选项，便可插入图像或其它多媒体对象。,13.4.2 设置表格和单元格的属性 1设置表格的属性 新建表格后，可在表格属性面板中设置表格属性，来改变表格的外观特性。 先在网页编

17、辑器窗口中选中整个表格，此时表格的属性面板，如图13-9所示。 表格属性面板中参数的具体意义如下： （1）在【表格Id】文本框中可输入表格名称。 （2）在【行】、【列】、【宽】、【高】、【填充】、【间距】、【边框】等参数设置方法与【表格】对话框的参数设置方法相同。,图13-9 表格的属性面板,（3）在【对齐】下拉式列表中可选择表格的对齐方式。 （4）单击【清除列宽】按钮 及【清除行高】按钮，可清除表格属性面板中列宽和行高的数据。 （5）单击【将表格宽度转换成像素】按钮和【将表格高度转换成像素】按钮，可将表格宽度和高度的单位由百分比方式转换成像素。 （6）单击【将表格宽度转换成百分比】按钮和【将

18、表格高度转换成百分数】按钮可将表格宽度和高度的单位由像素方式转换成百分比。 （7）在【背景颜色】和【边框颜色】文本框中分别可设置表格的背景颜色和边框线的颜色。 （8）在【背景图像】文本框中输入表格背景图片的路径和文件名。,2设置单元格的属性 在对表格的操作过程中，为了突出显示某一部分数据的重要性，常常会设置选中的行、列或者是某几个单元格的属性。选中一个或多个单元格后，打开单元格的【属性】面板，如图13-10所示。其中各项参数意义如下： （1）在【水平】和【垂直】下拉式列表中可以选择单元格内容水平对齐和垂直对齐的方式，四种水平对齐方式为“默认”、“左对齐”、“”居中、“右对齐”，五种垂直对齐方式

19、为“默认”、“顶端对齐”、“中间对齐”、“底部对齐”、“基线对齐”； （2）【宽】和【高】文本框中输入以像素为单位的单元格的宽度和高度。若输入的数据以百分比为单位，则可在数据后面加百分比符号 % ；,图13-10单元格的属性面板,（3）选中【不换行】复选框，可设置文本自动换行； （4）在【标题】复选框中，选择是否将单元格设置为表格的标题。默认情况下，标题单元格中的内容将被设为粗体，并且居中对齐； （5）在【背景】文本框中设置背景图片的文件名和路径。 （6）在【背景颜色】和【边框】文本框中设置表格的背景颜色和边框线的颜色。 （7）单击【合并所选的单元格】按钮 ，可用于合并选中的单元格。 （8）单

20、击【拆分单元格为行和列】按钮 ，可用于拆分选中的单元格。 单元格【属性】面板的上半部分与文字【属性】面板相同，这些参数意义这里不再叙述。,13.4.3选取表格和单元格 要对表格编辑操作，首先要掌握表格行、列以及单元格的选择方法。在Dreamweaver 8.0中选择表格元素的方法与MS Office 软件中表格元素的选择方法相同，以下是选择表格元素的操作方法。 1选择单元格 （1）选中某个单元格的2种方法如下： 先单击要选择的单元格，然后拖动鼠标到相邻的单元格中，当被选中的单元格四周出现粗边框线时释放鼠标，即可选中该单元格； 单击要选择的单元格，然后单击状态栏左侧标签选择器的，便可选中该单元格

21、。 （2）选中多个相邻的单元格2种方法如下： 单击第1个单元格，然后拖动鼠标到最后一个单元格，即可将这组相邻的单元格选中；,单击第1个单元格，然后按住Shift 键，再单击这组相邻单元格的最后一个单元格，就可选中这组相邻的单元格。 （3）选择多个不相邻的单元格的方法如下： 按住Ctrl 键，然后再分别单击要选中的那些不相邻的单元格，这时被单击的单元格就可被选中。 若在按住Ctrl 键的同时，再次单击选中的单元格，将取消该单元格的选择。 （4）选择表格行的2种方法如下： 将鼠标指向表格的左边框线，当光标变为 时单击鼠标，可选中该行，此时如果拖动鼠标可同时选择多行； 先单击某行的单元格，然后单击状

22、态栏左侧标签选择器的，便可选中该行。,（5）选择表格列的方法如下： 将鼠标指向表格的上边框线，当光标变为 时单击鼠标，可选中该列，此时如果拖动鼠标可同时选择多列。 2选择表格 选择整个表格有4种方法： （1）先单击某个单元格，然后单击状态栏左侧标签选择器的，便可选中该表格。 （2）先单击表格中某一单元格，然后选择【修改】|【表格】|【选择表格】命令，也可选中整个表格。 （3）先单击表格中某一单元格，按两次Ctrl + A，也可选中整个表格。 （4）单击表格的右边框线或下边框线，可选中整个表格。,13.4.4表格的嵌套 在Dreamweaver 8.0中，对于表格的嵌套没有特别的限制，表格完全可

23、以像文本和图像一样直接插入到其它表格的单元格中，然后通过对单元格的拆分和合并等编辑操作，完成更复杂表格的嵌套操作。 嵌套的表格往往用作页面布局，它起到了页面元素定位的作用，此时表格边框线的宽度应该设为0，否则将会影响页面的美观。 将光标插入当前表格的某个单元格内，然后可选择【插入】|【表格】命令，在【表格】对话框中输入新表格的属性，这样便可以在当前单元格内再插入一个表格，这就是表格的嵌套操作。 在网页表格中理论上可以有多层嵌套，但是表格多层嵌套后会直接影响浏览速度，故表格嵌套层数不宜过多。,13.5表格的编辑修改与格式化 13.5.1改变表格或单元格的大小 在表格实际应用中，往往会根据需要对表

24、格的尺寸进行调整。修改表格尺寸的方法有两种：一种是用鼠标拖曳表格线或表格的活动块来调整表格的大小；另一种是用表格的【属性】面板来修改表格尺寸。 1用鼠标拖曳调整表格大小 用鼠标拖曳调整表格大小的操作步骤如下： （1）选中整个表格； （2）表格四周被黑色边框线和8个活动块框住； （3）用鼠标对准活动块，鼠标变成双向箭头后拖曳活动块，就可调整表格的尺寸； （4）将鼠标指针指向要调整的行和列的边框线； （5）此时鼠标指针变为 和形状，拖曳鼠标便可调整行高和列宽。,2用表格的【属性】面板调整表格和单元格的行高及列宽 （1）先选中整个表格，在表格的【属性】面板中直接修改【宽】和【高】的数值，可修改表格的

25、尺寸； （2）选中某个单元格，在表格的【属性】面板中直接修改【宽】和【高】的数值，就可调整该单元格所在行和列的行高及列宽。 13.5.2表格行、列的增加和删除 在网页设计的过程中常常会根据需要增加和删除表格中的行或列，这类操作可以通过表格的【属性】面板和【修改】菜单来完成。,1.通过【属性】面板完成增加与删除表格的行和列 选中当前表格，在表格的【属性】面板的【行】和【列】文本框中记录了当前表格的行列数，可以通过调整其中的数值来增加和删除表格的行数、列数，用这种方法完成表格增、删行与列的操作都是针对表格的最下边的行和最右边的列而言的。 2通过【修改】菜单完成增加与删除表格行和列 用【修改】菜单完

26、成增加与删除表格行和列的操作方法如下。,（1）选中表格的某个单元格或将光标插入该单元格中。 （2）选择【修改】|【表格】|【插入行】命令 或选择【修改】|【表格】|【插入列】命令，在该单元格上边增加一行或在该单元格左边增加一列。 （3）选择菜单 【修改】|【表格】|【插入行或列】命令，此时屏幕弹出【插入行或列】对话框，在对话框中设置插入行还是列，插入行、列的数量，在当前行（列）上边（前边）还是下边（后边）插入行（列），如图13-11所示。 （4）选中表格中的某行或列，选择菜单【编辑】|【清除】命令，便可删除该行或列。,（5）将光标插入在表格的某个单元格中，选择【修改】|【表格】|【删除行】或【

27、修改】|【表格】|【删除列】命令，也可删除该行或列。 （6）将光标插入在表格的某个单元格中，单击鼠标右键，在快捷菜单中选择【表格】|【删除行】或【表格】|【删除列】命令，也可完成删除该行或列的操作。,图13-11 【插入行或列】对话框,13.5.3单元格的拆分和合并 在表格编辑操作过程中，还常常会根据需要对表格的某些单元格进行拆分和合并的操作。 1单元格的合并操作 单击表格属性面板右下角的按钮 ，将表格的属性面板全部展开，选中要合并的几个单元格，这些单元格四周会被出现的粗框线框住，单击表格属性面板左下方的合并按钮 ，完成单元格的合并操作。,2单元格的拆分操作 单击表格属性面板右下角的 按钮，将

28、面板全部展开，将光标定位在要拆分的单元格中，单击表格属性面板左下方的拆分按钮 ，此时屏幕弹出【拆分单元格】对话框，如图13-12所示。在【拆分单元格】对话框中设定拆分方式。若要上下拆分单元格，选【行】选项；若要左右拆分单元格，选【列】选项，在【行数】或【列数】文本框中输入拆分单元格的数值，单击【确定】按钮完成单元格格的拆分操作。 若单元格拆分前有内容，单元格拆分后内容要作相应的调整。,图13-12 拆分单元格对话框,图13-12 拆分单元格对话框,13.5.4单元格的复制、粘贴、移动和清除 网页设计时文本、图片等对象可以被复制、粘贴、移动或清除，表格中的单元格同样也支持这些操作。在网页设计时可

29、以一次复制、粘贴、移动和清除一个或多个单元格。 单元格复制与粘贴的操作方法如下。 （1）在网页编辑窗口中选中要复制的对象，按快捷键Ctrl + C，或者选择【编辑】|【拷贝】命令，将对象复制到剪贴板。 （2）在网页编辑窗口中选中要移动的对象，按快捷键Ctrl + X，或者选择【编辑】|【剪切】命令，将对象移动到剪贴板。,（3）单击目标单元格，按快捷键Ctrl + V，或者选择【编辑】|【粘贴】命令，将对象复制或移动到目标单元格中。 （4）在编辑窗口中选中要复制的对象，按住Ctrl键后，可将复制的对象拖入目标单元格，便完成了对象的复制操作。直接拖曳选中的对象到目标单元格中就可完成对象的移动操作。

30、 单元格内容清除的操作方法是选中目标单元格中要清除的对象，按Delete键或者选择【编辑】| 【清除】命令可清除单元格中的内容，但是该单元格的格式仍旧还保留着没有被清除。,13.5.5表格的样式化 表格样式化是利用Dreamweaver 8.0中提供的17种预先设置好的表格格式，对页面上当前选中的表格进行快速格式化。用系统提供的表格样式可以统一网页上表格的形式，简化对表格格式化的过程。 应用表格样式格式化表格的操作步骤如下： （1）选中网页上要套用格式的表格。 （2）选择【命令】|【格式化表格】命令，此时屏幕弹出【格式化表格】对话框，如图13-13所示。 （3）从列表框中选择内置的某种表格格式

31、，此时在对话框中右侧可以看到预览的效果。,在对话框中的参数还可以重新设置，参数的意义如下： 【行颜色】是设置表格中行的颜色方案； 在【第一种】与【第二种】是分别输入表格行使用的第1、2种颜色； 在【交错】下拉式列表中，可以选择两种以上的颜色，在表格中交替显示的方式； 在【第一行】区域中可分别设置表格顶行的对齐方式、字形、背景颜色和文本颜色； 在【最左列】区域中可分别设置表格左边第一列的对齐方式和文字样式； 在【边框】文本框中，可以设置表格边框线的宽度； 如果选中对话框底部的复选项，则该操作将属性值全部写在标注中，而不写在标签中。 （4）设置完成后，单击【应用】按钮观察效果。如果正确无误，可单击

32、【确定】按钮确认。,图13-13【格式化表格】对话框,13.6布局表格和布局单元格 Dreamweaver 8.0网页页面布局有两种工作模式，分别是【标准模式】和【布局模式】。Dreamweaver 8.0默认的工作模式是【标准模式】，在【标准模式】模式下，用表格或嵌套表格可对网页的页面元素进行定位。但在规划网页页面布局时，使用【布局模式】来对网页的页面元素进行定位更为方便。在【布局模式】中，系统设置了一些很方便、直观、人性化的功能，使设计者在【布局模式】中对页面的布局处理起来更加得心应手。 在Dreamweaver 8.0的【插入】栏的【布局】选项中有【标准模式】和【布局模式】2个按钮，单击

33、这2个按钮可进行2种模式的切换，如图13-14所示。,图13-14切换为标准模式,13.6.1创建和调整布局表格与布局单元格 用【布局视图】规划网页布局的操作步骤如下。 (1)新建一个页面，并在【插入】面板组的【布局】选项卡中进行视图工作模式切换，如图13-14所示。 （2）单击【布局模式】按钮后，系统显示【从布局模式开始】对话框，对话框中显示一些简单的布局视图的使用信息，如图13-15所示。单击【确定】按钮便可进入【布局模式】。 （3）单击【布局模式】区域中的【布局表格】的按钮 ， 将鼠标移到网页编辑窗口中，此时鼠标指针变为 + 字形状，在指定位置处拖曳鼠标，就可以在网页编辑窗口中画出布局表

34、格。在绘制布局表格的地方不能有任何文字和图片。,图13-15【从布局模式开始】对话框,（4）如果在同一页面上若还需要绘制其它的布局表格，按住Ctrl键重复上述步骤可以连续画多个布局表格。 （5）在布局表格中必须画好布局单元格后才可以插入文字或图片等对象。单击【布局模式】区域中的【布局单元格】的按钮 ，在布局表格中根据需要画出多个布局单元格。 （6）在布局单元格中，可以根据页面需要输入文字或插入图片等对象，如图13-16所示。 （7）如果要调整布局表格或布局单元格的大小及其中内容的属性，可选中布局表格或布局单元格，并在布局表格或布局单元格的【属性】面板中完成它们的属性设置。,图 13-16 网页中插入布局表格和布局单元格,13.6.2标准模式和布局模式的应用实例 例13.2 制作满足下列要求的网页，网页效果如图13-17所示。 （1）页面的背景图片为：bg0005.jpg； （2）在合适的位置插入图片：bg0012.jpg 和 welcome.jpg （3）在网页中输入竖排的文字： “普罗米修斯为人们带来了火的种子，所以我们热爱这个崭新的世界，为了她的光明。 现在我们的书也将引领你走进另一个世界，为了它的绚烂。 （4）将网页用exa13-2.htm为名