项目十一 应用网页特效（课件）- 高一《网页设计与制作》同步教学（机工版·2018）

项目十一 应用网页特效 > = = 任务一 设置文字动态效果 = 网页特效 网页特效，是用程序代码在网页中实现的特殊效果或者特殊的功能的一种技术，是用网页脚本(javascript,vbscript)来编写制作动态特殊效果。可概括总结为以下几个特点： 1.是一种脚本编写语言 2.基于对象的语言 3.简单性 4.安全性 5.动态性 6.跨平台性 = 3 Marquee标签 Marquee是一个“滚动字幕”的标签，前期专门用于IE浏览器，近几年，火狐浏览器和谷歌浏览器。 语法： <marquee> </marquee> = Marquee标签 align（设置内容的对齐方式） behavior（设置滚动方式） bgcolor（设置活动字幕的背景颜色） direction（设置活动字幕的滚动方向） height（设置活动字幕的高度） width（设置活动字幕的宽度） hspace（设置活动字幕里所在的位置距离父容器水平边框的距离） vspace（设定活动字幕里所在的位置距离父容器垂直边框的距离） loop（设定滚动的次数，当loop=-1表示一直滚动下去，默认为-1） scrollamount（设定活动字幕的滚动速度，单位pixels） scrolldelay（设定活动字幕滚动两次之间的延迟时间） = 案例1 = 6 自主练习 = 利用marquee标签实现如下效果：黄色文字（#f3fb1c）， 蓝色底（#111fdf），文字由左到右循环滚动，预览之后 请将截图放在下表中。 【练习1】 效果截图                       任务二 了解网页制作方法 = 网页行为 行为其实是一种运行在浏览器中的JavaScript（脚本语言），设计者将其放置在网页文档中，以允许浏览者与网页进行交互，从而以多种方式更改页面或触发某些动作。行为由动作和触发动作的事件组成。 = 10 添加行为 触发事件 常用的行为动作 动作名称 所对应作用 弹出信息 使用“弹出消息”动作可以设置一个带有指定消息的JavaScript警告框。因为 JavaScript 警告框只有一个“确定”按钮，所以使用此动作仅仅能提供信息而不能使用户做出选择。 打开浏览器窗口 使用“打开浏览器窗口”动作可以在一个新窗口中打开 URL，并指定新窗口的属性，包括窗口大小、是否可调整大小、是否具有菜单栏及名称等。例如，可以使用此行为在访问者单击缩略图时在一个单独的窗口中打开一个较大的图像。 改变属性 使用“改变属性”动作可以更改对象的某个属性值，例如样式、颜色、大小、层的背景颜色或表单的动作等。 效果 可以设置对象增大/收缩、挤压、显示/渐隐、晃动、滑动、遮帘、高亮颜色等效果。 显示－隐藏层 “显示－隐藏层”动作可以显示、隐藏或恢复一个或多个层的默认可见性。此动作用于在用户与页进行交互时显示信息。 常见行为事件 事件 应用对象 说明 Onblur 按钮、链接、文本框等 从当前对象移开焦点时 Onclick 所有元素 单击对象时 OnDbclick 所有元素 双击对象时 Onerror 图像、页面等 载入图片出错时 Onfocus 按钮、链接、文本框等 当前对象得到焦点时 Onkeydown 链接图像、文字等 键盘任意键处于按下状态时 Onkeypress 链接图像、文字等 键盘任意键按下时 Onkeyup 链接图像、文字等 键盘任意键释放时 Onmousedown 链接图像、文字等 在对象区域按下鼠标键时 Onmousemove 链接图像、文字等 鼠标指针在对象区域内移动时 Onmouseout 链接图像、文字等 鼠标指针离开对象区域时 Onmouseover 链接图像、文字等 鼠标指针指向对象区域时 Onmouseup 链接图像、文字等 在对象区域释放按下的鼠标键时 Onunload 主页面等 离开页面时 案例2 = 14 在图11-2-9中，图片的注释内容在页面加载时隐藏（近显示汽车图片）， 当鼠标经过图片时显示，移开鼠标后消失。请试着实现图片效果。 【练习2】 任务三 使用AP DIV制作下拉菜单 = AP DIV AP元素，即绝对定位元素，是指在网页中具有绝对位置的页面元素。AP DIV又称为层，是HTML网页的一种元素，可以放置在网页上的任意位置，是网页中的一个区域，一个网页中可以有多个层存在，且可以重叠。 表11- div和ap div的区别 Div AP Div 在当前位置插入固定层 在当前位置插入可移动层 一般情况下，进行HTML页面布局时，都是使用DIV+CSS 只有在特殊情况下，如需要在Div中制作重叠的层时，才会用到AP Div元素。 = 17 案例3 = 18 案例4 = 19 请试着脱离教程，实