电 子 科 技 大 学 毕 业 设 计（论 文）
论文题目：网页设计与制作
学习中心（或办学单位）：电子科技大学
指导老师：官晓波 职 称： 高级实验师
学生姓名：钟华 学 号: v[1**********]
专 业：计算机科学与技术
2012年 06月 12日 电 子 科 技 大 学
毕业设计（论文）任务书
题目：网页设计与制作
任务与要求：
利用所学的语言做一个以介绍低碳生活为主题的静态网页以及网页 时间： 2012 年 2 月28 日 至 共 8 周
学习中心：（或办学单位）电子科技大学 学生姓名：钟华 专业： 计算机科学与技术
指导单位或教研室：电子科技大学中山学习中心 指导教师：
官晓波
职 称：高级实验师
学 号：v[1**********]
2012 年 6 月 4 日
2012年 6月 12日
毕业设计(论文)进度计划表
本表作评定学生平时成绩的依据之一。
摘要
网页设计作为用户界面交互设计的延伸，实在新的媒体和新的技术支持实现一个全新的设计创作领域。设计创作网页与循环其特有的特点和结构思路，具备可实际行和外观时尚。本论文将对网页设计的开发语言开展研究和讨论。在网页设计与制作语言的基础上， 着重使用 HTML作为工具语言进行网页设计与制作 的实际操作，分别对基于对象的 HTML、css、JavaScript进行详细描述并实现网页的开发。
关键字：制作、设计、HTML
Summary
Web design as an extension of the interactive user interface design, it is a new media and new technologies to support a whole new field of creative design. Design creation of web pages and circulation of its unique characteristics and structure of ideas with the actual line and stylish. The web design of this paper will develop language tools to carry out the study and discussion. On the basis of a website on the design and production of language, focus on using HTML web design and production operations as a tool for language, a detailed description of the object-based HTML, CSS, JavaScript and web page development.
Keywords: production, design, HTML
目录
第一章 绪论 .................................................................................................. 7
1.网页设计概述 .......................................................................................... 7 1.2网页设计的要素 .................................................................................... 7 第二章 HTML语言概述 ................................................................................ 8 2.1什么是HTML文件 ............................................................................... 8 2.3HTML格式 ............................................................................................ 8 2.5HTML样式 .......................................................................................... 10 2.6HTML链接 .......................................................................................... 10 2.7HTML表格 .......................................................................................... 12 2.8HTML列表 .......................................................................................... 14 2.9HTML表单 .......................................................................................... 14 第三章 Css的运用 ..................................................................................... 18
3.1Css简介 ............................................................................................. 18 3.2 Css 基础语法 .................................................................................... 18 3.3派生选择器 ......................................................................................... 19 3.4 id 和类选择器 .................................................................................... 19 3.5 Css 框架型结构 ................................................................................. 20 第四章Javascript的运用 ............................................................................. 23 4.1JavaScript 介绍 .................................................................................. 23 4.2HTML包含JavaScript 的方法 ............................................................ 23 4.3 JavaScript 语句，注释与变量............................................................ 24 4.4JavaScript常用运算符 ........................................................................ 24 4.5JavaScript 条件语句 ........................................................................... 25 4.6函数的定义与应用 .............................................................................. 28 4.7HTML事件处理 ................................................................................... 28 第五章 WEB页面信息的交互——窗体与框架 ............................................ 34 5.1窗体基础知识 ..................................................................................... 34 5.2 窗体中的基本元素 ............................................................................. 35 5.3窗体对象实例 ..................................................................................... 39 5.4 框架 ................................................................................................... 43 5.5 框架的访问 ........................................................................................ 44 第六章 结束语 ............................................................................................ 48
致 谢 .......................................................................................................... 48 参考文献 ..................................................................................................... 49
第一章 绪论
随着 21 世纪的到来，人们更深切地感受到计算机在生活和工作中的作用越 来越重要，越来越来的职业需要具有计算机的应用技能。掌握计算机是职业的需 要，更是事业发展的需要。网页设计与制作是计算机能力的具体表现，本章主要 介绍网页设计的相关知识。
1.网页设计概述
网页是企业向用户和网民提供信息(包括产品和服务)的一种方式, 是企业开 展电子商务的基础设施和信息平台，离开网站（或者只是利用第三方网站 ） 去谈 电子商务是不可能的。企业的网址被称为“网络商标” ，也是企业无形资产的组 成部分，而网站是 INTERNET 上宣传和反映企业形象和文化的重要窗口。
1.2网页设计的要素
网页设计的两大要素是：整体风格和色彩搭配。
一、确定网页的整体风格 在这里，我提供给大家一些参考经验： 1．将你的标志 logo，尽可能的放在每个页面上最突出的位置。 2．突出你的标准色彩。
3．总结一句能反映贵站精髓的宣传标语！
4．相同类型的图像采用相同效果，比如说标题字都采用阴影效果，那么在 二、网页色彩的搭配
1．用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度， 2．用两种色彩。先选定一种色彩，然后选择它的对比色。
3．用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；
网页中出现的所有标题字的阴影效果的设置应该是完全一致的！
这样的页面看起来色彩统一，有层次感。
或者土黄，土灰，土蓝。 在网页配色中，还要切记一些误区：
电子科技大学毕业论文（设计） 网页设计与制作
1．不要将所有颜色都用到，尽量控制在三至五种色彩以内。 2．背景和前文的对比尽量要大(绝对不要用花纹繁复的图案作背景)，以便 突出主要文字内容。
第二章 HTML语言概述
2.1什么是HTML文件
HTML的英文全称是Hypertext Marked Language，中文叫做“超文本标记语言”。 和一般文本的不同的是，一个HTML文件不仅包含文本内容，还包含一些Tag，中文称“标记”。 一个HTML文件的后缀名是.htm或者是.html。 用文本编辑器就可以编写HTML文件。 下面写个小HTML文件
Title of page
This is my first homepage. This text is bold
2.2 HTML元素
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。 HTML 元素以开始标签起始 HTML 元素以结束标签终止 元素的内容是开始标签与结束标签之间的内容 某些 HTML 元素具有空内容（empty content） 空元素在开始标签中进行关闭（以开始标签的结束而结束） 大多数 HTML 元素可拥有属性
2.3HTML格式
HTML定义了一些文本格式的Tag
，比如利用Tag，可以将字体变成粗体或者斜体。从下面的示例，你可以了解各种文本格式Tag如何改变HTML文本的显示。
2.4 HTML 的特殊字符显示
有些字符在HTML里有特别的含义，比如小于号
2.5HTML样式
style 属性的作用： 提供了一种改变所有 HTML 元素的样式的通用方法。 样式是 HTML 4 引入的，它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式， 能够通过使用 style 属性直接将样式添加到 HTML 元素， 或者间接地在独立 的样式表中（CSS 文件）进行定义。
2.6HTML链接
HTML 使用 （锚）标签来创建连接另一个文档的链接。 锚可以指向网络上的任何资源：一张 HTML 页面，一幅图像，一个声音或视频文件等 等。
1）a和href属性 HTML用来表示超链接，英文叫anchor。
可以指向任何一个文件源：一个HTML网页，一个图片，一个影视文件等。用法如下：
链接的文字
点击当中的内容，即可打开一个链接文件，href属性则表示这个链接文件的路径。比如链接到admin5.com/html站点首页，就可以这样表示： 2）target属性使用 title 属性，可以让鼠标悬停在超链接上的时候，显示该超链接的文字注释。
3）name属性 使用name属性，可以跳转到一个文件的指定部位。 使用name属性，要设置一对。一是设定name的名称，二是设定一个href指向这个name;
4)链接到email属性 在网站中，你经常会看到“联系我们”的链接，一点击这个链接，就会触发你的邮件客户端，比如Outlook Express，然后显示一个新建mail的窗口。用可以实现这样的功能。 代码如：
这是一个最简单的邮箱地址的链接：
这个邮箱地址的链接写了subject内容：
这个邮箱地址链接写了to, cc, bcc, subject, body的内容：
href=
注:空格请用%20表示。
显示效果如下图：
图2-1
2.7HTML表格
表格由
标签来定义。每个表格均有若干行（由
标签定义） ，每行被分割 为若干单元格（由
标签定义） 。字母 td 指表格数据（table data） ，即数据单元格的内 容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 示列如图2-2：
表格所用到的Tag：整个表格开始要用table；每一行开始要用tr；每一单元格开始要用td。
只有一行(Row)一列(Column)的表格
100
一行三列的表格
100
200
300
两行三列的表格
100
200
300
400
500
600
图2-2
2.8HTML列表
无序列表 无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。 无序列表始于
标签。每个列表项始于
* 。 有序列表 同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于
标签。每个列表项始于
* 标签。 示列如图2-3： 列分frame
图2-3
2.9HTML表单
表单是一个包含表单元素的区域。 表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入 信息的元素。 表单使用表单标签（）定义。 10. HTML 框架框架结构标签（）定义如何将窗口分割为框架 每个 frameset 定义了一系列行或列 rows/columns 的值规定了每行或每列占据屏幕的面积 Css
示列如图2-4：
输入用户姓名
action=
图2-4
2.10 HTML图片
用 这个 Tag 可以在HTML里面插入图片。最基本的语法如下：
假使浏览器没有载入图片的功能，浏览器就会转而显示Alt属性的值。其实，现在大多数浏览器都支持图片载入。在此介绍Alt属性，是因为它的另外一个重要功能。目前搜索引擎抓取工具无法识别图像中所含的文字，所以用ALT属性写上图片的说明，便于搜索引擎抓取你网页的内容 示列如图2-5：
将鼠标停留在图片上，你可以看到Alt属性里写的内容。
图2-5
2.11 HTML字体的大小
在HTML里，可以用font这个元素及其属性来设定字体的大小，颜色和字体风格。字体大小用字体大小属性(size)来设定字体的大小。示例代码如下：
字体大小 font size
如图2-6
第三章 Css的运用
3.1Css简介
随着Internet的迅猛发展，HTML被广泛应用，上网的人们当然希望网页做得漂亮些，因此HTML排版和界面效果的局限性日益暴露出来。为了解决这个问题，人们也走了不少弯路，用了一些不好的方法，比如给HTML增加很多的属性结果将代码变得很臃肿，将文本变成图片，过多利用Table来排版，用空白的图片表示白色的空间等。直到CSS出现。CSS可算是网页设计的一个突破，它解决了网页界面排版的难题。可以这么说，HTML的Tag主要是定义网页的内容(Content)，而CSS决定这些网页内容如何显示(Layout)。CSS的英文是Cascading Style Sheets，中文可以翻译成串联式样式表。CSS按其位置可以分成三种：1)内嵌样式(Inline Style) 2)内部样式表(Internal Style Sheet) 3)外部样式表(External Style Sheet) 示列如图3-1：
内嵌式样式(Inline Style)
图3-1
3.2 Css 基础语法
CSS 语法由三部分构成：选择器、属性和值： selector {property: value} 选择器 (selector) 通常是你希望定义的 HTML 元素或标签，属性 (property) 是
你希望 改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组 成了一个完整的样式声明（declaration） ： body {color: blue} 上面这行代码的作用是将 body 元素内的文字颜色定义为蓝色。 在上述例子中， body 是 选择器，而包括在花括号内的的部分是声明。声明依次由两部分构成：属性和值，color 为 属性，blue 为值。 示列如图3-2：
图3-2
3.3派生选择器
通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。 在 CSS1 中，通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors)，这是由于它们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中，它们 称为派生选择器，但是无论你如何称呼它们，它们的作用都是相同的。 派生选择器允许你根据文档的上下文关系来确定某个标签的样式。 通过合理地使用派生 选择器，我们可以使 HTML 代码变得更加整洁。
3.4 id 和类选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 id 选择器以
3.5 Css 框架型结构
CSS 框模型 (Box Model) 规定了元素框处理元素内容、 内边距、 边框 和 外边距 的方 式。 元素框的最内部分是实际的内容， 直接包围内容的是内边距。 内边距呈现了元素的背景。 内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何 元素。 内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表 设置外边距和内边距。 可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样 式。这可以分别进行，也可以使用通用选择器对所有元素进行设置： 在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外 边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。 假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框 达到 100 个像素，就需要将内容的宽度设置为 70 像素 示列如图3-3：
字体大小属性 font-size
这段文字大小是10pt。
图3-3
3.6定为基础和相对绝对定位
CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一 部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。 定位的基本思想很简单， 它允许你定义元素框相对于其正常位置应该出现的位置， 或者 相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让 人吃惊。要知道，用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感 到奇怪。 另一方面，CSS1 中首次提出了浮动，它以 Netscape 在 Web 发展初期增加的一个功 能为基础。浮动不完全是定位，不过，它当然也不是正常流布局。我们会在后面的章节中明 确浮动的含义。 CSS 有三种基本的定位机制：普通流、浮动和绝对定位。 除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元 素在 X(HTML) 中的位置决定。 块级框从上到 下 一个接一个地排列，框
之间的垂直距离是由框的垂直外边距计算出来。 行内框在一行中水平布置。 可以使用水平内边距、 边框和外边距调整它们的间距。 但是， 垂直内边距、 边框和外边距不影响行内框的高度。 由一行形成的水平框称为行框 （Line Box） ， 行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。 在下面的章节，我们会为您详细讲解相对定位、绝对定位和浮动。 CSS 相对定位 相对定位是一个非常容易掌握的概念。 如果对一个元素进行相对定位， 它将出现在它所 在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移 动。 如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设 置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。 CSS 绝对定位 绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对 定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。 普通流中其它元素的布局就像绝对定位的元素不存在一样：
第四章Javascript的运用
4.1JavaScript 介绍
JavaScript 是属于网络的脚本语言！ JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建 cookies，以 及更多的应用。 JavaScript 是因特网上最流行的脚本语言。 在数百万张页面中， JavaScript 被用来改进设计、 验证表单、 检测浏览器、 创建 cookies， 等等等等。 JavaScript 是因特网上最流行的脚本语言，并且可在所有主要的浏览器中运行，比方说 Internet Explorer、 Mozilla、Firefox、Netscape、和 Opera。下面来看一下简单的JavaScript的入门示列如图4-1.
用document.write输出带格式的HTML文本的Javascript示例
图4-1
4.2HTML包含JavaScript 的方法
Javascript程序放到一个后缀名为.js的文本文件里。这样做，可以提Javascript的复用性，减少代码维护的负担，不必将相同的Javascript代码拷贝到多个HTML网页里，将来一旦程序有所修改，也只要修改.js文件就可以，不用再修改每个用到这个Javascript程序的HTML文件。在HTML里引用外部文件里的Javascript，应在Head里写一句
双向条件结构 (if...else条件语句)
If...else条件语句的语法如下：
if (expression)
{
statement1
}
else
{
statement2
}
这句语法的含义是，如果符合expression条件，则执行statement1代码，反之，则执行statement2代码。下面的Javascript示例使用了if...else条件语句判断，如果vHour小于17，显示
使用if...else条件语句的Javascript示例
多项条件结构 (switch条件语句)
Switch条件语句的语法如下：
switch (expression)
{case label1 :
statement1
break
case label2 :
statement2
break
...
default :
statementdefault
}
这句语法的含义是，如果expression等于label1，则执行statement1代码；如果expression等于label2，则执行statement2代码；以此类推。如果expression不符合任何label，则执行default内的statementdefault代码。 Switch条件语句中的 break，表示 switch 语句结束。如果没有使用一个 break 语句，则多个 label 块被执行。 下面的Javascript示例使用了switch条件语句，根据星期天数的不同，显示不同的话。
使用swith条件语句的Javascript示例
4.6函数的定义与应用
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。 将脚本编写为函数，就可以避免页面载入时执行该脚本。 函数包含着一些代码，这些代码只能被事件激活，或者在函数被调用时才会执行。 你可以在页面中的任何位置调用脚本（如果函数嵌入一个外部的 .js 文件，那么甚至可 以从其他的页面中调用） 。 函数在页面起始位置定义，即 部分。
4.7HTML事件处理
JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可 以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定 义。 onload 和 onUnload 当用户进入或离开页面时就会触发 onload 和 onUnload 事件。 onload 事件常用来检测访问者的浏览器类型和版本，然后根据这些信息载入特定版本 的网页。 onload 和 onUnload 事件也常被用来处理用户进入或离开页面时所建立的 cookies。例 如，当某用户第一次进入页面时，你可以使用消息框来询问用户的姓名。姓名会保存在 cookie 中。当用户再次进入这个页面时，你可以使用另一个消息框来和这个用户打招呼：
4.8 JavaScript循环语句
在一般情况下，程序语句的执行是按照其书写顺序来执行的。前面的代码先执行，后面的代码后执行。但是这种简单的自上而下的单向流程只适于用一些很简单的程序。大多数情况下，需要根据逻辑判断来决定程序代码执行的优先顺序。要改变程序代码执行的先后顺序，任何编程语言都需要用到条件语句和循环语句，Javascript 也不例外。这一节我们主要介绍 Javascript 循环语句。Javascript 循环语句有以下几种：
1）在循环的开头测试表达式 (while 循环语句)
2）在循环的末尾测试表达式 (do...while 循环语句)
3）对对象的每个属性都进行操作 (for...in 循环语句)
由计数器控制的循环 (for 循环语句)使用 for 循环语句for 循环语句指定了一个计数器变量，一个测试条件，和更新计数器的行为。每次循环重复之前，都要测试条件。如果测试成功，则执行循环内的代码；如果测试不成功，则不执行循环内的代码，而是执行紧跟在循环后的第一行代码。当执行该循环时，计数器变量在下次重复循环前被更新。
如果循环条件一直不满足，则永不执行该循环。如果条件一直满足，则会导致无限循环。前一种，在某种情况下是需要的，但是后一种，基本不应发生，所以写循环条件时一定要注意。
一个使用到for循环的Javascript示例
使用 for...in 循环语句
Javascript 提供了一种特别的循环方式来遍历一个对象的所有用户定义的属性或者一个数组的所有元素。for...in 循环中的循环计数器是一个字符串，而不是数字。它包含了当前属性的名称或者表示当前数组元素的下标。
for...in 循环语句示例代码：
一个使用到for...in循环的Javascript示例
使用 while 和 do...while 循环语句
while 循环和 for 循环类似。其不同之处在于， while 循环没有内置的计数器或更新表达式。如果你希望控制语句或语句块的循环执行，不只是通过 “运行该代码 n 次”这样简单的规则，而是需要更复杂的规则，则应该用 while 循环。 注意：由于 while 循环没有显式的内置计数器变量，因此比其它类型的循环更容易产生无限循环。此外，由于不易发现循环条件是在何时何地被更新的，很容易编写一个实际上从不更新条件的 while 循环。因此在编写 while 循环时应特别小心。
while 循环语句示例代码：
一个使用到while循环的Javascript示例
在 JScript 中还有 do...while 循环与 while 循环相似，不同处在于它总是至少运行一次，因为是在循环的末尾检查条件，而不是在开头。
do...while 循环语句示例：
一个使用到do...while循环的Javascript示例
使用 break 和 continue 语句在 Javascript 中，当某些条件得到满足时，用 break 语句来中断一个循环的运行。（请注意，也用 break 语句退出一个 switch 块。参见 Javascript 条件语句）。如果是一个 for 或者 for...in 循环，在更新计数器变量时使用 continue 语句越过余下的代码块而直接跳到循环的下一次重复中。
一个用break中断循环的Javascript示例代码
continue 示例代码：
一个用continue跳过后面代码，开始循环的下一次重复的Javascript代码
第五章 WEB页面信息的交互——窗体与框架
要实现网页的动态交互，必须掌握有关窗体对象（Form）和框架对象（Frames）更为复杂的知识。
5.1窗体基础知识
窗体对象可以使设计人员能用窗体中不同的元素与客户机用户相交互，而用不着在之前首先进行数据输入，就可以实现动态改变Web文档的行为。
5.1.1窗体对象
窗体（Form）：它构成了Web页面的基本元素。通常一个Web页面有一个窗体或几个窗体，使用Forms[]数组来实现不同窗体的访问。
在Forms[0]中共有三个基本元素，而Forms[1]中只有两个元素。
窗体对象最主要的功能就是能够直接访问HTML文档中的窗体，它封装了相关的HTML代码：
Name =
Target =
action =
Method =信息数据传送方式(get/post)
enctype =
[onsubmit =
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元素值改变时，产生该文件。
例：
...
（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按钮时，产生该事件。
例 ：
...
.....
（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
输出结果见图5-1所示。
图5-1 调用动态按钮图
动态按钮程序。 test8_2.htm
电 子 科 技 大 学 毕 业 设 计（论 文）
论文题目：网页设计与制作
学习中心（或办学单位）：电子科技大学
指导老师：官晓波 职 称： 高级实验师
学生姓名：钟华 学 号: v[1**********]
专 业：计算机科学与技术
2012年 06月 12日 电 子 科 技 大 学
毕业设计（论文）任务书
题目：网页设计与制作
任务与要求：
利用所学的语言做一个以介绍低碳生活为主题的静态网页以及网页 时间： 2012 年 2 月28 日 至 共 8 周
学习中心：（或办学单位）电子科技大学 学生姓名：钟华 专业： 计算机科学与技术
指导单位或教研室：电子科技大学中山学习中心 指导教师：
官晓波
职 称：高级实验师
学 号：v[1**********]
2012 年 6 月 4 日
2012年 6月 12日
毕业设计(论文)进度计划表
本表作评定学生平时成绩的依据之一。
摘要
网页设计作为用户界面交互设计的延伸，实在新的媒体和新的技术支持实现一个全新的设计创作领域。设计创作网页与循环其特有的特点和结构思路，具备可实际行和外观时尚。本论文将对网页设计的开发语言开展研究和讨论。在网页设计与制作语言的基础上， 着重使用 HTML作为工具语言进行网页设计与制作 的实际操作，分别对基于对象的 HTML、css、JavaScript进行详细描述并实现网页的开发。
关键字：制作、设计、HTML
Summary
Web design as an extension of the interactive user interface design, it is a new media and new technologies to support a whole new field of creative design. Design creation of web pages and circulation of its unique characteristics and structure of ideas with the actual line and stylish. The web design of this paper will develop language tools to carry out the study and discussion. On the basis of a website on the design and production of language, focus on using HTML web design and production operations as a tool for language, a detailed description of the object-based HTML, CSS, JavaScript and web page development.
Keywords: production, design, HTML
目录
第一章 绪论 .................................................................................................. 7
1.网页设计概述 .......................................................................................... 7 1.2网页设计的要素 .................................................................................... 7 第二章 HTML语言概述 ................................................................................ 8 2.1什么是HTML文件 ............................................................................... 8 2.3HTML格式 ............................................................................................ 8 2.5HTML样式 .......................................................................................... 10 2.6HTML链接 .......................................................................................... 10 2.7HTML表格 .......................................................................................... 12 2.8HTML列表 .......................................................................................... 14 2.9HTML表单 .......................................................................................... 14 第三章 Css的运用 ..................................................................................... 18
3.1Css简介 ............................................................................................. 18 3.2 Css 基础语法 .................................................................................... 18 3.3派生选择器 ......................................................................................... 19 3.4 id 和类选择器 .................................................................................... 19 3.5 Css 框架型结构 ................................................................................. 20 第四章Javascript的运用 ............................................................................. 23 4.1JavaScript 介绍 .................................................................................. 23 4.2HTML包含JavaScript 的方法 ............................................................ 23 4.3 JavaScript 语句，注释与变量............................................................ 24 4.4JavaScript常用运算符 ........................................................................ 24 4.5JavaScript 条件语句 ........................................................................... 25 4.6函数的定义与应用 .............................................................................. 28 4.7HTML事件处理 ................................................................................... 28 第五章 WEB页面信息的交互——窗体与框架 ............................................ 34 5.1窗体基础知识 ..................................................................................... 34 5.2 窗体中的基本元素 ............................................................................. 35 5.3窗体对象实例 ..................................................................................... 39 5.4 框架 ................................................................................................... 43 5.5 框架的访问 ........................................................................................ 44 第六章 结束语 ............................................................................................ 48
致 谢 .......................................................................................................... 48 参考文献 ..................................................................................................... 49
第一章 绪论
随着 21 世纪的到来，人们更深切地感受到计算机在生活和工作中的作用越 来越重要，越来越来的职业需要具有计算机的应用技能。掌握计算机是职业的需 要，更是事业发展的需要。网页设计与制作是计算机能力的具体表现，本章主要 介绍网页设计的相关知识。
1.网页设计概述
网页是企业向用户和网民提供信息(包括产品和服务)的一种方式, 是企业开 展电子商务的基础设施和信息平台，离开网站（或者只是利用第三方网站 ） 去谈 电子商务是不可能的。企业的网址被称为“网络商标” ，也是企业无形资产的组 成部分，而网站是 INTERNET 上宣传和反映企业形象和文化的重要窗口。
1.2网页设计的要素
网页设计的两大要素是：整体风格和色彩搭配。
一、确定网页的整体风格 在这里，我提供给大家一些参考经验： 1．将你的标志 logo，尽可能的放在每个页面上最突出的位置。 2．突出你的标准色彩。
3．总结一句能反映贵站精髓的宣传标语！
4．相同类型的图像采用相同效果，比如说标题字都采用阴影效果，那么在 二、网页色彩的搭配
1．用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度， 2．用两种色彩。先选定一种色彩，然后选择它的对比色。
3．用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；
网页中出现的所有标题字的阴影效果的设置应该是完全一致的！
这样的页面看起来色彩统一，有层次感。
或者土黄，土灰，土蓝。 在网页配色中，还要切记一些误区：
电子科技大学毕业论文（设计） 网页设计与制作
1．不要将所有颜色都用到，尽量控制在三至五种色彩以内。 2．背景和前文的对比尽量要大(绝对不要用花纹繁复的图案作背景)，以便 突出主要文字内容。
第二章 HTML语言概述
2.1什么是HTML文件
HTML的英文全称是Hypertext Marked Language，中文叫做“超文本标记语言”。 和一般文本的不同的是，一个HTML文件不仅包含文本内容，还包含一些Tag，中文称“标记”。 一个HTML文件的后缀名是.htm或者是.html。 用文本编辑器就可以编写HTML文件。 下面写个小HTML文件
Title of page
This is my first homepage. This text is bold
2.2 HTML元素
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。 HTML 元素以开始标签起始 HTML 元素以结束标签终止 元素的内容是开始标签与结束标签之间的内容 某些 HTML 元素具有空内容（empty content） 空元素在开始标签中进行关闭（以开始标签的结束而结束） 大多数 HTML 元素可拥有属性
2.3HTML格式
HTML定义了一些文本格式的Tag
，比如利用Tag，可以将字体变成粗体或者斜体。从下面的示例，你可以了解各种文本格式Tag如何改变HTML文本的显示。
2.4 HTML 的特殊字符显示
有些字符在HTML里有特别的含义，比如小于号
2.5HTML样式
style 属性的作用： 提供了一种改变所有 HTML 元素的样式的通用方法。 样式是 HTML 4 引入的，它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式， 能够通过使用 style 属性直接将样式添加到 HTML 元素， 或者间接地在独立 的样式表中（CSS 文件）进行定义。
2.6HTML链接
HTML 使用 （锚）标签来创建连接另一个文档的链接。 锚可以指向网络上的任何资源：一张 HTML 页面，一幅图像，一个声音或视频文件等 等。
1）a和href属性 HTML用来表示超链接，英文叫anchor。
可以指向任何一个文件源：一个HTML网页，一个图片，一个影视文件等。用法如下：
链接的文字
点击当中的内容，即可打开一个链接文件，href属性则表示这个链接文件的路径。比如链接到admin5.com/html站点首页，就可以这样表示： 2）target属性使用 title 属性，可以让鼠标悬停在超链接上的时候，显示该超链接的文字注释。
3）name属性 使用name属性，可以跳转到一个文件的指定部位。 使用name属性，要设置一对。一是设定name的名称，二是设定一个href指向这个name;
4)链接到email属性 在网站中，你经常会看到“联系我们”的链接，一点击这个链接，就会触发你的邮件客户端，比如Outlook Express，然后显示一个新建mail的窗口。用可以实现这样的功能。 代码如：
这是一个最简单的邮箱地址的链接：
这个邮箱地址的链接写了subject内容：
这个邮箱地址链接写了to, cc, bcc, subject, body的内容：
href=
注:空格请用%20表示。
显示效果如下图：
图2-1
2.7HTML表格
表格由
标签来定义。每个表格均有若干行（由
标签定义） ，每行被分割 为若干单元格（由
标签定义） 。字母 td 指表格数据（table data） ，即数据单元格的内 容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 示列如图2-2：
表格所用到的Tag：整个表格开始要用table；每一行开始要用tr；每一单元格开始要用td。
只有一行(Row)一列(Column)的表格
100
一行三列的表格
100
200
300
两行三列的表格
100
200
300
400
500
600
图2-2
2.8HTML列表
无序列表 无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。 无序列表始于
标签。每个列表项始于
* 。 有序列表 同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于
标签。每个列表项始于
* 标签。 示列如图2-3： 列分frame
图2-3
2.9HTML表单
表单是一个包含表单元素的区域。 表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入 信息的元素。 表单使用表单标签（）定义。 10. HTML 框架框架结构标签（）定义如何将窗口分割为框架 每个 frameset 定义了一系列行或列 rows/columns 的值规定了每行或每列占据屏幕的面积 Css
示列如图2-4：
输入用户姓名
action=
图2-4
2.10 HTML图片
用 这个 Tag 可以在HTML里面插入图片。最基本的语法如下：
假使浏览器没有载入图片的功能，浏览器就会转而显示Alt属性的值。其实，现在大多数浏览器都支持图片载入。在此介绍Alt属性，是因为它的另外一个重要功能。目前搜索引擎抓取工具无法识别图像中所含的文字，所以用ALT属性写上图片的说明，便于搜索引擎抓取你网页的内容 示列如图2-5：
将鼠标停留在图片上，你可以看到Alt属性里写的内容。
图2-5
2.11 HTML字体的大小
在HTML里，可以用font这个元素及其属性来设定字体的大小，颜色和字体风格。字体大小用字体大小属性(size)来设定字体的大小。示例代码如下：
字体大小 font size
如图2-6
第三章 Css的运用
3.1Css简介
随着Internet的迅猛发展，HTML被广泛应用，上网的人们当然希望网页做得漂亮些，因此HTML排版和界面效果的局限性日益暴露出来。为了解决这个问题，人们也走了不少弯路，用了一些不好的方法，比如给HTML增加很多的属性结果将代码变得很臃肿，将文本变成图片，过多利用Table来排版，用空白的图片表示白色的空间等。直到CSS出现。CSS可算是网页设计的一个突破，它解决了网页界面排版的难题。可以这么说，HTML的Tag主要是定义网页的内容(Content)，而CSS决定这些网页内容如何显示(Layout)。CSS的英文是Cascading Style Sheets，中文可以翻译成串联式样式表。CSS按其位置可以分成三种：1)内嵌样式(Inline Style) 2)内部样式表(Internal Style Sheet) 3)外部样式表(External Style Sheet) 示列如图3-1：
内嵌式样式(Inline Style)
图3-1
3.2 Css 基础语法
CSS 语法由三部分构成：选择器、属性和值： selector {property: value} 选择器 (selector) 通常是你希望定义的 HTML 元素或标签，属性 (property) 是
你希望 改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组 成了一个完整的样式声明（declaration） ： body {color: blue} 上面这行代码的作用是将 body 元素内的文字颜色定义为蓝色。 在上述例子中， body 是 选择器，而包括在花括号内的的部分是声明。声明依次由两部分构成：属性和值，color 为 属性，blue 为值。 示列如图3-2：
图3-2
3.3派生选择器
通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。 在 CSS1 中，通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors)，这是由于它们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中，它们 称为派生选择器，但是无论你如何称呼它们，它们的作用都是相同的。 派生选择器允许你根据文档的上下文关系来确定某个标签的样式。 通过合理地使用派生 选择器，我们可以使 HTML 代码变得更加整洁。
3.4 id 和类选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 id 选择器以
3.5 Css 框架型结构
CSS 框模型 (Box Model) 规定了元素框处理元素内容、 内边距、 边框 和 外边距 的方 式。 元素框的最内部分是实际的内容， 直接包围内容的是内边距。 内边距呈现了元素的背景。 内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何 元素。 内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表 设置外边距和内边距。 可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样 式。这可以分别进行，也可以使用通用选择器对所有元素进行设置： 在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外 边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。 假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框 达到 100 个像素，就需要将内容的宽度设置为 70 像素 示列如图3-3：
字体大小属性 font-size
这段文字大小是10pt。
图3-3
3.6定为基础和相对绝对定位
CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一 部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。 定位的基本思想很简单， 它允许你定义元素框相对于其正常位置应该出现的位置， 或者 相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让 人吃惊。要知道，用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感 到奇怪。 另一方面，CSS1 中首次提出了浮动，它以 Netscape 在 Web 发展初期增加的一个功 能为基础。浮动不完全是定位，不过，它当然也不是正常流布局。我们会在后面的章节中明 确浮动的含义。 CSS 有三种基本的定位机制：普通流、浮动和绝对定位。 除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元 素在 X(HTML) 中的位置决定。 块级框从上到 下 一个接一个地排列，框
之间的垂直距离是由框的垂直外边距计算出来。 行内框在一行中水平布置。 可以使用水平内边距、 边框和外边距调整它们的间距。 但是， 垂直内边距、 边框和外边距不影响行内框的高度。 由一行形成的水平框称为行框 （Line Box） ， 行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。 在下面的章节，我们会为您详细讲解相对定位、绝对定位和浮动。 CSS 相对定位 相对定位是一个非常容易掌握的概念。 如果对一个元素进行相对定位， 它将出现在它所 在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移 动。 如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设 置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。 CSS 绝对定位 绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对 定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。 普通流中其它元素的布局就像绝对定位的元素不存在一样：
第四章Javascript的运用
4.1JavaScript 介绍
JavaScript 是属于网络的脚本语言！ JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建 cookies，以 及更多的应用。 JavaScript 是因特网上最流行的脚本语言。 在数百万张页面中， JavaScript 被用来改进设计、 验证表单、 检测浏览器、 创建 cookies， 等等等等。 JavaScript 是因特网上最流行的脚本语言，并且可在所有主要的浏览器中运行，比方说 Internet Explorer、 Mozilla、Firefox、Netscape、和 Opera。下面来看一下简单的JavaScript的入门示列如图4-1.
用document.write输出带格式的HTML文本的Javascript示例
图4-1
4.2HTML包含JavaScript 的方法
Javascript程序放到一个后缀名为.js的文本文件里。这样做，可以提Javascript的复用性，减少代码维护的负担，不必将相同的Javascript代码拷贝到多个HTML网页里，将来一旦程序有所修改，也只要修改.js文件就可以，不用再修改每个用到这个Javascript程序的HTML文件。在HTML里引用外部文件里的Javascript，应在Head里写一句
双向条件结构 (if...else条件语句)
If...else条件语句的语法如下：
if (expression)
{
statement1
}
else
{
statement2
}
这句语法的含义是，如果符合expression条件，则执行statement1代码，反之，则执行statement2代码。下面的Javascript示例使用了if...else条件语句判断，如果vHour小于17，显示
使用if...else条件语句的Javascript示例
多项条件结构 (switch条件语句)
Switch条件语句的语法如下：
switch (expression)
{case label1 :
statement1
break
case label2 :
statement2
break
...
default :
statementdefault
}
这句语法的含义是，如果expression等于label1，则执行statement1代码；如果expression等于label2，则执行statement2代码；以此类推。如果expression不符合任何label，则执行default内的statementdefault代码。 Switch条件语句中的 break，表示 switch 语句结束。如果没有使用一个 break 语句，则多个 label 块被执行。 下面的Javascript示例使用了switch条件语句，根据星期天数的不同，显示不同的话。
使用swith条件语句的Javascript示例
4.6函数的定义与应用
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。 将脚本编写为函数，就可以避免页面载入时执行该脚本。 函数包含着一些代码，这些代码只能被事件激活，或者在函数被调用时才会执行。 你可以在页面中的任何位置调用脚本（如果函数嵌入一个外部的 .js 文件，那么甚至可 以从其他的页面中调用） 。 函数在页面起始位置定义，即 部分。
4.7HTML事件处理
JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可 以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定 义。 onload 和 onUnload 当用户进入或离开页面时就会触发 onload 和 onUnload 事件。 onload 事件常用来检测访问者的浏览器类型和版本，然后根据这些信息载入特定版本 的网页。 onload 和 onUnload 事件也常被用来处理用户进入或离开页面时所建立的 cookies。例 如，当某用户第一次进入页面时，你可以使用消息框来询问用户的姓名。姓名会保存在 cookie 中。当用户再次进入这个页面时，你可以使用另一个消息框来和这个用户打招呼：
4.8 JavaScript循环语句
在一般情况下，程序语句的执行是按照其书写顺序来执行的。前面的代码先执行，后面的代码后执行。但是这种简单的自上而下的单向流程只适于用一些很简单的程序。大多数情况下，需要根据逻辑判断来决定程序代码执行的优先顺序。要改变程序代码执行的先后顺序，任何编程语言都需要用到条件语句和循环语句，Javascript 也不例外。这一节我们主要介绍 Javascript 循环语句。Javascript 循环语句有以下几种：
1）在循环的开头测试表达式 (while 循环语句)
2）在循环的末尾测试表达式 (do...while 循环语句)
3）对对象的每个属性都进行操作 (for...in 循环语句)
由计数器控制的循环 (for 循环语句)使用 for 循环语句for 循环语句指定了一个计数器变量，一个测试条件，和更新计数器的行为。每次循环重复之前，都要测试条件。如果测试成功，则执行循环内的代码；如果测试不成功，则不执行循环内的代码，而是执行紧跟在循环后的第一行代码。当执行该循环时，计数器变量在下次重复循环前被更新。
如果循环条件一直不满足，则永不执行该循环。如果条件一直满足，则会导致无限循环。前一种，在某种情况下是需要的，但是后一种，基本不应发生，所以写循环条件时一定要注意。
一个使用到for循环的Javascript示例
使用 for...in 循环语句
Javascript 提供了一种特别的循环方式来遍历一个对象的所有用户定义的属性或者一个数组的所有元素。for...in 循环中的循环计数器是一个字符串，而不是数字。它包含了当前属性的名称或者表示当前数组元素的下标。
for...in 循环语句示例代码：
一个使用到for...in循环的Javascript示例
使用 while 和 do...while 循环语句
while 循环和 for 循环类似。其不同之处在于， while 循环没有内置的计数器或更新表达式。如果你希望控制语句或语句块的循环执行，不只是通过 “运行该代码 n 次”这样简单的规则，而是需要更复杂的规则，则应该用 while 循环。 注意：由于 while 循环没有显式的内置计数器变量，因此比其它类型的循环更容易产生无限循环。此外，由于不易发现循环条件是在何时何地被更新的，很容易编写一个实际上从不更新条件的 while 循环。因此在编写 while 循环时应特别小心。
while 循环语句示例代码：
一个使用到while循环的Javascript示例
在 JScript 中还有 do...while 循环与 while 循环相似，不同处在于它总是至少运行一次，因为是在循环的末尾检查条件，而不是在开头。
do...while 循环语句示例：
一个使用到do...while循环的Javascript示例
使用 break 和 continue 语句在 Javascript 中，当某些条件得到满足时，用 break 语句来中断一个循环的运行。（请注意，也用 break 语句退出一个 switch 块。参见 Javascript 条件语句）。如果是一个 for 或者 for...in 循环，在更新计数器变量时使用 continue 语句越过余下的代码块而直接跳到循环的下一次重复中。
一个用break中断循环的Javascript示例代码
continue 示例代码：
一个用continue跳过后面代码，开始循环的下一次重复的Javascript代码
第五章 WEB页面信息的交互——窗体与框架
要实现网页的动态交互，必须掌握有关窗体对象（Form）和框架对象（Frames）更为复杂的知识。
5.1窗体基础知识
窗体对象可以使设计人员能用窗体中不同的元素与客户机用户相交互，而用不着在之前首先进行数据输入，就可以实现动态改变Web文档的行为。
5.1.1窗体对象
窗体（Form）：它构成了Web页面的基本元素。通常一个Web页面有一个窗体或几个窗体，使用Forms[]数组来实现不同窗体的访问。
在Forms[0]中共有三个基本元素，而Forms[1]中只有两个元素。
窗体对象最主要的功能就是能够直接访问HTML文档中的窗体，它封装了相关的HTML代码：
Name =
Target =
action =
Method =信息数据传送方式(get/post)
enctype =
[onsubmit =
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元素值改变时，产生该文件。
例：
...
（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按钮时，产生该事件。
例 ：
...
.....
（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
输出结果见图5-1所示。
图5-1 调用动态按钮图
动态按钮程序。 test8_2.htm