网页设计与应用

1、网页设计与应用专业：计算机网络技术班级：2015学号：20150321031姓名：蔡依婷指导教师：杨艳慈邯郸职业技术学院2017年11月21日网页设计与应用本论文将对个人网页设计与制作的方法、工具等展开研究和探讨。在介绍网页设计与 制作语言的基础上，着重使用 JavaScript作为工具语言进行网页设计与制作的实际操作， 分别对基于对象的JavaScript语言、内部对象系统的使用及 WEB页面信息交互窗口和 框架进行详细描述，并利用具体的实例进行验证。本论文主要章节如下，第一章：绪论，本章主要介绍网页设计的相关知识。第二章： 网页设计语言概述，本章主要介绍网页设计的语言HTML，以及用于编辑

2、HTML语言的软件，为后续工作奠定基础。第三章：基于对象的JavaScript语言，本章介绍了基于对象的JavaScript中常用内部对象属性、方法的使用。第四章：内部对象系统的使用，本章 主要介绍使用浏览器的内部对象系统，可实现与HTML文档进行交互。第五章：WEBK面信息的交互一一窗体与框架，本章主要介绍实现网页的动态交互，必须掌握有关窗体对象（Form）和框架对象（Frames更为复杂的知识。关键词：网页制作；网页设计；HTML ； ASP目录1.1 网页设计概述 41.2 网页设计的要素 41.3 大作业目的和意义 4第二章 HTML 网页设计技术的应用 62.1 HTML 语言介绍

3、62.1.1 HTML 语言的特点 62.1.2 HTML 语言的编辑软件 6第三章 色彩在网页中的应用 73.1 色彩在网页中的应用 73.2 主页色彩的处理 73.3 常用的配色方案 7第四章WEB页面信息的交互一一窗体与框架 84.1 窗体基础知识 84.1.1 窗体对象 84.1.2 窗体对象的方法 94.2 窗体中的基本元素 94.3 窗体对象实例 114.4 框架 134.5 框架的访问 144.6 本章小结 17第五章 结 论 18致 谢 19参考文献 20第一章绪论随着21世纪的到来，人们更深切地感受到计算机在生活和工作中的作用越来越重 要，越来越来的职业需要具有计算机的应用技

4、能。掌握计算机是职业的需要，更是事业 发展的需要。网页设计与制作是计算机能力的具体表现，本章主要介绍网页设计的相关 知识。1.1网页设计概述网站是企业向用户和网民提供信息（包括产品和服务）的一种方式，是企业开展电子 商务的基础设施和信息平台，离开网站（或者只是利用第三方网站）去谈电子商务是不 可能的。企业的网址被称为“网络商标”，也是企业无形资产的组成部分，而网站是 INTERNETt宣传和反映企业形象和文化的重要窗口。1.2网页设计的要素网页设计的两大要素是：整体风格和色彩搭配。一、确定网站的整体风格在这里，我提供给大家一些参考经验：1 将你的标志logo,尽可能的放在每个页面上最突出的位置

5、。2突出你的标准色彩。3.总结一句能反映贵站精髓的宣传标语！4相同类型的图像采用相同效果，比如说标题字都采用阴影效果，那么在网站中 出现的所有标题字的阴影效果的设置应该是完全一致的！二、网页色彩的搭配1. 用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，这样的 页面看起来色彩统一，有层次感。2. 用两种色彩。先选定一种色彩，然后选择它的对比色。3. 用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者 土黄，土灰，土蓝。1.3大作业目的和意义本大作业主要是对网页设计与制作的语言基础上进行探讨，主要内容如下：通过已经做好的网页，分析html网页设计技术、XML技术、

6、Java Applet技术和Javascript 技术在网页设计中的应用。第二章HTML网页设计技术的应用2.1 HTML语言介绍HTML （ HyperText Mark-up Language）即超文本标记语言或超文本链接标示语言， 是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、 动画、声音、表格、链接等。HTM的结构包括头部（Head）、主体（Body）两大部分, 其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。2.1.1 HTML语言的特点HTML文档制作不是很复杂，且功能强大，支

