-网页设计与制作外文资料翻译学士学位论文.doc

《-网页设计与制作外文资料翻译学士学位论文.doc》由会员分享，可在线阅读，更多相关《-网页设计与制作外文资料翻译学士学位论文.doc（22页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、xx理工大学应用科学学院中英文翻译xx理工大学应用科学学院毕业设计(论文)外文资料翻译系 别： 信息工程系 专 业： 电子信息工程 班 级： 电信112 姓 名： 学 号： 0 附 件：1. 外文资料翻译译文;2.外文原文指导教师评语： 签名： 年 月 日11 网页设计与制作 论文将对个人网页设计与制作的方法、工具等展开研究和探讨。在介绍网页设计与制作语言的基础上，着重使用JavaScript作为工具语言进行网页设计与制作的实际操作，分别对基于对象的JavaScript语言、内部对象系统的使用及WEB页面信息交互窗口和框架进行详细描述，并利用具体的实例进行验证。1.前言随着21世纪的到来，人们

2、更深切地感受到计算机在生活和工作中的作用越来越重要，越来越来的职业需要具有计算机的应用技能。掌握计算机是职业的需要，更是事业发展的需要。网页设计与制作是计算机能力的具体表现，本章主要介绍网页设计的相关知识。1.1网页设计概述网站是企业向用户和网民提供信息(包括产品和服务)的一种方式,是企业开展电子商务的基础设施和信息平台，离开网站（或者只是利用第三方网站）去谈电子商务是不可能的。企业的网址被称为“网络商标”，也是企业无形资产的组成部分，而网站是INTERNET上宣传和反映企业形象和文化的重要窗口。1.2网页设计的要素网页设计的两大要素是：整体风格和色彩搭配。一、确定网站的整体风格第二章HTML

3、网页设计技术的应用2.1HTML语言介绍HTML（HyperTextMark-upLanguage）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。2.1.1HTML语言的特点HTML文档制作不是很复杂，且功能强大，支持不同数据格式的文件镶入，这也是WWW盛行的原因之一，HTML语言的特点如下：1、简易性，HTML版本升

4、级采用超集方式，从而更加灵活方便。2、可扩展性，HTML语言的广泛应用带来了加强功能，增加标识符等要求，HTML采取子类元素的方式，为系统扩展带来保证。3、平台无关性。虽然PC机大行其道，但使用MAC等其他机器的大有人在，HTML可以使用在广泛的平台上，这也是WWW盛行的另一个原因。2.1.2HTML语言的编辑软件HTML的本质是文本，需要浏览器的解释，HTML的编辑器大体可以分为三种：1、基本编辑软件，使用WINDOWS自带的记事本或写字版都可以编写，当然，如果你用WPS来编写，也可以。不过存盘时请使用.htm或.html作为扩展名，这样浏览器就可以解释执行了。2、半所见即所得软件，这种软件

