网页设计与应用

网页设计与应用网页设计与应用专业：计算机网络技术班级：2015学号：20150321031姓名：蔡依婷指导教师：杨艳慈邯郸职业技术学院2017年11月21日网页设计与应用全文共20页，当前为第1页。网页设计与应用全文共20页，当前为第1页。网页设计与应用摘要本论文将对个人网页设计与制作的方法、工具等展开研究和探讨。在介绍网页设计与制作语言的基础上，着重使用JavaScript作为工具语言进行网页设计与制作的实际操作，分别对基于对象的JavaScript语言、内部对象系统的使用及WEB页面信息交互——窗口和框架进行详细描述，并利用具体的实例进行验证。本论文主要章节如下，第一章：绪论，本章主要介绍网页设计的相关知识。第二章：网页设计语言概述，本章主要介绍网页设计的语言——HTML，以及用于编辑HTML语言的软件，为后续工作奠定基础。第三章：基于对象的JavaScript语言，本章介绍了基于对象的JavaScript中常用内部对象属性、方法的使用。第四章：内部对象系统的使用，本章主要介绍使用浏览器的内部对象系统，可实现与HTML文档进行交互。第五章：WEB页面信息的交互——窗体与框架，本章主要介绍实现网页的动态交互，必须掌握有关窗体对象（Form）和框架对象（Frames）更为复杂的知识。关键词：网页制作；网页设计；HT网页设计与应用全文共20页，当前为第2页。ML；ASP网页设计与应用全文共20页，当前为第2页。PAGE2目录196961.1网页设计概述 4284991.2网页设计的要素 4147291.3大作业目的和意义 41398第二章HTML网页设计技术的应用 597122.1HTML语言介绍 5276372.1.1HTML语言的特点 5181752.1.2HTML语言的编辑软件 51092第三章色彩在网页中的应用 682513.1色彩在网页中的应用 6215533.2主页色彩的处理 6223203.3常用的配色方案 63652第四章WEB页面信息的交互——窗体与框架 748014.1窗体基础知识 726354.1.1窗体对象 7199994.1.2窗体对象的方法 858874.2窗体中的基本元素 810814.3窗体对象实例 1056764.4框架 12327384.5框架的访问 1378744.6本章小结 1615880第五章结论 1731925致谢 1831398参考文献 19网页设计与应用全文共20页，当前为第3页。网页设计与应用全文共20页，当前为第3页。第一章绪论随着21世纪的到来，人们更深切地感受到计算机在生活和工作中的作用越来越重要，越来越来的职业需要具有计算机的应用技能。掌握计算机是职业的需要，更是事业发展的需要。网页设计与制作是计算机能力的具体表现，本章主要介绍网页设计的相关知识。1.1网页设计概述网站是企业向用户和网民提供信息(包括产品和服务)的一种方式,是企业开展电子商务的基础设施和信息平台，离开网站（或者只是利用第三方网站）去谈电子商务是不可能的。企业的网址被称为“网络商标”，也是企业无形资产的组成部分，而网站是INTERNET上宣传和反映企业形象和文化的重要窗口。1.2网页设计的要素网页设计的两大要素是：整体风格和色彩搭配。一、确定网站的整体风格在这里，我提供给大家一些参考经验：1．将你的标志logo，尽可能的放在每个页面上最突出的位置。2．突出你的标准色彩。3．总结一句能反映贵站精髓的宣传标语！4．相同类型的图像采用相同效果，比如说标题字都采用阴影效果，那么在网站中出现的所有标题字的阴影效果的设置应该是完全一致的！二、网页色彩的搭配1．用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感。2．用两种色彩。先选定一种色彩，然后选择它的对比色。3．用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。1.3大作业目的和意义网页设计与应用全文共20页，当前为第4页。本大作业主要是对网页设计与制作的语言基础上进行探讨，主要内容如下：通过已经做好的网页，分析html网页设计技术、XML技术、JavaApplet技术和Javascript技术在网页设计中的应用。网页设计与应用全文共20页，当前为第4页。网页设计与应用全文共20页，当前为第5页。网页设计与应用全文共20页，当前为第5页。PAGE2第二章HTML网页设计技术的应用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。网页设计与应用全文共20页，当前为第6页。网页设计与应用全文共20页，当前为第6页。第三章色彩在网页中的应用3.1色彩在网页中的应用色彩是艺术表现的要素之一。在网页设计中，我们的设计师根据和谐、均衡和重点突出的原则，将不同的色彩进行组合．搭配来构成美丽的页面。根据色彩对人们心理的影响，合理地加以运用。先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。在网页配色中不要将所有颜色都用到，尽量控制在三至五种色彩以内。背景和前文的对比尽量要大以便突出主要文字内容。3.2主页色彩的处理色彩是人的视觉最敏感的东西。主页的色彩处理得好，可以锦上添花，达到事半功倍的效果。色彩总的应用原则应该是“总体协调，局部对比”，也就是：主页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。在色彩的运用上，可以根据主页内容的需要，分别采用不同的主色调。因为色彩具有象征性，例如：嫩绿色、翠绿色、金黄色、灰褐色就可以分别象征着春、夏、秋、冬。其次还有职业的标志色，例如：军警的橄榄绿，医疗卫生的白色等。色彩还具有明显的心理感觉，例如冷、暖的感觉，进、退的效果等。另外，色彩还有民族性，各个民族由于环境、文化、传统等因素的影响，对于色彩的喜好也存在着较大的差异。充分运用色彩的这些特性，可以使我们的主页具有深刻的艺术内涵，从而提升主页的文化品位。3.3常用的配色方案1.暖色调。即红色、橙色、黄色、赭色等色彩的搭配。这种色调的运用，可使主页呈现温馨、和煦、热情的氛围。2.冷色调。即青色、绿色、紫色等色彩的搭配。这种色调的运用，可使主页呈现宁静、清凉、高雅的氛围。网页设计与应用全文共20页，当前为第7页。3.对比色调。即把色性完全相反的色彩搭配在同一个空间里。例如：红与绿、黄与紫、橙与蓝等。这种色彩的搭配，可以产生强烈的视觉效果，给人亮丽、鲜艳、喜庆的感觉。网页设计与应用全文共20页，当前为第7页。最后，还要考虑主页底色（背景色）的深、浅，这里借用摄影中的一个术语，就是“高调”和“低调”。底色浅的称为高调；底色深的称为低调。底色深，文字的颜色就要浅，以深色的背景衬托浅色的内容（文字或图片）；反之，底色淡的，文字的颜色就要深些，以浅色的背景衬托深色的内容（文字或图片）。这种深浅的变化在色彩学中称为“明度变化”。当然，色彩的明度也不能变化太大，否则屏幕上的亮度反差太强，同样也会使读者的眼睛受不了。第四章WEB页面信息的交互——窗体与框架要实现网页的动态交互，必须掌握有关窗体对象（Form）和框架对象（Frames）更为复杂的知识。4.1窗体基础知识窗体对象可以使设计人员能用窗体中不同的元素与客户机用户相交互，而用不着在之前首先进行数据输入，就可以实现动态改变Web文档的行为。4.1.1窗体对象窗体（Form）：它构成了Web页面的基本元素。通常一个Web页面有一个窗体或几个窗体，使用Forms[]数组来实现不同窗体的访问。<formName=Form1><INPUTtype=text...><Inputtype=text...><Inpupbyne=text...></form><formName=Form2><INPUTtype=text...><Inputtype=text...></form>在Forms[0]中共有三个基本元素，而Forms[1]中只有两个元素。窗体对象最主要的功能就是能够直接访问HTML文档中的窗体，它封装了相关的HTML代码：<FormName="表的名称"Target="指定信息的提交窗口"action="接收窗体程序对应的URL"网页设计与应用全文共20页，当前为第8页。Method=信息数据传送方式(get/post)网页设计与应用全文共20页，当前为第8页。enctype="窗体编码方式"[onsubmit="JavaScript代码"]></Form>4.1.2窗体对象的方法窗体对象的方法只有一个--submit()方法，该方法主要功用就是实现窗体信息的提交。如提交Mytest窗体，则使用下列格式：document.mytest.submit()4.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元素值改变时，产生该文件。例：<Formname="test"><inputtype="text"name="test"value="thisisajavascript"></form>...<scriptlanguage="Javascirpt">document.mytest.value="thatisaJavascript";document.mytest.select();document.mytest.blur();网页设计与应用全文共20页，当前为第9页。</script>网页设计与应用全文共20页，当前为第9页。（2）textarea多行多列输入元素功能：实施对Textarea中的元素进行控制。基本属性name：设定提交信息时的信息名称，对应HTML文档Textarea的Name。Value：用以设定出现在窗口中对应HTML文档中Value的信息。Defaultvalue：元素的默认值。方法：blur()：将输入焦点失去select()：将文字加亮后事件：onBlur:当失去输入焦点后产生该事件onFocus:当输入获得焦点后，产生该文件Onchange:当文字值改变时，产生该事件Onselect:当文字加亮后，产生该文件（3）Select选择元素功能：实施对滚动选择元素的控制。属性：name:设定提交信息时的信息名称，对应文档select中的name。Length:对应文档select中的lengthoptions:组成多个选项的数组selectIndex;该下标指明一个选项select在中每一选项都含有以下属性：Text:选项对应的文字selected:指明当前选项是否被选中Index:指明当前选项的位置defaultselected:默认选项事件：OnBlur：当select选项失去焦点时，产生该文件。onFocas:当select获得焦点时，产生该文件。Onchange:选项状态改变后，产生该事件。（4）Button按钮功能：实施对Button按钮的控制。属性：Name:设定提交信息时的信息名称，对应文档中button的Name。Value:用以设定出现在窗口中对应HTML文档中Value的信息。方法：click()该方法类似于一个按下的按钮。事件：onclick当单击button按钮时，产生该事件。例：<Formname="test"><inputtype="button"name="testcall"onclick=tmyest()>网页设计与应用全文共20页，当前为第10页。</form>网页设计与应用全文共20页，当前为第10页。...<scriptlanguage="javascirpt">document.elements[0].value="mytest";//通过元素访问或document.testcallvalue="mytest";//通过名字访问</script>4.3窗体对象实例下面我们演示通过点击一个按钮（red）来改变窗口颜色，点击“调用动态按钮文档”调用一个动态按钮文档。test8_1.htm<html><head><ScriptLanguage="JavaScript">//原来的颜色document.bgColor="blue";document.vlinkColor="white";document.linkColor="yellow";document.alinkcolor="red";//动态改变颜色functionchangecolor(){document.bgColor="red";document.vlinkColor="blue";document.linkColor="green";document.alinkcolor="blue";}</script></HEAD><bodybgColor="White"><Ahref="test8_2.htm">调用动态按钮文档</a><form><Inputtype="button"Value="red"onClick="changecolor()"></form></BODY></HTML>网页设计与应用全文共20页，当前为第11页。输出结果见图4-1所示。网页设计与应用全文共20页，当前为第11页。图4-1调用动态按钮图动态按钮程序。test8_2.htm<HTML><HEAD></HEAD><palign="center"></p><divalign="center"><center><tableborder="0"cellspacing="0"cellpadding="0"><tr><tdwidth="100%"><formname="form2"onSubmit="null"><p><inputtype="submit"name="banner"VALUE="Submit"onClick="alert('Youhavetoputan\'action=[url]\'ontheformtag!!')"><br><scriptlanguage="JavaScript">varid,pause=0,position=0;functionbanner(){//variablesdeclaration vari,k,msg="这里输入你要的内容";//increasemsgk=(30/msg.length)+1;for(i=0;i<=k;i++)msg+=""+msg;//showittothewindowdocument.form2.banner.value=msg.substring(position,position-30);//setnewpositionif(position++==msg.length)position=0;//repeatatenteredspeedid=setTimeout("banner()",60);}网页设计与应用全文共20页，当前为第12页。//end-->网页设计与应用全文共20页，当前为第12页。banner();</script></p></form></td></tr></table></center></div><p></p><BODY><Ahref="test8_1.htm">返回</a></BODY></HTML>图4-2动态按钮网页图本讲介绍了使用JavaScript脚本实现Web页面信息交互的方法。其中主要介绍了窗体中的基本元素的主要功能和使用。4.4框架框架Frames最主要功用是"分割"视窗，使每个"小视窗"能显示不同的HTML文件，不同框架之间可以互动(interact)，这就是说不同框架之间可以交换讯息与资料。例如:假设您开了两个frames，第一个frame可显示书的目录，第二个frame则显示章节的具体内容。网页设计与应用全文共20页，当前为第13页。框架可以将屏幕分割成不同的区域，每个区域有自己的URL，通过Frames[]数组对象来实现不同框架的访问。实际上框架对象本身也一类窗口，它继承了窗口对象的所有特征，并拥有所有的属性和方法。利用框架的例子具体说明，见图5-3所示。网页设计与应用全文共20页，当前为第13页。图4-3框架对象<HTML><HEAD></HEAD><FramesetRows="20%,80%"><framesrc="test9_1.html"><FramesetCols="50%,50%"><framesrc="test9_2.html"><framesrc="test9_3.html"></Frameset></Frameset></HTML>以上HTML标识将屏幕分成三个框架。先将窗口分成以二行为单位的窗口，之后再按分成二个窗口。并在相应的框架中放入自己的HTML文档。通过[Framset]告诉浏览器您要设置几个框架；rows这项参数告诉浏览器您想将视窗分割成几列；而cols这项参数是告诉浏览器您想将视窗分割成几行。可以用很多组的<frameset...>tags将视窗分割得更复杂。可以给每个frame一个“名字”(name)。frame的名字在JavaScript语法中的地位非常重要。可以用<src>告诉浏览器要载入的HTML文件。4.5框架的访问网页设计与应用全文共20页，当前为第14页。在前面我们介绍过使用document.forms[]实现单一窗体中不同元素的访问。而要实现框架中多窗体的不同元素的访问，则必须使用window对象中的Frames属性。Frames属性同样也是一个数组，他在父框架集中为每一个子框架设有一项。通过下标实现不同框架的访问：网页设计与应用全文共20页，当前为第14页。parent.frames[Index1].docuement.forms[index2]通过parent.frames.length确定窗口中窗体的数目。除了使用数组下标来访问窗体外还可以使用框架名和窗体名来实现各元素的访问：parent.framesName.decument.formNames.elementName.(m/p)通过一个具体的实例，来说明利用JavaScript脚本在WEB中实现更为复杂的信息交互。该例子是在一个多窗口中实现窗体信息的动态交互，在程序中首先在浏览器窗口中制作三个用于窗体交互的窗口，每个窗体窗口实现不同信息的动态交互。tset9.html为主调用文档它首先将窗口划分为具有二行的窗体，尔后再将第二行的窗体划分为具有二列的窗体；test9-1.html为显示标题文档；test9_2.html为第二框架文档其中需要注意的是：通过JavaScript脚本将所示的“云南省”和“四川省”分别改为“昆明市”和“成都市”；test7_3.html为第三框架文档。主调文档主要作用是将窗口划分为具有二行的窗体,尔后再将第二行的窗体划分为具有二列的窗体。Test9.htm<HTML><HEAD></HEAD><FramesetRows="10%,90%"> <framesrc="test9_1.htm"><FramesetCols="40%,60%"> <framesrc="test9_2.htm"> <framesrc="test9_3.htm"></Frameset></Frameset></HTML>第一个框架主要作用是显示标题文档。Test9_1.htm<HTML><HEAD></HEAD><H2>使用框架实现WEB交互</H2></HTML>第二个框架主要作用是实现交互。可以通过JavaScript脚本将所示的“云南省”和“四川省”分别改为“昆明市”和“成都市”。Test9_2.htm<HTML>网页设计与应用全文共20页，当前为第15页。<HEAD>网页设计与应用全文共20页，当前为第15页。</HEAD><Body><Formname="test9_1">请选择城市：<BR><Selectname="select1"Multiple><Option>山西省<Option>四川省<Option>贵州省<Option>山东省<Option>江苏省<Option>浙江省<Option>安徽省<Option>河南省</select><BR><HR><InputType="Submit"name=""value="提交"><InputType="reset"name=""value="复位"></Form><pre><scriptlanguage="JavaScript">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><Formname="test9_2">请输入用户名：<InputType="text"name="text1"Value=""Size=20><BR><HR>请选择:<InputType="Checkbox"name="checkbox1"Value="qb">全部信息<BR><InputType="Checkbox"name="checkbox2"Value="bf">部分信息<BR><InputType="Checkbox"name="checkbox3"Value="sy">所有城市<br><HR><InputType="Submit"name=""value="提交">网页设计与应用全文共20页，当前为第16页。<InputType="reset"name=""value="复位">网页设计与应用全文共20页，当前为第16页。<BR></Form><scriptlanguage="JavaScript">document.test9_2.elements[0].value="劳动和社会保障";document.test9_2.elements[1].checked=true;document.test9_2.elements[2].ch