《网页设计与制作实例教程》第8章（王军）ppt课件（全）.ppt

《《网页设计与制作实例教程》第8章（王军）ppt课件（全）.ppt》由会员分享，可在线阅读，更多相关《《网页设计与制作实例教程》第8章（王军）ppt课件（全）.ppt（31页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、清华大学出版社 网页设计与制作实例教程第8章高等学校计算机应用规划教材添加网页特效 2022-5-12主编 方其桂一个优秀的网站，不仅需要搭建合理的结构，丰富一个优秀的网站，不仅需要搭建合理的结构，丰富多彩的内容，得当的网页特效会使得网站更加吸引人。多彩的内容，得当的网页特效会使得网站更加吸引人。Dreamweaver CS6Dreamweaver CS6中提供了通过网页行为、中提供了通过网页行为、APAP元素和元素和SprySpry构件等来添加网页特效，使用简单方便，效果明显。构件等来添加网页特效，使用简单方便，效果明显。本章通过实例，介绍各种网页特效的效果和添加网本章通过实例，介绍各种网页

2、特效的效果和添加网页特效的方法。页特效的方法。内容提要使用网页行为添加网页特效使用网页行为添加网页特效使用使用AP元素增加网页特效元素增加网页特效使用使用Spry构件增强视觉效果构件增强视觉效果010203章节目录内容提要教学内容Dreamweaver CS6中的行为命令，实际上就是一系列具有特定功能的JavaScript程序脚本。一个完整的行为，需要包括“事件”和“动作”才能运行。“事件”是指在计算机上发生的一些操作；而“动作”则是指在发生了事件后，所触发并执行的一系列处理动作。教学内容实例1 交换位图选择2张图片，一张做为初始图像显示在网页中，当鼠标单击图像时，图像变成另一张图片，当鼠标离

3、开图像显示范围时，图像又恢复到初始图像，本例中交换图像后的效果如下图所示教学内容实例2 弹出信息 给图像设置“弹出信息”行为，当用户在当前图像区域单击图像时，触发“弹出信息”行为，以窗口形式显示信息内容，效果如图8-4所示。教学内容实例3 打开浏览器窗口 对网页中的图像设置“打开浏览器窗口”动作，单击图像触发事件，打开指定网页。如图8-6(a)所示为网页显示效果，图8-6(b)所示为单击图片后显示的打开指定浏览器窗口效果。教学内容实例4 增大/收缩效果 对网页中的图像设置“效果”行为，设置单击图像时图像增大200%，鼠标离开图像区域后，恢复图像比率。如图8-8(a)所示是一幅有待处理的图像，图

4、8-8(b)所示是一个处理完成的图像。教学内容实例5 晃动效果 Dreamweaver CS6效果行为中“晃动效果”经常用于网页中，通过晃动指定对象，达到引起用户的注意。 设置“晃动效果”首先要指定对象，再在行为列表中“效果”选项中设置“晃动”，最后设置行为触发动作。用户浏览网页是触发相关动作后，指定图像立即晃动以引起用户的注意。教学内容知识库1Dreamweaver CS6行为行为 在Dreamweaver CS6中对象行为种类众多，作用各不相同，表8-1罗列出Dreamweaver CS6行为的动作名称和动作的功能。动作名称动作名称动作的功能动作的功能交换图像交换图像发生事件后，用其他图像

5、来取代选定的图像弹出信息弹出信息设置事件发生后，弹出窗口显示信息恢复交换图像恢复交换图像设置事件后，恢复先前已经交换的图像打开浏览器窗口打开浏览器窗口在新窗口中打开URL，可以定制窗口大小拖动拖动AP元素元素设置鼠标可以拖动相应的apDiv元素改变属性改变属性改变选定对象的属性效果效果设置对象显示效果，分别有增大/收缩、挤压、显示/渐隐、晃动、滑动、遮帘和高亮颜色7种效果显示显示-隐藏元素隐藏元素根据设定的事件，显示或隐藏指定的内容检查插件检查插件检查当前设备是否具备相应的插件检查表单检查表单检查当前网页是否具有指定的表单设置文本设置文本在指定的内容中显示相应的内容，分为设置层文本、设置框架文

6、本、设置文本域文本和设置状态栏文本教学内容知识库2网页特效网页特效 网页特效是用程序代码在网页中实现的特殊效果或者特殊的功能的一种技术，是用网页脚本(javascript,vbscript)来编写制作动态特殊效果。它为网页活跃了网页的气氛，有时候会起到一定的亲切力。 它一般分为：时间日期类、页面背景类、页面特效类、图形图象类 、按钮特效类、鼠标事件类、Cookie脚本、文本特效类、状态栏特效、代码生成类、导航菜单类、页面搜索类、在线测试类、密码类、技巧类、综合类和游戏类等等。 Dreamweaver CS6中的AP 元素（绝对定位元素）是分配有绝对位置的 HTML 页面元素，具体地说，就是 d

