网页设计与制作外文资料翻译

xx理工大学应用科学学院中英文翻译PAGEPAGE11xx理工大学应用科学学院中英文翻译xx理工大学应用科学学院毕业设计(论文)外文资料翻译系别：信息工程系 专业：电子信息工程班级：电信112姓名：学号：0附件：1.外文资料翻译译文;2.外文原文指导教师评语：签名：年月日网页设计与制作论文将对个人网页设计与制作的方法、工具等展开研究和探讨。在介绍网页设计与制作语言的基础上，着重使用JavaScript作为工具语言进行网页设计与制作的实际操作，分别对基于对象的JavaScript语言、内部对象系统的使用及WEB页面信息交互——窗口和框架进行详细描述，并利用具体的实例进行验证。1.前言随着21世纪的到来，人们更深切地感受到计算机在生活和工作中的作用越来越重要，越来越来的职业需要具有计算机的应用技能。掌握计算机是职业的需要，更是事业发展的需要。网页设计与制作是计算机能力的具体表现，本章主要介绍网页设计的相关知识。

1.1

网页设计概述

网站是企业向用户和网民提供信息(包括产品和服务)的一种方式,是企业开展电子商务的基础设施和信息平台，离开网站（或者只是利用第三方网站）去谈电子商务是不可能的。企业的网址被称为“网络商标”，也是企业无形资产的组成部分，而网站是INTERNET上宣传和反映企业形象和文化的重要窗口。

1.2

网页设计的要素

网页设计的两大要素是：整体风格和色彩搭配。

一、确定网站的整体风格

第二章

HTML网页设计技术的应用

2.1

HTML语言介绍

HTML（HyperText

Mark-up

Language）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。

HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。

2.1.1

HTML语言的特点

HTML文档制作不是很复杂，且功能强大，支持不同数据格式的文件镶入，这也是WWW盛行的原因之一，HTML语言的特点如下：

1、简易性，HTML版本升级采用超集方式，从而更加灵活方便。

2、可扩展性，HTML语言的广泛应用带来了加强功能，增加标识符等要求，HTML采取子类元素的方式，为系统扩展带来保证。

3、平台无关性。虽然PC机大行其道，但使用MAC等其他机器的大有人在，HTML可以使用在广泛的平台上，这也是WWW盛行的另一个原因。

2.1.2

HTML语言的编辑软件

HTML的本质是文本，需要浏览器的解释，HTML的编辑器大体可以分为三种：

1、基本编辑软件，使用WINDOWS自带的记事本或写字版都可以编写，当然，如果你用WPS来编写，也可以。不过存盘时请使用.htm或.html作为扩展名，这样浏览器就可以解释执行了。

2、半所见即所得软件，这种软件能大大提高开发效率，它可以使你在很短的时间内做出Homepage，且可以学习HTML，这种类型的软件主要有HOTDOG，还有国产的软件网页作坊。

3、所见即所得软件，使用最广泛的编辑器，完全可以一点不懂HTML的知识就可以做出网页。

第二章

HTML网页设计技术的应用

2.2.3

JavaScript技术在网页设计中应用

一、JavaScript概述

JavaScript是一种基于对象(Object)和事件驱动(Event

Driven)并具有安全性能的脚本语言。使用它的目的是与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服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页(Home

Page)中执行了某种操作所产生的动作，就称为“事件”(Event)。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。

6、跨平台性

JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可正确执行。从而实现了“编写一次,走遍天下”的梦想。

实际上JavaScript最杰出之处在于可以用很小的程序做大量的事。无须有高性能的电脑，软件仅需一个字处理软件及一浏览器，无须WEB服务器通道，通过自己的电脑即可完成所有的事情。

总之，JavaScript

是一种新的描述语言，它可以被箝入到

HTML

的文件之中。

JavaScript语言可以做到回应使用者的需求事件

(如：form的输入)

