网页设计与制作项目式PPT模块七_第1页
网页设计与制作项目式PPT模块七_第2页
网页设计与制作项目式PPT模块七_第3页
网页设计与制作项目式PPT模块七_第4页
网页设计与制作项目式PPT模块七_第5页
已阅读5页，还剩23页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

模块七制作特效网页

学习目标1.了解JavaScript相关知识2.能够实现简单JavaScript特效网页设计3.掌握行为的组成4.掌握常见的行为在网页中的使用方法任务1使用JavaScript制作网页特效

任务导入本任务是使用简单的JavaScript语句制作一个网页特效，实现能够控制网页文字显示的大小，效果如图7-1所示。

知识指导

JavaScript是一种面向对象的解释性脚本语言，使用它可以开发Internet客户端的应用程序。JavaScript在HTML页面中以语句的方式出现，在浏览器中执行，与平台无关。

一．JavaScript的特点1．基于对象的编程语言2．解释执行的脚本语言3．简单性4．动态性

5．跨平台性

6．安全性二．JavaScript基本语法1．语句：最基本单元，以“；”结束2.语句块：用“{

}”括起来的一个或n个语句。3.注释：单行注释：开头加上“//”多行注释：“/*…*/”4.区分大小写5.代码执行顺序首先执行的代码是<head>和</head>之间的代码，所以可以在这里定义变量或者函数供其它代码引用。之后<body>和</body>之间的代码按照出现的先后顺序由上而下执行。三．在网页中使用JavaScript1．创建JavaScript代码片段将JavaScript脚本放在<script></script>标记之间嵌入HTML代码中，其基本格式为：<scriptlanguage="JavaScript"type="text/javascript">JavaScript脚本代码</script>说明：放在<body></body>之间的脚本代码会作为页面内容的一部分被加载，可以向页面输出内容。而放在<head></head>之间的代码不可以向页面输出内容，通常用于定义变量或函数。

2．使用单独的JavaScript文件将大量的JavaScript脚本放入一个外部文件中，在需要的页面中加以引用。这样一方面实现了代码的重用性，另一方面提高了页面的加载速度。将外部JavaScript文件引入到当前页面： <head> <scriptlanguage="JavaScript"type="text/javascript"src="tx.js"></script> </head>说明：属性src是用来指定外部JavaScript文件的路径，JavaScript文件的扩展名为“js”。3．在属性值中使用JavaScript 还可以将JavaScript代码作为属性值使用，这通常用来响应某个事件，实现和用户的交互，如： <inputtype="button"name="button"value="按钮"onclick="alert('welcome!')"/> 当用户点击按钮时，就会执行在onclick属性指定的JavaScript脚本。任务2使用Dreamweaver内置行为制作网页特效

任务导入本任务是制作一个展示餐厅招牌菜的一个网页，当打开网页时，显示的是菜谱封面图片，如图所示。当鼠标经过菜品名称时，会在右边显示相应的图片，如图7-3所示。

知识指导一、行为概述

行为就是在网页中进行一系列的动作，通过这些动作，可以实现用户与网页的交互，也可以通过动作使某个任务被执行。一个行为由事件和动作组成。事件用于指明执行某项动作的条件，如鼠标移到对象上方、离开对象、单击对象、双击对象、定时等都是事件；动作通常由一段JavaScript代码组成，利用这段代码可以完成相应的任务，例如打开浏览器、播放声音等。

对象是产生行为的主体。二．事件、动作与行为面板1．主要的事件onClick：单击选定元素（如超链接、图片、图片影像、按钮）将触发该事件。onLoad：当图片或页面完成装载后触发该事件。onUnload：离开页面时触发该事件。

