网页设计与制作(论文)

时间：2024.4.20

毕业设计（论文）

论文题目：网页设计与制作

学习中心（或办学单位）：电子科技大学

摘要

网页设计作为用户界面交互设计的延伸，实在新的媒体和新的技术支持实现一个全新的设计创作领域。设计创作网页与循环其特有的特点和结构思路，具备可实际行和外观时尚。本论文将对网页设计的开发语言开展研究和讨论。在网页设计与制作语言的基础上，着重使用 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表格........................................................................................................... 11

2.8HTML列表........................................................................................................... 13

2.9HTML表单........................................................................................................... 14

第三章 Css的运用............................ 17

3.1Css简介............................................................................................................. 17

3.2 Css 基础语法................................................................................................... 17

3.3派生选择器....................................................................................................... 18

3.4 id 和类选择器................................................................................................. 18

3.5 Css 框架型结构............................................................................................... 19

第四章Javascript的运用..................... 22

4.1JavaScript 介绍............................................................................................... 22

4.2HTML包含JavaScript 的方法............................................................................ 22

4.3 JavaScript 语句，注释与变量......................................................................... 23

4.4JavaScript常用运算符...................................................................................... 23

4.5JavaScript 条件语句........................................................................................ 24

4.6函数的定义与应用............................................................................................. 27

4.7HTML事件处理.................................................................................................... 27

第五章 WEB页面信息的交互——窗体与框架....... 33

5.1窗体基础知识.................................................................................................... 33

5.2 窗体中的基本元素............................................................................................ 34

5.3窗体对象实例.................................................................................................... 38

5.4 框架................................................................................................................. 42

5.5 框架的访问...................................................................................................... 43

第六章结束语............................... 47

致谢....................................... 47

参考文献.................................... 47

第一章绪论

随着 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文件

<html>

<head>

<title>Title of page</title>

</head>

<body>

This is my first homepage. <b>This text is bold</b>

</body>

</html>

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里有特别的含义，比如小于号<就表示HTML Tag的开始，这个小于号是不显示在我们最终看到的网页里的。那如果我们希望在网页中显示一个小于号，该怎么办呢？这就要说到HTML字符实体(HTML Character Entities)了。一个字符实体(Character Entity)分成三部分：第一部分是一个&符号，英文叫ampersand；第二部分是实体(Entity)名字或者是#加上实体(Entity)编号；第三部分是一个分号。比如，要显示小于号，就可以写<或者<。用实体(Entity)名字的好处是比较好理解，一看lt，大概就猜出是less than的意思，但是其劣势在于并不是所有的浏览器都支持最新的Entity名字。而实体(Entity)编号，各种浏览器都能处理。

注意：Entity是区分大小写的。

最常用的字符实体如下图：

2.5HTML样式

style 属性的作用：提供了一种改变所有 HTML 元素的样式的通用方法。样式是 HTML 4 引入的，它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。

2.6HTML链接

HTML 使用 <a> （锚）标签来创建连接另一个文档的链接。锚可以指向网络上的任何资源：一张 HTML 页面，一幅图像，一个声音或视频文件等等。

1）a和href属性 HTML用<a>来表示超链接，英文叫anchor。

<a>可以指向任何一个文件源：一个HTML网页，一个图片，一个影视文件等。用法如下：

<a href = “ url“ >链接的文字</a>

点击<a></a>当中的内容，即可打开一个链接文件，href属性则表示这个链接文件的路径。比如链接到admin5.com/html站点首页，就可以这样表示：

2）target属性使用 title 属性，可以让鼠标悬停在超链接上的时候，显示该超链接的文字注释。

3）name属性使用name属性，可以跳转到一个文件的指定部位。

使用name属性，要设置一对。一是设定name的名称，二是设定一个href指向这个name;

4)链接到email属性在网站中，你经常会看到“联系我们”的链接，一点击这个链接，就会触发你的邮件客户端，比如Outlook Express，然后显示一个新建mail的窗口。用<a>可以实现这样的功能。

代码如：

<html>

<body>

<p>这是一个最简单的邮箱地址的链接：