7、iv 标签或其他任何标签。AP 元素可以包含文本、图像或其他任何可放置到 HTML 文档正文中的内容。实例6 拖动元素 AP Div在Dreamweaver CS6中拥有绝对位置，在网页中先插入AP Div为对象设置好位置，再在AP Div中插入对象。要想实现鼠标拖动效果，就要为AP Div在行为中设置“拖动AP元素”效果。 制作时应先在网页中插入AP Div，再设置AP Div行为效果。实例7 切换元素 本例通过对多个AP元素添加鼠标响应的行为命令，实现控制AP元素的显示与隐藏，从而达到不同AP元素间的切换效果，如图8-15(a)所示为网页显示效果，图8-15(b)所示为单击图片后显示的打开

8、指定浏览器窗口效果。实例8 分割AP元素 本例中将介绍在Dreamweaver CS6中通过AP元素将分割成4份的图像完整的显示在网页中，以加快图像的显示效果。图8-19显示的是4幅由AP元素构成的一张完整的图像。 制作前，先用图像处理软件将大图像分割成4个小图像，然后在Dreamweaver CS6中插入4个AP元素，分别在这4个AP元素中插入4个小图像。设定好各AP元素的位置后，即可在浏览器中显示完整的图像。实例9 热点链接 本例中将在中国地图中制作“北京天气预报”链接，通过鼠标单击地图中的北京所在位置，在新的页面显示“北京天气预报”。如图8-22(a)所示是单击前效果，图8-22(b)所

9、示是单击后新的页面显示的效果。知识库1AP元素 Dreamweaver中，AP 元素（绝对定位元素）是分配有绝对位置的 HTML 页面元素，具体地说，就是 div 标签或其他任何标签。AP 元素可以包含文本、图像或其他任何可放置到 HTML 文档正文中的内容。 通过 Dreamweaver，用户可以使用 AP 元素来设计页面的布局。可以将 AP 元素放置到其他 AP 元素的前后，隐藏某些 AP 元素而显示其他 AP 元素，以及在屏幕上移动 AP 元素。可以在一个 AP 元素中放置背景图像，然后在该 AP 元素的前面放置另一个包含带有透明背景的文本的 AP 元素。 AP 元素通常是绝对定位的 d

10、iv 标签，可以将任何 HTML 元素（例如，一个图像）作为 AP 元素进行分类，方法是为其分配一个绝对位置。所有 AP 元素都将在“AP 元素”面板中显示。知识库2AP Div布局 AP Div是HTML中的重要组成元素之一，网页可以通过AP Div实现对页面的规划和布局。div元素是一个块元素，在其中间可以包含文本、段落、表格、章节等复杂的内容。 在页面中使用div标记的的语法格式如下所示：中间部分标记中的常用参数如下：class:本HTML文件范围内的标识符class类；lang:语言信息，dir:文字方向onclick和ondblclick等：鼠标和键盘键各种事件发生时处理方法的定义。

11、 在Dreamweaver CS6中添加网页菜单特效，当用户选中一个菜单选项后，该选单会向下延伸出具有其他选项的另一个选单或链接打开菜单所对应的网页。Dreamweaver CS6提供了两种菜单栏构件：水平菜单栏构件和垂直菜单栏构件。实例10 创建菜单 本案例向我们展示了网页中的菜单创建与修改，在Dreamweaver CS6中Spry构件提供了“Spry菜单栏”选项，利用这一选项可轻松在网页中创建菜单，图8-26就是应用“Spry菜单栏”选项创建的菜单。 制作时应先在在Dreamweaver CS6中插入布局对象中的“Spry菜单栏”，再通过属性面板修改菜单选项即可。实例11 编辑菜单 本案

12、例向我们展示了在Dreamweaver CS6中插入“Spry菜单栏”选项后，根据网页设计需要，编辑菜单栏以达到满意效果，效果如图8-29所示。 制作时应先在Dreamweaver CS6中插入布局对象中的“Spry菜单栏”，再通过“属性”面板编辑菜单选项即可。实例12 选项特效 本例通过在Dreamweaver CS6中插入“Spry选项卡面板”，运用“北京申办2022年冬季奥运会”案例，介绍北京申办2022年冬季奥运会相关知识，向读者介绍申办2022年冬季奥运会过程中一些知识，效果如图8-33所示。 制作本案例时，行在Dreamweaver CS6中插入“Spry选项卡面板”，并根据知识内

