工信版（中职）网页设计与制作项目十一应用网页特效电子课件.pptx

《工信版（中职）网页设计与制作项目十一应用网页特效电子课件.pptx》由会员分享，可在线阅读，更多相关《工信版（中职）网页设计与制作项目十一应用网页特效电子课件.pptx（22页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、YCF（中职）网页设计与制作项目十一应用网页特效电子课件=项目十一 应用网页特效=任务一 设置文字动态效果=网页特效网页特效，是用程序代码在网页中实现的特殊效果或者特殊的功能的一种技术，是用网页脚本(javascript,vbscript)来编写制作动态特殊效果。可概括总结为以下几个特点：1.是一种脚本编写语言2.基于对象的语言3.简单性4.安全性5.动态性6.跨平台性=Marquee标签Marquee是一个“滚动字幕”的标签，前期专门用于IE浏览器，近几年，火狐浏览器和谷歌浏览器。语法：=Marquee标签align（设置内容的对齐方式）behavior（设置滚动方式）bgcolor（设置活

2、动字幕的背景颜色）direction（设置活动字幕的滚动方向）height（设置活动字幕的高度）width（设置活动字幕的宽度）hspace（设置活动字幕里所在的位置距离父容器水平边框的距离）vspace（设定活动字幕里所在的位置距离父容器垂直边框的距离）loop（设定滚动的次数，当loop=-1表示一直滚动下去，默认为-1）scrollamount（设定活动字幕的滚动速度，单位pixels）scrolldelay（设定活动字幕滚动两次之间的延迟时间）=案例1=自主练习利用marquee标签实现如下效果：黄色文字（#f3fb1c），蓝色底（#111fdf），文字由左到右循环滚动，预览之后请将截

3、图放在下表中。【练习1】效果截效果截图=任务二 了解网页制作方法=网页行为行为其实是一种运行在浏览器中的JavaScript（脚本语言），设计者将其放置在网页文档中，以允许浏览者与网页进行交互，从而以多种方式更改页面或触发某些动作。行为由动作和触发动作的事件组成。添加行为触发事件常用的行为动作动作名称作名称所所对应作用作用弹出信息出信息使用“弹出消息”动作可以设置一个带有指定消息的JavaScript警告框。因为 JavaScript 警告框只有一个“确定”按钮，所以使用此动作仅仅能提供信息而不能使用户做出选择。打开打开浏览器窗口器窗口使用“打开浏览器窗口”动作可以在一个新窗口中打开 URL，

4、并指定新窗口的属性，包括窗口大小、是否可调整大小、是否具有菜单栏及名称等。例如，可以使用此行为在访问者单击缩略图时在一个单独的窗口中打开一个较大的图像。改改变属性属性使用“改变属性”动作可以更改对象的某个属性值，例如样式、颜色、大小、层的背景颜色或表单的动作等。效果效果可以设置对象增大/收缩、挤压、显示/渐隐、晃动、滑动、遮帘、高亮颜色等效果。显示示隐藏藏层“显示隐藏层”动作可以显示、隐藏或恢复一个或多个层的默认可见性。此动作用于在用户与页进行交互时显示信息。常见行为事件事件事件应用用对象象说明明Onblur按钮、链接、文本框等从当前对象移开焦点时Onclick所有元素单击对象时OnDbcli

5、ck所有元素双击对象时Onerror图像、页面等载入图片出错时Onfocus按钮、链接、文本框等当前对象得到焦点时Onkeydown链接图像、文字等键盘任意键处于按下状态时Onkeypress链接图像、文字等键盘任意键按下时Onkeyup链接图像、文字等键盘任意键释放时Onmousedown链接图像、文字等在对象区域按下鼠标键时Onmousemove链接图像、文字等鼠标指针在对象区域内移动时Onmouseout链接图像、文字等鼠标指针离开对象区域时Onmouseover链接图像、文字等鼠标指针指向对象区域时Onmouseup链接图像、文字等在对象区域释放按下的鼠标键时Onunload主页面等离

6、开页面时=案例2在图11-2-9中，图片的注释内容在页面加载时隐藏（近显示汽车图片），当鼠标经过图片时显示，移开鼠标后消失。请试着实现图片效果。【练习2】=任务三 使用AP DIV制作下拉菜单=AP DIVAP元素，即绝对定位元素，是指在网页中具有绝对位置的页面元素。AP DIV又称为层，是HTML网页的一种元素，可以放置在网页上的任意位置，是网页中的一个区域，一个网页中可以有多个层存在，且可以重叠。表11-div和ap div的区别DivAPDiv在当前位置插入固定在当前位置插入固定层在当前位置插入可移动层一一般般情情况况下下，进行行HTML页面面布布局局时，都是使用，都是使用DIV+CSS只有在特殊情况下，如需要在Div中制作重叠的层时，才会用到AP Div元素。=案例3=案例4请试着脱离教程，实现使用AP DIV制作下拉菜单的效果。【练习3】=谢谢