，而不用任何的网路来回传输资料，所以当一位使用者输入一项资料时，它不用经过传给伺服端

(server)处理，再传回来的过程，而直接可以被客户端

(client)

的应用程式所处理。第三章

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

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

3.1窗体基础知识

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

3.1.1窗体对象

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

窗体对象的方法

窗体对象的方法只有一个--submit()方法，该方法主要功用就是实现窗体信息的提交。3.1.3

窗体对象的属性

窗体对象中的属性主要包括以下：elements

name

action

target

encoding

method。

除Elements外，其它几个均反映了窗体中标识中相应属性的状态，这通常是单个窗体标识；而elements常常是多个窗体元素值的数组。3.1.4

访问窗体对象

在JavaScript中访问窗体对象可由两种方法实现：

（1）通过访问窗体

在窗体对象的属性中首先必须指定其窗体名，而后就可以通过下列标识访问窗体如：document.Mytable()。

（2）通过数组来访问窗体

除了使用窗体名来访问窗体外，还可以使用窗体对象数组来访问窗体对象。但需要注意一点，因窗体对象是由浏览器环境的提供的，而浏览器环境所提供的数组下标是由0到n。3.1.5

引用窗体的先决条件

在JavaScript中要对窗体引用的条件是：必须先在页面中用标识创建窗体，并将定义窗体部分放在引用之前。

3.2

窗体中的基本元素

窗体中的基本元素由按钮、单选按钮、复选按钮、提交按钮、重置按钮、文本框等组成。

在JavaScript中要访问这些基本元素，必须通过对应特定的窗体元素的数组下标或窗体元素名来实现。每一个元素主要是通过该元素的属性或方法来引用。3.3框架

框架Frames最主要功用是"分割"视窗，使每个"小视窗"能显示不同的HTM

L文件，不同框架之间可以互动(interact)，这就是说不同框架之间可以交换讯息与资料。例如:假设您开了两个frames，第一个frame可显示书的目录，第二个frame则显示章节的具体内容。

框架可以将屏幕分割成不同的区域，每个区域有自己的URL，通过Frames[]数组对象来实现不同框架的访问。实际上框架对象本身也一类窗口，它继承了窗口对象的所有特征，并拥有所有的属性和方法。利用框架的例子具体说明3.4

框架的访问

在前面我们介绍过使用document.forms[]实现单一窗体中不同元素的访问。而要实现框架中多窗体的不同元素的访问，则必须使用window对象中的Frames属性。Frames属性同样也是一个数组，他在父框架集中为每一个子框架设有一项。所不能具备的。从中可以了解到JavaScript是Web涉及人员的良好工具。表单表单是一个包含表单元素的区域。表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。表单使用表单标签（<form>）定义。<form>...input元素...</form>输入多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：文本域（TextFields）当用户要在表单中键入字母、数字等内容时，就会用到文本域。<form>Firstname:<inputtype="text"name="firstname"/><br/>Lastname:<inputtype="text"name="lastname"/></form>浏览器显示如下：Firstname:

Lastname:注意，表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。单选按钮（RadioButtons）当用户从若干给定的的选择中选取其一时，就会用到单选框。<form><inputtype="radio"name="sex"value="male"/>Male<br/><inputtype="radio"name="sex"value="female"/>Female</form>浏览器显示如下：Male

Female注意，只能从中选取其一。复选框（Checkboxes）当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。<form><inputtype="checkbox"name="bike"/>Ihaveabike<br/><inputtype="checkbox"name="car"/>Ihaveacar</form>浏览器显示如下：Ihaveabike

