网站设计与开发技术教程 第4章 层、 行为和时间轴.ppt

1、层、 行为和时间轴,一 、用层进行页面布局 二、行为 三、利用时间轴制作动画效果,一 、用层进行页面布局,层是一种HTML页面元素，可以用来包含文本、图像、表格或其他任何可在HTML文档正文中放入的内容，而且层可以定位到网页上任何位置，并可以随意移动，层之间也可以前后放置、隐藏或者显示，利用动作行为，层还可以制作出动画效果，所以层的功能非常强大。,通过“层”面板可以管理文档中的层。选择“窗口”“层”命令就可以打开“层”面板 “层”面板分3栏，最左侧是眼睛标记，用鼠标直接单击标记，可以显示或隐藏所有的层，中间显示的是层的名称，最右侧是层在Z轴排列的情况。,创建层有以下方式：,（1）插入层：将光标

2、移动到设计视图中想要插入层的位置，然后选择“插入”“布局对象”“层”命令。 （2）绘制层：在“布局”插入栏中单击“绘制层”按钮，然后在设计视图拖拽鼠标形成一个层。 （3）绘制多个层：使用绘制层的方法并按住Ctrl键不放，可以连续绘制多个层。,层的属性主要有以下几项：,（1）层编号：指定层的名称。层的名称只能使用字母和数字。 （2）宽和高：指定层的宽度和高度。 （3）左和上：指定层的左上角相对于页面或父层左上角的位置。 （4）可见性：指定层的初始状态是否可见。Default：缺省属性，一般默认为“继承”；Inherit：继承父层的可见性属性；visible：显示层；hidden：隐藏层。 （5）

3、溢出：指定当层的内容超过层指定的大小是应如何处理。visible：指定在层中显示额外的内容，该层会自动延伸来容纳额外的内容；Hidden：不在浏览器中显示；Scroll：滚动显示；Auto：当层的内容超出浏览器边界时，使用滚动条显示。,层与表格的转换,层和表格都能在页面中排版布局，定位网页对象元素，例如，定位图片、文本等。但各有不同优势，也各有一些缺点。用户在网页中定位对象时可以相互转换，以发挥各自优势实现优势互补。 1转换层到表格 （1）在层内定位好网页对象元素，然后选中所有要转换为表格的层 （2）选择“修改”“转换”“层到表格”命令，打开“转换层为表格”对话框,“最精确”单选按钮：选择该单

4、选按钮会严格按照层的排版布局生成表格，但表格的结构会非常复杂。一般会为每个层创建一个单元格，同时为空白区域创建任何单元格。以保证布局固定为原状态。 “最小：合并空白单元格”单选按钮：选中该单选按钮将设置如果层定位在指定数目的像素内，则层的边缘应对齐。如果选择该选项，结果表格将包含较少的空行和空列，但可能不与页面的布局精确匹配。,“使用透明GIF”复选框：选中该复选框，会在转化的空白单元格中插入透明的GIF格式图像，包括表格的最后一行，支持表格的长度，避免表格因无内容而缩小为最小状态。这将确保该表在所有浏览器中以相同的列宽显示。当启用此选项后，不能通过拖动表列来编辑结果表。当禁用此选项后，结果表

5、将不包含透明GIF格式图像，但在不同的浏览器中可能会具有不同的列宽。 “置于页面中央”复选框：将结果表放置在页面的中央。如果取消此复选框，表将在页面的左边缘开始。,转换表格到层,当页面布局需要进行调整，如果是表格布局，调整起来会比较困难。这时，如果先把表格布局转换为层布局，通过移动层来调整布局，即方便又快捷，最后根据情况再将层转换为表格。 转换表格到层的操作步骤如下： （1）打开要转换为层表格的网页。 （2）选择“修改”“转换”“表格到层”菜单命令，打开“转换表格到层”对话框,防止层重叠：选中该复选框可以在转换后的页面中激活防止层重叠的功能。 显示层面板：选中该复选框可以在转换后的页面中显示“

