《网页设计与制作-电子教案-陈彦许 第4章 网页特效设计》由会员分享，可在线阅读，更多相关《网页设计与制作-电子教案-陈彦许 第4章 网页特效设计（38页珍藏版）》请在金锄头文库上搜索。
1、第4章 网页特效设计,【学习目标】,4.1 使用Spry框架构件,Spry在英语中是“充满生气的、活泼的、敏捷的”意思，Spry框架是一个JavaScript和CSS库，网页设计者使用Spry框架构建能够向站点访问者提供更丰富体验的网页。Spry框架中的每个构件都与唯一的CSS和JavaScript文件相关联。通过在网页中插入Spry框架，网页设计者可以使用HTML、CSS和JavaScript将数据合并到HTML文档中，向各种不同页面元素添加不同的效果。在Dreamweaver中使用Spry框架，Dreamweaver会自动将这些文件进行关联，通过Dreamweaver属性栏设置Spry的相
2、关参数，实现可视化编程。,Spry,4.1,4.1 使用Spry框架构件,4.1.1 使用Spry菜单栏构件,插入菜单栏构件。新建站点后，新建一个网页文件，将光标放在文件窗口中，在“插入面板”的“布局”或“Spry”类别中，单击“Spry菜单栏”按钮，在弹出的对话框中选择“水平”布局，即可插入水平的菜单栏构件，如图所示。,Step1,4.1 使用Spry框架构件,4.1.1 使用Spry菜单栏构件,编辑菜单栏构件。在文件窗口中单击“Spry菜单”构件上方的蓝色选择柄，就可以选中该菜单栏构件。此时在Dreamweaver的属性面板中可以设置菜单栏构件的属性（参数）。如图所示。单击面板右侧的“+”
3、和“-”可以增加或删除标签；选中相应的标签，单击面板右侧的箭头可以设置各标签的顺序。在属性面板右侧的“文本”中设置选中项目的文本，在“链接”中设置对应的链接地址。 在属性面板中单击左侧的“+”将标签的数量增加到7个，并在文件窗口中修改标签分别分：“软件工程系”、“网络工程系”、“数字传媒系”、“智能工程系”、“信息工程系”、“经济管理系”、“社会科学系”。在选中“数字传媒系”的情况下，单击属性面板中右侧的“+”，加入三个子项目，分别设置其文本内容为“动漫设计与制作专业”、“图形图像制作专业”、“计算机多媒体专业”，如图所示。,Step2,4.1 使用Spry框架构件,4.1.1 使用Spry菜
4、单栏构件,用同样的方法，设置其它项目（如软件工程系、网络工程系）对应的子项目及内容。,Step3,保存网页，系统会自动将关联的JavaScript等文件拷贝到站点根目录。预览网页的结果如图所示，当鼠标悬停在“数字传媒系”上时，会弹出子菜单。,Step4,4.1 使用Spry框架构件,4.1.2 使用Spry折叠式构件,插入折叠式构件。新建站点后，新建一个网页文件，将光标放在文件窗口中，在“插入面板”的“布局”或“Spry”类别中，单击“Spry折叠式”按钮，即可插入折叠式构件，如图所示。,Step1,4.1 使用Spry框架构件,4.1.2 使用Spry折叠式构件,编辑折叠式构件。在文件窗口中
5、单击“Spry折叠式”构件上方的蓝色选择柄，就可以选中该折叠式构件。此时在Dreamweaver的属性面板中可以设置折叠式构件的属性“参数”。单击面板右侧的“+”和“-”可以增加或删除标签；选中相应的标签，单击面板右侧的箭头可以设置各标签的顺序。在属性面板中单击“+”将标签的数量增加到7个，并在文件窗口中修改标签分别分：“软件工程系”、“网络工程系”、“数字传媒系”、“智能工程系”、“信息工程系”、“经济管理系”、“社会科学系”。,Step2,输入标签对应的内容。可以在“标签1”对应的“内容1”中输入文本、图像、表格、超链接等网页元素。当光标移到“标签2”左侧时，会出现一个大眼睛的图标，单击即
6、显示“标签2”对应的“内容2”，同时隐藏“标签1”对应的“内容1”。在第二步的基础上，在标签“软件工程系”对应的内容中输入“软件开发专业、对日软件专业、移动软件专业”，在标签“数字传媒系”对应的内容中输入“动漫设计与制作专业、图形图像制作专业、计算机多媒体专业”，依此类推，在其它选项卡中也输入相应的专业名称。,Step3,4.1 使用Spry框架构件,4.1.2 使用Spry折叠式构件,保存网页，系统会自动将关联的JavaScript等文件拷贝到站点根目录。显示结果如图所示。单击“数字传媒系”标签，则隐藏其它标签内容，显示“数字传媒系”对应的内容。,Step2,4.1 使用Spry框架构件,4
7、.1.3 使用Spry选项卡式面板构件,插入选项卡式面板构件。新建站点后，新建一个文件，将光标放在文件窗口中，在“插入面板”的“布局”或“Spry”类别中，单击“Spry选项卡式面板”按钮，即可选项卡式面板构件，如图所示。,Step1,4.1 使用Spry框架构件,4.1.3 使用Spry选项卡式面板构件,编辑选项卡式面板构件。在文件窗口中单击“Spry选项卡式面板”构件上方的蓝色选择柄，就可以选中该构件。此时在Dreamweaver的属性面板中可设置折叠式构建的属性“参数”。单击面板右侧的“+”和“-”可以增加或删除标签；选中相应的标签，单击面板右侧的箭头可以设置各标签的顺序。在属性面板中单
8、击“+”将标签的数量增加到7个，并在文件窗口中修改标签分别分：“软件工程系”、“网络工程系”、“数字传媒系”、“智能工程系”、“信息工程系”、“经济管理系”、“社会科学系”。,Step2,输入标签对应的内容。我们可以在“数字传媒系”中输入文本、图像、表格、超链接等网页元素。在第二步的基础上，在标签“软件工程系”对应的内容中输入“软件开发专业、对日软件专业、移动软件专业”，在标签“数字传媒系”对应的内容中输入“动漫设计与制作专业、图形图像制作专业、计算机多媒体专业”，依此类推，在其它选项卡中也输入相应的专业名称。,Step3,4.1 使用Spry框架构件,4.1.3 使用Spry选项卡式面板构件
9、,保存网页，系统会自动将关联的JavaScript等文件拷贝到站点根目录。显示结果如图4-7所示。单击“数字传媒系”标签，则隐藏其它标签内容，显示“数字传媒系”对应的内容。,Step4,4.2 行为,4.2.1 设置行为,在工作窗口中选择标签（实际上不选择任何网页元素就是选择了标签），这一步选择了行为的对象。,Step1,在行为面板中单击“+”号右侧的箭头，在出现的下拉菜单中选择动作“打开浏览器窗口”，弹出“打开浏览器窗口对话框”，如图4-9所示；在“要显示的URL”中选择要打开的网页的地址，单击“确定”。,Step2,4.2 行为,4.2.1 设置行为,在行为面板中选择事件为unUnload
10、（当访问者离开网页时）。,Step3,保存并预览网页；如图4-10所示，当关闭网页时，会弹出一个新的窗口，如图所示。,Step4,4.2 行为,4.2.2 常用的事件及行为,常用的行为如下： onClick：当访问者在指定的元素上单击时； onDblClick：当访问者在指定的元素上双击时； onError：当浏览器在网页或图像载入产生错误时； onKeyDown：当在键盘上按任意键时； onKeyUp：当按下的键松开时； onKeyPress：当按下和松开任意键时； onLoad：当一图像或网页载入完成时； onUnload：当访问者离开网页时； onMouseDown：当访问者按下鼠标时；
11、 onMouseUp：当按下的鼠标弹起时； onMouseMove：当访问者移动鼠标时； onMouseOver：当鼠标移动到指定元素时； onMouseOut：当鼠标离开某一元素时； onScroll：当访问者拖动浏览器的滚动条时； onSelect：当访问者选择指定元素时；,常用的行为如下： onClick：当访问者在指定的元素上单击时； onDblClick：当访问者在指定的元素上双击时； onError：当浏览器在网页或图像载入产生错误时 onKeyDown：当在键盘上按任意键时； onKeyUp：当按下的键松开时； onKeyPress：当按下和松开任意键时； onLoad：当一图像
12、或网页载入完成时； onUnload：当访问者离开网页时； onMouseDown：当访问者按下鼠标时； onMouseUp：当按下的鼠标弹起时； onMouseMove：当访问者移动鼠标时； onMouseOver：当鼠标移动到指定元素时； onMouseOut：当鼠标离开某一元素时； onScroll：当访问者拖动浏览器的滚动条时； onSelect：当访问者选择指定元素时；,4.3 插入多媒体对象,4.3.1 插入Flash动画,保存将光标放在要插入Flash动画的位置；,Step1,在插入面板中选择“常用”类别，在“媒体”右侧的小箭头的下拉菜单中选择“SWF”按钮，在弹出的对话框中选择
13、要插入的Flash文件（扩展名为.swf），单击“确定”完成插入操作，如图所示。,Step2,4.3 插入多媒体对象,4.3.1 插入Flash动画,在图4-12下方的属性面板中设置Flash动画的属性。 SWF，446K：表示此动画的大小为446KByte，在其下方的文本框内可以输入此动画的ID号，以便编写程序时调用； 宽和高：以像素为单位指定动画影片的宽度和高度； 文件：指定或显示SWF文件的路径； 源文件：指定源文件的路径（如果计算机上安装了Flash），若要编辑SWF文件，可更新影片的源文件，实现实时更新； 背景颜色：指定影片区域的背景颜色，在不播放动画时显示此颜色； 编辑：对SWF的
14、源文件（一般为fla格式）进行编辑，如果计算机上没安装Flash软件，此功能不可用； 类：为SWF文件指定CSS样式； 循环：使影片连续播放； 自动播放：在加载页面时自动播放； 垂直边距和水平边距：指定影片上、下、左、右空白的像素数； 品质：设置播放动画对象的质量； 比例：确定影片播放时的缩放比例； 对齐：指定对齐方式； Wmode：为SWF文件设置Wmode参数以避免与其它元素冲突； 播放：在文件窗口播放影片； 参数：设置影片的参数。,Step3,Step4,保存网页，预览网页。,4.3 插入多媒体对象,4.3.2 插入FlashPaper文件,采用word软件编辑要在网页中发布的内容.,S
15、tep1,从网上下载一个能够将word转Flash的软件，如FlashPaper。安装并打开后，将word文件直接拖放到FlashPaper软件中，保存生成SWF文件。,Step2,在插入面板中选择“常用”类别，在“媒体”右侧的小箭头的下拉菜单中选择“FlashPaper”按钮，在弹出的对话框中选择要插入的Flash文件（扩展名为.swf），单击“确定”完成插入操作，其属性设置与插入SWF动画完全相同。,Step3,保存网页并预览，如图所示。,Step4,4.3 插入多媒体对象,4.3.3 插入FLV视频,将光标放在要插入FLV文件的位置；,Step1,在插入面板中选择“常用”类别，在“媒体”
16、右侧的小箭头的下拉菜单中选择“FLV”按钮，弹出对话框。,Step2,4.3 插入多媒体对象,4.3.3 插入FLV视频,设置“插入FLV”对话框的相关选项。,Step3,视频类型：包括“累进式下载视频”和“流媒体”两种类型，根据需求进行选择。 URL：单击“浏览”按钮指定FLV文件的相对路径，也可以直接输入FLV文件的绝对路径（如http:/ 外观：指定视频组件的外观，在弹出的菜单的下方可以预览。 宽度和高度：以像素为单位指定FLV文件的尺寸。如果想使用FLV文件的原始尺寸，则单击“检测大小”按钮，则可以自动指定其宽度和高度。 自动播放：指定页面打开时是否自动播放。 自动重新播放：指定视频播放完成后是否重新播放。,4.3 插入多媒体对象,4.3.3 插入FLV视频,根据需求，在属性面板中对刚才设置的选项进行修改，也可以指定插入视频的CSS样式。如图所示。,Step4,保存网页，预览效果如图所示。,Step5,4
