实验三高级网页设计.docx

实验三高级网页设计.docx

《实验三高级网页设计.docx》由会员分享，可在线阅读，更多相关《实验三高级网页设计.docx（20页珍藏版）》请在冰豆网上搜索。

实验三高级网页设计

实验三高级网页设计

一、实验目的

1.掌握如何使用和管理网页行为

2.了解JavaScript脚本语言的应用。

3.了解常用动态网页技术，了解数据库技术在动态网页中的应用。

4.了解Dreamweaver与vs相结合的网页制作方法。

5.了解快速部署网页的方法。

二、实验原理和内容

1.网页的动态效果与交互

（1）简介

一般说来，网页的动态效果是通过JaveScript或基于JaveScript的DHTML代码来实现的。

包含JaveScript脚本的网页，还能够实现用户与页面的简单交互。

但是编写脚本既复杂又专业需要专门学习，而Dreamweaver提供的“行为”的机制，虽然行为也是基于JaveScript来实现动态网页和交互的，但却不需书写任何代码。

在可视化环境中按几个按钮，填几个选项就可以实现丰富的动态页面效果，实现人与页面的简单交互。

Dreamweaver内置了许多行为动作，好象是一个现成的JaveScript库。

除此之外，第三方厂商提供了更多的行为库，下载并在Dreamweaver中安装行为库中的文件，可以获得更多的可操作行为。

如果您很熟悉JaveScript语言，也可以自行设计新动作，添加到Dreamweaver中。

　　“行为”可以创建网页动态效果，实现用户与页面的交互。

行为是由事件和动作组成的，例如：

将鼠标移到一幅图像上产生了一个事件，如果图像发生变化，就导致发生了一个动作。

将事件和动作组合起来就构成了行为，例如，将onClick行为事件与一段JaveScript代码相关联，单击鼠标时就可以执行相应的JaveScript代码（动作）。

一个事件可以同多个动作相关联（1：

n），即发生事件时可以执行多个动作。

为了实现需要的效果，我们还可以指定和修改动作发生的顺序。

　　与行为相关的有三个重要的部分——对象、事件和动作。

●对象（Object）

对象是产生行为的主体，很多网页元素都可以成为对象，如图片、文字、多媒体文件等，甚至是整个页面。

●事件（Event）

　　事件是触发动态效果的原因，它可以被附加到各种页面元素上，也可以被附加到HTML标记中。

一个事件总是针对页面元素或标记而言的，例如：

将鼠标移到图片上、把鼠标放在图片之外、单击鼠标，是与鼠标有关的三个最常见的事件（onMouseOver、onMouseOut、onClick）。

●动作（Action）

　　执行一段程序代码所引出的效果，如：

图片翻转、打开浏览器、播放声音都是动作。

动作通常是一段JaveScript代码，在Dreamweaver中使用Dreamweaver内置的行为往页面中添加JaveScript代码，就不必自己编写。

（2）创建行为

一般创建行为有三个步骤：

选择对象、添加动作、调整事件。

例3-1具体说明，要求达到的效果是在网页上单击一幅图像，打开一个新窗口显示放大的图像或网页。

步骤一，点击菜单栏“窗口”->”行为”选项，打开行为面板，打开一html文件，选中图片。

单击行为面板上的"+"按钮，打开动作菜单。

从动作菜单中选择“打开浏览器”命令，在弹出的对话框中设置参数。

　　步骤二，在“要显示的URL”文本框中，单击“浏览按钮”选择在新窗口中载入的目标的URL地址（可以是网页也可以是图像）。

　　窗口宽度设为400px，窗口高度设为300px。

　　窗口名称为“放大图片”。

步骤三，当我们添加行为时，系统自动为我们选择了事件onClick（单击鼠标），现在，我们单击行为面板上的事件菜单按钮，打开事件菜单，重新选择一个触发行为的事件。

把onClick（单击鼠标）的事件改为onMouseOver（鼠标滑过），