13、容需要添加或删除选项卡数量，然后修改各选项卡标题内容，输入选项卡正文内容。实例13 折叠效果 本例中将继续以2022北京冬奥会内容为例，介绍在Dreamweaver CS6中使用“Spry折叠式”选项实现网页如图8-36所示折叠效果。 制作本案例时，行在Dreamweaver CS6中插入“Spry折叠式”，并根据知识内容需要添加或删除选项卡数量，然后修改各选项卡标题内容，输入选项卡正文内容。实例14 可折叠效果 本例中将在以Dreamweaver CS6知识内容为案例，讲解Dreamweaver CS6中“Spry可折叠面板”的使用，效果如图8-39所示。 制作本案例时，行在Dreamwea

14、ver CS6中插入“Spry可折叠面板”，并根据知识内容需要确定面板的折叠或显示效果，然后修改各选项卡标题内容，输入选项卡正文内容。如果是多项折叠内容，需要多次插入“Spry可折叠面板”选项方可。知识库1Spry Spry 框架是一个JavaScript 库，用户使用它可以构建能够向站点访问者提供更丰富体验的 Web 页。有了 Spry，就可以使用 HTML、CSS 和极少量的 JavaScript 将XML 数据合并到 HTML 文档中，创建构件（如折叠构件和菜单栏），向各种页面元素中添加不同种类的效果。 在设计上，Spry 框架的标记非常简单且便于那些具有 HTML、CSS 和 Java

15、Script 基础知识的用户使用。Spry 框架主要面向专业 Web 设计人员或高级非专业 Web 设计人员。Spry可以使用XML和JSON两种格式的数据源。知识库2查看网页特效源代码 当发现一个网页制作特效非常好，想查看网页特效源代码时，可按图8-42所示操作，查看网页源代码。 本章主要介绍了添加网页特效所必须具备的基础知识，具体包括以下主要内容。 使用网页行为添加网页特效：详细介绍了在网页中给特定对象添加行为，实现对象的特殊效果，详细介绍了各种行为的应用，通过设置行为参数，增加网页特效的多样化。 使用AP元素增加网页特效：介绍了在网页中通过对AP Div标签特效处理，详细介绍了AP Di

16、v标签的使用，以及运用行为特效实现网页特效。 作用Spry构件增强视觉效果：详细介绍了使用Spry构件实现菜单、选项卡、折叠和可折叠4种网页特效，通过案例操作，分部讲解，使Spry构件由浅入深地展示在学习者面前。一、填空题一、填空题1. 在浏览网页时，当用户将鼠标指针移到文字或图像上时，鼠标指针会改变形状或颜 色，这就是在提示浏览者，此对象为_。2. 鼠标经过图像的效果由两张大小相等的图像组成，一张成为主图像，另一张称为次 图像。_是首次载入网页时显示的图像，_是当鼠标指针经过时更换的另一 张图像。3. _是网页中的一个区域，并且游离在文档之上。利用层可精确定位和重叠网页 元素。4. 文档窗口

17、中有3种视图方式，分别是_、_、_。5. _是网页设计中一个非常有用的工具，它不仅可以将相关数据有序地排列在一 起，还可以精确地定位文字、图像等网页元素在页面中的位置，使得页面在形式上 丰富多彩又条理清楚，在组织上井然有序而不显单调。二、选择题二、选择题1. 通过Dreamweaver CS6的导入和导出站点的功能，站点导出的文件格式为（ ） A . *.html B. *.ste C .*.gif D. *.css2. 以下操作能实现连续输入空格的是 （ ） A . 选择“编辑”“首选参数”在常规选项卡中选择“允许多个连续的空格”复 选框 B. 选择“插入”“HMTL”“特殊字符”“不换行空

18、格”命令 C. 按住快捷键 Ctrl + Shift + Space D. 连续按多个空格键 3. 下列关于层的说法错误的是 （ ） A . 层中可以嵌套层 B . 层可以重叠 C . 重叠的层可以转换成表格 D . 层上可以设置文本、对象和表格 4. 在Dreamweaver CS6中，可以为图像创建热点，下面哪些热点属性不可以进行设置（ ） A . 热点的形状 B . 热点的位置 C . 热点的大小 D . 热点区鼠标的灵敏程度 5. 如果要在布局模式中绘制单元格，则下列说法不正确的是 （ ） A . 创建的单元格不能相互交叉 B . 绘制后的单元格可以任意调整大小和位置 C . 不能脱离表格而独立存在 D. 如果在页面的空白区域绘制单元格，则会自动产生一个表格作为单元格的容器 三、问答题三、问答题1. 简述添加网页特效的方法。2. 简述网页行为的种类。3. 请分析行为中效果选项的各项功能。4. 简述使用Spry构件添加网页特效。5. 请分析新浪网的网页特效。 谢谢使用！联系信箱：清华大学出版社 网页设计与制作实例教程高等学校计算机应用规划教材