项目九_Div-布局搜索网页-PPT.ppt

项目九 Div──布局搜索网页 层和Div标签这两个布局工具具有非常独特的功能，即可以显示、隐藏及自由浮动。由于层和Div标签使用的是同一个标签“div”，故本项目统称Div布局。本项目以搜索网页为例，介绍使用Div布局网页的基本方法。 任务一 布局页眉 需要掌握的内容主要有： 1、创建层 2、【层】面板 3、选定层 4、层【属性】面板 5、移动层 6、调整层的大小 7、层的对齐操作 1、创建层 可以通过以下途径来创建层。 （1）在主菜单中选择【插入】／【布局对象】／【层】命令。 （2）将【插入】／【布局】面板上的 （绘制层）按钮拖曳到文档窗口松开鼠标。 （3）在【插入】／【布局】面板中单击 （绘制层）按钮，在文档窗口中按住鼠标左键并拖曳可绘出一个自定义大小的层。如果按住Ctrl键不放，按住鼠标左键拖曳可在文档窗口中连续绘制多个层。 2、【层】面板 在【层】面板中可以实现以下操作。 （1）双击层的名称，可以对层进行重命名。 （2）单击层后面的数字可以修改层的z轴顺序，数字大的将位于上层。 （3）勾选【防止重叠】复选框可以禁止层重叠。 （4）在层的名称前面有一个眼睛图标，单击眼睛图标可显示或隐藏层。 （5）单击层名称可以选定层，按住Shift键不放，依次单击层可以选中多个层。 3、选定层 选定层还有以下几种方法： （1）在【层】面板中单击层的名称选定层。 （2）单击文档中的 图标来选定层。如果没有显示该图标，可以在【首选参数】对话框的【不可见元素】分类中勾选【层锚记】复选框。 （3）将光标置于层内，然后在文档窗口底部标签条中选择“div”标签。 （4）单击层的边框线来选定层。 （5）如果要选定两个以上的层，只要按住Shift键，然后逐个单击层手柄或在【层】面板中逐个单击层的名称即可。 4、层【属性】面板 根据需要设置层【属性】的相关参数。其中【Z轴】用来设置在垂直平面的方向上层的顺序号，【溢出】用来设置层内容超过层大小时的显示方式，【剪辑】用来设置层的哪一部分是可见的。 5、移动层 层具有很强的灵活性，可以随意移动到页面中的任何位置。移动层的方法有很多： （1）可以使用鼠标进行拖曳； （2）也可以先选中层然后按键盘上的方向键进行移动（每按1次方向键移动1个像素，如果按住Shift键1次移动10个像素）； （3）还可以在【属性】面板的【左】和【上】文本框中输入数值进行精确定位。 6、调整层的大小 可以根据需要调整层的大小，其方法有： （1）使用鼠标直接拖曳； （2）在【属性】面板的【宽】和【高】文本框中输入精确数值； （3）还可以将所有选择层的宽度和高度变为最后选择的层的宽度和高度。当选择多个层时，最后选择的层四周的控制点将以实心显示，其他的层四周的控制点将以空心显示。 7、层的对齐操作 如果需要对多个层进行对齐操作，直接用鼠标拖动层可能不太精确，通常需要使用对齐层的功能来实现。方法是：首先选择需要对齐的层，然后在主菜单的【修改】／【排列顺序】中选择【左对齐】、【右对齐】【对齐上缘】或【对齐下缘】命令，即可将所有选择的层以最后选择的层为标准进行对齐操作。 任务二 布局主体 需要掌握的内容主要有： 1、插入Div标签的方法 2、层与Div标签的转换 3、Div标签居中显示的方法 1、插入Div标签的方法 在主菜单中选择【插入】／【布局对象】／【Div标签】命令，或在【插入】／【布局】面板中单击 （插入Div标签）按钮打开【插入Div标签】对话框进行设置插入即可。 2、层与Div标签的转换 在【插入】／【布局】面板中有两个按钮，一个是 （插入Div标签）按钮，另一个是 （绘制层）按钮。在源代码中，它们使用的是同一个标签──“div”。在绘制层时，层同时被赋予了CSS样式，而插入Div标签时，需要再单独创建CSS样式对它进行控制。实际上，层与Div标签是同一个网页元素不同的表现形态，通过CSS样式可使两者间相互转换。例如，在【CSS规则定义】对话框的【定位】分类中，将【类型】选项设置为“绝对”，即表示层，否则即为Div标签，这是层与Div标签转换的关键因素。 3、Div标签居中