初中九年级信息技术制作弹出式的菜单

制作弹出式的菜单

Dreamweaver的时间轴功能可以轻松地让网页活动起来，从而使网页极富动感。时间轴通过在不同的时间内改变层的位置、大小、可见性、叠放次序等来创建动画。在本节中，我们将时间轴同层紧密结合在一起来完成动画效果。在运用时间轴的同时，在可以触发许多行为，完成更复杂的网页动画。图示网页的左侧是一排弹出式菜单，当鼠标移动到每个菜单项上时，右边就会弹出该菜单项的内容。菜单的主菜单项是使用拼图方法制作完成的，再把同每个主菜单项对应的子菜单放置在不同的层中。一、制作静态的菜单项1.拼接网页左侧的图片内容左侧的菜单内容实际上是一个大的图片，为了与网页上部的内容相配合，使用了图片拼接的方法来完成。做一做拼接网页左侧的图片内容。第一步：打开“晋阳书屋”网页，在下拉式菜单的导航栏下插入一个3×2的表格，设置表格属性如图所示。第二步：合并、拆分单元格，调整表格到如图所示的外形。第三步：在表格中插入如图所示的图片，设置第2列的第1、2个单元格的背景色分别为#669999和#99CCCC。操作步骤本小节使用表格制作了无缝的拼接图形。在制作大面积的拼接图形时，如果图形中有大面积单色部分，应该使用颜色来填充表格单元格，而不要使用单色的图片，这样会加快拼接后图形的下载速度。说明在弹出菜单右边的区域分别用来存放菜单中各按钮的介绍。为了让不同按钮的提示内容互不干扰，并且方便以后制作动画，应使用层嵌套的方法，每个子层存放一个按钮的内容介绍。做一做使用层嵌套的方法制作嵌套层。2.制作嵌套层第一步：选择“插入”→“层”菜单命令，在页面中插入一个层，取名为Layer0。第二步：移动鼠标指针到Layer0层中，选择“插入”→“层”菜单命令，在层中再插入一个，取名为Layer1。第三步：选中Layer1层，在“属性”面板中设置Layer1的“左”、“上”值为0，“背景图片”为bookbackground.gif，改变Layer1到适当大小。第四步：在Layer1中插入一个3×3的表格，设置表格属性如图所示。操作步骤第五步：分别合并表格第1、3行的所有单元格，在表格中插入如图所示的文字和图片。第六步：重复第二至第五步的操作，在Layer0中再插入层Layer2~Layer5，并在每一个层中插入相应的文字和图片。第七步：设置Layer2~Layer5层为不可见，结果如图所示。时间轴动画只能移动层的位置，为了使子菜单中的内容“弹出”动态效果，所以我们把要移动的文字插入层中。在制作嵌套层中的子层时，应注意使每个子层的大小、位置相同，设置它们相对于父层的“左”、“上”坐标为0的目的是使父层与子层的左、上边界一致，便于调整画层的位置。说明二、使菜单弹出来下面结合时间轴动画和行为，使制作的菜单所包含的内容“动”起来。1.制作时间轴动画做一做用时间轴来制作动画，使Layer0层从页面的左侧运动到页面的中间。第一步：选择“窗口”→“时间轴”菜单命令，打开“时间轴”面板。第二步：选择层Layer1，单击鼠标右键，在弹出的菜单中选择“添加到时间轴”下单命令，这时“时间轴”面板的第1个通道将出现一个紫色条，条中显示了层的名称，如图所示。操作步骤第三步：单击紫色条右边的小圆点，把红色的放音磁头移动到最后1帧。第四步：单击紫色条左边的小圆点，把红色的放音磁头移动到第1帧。第五步：选中层Layer0，在“属性”面板中设置“左”为-320px，“Z轴”为-1。第六步：用鼠标连续单击**按钮可以看到动画的效果。按钮和按钮：单击按钮将后退或前进1帧。第一，“时间轴”面板的最大特点是中间有一条横向的时间轴，上面标有均匀的刻度，单位是“帧”。红色的矩形块称为放音磁头，它所在的部位代表当前帧。第二，“时间轴”面板上端是一些动画属性设置、播放按钮。各按钮的功能如下：说明栏：设置动画的名称。按钮：返回到动画的第一帧。“Fps”栏：设置动画的播放速度，单位是帧/秒，默认的值是15。“自动播放”复选框：设置是否在页面载入时就开始播放动画。“循环”复选框：设置是否循环播放。页面左页是一幅完整的图形，上面的文字能否做链接呢？其实很简单，只要在图形中创建一些热区，并在每个热区上建立相应的链接就行了。创建图形热区链接。做一做2.创建图形热区链接第一步：选中页面左边的图片，单击“属性”面板中的“矩形热点工具”按钮，在图中的“新书快讯”上面一个大小合适的矩形正好盖住图中的文字，如图所示。第二步：在“属性”面板中的“地图”栏输入“map1”，作为该热区的名称。第三步：选中热区，“属性”面板中显示如图所示的热区属性。第四步：在“链接”框中输入“#”表示空链接，在“替代”框中输入该热区的引导文字。第五步：分别在图片中的“名车欣赏”、“畅销书屋”、“网友原创”等文字上创建热区链接。操作步骤根据需要建立热区的图形形状，可以分别选择矩形、圆形和多边形3种热区工具创建不同形状的热区。热区属性中的“替代”可以在鼠标移动到热区上时，显示关于该热区的信息，一般用于显示提示信息或对图的注释等。说明3.添加行为把行为和刚才制作的时间轴动画结合起来，完成弹出式菜单的制作过程。做一做第一步：选择“修改”→“页面属性”菜单命令，在弹出的“页面属性”对话框中，设置“左边界”为0。第二步：选择“窗口”→“行为”菜单命令，打开“行为”面板。第三步：选中“新书快讯”上的热区，单击“行为”面板中的按钮，选择“显示-隐藏层”菜单命令，弹出如图所示的“显示-隐藏层”对话框。操作步骤第四步：设置层Layer1显示，层Layer2~Layer5隐藏，单击“确定”按钮，完成给第一个热区添加了一个通过onClick事件触发的行为。第五步：单击“行为”面板中的按钮，选择“时间轴”→“转到时间轴帧”菜单命令，弹出如图所示的“转到时间轴帧”对话框。第六步：在“时间轴”下拉列表框中选择“Timeline1”，“前往帧”设置为1，单击“确定”按钮。第七步：单击“行为”面板中的按钮，选择“时间轴”→“播放时间轴”菜单命令，弹出如图所示的“播放时间轴”对话框。第八步：在“播放时间轴”的下拉列表框中选择“Timelilne1”，单击“确定”按钮，到此就制作完成了“新书快讯”的弹出动画。第九步：重复第三至第八步的操作，给第2个热区添加通过onClick时间触发的上述3个动作，在添加“显示-隐藏层”动作时，设置层Layer2显示，其他层隐藏，时间轴动作的设置与第1个热区相同。第十步：给剩余的3个热区添加上述的行为，按F12预览动画的效果。设置页面左边距为0的目的，是在播放动画时，不会让页面左边的空隙破坏动画的效果，当然也可以在页面左边插入一个不透明的层，使它叠放在layer1上面来遮挡lay