第8章 层与行为.pptVIP

《网页设计与制作教程》 作者：孟显勇 北京理工大学出版社 第八章 层与行为 层作为一种容器，可以将任何一种网页设计元素添加于其中，通过控制层的位置和属性来实现对层中承载的对象的控制。 行为就是指对层的各种控制和操作，当Windows操作系统指定的事件被触发时，就会有相应的行为来处理该事件，即控制层的相应操作。 Windows系统是通过事件来控制行为，再由行为来控制层的各种属性，包括位置、样式和显示方式等。层与行为是用户与页面实现交互的一种方式。 8.1 层 层标签DIV的主要功能是实现页面布局，标签DIV属于块级的HTML标签，可以将层定位在页面的任何位置。 在DIV中可以添加文字段、图像、表格、视频等页面对象，包含在同一DIV中的页面元素可以作为一个整体被操作，使用层可以实现灵活的页面布局。 页面中层主要有三个功能： (1) 可以使包含其中的页面元素显示统一的样式，还可以作为一个整体进行移位或隐藏 (2) 层与层之间有前后关系，使用Z-index属性可以设置层的前后顺序。 (3) 可以将层内的页面对象作为一个整体进行操作和控制，实现一些页面特殊效果。 8.1.1 创建层 使用Dreamweaver可以创建层，选择菜单栏的【插入】→【布局对象】→【层】，在页面中插入一个层，可以对层的位置进行调整。也可以选择插入栏的【布局】选择绘制层按钮，在设计视图里按要求绘制所需层。 8.1.2 层的基本操作 使用Dreamweaver在页面上绘制层后，可以对存在的层进行定位、选择、移动、调整大小和对齐等基本操作。使用Dreamweaver的层面板可以对层进行操作，点击菜单栏的【窗口】→【层】打开层面板，如图8-2所示，选中将要编辑的层对象，使用“属性”面板对层属性进行编辑。 8.1.2 层的基本操作 主要可以进行以下操作： 给层取名或修改名称 定义层的位置，可以对层四个方向的页边距进行设置。 定义层Z-index属性，决定层与层之间的叠放次序，值越大叠放越靠上。 8.1.2 层的基本操作 定义可见性，主要属性值有default、inherit、visibile和hidden。 设置层的背景颜色。剪辑用来定义层的显示区域，定义四个页边距信息。 溢出设置，当层中对象大于层时，会出现溢出，主要属性值有：visible表示显示溢出部分、hidden表示隐藏溢出部分、scroll表示显示滚动条、auto表示根据具体内容大小，决定是否显示滚动条。 8.2 行为 基于Windows操作系统的应用程序，可以接收操作系统发来的事件，并对事件进行处理。 行为就是为响应事件进行的一系列的处理和操作，当指定的事件被触发时，将运行相应的行为来响应事件，对事件进行处理。 Dreamweaver提供了网页行为来处理各种网页常见事件，例如，常用的鼠标事件，窗口事件，键盘事件等等。Dreamweaver中的行为使用Javascript来实现，通过Javascript脚本代码来控制页面对象，实现特定的行为。 8.2.1 认识行为 网页中添加行为可以使网页具有更加灵活的交互性，可以实时的响应特定的事件。 操作系统检测到指定事件发生后，将事件处理请求发给相应的应用程序处理，网页接收的是网页处理事件，比如，触发一个网页对象，网页对具体事件作出响应。 网页常见事件主要包括窗口的打开与关闭，鼠标指向、点击、移开页面元素以及焦点的改变等。 8.2.1 认识行为 行为由动作（action）和事件（events）组成，事件是激发行为的起因，动作是处理事件的具体操作内容。 网页接收到事件后对其进行相应的处理，处理程序使用Javascript代码来完成，在Dreamweaver中添加行为可以自动生成相应的Javascript代码，制作效率非常高。 Dreamweaver中提供的主要行为的名称及其含义请参考表8-1所示。 表8-1 Dreamweaver主要行为 8.2.2 认识事件 通过鼠标或键盘对计算机进行操作就触发了相应的事件，操作系统就会将事件发送给相应的应用程序处理，应用程序就会调用相应的行为对事件进行处理，行为就是一系列操作。 网页的事件主要分为鼠标事件、键盘事件、窗口事件、表单事件等，每一个事件都可以对应一个处理行为。 在Dreamweaver中可以对行为进行管理，点击菜单栏的【窗口】→【行为】，可以打开行为面板，可以显示Dreamweaver中常见事件，并对页面的行为进行管理和编辑。 图8-3 Dreamweaver事件 8.2.2 认识事件 窗口事件窗口事件是指窗口发生变化时所触发的事件，主要事件属性名及含义如表8-2所示。 表8-2 窗口事件 8.2.2 认识事件 鼠标事件鼠标事件是当鼠标对页面执行操作时触发的事件，例如，点击、指向、双击等，主要鼠标事件属性