《网页设计与制作》教案-第11讲-布局技术-层AP-Div.doc

1、第11讲 布局技术-层AP Div1.1教学目标： u 知识目标1. 理解层的作用2. 掌握层的各种基本操作u 技能目标能运用层进行布局，能设置层的重叠与嵌套，能合理操作层u 品质目标培养学生认真细致、踏实进取的精神1.2教学重点：1. 掌握层的各种基本操作1.3 教学难点理解层的作用和操作。1.4教学方法：讲练结合，任务驱动、分子任务操练1.5课时安排：2课时1.6教学对象分析：这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。1.7教学过程：一、激趣

2、导入，揭示课题层是一种HTML页面元素，可以将其定位在页面上的任意位置。层可以包含文本、图像或其他任何可在HTML文档正文中放入的内容。通过Dreamweaver MX 2004，可以使用层来设置页面的布局。可以将层前后放置，隐藏某些层而显示其他层，以及在屏幕上移动层。还可以在一个层中放置背景图像，然后在该层的前面放置第二个层，利用层不仅可以非常灵活地放置内容，还可以根据不同的设置，实现相应的动态效果。二、层的操作层可以理解为浮动在网页上的一个页面，它可以准确地定位在页面上的任意位置，并可以规定它的大小。通过层可以对网页进行精确定位。不仅如此，通过对层与行为的综合使用，还可以创作出赏心悦目的动

3、作效果。层可以包含文本、图像或其它任何可在网页中放置的内容。层可以重叠，并且可以改变重叠次序，因此可以在网页上实现内容的重叠效果；可以动态地设定层的显示或隐藏，实现层内容的动态交替显示等特殊的显示效果；层可以嵌套，子层会遗传父层的特征，例如可见性，位置移动等。0.1新建层用Dreamweaver可以方便地在页面上创建层并精确地将层定位。建立新层的步骤：l 在编辑窗口的“插入”栏的“布局”选项卡中，选取“描绘层”按钮，如图2-95所示。或者执行“插入/布局对象/层”命令。图2-95选取描绘层按钮l 在编辑区中找到合适的位置，按下并向右下拖动鼠标，画出大小合适的一个矩形，释放鼠标左键。如图2-96

4、所示。图2-96绘制出的层直接将描绘层按钮拖动到编辑窗口，则可在编辑区创建一个预设大小的层。若需要一次性添加多个层，可以在按住Ctrl键的同时，单击描绘层按钮，然后在编辑区中连续绘制多个层。如图2-97所示。图2-97一次绘制多个层在编辑区添加层后，会在窗口的左上方出现层标记，如果文档中有多个层，则这些层标记依次排列。如上图2-97所示。若在文档窗口没有显示层标记，可执行“编辑/首选参数”命令，在弹出的对话框中选择不可见元素，勾选层锚记，如图2-98所示。图2-98设置显示层标记0.2层的重叠与嵌套如果页面上有两个交叉的层，它们可以有两种关系：重叠与嵌套。重叠的两个层是相互独立的，任何一个层的

5、改变不影响另外一个层。嵌套通常用于将层组织在一起。层的嵌套和表格的嵌套有些类似，就是在层里面再建一个层。和表格嵌套不同的一点是，父表格定是大于子表格的，但是层的嵌套就不同，子层可以超出父层，也就是说，子层完全可以在父层之外。层的嵌套有许多好处，首先，嵌套层继承了其父层的所有特征，包括可视性和背景颜色等。另外，嵌套层总是随父层一起被移动的。1) 创建重叠层，结果如图2-99所示。打开“窗口”菜单，选择“层”命令。可以观察此时层面板上层的关系。如图2-100所示。 图2-99创建重叠的层 图2-100 创建重叠层后的层面板1. 创建嵌套层创建嵌套层的步骤如下：1) 在设计视图下，在“插入”栏中的“

