实验三高级网页设计.docx

1、实验三 高级网页设计实验三 高级网页设计一、 实验目的1. 掌握如何使用和管理网页行为2. 了解JavaScript脚本语言的应用。3. 了解常用动态网页技术，了解数据库技术在动态网页中的应用。4. 了解Dreamweaver与vs相结合的网页制作方法。5. 了解快速部署网页的方法。二、 实验原理和内容1. 网页的动态效果与交互（1） 简介一般说来，网页的动态效果是通过JaveScript或基于JaveScript的DHTML代码来实现的。包含JaveScript脚本的网页，还能够实现用户与页面的简单交互。但是编写脚本既复杂又专业需要专门学习，而Dreamweaver提供的“行为”的机制，虽然

2、行为也是基于JaveScript来实现动态网页和交互的，但却不需书写任何代码。在可视化环境中按几个按钮，填几个选项就可以实现丰富的动态页面效果，实现人与页面的简单交互。Dreamweaver内置了许多行为动作，好象是一个现成的JaveScript库。除此之外，第三方厂商提供了更多的行为库，下载并在Dreamweaver中安装行为库中的文件，可以获得更多的可操作行为。如果您很熟悉JaveScript语言，也可以自行设计新动作，添加到Dreamweaver中。“行为”可以创建网页动态效果，实现用户与页面的交互。行为是由事件和动作组成的，例如：将鼠标移到一幅图像上产生了一个事件，如果图像发生变化，就

3、导致发生了一个动作。将事件和动作组合起来就构成了行为，例如，将onClick行为事件与一段JaveScript代码相关联，单击鼠标时就可以执行相应的JaveScript代码(动作)。一个事件可以同多个动作相关联(1：n)，即发生事件时可以执行多个动作。为了实现需要的效果，我们还可以指定和修改动作发生的顺序。与行为相关的有三个重要的部分对象、事件和动作。 对象(Object)对象是产生行为的主体，很多网页元素都可以成为对象，如图片、文字、多媒体文件等，甚至是整个页面。 事件(Event)事件是触发动态效果的原因，它可以被附加到各种页面元素上，也可以被附加到HTML标记中。一个事件总是针对页面元素

4、或标记而言的，例如：将鼠标移到图片上、把鼠标放在图片之外、单击鼠标，是与鼠标有关的三个最常见的事件(onMouseOver、onMouseOut、onClick)。 动作(Action)执行一段程序代码所引出的效果，如：图片翻转、打开浏览器、播放声音都是动作。动作通常是一段JaveScript代码，在Dreamweaver中使用Dreamweaver内置的行为往页面中添加JaveScript代码，就不必自己编写。（2） 创建行为一般创建行为有三个步骤：选择对象、添加动作、调整事件。例3-1具体说明，要求达到的效果是在网页上单击一幅图像，打开一个新窗口显示放大的图像或网页。 步骤一，点击菜单栏“

5、窗口”-”行为”选项，打开行为面板，打开一html文件，选中图片。单击行为面板上的+按钮，打开动作菜单。从动作菜单中选择“打开浏览器”命令，在弹出的对话框中设置参数。步骤二，在“要显示的URL”文本框中，单击“浏览按钮”选择在新窗口中载入的目标的URL地址(可以是网页也可以是图像)。窗口宽度设为400px，窗口高度设为300px。窗口名称为“放大图片”。步骤三，当我们添加行为时，系统自动为我们选择了事件onClick(单击鼠标)，现在，我们单击行为面板上的事件菜单按钮，打开事件菜单，重新选择一个触发行为的事件。把onClick(单击鼠标)的事件改为onMouseOver(鼠标滑过)，设置完成刷

6、新页面查看效果。（3） 常用事件onBlur：页面元素失去焦点时发生的事件。onClick：单击选定元素时触发事件。onDBClick：双击选定元素时触发事件。onError:在加载文档过程中，发生错误时发生的事件。onFocus:页面元素取得焦点时发生的时间。onKeyDown:访问者在按下键盘任何按键时发生的事件。onKeyPress: 用户在按下并放开任何字母数字按键时发生的事件。onKeyUp: 访问者在松开任何先前按下的按键时发生的事件。onLoad:页面被打开时的事件。onMouseDown:按下鼠标时发生的事件。onMouseMove:鼠标指针在选定元素上方移动时发生的事件。on

7、MouseOver:鼠标位于选定元素上方时发生的事件。onMouseOut: 鼠标移开选定元素时发生的事件。onMouseUp: 按下鼠标左键并松开时发生的事件。onUload:退出网页文档时发生的事件。（4） 常用行为 调用JavaScript动作允许使用行为控制器指定当事件发生时将被执行的自定义函数或JavaScript代码行。 操作：选择一个对象-添加行为选择“调用JavaScript”-在对话框中输入要执行的JavaScript函数（例如输入alert(“hello”)） 改变属性动作能够改变对象的属性值。能改变的属性是由目标浏览器的类型决定的。操作：选择一个页面元素或者对象，点击“添