7、持不同数据格式的文件镶入，这也 是WWW盛行的原因之一，HTML语言的特点如下：1、简易性，HTML版本升级米用超集方式，从而更加灵活方便。2、可扩展性，HTML语言的广泛应用带来了加强功能， 增加标识符等要求，HTML 采取子类元素的方式，为系统扩展带来保证。3、平台无关性。虽然PC机大行其道，但使用MAC等其他机器的大有人在，HTML 可以使用在广泛的平台上，这也是 WWW盛行的另一个原因。2.1.2 HTML语言的编辑软件HTML的本质是文本，需要浏览器的解释，HTML的编辑器大体可以分为三种：1、基本编辑软件，使用 WINDOWS自带的记事本或写字版都可以编写，当然，如 果你用WPS来

8、编写，也可以。不过存盘时请使用.htm或.html作为扩展名，这样浏览 器就可以解释执行了。2、半所见即所得软件，这种软件能大大提高开发效率，它可以使你在很短的时间 内做出Homepage且可以学习HTML，这种类型的软件主要有 HOTDOG，还有国产的 软件网页作坊。3、所见即所得软件，使用最广泛的编辑器，完全可以一点不懂HTM啲知识就可以 做出网页，这类软件主要有 Frontpage, DREAMWEAVER、Delphi、Eclipse、UltraEdit。第三章色彩在网页中的应用3.1色彩在网页中的应用色彩是艺术表现的要素之一。在网页设计中，我们的设计师根据和谐、均衡 和重点突出的原则

9、，将不同的色彩进行组合.搭配来构成美丽的页面。根据色彩对人们心理的影响，合理地加以运用。先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一， 有层次感。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄， 土灰，土蓝。在网页配色中不要将所有颜色都用到，尽量控制在三至五种色彩以内。背景和前 文的对比尽量要大以便突出主要文字内容。3.2主页色彩的处理色彩是人的视觉最敏感的东西。主页的色彩处理得好，可以锦上添花，达到事 半功倍的效果。色彩总的应用原则应该是“总体协调，局部对比”，也就是：主 页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色 彩的对比。在

10、色彩的运用上，可以根据主页内容的需要，分别采用不同的主色调。 因为色彩具有象征性，例如：嫩绿色、翠绿色、金黄色、灰褐色就可以分别象征 着春、夏、秋、冬。其次还有职业的标志色，例如：军警的橄榄绿，医疗卫生的 白色等。色彩还具有明显的心理感觉，例如冷、暖的感觉，进、退的效果等。另 外，色彩还有民族性，各个民族由于环境、文化、传统等因素的影响，对于色彩 的喜好也存在着较大的差异。充分运用色彩的这些特性，可以使我们的主页具有 深刻的艺术内涵，从而提升主页的文化品位。3.3常用的配色方案1. 暖色调。即红色、橙色、黄色、赭色等色彩的搭配。这种色调的运用，可 使主页呈现温馨、和煦、热情的氛围。2. 冷色调

11、。即青色、绿色、紫色等色彩的搭配。这种色调的运用，可使主页 呈现宁静、清凉、高雅的氛围。3. 对比色调。即把色性完全相反的色彩搭配在同一个空间里。例如：红与绿、 黄与紫、橙与蓝等。这种色彩的搭配，可以产生强烈的视觉效果，给人亮丽、鲜 艳、喜庆的感觉。最后，还要考虑主页底色（背景色）的深、浅，这里借用摄影中的一个术语, 就是“高调”和“低调”。底色浅的称为高调；底色深的称为低调。底色深，文 字的颜色就要浅，以深色的背景衬托浅色的内容（文字或图片）；反之，底色淡 的，文字的颜色就要深些，以浅色的背景衬托深色的内容（文字或图片）。这种 深浅的变化在色彩学中称为“明度变化”。当然，色彩的明度也不能变化

12、太大， 否则屏幕上的亮度反差太强，同样也会使读者的眼睛受不了。第四章 WEB页面信息的交互一一窗体与框架要实现网页的动态交互，必须掌握有关窗体对象（Form）和框架对象（Framed更为复杂的知识。4.1窗体基础知识窗体对象可以使设计人员能用窗体中不同的元素与客户机用户相交互，而用不着在之前首先进行数据输入，就可以实现动态改变Web文档的行为。窗体对象窗体（Form）：它构成了 Web页面的基本元素。通常一个 Web页面有一个窗体或 几个窗体，使用Forms数组来实现不同窗体的访问。vform Name=Form1vINPUT type=text.在Forms0中共有三个基本元素，而 Form