Ihaveacar表单的动作属性（Action）和确认按钮当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。<formname="input"action="html_form_action.asp"method="get">Username:<inputtype="text"name="user"/><inputtype="submit"value="Submit"/></form>浏览器显示如下：Username:假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到"html_form_action.asp"的页面。该页面将显示出输入的结果。标签描述<form>定义供用户输入的表单<input>定义输入域<textarea>定义文本域(一个多行的输入控件)<label>定义一个控制的标签<fieldset>定义域<legend>定义域的标题<select>定义一个选择列表<optgroup>定义选项组<option>定义下拉列表中的选项<button>定义一个按钮<isindex>已废弃。有<input>代替。图像标签（<img>）和源属性（Src）在HTML中，图像由<img>标签定义。<img>是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src指"source"。源属性的值是图像的URL地址。定义图像的语法是：<imgsrc="url"/>URL指存储图像的位置。如果名为"boat.gif"的图像位于的images目录中，那么其URL为/images/boat.gif。浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。替换文本属性（Alt）alt属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。<imgsrc="boat.gif"alt="BigBoat">在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。基本的注意事项-有用的提示：假如某个HTML文件包含十个图像，那么为了正确显示这个页面，需要加载11个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。图像标签标签描述<img>定义图像。<map>定义图像地图。<area>定义图像地图中的可点击区域。背景（Backgrounds）<body>拥有两个配置背景的标签。背景可以是颜色或者图像。背景颜色（Bgcolor）背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB值或颜色名。<bodybgcolor="#000000"><bodybgcolor="rgb(0,0,0)"><bodybgcolor="black">以上的代码均将背景颜色设置为黑色。背景（Background）背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。<bodybackground="clouds.gif"><bodybackground="/clouds.gif">URL可以是相对地址，如第一行代码。也可以使绝对地址，如第二行代码。提示：如果你打算使用背景图片，你需要紧记一下几点：背景图像是否增加了页面的加载时间。小贴士：图像文件不应超过10k。背景图像是否与页面中的其他图象搭配良好。背景图像是否与页面中的文字颜色搭配良好。图像在页面中平铺后，看上去还可以吗？对文字的注意力被背景图像喧宾夺主了吗？基本的注意事项-有用的提示：<body>标签中的背景颜色（bgcolor）、背景（background）和文本（text）属性在最新的HTML标准（HTML4和XHTML）中已被废弃。W3C在他们的推荐标准中已删除这些属性。应该使用层叠样式表（CSS）来定义HTML元素的布局和显示属性。颜色由红色、绿色、蓝色混合而成。颜色值颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。这个表格给出了由三种颜色混合而成的具体效果：ColorColorHEXColorRGB#000000rgb(0,0,0)#FF0000rgb(255,0,0)#00FF00rgb(0,255,0)#0000FFrgb(0,0,255)#FFFF00rgb(255,255,0)#00FFFFrgb(0,255,255)#FF00FFrgb(255,0,255)#C0C0C0rgb(192,192,192)#FFFFFFrgb(255,255,255)<thead>,<tbody>和<tfoot>很少被用到，这是由于浏览器对它们的支持不太好。希望这种情况在未来版本的XHTML中会有所改观。如果你使用IE5.0或者更新的版本，可以查看在我们的《XML教程》中的具体例子。表格描述<table>定义表格<caption>定义表格标题。<th>定义表格的表头。<tr>定义表格的行。<td>定义表格单元。<thead>定义表格的页眉。<tbody>定义表格的主体。<tfoot>定义表格的页脚。<col>定义用于表格列的属性。<colgroup>定义表格列的组。无序列表无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于<ul>标签。每个列表项始于<li>。<ul><li>Coffee</li><li>Milk</li></ul>浏览器显示如下：CoffeeMilk列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。有序列表同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于<ol>标签。每个列表项始于<li>标签。<ol><li>Coffee</li><li>Milk</li></ol>浏览器显示如下：CoffeeMilk列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。定义列表自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以<dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以<dd>开始。<dl><dt>Coffee</dt><dd>Blackhotdrink</dd><dt>Milk</dt><dd>Whitecolddrink</dd></dl>浏览器显示如下：CoffeeBlackhotdrinkMilkWhitecolddrink定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。<thead>,<tbody>和<tfoot>很少被用到，这是由于浏览器对它们的支持不太好。希望这种情况在未来版本的XHTML中会有所改观。如果你使用IE5.0或者更新的版本，可以查看在我们的《XML教程》中的具体例子。表格描述<table>定义表格<caption>定义表格标题。<th>定义表格的表头。<tr>定义表格的行。<td>定义表格单元。<thead>定义表格的页眉。<tbody>定义表格的主体。<tfoot>定义表格的页脚。<col>定义用于表格列的属性。<colgroup>定义表格列的组。无序列表无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于<ul>标签。每个列表项始于<li>。<ul><li>Coffee</li><li>Milk</li></ul>浏览器显示如下：CoffeeMilk列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。有序列表同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于<ol>标签。每个列表项始于<li>标签。<ol><li>Coffee</li><li>Milk</li></ol>浏览器显示如下：CoffeeMilk列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。定义列表自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以<dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以<dd>开始。<dl><dt>Coffee</dt><dd>Blackhotdrink</dd><dt>Milk</dt><dd>Whitecolddrink</dd></dl>浏览器显示如下：CoffeeBlackhotdrinkMilkWhitecolddrink定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。Webdesignandproduction