6、布局”选项卡中，单击“描绘层”按钮，在编辑区画一个层Layer1，如图2-101所示。图2-101插入第一个层2) 继续选择“描绘层”按钮，按住Alt键，从Layer1中的任意位置开始画一个新层Layer2，如图2-102所示，可以看到父层Layer1下出现了一个子层Layer2。3) 在绘制好第一个层后，拖动“布局”选项卡上的“绘制层”按钮到该层中，也可以创建嵌套层，新层就成为该层的子层。在“层”面板中可以看出Layer2是Layer1的子层。如图2-103所示。 图2-102插入嵌套层 图2-103创建嵌套层后的层面板若要建立一个完全处于父层之外的子层，不能通过直接在父层之外建立子层的方法

7、进行，而是要先在父层内建立一个子层，然后将子层移动到母层外面。0.3设置层的属性1. 设置层的默认属性在菜单中选择“插入”菜单中的“层”命令创建层，会插入一个宽200像素、高115像素、位置与编辑区的首行首列坐标相同的层。如果需要对这个设置进行改变，可以通过改变层的默认属性来进行。打开“编辑”菜单，选择“首选参数”命令。在弹出的“首选参数”对话框中的“分类”列表框中选择“层”选项，在右侧进行属性设置，如图2-104所示即可改变层的默认属性。图2-104设置层参数2. 改变层的属性选中页面上的某个层后，在属性检查器上显示该层的所有属性，如图2-105所示，可以使用属性检查器来查看和设置一个层或多

8、个层的各种属性。图2-105层的属性面板0.4操作层当处理页面布局时，可以对层进行选择、移动、大小调整和对齐。1. 选择层在对一个层进行移动、大小调整或对齐之前，可以用以下方法来选择层：l 单击文档窗口的层标记，即可选中对应的层。或单击层中的任意位置来激活层后，单击层左上角的选择手柄，即可选中该层。l 单击一个层的边框，即可选中该层；在层没有被激活或被选中的情况下，按住Shift 键并单击层中任意位置，也可以选中该层。l 直接在层面板上，单击该层名称，可同时在编辑窗口中选中相应层。如图2-106为层别选中的后的效果。 图2-106选中的层若要选择多个层，则执行以下操作之一：l 在“层”面板中，

9、请按住 Shift 键并单击两个或更多的层名称。 l 在“文档”窗口中，在两个或更多个层的边框内（或边框上）按住 Shift 键并单击。 当选定多个层时，最后选定层的大小调整柄将以黑色突出显示。其它层的大小调整柄则以白色显示。如图2-107所示。图2-107选中多个层2. 调整层大小调整层的大小可以有以下三种方法： l 选中层后，在属性检查器中，键入宽度 (W) 和高度 (H) 的值，可以直接设置层的大小。l 选中层后，通过拖动层边框上的控制点可调整层的大小。l 选中层后，用键盘进行微调。按下Ctrl键加4个方向键，可以在相应的方向上对层进行一个像素大小的改变。按下ShiftCtrl键加4个方

10、向键，可以在相应的方向上对层进行十个像素为单位的大小改变。3. 对齐层和移动层层的最大特点是可以在编辑窗口中任意移动。以下方法可以移动层的位置：l 选择层，然后在层的属性检查器中的 L和T文本框中输入相应的数值，即可改变它在页面中的位置。l 选中层后，用鼠标拖动并移动到需要的位置。l 选中层后，用键盘进行微调。按下4个方向键，可以在相应的方向上对层进行以一个像素为单位的移动。按下Shift键加4个方向键，可以在相应的方向上对层进行十个像素为单位的移动。使用层对齐命令可以将多个层按最后一个选定层的边框在某个方向上进行对齐。要对齐层，可以执行以下步骤：首先选中层，如图2-108所示。 图2-108