onMouseOut：当鼠标指针离开对象边界时触发该事件。onMouseOver：当鼠标首次移动指向特定对象时触发该事件。该事件通常用于链接。onMouseUp：当按下的鼠标键被释放时触发该事件。onSubmit：确认表单时触发该事件。2．主要的动作：交换图像：通过改变img标记的src属性，改变图像。利用该动作可创建活动按钮或其他图像效果。弹出信息：显示带指定信息的JavaScript警告。用户可在文本中嵌入任何有效的JavaScript功能如调用、属性、全局变量或表达式（需用“{}”括起来）。恢复交换图像：恢复交换图像至原图。打开浏览器窗口：在新窗口中打开URL，并可设置新窗口的尺寸等属性。拖动AP元素：可允许用户拖动AP元素。改变属性：改变对象属性值。效果：Spry效果是视觉增强功能。时间轴：播放或停止时间轴动画。显示-隐藏元素：指定一个或多个元素窗口，显示、隐藏恢复其默认属性。检查插件：利用该动作可根据访问者所安装的插件，发送给其不同的页面。例如，可根据访问者的计算机中是否安装了Shockwave，而发送给其不同的网页。检查表单：检查文本框内容，以确保用户输入的数据格式正确无误。设置导航条图像：将图片加入导航条或改变导航条图片显示。设置文本：利用指定内容设置容器、文本域、框架、状态栏文本。调用JavaScript：执行JavaScript代码。跳转菜单：当用户创建了一个跳转菜单时，可以使用其为菜单附加行为。转到URL：在当前窗口或指定框架打开一个新页面。预先载入图像：装入图片，但该图片在页面进入浏览器缓冲区之后不立即显示。它主要用于时间线、行为等，从而防止因下载引起的延迟。3．行为面板 执行“窗口”→“行为”命令，可以打开“行为”面板

按钮：显示设置事件，显示添加到当前文档的事件，是默认的视图。按钮：显示所有事件，按字母的降序显示给定类别的所有事件。按钮：单击该按钮，可以弹出行为列表，选择一个行为后，会弹出该行为的对话框。按钮：删除当前选择的行为。按钮：改变行为的顺序。三．添加行为添加行为的步骤如下：Step1选取一个特定的元素，行为将被加到此特定元素上。图7-5添加行为菜单Step2在行为面板点击按钮，在弹出的列表中选择一个希望执行的动作。Step3系统将打开一个相对于该行为的对话框，用户为动画设定具体的参数。Step4添加行为结束后，系统会自动添加一个相应的缺省事件，根据需要做相应的修改。四．第三方JavaScript库的支持

提供了对多种JavaScript的第三方类库，如Prototype、jQuery、YUI、ExtJS等的支持。单击“行为”面板上的按钮，选择“获取更多行为”，随后打开一个浏览器窗口，可以进入Exchange站点，在该站点可以浏览、搜索、下载并安装更多更新的行为。

任务3使用Spry框架制作动态导航菜单

任务导入本任务是使用Spry框架中的Spry菜单栏制作网页导航中的下拉菜单，并且当鼠标经过菜单选项时，菜单背景颜色发生变化，效果如图7-13所示。

知识指导

一．Spry框架概述Spry框架是一个JavaScript库。使用Spry框架可以为网页增加交互功能和各种样式，如导航菜单、可折叠栏目显示和工具提示等，以此达到完善网页功能和优化网页的目的。

有了Spry，就可以使用HTML、CSS和极少量的JavaScript将XML数据合并到HTML文档中，创建构件（如折叠构件和菜单栏），向各种页面元素中添加不同种类的效果。Spry构件由以下几个部分组成：构件结构：用来定义构件结构组成的HTML代码块。构件行为：用来控制构件如何响应用户启动事件的JavaScript。构件样式：用来指定构件外观的CSS。二．Spry框架中的构件1．插入Spry菜单栏垂直菜单栏水平菜单栏方法：执行“插入”→“布局对象”→“Spry菜单栏”命令；在对话框中选择Spry菜单栏的布局方向为“水平”或者“垂直”将光标定位在插入的菜单栏内部，然后在“Spry菜单栏：MenuBar1”标题上单击，选中Spry菜单栏，即可打开菜单栏的属性面板在属性面板中编辑菜单项目2．插入Spry选项卡式面板Spry选项卡式面板构件是一组面板，用来将内容存储到紧凑空间中。方法：执行“插入”→“布局对象”→“Spry选项卡式面板”命令；将光标定位在插入的选项卡内部，然后在“Spry选项卡式面板：TabbedPanels1”标题上单击，选中Spry选项卡，即可打开选项卡的属性面板；在属性面板中编辑菜单项目将光标放在选项卡项目名称上，单击选项卡项目名称，编辑选项的内容3．使用Spry折叠式控件是一组可折叠的面板，单击一个选项时，只有这个选项的内容显示，其他选项中的内容被隐藏。方法：执行“插入”→“布局对象”→“Spry折叠式”命令；将光标定位在插入的Spry折叠式控件内部，然后在“Spry折叠式：Accordion1”标题上单击，选中Spry折叠式控件，打开折叠式控件的属性面板；在属性面板中编辑菜单项目将光标放在选项卡项目名称上，单击

人人文库> 全部分类> 应用文书 > 事务文书

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论