6、层”面板。 显示网格：选中该复选框可以在转换后的页面中显示网格线。 靠齐到网格：选中该复选框可以在转换后的页面中将层与网格线对齐。 （3）在弹出的对话框中选择想要的选项。,例：插入层（“飞扬书城”）并创建可编辑区域,将光标移动到设计视图中想要插入层的位置，然后选择“插入”“布局对象”“层”命令 在层中输入“飞扬书城”，并进行相关的样式设置。,二、行为,行为（Behaviors）是响应某一事件（Event）而采取的一个动作（Action）。行为是Dreamweaver 8中最有特色的功能，它实质上是网页中调用Javascript代码，以实现网页的动态效果，使用了Dreamweaver 8的行为功

7、能，就不需要掌握复杂的Javascript代码而轻松完成一个需要几十行甚至几百行代码才能完成的功能。,1. 网页事件,网页中的事件（Event）是指鼠标、键盘的响应方法，Dreamweaver 8提供了许多常用的事件。 启动Dreamweaver ，单击“【窗口】【行为】”菜单命令，系统打开“行为”面板,“行为”面板主要项目功能如下： 加（+）减（）按钮：用于添加或删除动作（Actions）。 动作：是网页产生的具体行为。 事件：当选定某个动作时，事件右侧出现一个箭头，按此箭头产生一个事件处理的下拉菜单，通过下拉菜单可选择触发动作发生的条件，以下是常见事件及描述。,OnClick：当访问者在指

8、定的元素上单击时产生。 onDblClick：当访问者在指定的元素上双击时产生。 onKeyDown：当按下任意键的同时产生。 onKeyPress：当按下和松开任意键时产生。此事件相当于把onKeyDown和onKeyUp这两事件合在一起。 onKeyUp：当按下的键松开时产生。 onLoad：当一图像或网页载入完成时产生。,onMouseDown：当访问者按下鼠标时产生。 onMouseMove：当访问者将鼠标在指定元素上移动时产生。 onMouseOut：当鼠标从指定元素上移开时产生。 onMouseOver：当鼠标移动到指定元素（刚进入区域）时产生。 onMouseUp：当鼠标弹起时产

9、生。 onSubmit：当访问者提交表单时产生。 onUnload：当访问者离开网页时产生。,2.设定行为命令,（1）在对象中加入行为命令 Dreamweaver 8中使用行为，应使用以下一般操作步骤： 选择一个想要添加行为的网页元素（可以借助状态栏中的标签选择器，例如选择可为整个网页设置行为）。 选择“【窗口】【行为】”菜单命令，打开“行为”面板。 单击添加行为按钮,并弹出一个菜单。 在菜单中选择一个动作，系统弹出该动作的设置对话框，显示动作的参数和说明。输入动作的相关参数后单击“确定”按钮。 回到“行为”面板，此时行为面板中增加了一个行为,（2）更改事件,为对象添加行为后，有时需要改变触发

10、行为的事件，增加、删除动作或改变动作参数等，这些都属于编辑行为的操作。 Dreamweaver 中设置动作时会自动创建一个事件，默认的事件有时并不是用户需要的，比如弹出消息窗口，默认事件是Onload事件，即网页加载时弹出消息窗口，但用户如果希望单击网页后弹出消息窗口，就必须更改事件为Onclick事件,操作方法为单击“事件”栏，再单击事件旁边的 按钮，在事件下拉列表菜单中选择Onclick事件。事件和当前选择的网页对象是相关联的，因此事件下拉列表菜单中的内容随所选网页对象不同而变化。,（3）修改行为的动作参数,已经设置的行为，可以改变动作参数。只要双击该行为对应的“动作”栏，即可打开该动作的

11、参数设置对话框，在对话框中修改各项参数。,双击可设置参数,（4）删除行为 在行为面板上选取欲删除的行为，单击行为面板左上方的“-”按钮，或按Delete键。 （5）调整行为的执行顺序 一个事件可以触发多个动作，比如Onload这一事件可以触发如播放声音，打开浏览器窗口等动作。在这种情况下就存在一个动作发生的先后问题，可以通过单击行为面板中“”，“”按钮来解决这个问题。,实例1：设置状态栏中的文本,设置浏览器中状态栏中的文本信息，可以在浏览网页时，浏览窗口底端状态栏中显示的信息 单击行为面板中“+”按钮，在行为菜单中选择“【设置文本】【设置状态栏文本】”菜单命令，在“消息”文本框中输入要显示的信

