关 键 词：

大学DREAMWEAVER 8案例教程-课件PPT 大学 dreamweaver 案例 教程 课件 ppt

资源描述：

大学DREAMWEAVER 8案例教程-课件PPT,大学DREAMWEAVER,8案例教程-课件PPT,大学,dreamweaver,案例,教程,课件,ppt

内容简介：

第 10 章 层和时间轴 本章学习目标10.1 .1创建层 插入层时，Dreamweaver 将显示层的边框，默认情况下，在将指针移到块上时它还会高亮显示块。通过在“查看”“可视化助理”菜单中禁用“层外框”和“CSS 布局外框”，可以启用层边框。在设计时，还可以启用CSS布局背景和CSS布局框模型，作为可视化助理。 创建层后，只需将插入点放置于该层中，然后像在页面中添加内容一样，就可以将内容添加到层中。连续绘制一个或多个层，步骤如下：在“插入”栏的“布局”类别中单击“绘制层”按钮。 在“文档”窗口的“设计”视图中，执行下列操作之一： （1）拖动以绘制一个层。 （2）通过按住 Ctrl 键并拖动 (Windows) 或通过按住 Command 键并拖动 (Macintosh) 来连续绘制多个层。 只要不松开 Ctrl 或 Command 键，就可以继续绘制新的层。注意：如果要隐藏层边框，可选择“查看”“可视化助理”，然后取消选择“层外框”和“CSS 布局外框”。10.1.2 嵌套层 绘制嵌套层时，步骤如下：1. 在“插入”栏的“布局”类别中单击“绘制层”按钮。 2. 在“文档”窗口的“设计”视图中，拖动以在现有层中绘制层： 如果已经在层首选参数中关闭了”嵌套”功能，请通过按住 Alt 键并拖动 (Windows) 或按住 Option 键并拖动 (Macintosh) 在现有层中嵌套一个层。插入嵌套层，步骤如下：1. 在“文档”窗口的“设计”视图中将插入点放置在一个现有层中，然后选择“插入”“层”。 2. 若要使用“层”面板将现有层嵌套在另一个层中，执行以下操作：3. 选择“窗口”“层”，打开“层”面板。 4. 在“层”面板中选择一个层，然后通过按住 Ctrl 键并拖动 (Windows) 或按住 Command 键并拖动 (Macintosh) 将层移动到”层”面板上的目标层。 5. 当目标层的名称突出显示时，松开鼠标按钮。 10.1.3 层标签 具体操作如下：在“文档”窗口中，将插入点放置在要显示.div标签的位置。 1选择“插入”“布局对象”“Div 标签”。在“插入”栏的“布局”类别中单击“Div 标签”按钮。 2出现“插入 Div 标签”对话框， 3完成对话框。 4单击”确定”。 .div标签以一个框的形式出现文档中，并带有占位符文本。将指针移到该框的边缘上时，Dreamweaver 会高亮显示该框。如果已经给.div标签分配了绝对位置，它就可充当一个Dreamweaver层。 10.1.4 选择层 要在“层”面板中选择一个层，在“层”面板（“窗口”“层”）中，单击该层的名称。 若要在“文档”窗口中选择一个层，可执行以下操作之一：单击一个层的选择柄。如果选择柄不可见，请在该层中的任意位置单击以显示该选项柄。 单击一个层的边框。 在一个层中按住Ctrl-Shift键并单击 (Windows) 或按住Command-Shift 键并单击 (Macintosh)。 在层内单击并按 Ctrl+A (Windows) 或 Command+A (Macintosh) 以选择层的内容。再次按 Ctrl+A 或 Command+A 以选择层。 在层内单击并在标签选择器中选择层的标签。 注意：选择多个层时，可以在“层”面板（“窗口”“层”）中，请按住 Shift 键并单击两个或更多的层名称。 在“文档”窗口中，在两个或更多个层的边框内（或边框上）按住 Shift 键并单击。 若要查看和设置层属性，具体操作如下：选择一个层。在”属性”检查器（“窗口”“属性”）中，单击右下角的展开箭头（如果它尚未展开）以查看所有属性，如图所示。 根据需要设置属性来更改层的属性。 当选择两个或更多个层时，层“属性”检查器会显示文本属性以及全部层属性的一部分，从而允许同时修改多个层。10.1.5 设置层属性在HTML代码中，层的堆叠顺序或z轴确定层在浏览器中的绘制顺序。层的z轴值越高，该层的堆叠顺序就越高。步骤如下：1选择“窗口”“层”，打开“层”面板。 2将层向上或向下拖至所需的堆叠顺序。 移动层时会出现一条线，它指示该层将出现的位置。当放置线出现在层叠顺序中的所需位置时，请松开鼠标按钮。如果用”属性”检查器更改层的层叠顺序，则选择“窗口”“层”，打开“层”面板以查看当前堆叠顺序。10.1.6 更改层的层叠属性 在“层”面板或“文档”窗口中选择一个层。在层的“属性”检查器（“窗口”“属性”）中，在z轴文本框中键入一个编号。 键入一个较大的数字可将该层在层叠顺序中上移。 键入一个较小的数字可将该层在层叠顺序中下移。 10.1.6 更改层的层叠属性更改层可见性，具体操作如下：1选择“窗口”“层”，打开“层”面板。 2在层的眼形图标列内单击可以更改其可见性。 眼睛睁开表示该层是可见的。 眼睛闭合表示该层是不可见的。 如果没有眼形图标，该层通常会继承其父级的可见性。（如果层没有嵌套，父级就是文档正文，而文档正文始终是可见的。）另外，如果未指定可见性，则不会显示眼形图标（这在“属性”检查器中表示为“默认”可见性）。10.1.7 更改层可见性一些 Web 设计人员可能不喜欢使用表格或“布局”模式来创建自己的布局，而是喜欢通过层来进行设计。Dreamweaver使您可以使用层来创建自己的布局，然后将它们转换为表格。 注意：在模板文档或已应用模板的文档中，不能将层转换为表格或将表格转换为层。相反，应该在非模板文档中创建布局，然后在将该文档另存为模板之前进行转换。 在转换为表格之前，请确保层没有重叠。将层转换为表格，具体操作如下：1. 选择“修改”“转换”“层到表格”。即可显示“转换层为表格”对话框 10.2 将层转换成表格10.2 将层转换成表格2. 选择所需的选项。 3. 单击“确定”。 注意：从层转换为表格可能会生成包含大量空单元格的表。10.3使用时间轴 时间轴通过随时间的变化改变层的位置、大小、可见性和叠放顺序来创建动画。这就是动态HTML的表达方式，也是Dreamweaver强于其它网页编辑器的地方。时间轴只能移动层，因此想让图象或文本对象移动，就须先创建层，然后在层中插入对象。 时间轴描述了层和图像的属性随时间变化的情况。选择“窗口”“时间轴”，打开时间轴控制器，如图所示。在时间轴控制器中：播放头（Playback head） 指示在网页中显示的是哪一帧。动画通道（Animation channels）显示动画层的地方。动画条（Animation bars）即图中的Layer1，可显示每个对象的持续时间。一行可以包含代表不同对象的多个动画条。关键帧（Keyframes）动画条中的小圆圈是关键帧。行为通道（Behavior channel）在时间轴中执行行为的通道。回放（Rewind）可将播放头移到时间轴的初始帧。 后退（Back）将播放头往左移动一帧。播放（Play）将播放头往右移动一帧。单击Play按钮并按住鼠标不放，则时间轴向前连续播放。自动播放（Autoplay）当网页载入到浏览器时使当前时间轴自动播放。循环（Loop）当网页载入到浏览器时使当前时间轴无限循环播放。 10.3使用时间轴10.3使用时间轴由于时间轴只能移动层，因此如果要移动图像或文本，则要创建一个层，然后在该层中插入图像、文本或其它类型的内容。下面就通过一个实例来认识时间轴动画的创建。本章小结 本章主要学习了层和时间轴