4.3在布局模式中制作表格 课件 - 2022-2023学年高二下学期（中职）《网页设计与制作》（武汉大学版）

4.3 在布局模式中制作表格 4.3.1 制作并填充布局表格 4.3.2 知识拓展 4.3.1 制作并填充布局表格 使用表格构造网页文档整体布局，如果布局复杂，对初学者可能有些难度，而利用Dreamweaver 8中的布局模式可以轻松地构造出复杂的布局。在布局模式中，只要在希望布局的位置上拖动鼠标，就可以自动创建表格和单元格，并且可以随意拖动。 　 　 制作布局表格后，使用图像和文本填充布局表格。布局表格中填充图像和文本的方法与一般表格相同。 下面，通过布局表格完成下图所示效果。 4.3.1 制作并填充布局表格 4.3.1 制作并填充布局表格 具体操作步骤如下： 　　（1）在“布局”选项卡中单击“布局单元格”图标 ，并从左侧向对角线方向拖动鼠标。 　　（2）再次单击“布局单元格”图标 ，并拖动出要插入标题的位置。 　　 4.3.1 制作并填充布局表格 （3）使用同样的方法，在底部添加单元格。可以通过拖动蓝色的单元格边界线，调整单元格的大小，结构如下图所示。 4.3.1 制作并填充布局表格 （4）把光标放置到上图所示的位置1，插入图像文件，如下图所示。 4.3.1 制作并填充布局表格 （5）把光标放置在位置2，插入图像文件，如下图所示。 　　（6）把光标放置在位置3，输入文字，并设置字体、颜色、大小。 4.3.1 制作并填充布局表格 4.3.2 知识拓展 1.了解“布局”选项卡 　　如果想应用布局模式，则需要在“布局”选项卡中先把工作界面从一般模式转换为布局模式。下图所示为“布局”选项卡。 其中各项内容说明如下： “标准”图标：转换为一般模式，即传统的表格使用方法。 “扩展”图标：突出显示表格的边界线，使得编辑表格更方便。 “布局”图标：转换为使用布局表格和布局单元格构造布局的页面。 4.3.2 知识拓展  图标：绘制表格。  图标：绘制单元格。  图标：在光标所在位置上方插入行。 图标：在光标所在位置下方插入行。  图标：在光标所在位置左侧插入列。  图标：在光标所在位置右侧插入列。 图标：在网页文档中插入希望构造的框架。  4.3.2 知识拓展 2.制作布局表格 　　制作表格时是设定表格的行和列，而制作布局表格的方法与制作表格不同，它是用鼠标拖动来制作的，制作出的表格大小与鼠标拖动的大小相同。需要注意的是不能在布局表格的旁边插入其他布局表格，而只能添加到布局表格的内部或底部。 4.3.2 知识拓展 制作布局表格的具体操作步骤如下： （1）在“布局”模式下单击“布局表格”图标 。 　　（2）在文档界面中通过拖动鼠标，创建指定大小的布局表格。 　　（3）在布局表格内单击“布局表格”图标 ，拖动鼠标，插入其他表格。 4.3.2 知识拓展 3.调整布局表格大小 　　如想改变表格大小，可以单击表格右侧角点，将其拖动到所希望的位置，松开鼠标，此时布局表格的大小将发生变化，如下图所示。 4.3.2 知识拓展 4.3.2 知识拓展 4.移动表格 　　在布局表格内按住鼠标左键拖动，可以将表格移动到指定位置。 4.3.2 知识拓展 $