个人音乐网站主页

1、个人音乐网站主页层和行为的使用亳州中药科技学校 计算机部 王琪使用层和行为学习目标 在Dreamweaver中可以通过层来设计页面的布局，可以将网页元素置于不同的层中，以产生层叠效果，也可以利用层来精确定位网页元素；Dreamweaver中的行为可以使用户不用编写JavaScript代码便可实现多种动态网页效果，从而使页面更具动感和吸引力。本节通过一个案例来详细讲解层和行为的使用方法。个人音乐网站主页本案例将创立层，并使用“行为面板中的“显示-隐藏层命令创立一个可以控制文字显示和隐藏的页面，当鼠标经过图像时会出现相应的介绍文字。案例效果图本案例分为创立有文字介绍的层和对层设置行为动作两个局部来

2、完成。同学们通过本案例可以熟悉创立层和使用行为等操作层的创立和设置层是一种HTML页面元素，可以将它定位于页面上的任意位置。层可以包含文本、图像或其他任何可以在HTML文档正文中放入的内容。创立层嵌套层 层的“属性面板 “层面板 创立层在Dreamweaver 8中，层的创立可通过描绘层和插入层两种方法进行，下面分别讲解。描绘层 插入层描绘层 1.在“布局面板中单击 按钮 2.将光标移动到页面文档窗口中，当其变为十字形时，选择需要绘制层的位置，按住鼠标左键并拖动，在页面中绘制一个大小适宜的区域。 3.释放鼠标，完成新层的绘制 提示：在绘制层时，按住Ctrl键不放，可以连续绘制多个层，而不用屡次

3、单击按钮。插入层 插入层是通过菜单命令直接在光标处插入一个预定大小的层，其操作方法较简单，只需在页面中将光标放置到需要插入层的位置，选择“插入/布局对象/层命令即可在光标处插入一个预定大小的层。插入层 嵌套层 嵌套层是指包含在其他层中的层，通常情况下将嵌套层称为子层，将嵌套层外部的层称为父层。一个嵌套层继承其父层的可见性，并能随父层的移动而移动，因此可以通过移动层来判断层之间的嵌套关系。嵌套层之间存在着继承关系。继承就是使子层的可见性与父层保持一致，并且保持子层与父层的相对位置不变。这在制作动态网页时非常有用，因为动态网页的很多效果是通过JavaScript控制层的可见性及位置变化来实现的。层

4、的“属性面板 选择创立的单个层时，层的“属性面板。层的“属性面板 其中各项参数含义分别如下：“层编号下拉列表框：在该下拉列表框中输入当前层的名称，便于在“层面板和JavaScript代码中标识该层。 “左文本框：用于指定层相对于页面或相对于父层左边界的位置。“上文本框：用于指定层相对于页面或相对于父层上边界的位置。“宽文本框：用于指定层的宽度，默认单位是像素。层的“属性面板“高文本框：用于指定层的高度，默认单位是像素。“Z轴文本框：在垂直平面方向上确定层的排列顺序。在浏览器中，编号较大的层出现在编号较小的层的前面，值可以为正，也可以为负。层的“属性面板“可见性下拉列表框：在该下拉列表框中指定该

5、层最初是否是可见的。包括default、inherit、visible、hidden 4个选项。default默认表示不指定层的可见性，当未指定可见性时，大多数浏览器都会默认为inherit；inherit继承表示继承该层父级的可见性属性；visible可见表示显示该层的内容，无论其父级层是否可见；hidden隐藏表示隐藏层的内容，无论其父级层是否可见。“背景图像文本框：设置当前层的背景图像。“背景颜色颜色框：设置当前层的背景颜色。层的“属性面板“溢出下拉列表框：在该下拉列表框中选择当层中的内容超过层的指定大小时的显示方式。包括visible、hidden、scroll和auto 4项。选择v

6、isible可见选项后，当层的内容超过层的指定大小时，该层会通过延伸来显示额外的内容；选择hidden隐藏选项后，当层的内容超过层的指定大小时，该层的尺寸保持不变，超出局部的内容不会显示；选择scroll滚动选项后，不管层的内容超没超过层的指定大小，都在该层上添加滚动条；选择auto自动选项后，当层的内容超过层的指定大小时，将显示层的滚动条。层的“属性面板“剪辑栏：定义层的可见区域。在“左、“上、“右、“下文本框中输入的数值表示可见区域与层各个边界的距离。“层面板 通过“层面板可以管理文档中的层，控制层的重叠顺序，更改层的可见性，以及选择多个层等。选择“窗口/层命令或按F2键翻开 “层面板。控