5、能大大提高开发效率，它可以使你在很短的时间内做出Homepage，且可以学习HTML，这种类型的软件主要有HOTDOG，还有国产的软件网页作坊。3、所见即所得软件，使用最广泛的编辑器，完全可以一点不懂HTML的知识就可以做出网页。第二章HTML网页设计技术的应用2.2.3JavaScript技术在网页设计中应用一、JavaScript概述JavaScript是一种基于对象(Object)和事件驱动(EventDriven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java脚本语言（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互作用。从而可以开发

6、客户端的应用程序等。它是通过嵌入或调入在标准的HTML语言中实现的。它的出现弥补了HTML语言的缺陷，它是Java与HTML折衷的选择，具有以下几个基本特点：1、是一种脚本编写语言JavaScript是一种脚本语言，它采用小程序段的方式实现编程。像其它脚本语言一样,JavaScript同样已是一种解释性语言,它提供了一个易的开发过程。它的基本结构形式与C、C+、VB、Delphi十分类似。但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起，从而方便用户的使用操作。2、基于对象的语言。JavaScript是一种基于对象的语言，同时以可以看作一种面向对象

7、的。这意味着它能运用自己已经创建的对象。因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。3、简单性JavaScript的简单性主要体现在：首先它是一种基于Java基本语句和控制流之上的简单而紧凑的设计,从而对于学习Java是一种非常好的过渡。其次它的变量类型是采用弱类型，并未使用严格的数据类型。4、安全性JavaScript是一种安全性语言，它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。5、动态性的JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服

8、务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页(HomePage)中执行了某种操作所产生的动作，就称为“事件”(Event)。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。6、跨平台性JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可正确执行。从而实现了“编写一次,走遍天下”的梦想。实际上JavaScript最杰出之处在于可以用很小的程序做大量的事。无须有高性能的电脑，软件仅需一个字处理软件及一浏览器，无须WEB服务器通道，通过自己的电脑即可完

9、成所有的事情。总之，JavaScript是一种新的描述语言，它可以被箝入到HTML的文件之中。JavaScript语言可以做到回应使用者的需求事件(如：form的输入)，而不用任何的网路来回传输资料，所以当一位使用者输入一项资料时，它不用经过传给伺服端(server)处理，再传回来的过程，而直接可以被客户端(client)的应用程式所处理。第三章WEB页面信息的交互窗体与框架要实现网页的动态交互，必须掌握有关窗体对象（Form）和框架对象（Frames）更为复杂的知识。3.1窗体基础知识窗体对象可以使设计人员能用窗体中不同的元素与客户机用户相交互，而用不着在之前首先进行数据输入，就可以实现动态

10、改变Web文档的行为。3.1.1窗体对象窗体（Form）：它构成了Web页面的基本元素。通常一个Web页面有一个窗体或几个窗体，使用Forms数组来实现不同窗体的访问。3.1.2窗体对象的方法窗体对象的方法只有一个-submit()方法，该方法主要功用就是实现窗体信息的提交。3.1.3窗体对象的属性窗体对象中的属性主要包括以下：elementsnameactiontargetencodingmethod。除Elements外，其它几个均反映了窗体中标识中相应属性的状态，这通常是单个窗体标识；而elements常常是多个窗体元素值的数组。3.1.4访问窗体对象在JavaScript中访问窗体对象

11、可由两种方法实现：（1）通过访问窗体在窗体对象的属性中首先必须指定其窗体名，而后就可以通过下列标识访问窗体如：document.Mytable()。（2）通过数组来访问窗体除了使用窗体名来访问窗体外，还可以使用窗体对象数组来访问窗体对象。但需要注意一点，因窗体对象是由浏览器环境的提供的，而浏览器环境所提供的数组下标是由0到n。3.1.5引用窗体的先决条件在JavaScript中要对窗体引用的条件是：必须先在页面中用标识创建窗体，并将定义窗体部分放在引用之前。3.2窗体中的基本元素窗体中的基本元素由按钮、单选按钮、复选按钮、提交按钮、重置按钮、文本框等组成。在JavaScript中要访问这些基本

12、元素，必须通过对应特定的窗体元素的数组下标或窗体元素名来实现。每一个元素主要是通过该元素的属性或方法来引用。3.3框架框架Frames最主要功用是分割视窗，使每个小视窗能显示不同的HTML文件，不同框架之间可以互动(interact)，这就是说不同框架之间可以交换讯息与资料。例如:假设您开了两个frames，第一个frame可显示书的目录，第二个frame则显示章节的具体内容。框架可以将屏幕分割成不同的区域，每个区域有自己的URL，通过Frames数组对象来实现不同框架的访问。实际上框架对象本身也一类窗口，它继承了窗口对象的所有特征，并拥有所有的属性和方法。利用框架的例子具体说明3.4框架的访

13、问在前面我们介绍过使用document.forms实现单一窗体中不同元素的访问。而要实现框架中多窗体的不同元素的访问，则必须使用window对象中的Frames属性。Frames属性同样也是一个数组，他在父框架集中为每一个子框架设有一项。所不能具备的。从中可以了解到JavaScript是Web涉及人员的良好工具。表单表单是一个包含表单元素的区域。表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。表单使用表单标签（）定义。. input 元素.输入多数情况下被用到的表单标签是输入标签（）。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下

14、：文本域（Text Fields）当用户要在表单中键入字母、数字等内容时，就会用到文本域。First name: Last name: 浏览器显示如下：窗体顶端First name: Last name: 窗体底端注意，表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。单选按钮（Radio Buttons）当用户从若干给定的的选择中选取其一时，就会用到单选框。 Male Female浏览器显示如下：窗体顶端MaleFemale窗体底端注意，只能从中选取其一。复选框（Checkboxes）当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。I have a b

15、ikeI have a car浏览器显示如下：窗体顶端I have a bikeI have a car窗体底端表单的动作属性（Action）和确认按钮当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。Username: 浏览器显示如下：窗体顶端Username: 窗体底端假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 html_form_action.asp 的页面。该页面将显示出输入的结果。标签描述定义供用户输入的表单定义输入域定义文本域 (一个多行的输入控

16、件)定义一个控制的标签定义域定义域的标题定义一个选择列表定义选项组定义下拉列表中的选项定义一个按钮已废弃。有代替。图像标签（）和源属性（Src）在 HTML 中，图像由 标签定义。 是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src 指 source。源属性的值是图像的 URL 地址。定义图像的语法是：URL 指存储图像的位置。如果名为 boat.gif 的图像位于 的 images 目录中，那么其 URL 为 浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后

17、显示第二段。替换文本属性（Alt）alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。基本的注意事项 - 有用的提示：假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。图像标签标签描述定义图像。定义图像地图。定义图像地图中的可点击区域。背景（Backgrou

18、nds） 拥有两个配置背景的标签。背景可以是颜色或者图像。背景颜色（Bgcolor）背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。以上的代码均将背景颜色设置为黑色。背景（Background）背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。body background=URL可以是相对地址，如第一行代码。也可以使绝对地址，如第二行代码。提示：如果你打算使用背景图片，你需要紧记一下几点： 背景图像是否增加了页面的加载时间。小贴士：图像文件不应超过 10k。 背景图像是否与页面中的其他图象搭配良好。

19、背景图像是否与页面中的文字颜色搭配良好。 图像在页面中平铺后，看上去还可以吗？ 对文字的注意力被背景图像喧宾夺主了吗？基本的注意事项 - 有用的提示： 标签中的背景颜色（bgcolor）、背景（background）和文本（text）属性在最新的 HTML 标准（HTML4 和 XHTML）中已被废弃。W3C 在他们的推荐标准中已删除这些属性。应该使用层叠样式表（CSS）来定义 HTML 元素的布局和显示属性。颜色由红色、绿色、蓝色混合而成。颜色值颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#F

20、F）。这个表格给出了由三种颜色混合而成的具体效果：ColorColor HEXColor RGB #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), 和 很少被用到，这是由于浏览器对它们的支持不太好。希望这种情况在未来版本的 XHTML 中会有所改观。如果你使用 I

21、E5.0 或者更新的版本，可以查看在我们的XML教程中的具体例子。表格描述定义表格定义表格标题。定义表格的表头。定义表格的行。定义表格单元。定义表格的页眉。定义表格的主体。定义表格的页脚。定义用于表格列的属性。定义表格列的组。无序列表无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于 标签。每个列表项始于 。CoffeeMilk浏览器显示如下： Coffee Milk列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。有序列表同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 标签。每个列表项始于 标签。CoffeeMilk浏览器显示

22、如下：1 Coffee2 Milk列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。定义列表自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 标签开始。每个自定义列表项以 开始。每个自定义列表项的定义以 开始。CoffeeBlack hot drinkMilkWhite cold drink浏览器显示如下：CoffeeBlack hot drinkMilkWhite cold drink定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。, 和 很少被用到，这是由于浏览器对它们的支持不太好。希望这种情况在未来版本的 XHTML 中会有所改观。如果你使

23、用 IE5.0 或者更新的版本，可以查看在我们的XML教程中的具体例子。表格描述定义表格定义表格标题。定义表格的表头。定义表格的行。定义表格单元。定义表格的页眉。定义表格的主体。定义表格的页脚。定义用于表格列的属性。定义表格列的组。无序列表无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于 标签。每个列表项始于 。CoffeeMilk浏览器显示如下： Coffee Milk列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。有序列表同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 标签。每个列表项始于 标签。CoffeeMilk浏览

24、器显示如下：3 Coffee4 Milk列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。定义列表自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 标签开始。每个自定义列表项以 开始。每个自定义列表项的定义以 开始。CoffeeBlack hot drinkMilkWhite cold drink浏览器显示如下：CoffeeBlack hot drinkMilkWhite cold drink定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。 Web design and productionPapers will expand the perso

25、nal web design and production methods, tools and other research and discussion. Based on the introduction of web design and production of language, the emphasis on using the JavaScript language as a tool for the actual operation of web design and production of, respectively, based on the object of t

26、he JavaScript language, the use of internal object system and WEB pages of information exchange - windows and frameworks Detailed description of the use of specific examples and verified.1. IntroductionWith the advent of the 21st century, people are more and more important to feel the life and work

27、of the computers role in the increasingly professional needs to have a computer application skills deeply. Is required to master the computer profession, but also career development needs. Web design and production is a concrete manifestation of the ability of a computer, this chapter introduces the

28、 relevant knowledge of web design.1.1 Web Design OverviewWebsite is a way businesses and users to provide information (including products and services) to the user, is the enterprise e-commerce infrastructure and information platform, leave the site (or just use a third-party site) is not possible t

29、o talk about e-commerce . Corporate web site called network brand, also part of intangible assets, and the site is an important window of publicity and reflect the corporate image and culture on the INTERNET.Web Design Elements 1.2Two elements of web design are: overall style and color matching. Fir

30、st, determine the overall style of the siteApplication chapter HTML web design technology2.1 HTML language descriptionHTML (HyperText Mark-up Language) ie, HTML, or Hypertext Markup Language, is currently the most widely used language network, but also constitute the primary language of the document

31、 pages.HTML text is composed by HTML commands descriptive text, HTML commands can explain text, graphics, animation, sound, tables, links, and so on. HTML structure includes a head (Head), the specific content of the body (Body) into two parts, of which the head of the description of the browser you

32、 want, and the body contains the desired note.Features 2.1.1 HTML languageHTML document production is not very complex and powerful, supporting different data file formats insert, which is one of the reasons for the prevalence of WWW, HTML language characteristics are as follows:1, simplicity, HTML

33、version upgrade using a superset of the way, which is more flexible and convenient.2, scalability, widely used in HTML language brings to strengthen capabilities and increase identifiers and other requirements, HTML elements take the form of a subclass, bring assurance system expansion.3, platform i

34、ndependence. While the PC is popular, but the use of MAC and other machines out there, HTML can be used on a wide range of platforms, and this is another reason for the prevalence of WWW.2.1.2 HTML language editing softwareHTML is the essence of the text, you need to explain your browser, HTML edito

35、r can be roughly divided into three types: 1, the basic editing software, using WINDOWS notepad or write version can be written, of course, if you use WPS to write, you can. However, please use .htm or .html as the extension, so the browser can interpret save when executed.2, semi-WYSIWYG software,

36、which can greatly improve development efficiency, it can make you make a Homepage in a very short period of time, and you can learn HTML, this type of software has HOTDOG, as well as domestic Software web workshop.3, WYSIWYG software, the most widely used editor, can understand a little HTML knowled

37、ge can make pages.Application chapter HTML web design technology2.2.3 JavaScript technology in web designOne, JavaScript OverviewJavaScript is an object-based (Object) and event-driven (Event Driven) and safety performance have scripting language. Its purpose is to use HTML and HTML, Java scripting

38、language (Java applet) link together to achieve multiple objects in a Web page, the Web client interactions. Which can develop client applications. It is by embedding or transferred in standard HTML language implemented. It appears to make up for the shortcomings of HTML language, which is a comprom

39、ise choice for Java and HTML, has the following basic characteristics:1, is a scripting languageJavaScript is a scripting language, which uses a small way to block implementation of programming. Like other scripting languages, JavaScript is an interpreted language is also, it provides an easy develo

40、pment process.Its basic structure with C, C +, VB, Delphi is very similar. But it is not like these languages, you need to compile, but is interpreted line by line in the program is running. It is combined with HTML markup, so as to facilitate the users operation.2, object-based language.JavaScript

41、is an object-based language, but to be seen as an object-oriented. This means that it can use objects that they have created. Therefore, many functions can be derived from the interaction of methods and scripts scripting environment object.3. SimplicitySimplicity is mainly reflected in JavaScript: First, it is a Java basic statements and control flow above the simple and compact design based on order for Java is a very good transition study. Secondly, it is the use of weakly typed