13、s1中只有两个元素。窗体对象最主要的功能就是能够直接访问HTML文档中的窗体，它圭寸装了相关的HTML代码： v/Form窗体对象的方法窗体对象的方法只有一个-submit()方法，该方法主要功用就是实现窗体信息的提 交。如提交Mytest窗体，则使用下列格式：docume nt.mytest.submit()4.2窗体中的基本元素窗体中的基本元素由按钮、单选按钮、复选按钮、提交按钮、重置按钮、文本框等 组成。在JavaScript中要访问这些基本元素，必须通过对应特定的窗体元素的数组下标或 窗体元素名来实现。每一个元素主要是通过该元素的属性或方法来引用。其引用的基本格式见下：formName

14、.elements.methadName(窗体名.元素名或数组.方法) formNpertyName 窗体名.元素名或数组.属性) 下面分别介绍：(1) Text单行单列输入元素功能：对Text标识中的元素实施有效的控制。基本属性：Name：设定提交信息时的信息名称。对应于HTML文档中的Name。Value：用以设定出现在窗口中对应 HTML文档中Value的信息。 defaultvalue：包括Text元素的默认值基本方法：blur():将当前焦点移到后台。select；):加亮文字。主要事件：on Focus：当Text获得焦点时，产生该事件。On Blu

15、r :从元素失去焦点时，产生该事件。On select当文字被加亮显示后，产生该文件。onchange当Text元素值改变时，产生该文件。例：docume nt.mytest.value=that is a Javascript;docume nt.mytest.select();docume nt.mytest.blur();(2) textarea多行多列输入元素功能：实施对Textarea中的元素进行控制。 基本属性name：设定提交信息时的信息名称，对应HTML文档Textarea的Name。Value：用以设定出现在窗口中对应 HTML文档中Value的信息。Default valu

16、e :元素的默认值。方法：blur():将输入焦点失去 select；):将文字加亮后事件：on Blur:当失去输入焦点后产生该事件 onFocus当输入获得焦点后，产生该文件 Onchange当文字值改变时，产生该事件 On select当文字加亮后，产生该文件(3) Select选择元素功能：实施对滚动选择元素的控制。属性：name设定提交信息时的信息名称，对应文档select中的nameoLength:对应文档 select 中的 length options:组成多个选项的数组 selectIndex该下标指明一个选项 select在中每一选项都含有以下属性：Text:选项对应的文字

17、 selected指明当前选项是否被选中 Index:指明当前选项的位置 defaultselected 默认选项 事件：On Blur :当select选项失去焦点时，产生该文件。onFocas当select获得焦点时，产生该文件。 Onchange选项状态改变后，产生该事件。(4) Button 按钮功能：实施对Button按钮的控制。属性：Name:设定提交信息时的信息名称，对应文档中button的Name。Value:用以设定出现在窗口中对应 HTML文档中Value的信息。 方法：click()该方法类似于一个按下的按钮。 事件：on click当单击button按钮时，产生该事件。

18、 例： v/formvscript la nguage=javascirptdocument.elementsO.value=mytest; 通过元素访问 或docume nt.testcallvalue=mytest; 通过名字访问4.3窗体对象实例下面我们演示通过点击一个按钮(red)来改变窗口颜色，点击“调用动态按钮文 档”调用一个动态按钮文档。test8_1.htmvScript Lan guage=JavaScript/原来的颜色docume nt.bgColor=blue;docume nt.vli nkColor=white;docume nt.li nkColor=yellow

19、;docume nt.ali nkcolor=red;/动态改变颜色function cha ngecolor()docume nt.bgColor=red;docume nt.vli nkColor=blue;docume nt.li nkColor=gree n; docume nt.ali nkcolor=blue;v/HEAD 调用动态按钮文档 v/BODYv/HTML输出结果见图4-1所示。| 呂j C myVj-avas cr i t-e s t8- Hicrosoft InterrLet .-|n|x|St件迪 编辑査看世）转剎血）VmyMimrascripVtsita1盂F盘A

