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