网页设计与制作-电子教案-陈彦许第4章节网页特效设计.pptVIP

4.6 制作一个简单的网页拼图游戏 4.6.1 图片的准备 在Windows资源管理器中打开youxi文件夹，其中已生成一个网页文件，名称为index.html。在youxi文件夹下还生成了一个images文件夹，其中生成若干个（本例中生成了18个）被切割的图片，如图所示。 Step6 4.6 制作一个简单的网页拼图游戏 4.6.2 制作拼图游戏 打开Dreamweaver CS4，新建站点，将本地根文件夹设置为D盘的youxi文件夹，其它设置为默认设置。 Step7 打开youxi文件夹中的index.html（此文件由photoshop在切割图片并保存为WEB格式时自动生成），如图所示。 Step8 4.6 制作一个简单的网页拼图游戏 4.6.2 制作拼图游戏 将表格转换为AP Div元素。选择“修改”菜单中的“转换”，在其子菜单中选择“将表格转换为AP Div”命令，弹出如图所示对话框，按图中所示进行设置。设置完成后单击“确定”，在“AP元素”面板中生成了若干个AP元素（此实例中生成了18个AP元素）。 Step9 打开“行为”面板，在不选中任何元素的情况下（也可以选择body标签），单击“行为”面板中的“+”，添加“拖动AP元素”动作，弹出“拖动AP元素”对话框，如图所示。在该对话框中选择“AP元素”为div”apDiv1”，即设置第一个AP Div元素为“拖动AP元素”。 Step10 尚辅网 / 陈彦许 主编 陈维华 卢爱芹 副编著 第4章 网页特效设计 中国水利水电出版社 第4章 网页特效设计 【学习目标】 2.学会Spry构件的操作方法 3.学会使用行为面板设置网页特效 1.深入理解网页特效在网站中的点睛作用 5.学会下载常用的网页特效代码并插入到网页中 6.学会在网页中使用AP Div元素 4.学会在网页中插入Flash等媒体对象 4.1 使用Spry框架构件 Spry在英语中是“充满生气的、活泼的、敏捷的”意思，Spry框架是一个JavaScript和CSS库，网页设计者使用Spry框架构建能够向站点访问者提供更丰富体验的网页。Spry框架中的每个构件都与唯一的CSS和JavaScript文件相关联。通过在网页中插入Spry框架，网页设计者可以使用HTML、CSS和JavaScript将数据合并到HTML文档中，向各种不同页面元素添加不同的效果。在Dreamweaver中使用Spry框架，Dreamweaver会自动将这些文件进行关联，通过Dreamweaver属性栏设置Spry的相关参数，实现可视化编程。 Spry 4.1 4.1 使用Spry框架构件 4.1.1 使用Spry菜单栏构件 插入菜单栏构件。新建站点后，新建一个网页文件，将光标放在文件窗口中，在“插入面板”的“布局”或“Spry”类别中，单击“Spry菜单栏”按钮，在弹出的对话框中选择“水平”布局，即可插入水平的菜单栏构件，如图所示。 Step1 4.1 使用Spry框架构件 4.1.1 使用Spry菜单栏构件 编辑菜单栏构件。在文件窗口中单击“Spry菜单”构件上方的蓝色选择柄，就可以选中该菜单栏构件。此时在Dreamweaver的属性面板中可以设置菜单栏构件的属性（参数）。如图所示。单击面板右侧的“+”和“-”可以增加或删除标签；选中相应的标签，单击面板右侧的箭头可以设置各标签的顺序。在属性面板右侧的“文本”中设置选中项目的文本，在“链接”中设置对应的链接地址。 在属性面板中单击左侧的“+”将标签的数量增加到7个，并在文件窗口中修改标签分别分：“软件工程系”、“网络工程系”、“数字传媒系”、“智能工程系”、“信息工程系”、“经济管理系”、“社会科学系”。在选中“数字传媒系”的情况下，单击属性面板中右侧的“+”，加入三个子项目，分别设置其文本内容为“动漫设计与制作专业”、“图形图像制作专业”、“计算机多媒体专业”，如图所示。 Step2 4.1 使用Spry框架构件 4.1.1 使用Spry菜单栏构件 用同样的方法，设置其它项目（如软件工程系、网络工程系）对应的子项目及内容。 Step3 保存网页，系统会自动将关联的JavaScript等文件拷贝到站点根目录。预览网页的结果如图所示，当鼠标悬停在“数字传媒系”上时，会弹出子菜单。 Step4 4.1 使用Spry框架构件 4.1.2 使用Spry折叠式构件