一、 实验目的。
1. 掌握如何使用和管理网页行为。
2. 了解j**ascript脚本语言的应用。
3. 了解常用动态网页技术，了解数据库技术在动态网页中的应用。
4. 了解dreamwe**er与vs相结合的网页制作方法。
5. 了解快速部署网页的方法。
二、 实验原理和内容。
1. 网页的动态效果与交互。
1） 简介。
一般说来，网页的动态效果是通过j**escript或基于j**escript的dhtml**来实现的。包含j**escript脚本的网页，还能够实现用户与页面的简单交互。但是编写脚本既复杂又专业需要专门学习，而dreamwe**er提供的“行为”的机制，虽然行为也是基于j**escript来实现动态网页和交互的，但却不需书写任何**。
在可视化环境中按几个按钮，填几个选项就可以实现丰富的动态页面效果，实现人与页面的简单交互。dreamwe**er内置了许多行为动作，好象是一个现成的j**escript库。除此之外，第三方厂商提供了更多的行为库，**并在dreamwe**er中安装行为库中的文件，可以获得更多的可操作行为。
如果您很熟悉j**escript语言，也可以自行设计新动作，添加到dreamwe**er中。
“行为”可以创建网页动态效果，实现用户与页面的交互。行为是由事件和动作组成的，例如：将鼠标移到一幅图像上产生了一个事件，如果图像发生变化，就导致发生了一个动作。
将事件和动作组合起来就构成了行为，例如，将onclick行为事件与一段j**escript**相关联，单击鼠标时就可以执行相应的j**escript**(动作)。一个事件可以同多个动作相关联(1：n)，即发生事件时可以执行多个动作。
为了实现需要的效果，我们还可以指定和修改动作发生的顺序。
与行为相关的有三个重要的部分——对象、事件和动作。
对象(object)
对象是产生行为的主体，很多网页元素都可以成为对象，如**、文字、多**文件等，甚至是整个页面。
事件(event)
事件是触发动态效果的原因，它可以被附加到各种页面元素上，也可以被附加到html标记中。一个事件总是针对页面元素或标记而言的，例如：将鼠标移到**上、把鼠标放在**之外、单击鼠标，是与鼠标有关的三个最常见的事件(onmouseover、onmouseout、onclick)。
动作(action)
执行一段程序**所引出的效果，如：**翻转、打开浏览器、**声音都是动作。动作通常是一段j**escript**，在dreamwe**er中使用dreamwe**er内置的行为往页面中添加j**escript**，就不必自己编写。
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） 常用行为。
调用j**ascript
动作允许使用行为控制器指定当事件发生时将被执行的自定义函数或j**ascript**行。
操作：选择一个对象->添加行为选择“调用j**ascript”->在对话框中输入要执行的j**ascript函数（例如输入alert(“hello”)）
改变属性。动作能够改变对象的属性值。能改变的属性是由目标浏览器的类型决定的。
操作：选择一个页面元素或者对象，点击“添加行为（+）选择“改变属性”
改变属性对话框有如下设置：
元素类型：选择要改变属性的元素。
元素 id：选择的元素如果有id，会在此处自动显示出来。如果没有id，添加id后，再重新填写“改变属性”对话框。
属性：可以选择一个要改变的属性名称，也可以输入一个要改变的属性名称。
新的值：为属性输入一个新值。
转到url动作可以在当前窗口或指定框架中打开一新的网页。这个动作对于想单击一次便改变两个或更多个框架中的内容特别有用。
操作：选中body标签->添加行为选择转到url->对话框中选择相应文件->可以将事件改为onclick或其他。
跳转菜单。dreamwe**er创建菜单对象，并为该对象附加适当的行为，通常无须手工添加jump menu
跳转菜单）动作，我们可以在行为控制器中双击一已存在的跳转菜单动作来编辑新的。
打开浏览器窗口。
动作可以在一新的窗口中打开一个url。你可以指定新窗口的属性，包括它的大小、属性（窗体大小是否可调整，是否有菜单栏等）及名称。因而此行为非常适合打开一个定制的窗口，运用非常广泛。
操作：选中body标签->添加行为选择打开浏览器，->对话框中浏览要显示的网页，并且可以设置宽高等。
弹出信息。动作用我们指定的消息显示在j**ascript警告框中。由于j**ascript警告框中只有一个按钮（ok），因此可以使用这个动作给访问者提供信息而不是提供选择。
操作：选择元素->“添加行为”按钮选择“弹出信息”->对话框输入显示内容。
设置状态栏文本。
动作在浏览器窗口左下角的状态栏内显示信息。例如，使用该动作可以在状态栏内描述一个链接的目的替代显示该链接的url。
设置文本域文字。
动作可以用你指定的内容替代表单对象中文本域中的内容。
操作：选择已插入好的文本域，添加一段**value=”请输入用户名”->行为选择“设置文本域中的文本”，新建文本空白不填->触发事件选择onfocus，查看网页效果。
设置容器的文本。
将页面上现有容器的内容和格式替换为指定的格式。
设置框架文本。
允许用户用指定的内容替换框架的内容和格式设置。
显示隐藏元素。
动作可以显示、隐藏或还原一个或多个元素的默认的显示状态。
操作：插入ap div，定义id，并输入内容->添加行为显示隐藏元素，在元素列表框中选择此id的对象，单击“显示”后确定，事件设置为onmouseover-> 打开ap元素面板，单击眼睛图标关闭，将ap元素隐藏，查看效果->若想隐藏某元素则上述元素列表框下选择隐藏。
变换图像。动作可以通过改变img（图像）标签的src属性将该图像变换为另外一幅图像。使用该动作可以创建按钮变换和其它图像效果，包括一次变换多幅图像。
由于在此动作中被影响到的只有src属性，因此变换图像应该和原图像有相同的尺寸（即高度和宽度都相同）以防止产生图像变形。
操作：在文档中选择一**，在属性面板的“id”文本框中输入图像的id->“添加行为（+）选择“交换图像”->对话框中，设定原始档为：新图像的文件路径和名称->预先载入图像：
选择此项可以将新图像预先加载到浏览器缓存中，防止图像延迟->修改事件。
变换图像还原。
动作可以将最后设置的变换图像还原为原始图像。当你为一对象附加变换图像动作时，该动作将自动添加，如果此时选择了当鼠标移开图像时，变换图像还原选项，那么变换图像还原动作就无须人工选择。
检查表单。动作可以检测指定文本域中的内容以确保访问者输入的数据类型正确。用onblur事件为单独的表单域附加该动作，则访问者填写表单时检测该域；用onsubmit事件为表单附加该动作，则访问者单击submit（提交）按钮时立即评估若干个域。
为表单附加该动作可以防止指定域包含无效数据提交给服务器的情况。
操作：添加行为选择“检查表单”->对话框中选择某个表单元素，“可接受”选择一项即可产生事件为onsubmit的动作。
检查插件。动作用来检查访问者的计算机中是否按装了特定的插件，从而打开不同的页面。
操作：添加行为的下拉菜单里选择“检查插件”，在对话框中选择或者输入一种插件名称，如果有访问一个指定url，如果没有，访问一个替代url。
拖动ap元素。
拖动绝对定位的ap元素（包括**、**、按钮等），可以创建拼板游戏、滑块控件等。
操作：插入ap元素->选中标签，添加行为选择拖动ap元素 ->对话框中“基本”选项卡选择要操作的对象，“高级”选项卡在“将元素置于顶层，然后”，选择“恢复z轴 ->查看并修改事件参数。
5） 各种交互行为分类。
文本交互行为。
在dreamwe**er中，允许用户通过行为功能操作容器文本、文本域文本、框架文本以及状态栏文本等。
窗**互行为。
窗**互行为的作用是对浏览器窗口和窗体的对话框进行操作，实现简单的用户交互。在dreamwe**er cs5中，主要提供了两种窗**互行为，即弹出信息和打开浏览器窗口。
网页设计实验
实验4 dreamwe er制作flash相册。实验目的。利用dreamwe er的 图像查看器 工具制作一个简单的flash相册。实验效果。本实验的最终效果如图4 所示。实验步骤。实验具体步骤 1 运行dreamwe er，创建一个新页面，选择 插入 图像查看器 菜单项，弹出 保存flash元素 ...
高级网页设计课程教学方案
高级网页设计 课程教学大纲。一 课程的基本情况。课程中文名称 高级网页设计。课程英文名称 advanced web design 课程编码。课程类别 专业课。课程性质 必修课。总学时 72 讲课学时 40 实验学时 32 学分 4授课对象 计算机应用技术 专 电专 前导课程 数据库原理 j a程序设...
高级网页设计课程教学方案
高级网页设计 课程教学大纲。一 课程的基本情况。课程中文名称 高级网页设计。课程英文名称 advanced web design课程编码。课程类别 专业课。课程性质 必修课。总学时 72 讲课学时 40 实验学时 32学分 4授课对象 计算机应用技术 专 电专 前导课程 数据库原理 j a程序设计。...