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

1、项目九 Div布局搜索网页 任务一任务一 布局页眉布局页眉 任务二任务二 布局主体布局主体 实训实训 使用使用DivDiv布局布局“神搜神搜”网页网页 任务三任务三 布局页脚布局页脚 v 层和Div标签这两个布局工具具有非常独 特的功能，即可以显示、隐藏及自由浮动。 由于层和Div标签使用的是同一个标签 “”，故本项目统称Div布局。本项目以 搜索网页为例，介绍使用Div布局网页的基本 方法。 v 任务一 布局页眉 需要掌握的内容主要有： 1、创建层 2、【层】面板 3、选定层 4、层【属性】面板 5、移动层 6、调整层的大小 7、层的对齐操作 v 可以通过以下途径来创建层。 v （1）在主菜

2、单中选择【插入】【布局对象】 【层】命令。 v （2）将【插入】【布局】面板上的 （绘 制层）按钮拖曳到文档窗口松开鼠标。 v （3）在【插入】【布局】面板中单击 （绘制层）按钮，在文档窗口中按住鼠标左键并拖曳 可绘出一个自定义大小的层。如果按住Ctrl键不放， 按住鼠标左键拖曳可在文档窗口中连续绘制多个层。 1、创建层 v 在【层】面板中可以实现以下操作。 v （1）双击层的名称，可以对层进行重命名。 v （2）单击层后面的数字可以修改层的z轴顺序， 数字大的将位于上层。 v （3）勾选【防止重叠】复选框可以禁止层重叠。 v （4）在层的名称前面有一个眼睛图标，单击眼睛 图标可显示或隐藏层。

3、 v （5）单击层名称可以选定层，按住Shift键不放， 依次单击层可以选中多个层。 2、【层】面板 v选定层还有以下几种方法： v（1）在【层】面板中单击层的名称选定层。 v（2）单击文档中的 图标来选定层。如果没有显示 该图标，可以在【首选参数】对话框的【不可见元素】 分类中勾选【层锚记】复选框。 v（3）将光标置于层内，然后在文档窗口底部标签条 中选择“”标签。 v（4）单击层的边框线来选定层。 v（5）如果要选定两个以上的层，只要按住Shift键， 然后逐个单击层手柄或在【层】面板中逐个单击层的 名称即可。 3、选定层 v 根据需要设置层【属性】的相关参数。其中【Z轴】 用来设置在垂直

4、平面的方向上层的顺序号，【溢出】 用来设置层内容超过层大小时的显示方式，【剪辑】 用来设置层的哪一部分是可见的。 4、层【属性】面板 v 层具有很强的灵活性，可以随意移动到页面中的任 何位置。移动层的方法有很多： v （1）可以使用鼠标进行拖曳； v （2）也可以先选中层然后按键盘上的方向键进行移 动（每按1次方向键移动1个像素，如果按住Shift键1次 移动10个像素）； v （3）还可以在【属性】面板的【左】和【上】文本 框中输入数值进行精确定位。 5、移动层 v 可以根据需要调整层的大小，其方法有： v（1）使用鼠标直接拖曳； v（2）在【属性】面板的【宽】和【高】文本框中输入 精确数值

5、； v（3）还可以将所有选择层的宽度和高度变为最后选择 的层的宽度和高度。当选择多个层时，最后选择的层四 周的控制点将以实心显示，其他的层四周的控制点将以 空心显示。 6、调整层的大小 v 如果需要对多个层进行对齐操作，直接用鼠标 拖动层可能不太精确，通常需要使用对齐层的功能 来实现。方法是：首先选择需要对齐的层，然后在 主菜单的【修改】【排列顺序】中选择【左对 齐】、【右对齐】【对齐上缘】或【对齐下缘】命 令，即可将所有选择的层以最后选择的层为标准进 行对齐操作。 7、层的对齐操作 任务二 布局主体 需要掌握的内容主要有： 1、插入Div标签的方法 2、层与Div标签的转换 3、Div标签居

6、中显示的方法 v 在主菜单中选择【插入】【布局对象】【Div标 签】命令，或在【插入】【布局】面板中单击 （插入Div标签）按钮打开【插入Div标签】对话框进行 设置插入即可。 1、插入Div标签的方法 v 在【插入】【布局】面板中有两个按钮，一个是 （插入Div标签）按钮，另一个是 （绘制层）按钮。 在源代码中，它们使用的是同一个标签“”。在 绘制层时，层同时被赋予了CSS样式，而插入Div标签 时，需要再单独创建CSS样式对它进行控制。实际上， 层与Div标签是同一个网页元素不同的表现形态，通过 CSS样式可使两者间相互转换。例如，在【CSS规则 定义】对话框的【定位】分类中，将【类型】选

7、项设 置为“绝对”，即表示层，否则即为Div标签，这是层 与Div标签转换的关键因素。 2、层与Div标签的转换 v 使用Div标签布局网页，它的对齐方式只有“左对 齐”和“右对齐”，如果要使Div标签居中显示，可以 将它的边界，特别是左边界和右边界设置为“自动”即 可。 3、Div标签居中显示的方法 任务三 布局页脚 v v 需要掌握的内容主要有： v 1、改变层的z轴顺序 v 2、层的重叠和嵌套 v 3、层与表格的转换 1、改变层的z轴顺序 v v 改变层的z轴顺序方法： v （1）可以在【属性】面板中设置z轴值； v （2）也可以在【层】面板中直接修改z轴值； v （3）还可以用鼠标指向

8、需要改变序号的层，并按 下鼠标左键向上或向下进行拖曳，当拖曳到希望插入 的两层之间时会出现一条横线，释放鼠标左键，各个 层的z轴顺序会做相应的改变。 2、层的重叠和嵌套 v v 层可以重叠，层的重叠是有次序的，这个次序通常 用z轴顺序来表示。其值可为正可为负，也可以是“0”， 数值最大的在最顶层。层的重叠为制作一些特殊效果 提供了非常方便的途径。 v v 层还可以嵌套。但嵌套和重叠是不一样的。嵌套 的子层与父层是有一定关系的，而重叠的层除视觉上 会有一些联系外，没有其他关系。创建嵌套层首先必 须有一个父层，然后将光标置于层当中，再插入一个 层就是嵌套层。也可以按住Ctrl键，在【层】面板中将

9、某一层拖曳到另一层上面，形成嵌套层。在【层】面 板中可以看到，嵌套层是呈树状结构表示的，而且子 层与父层的z轴顺序是一样的。层嵌套时并不意味着子 层必须在父层里面，它不受父层的限制。当子层发生 位移时，父层并不发生任何变化，但是当父层发生位 移时，子层却会随着父层也发生位移，并且位移量都 一样，也就是说两者的相对位置不发生变化。 3、层与表格的转换 v v 在主菜单中选择【修改】【转换】【层到表格】 命令，可以将层转换为表格，如果选择【修改】 【转换】【表格到层】命令，也可以将现有表格转 换为层。 实训 使用Div布局“神搜”网页 v 本项目主要介绍了使用层和Div标签布局 网页的基本方法，本实训将让读者进一步巩固 所学的基本知识。 v 要求：把“项目实训素材”文件夹下的 内容复制到站点根文件夹下，然后创建网页并 使用层和Div标签对如图所示的网页进行布局。