个人网页设计与制作毕业论文.docx
《个人网页设计与制作毕业论文.docx》由会员分享，可在线阅读，更多相关《个人网页设计与制作毕业论文.docx（26页珍藏版）》请在冰豆网上搜索。
个人网页设计与制作毕业论文
学校
毕业论文（设计）
论文题目：
个人主页设计
姓名：
学号：
专业：
计算机初等教育班级：
指导教师：
完成日期：
2020年5月10日
摘要
本论文将对个人网页设计与制作的方法、工具等展开研究和探讨。
在介绍网页设计与制作语言的基础上，着重使用JavaScript作为工具语言进行网页设计与制作的实际操作，分别对基于对象的JavaScript语言、内部对象系统的使用及WEB页面信息交互——窗口和框架进行详细描述，并利用具体的实例进行验证。
本论文主要章节如下，第一章：
绪论，本章主要介绍网页设计的相关知识。
第二章：
网页设计语言概述，本章主要介绍网页设计的语言——HTML，以及用于编辑HTML语言的软件，为后续工作奠定基础。
第三章：
基于对象的JavaScript语言，本章介绍了基于对象的JavaScript中常用内部对象属性、方法的使用。
第四章：
内部对象系统的使用，本章主要介绍使用浏览器的内部对象系统，可实现与HTML文档进行交互。
第五章：
WEB页面信息的交互——窗体与框架，本章主要介绍实现网页的动态交互，必须掌握有关窗体对象（Form）和框架对象（Frames）更为复杂的知识。
第一章绪论
1.1网页设计概述
1.2网页设计的要素
1.3本论文工作
第二章网页设计语言概述
2.1HTML语言介绍
2.2常用的HTML语言编辑软件
第三章基于对象的JavaScript语言
3.1对象的基础知识
3.2常用对象的属性和方法
第四章内部对象系统的使用
4.1浏览器对象层次及其主要作用
4.2文档对象功能及其作用
第五章WEB页面信息的交互——窗体与框架
5.1窗体基础知识
5.2窗体中的基本元素
第六章结论
参考文献
第一章绪论
随着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.1HTML语言介绍
HTML（HyperTextMark-upLanguage）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。
HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。
HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。
2.1.1HTML语言的特点
HTML文档制作不是很复杂，且功能强大，支持不同数据格式的文件镶入，这也是WWW盛行的原因之一，HTML语言的特点如下：
1、简易性，HTML版本升级采用超集方式，从而更加灵活方便。
2、可扩展性，HTML语言的广泛应用带来了加强功能，增加标识符等要求，HTML采取子类元素的方式，为系统扩展带来保证。
3、平台无关性。
虽然PC机大行其道，但使用MAC等其他机器的大有人在，HTML可以使用在广泛的平台上，这也是WWW盛行的另一个原因。
2.1.2HTML语言的编辑软件
HTML的本质是文本，需要浏览器的解释，HTML的编辑器大体可以分为三种：
1、基本编辑软件，使用WINDOWS自带的记事本或写字版都可以编写，当然，如果你用WPS来编写，也可以。
不过存盘时请使用.htm或.html作为扩展名，这样浏览器就可以解释执行了。
2、半所见即所得软件，这种软件能大大提高开发效率，它可以使你在很短的时间内做出Homepage，且可以学习HTML，这种类型的软件主要有HOTDOG，还有国产的软件网页作坊。
3、所见即所得软件，使用最广泛的编辑器，完全可以一点不懂HTML的知识就可以做出网页，这类软件主要有Frontpage，DREAMWEAVER、Delphi、Eclipse、UltraEdit。
一个HTML文件由一个HTML元素组成，即文件以开始。
以结束，文档中其他元素及其属性的声明都是HTML的元素体。
HTML元素的元素体和元素体由两大部分组成，即头元素
…和体元素…。
头元素和体元素的元素体又由其他元素、文本和注释等组成。
一个标准的HTML文件应该具备如下结构：
标记一个HTML文件的开始
HTML文件的文件头部分开始
…文件头部分内容
HTML文件的文件头部分结束
HTML文件的文件体部分开始
…文件体
HTML文件的文件部分结束
标记该HTML文件结束
有些元素只能出现在头元素中，如meta、title等元素，而大多数的元素只能出现在体元素中。
在头元素中的元素表示的是该HTML文件的一般信息，比如该文件的标题、来源、作者、版本、字符集和关键字等，这些元素与书写的顺序无关，它们只是表明该HTML文件的属性值。
但出现在元素体中的元素则是要注意书写顺序的，改变了它们的书写顺序就会改变HTML文件在浏览器上输出的形式。
2.2常用的HTML语言编辑软件
2.2.1Dreamweaver
Dreamweaver是美国Adobe（原Macromedia，2005年被Adobe收购）公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
它不仅是优秀的WYSIWYG编辑器，更是优秀的代码编辑器，有代码加亮，代码提示等丰富功能，提供各种示例代码，并支持Javascript,PHP,ASP,JSP等多种脚本语言。
最新版本为CS4，发布于2008年9月。
2.2.2ASP
ASP技术是Microsoft公司开发的一套全新的服务器端脚本程序环境。
它可以根据客户端的不同请求，在服务器端经过相应的ASP程序处理生成不同的静态HTML页面并穿回给浏览器。
ASP自身有很多优点，这些优点使它成为了当今世界网络上应用最多的脚本设计环境。
1、什么是ASP
ASP的全称是ActiveServerPages,中文名称叫做动态服务器网页，其功能在于可以使用它来开发运行在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服务器有以下几个：
MicrosoftInternetInformationServerversion（IIS）;
MicrosoftPeerWebServer;
MicrosoftPersonalWebServer（PWS）;
其中前两个主要是为Microsoft公司的WindownsNT/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的开发工具很多，比较好的由VisualInterdev、Dreamweaver等。
Dreamweaver是一个集成的Web应用软件开发系统，包括开发、发行以及管理数据库驱动的Web应用软件所需的所有的功能，所以一般情况下推荐使用Dreamweaver。
2.2.3JavaScript
一、JavaScript概述
JavaScript是一种基于对象（Object）和事件驱动（EventDriven）并具有安全性能的脚本语言。
使用它的目的是与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服务程序。
它对用户的反映响应，是采用以事件驱动的方式进行的。
所谓事件驱动，就是指在主页（HomePage）中执行了某种操作所产生的动作，就称为“事件”（Event）。
比如按下鼠标、移动窗口、选择菜单等都可以视为事件。
当事件发生后，可能会引起相应的事件响应。
6、跨平台性
JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可正确执行。
从而实现了“编写一次,走遍天下”的梦想。
实际上JavaScript最杰出之处在于可以用很小的程序做大量的事。
无须有高性能的电脑，软件仅需一个字处理软件及一浏览器，无须WEB服务器通道，通过自己的电脑即可完成所有的事情。
总之，JavaScript是一种新的描述语言，它可以被箝入到HTML的文件之中。
JavaScript语言可以做到回应使用者的需求事件（如：
form的输入），而不用任何的网路来回传输资料，所以当一位使用者输入一项资料时，它不用经过传给伺服端（server）处理，再传回来的过程，而直接可以被客户端（client）的应用程式所处理。
JavaScript和Java很类似，但到底并不一样！
Java是一种比JavaScript更复杂许多的程式语言，而JavaScript则是相当容易了解的语言。
JavaScript创作者可以不那麽注重程式技巧，所以许多Java的特性在JavaScript中并不支援。
二、JavaScript和Java的区别
虽然JavaScript与Java有紧密的联系，但却是两个公司开发的不同的两个产品。
Java是SUN公司推出的新一代面向对象的程序设计语言，特别适合于Internet应用程序开发；而JavaScript是Netscape公司的产品，其目的是为了扩展NetscapeNavigator功能,而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言,它的前身是LiveScript；而Java的前身是Oak语言。
下面对两种语言间的异同作如下比较：
1、基于对象和面向对象
Java是一种真正的面向对象的语言，即使是开发简单的程序，必须设计对象。
JavaScript是种脚本语言，它可以用来制作与网络无关的，与用户交互作用的复杂软件。
它是一种基于对象（ObjectBased）和事件驱动（EventDriver）的编程语言。
因而它本身提供了非常丰富的内部对象供设计人员使用。
2、解释和编译
两种语言在其浏览器中所执行的方式不一样。
Java的源代码在传递到客户端执行之前，必须经过编译，因而客户端上必须具有相应平台上的仿真器或解释器，它可以通过编译器或解释器实现独立于某个特定的平台编译代码的束缚。
JavaScript是一种解释性编程语言，其源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户编由浏览器解释执行。
3、强变量和弱变量
两种语言所采取的变量是不一样的。
Java采用强类型变量检查，即所有变量在编译之前必须作声明。
如:
Integerx;
Stringy;
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使用来标识，而Java使用来标识。
第三章基于对象的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已知对象名）
说明：
该语句的功能是用于对已知对象的所有属性进行操作的控制循环。
它是将一个已知对象的所有属性反复置给一个变量；而不是使用计数器来实现的。
该语句的优点就是无需知道对象中属性的个数即可进行操作。
例：
下列函数是显示数组中的内容：
FunctionshowData（object）
for（varX=0;X<30;X++）
document.write（object[i]）；
该函数是通过数组下标顺序值，来访问每个对象的属性，使用这种方式首先必须知道数组的下标值，否则若超出范围，则就会发生错误。
而使For...in语句，则根本不需要知道对象属性的个数，见下：
FunctionshowData（object）
for（varpropinobject）
document.write（object[prop]）；
使用该函数时，在循环体中，For自动将的属性取出来，直到最后为此。
（2）with语句
使用该语句的意思是：
在该语句体内，任何对变量的引用被认为是这个对象的属性，以节省一些代码。
withobject{
...}
所有在with语句后的花括号中的语句，都是在后面object对象的作用域的。
（3）this关键字
this是对当前的引用，在JavaScript由于对象的引用是多层次，多方位的，往往一个对象的引用又需要对另一个对象的引用，而另一个对象有可能又要引用另一个对象，这样有可能造成混乱，最后自己已不知道现在引用的那一个对象，为此JavaScript提供了一个用于将对象指定当前对象的语句this。
3.2常用对象的属性和方法
JavaScript为我们提供了一些非常有用的常用内部对象和方法。
用户不需要用脚本来实现这些功能。
这正是基于对象编程的真正目的。
在JavaScript提供了string（字符串）、math（数值计算）和Date（日期）三种对象和其它一些相关的方法。
从而为编程人员快速开发强大的脚本程序提供了非常有利的条件。
3.2.1常用内部对象
在JavaScript中对于对象属性与方法的引用，有两种情况：
其一是说该对象是静态对象，即在引用该对象的属性或方法时不需要为它创建实例；而另一种对象则在引用它的对象或方法是必须为它创建一个实例，即该对象是动态对象。
对JavaScript内部对象的引用，以是紧紧围绕着它的属性与方法进行的。
因而明确对象的静动性对于掌握和理解JavaScript内部对象是具有非常重要的意义。
1、串对象
string对象：
内部静态性。
访问properties和methods时，可使用（.）运算符实现。
基本使用格式：
objectName.prop/methods
（1）串对象的属性
该对象只有一个属性，即length。
它表明了字符串中的字
升级会员 