<a href="mailto:info@sina.com">给新浪网站发信</a>

</p>

<p>

这个邮箱地址的链接写了subject内容：

<a href="mailto:info@sina.com?subject=Hello">给新浪网站发信</a>

</p>

<p>

这个邮箱地址链接写了to, cc, bcc, subject, body的内容：<a href="mailto:info@sina.com?cc=webmaster@vip.sina.com&bcc=media@sina.com&subject=I%20like%20your%20site&body=真是个好站点！">写信给新浪</a>

</p>

<p>

<b>注:</b>空格请用%20表示。

</p>

</body>

</html>

显示效果如下图：

图2-1

2.7HTML表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

示列如图2-2：

<html>

<body>

<p>

表格所用到的Tag：整个表格开始要用table；每一行开始要用tr；每一单元格开始要用td。

</p>

<h4>只有一行(Row)一列(Column)的表格</h4>

<tr>

</tr>

</table>

<h4>一行三列的表格</h4>

<tr>

</tr>

</table>

<h4>两行三列的表格</h4>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

图2-2

2.8HTML列表

无序列表无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于 <ul> 标签。每个列表项始于 <li>。有序列表同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

示列如图2-3：

列分frame

<html>

</frameset>

</html>

图2-3

2.9HTML表单

表单是一个包含表单元素的区域。表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。表单使用表单标签（<form>）定义。 10. HTML 框架框架结构标签（<frameset>）定义如何将窗口分割为框架每个 frameset 定义了一系列行或列 rows/columns 的值规定了每行或每列占据屏幕的面积 Css

示列如图2-4：

<html>

<head><title>输入用户姓名</title></head>

<body>

<form

action="http://www.admin5.com/html/asdocs/html_tutorials/yourname.asp" method="get">

请输入你的姓名：

</form>

</body>

</html>

图2-4

2.10 HTML图片

用 <img> 这个 Tag 可以在HTML里面插入图片。最基本的语法如下：<img src="url"> url表示图片的路径和文件名。比如 url 可以是images/logo/blabla_logo01.gif，也可以是个相对路径是"../images/logo/blabla_logo01.gif"。图片alt属性<img>中有一个alt属性，英文叫alternate text。例句如下：

假使浏览器没有载入图片的功能，浏览器就会转而显示Alt属性的值。其实，现在大多数浏览器都支持图片载入。在此介绍Alt属性，是因为它的另外一个重要功能。目前搜索引擎抓取工具无法识别图像中所含的文字，所以用ALT属性写上图片的说明，便于搜索引擎抓取你网页的内容

示列如图2-5：

<html>

<body>

<p>将鼠标停留在图片上，你可以看到Alt属性里写的内容。</p>

</body>

</html>

图2-5

2.11 HTML字体的大小

在HTML里，可以用font这个元素及其属性来设定字体的大小，颜色和字体风格。字体大小用字体大小属性(size)来设定字体的大小。示例代码如下：<p><font size="2">这一段的字体大小的值是2。</font></p>字体风格用face属性来设定字体风格。示例代码如下：<p><font fac="arial">这一段的字体风格是arial。</font></p>字体颜色用颜色属性(color)来设定字体颜色。字体颜色代码请参见字体颜色代码请参见HTML颜色参考字体颜色代码请参见HTML颜色参考(HTML Color Reference)。<p><font color="#FF0000">这一段的字体颜色是红色</font></p>注意HTML4的标准中，已经不建议使用font及其属性来设定字体，而是建议用CSS来设定字体的大小，颜色，字体风格等。有关CSS中和文字的相关属性，请参见我们教程中的。

示列如图2-6：

<html>

<body>

<p><font size="1">这段文字的字体大小值为1。</font></p>

<p><font size="2">这段文字的字体大小值为2。</font></p>

<p><font size="3">这段文字的字体大小值为3。</font></p>

<p><font size="4">这段文字的字体大小值为4。</font></p>

<p><font size="5">这段文字的字体大小值为5。</font></p>

<p><font size="6">这段文字的字体大小值为6。</font></p>

<p><font size="7">这段文字的字体大小值为7。</font></p>

