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

Dreamweaver8中文版网页制作基础王占成项目九Div──布局搜索网页任务一布局页眉任务二布局主体实训使用Div布局“神搜”网页任务三布局页脚层和Div标签这两个布局工具具有非常独特的功能，即可以显示、隐藏及自由浮动。由于层和Div标签使用的是同一个标签“div”，故本项目统称Div布局。本项目以搜索网页为例，介绍使用Div布局网页的基本方法。任务一布局页眉需要掌握的内容主要有：1、创建层2、【层】面板3、选定层4、层【属性】面板5、移动层6、调整层的大小7、层的对齐操作可以通过以下途径来创建层。（1）在主菜单中选择【插入】／【布局对象】／【层】命令。（2）将【插入】／【布局】面板上的（绘制层）按钮拖曳到文档窗口松开鼠标。（3）在【插入】／【布局】面板中单击（绘制层）按钮，在文档窗口中按住鼠标左键并拖曳可绘出一个自定义大小的层。如果按住Ctrl键不放，按住鼠标左键拖曳可在文档窗口中连续绘制多个层。1、创建层在【层】面板中可以实现以下操作。（1）双击层的名称，可以对层进行重命名。（2）单击层后面的数字可以修改层的z轴顺序，数字大的将位于上层。（3）勾选【防止重叠】复选框可以禁止层重叠。（4）在层的名称前面有一个眼睛图标，单击眼睛图标可显示或隐藏层。（5）单击层名称可以选定层，按住Shift键不放，依次单击层可以选中多个层。2、【层】面板选定层还有以下几种方法：（1）在【层】面板中单击层的名称选定层。（2）单击文档中的图标来选定层。如果没有显示该图标，可以在【首选参数】对话框的【不可见元素】分类中勾选【层锚记】复选框。（3）将光标置于层内，然后在文档窗口底部标签条中选择“div”标签。（4）单击层的边框线来选定层。（5）如果要选定两个以上的层，只要按住Shift键，然后逐个单击层手柄或在【层】面板中逐个单击层的名称即可。3、选定层根据需要设置层【属性】的相关参数。其中【Z轴】用来设置在垂直平面的方向上层的顺序号，【溢出】用来设置层内容超过层大小时的显示方式，【剪辑】用来设置层的哪一部分是可见的。4、层【属性】面板层具有很强的灵活性，可以随意移动到页面中的任何位置。移动层的方法有很多：（1）可以使用鼠标进行拖曳；（2）也可以先选中层然后按键盘上的方向键进行移动（每按1次方向键移动1个像素，如果按住Shift键1次移动10个像素）；（3）还可以在【属性】面板的【左】和【上】文本框中输入数值进行精确定位。5、移动层可以根据需要调整层的大小，其方法有：（1）使用鼠标直接拖曳；（2）在【属性】面板的【宽】和【高】文本框中输入精确数值；（3）还可以将所有选择层的宽度和高度变为最后选择的层的宽度和高度。当选择多个层时，最后选择的层四周的控制点将以实心显示，其他的层四周的控制点将以空心显示。6、调整层的大小如果需要对多个层进行对齐操作，直接用鼠标拖动层可能不太精确，通常需要使用对齐层的功能来实现。方法是：首先选择需要对齐的层，然后在主菜单的【修改】／【排列顺序】中选择【左对齐】、【右对齐】【对齐上缘】或【对齐下缘】命令，即可将所有选择的层以最后选择的层为标准进行对齐操作。7、层的对齐操作任务二布局主体需要掌握的内容主要有：1、插入Div标签的方法2、层与Div标签的转换3、Div标签居中显示的方法在主菜单中选择【插入】／【布局对象】／【Div标签】命令，或在【插入】／【布局】面板中单击（插入Div标签）按钮打开【插入Div标签】对话框进行设置插入即可。1、插入Div标签的方法在【插入】／【布局】面板中有两个按钮，一个是（插入Div标签）按钮，另一个是（绘制层）按钮。在源代码中，它们使用的是同一个标签──“div”。在绘制层时，层同时被赋予了CSS样式，而插入Div标签时，需要再单独创建CSS样式对它进行控制。实际上，层与Div标签是同一个网页元素不同的表现形态，通过CSS样式可使两者间相互转换。例如，在【CSS规则定义】对话框的【定位】分类中，将【类型】选项设置为“绝对”，即表示层，否则即为Div标签，这是层与Div标签转换的关键因素。2、层与Div标签的转换使用Div标签布局网页，它的对齐方式只有“左对齐”和“右对齐”，如果要使Div标签居中显示，可以将它的边界，特别是左边界和右边界设置为“自动”即可。3、Div标签居中显示的方法任务三布局页脚需要掌握的内容主要有：1、改变层的z轴顺序2、层的重叠和嵌套3、层与表格的转换1、改变层的z轴顺序改变层的z轴顺序方法：（1）可以在【属性】面板中设置z轴值；（2）也可以在【层】面板中直接修改z轴值；（3）还可以用鼠标指向需要改变序号的层，并按下鼠标左键向上或向下进行拖曳，当拖曳到希望插入的两层之间时会出现一条横线，释放鼠标左键，各个层的z轴顺序会做相应的改变。2、层的重叠和嵌套层可以重叠，层的重叠是有次序的，这个次序通常用z轴顺序来表示。其值可为正可为负，也可以是“0”，数值最大的在最顶层。层的重叠为制作一些特殊效果提供了非常方便的途径。层还可以嵌套。但嵌套和重叠是不一样的。嵌套的子层与父层是有一定关系的，而重叠的层除视觉上会有一些联系外，没有其他关系。创建嵌套层首先必须有一个父层，然后将光标置于层当中，再插入一个层就是嵌套层。也可以按住Ctrl键，在【层】面板中将某一层拖曳到另一层上面，形成嵌套层。在【层】面板中可以看到，嵌套层是呈树状结构表示的，而且子层与父层的z轴顺序是一样的。层嵌套时并不意味着子层必须在父层里面，它不受父层的限制。当子层发生位移时，父层并不发生任何变化，但是当父层发生位移时，子层却会随着父层也发生位移，并且位移量都一样，也就是说两者的相对位置不发生变化。3、层与表格的转换在主菜单中选择【修改】／【转换】／【层到表格】命令，可以将层转换为表格，如果选择【修改】／【转换】／【表格到层】命令，也可以将现有表格转换为层。实训使用Div布局“神搜”网页本项目主要介绍了使用层和Div标签布局网页的基本方法，本实训将让读者进一步巩固所学的基本知识。要求：把“项目实训\素材”文件夹下的内容复制到站点根文件夹下，然后创建网页并使用层和Div标签对如图所示的网页进行布局。制作“送孟浩然之广陵”网页制作“送孟浩然之广陵”网页小结本项目通过搜索网页的制作过程，介绍了使用层和Div标签进行网页布局的基本方法。熟练掌握层和Div标签的基本操作将会给网页制作带来极大的方便，是需要重点学习的内容之一，希望读者能够在具体实践中认真领会并加以掌握。