《网页设计与制作论文.doc》由会员分享，可在线阅读，更多相关《网页设计与制作论文.doc（32页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、摘 要本论文将对个人网页设计及制作的方法、工具等展开研究与探讨。在介绍网页设计及制作语言的基础上，着重使用JavaScript作为工具语言进行网页设计及制作的实际操作，分别对基于对象的JavaScript语言、内部对象系统的使用及WEB页面信息交互窗口与框架进行详细描述，并利用具体的实例进行验证。本论文主要章节如下，第一章：绪论，本章主要介绍网页设计的相关知识。第二章：网页设计语言概述，本章主要介绍网页设计的语言HTML，以及用于编辑HTML语言的软件，为后续工作奠定基础。第三章：基于对象的JavaScript语言，本章介绍了基于对象的JavaScript中常用内部对象属性、方法的使用。第四章
2、：内部对象系统的使用，本章主要介绍使用浏览器的内部对象系统，可实现及HTML文档进行交互。第五章：WEB页面信息的交互窗体及框架，本章主要介绍实现网页的动态交互，必须掌握有关窗体对象（Form）与框架对象（Frames）更为复杂的知识。关键词： 网页制作；网页设计；HTML；ASP第一章 绪论随着21世纪的到来，人们更深切地感受到计算机在生活与工作中的作用越来越重要，越来越来的职业需要具有计算机的应用技能。掌握计算机是职业的需要，更是事业发展的需要。网页设计及制作是计算机能力的具体表现，本章主要介绍网页设计的相关知识。1.1 网页设计概述网站是企业向用户与网民提供信息(包括产品与服务)的一种方
3、式,是企业开展电子商务的基础设施与信息平台，离开网站（或者只是利用第三方网站）去谈电子商务是不可能的。企业的网址被称为“网络商标”，也是企业无形资产的组成部分，而网站是INTERNET上宣传与反映企业形象与文化的重要窗口。1.2 网页设计的要素网页设计的两大要素是：整体风格与色彩搭配。一、确定网站的整体风格在这里，我提供给大家一些参考经验：1将你的标志logo，尽可能的放在每个页面上最突出的位置。2突出你的标准色彩。3总结一句能反映贵站精髓的宣传标语！4相同类型的图像采用相同效果，比如说标题字都采用阴影效果，那么在网站中出现的所有标题字的阴影效果的设置应该是完全一致的！二、网页色彩的搭配1用一
4、种色彩。这里是指先选定一种色彩，然后调整透明度或者饱与度，这样的页面看起来色彩统一，有层次感。2用两种色彩。先选定一种色彩，然后选择它的对比色。3用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。1.3 大作业目的与意义 本大作业主要是对网页设计及制作的语言基础上进行探讨，主要内容如下：通过已经做好的网页，分析html网页设计技术、XML技术、Java Applet技术与Javascript技术在网页设计中的应用。1.4 要分析的网页第二章 HTML网页设计技术的应用2.1 HTML语言介绍HTML（HyperText Mark-up Language）即超
5、文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。 HTML语言的特点HTML文档制作不是很复杂，且功能强大，支持不同数据格式的文件镶入，这也是WWW盛行的原因之一，HTML语言的特点如下：1、简易性，HTML版本升级采用超集方式，从而更加灵活方便。2、可扩展性，HTML语言的广泛应用带来了加强功能，增加标识符等要求，HTML
6、采取子类元素的方式，为系统扩展带来保证。3、平台无关性。虽然PC机大行其道，但使用MAC等其他机器的大有人在，HTML可以使用在广泛的平台上，这也是WWW盛行的另一个原因。 HTML语言的编辑软件HTML的本质是文本，需要浏览器的解释，HTML的编辑器大体可以分为三种：1、基本编辑软件，使用WINDOWS自带的记事本或写字版都可以编写，当然，如果你用WPS来编写，也可以。不过存盘时请使用.htm或.html作为扩展名，这样浏览器就可以解释执行了。2、半所见即所得软件，这种软件能大大提高开发效率，它可以使你在很短的时间内做出Homepage，且可以学习HTML，这种类型的软件主要有HOTDOG，
7、还有国产的软件网页作坊。3、所见即所得软件，使用最广泛的编辑器，完全可以一点不懂HTML的知识就可以做出网页，这类软件主要有Frontpage，DREAMWEAVER、Delphi、Eclipse、UltraEdit。 html语言在网页设计中的应用 JavaScript技术在网页设计中应用一、JavaScript概述JavaScript是一种基于对象(Object)与事件驱动(Event Driven)并具有安全性能的脚本语言。使用它的目的是及HTML超文本标记语言、Java 脚本语言（Java小程序）一起实现在一个Web页面中链接多个对象，及Web客户交互作用。从而可以开发客户端的应用程序
8、等。它是通过嵌入或调入在标准的HTML语言中实现的。它的出现弥补了HTML语言的缺陷，它是Java及HTML折衷的选择，具有以下几个基本特点： 1、是一种脚本编写语言JavaScript是一种脚本语言，它采用小程序段的方式实现编程。像其它脚本语言一样,JavaScript同样已是一种解释性语言,它提供了一个易的开发过程。它的基本结构形式及C、C+、VB、Delphi十分类似。但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。它及HTML标识结合在一起，从而方便用户的使用操作。 2、基于对象的语言。JavaScript是一种基于对象的语言，同时以可以看作一种面向对象的。这意味着
9、它能运用自己已经创建的对象。因此，许多功能可以来自于脚本环境中对象的方法及脚本的相互作用。 3、简单性JavaScript的简单性主要表达在：首先它是一种基于Java基本语句与控制流之上的简单而紧凑的设计, 从而对于学习Java是一种非常好的过渡。其次它的变量类型是采用弱类型，并未使用严格的数据类型。 4、安全性JavaScript是一种安全性语言，它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改与删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。 5、动态性的JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程
10、序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页(Home Page)中执行了某种操作所产生的动作，就称为“事件”(Event)。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。 6、跨平台性JavaScript是依赖于浏览器本身，及操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可正确执行。从而实现了“编写一次,走遍天下”的梦想。 实际上JavaScript最杰出之处在于可以用很小的程序做大量的事。无须有高性能的电脑，软件仅需一个字处理软件及一浏览器，无须WEB服务器通道，通过自己的电脑即可
11、完成所有的事情。总之，JavaScript 是一种新的描述语言，它可以被箝入到 HTML 的文件之中。 JavaScript语言可以做到回应使用者的需求事件 (如：form的输入) ，而不用任何的网路来回传输资料，所以当一位使用者输入一项资料时，它不用经过传给伺服端 (server)处理，再传回来的过程，而直接可以被客户端 (client) 的应用程式所处理。第五章 色彩在网页中的应用色彩在网页中的应用色彩是艺术表现的要素之一。在网页设计中，我们的设计师根据与谐、均衡与重点突出的原则，将不同的色彩进行组合搭配来构成美丽的页面。 根据色彩对人们心理的影响，合理地加以运用。先选定一种色彩，然后调整
12、透明度或者饱与度，这样的页面看起来色彩统一，有层次感。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。在网页配色中不要将所有颜色都用到，尽量控制在三至五种色彩以内。背景与前文的对比尽量要大以便突出主要文字内容。主页色彩的处理色彩是人的视觉最敏感的东西。主页的色彩处理得好，可以锦上添花，达到事半功倍的效果。色彩总的应用原则应该是“总体协调，局部对比”，也就是：主页的整体色彩效果应该是与谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。在色彩的运用上，可以根据主页内容的需要，分别采用不同的主色调。因为色彩具有象征性，例如：嫩绿色、翠绿色、金黄色、灰褐色就可以分别象征
13、着春、夏、秋、冬。其次还有职业的标志色，例如：军警的橄榄绿，医疗卫生的白色等。色彩还具有明显的心理感觉，例如冷、暖的感觉，进、退的效果等。另外，色彩还有民族性，各个民族由于环境、文化、传统等因素的影响，对于色彩的喜好也存在着较大的差异。充分运用色彩的这些特性，可以使我们的主页具有深刻的艺术内涵，从而提升主页的文化品位。常用的配色方案1.暖色调。即红色、橙色、黄色、赭色等色彩的搭配。这种色调的运用，可使主页呈现温馨、与煦、热情的氛围。 2.冷色调。即青色、绿色、紫色等色彩的搭配。这种色调的运用，可使主页呈现宁静、清凉、高雅的氛围。 3.对比色调。即把色性完全相反的色彩搭配在同一个空间里。例如：红
14、及绿、黄及紫、橙及蓝等。这种色彩的搭配，可以产生强烈的视觉效果，给人亮丽、鲜艳、喜庆的感觉。 最后，还要考虑主页底色（背景色）的深、浅，这里借用摄影中的一个术语，就是“高调”与“低调”。底色浅的称为高调；底色深的称为低调。底色深，文字的颜色就要浅，以深色的背景衬托浅色的内容（文字或图片）；反之，底色淡的，文字的颜色就要深些，以浅色的背景衬托深色的内容（文字或图片）。这种深浅的变化在色彩学中称为“明度变化”。当然，色彩的明度也不能变化太大，否则屏幕上的亮度反差太强，同样也会使读者的眼睛受不了。合理搭配网页色彩网页的色彩是树立网站形象的关键之一，网页的背景、文字、图标、边框、超链接等都要用到色彩。
15、不同的色彩会使浏览者有不同的心理感受。合理的搭配色彩，会更好的表现主题，吸引用户的注意力。网页色彩涉及到艺术知识，让美术教师参加网页色彩设计，可能会出现比较理想的效果。在色彩搭配上要注意色彩的鲜明性、独特性、合适性、联想性。背景色与前景色对比要大，以突出主要内容网站给人的第一印象来自视觉冲击，不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。“标准色彩”是指能表达网站形象与延伸内涵的色彩，要用于网站的标志，标题，主菜单与主色块。给人以整体统一的感觉。至于其它色彩也可以使用，但应当只是作为点缀与衬托，绝不能喧宾夺主。一般来说，一个网站的标准色彩不超过3种，太多则让人眼花缭乱。适合于网页标准
16、色的颜色有：蓝色，黄/橙色，黑/灰/白色三大系列色。第六章 WEB页面信息的交互窗体及框架要实现网页的动态交互，必须掌握有关窗体对象（Form）与框架对象（Frames）更为复杂的知识。窗体对象可以使设计人员能用窗体中不同的元素及客户机用户相交互，而用不着在之前首先进行数据输入，就可以实现动态改变Web文档的行为。窗体对象窗体（Form）：它构成了Web页面的基本元素。通常一个Web页面有一个窗体或几个窗体，使用Forms数组来实现不同窗体的访问。在Forms0中共有三个基本元素，而Forms1中只有两个元素。窗体对象最主要的功能就是能够直接访问HTML文档中的窗体，它封装了相关的HTML代码
17、： 窗体对象的方法窗体对象的方法只有一个-submit()方法，该方法主要功用就是实现窗体信息的提交。如提交Mytest窗体，则使用下列格式：document.mytest.submit() 窗体对象的属性窗体对象中的属性主要包括以下：elements name action target encoding method。除Elements外，其它几个均反映了窗体中标识中相应属性的状态，这通常是单个窗体标识；而elements常常是多个窗体元素值的数组，例：elements0.Mytable.elements1 访问窗体对象在JavaScript中访问窗体对象可由两种方法实现：（1）通过访问窗
18、体在窗体对象的属性中首先必须指定其窗体名，而后就可以通过下列标识访问窗体如：document.Mytable()。（2）通过数组来访问窗体除了使用窗体名来访问窗体外，还可以使用窗体对象数组来访问窗体对象。但需要注意一点，因窗体对象是由浏览器环境的提供的，而浏览器环境所提供的数组下标是由0到n。所以可通过下列格式实现窗体对象的访问：document.forms0document.forms1document.forms2. 引用窗体的先决条件在JavaScript中要对窗体引用的条件是：必须先在页面中用标识创建窗体，并将定义窗体部分放在引用之前。6.2 窗体中的基本元素窗体中的基本元素由按钮、单
19、选按钮、复选按钮、提交按钮、重置按钮、文本框等组成。在JavaScript中要访问这些基本元素，必须通过对应特定的窗体元素的数组下标或窗体元素名来实现。每一个元素主要是通过该元素的属性或方法来引用。其引用的基本格式见下：formName.elements.methadName (窗体名.元素名或数组.方法)formName.elemaent.propertyName(窗体名.元素名或数组.属性)下面分别介绍：（1）Text单行单列输入元素功能：对Text标识中的元素实施有效的控制。基本属性：Name：设定提交信息时的信息名称。对应于HTML文档中的Name。Value：用以设定出现在窗口中对应
20、HTML文档中Value的信息。defaultvalue：包括Text元素的默认值基本方法：blur()：将当前焦点移到后台。select()：加亮文字。主要事件：onFocus：当Text获得焦点时，产生该事件。OnBlur：从元素失去焦点时，产生该事件。Onselect：当文字被加亮显示后，产生该文件。onchange：当Text元素值改变时，产生该文件。例：document.mytest.value=that is a Javascript;document.mytest.select();document.mytest.blur();（2）textarea多行多列输入元素功能：实施对T
21、extarea中的元素进行控制。基本属性name：设定提交信息时的信息名称，对应HTML文档Textarea的Name。Value：用以设定出现在窗口中对应HTML文档中Value的信息。Default value：元素的默认值。方法：blur()：将输入焦点失去select()：将文字加亮后事件：onBlur:当失去输入焦点后产生该事件onFocus:当输入获得焦点后，产生该文件Onchange:当文字值改变时，产生该事件Onselect:当文字加亮后，产生该文件（3）Select选择元素功能：实施对滚动选择元素的控制。属性：name:设定提交信息时的信息名称，对应文档select中的nam
22、e。Length:对应文档select中的lengthoptions:组成多个选项的数组selectIndex;该下标指明一个选项select在中每一选项都含有以下属性：Text:选项对应的文字selected:指明当前选项是否被选中Index:指明当前选项的位置defaultselected:默认选项事件：OnBlur：当select选项失去焦点时，产生该文件。onFocas:当select获得焦点时，产生该文件。Onchange:选项状态改变后，产生该事件。（4）Button按钮功能：实施对Button按钮的控制。属性：Name:设定提交信息时的信息名称，对应文档中button的Name。
23、Value:用以设定出现在窗口中对应HTML文档中Value的信息。方法：click()该方法类似于一个按下的按钮。事件：onclick当单击button按钮时，产生该事件。例 ：document.elements0.value=mytest; /通过元素访问或document.testcallvalue=mytest; / 通过名字访问（5）checkbox检查框功能：实施对一个具有复选框中元素的控制。属性：name:设定提交信息时的信息名称。Value:用以设定出现在窗口中对应HTML文档中Value的信息。Checked:该属性指明框的状态true/false.defauitchecke
24、d:默认状态方法：click()该方法使得框的某一个项被选中。事件：Onclick：当框的选被选中时，产生该事件。（6）radio无线按钮功能：实施对一个具单选功能的无线按钮控制。属性：Name：设定提交信息时的信息名称，对应HTML文档中的radio的name相同Value：用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档中的radio的name。length：单选按钮中的按钮数目。defalechecked:默认按钮。checked:指明选中还是没有选中。index:选中的按钮的位置。方法：chick():选定一个按钮。事件：onclick:单击按钮时，产生该事件。
25、（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。defaul
26、tvalu:默认值方法：select():加亮输入口令域。blur():使这丢失passward输入焦点。focus():获得password输入焦点。（9）submit提交元素功能：实施对一个具有提交功能按钮的控制。属性：name:设定提交信息时的信息名称，对应HTML文档中submit。Value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档中value。方法click()相当于按下submit按钮。事件：onclick()当按下该按钮时，产生该事件。下面我们演示通过点击一个按钮（red）来改变窗口颜色，点击“调用动态按钮文档”调用一个动态按钮文档。/原来的颜色
27、document.bgColor=blue;document.vlinkColor=white;documentColor=yellow;document.alinkcolor=red;/动态改变颜色function changecolor() document.bgColor=red; document.vlinkColor=blue; documentColor=green; document.alinkcolor=blue; 调用动态按钮文档 输出结果见图5-1所示。 图5-1 调用动态按钮图动态按钮程序。 var id,pause=0,position=0;function banne
28、r() / variables declaration var i,k,msg= 这里输入你要的内容;/ increase msg k=(30/msg.length)+1; for(i=0;ibanner(); 返回图5-2 动态按钮网页图本讲介绍了使用JavaScript脚本实现Web页面信息交互的方法。其中主要介绍了窗体中的基本元素的主要功能与使用。6.4 框架框架Frames最主要功用是分割视窗，使每个小视窗能显示不同的HTM L文件，不同框架之间可以互动(interact)，这就是说不同框架之间可以交换讯息及资料。例如:假设您开了两个frames，第一个frame可显示书的目录，第二个
29、frame则显示章节的具体内容。框架可以将屏幕分割成不同的区域，每个区域有自己的URL，通过Frames数组对象来实现不同框架的访问。实际上框架对象本身也一类窗口，它继承了窗口对象的所有特征，并拥有所有的属性与方法。利用框架的例子具体说明，见图5-3所示。图5-3 框架对象 以上HTML标识将屏幕分成三个框架。先将窗口分成以二行为单位的窗口，之后再按分成二个窗口。并在相应的框架中放入自己的HTML文档。通过Framset告诉浏览器您要设置几个框架；rows这项参数告诉浏览器您想将视窗分割成几列；而cols这项参数是告诉浏览器您想将视窗分割成几行。可以用很多组的 tags 将视窗分割得更复杂。可
30、以给每个frame一个“名字”(name)。frame的名字在JavaScript语法中的地位非常重要。可以用 告诉浏览器要载入的HTML文件。6.5 框架的访问在前面我们介绍过使用document.forms实现单一窗体中不同元素的访问。而要实现框架中多窗体的不同元素的访问，则必须使用window对象中的Frames属性。Frames属性同样也是一个数组，他在父框架集中为每一个子框架设有一项。通过下标实现不同框架的访问：parent.framesIndex1.docuement.formsindex2通过parent.frames.length确定窗口中窗体的数目。除了使用数组下标来访问窗体
31、外还可以使用框架名与窗体名来实现各元素的访问：parent.framesName.decument.formNames.elementName.(m/p)通过一个具体的实例，来说明利用JavaScript脚本在WEB中实现更为复杂的信息交互。该例子是在一个多窗口中实现窗体信息的动态交互，在程序中首先在浏览器窗口中制作三个用于窗体交互的窗口，每个窗体窗口实现不同信息的动态交互。tset9.html为主调用文档它首先将窗口划分为具有二行的窗体，尔后再将第二行的窗体划分为具有二列的窗体；test9-1.html为显示标题文档；test9_2.html为第二框架文档其中需要注意的是：通过JavaScr
32、ipt脚本将所示的“云南省”与“四川省”分别改为“昆明市”与“成都市”；test7_3.html为第三框架文档。主调文档 主要作用是将窗口划分为具有二行的窗体,尔后再将第二行的窗体划分为具有二列的窗体。 第一个框架 主要作用是显示标题文档。使用框架实现WEB交互第二个框架 主要作用是实现交互。可以通过JavaScript脚本将所示的“云南省”与“四川省”分别改为“昆明市”与“成都市”。请选择城市：山西省四川省贵州省 山东省江苏省浙江省安徽省河南省 document.test9_1.elements0.options0.text=太原市; document.test9_1.elements0.o
33、ptions1.text=成都市; 第三个框架：主要作用是实现交互。请输入用户名：请选择:全部信息部分信息所有城市 document.test9_2.elements0.value=劳动与社会保障; document.test9_2.elements1.checked=true; document.test9_2.elements2.checked=true; document.test9_2.elements3.checked=false;在浏览器中的结果见图5-4所示。图 5-4 在浏览器中结果6.6 本章小结本章主要介绍框架中的基本元素的主要功能与使用，利用JavaScript脚本可以非
34、常方便、灵活地实现Web页面更为复杂的信息交互，这是HTML标识语言所不能具备的。从中可以了解到JavaScript是Web涉及人员的良好工具。第六章 结 论不知不觉中网页设计及制作的毕业毕业设计将要结束了，这门课程所包含内容的丰富是让我从没有想到的。在整个的学习过程中，我学习了Flash、Dreamwave、Javascript、Fireworks、Html语言、IIS、网站建设的基本思想等重要内容。到现在为止，我还是很庆幸能够学到这么多的内容。网页设计及制作毕业设计是在指导教师的悉心指导下独立完成的。虽然整个整个内容还有很多不足，但是我的确能够感到在我制作过程中技能的提高。在今后的学习生活
35、中，我将不断提高自己网页设计及制作的能力与水平，从而弥补在本次毕业设计中的不足。致 谢本论文历时两个多月，我系统综合地将我所学的知识运用于毕业设计的全过程。在完成毕业设计中，首先我要感谢我的指导教师曹正文教师。曹教师耐心细致地指导我毕业设计，提出了很多精辟而富有建设性的建议。曹教师认真负责的工作态度，严谨的治学态度都给我留下了深刻的印象，在学习上给予了我极大的关心与帮助，在此表示衷心感谢！同时，感谢西安电子科技大学网络学院为我提供了一个良好的学习环境，感谢学院的领导和教师们！他们无微不至的关怀、精心的培养使我到了很多的知识，终生受益！参考文献1 徐国平.网页设计及制作M.北京：机械工业出版社.
36、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+JavaScriptM.人民邮电出版社.2009年。8 泽卡斯著，李松峰，曹力译.JavaScript高级程序设计(第2版) J.人民邮电出版社.2010年。9 周爱民.JAVASCRIPT语言精髓及编程实践J. 北京：电子工业出版社.2008年。第 32 页