8、加行为（+）”选择“改变属性”改变属性对话框有如下设置：元素类型：选择要改变属性的元素。 元素 ID：选择的元素如果有ID，会在此处自动显示出来。如果没有ID，添加ID后，再重新填写“改变属性”对话框。属性：可以选择一个要改变的属性名称，也可以输入一个要改变的属性名称。新的值：为属性输入一个新值。 转到URL动作可以在当前窗口或指定框架中打开一新的网页。这个动作对于想单击一次便改变两个或更多个框架中的内容特别有用。操作：选中body标签-添加行为选择转到URL-对话框中选择相应文件-可以将事件改为onClick或其他。 跳转菜单DreamWeaver创建菜单对象，并为该对象附加适当的行为，通常

9、无须手工添加Jump Menu（跳转菜单）动作，我们可以在行为控制器中双击一已存在的跳转菜单动作来编辑新的。 打开浏览器窗口动作可以在一新的窗口中打开一个URL。你可以指定新窗口的属性，包括它的大小、属性（窗体大小是否可调整，是否有菜单栏等）及名称。因而此行为非常适合打开一个定制的窗口，运用非常广泛。操作：选中body标签-添加行为选择打开浏览器，-对话框中浏览要显示的网页，并且可以设置宽高等。 弹出信息动作用我们指定的消息显示在JavaScript警告框中。由于JavaScript警告框中只有一个按钮（OK），因此可以使用这个动作给访问者提供信息而不是提供选择。操作：选择元素-“添加行为”按

10、钮选择“弹出信息”-对话框输入显示内容。 设置状态栏文本动作在浏览器窗口左下角的状态栏内显示信息。例如，使用该动作可以在状态栏内描述一个链接的目的替代显示该链接的URL。 设置文本域文字动作可以用你指定的内容替代表单对象中文本域中的内容。操作：选择已插入好的文本域，添加一段代码value=”请输入用户名”-行为选择“设置文本域中的文本”，新建文本空白不填-触发事件选择onFocus，查看网页效果。 设置容器的文本将页面上现有容器的内容和格式替换为指定的格式。 设置框架文本允许用户用指定的内容替换框架的内容和格式设置。 显示隐藏元素动作可以显示、隐藏或还原一个或多个元素的默认的显示状态。操作：插

11、入AP DIV，定义ID，并输入内容-添加行为显示隐藏元素，在元素列表框中选择此id的对象，单击“显示”后确定，事件设置为onMouseOver- 打开AP元素面板，单击眼睛图标关闭，将AP元素隐藏，查看效果-若想隐藏某元素则上述元素列表框下选择隐藏。 变换图像动作可以通过改变IMG（图像）标签的SRC属性将该图像变换为另外一幅图像。使用该动作可以创建按钮变换和其它图像效果，包括一次变换多幅图像。由于在此动作中被影响到的只有SRC属性，因此变换图像应该和原图像有相同的尺寸（即高度和宽度都相同）以防止产生图像变形。操作：在文档中选择一图片，在属性面板的“ID”文本框中输入图像的ID-“添加行为（

12、+）”选择“交换图像”-对话框中，设定原始档为：新图像的文件路径和名称-预先载入图像：选择此项可以将新图像预先加载到浏览器缓存中，防止图像延迟-修改事件。 变换图像还原动作可以将最后设置的变换图像还原为原始图像。当你为一对象附加变换图像动作时，该动作将自动添加，如果此时选择了当鼠标移开图像时，变换图像还原选项，那么变换图像还原动作就无须人工选择。 检查表单动作可以检测指定文本域中的内容以确保访问者输入的数据类型正确。用onBlur事件为单独的表单域附加该动作，则访问者填写表单时检测该域；用onSubmit事件为表单附加该动作，则访问者单击Submit（提交）按钮时立即评估若干个域。为表单附加该

13、动作可以防止指定域包含无效数据提交给服务器的情况。操作：添加行为选择“检查表单”-对话框中选择某个表单元素，“可接受”选择一项即可产生事件为onSubmit的动作. 检查插件动作用来检查访问者的计算机中是否按装了特定的插件，从而打开不同的页面。操作：添加行为的下拉菜单里选择“检查插件”，在对话框中选择或者输入一种插件名称，如果有访问一个指定url，如果没有，访问一个替代url。 拖动AP元素拖动绝对定位的AP元素（包括图片、表格、按钮等），可以创建拼板游戏、滑块控件等操作：插入AP元素-选中标签，添加行为选择拖动AP元素 -对话框中“基本”选项卡选择要操作的对象，“高级”选项卡在“将元素置于顶