Paperswillexpandthepersonalwebdesignandproductionmethods,toolsandotherresearchanddiscussion.Basedontheintroductionofwebdesignandproductionoflanguage,theemphasisonusingtheJavaScriptlanguageasatoolfortheactualoperationofwebdesignandproductionof,respectively,basedontheobjectoftheJavaScriptlanguage,theuseofinternalobjectsystemandWEBpagesofinformationexchange-windowsandframeworksDetaileddescriptionoftheuseofspecificexamplesandverified.1.IntroductionWiththeadventofthe21stcentury,peoplearemoreandmoreimportanttofeelthelifeandworkofthecomputer'sroleintheincreasinglyprofessionalneedstohaveacomputerapplicationskillsdeeply.Isrequiredtomasterthecomputerprofession,butalsocareerdevelopmentneeds.Webdesignandproductionisaconcretemanifestationoftheabilityofacomputer,thischapterintroducestherelevantknowledgeofwebdesign.1.1WebDesignOverviewWebsiteisawaybusinessesanduserstoprovideinformation(includingproductsandservices)totheuser,istheenterprisee-commerceinfrastructureandinformationplatform,leavethesite(orjustuseathird-partysite)isnotpossibletotalkaboute-commerce.Corporatewebsitecalled"networkbrand",alsopartofintangibleassets,andthesiteisanimportantwindowofpublicityandreflectthecorporateimageandcultureontheINTERNET.WebDesignElements1.2Twoelementsofwebdesignare:overallstyleandcolormatching.First,determinetheoverallstyleofthesiteApplicationchapterHTMLwebdesigntechnology2.1HTMLlanguagedescriptionHTML(HyperTextMark-upLanguage)ie,HTML,orHypertextMarkupLanguage,iscurrentlythemostwidelyusedlanguagenetwork,butalsoconstitutetheprimarylanguageofthedocumentpages.HTMLtextiscomposedbyHTMLcommandsdescriptivetext,HTMLcommandscanexplaintext,graphics,animation,sound,tables,links,andsoon.HTMLstructureincludesahead(Head),thespecificcontentofthebody(Body)intotwoparts,ofwhichtheheadofthedescriptionofthebrowseryouwant,andthebodycontainsthedesirednote.Features2.1.1HTMLlanguageHTMLdocumentproductionisnotverycomplexandpowerful,supportingdifferentdatafileformatsinsert,whichisoneofthereasonsfortheprevalenceofWWW,HTMLlanguagecharacteristicsareasfollows:1,simplicity,HTMLversionupgradeusingasupersetoftheway,whichismoreflexibleandconvenient.2,scalability,widelyusedinHTMLlanguagebringstostrengthencapabilitiesandincreaseidentifiersandotherrequirements,HTMLelementstaketheformofasubclass,bringassurancesystemexpansion.3,platformindependence.WhilethePCispopular,buttheuseofMACandothermachinesoutthere,HTMLcanbeusedonawiderangeofplatforms,andthisisanotherreasonfortheprevalenceofWWW.2.1.2HTMLlanguageeditingsoftwareHTMListheessenceofthetext,youneedtoexplainyourbrowser,HTMLeditorcanberoughlydividedintothreetypes:1,thebasiceditingsoftware,usingWINDOWSnotepadorwriteversioncanbewritten,ofcourse,ifyouuseWPStowrite,youcan.However,pleaseuse.htmor.htmlastheextension,sothebrowsercaninterpretsavewhenexecuted.2,semi-WYSIWYGsoftware,whichcangreatlyimprovedevelopmentefficiency,itcanmakeyoumakeaHomepageinaveryshortperiodoftime,andyoucanlearnHTML,thistypeofsoftwarehasHOTDOG,aswellasdomesticSoftwarewebworkshop.3,WYSIWYGsoftware,themostwidelyusededitor,canunderstandalittleHTMLknowledgecanmakepages.ApplicationchapterHTMLwebdesigntechnology2.2.3JavaScripttechnologyinwebdesignOne,JavaScriptOverviewJavaScriptisanobject-based(Object)andevent-driven(EventDriven)andsafetyperformancehavescriptinglanguage.ItspurposeistouseHTMLandHTML,Javascriptinglanguage(Javaapplet)linktogethertoachievemultipleobjectsinaWebpage,theWebclientinteractions.Whichcandevelopclientapplications.ItisbyembeddingortransferredinstandardHTMLlanguageimplemented.ItappearstomakeupfortheshortcomingsofHTMLlanguage,whichisacompromisechoiceforJavaandHTML,hasthefollowingbasiccharacteristics:1,isascriptinglanguageJavaScriptisascriptinglanguage,whichusesasmallwaytoblockimplementationofprogramming.Likeotherscriptinglanguages,JavaScriptisaninterpretedlanguageisalso,itprovidesaneasydevelopmentprocess.ItsbasicstructurewithC,C++,VB,Delphiisverysimilar.Butitisnotliketheselanguages,youneedtocompile,butisinterpretedlinebylineintheprogramisrunning.ItiscombinedwithHTMLmarkup,soastofacilitatetheuser'soperation.2,object-basedlanguage.JavaScriptisanobject-basedlanguage,buttobeseenasanobject-oriented.Thismeansthatitcanuseobjectsthattheyhavecreated.Therefore,manyfunctionscanbederivedfromtheinteractionofmethodsandscriptsscriptingenvironmentobject.3.SimplicitySimplicityismainlyreflectedinJavaScript:First,itisaJavabasicstatementsandcontrolflowabovethesimpleandcompactdesignbasedonorderforJavaisaverygoodtransitionstudy.Secondly,itistheuseofweaklytypedvariabletype,didnotusestrictdatatypes.4,securityJavaScriptisasafelanguage,itdoesnotallowaccesstothelocalharddisk,datacannotbestoredontheserver,thenetworkisnotallowedtomodifyanddeletedocuments,canonlybeachievedthroughadynamicinteractiveinformationbrowsingorbrowser.Thuseffectivelypreventthelossofdata.5,thedynamicnatureofJavaScriptisdynamic,itcanresponddirectlytotheuserorcustomerinput,withoutgoingthroughtheWebserviceprogram.Itreflectstheuser'sresponse,istheuseofevent-drivenmanner.Theso-calledevent-driven,meaningtheimplementationofcertainactionsarisingfromtheactiononthehomepage(HomePage),andiscalledthe"event"(Event).Forexample,pressingthemousebutton,movethewindow,selectthemenuandsocanbeconsideredanevent.Whentheeventoccurs,itmaycausetheappropriateincidentresponse.6,cross-platformJavaScriptisdependentonthebrowseritself,regardlessoftheoperatingenvironment,aslongasthecomputerrunningthebrowser,andthebrowsersupportsJavaScriptcanbeexecutedcorrectly.Inordertoachievethe"writeonce,everywhere"dream.InfactthemostprominentplaceJavaScriptprogramthatcanbeusedtodoalotoflittlethings.Noneedtohaveahigh-performancecomputers,softwareisonlyawordprocessingsoftwareandabrowserwithoutWEBserverchannelsthroughtheircomputertocompleteeverything.Inshort,JavaScriptisanewdescriptionlanguage,itcanbeamongtheclampintotheHTMLfile.JavaScriptlanguagecanbedonetorespondtotheneedsoftheuserevent(suchas:forminput)withoutanynetworktransferdatabackandforth,sothatwhenauserentersamaterial,itdoesnotpassthroughtheservoend(server)processing,andtransmitsitbacktotheprocess,andcanbedirectlyhandledbytheclient(client)apps.ChapterIIIWEBpageinteractioninformation-FormsandFrameworkToachieveadynamicinteractivewebpages,youmustmastertheformobject(Form)andtheframeobject(Frames)morecomplexknowledge.3.1FormBasicsFormobjectallowsdesignerscanformdifferentelementsinteractwithclientusers,anddonotneedtocarryoutbeforethefirstdataentry,youcandynamicallychangethebehaviorofWebdocuments.3.1.1FormobjectForm(Form):ItconstitutesthebasicelementofaWebpage.UsuallyaWebpagehasaformorseveralforms,usingForms[]arraytoachievedifferentformsofaccess.Methods3.1.2FormobjectThemethodoftheformobjectisonlyone--submit()method,whichmainfunctionistoachieveaformofinformationsubmitted.3.1.3FormobjectpropertiesFormobjectpropertiesincludethefollowing:elementsnameactiontargetencodingmethod.InadditionElementsaddition,severalotherformsofstatearereflectedinthecorrespondingattributeidentifier,whichisusuallyaformofindividualidentification;andthearrayelementsareoftenmorethanoneformelementvalues.3.1.4AccessformobjectAccessformobjectinJavaScriptbytwomethods:(1)theformbyvisitingFirst,youmustspecifythenameoftheforminthepropertyofaformobject,andafteryoucanaccesstheformbyfollowingidentifiesas:document.Mytable().(2)toaccesstheformbythearrayInadditiontousingtheformnametoaccesstheform,youcanalsousetheformtoaccesstheformobjectarrayofobjects.Butnotethat,duetotheformobjectistoprovideabrowserenvironment,andthearraysubscriptbrowserenvironmentprovidedisfrom0ton.3.1.5referencesprerequisiteformConditionsinJavaScriptwanttoformreferenceis:youmustfirstcreateaformonthepagetoidentifywith,andformspartoftheplacebeforethereferencedefinition.3.2ThebasicelementsoftheformFormthebasicelementsofthebuttons,radiobuttons,checkbuttons,submitbuttons,resetbuttons,textboxesandothercomponents.InJavaScriptyouwanttoaccessthesebasicelementsmustbeachievedthroughaspecificformelementscorrespondingarraysubscriptorformelementnames.Eachelementisreferencedbymajorpropertyormethodoftheelement.3.3FrameworkFrameFramesmainfunctionisto"split"thewindow,sothateach"smallwindow"canshowdifferentHTMLfiles,interactionbetweendifferentframeworks(interact),whichmeansyoucanexchangemessagesanddatabetweendifferentframeworks.Forexample:Supposeyouopenedtwoframes,thefirstframeofthebookcatalogcanbedisplayed,andthesecondframedisplaysspecificcontentsections.Frameworkcanbedividedintodifferentareasofthescreen,eachregionhasitsownURL,throughFrames[]arrayofobjectstoachieveaccesstodifferentframeworks.Frameobjectitselfisactuallyaclassofwindow,itinheritsallthecharacteristicsofawindowobject,andhasalltheattributesandmethods.SpecificexamplesillustratetheuseoftheframeworkAccessFramework3.4Infrontofushadtousedocument.forms[]toaccessthedifferentelementstoachieveasingleform.Inordertoachieveaccesstothedifferentelementsoftheframeworkofmulti-form,youmustusethewindowobjectFramesproperty.Framespropertyisalsoanarray,hefocusedontheparentframeforeachsub-frameisprovidedwithone.Cannothave.ItcanbeagoodtooltolearnJavaScriptWebinvolvespersonnel.FormTheformisanareathatcontainsformelements.Formelementsthatallowtheuserintheform(forexample:textfields,drop-downlists,radiobuttons,checkboxes,etc.)elementoftheinputinformation.Formusingtheformtag(<form>)definition.<Form>...