12、息内容，这里输入“欢迎来到我的小站”，按“确定”按钮完成设置。检查行为面板中的事件，确定设置为“Onload”。,如果在选择了正确的网页行为后，发现所期望的事件并没有出现在事件列表菜单中，这时应尝试改变浏览器。方法是单击“+”按钮，选择“显示事件”命令，在子菜单中选择浏览器的版本，浏览器的版本越高，支持的事件越多。默认情况下，事件列表菜单中显示的都是IE4.0能够产生的事件。当找到所期望的事件后，选择该事件，对应行为面板的相应事件将会改变。,实例2：弹出信息框,实例创意 网页加载时弹出信息框，如图所示，或点击一个对象弹出信息框，比如点击图片，按钮，链接等等，都可以弹出信息框。如果某些页面的内容

13、在别人复制之前想给一点提示，还可以选择OnCopy事件来触发弹出信息框动作。,制作步骤,方法一：调用JavaScript 使用这一行为，必须对JavaScript非常熟悉。本例中调用JavaScript的操作主要用于对文字的作用，即单击文字时弹出信息框，因此在插入这个行为时，按以下步骤操作： （1）打开 “behavior.htm”网页文件，输入“课件下载”并添加链接“kejian.rar”，接着选中”课件下载”字样，单击“行为”面板中的“+”按钮，然后在行为选择菜单中选择“调用JavaScript”命令。,（2）弹出的“调用Javascript”对话框，在文本框中输入需要执行的准确的Java

14、Script代码或函数名，例如本例键入的一行代码为： alert(没有病毒，放心使用！) （3）按“确定”按钮，打开“行为”面板，确定当前动作使用的事件为“onClick”，如果不是，选择右边“”按钮重新选择,例3：弹出信息,对于不熟悉JavaScript代码来制作弹出信息框的用户，也可以采用这一方法。Dreamweaver 8自带了弹出信息的功能菜单： （1）选择状态栏上的“”，单击“行为”面板中“+”按钮，然后在行为选择菜单中选择“弹出信息”菜单命令。 （2）系统弹出 “弹出信息”对话框，在文本框中输入需要显示的信息，如“欢迎来到本站！”，按“确定”按钮，完成设置。,实例4：打开浏览器窗口

15、,实例创意 打开浏览器窗口即在打开当前网页的同时，另外打开一个新的窗口，而这个新打开的窗口，可以根据自己的喜好对它的菜单、页面尺寸、滚动条等进行设置，如263网站打开时弹出的“免费试用”广告窗口。,制作步骤：,（1）设计一个页面，作为新窗口。 （2）创建另一个网页“index.htm”，由于是对整个页的行为，即广告窗口是在该网页加载时自动弹出，所以选择状态栏上的“”后单击行为面板的“+”按钮，选择“打开浏览器窗口”菜单命令 （3）系统弹出 “打开浏览器窗口”对话框，在“要显示的URL”文本框中输入新窗口文件的路径和文件名，也可以通过单击“浏览”按钮查找相应的路径及文件名。“窗口宽度”和“窗口高

16、度”文本框中定义新窗口的长宽值。 （4）选择事件为“onload”。,实例5：用显示-隐藏层制作下拉菜单,显示-隐藏层可以对页面中所有的层进行设置，使其可显示或隐藏。本例将通过显示-隐藏层的功能制作一个网页中常见的导航用下拉菜单。下拉菜单的实质是网页中共有4个菜单，即菜单1、菜单2、菜单3和菜单4，相对应有4个层，即menu1、menu2、menu3和menu4，每一层即一个下拉菜单，网页加载时，这4个层全部隐藏，当鼠标移动到“菜单1”时，层menu1显示，其它层隐藏，并且鼠标继续移动到层menu1时，层menu1继续显示，其它层仍然隐藏。重复刚才的操作，完成整个下拉菜单的制作,制作步骤,（1

17、）在“布局”插入栏中点击“绘制层”按钮在页面中绘制一个层，然后在层的“属性面板”中设置各参数。 （2）将光标移至title层内，点击插入面板“常用”视图下的表格按钮，插入一个1行4列的表格，宽度为100%，设置四个单元格宽度为120px,（3）在前两个单元格中输入文字，就是主菜单名，可按自己想要的名字输入，如“学院建设”和“招生就业”为例，并加上链接，空链接可在链接文本框中输入“#”。 （4）再次使用插入面板插入一个层到刚完成的导航条的下方，各项参数填为：层编号框填入menu1，左、上、宽、高框分别填入5、220、120、80,（5）在menu1层中输入菜单内容。为了排版方便，使用表格制作菜单