14、层，然后”，选择“恢复Z轴 -查看并修改事件参数（5） 各种交互行为分类 文本交互行为在Dreamweaver中，允许用户通过行为功能操作容器文本、文本域文本、框架文本以及状态栏文本等。 窗口交互行为窗口交互行为的作用是对浏览器窗口和窗体的对话框进行操作，实现简单的用户交互。在Dreamweaver CS5中，主要提供了两种窗口交互行为，即弹出信息和打开浏览器窗口。 图像交互行为 图像交互行为的作用是为网页中的各种图像添加交互事件，实现图像的交换/恢复等。图像交互行为通常是基于鼠标滑过和滑开事件的。在Dreamweaver CS5中，提供了“交换图像”、“恢复交换图像”和“预先载入图像”等图像

15、交互行为。 容器交互行为在Dreamweaver中，将所有XHTML布局标签看作是可容纳内容的容器。容器交互行为的作用就是为AP Div等带有ID的容器添加交互的行为效果，其包括“拖动AP元素”行为和“显示-隐藏元素”行为等 效果交互行为效果交互行为的作用是通过动态改变属性的方式，为网页添加动画视觉效果，其包含7种交互行为，分别应用于图像、AP元素、带有id属性的网页结构标签等。 增大/收缩 挤压 显示/渐隐 晃动 滑动 遮帘 高亮颜色 属性交互行为属性交互行为的作用是根据用户触发的事件，动态改变网页中各种标签的属性，从而实现各种特殊的视觉效果。Dreamweaver提供了“改变属性”行为，允

16、许用户方便地更改网页标签的各种属性，实现属性的交互。2. JavaScript脚本语言简介（1） 简介JavaScript是一种面向对象、跨平台、结构化、多用途的脚本编程语言，它是基于对象和事件驱动的，可以与HTML、CSS一起实现在一个Web页面中链接多个对象，与Web客户监护的作用，从而开发出客户端的应用程序。在网页前台交互领域甚至网页的后台开发领域，JavaScript都得到了越来越广泛的应用，例如制作页内动画、实现前台交互特效、与XML数据联接等。JavaScript通过嵌入或调入HTML文档中实现其功能，弥补了HTML语言的不足。JavaScript的开发环境很简单，不需要JAVA编

17、辑器，直接运行在浏览器中。它与JAVA是完全不同的两种语言，是Netscape公司引入了有关java的程序概念设计而成。之前介绍的Dreamweaver行为功能本身是由Adobe预编写的JavaScript脚本代码，其本身基于冗余和兼容性的考虑，执行效率较低，且功能有所限制。如用户需要实现更丰富的效果，则需要学习和使用JavaScript脚本语言，自行编写网页的行为代码。（2） 网页中插入JavaScript的方法 第一种方法：在 HTML 页面中插入 JavaScript脚本程序请使用 标签。 和 之间的代码行包含了 JavaScript。脚本可位于 HTML 的 或 部分中，或者同时存在于

18、两个部分中。通常的做法是把函数放入 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。语法格式如下：脚本代码例3-2，在网页里插入脚本的例子,网页显示文本在body标签中插入以下代码，或者在标签中插入。document.write(Hello World!) 第二种方法：链接脚本文件也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件扩展名是 .js。如需使用外部文件，请在 标签的 src 属性中设置该 .js 文件。例3-3，在网页里插入JavaScrip文件的简单例子，弹出窗口显示信息。新建123.html

