人教版九年级上册信息技术课件 6 制作菜单 .pptxVIP

制作菜单　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。　第六步：用鼠标连续单击**按钮可以看到动画的效果。说明　第一，“时间轴”面板的最大特点是中间有一条横向的时间轴，上面标有均匀的刻度，单位是“帧”。红色的矩形块称为放音磁头，它所在的部位代表当前帧。第二，“时间轴”面板上端是一些动画属性设置、播放按钮。各按钮的功能如下：栏：设置动画的名称。按钮：返回到动画的第一帧。“Fps”栏：设置动画的播放速度，单位是帧/秒，默认的值是15。按钮和 按钮：单击按钮将后退或前进1帧。“自动播放”复选框：设置是否在页面载入时就开始播放动画。“循环”复选框：设置是否循环播放。2.创建图形热区链接　页面左页是一幅完整的图形，上面的文字能否做链接呢？其实很简单，只要在图形中创建一些热区，并在每个热区上建立相应的链接就行了。做一做 创建图形热区链接。操作步骤　第一步：选中页面左边的图片，单击“属性”面板中的“矩形热点工具”按钮，在图中的“新书快讯”上面一个大小合适的矩形正好盖住图中的文字，如图所示。　第二步：在“属性”面板中的“地图”栏输入“map1”，作为该热区的名称。　第三步：选中热区，“属性”面板中显示如图所示的热区属性。　第四步：在“链接”框中输入“#”表示空链接，在“替代”框中输入该热区的引导文字。　第五步：分别在图片中的“名车欣赏”、“畅销书屋