18、项。这个层将作为“学院建设”的下拉选单出现，填入你所需要的菜单链接。使用同样的方法，再为“招生就业”也做一个下拉选单（层menu2）。,注意：下拉选单所在的层（menu1、menu2）的位置非常重要（由左和高两个参数决定）。它们的上边线应该紧贴导航条的下边线，这样才能保证在后面步骤完成后，菜单能正常使用。因为如果远离导航条的话，鼠标一离开导航条，菜单就消失了。,（6）按F2键打开“层面板”，其中列出了网页中的三个层，点menu1和menu2的前面一格，出现闭着的眼睛图标，这两个层便隐藏起来了。操作这一步是因为下拉菜单的初始状态是不可见的。 （7）选中导航条中的第一个单元格，即“学院建设”单元格

19、，打开行为窗口，单击“+”按钮，在下拉选项中选中“显示-隐藏层”菜单命令。,（8）在“命名的层”框中会列出当前网页中所有的层，选中层 “menu1”，因为我们想要menu1这个层对“学院建设”响应。然后点下面的“显示”按钮，按“确定”完成设置。,（9）回到“行为”面板，点击事件下的一个向下的小箭头“”，单击后在下拉选项中选中“onMouseOver”事件。这一步的作用是实现当鼠标移至第一个单元格时，下拉选单menu1的状态变为“显示（Show）”。,（10）接下一步是让下拉选单menu1在鼠标移开第一个单元格时再变为隐藏状态。选择“学院建设”所在单元格，单击“+”按钮，在下拉选项中选中“显示-

20、隐藏层”菜单命令，在 “显示-隐藏层”窗口中选中层 “menu1”，因为我们想要menu1这个层对“学院建设”响应。然后单击“隐藏”按钮，按“确定”按钮完成设置。,（11）回到行为面板，点击事件下的向下的小箭头 ，在下拉选项中更改为“onMouseOut”，即鼠标离开“学院建设”单元格时，层menu1隐藏。 （12）选中层menu1，方法是点击层的边缘或在层面板中点击menu1，用与导航条“学院建设”单元格部分同样的方法在层窗口中为它添加显示与隐藏自己的命令。这样做的效果是当鼠标在menu1层内（onmouseover）时显示，移出(onmouseout)层menu1时，层menu1就自动隐藏

21、。 （13）重复以上操作，为导航条的第二个主菜单“招生就业”和层menu2添加显示-隐藏层命令。 （14）保存网页，按F12预览。,三、利用时间轴制作动画效果,时间轴,时间轴是根据时间的流逝移动图层位置的方式显示动画效果的一种动画编辑界面，在时间轴中包含了制作动画时所必须的各种功能。 时间轴只能移动层对象，如果想移动文本或图像之类的对象，可以将其放在层中。 首先在新建的页面中创建层，并设置层内对象。选择“窗口”|“时间轴”菜单命令，打开时间轴面板。,时间轴的各项功能 （1）时间轴弹出菜单：表示当前的时间轴名称。 （2）时间轴指针：在界面上显示当前位置的帧。 （3）不管时间轴在哪个位置，一直移动

22、到第一帧。 （4）表示时间轴指针的当前位置。 （5）表示每秒显示的帧数:默认值时15帧。增加帧数值，则动画播放的速度将加快。,（6）自动播放：选中该项，则网页文档中应用动画后自动运行。 （7）LOOP（循环）：选中该项，则继续反复时间轴上的动画。 （8）行为通道：在时间轴中特定帧处执行的行为的通道。 （9）关键帧：动画条中已经为对象指定属性（如位置）的帧。 （10）图层条：意味着插入了“层”等对象。 （11）图层通道：它是用于编辑图层的空间。,例1：创建时间轴动画,1、新建页面，把光标放到页面左上方的位置，在插入面板选择布局绘制层，创建五个层。分别输入文字“北”、“京”、“欢”、“迎”、“你”，将图层排列在适当的位置。 2、打开时间轴。选择层1后，拖动到时间轴的第一行上。 3、用同样的方法，把包含有其它文字的层也根据文字的顺序拖动到时间轴的第25行上。,5、在时间轴中选择Layer1的第一帧，在属性面板的顶端坐标值（T）中输入（50），这样，可以把文字放置到上侧