20、J5史ifiitC ：crip Vie 5t3 l - htm二Jtss|l HM B|i |劉我的电脑图4-1调用动态按钮图 动态按钮程序。test8_2.htm v/HEAD vdiv alig n=ce nter vtable border=0 cellspaci ng=O cellpaddi ng=O var id,pause=0,positi on=0;function banner() / variables declarati onvar i,k,msg=这里输入你要的内容;/ increase msgk=(30/msg.le ngth)+1;for(i=0;i bann er(

21、); v/scriptv/p v/formv/div 返回 v/av/HTML图4-2动态按钮网页图本讲介绍了使用JavaScript脚本实现Web页面信息交互的方法。其中主要介绍了 窗体中的基本元素的主要功能和使用。4.4框架框架Frames最主要功用是分割视窗，使每个小视窗能显示不同的HTML文件, 不同框架之间可以互动（interact），这就是说不同框架之间可以交换讯息与资料。 例如: 假设您开了两个frames，第一个frame可显示书的目录，第二个frame则显示章节的 具体内容。框架可以将屏幕分割成不同的区域， 每个区域有自己的URL通过Frames数组对 象来实现不同框架的访问

22、。实际上框架对象本身也一类窗口，它继承了窗口对象的所有 特征，并拥有所有的属性和方法。利用框架的例子具体说明，见图5-3所示。图4-3框架对象v/HEADvFrameset Rows=20%,80%vframe src=test9_1.htmlvFrameset Cols=50%,50%vframe src=test9_2.htmlvframe src=test9_3.html以上HTML标识将屏幕分成三个框架。先将窗口分成以二行为单位的窗口，之后 再按分成二个窗口。并在相应的框架中放入自己的HTML文档。通过Framse告诉浏览器您要设置几个框架；rows这项参数告诉浏览器您想将视 窗分割成

23、几列；而cols这项参数是告诉浏览器您想将视窗分割成几行。可以用很多组的frameset.tags将视窗分割得更复杂。可以给每个frame 一个“名字” (nam。 frame的名字在JavaScript语法中的地位非常重要。可以用告诉浏览器要载入的HTML文件。4.5框架的访问在前面我们介绍过使用docume nt.forms实现单一窗体中不同元素的访问。而要实 现框架中多窗体的不同元素的访问， 则必须使用window对象中的Frames属性。Frames 属性同样也是一个数组，他在父框架集中为每一个子框架设有一项。通过下标实现不同框架的访问：pare nt.framesl ndex1.do

24、cueme nt.formsi ndex2通过确定窗口中窗体的数目。除了使用数组下标来访问窗体外还可以使用框架名和窗体名来实现各元素的访问：pare nt.framesName.decume nt.formNames.eleme ntName.(m/p)通过一个具体的实例，来说明利用 JavaScript脚本在WEB中实现更为复杂的信息 交互。该例子是在一个多窗口中实现窗体信息的动态交互， 在程序中首先在浏览器窗口 中制作三个用于窗体交互的窗口，每个窗体窗口实现不同信息的动态交互。tset9.html为主调用文档它首先将窗口划分为具有二行的窗体，尔后再将第二行的 窗体划分为具有二列的窗体；te

25、st9-1.html为显示标题文档；test9_2.html为第二框架文档其中需要注意的是：通过JavaScript脚本将所示的“云南省”和“四川省”分别改为“昆明市”和“成 都市”；test7_3.html为第三框架文档。主调文档主要作用是将窗口划分为具有二行的窗体，尔后再将第二行的窗体划分为具有二列 的窗体。Test9.htmv/HEADvFrameset Rows=10%,90%vframe src=test9_1.htmvFrameset Cols=40%,60%vframe src=test9_2.htmvframe src=test9_3.htm第一个框架主要作用是显示标题文档。T

26、est9_1.htm使用框架实现WEB交互第二个框架主要作用是实现交互。可以通过 JavaScript脚本将所示的“云南省”和“四川省” 分别改为“昆明市”和“成都市”。Test9_2.htmv/HEADvForm n ame=test9_1请选择城市：vSelect name=select1 Multiple山西省四川省贵州省山东省江苏省浙江省安徽省河南省vscript la nguage=JavaScriptdocume nt.test9_1.eleme nts0.optio ns0.text=太原市;docume nt.test9_1.eleme nts0.optio ns1.text=

27、成都市;第三个框架：主要作用是实现交互。Test9_3.htm请输入用户名：一请选择：全部信息 部分信息 所有城市 v/Formvscript la nguage=JavaScriptdocument.test9_2.elementsp.value动和社会保障docume nt.test9_2.eleme nts1.checked=true;docume nt.test9_2.eleme nts2.checked=true;docume nt.test9_2.eleme nts3.checked=false;v/HTML在浏览器中的结果见图5-4所示。图4-4在浏览器中结果4.6本章小结本章主要介绍框架中的基本元素的主要功能和使用，利用 JavaScript脚本可以非常 方便、灵活地实现 Web页面更为复杂的信息交互，这是HTML标识语言所不能具备的。 从中可以了解到JavaScript是Web涉及人员的良好工具。第五章结论不知不觉中网页设计与制作的毕业毕业