《07动态效果显示层教学课件 高教版 中职 网页设计与制作（Dreamweaver CS5） .ppt》由会员分享，可在线阅读，更多相关《07动态效果显示层教学课件 高教版 中职 网页设计与制作（Dreamweaver CS5） .ppt（6页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、07动态效果显示层教学课件 高教版 中职 网页设计与制作（Dreamweaver CS5）动态效果显示层静态网站制作教学资源课件静态网站制作教学资源课件当鼠标在网页的某个图片或文字对象上滑动时，使用Dreamwever的行为可以实现该段文字或图像动态效果显示，比如增大、缩小等。实例实例8：如图所示，当鼠标移到左侧第一个图片时，该图片宽度和高度都压缩至50%，当鼠标移开时再动态恢复成原状，所需素材在资料包中提供。1、在练习站点里，先新建如上图所示的网页，即先在网页中插入2行1列900像素宽的表格，再在第二行的单元格中插入2行5列宽度100%的布局表格。2、将插入点光标移到第二个布局表格第二行左侧
2、第一单元格中，单击“插入”菜单“布局对象”中的“Div标签”命令。3、打开“插入Div标签”对话框，在“插入：”列表框中选择“在插入点”，在“ID”列表框中输入“tu1”，单击“确定”按钮，并删掉网页中反相显示的“此处显示 id tu1 的内容”，在新插入的图层“tu1”中插入“images/1.jpg”。4、在任务栏中选中“div#tu1”，打开“行为”面板，单击添加动作钮从如图所示的“动作”菜单中选择“效果”中的“增大/收缩”，打开“增大/收缩”对话框，并按如图5.26所示进行设置。5、单击“确定”按钮，给图层“tu1”添加了一个“收缩”动作，在“行为”面板上将“收缩”效果动作的响应事件修改为“onmouseover”。6、继续给图层“tu1”添加“增大”动作，并将“增大”效果动作的响应事件修改为“onmouseout”增大效果设置如图5.27所示。因为是将已经缩小以为50%的图片增大为100%，所以这里“增大自：”100%，“增大到：”200%