《网页制作》第五讲--动态网页以及javascript.pptVIP

* 网页与多媒体技术 教育技术与信息中心 关继夫 办公室：教育技术楼101室 E-mail：guanjifu@ * 第五章：动态网页以及JavaScript 5.1 “动态网页”的认识 5.2 Javascript语言概述 5.3 在dreamweaver中制作“动态” 网页的实例 * 第五章：动态网页以及JavaScript 具体安排： 1、认识Javascript语言 2、掌握“行为”的概念及一些行为事件 3、重点： * 掌握“交换图片” * 掌握“打开浏览器窗口” * 掌握“层与时间轴”的应用 * 掌握“图像查看器” * 掌握“文字的滚动” * 5.1 “动态”网页的认识 5.1.1 “动态”网页 这里的“动态网页”可以看成是动起来的网页 * 动画、视频、层、CSS以及javascript的应用。 不需和服务器连接，浏览器可直接解释。 动态网页：要去后台服务器联系，并经过处理 “动态网页”的三个组成部分 * CSS:控制布局和格式，如超级链接的四个状态 * DOM:文档对象模型，提供程序接口，但不是提 供给客户端和服务器端的接口。如“document” * 脚本语言：javascript、vbscript * 5.2 Javascript语言概述 5.2.1 认识Javascript语言 Javascript由netscape公司制作，java由SUN公司开发； Javascript是脚本语言， java是程序设计语言。 由livescript语言发展而来，脚本语言，可直接插入html语言中使用，不需编译，由浏览器解释。 Javascript的基本用法：“内联”和“嵌入” 例如：1java内联.htm 例如：2java嵌入.htm * 5.3 dreamweaver中实现动态效果 5.3.1 事件 事件是动作的触发点，是动作产生的先决条件。 常见的事件有： * 单击事件：onclick 例如：3onclick.htm * 改变事件：onchange 例如：4onchange.htm * 选择事件：onselect 例如：5onselect.htm * 焦点事件：onfocus 例如：6onfocus.htm * 载入事件：onload 例如：7onload.htm * 鼠标事件：onmouseover，onmouseout * 5.3 dreamweaver中实现动态效果 5.3.1 事件 dreamweaver中的事件 * 菜单栏-窗口-行为 * * 5.3 dreamweaver中实现动态效果 5.3.2 dreamweaver中自带行为动作的介绍 Dreamweaver中可通过行为实现网页的动态效果，而不需编写JavaScript语句。 行为的三个最重要的构成部分： - 对象 * 对象是产生行为的主体 - 事件 * 事件是触发动态效果的原因 - 动作 * 动作是最终产生的结果 * 5.3 dreamweaver中实现动态效果 5.3.2 dreamweaver中自带行为动作的介绍 创建行为的步骤 1、设置目标浏览器 2、选择对象 3、添加动作 4、调整事件 * 5.3 dreamweaver中实现动态效果 5.3.3 dreamweaver中行为实例介绍 “交换图像”：例如：8交换图像.htm * 插入图片-添加“交换图像”行为-调整事件 “弹出信息”：例如：9弹出信息.htm * 不通过“alert”，用行为实现同样的效果 “打开浏览器窗口”：例如：10….htm * 可以通过这种行为实现通知窗口的弹出和小图 到大图的浏览。 * 5.3 dreamweaver中实现动态效果 5.3.3 dreamweaver中行为实例介绍 “验证表单”：例如：11验证表单.htm * 可以通过行为设置，简单的验证表单中 输入的内容是否满足要求 * 5.3 dreamweaver中实现动态效果 5.3.3 dreamweaver中行为实例介绍 “转到URL”：例如：12转到URL.htm * 可以通过行为设置，实现从一个页面转到另一 个页面，类似“meta”中的设置，但更方便。 * 5.3 dreamweaver中实现动态效果 5.3.3 dreamweaver中行为实例介绍 “设置状态栏文字”：例如：13….htm * 可以通过行为设置，在状态栏中显示提示信息 * 5.3 dreamweaver中实现动态效果 5.3.3 dreamweaver中行为实例介绍 “设置文本域文字”：例