实验八 制作Spry菜单栏和应用增大收缩效果.doc

实验八制作Spry菜单栏和应用增大/收缩效果

【实验目的】
掌握创建Spry下拉菜单的方法。
掌握Spry应用增大/收缩效果。
【实验环境】
1.工具软件：DreamweaverCS6
2．按照本实验提供的网页，制作相同的网页。
【实验内容】
1．按照本实验提供的网页，制作相同的网页。
2．练习创建Spry下拉菜单和Spry应用增大/收缩效果。
【实验步骤】
1．创建本地站点，保存在本站点下（例如：“E:\mysite”）。
2．新建一个HTML文件，选择“插入”面板中的“Spry”栏，单击“Spry菜单栏”工具，选择水平排列的菜单栏。
3．对菜单栏中的每个项目进行设置，在页面中选择“Spry菜单栏；MenuBar1”蓝色的标识，这样就会直接在属性检查器中显示当前项目的相关设置。从属性检查器中可以看到，用户一共可以为菜单栏设置三级菜单。选择其中一项菜单，可以在右边进行链接网页的设置。
4．将其中一个菜单选中，然后在属性检查器中对该菜单的基本属性进行设置。
5．保存文件。
6．选择“在浏览器中预览”或按F12预览，观察网页设计效果。如不满意，则修改网页设计，再预览观察网页设计效果，直到满意为止。

【实验步骤】
1．创建本地站点，保存在本站点下（例如：“E:\mysite”）。
2．新建一个HTML文件，选择“插入”面板中的“布局”栏，单击“插入Div标签”工具，插入一个Div标签，在弹出的对话框中命名Div的ID为“myEffect”。
3．单击“新建CSS规则”按钮，以ID为规则名称新建样式，设置字体大小为14px，背景颜色为#FFF4F4，宽为500px，padding为20px，margin为40px，边框为实线solid，边框宽为2px，边框的颜色为#CCCCCC。
4．在Div中插入一张图片，设置图片样式左浮动（float:left），输入一段文字，并保存文件。
5．将光标定位于文档中，调出“行为”面板（执行“窗口->行为”命令），单击“加号”（+）按钮，从弹出的下拉列表框中选择“效果->增大/收缩”选项。在弹出的“增大/收缩”对话框中，设置相关选项。
6．在“增大/收缩”对话框中，选择目标元素为“div‘myEffect’”，效果持续时间为“1000毫秒”，效果为“收缩”，输入收缩到值为“50%”，收缩到方式为“居中对齐”，并且选中“切换效果”复选框。执行菜单命令“文件->保存全部”保存所有文件。
7．选择“在浏览器中预览”或按F12预览，查看预览效果。我们可以看到当单击Div中任意区域时，内容会收缩到50%，再单击一下又恢复原貌。