</body>

</html>

如图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：

<html>

<head><title>内嵌式样式(Inline Style)</title></head>

<body>

<P style="font-size:20pt; color:red">这个内嵌样式(Inline Style)定义段落里面的文字是20pt字体，字体颜色是红色。</p>

<P>这段文字没有使用内嵌样式。</p>

</body>

</html>

图3-1

3.2 Css 基础语法

CSS 语法由三部分构成：选择器、属性和值： selector {property: value} 选择器 (selector) 通常是你希望定义的 HTML 元素或标签，属性 (property) 是你希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）： body {color: blue} 上面这行代码的作用是将 body 元素内的文字颜色定义为蓝色。在上述例子中， body 是选择器，而包括在花括号内的的部分是声明。声明依次由两部分构成：属性和值，color 为属性，blue 为值。

示列如图3-2：

<HTML>

<HEAD>

H1.mylayout {border-width: 1; border: solid; text-align: center;color:red}

</STYLE>

</HEAD>

<BODY>

<H1 class="mylayout"> 这个标题使用了Style。</H1>

<H1>这个标题没有使用Style。</H1>

</BODY>

</HTML>

图3-2

3.3派生选择器

通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。在 CSS1 中，通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors)，这是由于它们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中，它们称为派生选择器，但是无论你如何称呼它们，它们的作用都是相同的。派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。

3.4 id 和类选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 id 选择器以 "#" 来定义。下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色： #red {color:red;} #green {color:green;} 下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。 #sidebar p { font-style: italic; text-align: right; margin-top: 0.5em; } #sidebar h2 { font-size: 1em; font-weight: normal; font-style: italic; margin: 0; line-height: 1.5; text-align: right; }

3.5 Css 框架型结构

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素

示列如图3-3：

<html>

<head>

<title>字体大小属性 font-size</title>

<STYLE>

BODY{font-size:10pt}

.s1 {font-size:16px}

.s2 {font-size:16pt}

.s3 {font-size:80%}

.s4 {font-size:larger}

.s5 {font-size:xx-large}

</STYLE>

</head>

<body>

<p>这段文字大小是10pt。</p>

<p class = "s1">这段文字大小是16px。</p>

<p class = "s2">这段文字大小是16pt。</p>

<p class = "s3">这段文字大小是10pt的80%。</p>

<p class = "s4">这段文字的大小比10pt大。</p>

<p class = "s5">这段文字的大小是特大号(xx-large)。</p>

</body>

</html>

图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.

<html>

<head><title>用document.write输出带格式的HTML文本的Javascript示例</title></head>

<body>

document.write("<h1>Hello World!</h1>")

</script>

</body>

</html>

图4-1

4.2HTML包含JavaScript 的方法

Javascript程序放到一个后缀名为.js的文本文件里。这样做，可以提Javascript的复用性，减少代码维护的负担，不必将相同的Javascript代码拷贝到多个HTML网页里，将来一旦程序有所修改，也只要修改.js文件就可以，不用再修改每个用到这个Javascript程序的HTML文件。在HTML里引用外部文件里的Javascript，应在Head里写一句<script src="文件名"></script>，其中src的值，就是Javascript所在文件的文件路径。示例代码如下：

<html>

<head>

</head>

<body>

</body>

</html>

演示示例里的common.js其实就是一个文本文件，内容如下：

function clickme()

{

alert("You clicked me!")

4.3 JavaScript 语句，注释与变量

语句， JavaScript 语句是发给浏览器的命令。这些命令的作用是告诉浏览器要做的事情。这个 JavaScript 语句告诉浏览器向网页输出 "Hello world"： document.write("Hello world"); JavaScript 注释可以添加注释来对 JavaScript 进行解释，或者提高其可读性。单行的注释以 // 开始。JavaScript 变量正如代数一样，JavaScript 变量用于保存值或表达式。可以给变量起一个简短名称，比如 x，或者更有描述性的名称，比如 length。 JavaScript 变量也可以保存文本值，比如 carname="Volvo"。

4.4JavaScript常用运算符

算数运算符：

逻辑运算符：

赋值运算符：

注意：请注意赋值(=)和等于(==)的区别。

4.5JavaScript 条件语句

在一般情况下，程序语句的执行是按照其书写顺序来执行的。前面的代码先执行，后面的代码后执行。但是这种简单的自上而下的单向流程只适于用一些很简单的程序。大多数情况下，需要根据逻辑判断来决定程序代码执行的优先顺序。要改变程序代码执行的先后顺序，任何编程语言都需要用到条件语句和循环语句，Javascript也不例外。这一节我们主要介绍Javascript条件语句。Javascript条件语句有以下几种：

1)单项条件结构 (if条件语句)