7、制层的重叠顺序控制层的可见性 控制层的重叠顺序层的重叠顺序即层的显示顺序。在“层面板中改变层的重叠顺序有以下两种方法：在“层面板中选择某个层，单击“Z的属性列，出现设置框，在设置框中输入相应的数值即可改变层的重叠顺序。在“层面板中选择要改变重叠顺序的层，按住鼠标左键拖动层到相应的重叠位置。在移动层时将出现一条线，当该线显示在想要的重叠顺序时释放鼠标即可改变层的顺序。“层面板、设置“Z轴值和拖动层改变层叠顺序控制层的可见性 设置层的可见性 层 的 操 作 层的根本操作包括选择层、调整层的大小、移动层和对齐层等，下面将分别介绍其操作方法。选择层调整层的大小 移动层 对齐层 应用举例通过层布局页面

8、选择层选择层可以分为选择单个层和选择多个层两种情况。选择单个层选择多个层 选择单个层单个层的选择可以通过以下几种方法来实现：在“层面板中单击需选择层的名称。在页面中单击需选择层的边框。单击一个层的控制点。如果控制点不可见，可在该层中的任意位置单击，显示出控制点。单击层的控制点 选择多个层 多个层的选择可以通过以下两种方法来实现：在“层面板中，按住Shift键并单击需要选择的多个层。在页面中按住Shift键并单击需要选择的多个层。调整层的大小 在Dreamweaver中，可以调整单个层的大小，也可以同时调整多个层的大小以使它们具有相同的宽度和高度。如果在“层面板中选中了“防止重叠复选框，那么在调

9、整层的大小时将无法使该层与另一个层重叠。调整单个层的大小可以通过以下几种方法进行：选择需调整的单个层，拖动该层的控制点即可在相应的方向上改变层的大小。 拖动层改变大小 调整层的大小选择需调整的单个层，在按住Ctrl键的同时按键盘上的方向键调整层的大小。此方法只能移动层的右边框和下边框，每按一次方向键可以调整1像素的大小。选择需调整的单个层，同时按住Ctrl键和Shift键，每按一次方向键可在相应的方向上调整一个网格单元的大小。选择需调整的单个层，在层“属性面板的“宽和“高文本框中直接输入相应的数值改变层的大小。移动层 移动已经创立的层可以通过以下几种方法实现：选择要移动的层，拖动层的边框或者控

10、制点。选择要移动的层，在“属性面板的“左和“上文本框中输入相应的数值，按Enter键即可改变层的位置。选择要移动的层，每按一次方向键可在相应的方向上移动1像素。选择要移动的层，按住Shift键并按一次方向键可在相应的方向上移动一个网格的距离。对齐层 当需要对齐层时，未选中的子层可能也会因为其父层的移动而移动。假设要防止这种情况，那么不要使用嵌套层。使用层对齐命令可利用最后一个选择层的边框来对齐一个或多个层。应用举例创立层并添加文字介绍 首先在页面中创立层并添加相应的文字介绍操作步骤如下： 1.启动Dreamweaver，翻开index.html文件 2.在“布局面板中单击 按钮在文档中创立一个

11、层。选择该层后，在层“属性面板中设置“层编号为Layer001,在“左、“上、“宽、“高文本框中分别输入数值“364px、“166px、“44px、“12px，并在层中输入文本“影视廊，设置文本大小为“9点数，文本颜色为“660000。应用举例创立层并添加文字介绍 3.在“布局面板中单击 按钮在文档中再创立一个层。在层“属性面板中设置“层编号为Layer002,在“左、“上、“宽、“高文本框中分别输入数值“483px、“119px、“44px、“12px，并在层中输入文本“CD封面，设置文本大小为“9点数，文本颜色为“660000。 4.用同样的方法再创立两个层。并设置“层编号分别为Layer

12、003、Layer004,设置Layer003层的位置“左、“上分别为 “539px、“169px,宽度和高度分别是、“44px、“12px；设置Layer004层的位置“左、“上分别为 “422px、“219px,宽度和高度分别是、“44px、“12px；在Layer003和Layer004层中分别输入文本“乐评和“CD点选，并设置字体大小为“9点数，文本颜色为“660000。应用举例创立层并添加文字介绍 5. 创立一个层, 设置“层编号为Layer01,设置层的宽度和高度分别为“141px和“16px,并在层中输入“对自己听过的CD进行介绍，设置文本大小为“9点数，文本颜色为“660000

