网页设计与制作 教学课件 作者 李云程 主编 李亮 周光明 副主编 第9章.pptVIP

第9章 层及其妙用 9.1 带有图层的网页 9.2 通过描绘层可制作拖动层 9.3 能飞的鸟 9.3 能飞的鸟 9.4 动态下拉菜单 9.4 动态下拉菜单 * * 层是一种新的网页元素定位技术 。 使用层可以以像素为单位精确定位页面元素 。 而且层可以放置在页面的任意位置。 把页面元素放入层中，可以控制哪个显示在前面，哪个显示在后面，哪个显示，哪个隐藏。配合时间轴的使用，可同时移动一个或多个层，轻松制作出动态效果！ lyc 2008/3/24 深圳职业技术学院软件工程系 李云程制作 案例 在页面中使用层 制作要求： 页面是由两张图片和一段文字组成的。将它们分别放在不同的图层中，且使图层之间有相互重叠，将文字放在图层内且放置在图片图层的上面。 制作步骤 1.创建层 。创建层有以下几种方法。 2. 插入第二layer2 、三个层layer3。 3.设置层的可见性、层的名称、层的Z 指数 。 在网页中使用层来实现其特有效果。 示例效果 案例 制作可拖动的层 制作要求： 本例中汽车图片放在一个层中，浏览者在浏览网页时可以拖动图片到窗口的任何位置。 制作步骤 1.在网页中插入层 。 2.为层添加拖动行为动作 。打开Behavior行为面板，单击面板上的“+”按钮，选择Drag layer 3. 按F12键预览网页 。 在网页上常常会见到一些小的广告条，这些广告条可以是文字、图片，也可以是动画或小型的游戏等。它们可以通过鼠标拖动来改变在网页中的位置。这里涉及使用层的技术。 示例效果 网页上经常能看到一些飞翔的鸟或奔跑的动物，在网页中移动 。 案例 能够飞行的小鸟 制作要求： 选择一个GIF格式的动画，我们这里是一只鸟，利用层和时间线的功能，可以制作一只逼真的鸟在网页中飞翔的效果 。 制作步骤 1.在网页中插入层，然后在其中插入gif动画图像。 2. 添加Timelines（时间线） 。 3. 在Timelines时间线中创建动画的两个关键帧 。 示例效果 选择菜单Window/ Other /Timelines选项，打开Timelines工具栏。 拖动页面中的层将其拖动到Timelines中的第一个通道 ，随之出现紫色条，并在两端有两个小圆圈，这两个小圆圈代表Timelines的两个关键帧 。 关键帧是指动画条中某个对象指定了位置的帧，关键帧在创建Timelines动画的过程中非常重要。 4. 设置动画的起、止位置。 单击Timelines中左边第—个小圆圈，可看见红色位置标记移动到第—帧。然后在页面编辑窗口中将层移动到页面的最左端，即动画的起点位置。 接下来单击Timelines中紫色条右侧末尾的关键帧小圆圈，将看见红色位置标移动到最后—帧，然后在页面编辑窗口中将层拖动至页面的最右端，即动画的终点位置。 5. 增加动画帧数和添加关键帧。 拖动时间线动画条的最末帧标记，将Timeline增加到60帧。与动画播放速度有关。 将红色的位置标记移动到需要添加关键帧的地方，按住Ctrl键，此时鼠标指针变成一个小白圆圈，将这个小白圆圈在位置标记处单击，即可添加一个关键帧。 制作步骤 6.设置动画路径为曲线。 7. 添加鸟飞回的动画 。 总结：如果页面有许多动作，可以创建—个Timelines时间线来控制所有的动作。但是这样做很不方便，实际上可以通过创建多个Timeline的方法来控制多个动作。使用这种方法可以将—些复杂的动作分解，这样控制起来就更加方便了。在这个案例中，我们通过两个Timline来控制鸟飞翔的动作。利用层，结合时间线和行为动作可以创建很多特别的效果。 选中所添加的某个关键帧，然后按住Ctrl键在页面中拖动层图像上或下移，即可见到路径变成曲线。 在页面中再插入另—个层并插入一幅反向飞的鸟图像，并将该图层拖动到时间线的通道2上，方法同前制作相反方向动画。 学习在网页中创建动态下拉菜单，就象WINDOWS窗口的菜单一样，当鼠标单击或鼠标放在主菜单上时，就显示下拉菜单来。 案例 制作下拉菜单 制作要求： 本例在网页中单击新闻、体育、科技时，显示动态下拉菜单。（自己完成当选择其中的选项时，链接到新的网页信息。） 制作步骤 1.在页面的上方插入一个层layer1, 并在层layer1中插入一个一行四列的表格，然后在表格中添加主菜单文字。 2.在页面中插入图层layer2 ，将其放在第一个主菜单的下面，在层中插入一行一列的表格，并在表格中输入相应的子菜单文字，然后设置其显示属性为隐藏。 3.添加行为动作 。 示例效果 其原理是利用层的显示和隐藏动作。 先选中主菜单中的文字如“新闻”，打开行为面板，单击“+”添加“Show-Hide Layers”行为，在弹出的窗口中，选中lay