欢迎来到天天文库
浏览记录
ID:15538903
大小:37.50 KB
页数:2页
时间:2018-08-03
《实验八 制作spry菜单栏和应用增大收缩效果》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库。
1、实验八制作Spry菜单栏和应用增大/收缩效果【实验目的】1.掌握创建Spry下拉菜单的方法。2.掌握Spry应用增大/收缩效果。【实验环境】1.工具软件:DreamweaverCS62.按照本实验提供的网页,制作相同的网页。【实验内容】1.按照本实验提供的网页,制作相同的网页。2.练习创建Spry下拉菜单和Spry应用增大/收缩效果。【实验步骤】1.创建本地站点,保存在本站点下(例如:“E:mysite”)。2.新建一个HTML文件,选择“插入”面板中的“Spry”栏,单击“Spry菜单栏”工具,选择水平排列的菜单栏。3.对菜单栏中的每个项目进行设
2、置,在页面中选择“Spry菜单栏;MenuBar1”蓝色的标识,这样就会直接在属性检查器中显示当前项目的相关设置。从属性检查器中可以看到,用户一共可以为菜单栏设置三级菜单。选择其中一项菜单,可以在右边进行链接网页的设置。4.将其中一个菜单选中,然后在属性检查器中对该菜单的基本属性进行设置。5.保存文件。6.选择“在浏览器中预览”或按F12预览,观察网页设计效果。如不满意,则修改网页设计,再预览观察网页设计效果,直到满意为止。【实验步骤】1.创建本地站点,保存在本站点下(例如:“E:mysite”)。2.新建一个HTML文件,选择“插入”面板中的“布
3、局”栏,单击“插入Div标签”工具,插入一个Div标签,在弹出的对话框中命名Div的ID为“myEffect”。3.单击“新建CSS规则”按钮,以ID为规则名称新建样式,设置字体大小为14px,背景颜色为#FFF4F4,宽为500px,padding为20px,margin为40px,边框为实线solid,边框宽为2px,边框的颜色为#CCCCCC。4.在Div中插入一张图片,设置图片样式左浮动(float:left),输入一段文字,并保存文件。5.将光标定位于文档中,调出“行为”面板(执行“窗口->行为”命令),单击“加号”(+)按钮,从弹出的下拉
4、列表框中选择“效果->增大/收缩”选项。在弹出的“增大/收缩”对话框中,设置相关选项。6.在“增大/收缩”对话框中,选择目标元素为“div‘myEffect’”,效果持续时间为“1000毫秒”,效果为“收缩”,输入收缩到值为“50%”,收缩到方式为“居中对齐”,并且选中“切换效果”复选框。执行菜单命令“文件->保存全部”保存所有文件。7.选择“在浏览器中预览”或按F12预览,查看预览效果。我们可以看到当单击Div中任意区域时,内容会收缩到50%,再单击一下又恢复原貌。
此文档下载收益归作者所有