13、。 6.用同样的方法再创立3个层,分别设置“层编号为Layer02、 Layer03、 Layer04,并分别在层中输入文本“自已看过的一些电影、“有很cool的CD封面哦！、“在石头文中的乐评将各层的宽度调整为与层中所输入的文字宽度相同，高度都为“16px,调整好各层的位置，各层创立完毕业。 行为的概念 在Dreamweaver 8中，行为是指将JavaScript代码放置在文档中，使Web页具有交互功能，使访问者能以多种方式更改页面或引起某些任务的执行。行为事件 “行为面板 应用举例查看交互式图像的行为 行为行为是由事件和该事件触发的动作两局部组成的，事件是动作被触发的结果，任何一个事件都

14、需要一个动作来激发，行为是事件和由该事件触发的动作的组合。在“行为面板中，可以先指定一个动作，然后指定触发该动作的事件，从而将行为添加到页面中。事件 事件是浏览器生成的消息，指示该页的访问者执行了某种操作。事件总是针对页面元素或标签而言的。比方：将鼠标光标移到图像上、将鼠标光标放在图像之外或单击鼠标左键，这些是关于鼠标最常见的3个事件onMouseOver、onMouseOut、onClick。“行为面板 使用“行为面板可将行为附加到网页元素上，更具体地说是附加到标签上，并修改以前附加行为的参数。已附加到所选网页元素的行为将显示在行为列表中，按事件的字母顺序排列。假设同一个事件有多个动作，那么

15、将以在列表上出现的顺序执行这些动作。选择“窗口/行为命令或按Shift+F4快捷键将翻开“行为面板。“行为面板 “行为面板“行为面板中各项参数含义分别如下：“行为面板“行为面板行为的关键在于Dreamweaver提供了许多标准的JavaScript程序，这些程序被称为动作Action。每个动作都可以完成特定的任务。另外，Dreamweaver使用了开放结构，即任何人都可以开发出扩展程序。内置行为动作的应用 内置行为动作的应用弹出信息 播放声音 调用JavaScript 显示或隐藏层 弹出信息播放声音 “播放声音对话框 调用JavaScript 调用JavaScript行为用于当事件发生时，自动

16、执行自定义函数或JavaScript代码。调用JavaScript动作允许使用“行为面板指定发生某个事件时应该执行的自定义或JavaScript代码行，可以自己编写或使用Web上免费代码库中提供的JavaScript代码。【例5-2】 通过调用JavaScript行为创立一个关闭当前页面的行为动作光盘:源文件第5章index05.html。显示或隐藏层 层的显示和隐藏是一个非常通用的网页特效，主要用于显示、隐藏或恢复一个或多个层的默认可见性。这可以通过Dreamweaver内置的“显示-隐藏层行为来实现。 下面通过“行为面板对各层的显示和隐藏进行设置。操作步骤如下： 1.选择“窗口/行为命令翻

17、开“行为面板。单击按钮，在弹出的下拉菜单中选择“显示隐藏层命令，翻开“显示隐藏层对话框。从中依次选择各层名称，分别单击“隐藏按钮，完成后单击“确定按钮。 2.返回“行为面板并设置事件为onLoad.应用举例在“行为面板中设置层 3.在文档中选择“01表格中第二行第一列的图像，在“行为面板中单击按钮，在弹出的下拉菜单中选择“显示隐藏层命令，翻开“显示隐藏层对话框。从中设置Layer02层和Layer001层为显示，其他层为隐藏，单击“确定按钮返回到“行为面板并设置事件为onMouseOver.4.单击按钮，在弹出的下拉菜单中选择“显示隐藏层命令，翻开“显示隐藏层对话框。从中设置所有层为隐藏。单击

18、“确定按钮返回到“行为面板并设置事件为onMouseOver.应用举例在“行为面板中设置层 5.在文档中选择“01表格中第一行第三列的图像，在“行为面板中单击按钮，在弹出的下拉菜单中选择“显示隐藏层命令，在翻开的“显示隐藏层对话框中设置Layer03层和Layer002层为显示，其他层为隐藏，单击“确定按钮返回到“行为面板并设置事件为onMouseOver.然后重复步骤46.在文档中选择“01表格中第二行第六列的图像，在“行为面板中单击按钮，在弹出的下拉菜单中选择“显示隐藏层命令，翻开的“显示隐藏层对话框中设置Layer04层和Layer003层为显示，其他层为隐藏，单击“确定按钮返回到“行为面板并设置事件为onMouseOver.然后重复步骤4应用举例在“行为面板中设置层 7.在文档中选择