设置完成刷新页面查看效果。

（3）常用事件

onBlur：

页面元素失去焦点时发生的事件。

onClick：

单击选定元素时触发事件。

onDBClick：

双击选定元素时触发事件。

onError:

在加载文档过程中，发生错误时发生的事件。

onFocus:

页面元素取得焦点时发生的时间。

onKeyDown:

访问者在按下键盘任何按键时发生的事件。

onKeyPress:

用户在按下并放开任何字母数字按键时发生的事件。

onKeyUp:

访问者在松开任何先前按下的按键时发生的事件。

onLoad:

页面被打开时的事件。

onMouseDown:

按下鼠标时发生的事件。

onMouseMove:

鼠标指针在选定元素上方移动时发生的事件。

onMouseOver:

鼠标位于选定元素上方时发生的事件。

onMouseOut:

鼠标移开选定元素时发生的事件。

onMouseUp:

按下鼠标左键并松开时发生的事件。

onUload:

退出网页文档时发生的事件。

（4）常用行为

•调用JavaScript

动作允许使用行为控制器指定当事件发生时将被执行的自定义函数或JavaScript代码行。

操作：

选择一个对象->添加行为选择“调用JavaScript”->在对话框中输入要执行的JavaScript函数（例如输入alert（“hello”））

•改变属性

动作能够改变对象的属性值。

能改变的属性是由目标浏览器的类型决定的。

操作：

选择一个页面元素或者对象，点击“添加行为（+）”选择“改变属性”

改变属性对话框有如下设置：

元素类型：

选择要改变属性的元素。

　　元素ID：

选择的元素如果有ID，会在此处自动显示出来。

如果没有ID，添加ID后，再重新填写“改变属性”对话框。

　　属性：

可以选择一个要改变的属性名称，也可以输入一个要改变的属性名称。

　　新的值：

为属性输入一个新值。

•转到URL

动作可以在当前窗口或指定框架中打开一新的网页。

这个动作对于想单击一次便改变两个或更多个框架中的内容特别有用。

操作：

选中body标签->添加行为选择转到URL->对话框中选择相应文件->可以将事件改为onClick或其他。

•跳转菜单

DreamWeaver创建菜单对象，并为该对象附加适当的行为，通常无须手工添加JumpMenu

（跳转菜单）动作，我们可以在行为控制器中双击一已存在的跳转菜单动作来编辑新的。

•打开浏览器窗口

动作可以在一新的窗口中打开一个URL。

你可以指定新窗口的属性，包括它的大小、属性（窗体大小是否可调整，是否有菜单栏等）及名称。

因而此行为非常适合打开一个定制的窗口，运用非常广泛。

操作：

选中body标签->添加行为选择打开浏览器，->对话框中浏览要显示的网页，并且可以设置宽高等。

•弹出信息

动作用我们指定的消息显示在JavaScript警告框中。

由于JavaScript警告框中只有一个按钮（OK），因此可以使用这个动作给访问者提供信息而不是提供选择。

操作：

选择元素->“添加行为”按钮选择“弹出信息”->对话框输入显示内容。

•设置状态栏文本

动作在浏览器窗口左下角的状态栏内显示信息。

例如，使用该动作可以在状态栏内描述一个链接的目的替代显示该链接的URL。

•设置文本域文字

动作可以用你指定的内容替代表单对象中文本域中的内容。

操作：

选择已插入好的文本域，添加一段代码value=”请输入用户名”->行为选择“设置文本域中的文本”，新建文本空白不填->触发事件选择onFocus，查看网页效果。

•设置容器的文本

将页面上现有容器的内容和格式替换为指定的格式。

•设置框架文本

允许用户用指定的内容替换框架的内容和格式设置。

•显示隐藏元素

动作可以显示、隐藏或还原一个或多个元素的默认的显示状态。

操作：