19、，在里加上，然后在这个网页的同级目录下建个123.js，在这个js文件里写上：alert(第一个js练习);然后打开网页就会弹出一个窗口，显示第一个js练习。例3-4，实现在浏览器中单击按钮后的运行结果,要求：在html页面中插入按钮，新建js脚本文件456.js，使用函数实现单击按钮后，出现提示框的效果。 页面的html代码如下：无标题文档 在js脚本文件中的代码如下： function del() if (window.confirm(是否确认要删除?) alert(点的确认); else alert(点的取消); （3） 分类JavaScript的网页特效运用在很多的方面，能够实现很多绚

20、丽多彩的特殊效果。根据效果的基本性质大概可以分为文字特效、鼠标特效、图片特效、页面特效、时间特效、布局特效、导航特效、表单特效等。文字特效包括变换文本链接颜色、上下跳动的文本、滚动文本、链接提示文字等。鼠标特效包括禁止右键、多种鼠标效果、鼠标跟踪动画、伴随鼠标图像等。图片特效包括漂浮广告、变换图片等。页面特效包括改变页面背景色、背景滚动等。时间特效包括显示时间和日期、万年历、时钟等。布局特效包括实现表格、弹出层等。导航特效包括多种风格的导航菜单。表单特效包括表单按钮特效、更改表单元素样式等。（4） 语法 JS 输出 JS 语句 JS 注释 JS 变量 JS 数据类型 JS 对象 JS 函数 J

21、S 运算符 JS 比较If.Else， Switch ， For JS 循环While， Break JS 错误 JS 验证构建动态网页（5） 常用的网页特效可登陆网站 循环滚动的图文字幕例3-5，使用标签在页面上循环滚动显示文字。在网页html文件中，插入如下代码：天空飞来五个字，“那都不是事”例3-6，使用javascript脚本实现循环滚动的文字。 以下是css样式的代码，插入标签内：*margin:0px;padding:0px;border:0px;bodyfont:20px 宋体;#demo1height:auto;text-align:left;#demo2height:auto

22、;text-align:left;#demo1 lilist-style-type:none;height:22px;11221232244234background:url() no-repeat left center;text-align:left;text-indent:15px;#demo2 lilist-style-type:none;height:22px;11221232244234background:url() no-repeat left center;text-align:left;text-indent:15px; 以下是body标签内的代码： 轻轻的我走了正如我轻轻

23、地来我轻轻地招手作别西边的云彩 以下是javascript脚本代码，插入上段代码后： var speed=40 ;/数字越大速度越慢 (滚动速度)var demo=document.getElementById(demo);/全局标识 demovar demo2=document.getElementById(demo2); var demo1=document.getElementById(demo1);demo2.innerHTML=demo1.innerHTML /复制demo1为demo2function Marquee() if(demo2.offsetTop-demo.scroll

24、Top=0) demo.scrollTop-=demo1.offsetHeight else demo.scrollTop+ var MyMar=setInterval(Marquee,speed);/ 滚动参数，速度demo.onmouseover=function() clearInterval(MyMar);/ 鼠标移上时清除定时器滚动停止demo.onmouseout=function() MyMar=setInterval(Marquee,speed);标移开时重设定时器3. 动态网页技术（1） 动态网页的特点 动态网页以数据库技术为基础，可以大大降低网站维护的工作量。 采用动态网页

25、技术的网站可以实现更多的功能，如用户注册、用户登录、搜索查询、用户管理、订单管理等。 动态网页并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。 搜索引擎一般不可能从一个网站的数据库中访问全部网页，因此采用动态网页的网站在进行搜索引擎推广时需要做一定的技术处理才能适应搜索引擎的要求。（2） 动态网页开发ASP是Active Server Page的缩写，意为“动态服务器页面”。ASP是微软公司开发的代替CGI脚本程序的一种应用，它可以与数据库和其他程序进行交互，是一种简单、方便的编程工具。ASP的网页文件的格式是.asp，现在常用于各种动态网站中。ASP采用脚本语

26、言VB Script（Java script ）作为自己的开发语言。 ASP是一种服务器端脚本编写环境，可以用来创建和运行动态网页或Web应用程序。ASP网页可以包含HTML标记、普通文本、脚本命令以及COM组件等。与HTML相比，ASP网页具有以下特点。 利用ASP可以突破静态网页的一些功能限制，实现动态网页技术。 ASP文件是包含在HTML代码所组成的文件中的，易于修改和测试。 服务器上的ASP解释程序会在服务器端制定ASP程序，并将结果以HTML格式传送到客户端浏览器上，因此使用各种浏览器都可以正常浏览ASP所产生的网页。 ASP提供了一些内置对象，使用这些对象可以使服务器端脚本功能更强

27、。例如可以从Web浏览器中获取用户通过HTML表单提交的信息，并在脚本中对这些信息进行处理，然后向Web浏览器发送信息。 ASP可以使用服务器端ActiveX组件来执行各种各样的任务，例如存取数据库、收发Email或访问文件系统等。 由于服务器是将ASP程序执行的结果以HTML格式传回客户端浏览器，因此使用者不会看到ASP所编写的原始程序代码，可防止ASP程序代码被窃取。ASP.NET 是一项微软公司的技术，是一种使嵌入网页中的脚本可由因特网服务器执行的服务器端脚本技术。 指 Active Server Pages（动态服务器页面），运行于 IIS 之中的程序 。是建立在通用语言运行时刻库（C

28、LR）上的应用程序框架。用来在服务器端构建功能强大的web应用程序。A提供了几个超越以前web开发模式的优点： 增强的性能。A是运行在服务器端的编译后的CLR代码，而不是像ASP那样解释执行。 A利用提前绑定，即时编译，本地优化和缓存服务来提高性能。所有这一切，性能远远大于你以往写的每一行代码。 世界级水平的开发工具支持。在Visual Studio .net的集成开发环境（IDE）中，A框架由丰富的工具箱和设计器组成。所见即所得的（WYSIWYG）编辑方式、拖放服务器控件、以及自动部署，仅仅是这一强大工具所提供的一少部分功能。 强大而富有弹性。由于是基于(CLR)的，因此整个.net平台的强大和富有弹性，同样可以应用于web应用程序开发者。.net框架的类库