11、对齐图像l 在编辑窗口执行“修改/对齐”命令，打开相应的菜单，然后进行选择。当对层进行对齐时，未选定的子层可能会因为其父层被选定并移动而移动。若要避免这种情况，请不要使用嵌套层。0.5 使用层面板“层”面板提供了一种管理文档中的层的方法。使用“层”面板可防止重叠，更改层的可见性，将层嵌套或堆叠，以及选择一个或多个层。在层比较多的情况下，利用“层”面板可以大大简化层的操作，提高工作效率。1打开层面板从主菜单中选择“窗口/层”或按F2键就可打开如图2-109所示的层面板。图2-109 层面板在层面板中层显示为按z轴顺序排列的名称列表，首先创建的层出现在列表的底部，最新创建的层出现在列表的顶部。2改

12、变层的可见性层面板中的眼睛图标表示层的可见性，改变层的可见性的方法很简单，只要单击层面板上对应层的眼睛图标就可以了。如果是睁开的眼睛图标，表示该层是可见的；如果是闭上的眼睛图标，表示该层是不可见的。如果没有眼睛图标，那么该层继承其父的可见性。没有嵌套的层总是可见的。如图2-110所示。图2-110改变层的可见性3改变层的堆叠顺序若要改变层的堆叠顺序可在层面板中执行以下的任一种操作方法：l 在Z列，单击要改变的层的数字。输入一个比现有的数大的数，该层在堆叠顺序中就会往后移；输入一个比现有的数较小的数，层就会往前移。l 在层面板中向上或向下拖动层，也可改变层的堆叠顺序。在移动层时，你会看到有一条线

13、随着鼠标的拖动而移动。当该线显示在想要的堆叠顺序时，释放鼠标按钮，就可将层移到想要的堆叠顺序。如图2-111所示的四个层中，原本叠放在最上层的Layer4，被移到最下面。图2-111 改变层的叠放顺序0.6 层与表格的转换层和表格都是用来定位页面内容的，使用层能够更方便、精确地定位页面元素，所以，我们可以先用层来快速创建复杂页面布局，然后再把层布局转换成表格布局，供不支持使用层的浏览器浏览。需要时，也可以在层和表格之间来回转换，以调整布局和优化页面设计。1将表格转换为图层将表格转换为图层是为了调整网页布局时方便，具体操作步骤如下：选中页面中欲转换为层的表格，如图2-112所示。 图2-112

14、选择欲转化为层的表格 图2-113 “转换表格为层”对话框单击菜单命令“修改/转换/表格到层”，就会弹出“转换表格为层”对话框。如图2-113所示。其中：l 防止层重叠：选择此项可以在建立、移动层和调整层大小时防止层互相重叠。l 显示层面板：选择此项，在转换完成后显示层面板。l 显示网格：选择此项，在转换完成后显示网格。l 吸附到网格：选择此项，可借助网格来定位层。在对话框中选择需要的选项后，单击“确定”按钮，指定的表格就会转换为层。如图2-114所示。2图层转换为表格把图层转换为表格是为了与低版本的浏览器兼容，具体操作步骤如下：选中页面中欲转换为表格的层，单击菜单“修改/转换/层到表格”，就

15、会弹出“转换层为表格”对话框。如图2-115所示。 图2-114 表格转换为层 图2-115 “转换层为表格”对话框选择对话框中需要的选项后单击“确定”按钮，层就会转换为表格。3转换时需注意的问题将表格转换为图层时，空的表格单元不转换，表格之外的内容也被置于层中。因为表格单元不会重叠，所以Dreamweaver不会把重叠的层转换为表格。如果计划把一个文档中的层转换为表格，就要在建立、移动层和调整层大小时防止层发生重叠。要防止层重叠，可在层面板中选择“防止层重叠”选项。但如果是在建立了重叠层之后才选择了此选项，不会改变以前发生的层重叠，此时只有通过移动层的方法把重叠的层分开。即使选择了防止层重叠选项，有些操作也会使层发生重叠。比如使用插入菜单插入层，在属性检查器中输入层边距等。总之，如果发生了层重叠，就要在文档窗口拖动重叠的层，使它们分离开来。1.8归纳总结：通过本讲的学习，希望同学们今后能运用层进行布局，能设置层的重叠与嵌套，能合理操作层。1.9课后作业题：1. 层的作用？2. 如何设置层的重叠与嵌套？3. 层和表格如何转换？