毕 业 设 计 （说 明 书） 题 目：________________________________ 姓 名：________________________________ 编 号：
( )字 号 XX职业技术学院 年 月 日 XX职业技术学院 毕 业 设 计 （论 文） 任 务 书 姓名 ______________________ 专业 ______________________ 任务下达日期 __________________年____________月____________日 设计（论文）开始日期 ______________年_____________月___________日 设计（论文）完成日期 ______________年_____________月___________日 设计论文题目 ___________________________________________________ A.编制设计 ____________________________________________________________ _______________________________________________________________ B.设计专题（毕业论文）_________________________________________________ _______________________________________________________________ 指 导 教 师 __________________________ 系(部)主任 ___________________________ _______________年__________月__________日 XX职业技术学院毕业设计（论文）评语 第________页 共________页 学生姓名：____________________，_________________________ 专业 ________________年级 毕业设计(论文)题目：_____________________________________________________________ 评 阅 人：____________________________________ 指导教师：____________________________________（签字） 年 月 日 成 绩：____________________________________ 系(部)主任：__________________________________（签字） 年 月 日 毕业设计（论文）及答辩评语：
XX职业技术学院 毕业设计（论文）答辩委员会记录 系 专业，学生 于 年 月 日 进行了毕业设计（论文）答辩。

设计题目：
专题（论文）题目：
指导教师：
答辩委员会根据学生提交的毕业设计（论文）材料，根据学生答辩情况，经答辩委员会讨论评定，给予学生 毕业设计（论文）成绩为 。

答辩委员会 人，出席 人。

答辩委员会主任（签字）：
答辩委员会副主任（签字）：
答辩委员会委员：
， ， ， ， _， ___________。

摘 要 网络发展到今天，建立网站已经成为一个很普遍的问题了。对于企业家来说，建立好的网站可以抢占新世纪发展的战略要点。建立新的企业形象，直接开拓国际市场。对于个人来说，建设好的个人网站可以更加方便的收集信息，开展更加直接的网络交流，使用自己构造的平台，可以为毕业后找工作做好充分的准备。21世纪全世界的计算机都将通过Internet联到一起，网络安全的内涵也就发生了根本的变化。它不仅从一般性的防卫变成了一种非常普通的防范，而且还从一种专门的领域变成了无处不在。随着计算机的普及和网络技术的迅速发展，人们也越来越依赖于计算机和网络。因此，网络安全应该也必须引起注意。网络安全是一门涉及计算机、网络、通讯、密码、信息安全、应用数学、数论、信息论等多种学科的综合性学科，涉及面极广，而且不断更新和发展。国家对信息产业的扶持，使国内的网络状况逐渐好转，更多的服务器的开通，更快的宽带网得逐渐普及，各种各样的攻击行为在网上也越来越频繁化和简单化。

当人类步入21世纪这一信息社会、网络社会的时候，我国将建立起一套完整的网络安全体系。计算机技术的发展，特别是网络技术的飞速发展，给文档的保存和管理提供极大的方便。本论文中，将软件工程的基本原理和方法应用到整个系统，并对其进行需求分析，提出了解决问题的具体方法。在具体制作中，用ASP技术来实现B/S系统，ASP技术与数据库技术结合，用户在浏览器端可以随意查询自己需要的标本，而数据的后台操作则由服务器端处理。这样提高了网页的互动性，使整个系统能更好的为用户服务。现在asp的发展也已经有好几年的历史了，走在前面的人也已经作了许许多多的工作，通过大家的努力asp技术是越来越完善了，功能也已经是越来越强大了，也已经是一个相当成熟的软件开发工具了，最近有asp.net的出现，是从asp发展而来得。Asp.net的功能是比asp更为的强大，但是asp更受到初学者们的喜爱，因为它在容易上手方面有其独到的一面。网站是政府、企事业单位向用户提供信息的一种方式，是开展电子政务、电子商务的基础设施和信息平台。网站建设的规划、设计是建成成功网站的关键。从网站建设的规划、设计入手，介绍网站建设的实现方法和技术。在我的个人网站制作过程中，主要是针对我网站设计的方向和目的、网站设计的整个流程出发，然后通过自己设计的这个个人网站作品来说明并演示一个网站制作过程。

关键词：网站设计；
网站规化；
网站主题 目录 摘 要 I 第一章 绪论 1 1.1 网页设计概述 1 1.2 网页设计的要素 1 1.3 本论文工作 2 第二章 网页设计语言概述 3 2.1 HTML语言介绍 3 2.1.1 HTML语言的特点 3 2.1.2 HTML语言的编辑软件 3 2.2 常用的HTML语言编辑软件 4 2.2.1 Dreamweaver 4 2.2.2 ASP 4 2.2.3 JavaScript 6 2.3 本章小结 9 第三章 基于对象的JAVASCRIPT语言 10 3.1 对象的基础知识 10 3.1.1对象的基本结构 10 3.1.2 引用对象的途径 10 3.1.3 有关对象操作语句 10 3.1.4 对象属性的引用 12 3.1.5 对象的方法的引用 12 3.2常用对象的属性和方法 13 3.2.1常用内部对象 13 3.2.2 JavaScript中的系统函数 15 3.2.3举例 16 3.3 本章小结 18 第四章 内部对象系统的使用 19 4.1浏览器对象层次及其主要作用 19 4.2文档对象功能及其作用 19 4.2.1 document中三个主要的对象 20 4.2.2文档对象中的attribute属性 20 4.2.3文档对象的基本元素 21 4.3内部对象系统实例 21 4.4 本章小结 23 第五章 WEB页面信息的交互——窗体与框架 24 5.1窗体基础知识 24 5.1.1窗体对象 24 5.1.2 窗体对象的方法 25 5.1.3 窗体对象的属性 25 5.1.4 访问窗体对象 25 5.1.5 引用窗体的先决条件 25 5.2 窗体中的基本元素 25 5.3窗体对象实例 30 5.4 框架 33 5.5 框架的访问 34 5.6 本章小结 37 第六章 结 论 38 致 谢 39 参考文献 40 第1章 绪论 随着21世纪的到来，人们更深切地感受到计算机在生活和工作中的作用越来越重要，越来越来的职业需要具有计算机的应用技能。掌握计算机是职业的需要，更是事业发展的需要。网页设计与制作是计算机能力的具体表现，本章主要介绍网页设计的相关知识。

1.1 网页设计概述 网站是企业向用户和网民提供信息(包括产品和服务)的一种方式,是企业开展电子商务的基础设施和信息平台，离开网站（或者只是利用第三方网站）去谈电子商务是不可能的。企业的网址被称为“网络商标”，也是企业无形资产的组成部分，而网站是INTERNET上宣传和反映企业形象和文化的重要窗口。而我的网站设计属于暖色调的， 1.2 网页设计的要素 网页设计的两大要素是：整体风格和色彩搭配。