2)双向条件结构 (if...else条件语句)

3)多项条件结构 (switch条件语句)

4)单项条件结构 (if条件语句)

If条件语句的语法如下：

if (expression)

{

statement1

}

这句语法的含义是，如果符合expression条件，就执行statement1代码，反之，则不执行statement1代码。下面的这个Javascript示例就用到了Javascript的if条件语句。首先用.length计算出字符串What's up?的长度，然后使用if语句进行判断，如果该字符串长度<100，就显示"该字符串长度小于100。"。

<html>

<head><title>一个使用到if条件语句的Javascript示例</title></head>

<body>

var vText = "What's up?";

var vLen = vText.length;

if (vLen < 100)

{

document.write("<p> 该字符串长度小于100。</p>")

}

</script>

</body>

</html>

双向条件结构 (if...else条件语句)

If...else条件语句的语法如下：

if (expression)

{

statement1

}

else

{

statement2

}

这句语法的含义是，如果符合expression条件，则执行statement1代码，反之，则执行statement2代码。下面的Javascript示例使用了if...else条件语句判断，如果vHour小于17，显示"日安"，反之则显示"晚安"。

<html>

<head><title>使用if...else条件语句的Javascript示例</title></head>

<body>

var vDay = new Date()

var vHour = vDay.getHours()

if (vHour < 17)

{

document.write("<b>日安</b>")

}

else

{

document.write("<b>晚安</b>")

}

</script>

</body>

</html>