inputelement...</Form>EnterInmostcasesthelabelistobeusedintheforminputtag(<input>).Theinputtypeisthetypeattribute(type)definition.Mostfrequentlyusedinputtypesareasfollows:Textfields(TextFields)Whentheusertotypeletters,numbers,andothercontentintheform,itwillusethetextfield.<Form>Firstname:<Inputtype="text"name="firstname"/><br/>Lastname:<Inputtype="text"name="lastname"/></Form>Thebrowserdisplaysthefollowing:Firstname:Lastname:Notethattheformitselfisnotvisible.Also,inmostbrowsers,thedefaultwidthofthetextfieldis20characters.Radiobutton(RadioButtons)Whenauserfromanumberofchoicestoselectwhichevergivenmoment,itwilluseasinglebox.<Form><Inputtype="radio"name="sex"value="male"/>Male<br/><Inputtype="radio"name="sex"value="female"/>Female</Form>Thebrowserdisplaysthefollowing:MaleFemaleNotethatonlyselectfromone.Checkbox(Checkboxes)Whenauserneedstoselectoneorseveraloptionsfromanumberofthegivenoptions,checkboxeswillbeused.<Form><Inputtype="checkbox"name="bike"/>Ihaveabike<br/><Inputtype="checkbox"name="car"/>Ihaveacar</Form>Thebrowserdisplaysthefollowing:IhaveabikeIhaveacarTheformactionattribute(Action)andtheOKbuttonWhentheuserclickstheOKbutton,thecontentsoftheformwillbesenttoanotherfile.Formactionattributedefinesthefilenameofthedestinationfile.Actionattributedefinedbythefilenormallybereceivedinputdataassociatedprocessing.<Formname="input"action="html_form_action.asp"method="get">Username:<Inputtype="text"name="user"/><Inputtype="submit"value="Submit"/></Form>Thebrowserdisplaysthefollowing:Username:Ifyoutypeafewlettersintheabovetextbox,thenclicktheOKbutton,thenenterthedatawillbesentto"html_form_action.asp"page.Thispagewillshowtheresultsofinputs.LabelDescription<Form>Formdefinitionforuserinput<Input>Definitionoftheinputfield<Textarea>Definedtextfields(morethanonelineofinputcontrol)<Label>Thedefinitionofacontrollabel<Fieldset>Domain<Legend>Definesadomaintitle<Select>Defineaselectlist<Optgroup>Customoptiongroup<Option>Drop-downlistofoptionsforthedefinition<Button>Thedefinitionofabutton<Isindex>obsolete.Have<input>instead.Imagetag(<img>)andsourceattributes(Src)InHTML,imagesaredefinedbythe<img>tag.<Img>tagisempty,meaningthatitcontainsattributes,andnoclosingtag.Todisplayanimageonapage,youneedtousethesourceattribute(src).srcrefersto"source".ValueofthesourceattributeistheURLoftheimage.Definitionimagesyntaxis:<Imgsrc="url"/>URLreferstothelocationforstoringimages.Iftheimageisnamed"boat.gif"locatedtheimagesdirectory,thentheURLis/images/boat.gif.Thebrowserwilldisplaytheimageinthedocumentwheretheimagetagappears.Ifyouputanimagetagbetweentwoparagraphs,thebrowserwillfirstdisplaythefirstparagraph,andthendisplaytheimagedisplayedlastparagraph.Replacetextproperties(Alt)altattributeisusedasanalternativedefinitionofastringoftextimagesprepared.ReplaceTextpropertyvalues​​areuser-defined.<Imgsrc="boat.gif"alt="BigBoat">Whenthebrowsercannotloadimages,textattributestellthereadersthattheyreplacethelostinformation.Inthiscase,thebrowserwilldisplaythealternativetextinsteadofimages.Theimageonthepageareplusreplacementtextpropertyisagoodhabit,whichhelpstobetterdisplaytheinformation,andforthosewhouseplaintextbrowserisveryuseful.Basicprecautions-usefultips:IfanHTMLfilecontainstenimages,theninordertodisplaythispagecorrectly,youneedtoloadthe11files.Loadpicturetakestime,soouradviceis:cautionpicture.ImagetagLabelDescription<Img>Definitionimages.<Map>Customimagemap.<Area>Customimagemapclickablearea.Background(Backgrounds)<Body>taghastwoconfigurationsbackground.Backgroundcolororimagecanbe.Thebackgroundcolor(Bgcolor)Thebackgroundcolorattributesetthebackgroundtoacolor.Propertyvalues​​maybeahexadecimalnumber,RGBvalues​​orcolornames.<Bodybgcolor="#000000"><Bodybgcolor="rgb(0,0,0)"><Bodybgcolor="black">Thecodeaboveallthebackgroundcolortoblack.Background(Background)Backgroundpropertiessetthebackgroundimage.URLoftheimagepropertyvalue.Iftheimagesizeissmallerthanthebrowserwindow,thentheimagewillbereplicatedintheentirebrowserwindow.<Bodybackground="clouds.gif"><Bodybackground="/clouds.gif">URLaddresscanberelative,asthefirstlineofcode.Youcanalsomakeanabsoluteaddress,suchasasecondlineofcode.Tip:Ifyouintendtouseabackgroundimage,youneedtobearinmindthefollowingpoints:•Isthebackgroundimageofthepageloadtimeincreases.Tips:Theimagefileshouldnotexceed10k.•Doesthepagebackgroundimagewithagoodimageoftheother.•Doesthebackgroundimageandpagetextcolorswell.•Theimagetileonthepage,youcanalsolookit?•Forthetextoftheattentionwasdistractingbackgroundpictureyet?Basicprecautions-usefultips:<Body>taginthebackgroundcolor(bgcolor),background(background)andtext(text)propertyinthelatestHTMLstandard(HTML4andXHTML)hasbeenabandoned.W3Cintheirrecommendationhasbeenremovedfromtheseproperties.HTMLelementstodefinethelayoutanddisplaypropertiesshoulduseCascadingStyleSheets(CSS).Colorsbymixingred,green,bluetogether.ColorvaluesThecolorisdefinedbyahexadecimalnotation,thissymbolfromred,green,andbluevalues​​composition(RGB).Theminimumvalueofeachcoloris0(hex:#00).Themaximumvalueis255(hex:#FF).Thistableshowsthemixtureofthreecolorsfromthespecificeffects:ColorColorHEXColorRGB

#000000rgb(0,0,0)

#FF0000rgb(255,0,0)

#00FF00rgb(0,255,0)

#0000FFrgb(0,0,255)

#FFFF00rgb(255,255,0)

#00FFFFrgb(0,255,255)

#FF00FFrgb(255,0,255)

#C0C0C0rgb(192,192,192)

#FFFFFFRgb(255,255