一、确定网站的整体风格 在这里，我提供给大家一些参考经验：
1．将你的标志logo，尽可能的放在每个页面上最突出的位置。

2．突出你的标准色彩。

3．总结一句能反映贵站精髓的宣传标语！ 4．相同类型的图像采用相同效果，比如说标题字都采用阴影效果，那么在网站中出现的所有标题字的阴影效果的设置应该是完全一致的！ 二、网页色彩的搭配 1．用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感。

2．用两种色彩。先选定一种色彩，然后选择它的对比色。

3．用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；
或者土黄，土灰，土蓝。

在网页配色中，还要切记一些误区：
1．不要将所有颜色都用到，尽量控制在三至五种色彩以内。

2．背景和前文的对比尽量要大(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。

1.3 本论文工作 本论文主要是对网页设计与制作的语言基础上进行探讨，主要内容如下：
第一章：绪论 本章主要介绍网页设计的相关知识。

第二章：网页设计语言概述 本章主要介绍网页设计的语言——HTML，以及用于编辑HTML语言的软件，为后续工作奠定基础。

第三章：基于对象的JavaScript语言 本章介绍了基于对象的JavaScript中常用内部对象属性、方法的使用。

第四章：内部对象系统的使用 本章主要介绍使用浏览器的内部对象系统，可实现与HTML文档进行交互。它的作用是将相关元素组织包装起来，提供给程序设计人员使用，从而减轻编程人的劳动，提高设计Web页面的能力。

第五章：WEB页面信息的交互——窗体与框架 本章主要介绍实现网页的动态交互，必须掌握有关窗体对象（Form）和框架对象（Frames）更为复杂的知识。

第六章：总结 第2章 网页设计语言概述 2.1 HTML语言介绍 HTML（HyperText Mark-up Language）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。

HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。

2.1.1 HTML语言的特点 HTML文档制作不是很复杂，且功能强大，支持不同数据格式的文件镶入，这也是WWW盛行的原因之一，HTML语言的特点如下：
1、简易性，HTML版本升级采用超集方式，从而更加灵活方便。

2、可扩展性，HTML语言的广泛应用带来了加强功能，增加标识符等要求，HTML采取子类元素的方式，为系统扩展带来保证。

3、平台无关性。虽然PC机大行其道，但使用MAC等其他机器的大有人在，HTML可以使用在广泛的平台上，这也是WWW盛行的另一个原因。

2.1.2 HTML语言的编辑软件 HTML的本质是文本，需要浏览器的解释，HTML的编辑器大体可以分为三种：
1、基本编辑软件，使用WINDOWS自带的记事本或写字版都可以编写，当然，如果你用WPS来编写，也可以。不过存盘时请使用.htm或.html作为扩展名，这样浏览器就可以解释执行了。

2、半所见即所得软件，这种软件能大大提高开发效率，它可以使你在很短的时间内做出Homepage，且可以学习HTML，这种类型的软件主要有HOTDOG，还有国产的软件网页作坊。

3、所见即所得软件，使用最广泛的编辑器，完全可以一点不懂HTML的知识就可以做出网页，这类软件主要有Frontpage，DREAMWEAVER、Delphi、Eclipse、UltraEdit。

一个HTML文件由一个HTML元素组成，即文件以<HTML>开始。以</HTML>结束，文档中其他元素及其属性的声明都是HTML的元素体。

HTML元素的元素体和元素体由两大部分组成，即头元素<head>…</head>和体元素<body>…</body>。头元素和体元素的元素体又由其他元素、文本和注释等组成。

一个标准的HTML文件应该具备如下结构：
<HTML> 标记一个HTML文件的开始 <HEAD> HTML文件的文件头部分开始 …文件头部分内容 </HEAD> HTML文件的文件头部分结束 <BODY> HTML文件的文件体部分开始 …文件体 </BODY>HTML文件的文件部分结束 </HTML>标记该HTML文件结束 有些元素只能出现在头元素中，如meta、title等元素，而大多数的元素只能出现在体元素中。在头元素中的元素表示的是该HTML文件的一般信息，比如该文件的标题、来源、作者、版本、字符集和关键字等，这些元素与书写的顺序无关，它们只是表明该HTML文件的属性值。但出现在元素体中的元素则是要注意书写顺序的，改变了它们的书写顺序就会改变HTML文件在浏览器上输出的形式。

2.2 常用的HTML语言编辑软件 2.2.1 Dreamweaver Dreamweaver是美国Adobe(原Macromedia，2005年被Adobe收购)公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。它不仅是优秀的WYSIWYG编辑器，更是优秀的代码编辑器，有代码加亮，代码提示等丰富功能，提供各种示例代码，并支持Javascript,PHP,ASP,JSP等多种脚本语言。最新版本为CS4，发布于2008年9月。

2.2.2 ASP ASP技术是Microsoft公司开发的一套全新的服务器端脚本程序环境。它可以根据客户端的不同请求，在服务器端经过相应的ASP程序处理生成不同的静态HTML页面并穿回给浏览器。ASP自身有很多优点，这些优点使它成为了当今世界网络上应用最多的脚本设计环境。

1、什么是ASP ASP的全称是Active Server Pages,中文名称叫做动态服务器网页，其功能在于可以使用它来开发运行在Windows服务器平台上的动态网页和网页。尽管我们常把“ASP脚本”挂在嘴边，但ASP既不是一种编程语言，也不是开发工具软件，同样也不是一种应用程序，它实际上是一种开发动态网页的技术。

2、ASP的脚本语言 ASP的脚本语言可以是VBScript或者Jscript，也可以是两者的结合，所以任何一种文本编辑器都能编辑ASP脚本，当然不同的编辑器开发调试效率是不一样的。和通常的VBScript和Jscript应用程序不同，ASP所有的程序都是在服务器端运行的，而不是在浏览器或者客户端执行的，这样用户就不必担心自己的浏览器能否运行所编写的ASP代码了。

程序执行完毕，服务器仅将执行的结果返回给客户端浏览器，这样即使客户端的浏览器不支持VBScript或Jscript，但是仍然可以浏览动态的网页。

VBScript是IIS默认的脚本语言，当然可以在IIS中更改默认的脚本语言。如果改成Jscript，那么默认的脚本语言就是Jscript。因为VBScript在属性和方法上的灵活表现方式更适合作为服务器的脚本，所以推荐大家用VBScript作为ASP的默认脚本语言。

3、ASP的运行环境 由于ASP是一种服务器的脚本语言，所以并不是所有的Web服务器都具有这个功能。ASP是由Microsoft公司推出的，当然在目前页只有Microsoft公司推出的服务器能实现ASP的强大功能，其他的一些服务器在安装了ASP组件后才能实现这个功能。

Microsoft公司推出的支持ASP的Web服务器有以下几个：
Microsoft Internet Information Server version (IIS); Microsoft Peer Web Server; Microsoft Personal WebServer (PWS); 其中前两个主要是为Microsoft公司的Windowns NT /2000 /XP系统开发的，当然它们的功能以及稳定性都要强很多。目前大型的站点大多是有IIS作为服务器，而PWS是为一般的PC用户开发的。

既然ASP是在服务器端执行的，因此访问这些以.asp为后缀的文件时，就不能使用实际的物理路径，而只能用虚拟路径。使用虚拟路径访问ASP最简单的方法就是将ASP文件拷贝到IIS的安装目录中 (默认的安装目录为C：＼Inetpub＼wwwroot),然后就可以通过IE浏览器直接访问了。

访问文件名为“index.asp”的ASP文件，如果在IE浏览器中用物理路径访问，本来期望的结果是不会出现的，浏览器只会显示普通的HTML页面。为此应该将“index.asp”文件拷贝到服务器目录下，然后通过虚拟路径来访问该页面。如果程序没有错的话即可看到预期的效果。

4、ASP的工作原理 通过上述介绍，大家应该了解到一个ASP页面从服务器端传送到客户端的原理与一般静态HTML页面是不同的。

从客户端的一URL请求到服务器反馈一个页面给浏览器，其大致的流程如下：
(1) 用户在客户端浏览器中输入一个网址，与服务器建立连接。

(2) 服务器根据用户请求的网址在硬盘上找到相应的文件。

(3) 如果文件是普通的HTML文档，那么服务器将直接把该文件传送到客户端。

(4) 如果文件是服务器脚本，那么服务器将运行这个文件。如果需要查询数据库，则通过ADO组件连接ODBC或DSN数据源访问数据库。进行了一系列的运算和解释后，将最终结果形成一个纯HTML文档。

(5) 把这个文档传送到客户端。

(6) 结束这次连接。

由于最后传送给客户端的是一个纯HTML文本文件，因此用户在浏览器上是看不到ASP文件的源代码的。

5、ASP的开发工具 使用ASP进行网路编程，选择一个合适的开发工具是很重要的。ASP对开发工具没有特殊的要求，只要具有文本编辑器功能的工具均可。因此ASP的开发工具很多，比较好的由Visual Interdev、Dreamweaver等。

Dreamweaver是一个集成的Web应用软件开发系统，包括开发、发行以及管理数据库驱动的Web应用软件所需的所有的功能，所以一般情况下推荐使用Dreamweaver。

2.2.3 JavaScript 一、JavaScript概述 JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java 脚本语言（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的HTML语言中实现的。它的出现弥补了HTML语言的缺陷，它是Java与HTML折衷的选择，具有以下几个基本特点：
1、是一种脚本编写语言 JavaScript是一种脚本语言，它采用小程序段的方式实现编程。像其它脚本语言一样,JavaScript同样已是一种解释性语言,它提供了一个易的开发过程。

它的基本结构形式与C、C++、VB、Delphi十分类似。但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起，从而方便用户的使用操作。

2、基于对象的语言。

JavaScript是一种基于对象的语言，同时以可以看作一种面向对象的。这意味着它能运用自己已经创建的对象。因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。

3、简单性 JavaScript的简单性主要体现在：首先它是一种基于Java基本语句和控制流之上的简单而紧凑的设计, 从而对于学习Java是一种非常好的过渡。其次它的变量类型是采用弱类型，并未使用严格的数据类型。

4、安全性 JavaScript是一种安全性语言，它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。

5、动态性的 JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页(Home Page)中执行了某种操作所产生的动作，就称为“事件”(Event)。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。

6、跨平台性 JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可正确执行。从而实现了“编写一次,走遍天下”的梦想。

实际上JavaScript最杰出之处在于可以用很小的程序做大量的事。无须有高性能的电脑，软件仅需一个字处理软件及一浏览器，无须WEB服务器通道，通过自己的电脑即可完成所有的事情。

总之，JavaScript 是一种新的描述语言，它可以被箝入到 HTML 的文件之中。

JavaScript语言可以做到回应使用者的需求事件 (如：form的输入) ，而不用任何的网路来回传输资料，所以当一位使用者输入一项资料时，它不用经过传给伺服端 (server)处理，再传回来的过程，而直接可以被客户端 (client) 的应用程式所处理。

JavaScript 和 Java 很类似，但到底并不一样！ Java 是一种比 JavaScript 更复杂许多的程式语言，而 JavaScript 则是相当容易了解的语言。JavaScript 创作者可以不那麽注重程式技巧，所以许多 Java 的特性在 Java Script 中并不支援。

二、JavaScript和Java的区别 虽然JavaScript与Java有紧密的联系，但却是两个公司开发的不同的两个产品。Java是SUN公司推出的新一代面向对象的程序设计语言，特别适合于Internet应用程序开发；
而JavaScript是Netscape公司的产品，其目的是为了扩展Netscape Navigator功能,而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言, 它的前身是Live Script；
而Java的前身是Oak语言。下面对两种语言间的异同作如下比较：
1、基于对象和面向对象 Java是一种真正的面向对象的语言，即使是开发简单的程序，必须设计对象。

JavaScript是种脚本语言，它可以用来制作与网络无关的，与用户交互作用的复杂软件。它是一种基于对象（Object Based）和事件驱动（Event Driver）的编程语言。因而它本身提供了非常丰富的内部对象供设计人员使用。

2、解释和编译 两种语言在其浏览器中所执行的方式不一样。Java的源代码在传递到客户端执行之前，必须经过编译，因而客户端上必须具有相应平台上的仿真器或解释器，它可以通过编译器或解释器实现独立于某个特定的平台编译代码的束缚。

JavaScript是一种解释性编程语言，其源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户编由浏览器解释执行。

3、强变量和弱变量 两种语言所采取的变量是不一样的。

Java采用强类型变量检查，即所有变量在编译之前必须作声明。如: Integer x; String y; x=1234; x=4321; 其中X=1234说明是一个整数，Y=4321说明是一个字符串。

JavaScript中变量声明，采用其弱类型。即变量在使用前不需作声明，而是解释器在运行时检查其数据类型，如：
x=1234; y＝“4321“; 前者说明x为其数值型变量，而后者说明y为字符型变量。

4、代码格式不一样 Java是一种与HTML无关的格式，必须通过像HTML中引用外媒体那么进行装载，其代码以字节代码的形式保存在独立的文档中。

JavaScript的代码是一种文本字符格式，可以直接嵌入HTML文档中，并且可动态装载。编写HTML文档就像编辑文本文件一样方便。

5、嵌入方式不一样 在HTML文档中，两种编程语言的标识不同，JavaScript使用<Script>...</Script>来标识，而Java使用<applet>...</applet>来标识。

6、静态联编和动态联编 Java采用静态联编，即Java的对象引用必须在编译时的进行，以使编译器能够实现强类型检查。

JavaScript采用动态联编，即JavaScript的对象引用在运行时进行检查，如不经编译则就无法实现对象引用的检查。

2.3 本章小结 本章主要介绍了网页设计语言HTML和JavaScript， 第3章 基于对象的JAVASCRIPT语言 JavaScript语言是基于对象的（Object-Based），而不是面向对象的（object-oriented）。之所以说它是一门基于对象的语言，主要是因为它没有提供象抽象、继承、重载等有关面向对象语言的许多功能。而是把其它语言所创建的复杂对象统一起来，从而形成一个非常强大的对象系统。

虽然JavaScript语言是一门基于对象的，但它还是具有一些面向对象的基本特征。它可以根据需要创建自己的对象，从而进一步扩大JavaScript的应用范围，增强编写功能强大的Web文档。

3.1 对象的基础知识 3.1.1对象的基本结构 JavaScript中的对象是由属性(properties)和方法(methods)两个基本的元素的构成的。前者是对象在实施其所需要行为的过程中，实现信息的装载单位，从而与变量相关联；
后者是指对象能够按照设计者的意图而被执行，从而与特定的函数相联。

3.1.2 引用对象的途径 一个对象要真正地被使用，可采用以下几种方式获得：
（1）引用JavaScript内部对象；

（2）由浏览器环境中提供；

（3）创建新对象。

这就是说一个对象在被引用之前，这个对象必须存在，否则引用将毫无意义，而出现错误信息。从上面中我们可以看出JavaScript引用对象可通过三种方式获取。要么创建新的对象，要么利用现存的对象。

3.1.3 有关对象操作语句 JavaScript不是一纯面向对象的语言，它设有提供面向对象语言的许多功能，因此JavaScript设计者之所以把它你“基于对象”而不是面向对象的语言，在JavaScript中提供了几个用于操作对象的语句和关键字及运算符。

（1）、For...in语句 格式如下：
For（对象属性名 in 已知对象名） 说明：
该语句的功能是用于对已知对象的所有属性进行操作的控制循环。它是将一个已知对象的所有属性反复置给一个变量；
而不是使用计数器来实现的。

该语句的优点就是无需知道对象中属性的个数即可进行操作。

例：下列函数是显示数组中的内容：
Function showData(object) for (var X=0; X<30;X++) document.write(object[i])；

该函数是通过数组下标顺序值，来访问每个对象的属性，使用这种方式首先必须知道数组的下标值，否则若超出范围，则就会发生错误。而使For...in语句，则根本不需要知道对象属性的个数，见下：
Function showData(object) for(var prop in object) document.write(object[prop])；

使用该函数时，在循环体中，For自动将的属性取出来，直到最后为此。

（2）with语句 使用该语句的意思是：在该语句体内，任何对变量的引用被认为是这个对象的属性，以节省一些代码。

with object{ ...} 所有在with语句后的花括号中的语句，都是在后面object对象的作用域的。

（3）this关键字 this是对当前的引用，在JavaScript由于对象的引用是多层次，多方位的，往往一个对象的引用又需要对另一个对象的引用，而另一个对象有可能又要引用另一个对象，这样有可能造成混乱，最后自己已不知道现在引用的那一个对象，为此JavaScript提供了一个用于将对象指定当前对象的语句this。

（4）New运算符 虽然在JavaScript中对象的功能已经是非常强大的了。但更强大的是设计人员可以按照需求来创建自己的对象，以满足某一特定的要求。使用New运算符可以创建一个新的对象。其创建对象使用如下格式：
Newobject=NEW Object(Parameters table); 其中Newobject创建的新对象：object是已经存在的对象；

parameters table参数表；
new是JavaScript中的命令语句。

如创建一个日期新对象 newData=New Data() birthday=New Data (December 12.1998) 之后就可使NewData、birthday作为一个新的日期对象了。

3.1.4 对象属性的引用 对象属性的引用可由下列三种方式之一实现：
（1）使用点（.）运算符 university.Name=“云南省” university.city=“昆明市” university.Date=“1999“ 其中university是一个已经存在的对象，Name、City、Date是它的三个属性，并通过操作对其赋值。

（2）通过对象的下标实现引用 university[0]=“云南” university[1]=“昆明市” university[2]=“1999“ 通过数组形式的访问属性，可以使用循环操作获取其值。

function showunievsity(object) for (var j=0;j<2; j++) document.write(object[j]) 若采用For...in则可以不知其属性的个数后就可以实现：
Function showmy(object) for (var prop in this) docament.write(this[prop]); （3）通过字符串的形式实现 university[“Name“]=“云南” university[“City“]=“昆明市” university[“Date“]=“1999“ 3.1.5 对象的方法的引用 在JavaScript中对象方法的引用是非常简单的。

ObjectName.methods() 实际上methods()=FunctionName方法实质上是一个函数。

如引用university对象中的showmy（）方法，则可使用：
document.write (university.showmy()) 或：document.write(university) 如：引用math内部对象中cos()的方法 则：
with(math) document.write(cos(35)); document.write(cos(80)); 若不使用with则引用时相对要复杂些：
document.write(Math.cos(35)) document.write(math.sin(80)) 3.2 常用对象的属性和方法 JavaScript为我们提供了一些非常有用的常用内部对象和方法。用户不需要用脚本来实现这些功能。这正是基于对象编程的真正目的。

在JavaScript提供了string（字符串）、math（数值计算）和Date（日期）三种对象和其它一些相关的方法。从而为编程人员快速开发强大的脚本程序提供了非常有利的条件。

3.2.1常用内部对象 在JavaScript中对于对象属性与方法的引用，有两种情况：其一是说该对象是静态对象，即在引用该对象的属性或方法时不需要为它创建实例；
而另一种对象则在引用它的对象或方法是必须为它创建一个实例，即该对象是动态对象。

对JavaScript内部对象的引用，以是紧紧围绕着它的属性与方法进行的。因而明确对象的静动性对于掌握和理解JavaScript内部对象是具有非常重要的意义。

1、串对象 string对象：内部静态性。

访问properties和methods时，可使用（.）运算符实现。

基本使用格式：objectName.prop/methods （1）串对象的属性 该对象只有一个属性，即length。它表明了字符串中的字符个数，包括所有符号。例：
mytest=“This is a JavaScript“ mystringlength=mytest.length 最后mystringlength返回mytest字串的长度为20。

（2）串对象的方法 string对象的方法共有１９个。主要用于有关字符串在Web页面中的显示、字体大小、字体颜色、字符的搜索以及字符的大小写转换。

其主要方法如下：
锚点anchor()：该方法创建如用Html文档中一样的anchor标记。使用anchor如用Html中(A Name=““)一样。通过下列格式访问:string.anchor(anchorName)。

有关字符显示的控制方法 big字体显示, Italics()斜体字显示，bold()粗体字显示，blink()字符闪烁显示，small（）字符用小体字显示，fixed()固定高亮字显示、fontsize(size)控制字体大小等。

字体颜色方法；
fontcolor(color) 字符串大小写转换 toLowerCase()－小写转换，toUpperCase()大写转换。下列把一个给定的串分别转换成大写和小写格式: string=stringValue.toUpperCase和string=stringValue.toLowerCase。

字符搜索：indexOf[charactor,fromIndex] 从指定formIndtx位置开始搜索charactor第一次出现的位置。

返回字串的一部分字串：substring(start,end) 从start开始到end的字符全部返回。

2、算术函数的math对象 功能：提供除加、减、乘、除以外的一引些自述运算。如对数，平方根等 。

静动性：静态对象 （1）主要属性 math中提供了６个属性，它们是数学中经常用到的常数Ｅ、以１０为底的自然对数ＬＮ１０、以２为底的自然对数LN2、3.14159的PI、1/2的平方根SQRT1-2,2的平方根为SQRT2。

（2）主要方法 绝对值：abs() 正弦余弦值：sin(),cos() 反正弦反余弦 :asin(), acos() 正切反正切：tan(),atan() 四舍五入：round() 平方根：sqrt() 基于几方次的值：Pow(base,exponent) 3、日期及时间对象 功能：提供一个有关日期和时间的对象。

静动性：动态性，即必须使用New运算符创建一个实例。

例：MyDate=New Date() Date对象没有提供直接访问的属性。只具有获取和设置日期和时间的方法。

（1）获取日期的时间方法 getYear(): 返回年数 getMonth():返回当月号数 getDate(): 返回当日号数 getDay():返回星期几 getHours():返回小时数 getMintes(:返回分钟数 getSeconds():返回秒数 getTime() : 返回毫秒数 （2）设置日期和时间：
setYear();设置年 setDate():设置当月号数 setMonth():设置当月份数 setHours():设置小时数 setMintes():设置分钟数 setSeconds():设置秒数 setTime ():设置毫秒数 3.2.2 JavaScript中的系统函数 JavaScript中的系统函数又称内部方法。它提供了与任何对象无关的系统函数，使用这些函数不需创建任何实例,可直接用。

1、返回字符串表达式中的值：
方法名：eval（字串表达式），例：
test=eval(“8+9+5/2“); 2、返回字符串ASCI码：
方法名：unEscape (string) 3、返回字符的编码：
方法名：escape(character) 4、返回实数：
parseFloat(floustring); 5、返回不同进制的数：
parseInt(numbestring ,rad.X) 其中radix是数的进制，numbs字符串数 3.2.3举例 下面是一个时钟显示的JavaScript文档。在文档中用了非常多的函数。

Test4_1.htm <html> <head> <style TYPE=“text/css“> <style> </style> <title>时钟</title> <script LANGUAGE=“JavaScript“> function showClock() { } function hideClock() { } var timerID = null var timerRunning = false function stopClock() { if(timerRunning) clearTimeout(timerID); timerRunning = false document.clock.face.value = ““; } function showTime() { var now = new Date(); var year = now.getYear(); var month = now.getMonth() + 1; var date = now.getDate(); var hours = now.getHours(); var mins = now.getMinutes(); var secs = now.getSeconds(); var timeVal = ““; timeVal += ((hours <= 12) ? hours : hours - 12); timeVal += ((mins < 10) ? “:0“ : “:“) + mins; timeVal += ((secs <= 10) ? “:0“ : “:“) + secs; timeVal += ((hours < 12) ? “AM“ : “PM“); timeVal += ((month < 10) ? “ on 0“ : “ on “) + month + “-“; timeVal += date + “-“ + year; document.clock.face.value = timeVal; timerID = setTimeout(“showTime()“, 1000); timerRunning = true } function startClock() { stopClock(); showTime(); } function windowOpener( indexnum ){ var loadpos=“date.html“+“#“+indexnum; controlWindow=window.open(loadpos,“date“,“toolbar=no,location=no, directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes, width=620,height=400“); } </script> </head> <body onLoad=“startClock()“ > <p align=“center“><big><span style=“background-color: rgb(45,45,45)“> <font face=“Arial“>form</font> &nbsp; <font face=“宋体“>时钟</font> </span></big></p> <p align=“center“>　</p> <div align=“center“><center> <table border=“0“ cellspacing=“0“ cellpadding=“0“> <tr> <td width=“100%“><form NAME=“clock“ onSubmit=“0“> <div align=“center“><center><p><input TYPE=“text“ NAME=“face“ size=“20“ VALUE style=“background-color: rgb(192,192,192)“> </p> </center></div> </form> </td> </tr> </table> </center></div> </body> </html> 3.3 本章小结 本讲介绍了基于对象的JavaScript中常用内部对象属性、方法的使用。

第4章 内部对象系统的使用 使用浏览器的内部对象系统，可实现与HTML文档进行交互。它的作用是将相关元素组织包装起来，提供给程序设计人员使用，从而减轻编程人的劳动，提高设计Web页面的能力。

4.1浏览器对象层次及其主要作用 除了前面提到过的文档document对象外，Navigator浏览器中还提供了窗口（Window）对象以及历史（History）和位置（Location）对象。

浏览器对象(Navigator)：提供有关浏览器的信息 窗口对象(Windows)：Window对象处于对象层次的最顶端，它提供了处理Navigator窗口的方法和属性。

位置对象(Location)：Location对象提供了与当前打开的URL一起工作的方法和属性，它是一个静态的对象。

历史对象(History)：History对象提供了与历史清单有关的信息。

文档对象(Document)：document对象包含了与文档元素(elements)一起工作的对象，它将这些元素封装起来供编程人员使用。

网页设计与制作人员利用这些对象，可以对WWW浏览器环境中的事件进行控制并作出处理。在JavaScript中提供了非常丰富的内部方法和属性，从而减轻了编程人员的工作，提高编程效率。这正是基于对象与面向对象的根本区别所在。在这些对象系统中，文档对象属于非常重要的，它位于最低层，但对于我们实现Web页面信息交互起作关键作用。因而它是对象系统的核心部分。

4.2文档对象功能及其作用 在Navigator浏览器中，document文档对象是核心是，同时也是最重要的。见表4-1所示。

表4-1 document对象 Links Anchor Form Method Prop 链接对象 锚对象 窗体对象 方法 对象 从表4-1中可以看出，document对象的主要作用就是把这些基本的元素（如links,anchor等）包装起来，提供给编程人员使用。从另一个角度看，document对象中又是由属性和方法组成。

4.2.1 document中三个主要的对象 在document中主要有：links,anchor,form等三个最重要的对象：
（1）anchor锚对象：
anchor对象指的是<A Name=...> </A>标识在HTML源码中存在时产生的对象。它包含着文档中所有的anchors信息。

（2）链接links对象 link对象指的是用<A Href=...> </A>标记的连接一个超文本或超媒体的元素作为一个特定的URL。

（3）窗体（Form）对象 窗体对象是文档对象的一个元素，它含有多种格式的对象储存信息，使用它可以在JavaScript脚本中编写程序进行文字输入，并可以用来动态改变文档的行为。通过document. Forms[]数组来使得在同一个页面上可以有多个相同的窗体,使用forms[]数组要比使用窗体名字要方便得多。

下面就是一个使用窗体数组和窗体名字的例子。该程序使得两个窗体中的字段内容保持一致。

Test6_1.htm <Html> <head> </head> <body> <form NAME=“my“> <input type=text onChange=“document.forms[0].elements[0].value=this.value;“> </form> </body> </html> 其中用了OnChnge事件(当窗体内容改变时激发)。第一个使用窗体名字标识my,第二个使用窗体数组Forms[]。其效果是一致。

4.2.2文档对象中的attribute属性 document对象中的attribute属性，主要用于在引用Href标识时，控制着有关颜色的格式和有关文档标题、文档原文件的URL以及文档最后更新的日期。这部分元素的主要含义如下：
（1）链接颜色：alinkcolor 这个元素主要用于，当选取一个链接时，链接对象本身的颜色就按alinkcolo r指定改变。

（2）链接颜色：linkcolor 当用户使用<A Href=...> Text string </A>链接后，Textstring的颜色就会按Linkcolor所指定的颜色更新。

（3）浏览过后的颜色：VlinkColor 该属性表示的是已被浏览存储为已浏览过的链接颜色。

（4）背景颜色：bgcolor 该元素包含文档背景的颜色。

（5）前景颜色：Fgcolor 该元素包含HTML文档中文本的前景颜色。

4.2.3文档对象的基本元素 （1）窗体属性：
窗体属性是与HTML文档中<Form>...</Form>相对应的一组对象在HTML文档所创建的窗体数，由length指定。通过document.forms.length反映该文档中所创建的窗体数目。

（2）锚属性：anchors 该属性中，包含了HTML文档的所有<A> </A>标记为Name=...的语句标识。所有“锚”的数目保存在document.anchors.length中。

（3）链接属性：links 链接属性是指在文档中<A>...</A>的由Href=...指定的数目，其链接数目保存在document.links.length中。

4.3内部对象系统实例 下面我们通过一个例子来说明文档对象的综合应用。输出结果见图4-2所示。

Test6_2.htm <html> <head> </HEAD> <BOdy> <Form Name=“mytable“> 请输入数据：
<Input Type=“text“ Name=“text1“ Value=““> </Form> <A name=“Link1“ href=“test31.htm“>链接到第一个文本</a><br> <A name=“Link2“ href=“test32.htm“>链接到第二个文本</a><br> <A name=“Link2“ href=“test33.htm“>链接到第三个文本</a><br> <A href=“#Link1“>第一锚点</a> <A href=“#Link2“>第二锚点</a> <A Href=“#Link3“>第三锚点</a> <BR> <Script Language=“JavaScript“> document.write(“文档有“+document.links.length+“个链接“+“<br>“); document.write(“文档有“+document.anchors.length+“个锚点“+“<br>“); document.write(“文档有“+document.forms.length+“个窗体“); </script> </body> </HTML> 图4-2 例子2：下列程序随机产生每日一语。

test6_3.html <HTML> <HEAD> <script Language=“JavaScript“> <!-- tips = new Array(6); tips[0]=“每日一语（1）“; tips[1]=“每日一语（2）“; tips[2]=“每日一语（3）“; index = Math.floor(Math.random() * tips.length); document.write(“<FONT SIZE=8 COLOR=DARKBLUE>“ + tips[index]+“</FONT>“); </Script> </HEAD> </BODY> </HTML> 图4-3 4.4本章小结 本章主要介绍内部对象系统及其使用方法。

第5章 WEB页面信息的交互——窗体与框架 要实现网页的动态交互，必须掌握有关窗体对象（Form）和框架对象（Frames）更为复杂的知识。

5.1窗体基础知识 窗体对象可以使设计人员能用窗体中不同的元素与客户机用户相交互，而用不着在之前首先进行数据输入，就可以实现动态改变Web文档的行为。

5.1.1窗体对象 窗体（Form）：它构成了Web页面的基本元素。通常一个Web页面有一个窗体或几个窗体，使用Forms[]数组来实现不同窗体的访问。

<form Name=Form1> <INPUT type=text...> <Input type=text...> <Inpup byne=text...> </form> <form Name=Form2> <INPUT type=text...> <Input type=text...> </form> 在Forms[0]中共有三个基本元素，而Forms[1]中只有两个元素。

窗体对象最主要的功能就是能够直接访问HTML文档中的窗体，它封装了相关的HTML代码：
<Form Name =“表的名称“ Target =“指定信息的提交窗口“ action =“接收窗体程序对应的URL“ Method =信息数据传送方式(get/post) enctype =“窗体编码方式“ [onsubmit =“JavaScript代码“]> </Form> 5.1.2 窗体对象的方法 窗体对象的方法只有一个--submit()方法，该方法主要功用就是实现窗体信息的提交。如提交Mytest窗体，则使用下列格式：
document.mytest.submit() 5.1.3 窗体对象的属性 窗体对象中的属性主要包括以下：elements name action target encoding method。

除Elements外，其它几个均反映了窗体中标识中相应属性的状态，这通常是单个窗体标识；
而elements常常是多个窗体元素值的数组，例：
elements[0].Mytable.elements[1] 5.1.4 访问窗体对象 在JavaScript中访问窗体对象可由两种方法实现：
（1）通过访问窗体 在窗体对象的属性中首先必须指定其窗体名，而后就可以通过下列标识访问窗体如：document.Mytable()。

（2）通过数组来访问窗体 除了使用窗体名来访问窗体外，还可以使用窗体对象数组来访问窗体对象。但需要注意一点，因窗体对象是由浏览器环境的提供的，而浏览器环境所提供的数组下标是由0到n。所以可通过下列格式实现窗体对象的访问：
document.forms[0] document.forms[1] document.forms[2]... 5.1.5 引用窗体的先决条件 在JavaScript中要对窗体引用的条件是：必须先在页面中用标识创建窗体，并将定义窗体部分放在引用之前。

5.2 窗体中的基本元素 窗体中的基本元素由按钮、单选按钮、复选按钮、提交按钮、重置按钮、文本框等组成。

在JavaScript中要访问这些基本元素，必须通过对应特定的窗体元素的数组下标或窗体元素名来实现。每一个元素主要是通过该元素的属性或方法来引用。其引用的基本格式见下：
formName.elements[].methadName (窗体名.元素名或数组.方法) formName.elemaent[].propertyName(窗体名.元素名或数组.属性) 下面分别介绍：
（1）Text单行单列输入元素 功能：对Text标识中的元素实施有效的控制。

基本属性：
Name：设定提交信息时的信息名称。对应于HTML文档中的Name。

Value：用以设定出现在窗口中对应HTML文档中Value的信息。

defaultvalue：包括Text元素的默认值 基本方法：
blur()：将当前焦点移到后台。

select()：加亮文字。

主要事件：
onFocus：当Text获得焦点时，产生该事件。

OnBlur：从元素失去焦点时，产生该事件。

Onselect：当文字被加亮显示后，产生该文件。

onchange：当Text元素值改变时，产生该文件。

例：
<Form name=“test“> <input type=“text“ name=“test“ value=“this is a javascript“ > </form> ... <script language =“Javascirpt“> document.mytest.value=“that is a Javascript“; document.mytest.select(); document.mytest.blur(); </script> （2）textarea多行多列输入元素 功能：实施对Textarea中的元素进行控制。

基本属性 name：设定提交信息时的信息名称，对应HTML文档Textarea的Name。

Value：用以设定出现在窗口中对应HTML文档中Value的信息。

Default value：元素的默认值。

方法：
blur()：将输入焦点失去 select()：将文字加亮后 事件：
onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后，产生该文件 Onchange:当文字值改变时，产生该事件 Onselect:当文字加亮后，产生该文件 （3）Select选择元素 功能：实施对滚动选择元素的控制。

属性：
name:设定提交信息时的信息名称，对应文档select中的name。

Length:对应文档select中的length options:组成多个选项的数组 selectIndex;该下标指明一个选项 select在中每一选项都含有以下属性：
Text:选项对应的文字 selected:指明当前选项是否被选中 Index:指明当前选项的位置 defaultselected:默认选项 事件：
OnBlur：当select选项失去焦点时，产生该文件。

onFocas:当select获得焦点时，产生该文件。

Onchange:选项状态改变后，产生该事件。

（4）Button按钮 功能：实施对Button按钮的控制。

属性：
Name:设定提交信息时的信息名称，对应文档中button的Name。

Value:用以设定出现在窗口中对应HTML文档中Value的信息。

方法：
click()该方法类似于一个按下的按钮。

事件：
onclick当单击button按钮时，产生该事件。

例 ：
<Form name=“test“> <input type=“button“ name=“testcall“ onclick=tmyest()> </form> ... <script language=“javascirpt“> document.elements[0].value=“mytest“; //通过元素访问 或 document.testcallvalue=“mytest“; // 通过名字访问 </script> ..... （5）checkbox检查框 功能：实施对一个具有复选框中元素的控制。

属性：
name:设定提交信息时的信息名称。

Value:用以设定出现在窗口中对应HTML文档中Value的信息。

Checked:该属性指明框的状态true/false. defauitchecked:默认状态 方法：
click()该方法使得框的某一个项被选中。

事件：
Onclick：当框的选被选中时，产生该事件。

（6）radio无线按钮 功能：实施对一个具单选功能的无线按钮控制。

属性：
Name：设定提交信息时的信息名称，对应HTML文档中的radio的name相同 Value：用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档中的radio的name。

length：单选按钮中的按钮数目。

defalechecked:默认按钮。

checked:指明选中还是没有选中。

index:选中的按钮的位置。

方法：
chick():选定一个按钮。

事件：
onclick:单击按钮时，产生该事件。

（7）hidden:隐藏 功能：实施对一个具有不显示文字并能输入字符的区域元素的控制。

属性：
name:设定提交信息时的信息名称，对应HTML文档的hidden中的Name。

Value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档hidden中的value。

defaleitvalue:默认值 （8）Password口令 功能：实施对具有口令输入的元素的控制。

属性：
Name:设定提交信息时的信息名称，对应HTML文档中password中的name。

Value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档中password中的Value。

defaultvalu:默认值 方法：
select():加亮输入口令域。

blur():使这丢失passward输入焦点。

focus():获得password输入焦点。

（9）submit提交元素 功能：实施对一个具有提交功能按钮的控制。

属性：
name:设定提交信息时的信息名称，对应HTML文档中submit。

Value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档中value。

方法 click()相当于按下submit按钮。

事件：
onclick()当按下该按钮时，产生该事件。

5.3窗体对象实例 下面我们演示通过点击一个按钮（red）来改变窗口颜色，点击“调用动态按钮文档”调用一个动态按钮文档。

test8_1.htm <html> <head> <Script Language=“JavaScript“> //原来的颜色 document.bgColor=“blue“; document.vlinkColor=“white“; document.linkColor=“yellow“; document.alinkcolor=“red“; //动态改变颜色 function changecolor(){ document.bgColor=“red“; document.vlinkColor=“blue“; document.linkColor=“green“; document.alinkcolor=“blue“; } </script> </HEAD> <body bgColor=“White“ > <A href=“test8_2.htm“> 调用动态按钮文档</a> <form > <Input type=“button“ Value=“red“ onClick=“changecolor()“> </form> </BODY> </HTML> 输出结果见图5-1所示。

图5-1 调用动态按钮图 动态按钮程序。

test8_2.htm <HTML> <HEAD> </HEAD> <p align=“center“>　</p> <div align=“center“><center> <table border=“0“ cellspacing=“0“ cellpadding=“0“> <tr> <td width=“100%“><form name=“form2“ onSubmit=“null“> <p><input type=“submit“ name=“banner“ VALUE=“Submit“ onClick=“alert(＇You have to put an ＼＇action=[url]＼＇ on the form tag!!＇)“> <br> <script language=“JavaScript“> var id,pause=0,position=0; function banner() { // variables declaration var i,k,msg=“ 这里输入你要的内容“;// increase msg k=(30/msg.length)+1; for(i=0;i<=k;i++) msg+=“ “+msg; // show it to the window document.form2.banner.value=msg.substring(position,position-30); // set new position if(position++==msg.length) position=0; // repeat at entered speed id=setTimeout(“banner()“,60); } // end --> banner(); </script></p> </form> </td> </tr> </table> </center></div> <p>　</p> <BODY> <A href=“test8_1.htm“> 返回</a> </BODY> </HTML> 图5-2 动态按钮网页图 本讲介绍了使用JavaScript脚本实现Web页面信息交互的方法。其中主要介绍了窗体中的基本元素的主要功能和使用。

5.4 框架 框架Frames最主要功用是“分割“视窗，使每个“小视窗“能显示不同的HTM L文件，不同框架之间可以互动(interact)，这就是说不同框架之间可以交换讯息与资料。例如:假设您开了两个frames，第一个frame可显示书的目录，第二个frame则显示章节的具体内容。

框架可以将屏幕分割成不同的区域，每个区域有自己的URL，通过Frames[]数组对象来实现不同框架的访问。实际上框架对象本身也一类窗口，它继承了窗口对象的所有特征，并拥有所有的属性和方法。利用框架的例子具体说明，见图5-3所示。

图5-3 框架对象 <HTML> <HEAD> </HEAD> <Frameset Rows=“20%,80%“> <frame src=“test9_1.html“> <Frameset Cols=“50%,50%“> <frame src=“test9_2.html“> <frame src=“test9_3.html“> </Frameset> </Frameset> </HTML> 以上HTML标识将屏幕分成三个框架。先将窗口分成以二行为单位的窗口，之后再按分成二个窗口。并在相应的框架中放入自己的HTML文档。

通过[Framset]告诉浏览器您要设置几个框架；
rows这项参数告诉浏览器您想将视窗分割成几列；
而cols这项参数是告诉浏览器您想将视窗分割成几行。

可以用很多组的 <frameset...> tags 将视窗分割得更复杂。

可以给每个frame一个“名字”(name)。frame的名字在JavaScript语法中的地位非常重要。

可以用 <src> 告诉浏览器要载入的HTML文件。

5.5 框架的访问 在前面我们介绍过使用document.forms[]实现单一窗体中不同元素的访问。而要实现框架中多窗体的不同元素的访问，则必须使用window对象中的Frames属性。Frames属性同样也是一个数组，他在父框架集中为每一个子框架设有一项。通过下标实现不同框架的访问：
parent.frames[Index1].docuement.forms[index2] 通过parent.frames.length确定窗口中窗体的数目。

除了使用数组下标来访问窗体外还可以使用框架名和窗体名来实现各元素的访问：parent.framesName.decument.formNames.elementName.(m/p) 通过一个具体的实例，来说明利用JavaScript脚本在WEB中实现更为复杂的信息交互。该例子是在一个多窗口中实现窗体信息的动态交互，在程序中首先在浏览器窗口中制作三个用于窗体交互的窗口，每个窗体窗口实现不同信息的动态交互。

tset9.html为主调用文档它首先将窗口划分为具有二行的窗体，尔后再将第二行的窗体划分为具有二列的窗体；

test9-1.html为显示标题文档；

test9_2.html为第二框架文档其中需要注意的是：
通过JavaScript脚本将所示的“云南省”和“四川省”分别改为“昆明市”和“成都市”；

test7_3.html为第三框架文档。

主调文档 主要作用是将窗口划分为具有二行的窗体,尔后再将第二行的窗体划分为具有二列的窗体。

Test9.htm <HTML> <HEAD> </HEAD> <Frameset Rows=“10%,90%“> <frame src=“test9_1.htm“> <Frameset Cols=“40%,60%“> <frame src=“test9_2.htm“> <frame src=“test9_3.htm“> </Frameset> </Frameset> </HTML> 第一个框架 主要作用是显示标题文档。

Test9_1.htm <HTML> <HEAD> </HEAD> <H2>使用框架实现WEB交互</H2> </HTML> 第二个框架 主要作用是实现交互。可以通过JavaScript脚本将所示的“云南省”和“四川省”分别改为“昆明市”和“成都市”。

Test9_2.htm <HTML> <HEAD> </HEAD> <Body> <Form name=“test9_1“> 请选择城市：<BR> <Select name=“select1“ Multiple> <Option>云南省 <Option>四川省 <Option>贵州省 <Option>山东省 <Option>江苏省 <Option>浙江省 <Option>安徽省 <Option>河南省 </select><BR> <HR> <Input Type=“Submit“ name=““ value=“提交“> <Input Type=“reset“ name=““ value=“复位“> </Form> <pre> <script language=“JavaScript“> document.test9_1.elements[0].options[0].text=“昆明市“; document.test9_1.elements[0].options[1].text=“成都市“; </script> </pre> </Body> </HTML>　 第三个框架：主要作用是实现交互。

Test9_3.htm <HTML> <HEAD> </HEAD> <Body> <Form name=“test9_2“> 请输入用户名：
<Input Type=“text“ name=“text1“ Value=““ Size=20><BR> <HR> 请选择: <Input Type=“Checkbox“ name=“checkbox1“ Value=“qb“>全部信息<BR> <Input Type=“Checkbox“ name=“checkbox2“ Value=“bf“>部分信息<BR> <Input Type=“Checkbox“ name=“checkbox3“ Value=“sy“>所有城市<br> <HR> <Input Type=“Submit“ name=““ value=“提交“> <Input Type=“reset“ name=““ value=“复位“> <BR> </Form> <script language=“JavaScript“> document.test9_2.elements[0].value=“劳动和社会保障“; document.test9_2.elements[1].checked=true; document.test9_2.elements[2].checked=true; document.test9_2.elements[3].checked=false; </script> </Body> </HTML> 在浏览器中的结果见图5-4所示。

图 5-4 在浏览器中结果 5.6 本章小结 本章主要介绍框架中的基本元素的主要功能和使用，利用JavaScript脚本可以非常方便、灵活地实现Web页面更为复杂的信息交互，这是HTML标识语言所不能具备的。从中可以了解到JavaScript是Web涉及人员的良好工具。

第6章 结 论 不知不觉中网页设计与制作的毕业毕业设计将要结束了，这门课程所包含内容的丰富是让我从没有想到的。在整个的学习过程中，我学习了Flash、Dreamwave、Javascript、Html语言、网站建设的基本思想等重要内容。到现在为止，我还是很庆幸能够学到这么多的内容。

网页设计与制作毕业设计是在指导教师的悉心指导下独立完成的。虽然整个整个内容还有很多不足，但是我的确能够感到在我制作过程中技能的提高。在今后的学习生活中，我将不断提高自己网页设计与制作的能力和水平，从而弥补在本次毕业设计中的不足。

致 谢 本论文历时两个多月，我系统综合地将我所学的知识运用于毕业设计的全过程。在完成毕业设计中，首先我要感谢我的指导教师。老师耐心细致地指导我毕业设计，提出了很多精辟而富有建设性的建议。老师认真负责的工作态度，严谨的治学态度都给我留下了深刻的印象，在学习上给予了我极大的关心和帮助，在此表示衷心感谢！ 同时，感谢学院为我提供了一个良好的学习环境，感谢学院的领导和老师们！他们无微不至的关怀、精心的培养使我到了很多的知识，终生受益！ 参考文献 [1] 徐国平.网页设计与制作[M].北京：机械工业出版社.2008年. [2] 胡珊.个人网页设计与制作[J].电脑学习.2009年，第2期，28-29页。

[3] 周琦.关于网页设计与制作技术的探讨[J]. 电脑知识与技术, 2009年,第26期.7376-7378页。

[4] 唐永明.浅议网页设计与制作[J].科技信息.2009年, 第20期,193页。

[5] 张明月.网页设计与制作研究[J].邯郸职业技术学院学报.2009年，第2期,82-84页。

[6] 王君学.网页设计与制作[J].北京：人民邮电出版社.2009年. [7] 吴以欣,陈小宁.动态网页设计与制作——CSS+JavaScript[M].人民邮电出版社.2009年。

[8] 泽卡斯著，李松峰，曹力译.JavaScript高级程序设计(第2版) [J].人民邮电出版社.2010年。

[9] 周爱民.JAVASCRIPT语言精髓与编程实践[J]. 北京：电子工业出版社.2008年。