多项条件结构 (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条件语句，根据星期天数的不同，显示不同的话。

<html>

<head><title>使用swith条件语句的Javascript示例</title></head>

<body>

var d = new Date()

theDay=d.getDay()

switch (theDay)

{

case 5:

document.write("<b>总算熬到星期五了。</b>")

break

case 6:

document.write("<b>哈哈，周末啦！</b>")

break

case 0:

document.write("<b>明天又要上班，想想就烦。</b>")

break

default:

document.write("<b>每个工作日慢得都象蜗牛爬啊！</b>")

}

</script>

</body>

</html>

4.6函数的定义与应用

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。将脚本编写为函数，就可以避免页面载入时执行该脚本。函数包含着一些代码，这些代码只能被事件激活，或者在函数被调用时才会执行。你可以在页面中的任何位置调用脚本（如果函数嵌入一个外部的 .js 文件，那么甚至可以从其他的页面中调用）。函数在页面起始位置定义，即 <head> 部分。

4.7HTML事件处理

JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。 onload 和 onUnload 当用户进入或离开页面时就会触发 onload 和 onUnload 事件。 onload 事件常用来检测访问者的浏览器类型和版本，然后根据这些信息载入特定版本的网页。 onload 和 onUnload 事件也常被用来处理用户进入或离开页面时所建立的 cookies。例如，当某用户第一次进入页面时，你可以使用消息框来询问用户的姓名。姓名会保存在 cookie 中。当用户再次进入这个页面时，你可以使用另一个消息框来和这个用户打招呼： "Welcome John Doe!"。 onFocus, onBlur 和 onChange onFocus、onBlur 和 onChange 事件通常相互配合用来验证表单。下面是一个使用 onChange 事件的例子。用户一旦改变了域的内容， checkEmail() 函数就会被调用。 onSubmit onSubmit 用于在提交表单之前验证所有的表单域。下面是一个使用 onSubmit 事件的例子。当用户单击表单中的确认按钮时， checkForm() 函数就会被调用。假若域的值无效，此次提交就会被取消。 checkForm() 函数的返回值是 true 或者 false。如果返回值为 true，则提交表单，反之取消提交。 onMouseOver 和 onMouseOut onMouseOver 和 onMouseOut 用来创建“动态的”按钮。 Javasript 与 cookie 的应用

4.8 JavaScript循环语句

在一般情况下，程序语句的执行是按照其书写顺序来执行的。前面的代码先执行，后面的代码后执行。但是这种简单的自上而下的单向流程只适于用一些很简单的程序。大多数情况下，需要根据逻辑判断来决定程序代码执行的优先顺序。要改变程序代码执行的先后顺序，任何编程语言都需要用到条件语句和循环语句，Javascript 也不例外。这一节我们主要介绍 Javascript 循环语句。Javascript 循环语句有以下几种：

1）在循环的开头测试表达式 (while 循环语句)

2）在循环的末尾测试表达式 (do...while 循环语句)

3）对对象的每个属性都进行操作 (for...in 循环语句)

由计数器控制的循环 (for 循环语句)使用 for 循环语句for 循环语句指定了一个计数器变量，一个测试条件，和更新计数器的行为。每次循环重复之前，都要测试条件。如果测试成功，则执行循环内的代码；如果测试不成功，则不执行循环内的代码，而是执行紧跟在循环后的第一行代码。当执行该循环时，计数器变量在下次重复循环前被更新。

如果循环条件一直不满足，则永不执行该循环。如果条件一直满足，则会导致无限循环。前一种，在某种情况下是需要的，但是后一种，基本不应发生，所以写循环条件时一定要注意。

<html>

<head><title>一个使用到for循环的Javascript示例</title></head>

<body>

<p>

for (i = 0; i <= 5; i++)

{

document.write(i)

document.write("<br>")

}

</script>

</p>

</body>

</html>

使用 for...in 循环语句

Javascript 提供了一种特别的循环方式来遍历一个对象的所有用户定义的属性或者一个数组的所有元素。for...in 循环中的循环计数器是一个字符串，而不是数字。它包含了当前属性的名称或者表示当前数组元素的下标。

for...in 循环语句示例代码：

<html>

<head><title>一个使用到for...in循环的Javascript示例</title></head>

<body>

// 创建一个对象 myObject 以及三个属性 sitename, siteurl, sitecontent。

var myObject = new Object();

myObject.sitename = "站长网站长学院";

myObject.siteurl = "admin5.com/html";

myObject.sitecontent = "网页教程代码图库的中文站点";

//遍历对象的所有属性

for (prop in myObject)

{

document.write("属性 '" + prop + "' 为 " + myObject[prop]);

document.write("<br>");

}

</script>

</body>

</html>

使用 while 和 do...while 循环语句

while 循环和 for 循环类似。其不同之处在于， while 循环没有内置的计数器或更新表达式。如果你希望控制语句或语句块的循环执行，不只是通过 “运行该代码 n 次”这样简单的规则，而是需要更复杂的规则，则应该用 while 循环。

注意：由于 while 循环没有显式的内置计数器变量，因此比其它类型的循环更容易产生无限循环。此外，由于不易发现循环条件是在何时何地被更新的，很容易编写一个实际上从不更新条件的 while 循环。因此在编写 while 循环时应特别小心。

while 循环语句示例代码：

<html>

<head><title>一个使用到while循环的Javascript示例</title></head>

<body>

<p>

i = 0

while (i <= 5)

{

document.write(i + "<br>")

i++

}

</script>

</p>

</body>

</html>

在 JScript 中还有 do...while 循环与 while 循环相似，不同处在于它总是至少运行一次，因为是在循环的末尾检查条件，而不是在开头。

do...while 循环语句示例：

<html>

<head><title>一个使用到do...while循环的Javascript示例</title></head>

<body>

<p>

i = 0

{

document.write( i + "<br>")

i++

}

while (i <= 5)

</script>

</body>

</html>

使用 break 和 continue 语句在 Javascript 中，当某些条件得到满足时，用 break 语句来中断一个循环的运行。（请注意，也用 break 语句退出一个 switch 块。参见 Javascript 条件语句）。如果是一个 for 或者 for...in 循环，在更新计数器变量时使用 continue 语句越过余下的代码块而直接跳到循环的下一次重复中。

<html>

<head><title>一个用break中断循环的Javascript示例代码</title>

function BreakTest(breakpoint){

var i = 0;

var m = 0;

while (i < 100)

{

//当 i 等于breakpoint时，中断循环

if (i == breakpoint)

break;

m=m + i;

i++;

}

return(m);

}

</script>

</head>

<body>

//设函数BreakTest参数breakpoint值为23，得到从1加到22的合计。

document.write(BreakTest(23))

</script>

</body>

</html>

continue 示例代码：

<html>

<head>

<title>一个用continue跳过后面代码，开始循环的下一次重复的Javascript代码</title>

</head>

<body>

//该script代码用来输出1到10之间的奇数。

var x ;

for (x=1; x<10; x++)

{

//如果x被2整除，则跳过后面代码，开始下一次重复；

//如果x不能被2整除，则执行后面代码，输出 x 。

if (x%2==0)

continue;

document.write (x + "<br>");

}

</script>

</body>

</html>

第五章 WEB页面信息的交互——窗体与框架

要实现网页的动态交互，必须掌握有关窗体对象（Form）和框架对象（Frames）更为复杂的知识。

5.1窗体基础知识

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

5.1.1窗体对象

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

</form>

</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>

...

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>

...

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>

//原来的颜色

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>

<A href="test8_2.htm"> 调用动态按钮文档</a>

<form >

</form>

</BODY>

</HTML>

输出结果见图5-1所示。

图5-1 调用动态按钮图

动态按钮程序。

test8_2.htm

<HTML>

<HEAD>

</HEAD>

<tr>

<p><input type="submit" name="banner" VALUE="Submit"

onClick="alert('You have to put an \'action=[url]\' on the form

tag!!')"> <br>

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>

<BODY>

</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>

</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中实现更为复杂的信息交互。该例子是在一个多窗口中实现窗体信息的动态交互，在程序中首先在浏览器窗口中制作三个用于窗体交互的窗口，每个窗体窗口实现不同信息的动态交互。

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

test_1.html为显示标题文档；

test_2.html为第二框架文档其中需要注意的是：

通过JavaScript脚本将所示的“云南省”和“四川省”分别改为“昆明市”和“成都市”；

test_3.html为第三框架文档。

主调文档

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

Test9.htm

<HTML>

<HEAD>

</HEAD>

</Frameset>

</HTML>

第一个框架

主要作用是显示标题文档。

Test9_1.htm

<HTML>

<HEAD>

</HEAD>

<H2>使用框架实现WEB交互</H2>

</HTML>

第二个框架

主要作用是实现交互。可以通过JavaScript脚本将所示的“云南省”和“四川省”分别改为“昆明市”和“成都市”。

Test9_2.htm

<HTML>

<HEAD>

</HEAD>

<Body>

请选择城市：<BR>

<Option>云南省

<Option>四川省

<Option>贵州省

<Option>山东省

<Option>江苏省

<Option>浙江省

<Option>安徽省

<Option>河南省

</select><BR>

<HR>

</Form>

<pre>

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>

请输入用户名：

<HR>

请选择:

<HR>

<BR>

</Form>

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 在浏览器中结果

第六章结束语

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

不知不觉网页设计的课程将要结束了，这门课程所包含内容的丰富是让我从没有想到的。在整个的学习过程中，我学习了HTML、Css、JavaScript语言、网站建设的基本思想等重要内容。到现在为止，我还是很庆幸能够学到这么多的内容。到现在为止，我还是很庆幸能够学到这么多的内容。网页设计与制作毕业设计是在指导教师的悉心指导下独立完成的。虽然整个整个内容还有很多不足，但是我的确能够感到在我制作过程中技能的提高。在今后的学习生活中，我将不断提高自己网页设计与制作的能力和水平，从而弥补在本次毕业设计中的不足。

致谢

本论文历时两个多月，我系统综合地将我所学的知识运用于毕业设计的全过程。在完成毕业设计中，首先我要感谢我的指导教师官老师。官老师耐心细致地指导我毕业设计，提出了很多精辟而富有建设性的建议。官老师认真负责的工作态度，严谨的治学态度都给我留下了深刻的印象，在学习上给予了我极大的关心和帮助，在此表示衷心感谢！同时，感谢电子科技大学计算机学院为我提供了一个良好的学习环境，感谢学院的领导和老师们！他们无微不至的关怀、精心的培养使我到了很多的知识，终生受益

更多相关推荐：

网页设计与制作课程设计: 一设计目的通过一个月的网页设计学习设计一个简单的网站来检测自己的学习成果看看哪些东西还没有掌握需要进一步的去巩固网页的设计区别于实体化的一些东西其多为多媒体的存在意味着它可以容纳更多的信息以及更多的展示形式网页...
网页设计与制作课程设计报告: 网页设计与制作课程设计报告学校课题专业班级姓名学号指导教师邵阳学院电气工程系吴鹏辉网页设计与制作目录1设计目的12设计思想13网页详细设计分析231建立站点232建立布局333网页中的图像44结论8I邵阳学院电...
《网页设计与制作》课程设计报告模板: 网页设计与制作课程设计报告书题目专业班级学号姓名山西大学商务学院学院信息学院1目录1概述32功能需求分析33网站设计331网站总体设计332数据库设计433目录结构的设计54网站技术实现641前台系统的实现64...
网页设计与制作课程设计(论文): 辽宁工业大学网页设计与制作课程设计论文题目漂流岛儿童网站设计院系管理学院专业班级电子商务091学号09012345666学生姓名打打指导教师你你教师职称副教授起止时间20xx7220xx76课程设计论文任务及评...
网页设计与制作课程设计报告: 20xx20xx学年第一学期网页设计与制作课程设计报告题目维影影视公司网页设计专业数字媒体技术班级121班姓名指导教师成绩计算机与信息工程系二0一四年六月二十日计算机与信息工程系网页设计与制作课程设计报告目录1...
网页设计与制作课程设计报告: 网页设计与制作课程设计报告学校邵阳学院课题制作邵阳学院之旅网站专业班级电气工程及其自动化姓名吴鹏辉学号104120xx14指导教师牛莉邵阳学院电气工程系吴鹏辉网页设计与制作目录1设计目的12设计思想13网页详细...
《网页设计与制作》课程设计报告: 网页设计与制作课程设计实验报告院系名称管理学院专业班级电子商务13级3班学生姓名刘志华学号20xx1705030220xx年06月一实验目的本实验属于设计性实验目的是使学生在学完网页设计与制作课程的基本知识之后...

网页设计与制作期末设计报告: 网页设计与制作个人网站设计报告指导老师盛加林学号20xx2809姓名杜才伟班级信管0802一概述随着网络技术的迅速发展网络应用越来越趋于平凡化无论是企业还是其他组织机构或者是个人都希望利用计算机网络技术开发对自...
网页设计与制作课程设计报告: 网页设计与制作期末课程设计报告题目周杰伦中文网学院系别班级学生姓名学号指导老师陆兴完成日期20xx1221目录一系统概述二系统分析三系统总体设计四系统实现五设计过程中的问题及解决方法六系统测试情况七总结与心得一...
网页设计与制作课程作业报告: 课程设计报告
《网页设计与制作》课程设计报告模板: 网页设计与制作课程设计报告书题目专业班级学号姓名山西大学商务学院学院信息学院山西大学商务学院信息学院一网站设计目标与背景二站点设计结构图山西大学商务学院信息学院三网站详细设计说明网页名称所用技术等四网站建设的总...
《网页设计与制作》课程设计要求: 网页设计与制作课程设计要求最终提交网站策划报告一份及独立制作网站一个使用所学知识独立制作一个网站网站的主题可以是文学音乐影视自我介绍求职家乡介绍等1作业基本要求1站点目录层次分明管理有序无多余的文件和文件夹不能...

网页设计与制作课程设计报告（39篇）

热门关注