插入APDIV，定义ID，并输入内容->添加行为显示隐藏元素，在元素列表框中选择此id的对象，单击“显示”后确定，事件设置为onMouseOver->>打开AP元素面板，单击眼睛图标关闭，将AP元素隐藏，查看效果->若想隐藏某元素则上述元素列表框下选择隐藏。

•变换图像

动作可以通过改变IMG（图像）标签的SRC属性将该图像变换为另外一幅图像。

使用该动作可以创建按钮变换和其它图像效果，包括一次变换多幅图像。

由于在此动作中被影响到的只有SRC属性，因此变换图像应该和原图像有相同的尺寸（即高度和宽度都相同）以防止产生图像变形。

操作：

在文档中选择一图片，在属性面板的“ID”文本框中输入图像的ID->“添加行为（+）”选择“交换图像”->对话框中，设定原始档为：

新图像的文件路径和名称->预先载入图像：

选择此项可以将新图像预先加载到浏览器缓存中，防止图像延迟->修改事件。

•变换图像还原

动作可以将最后设置的变换图像还原为原始图像。

当你为一对象附加变换图像动作时，该动作将自动添加，如果此时选择了当鼠标移开图像时，变换图像还原选项，那么变换图像还原动作就无须人工选择。

•检查表单

动作可以检测指定文本域中的内容以确保访问者输入的数据类型正确。

用onBlur事件为单独的表单域附加该动作，则访问者填写表单时检测该域；用onSubmit事件为表单附加该动作，则访问者单击Submit（提交）按钮时立即评估若干个域。

为表单附加该动作可以防止指定域包含无效数据提交给服务器的情况。

操作：

添加行为选择“检查表单”->对话框中选择某个表单元素，“可接受”选择一项即可产生事件为onSubmit的动作.

•检查插件

动作用来检查访问者的计算机中是否按装了特定的插件，从而打开不同的页面。

操作：

添加行为的下拉菜单里选择“检查插件”，在对话框中选择或者输入一种插件名称，如果有访问一个指定url，如果没有，访问一个替代url。

•拖动AP元素

拖动绝对定位的AP元素（包括图片、表格、按钮等），可以创建拼板游戏、滑块控件等

操作：

插入AP元素->选中标签，添加行为选择拖动AP元素->对话框中“基本”选项卡选择要操作的对象，“高级”选项卡在“将元素置于顶层，然后”，选择“恢复Z轴->查看并修改事件参数

（5）各种交互行为分类

●文本交互行为

在Dreamweaver中，允许用户通过行为功能操作容器文本、文本域文本、框架文本以及状态栏文本等。

●窗口交互行为

窗口交互行为的作用是对浏览器窗口和窗体的对话框进行操作，实现简单的用户交互。

在DreamweaverCS5中，主要提供了两种窗口交互行为，即弹出信息和打开浏览器窗口。

●图像交互行为

图像交互行为的作用是为网页中的各种图像添加交互事件，实现图像的交换/恢复等。

图像交互行为通常是基于鼠标滑过和滑开事件的。

在DreamweaverCS5中，提供了“交换图像”、“恢复交换图像”和“预先载入图像”等图像交互行为。

●容器交互行为

在Dreamweaver中，将所有XHTML布局标签看作是可容纳内容的容器。

容器交互行为的作用就是为APDiv等带有ID的容器添加交互的行为效果，其包括“拖动AP元素”行为和“显示-隐藏元素”行为等

●效果交互行为

效果交互行为的作用是通过动态改变属性的方式，为网页添加动画视觉效果，其包含7种交互行为，分别应用于图像、AP元素、带有id属性的网页结构标签等。

•增大/收缩

•挤压

•显示/渐隐

•晃动

•滑动

•遮帘

•高亮颜色

●属性交互行为

属性交互行为的作用是根据用户触发的事件，动态改变网页中各种标签的属性，从而实现各种特殊的视觉效果。

Dreamweaver提供了“改变属性”行为，允许用户方便地更改网页标签的各种属性，实现属性的交互。

2.JavaScript脚本语言简介

（1）简介

JavaScript是一种面向对象、跨平台、结构化、多用途的脚本编程语言，它是基于对象和事件驱动的，可以与HTML、CSS一起实现在一个Web页面中链接多个对象，与Web客户监护的作用，从而开发出客户端的应用程序。

在网页前台交互领域甚至网页的后台开发领域，JavaScript都得到了越来越广泛的应用，例如制作页内动画、实现前台交互特效、与XML数据联接等。

JavaScript通过嵌入或调入HTML文档中实现其功能，弥补了HTML语言的不足。

JavaScript的开发环境很简单，不需要JAVA编辑器，直接运行在浏览器中。

它与JAVA是完全不同的两种语言，是Netscape公司引入了有关java的程序概念设计而成。

之前介绍的Dreamweaver行为功能本身是由Adobe预编写的JavaScript脚本代码，其本身基于冗余和兼容性的考虑，执行效率较低，且功能有所限制。

如用户需要实现更丰富的效果，则需要学习和使用JavaScript脚本语言，自行编写网页的行为代码。

（2）网页中插入JavaScript的方法

•第一种方法：

在HTML页面中插入JavaScript脚本程序

请使用之间的代码行包含了JavaScript。

脚本可位于HTML的或部分中，或者同时存在于两个部分中。

通常的做法是把函数放入部分中，或者放在页面底部。

这样就可以把它们安置到同一处位置，不会干扰页面的内容。

语法格式如下：

脚本代码

例3-2，在网页里插入脚本的例子,网页显示文本

在body标签中插入以下代码，或者在标签中插入。

document.write（"HelloWorld!

"）

•第二种方法：

链接脚本文件

也可以把脚本保存到外部文件中。

外部文件通常包含被多个网页使用的代码。

外部JavaScript文件的文件扩展名是.js。

如需使用外部文件，请在，然后在这个网页的同级目录下建个123.js，在这个js文件里写上：

alert（"第一个js练习"）;

然后打开网页就会弹出一个窗口，显示"第一个js练习"。

例3-4，实现在浏览器中单击按钮后的运行结果,要求：

在html页面中插入按钮，新建js脚本文件456.js，使用函数实现单击按钮后，出现提示框的效果。

页面的html代码如下：

在js脚本文件中的代码如下：

functiondel（）

{if（window.confirm（"是否确认要删除?

"））

{alert（"点的确认"）;}

else{alert（"点的取消"）;}}

}

（3）分类

JavaScript的网页特效运用在很多的方面，能够实现很多绚丽多彩的特殊效果。

根据效果的基本性质大概可以分为文字特效、鼠标特效、图片特效、页面特效、时间特效、布局特效、导航特效、表单特效等。

文字特效包括变换文本链接颜色、上下跳动的文本、滚动文本、链接提示文字等。

鼠标特效包括禁止右键、多种鼠标效果、鼠标跟踪动画、伴随鼠标图像等。

图片特效包括漂浮广告、变换图片等。

页面特效包括改变页面背景色、背景滚动等。

时间特效包括显示时间和日期、万年历、时钟等。

布局特效包括实现表格、弹出层等。

导航特效包括多种风格的导航菜单。

表单特效包括表单按钮特效、更改表单元素样式等。

（4）语法

•JS输出

•JS语句

•JS注释

•JS变量

•JS数据类型

•JS对象

•JS函数

•JS运算符

•JS比较

If...Else，Switch，For

•JS循环

While，Break

•JS错误

•JS验证构建动态网页

（5）常用的网页特效

可登陆网站

•循环滚动的图文字幕

例3-5，使用标签在页面上循环滚动显示文字。

在网页html文件中，插入如下代码：

天空飞来五个字，“那都不是事”~

例3-6，使用javascript脚本实现循环滚动的文字。

以下是css样式的代码，插入标签内：

以下是body标签内的代码：

hidden;height:

80px;width:

400px;">