网页设计与应用.docx

网页设计与应用.docx

《网页设计与应用.docx》由会员分享，可在线阅读，更多相关《网页设计与应用.docx（22页珍藏版）》请在冰点文库上搜索。

网页设计与应用

网页设计与应用

专业：

计算机网络技术

班级：

2015

学号：

20150321031

姓名：

蔡依婷

指导教师：

杨艳慈

邯郸职业技术学院

2017年11月21日

网页设计与应用

摘要

本论文将对个人网页设计与制作的方法、工具等展开研究和探讨。

在介绍网页设计与制作语言的基础上，着重使用JavaScript作为工具语言进行网页设计与制作的实际操作，分别对基于对象的JavaScript语言、内部对象系统的使用及WEB页面信息交互——窗口和框架进行详细描述，并利用具体的实例进行验证。

本论文主要章节如下，第一章：

绪论，本章主要介绍网页设计的相关知识。

第二章：

网页设计语言概述，本章主要介绍网页设计的语言——HTML，以及用于编辑HTML语言的软件，为后续工作奠定基础。

第三章：

基于对象的JavaScript语言，本章介绍了基于对象的JavaScript中常用内部对象属性、方法的使用。

第四章：

内部对象系统的使用，本章主要介绍使用浏览器的内部对象系统，可实现与HTML文档进行交互。

第五章：

WEB页面信息的交互——窗体与框架，本章主要介绍实现网页的动态交互，必须掌握有关窗体对象（Form）和框架对象（Frames）更为复杂的知识。

关键词：

网页制作；网页设计；HT

ML；ASP

第一章绪论

随着21世纪的到来，人们更深切地感受到计算机在生活和工作中的作用越来越重要，越来越来的职业需要具有计算机的应用技能。

掌握计算机是职业的需要，更是事业发展的需要。

网页设计与制作是计算机能力的具体表现，本章主要介绍网页设计的相关知识。

1.1网页设计概述

网站是企业向用户和网民提供信息（包括产品和服务）的一种方式,是企业开展电子商务的基础设施和信息平台，离开网站（或者只是利用第三方网站）去谈电子商务是不可能的。

企业的网址被称为“网络商标”，也是企业无形资产的组成部分，而网站是INTERNET上宣传和反映企业形象和文化的重要窗口。

1.2网页设计的要素

网页设计的两大要素是：

整体风格和色彩搭配。

一、确定网站的整体风格

在这里，我提供给大家一些参考经验：

1．将你的标志logo，尽可能的放在每个页面上最突出的位置。

2．突出你的标准色彩。

3．总结一句能反映贵站精髓的宣传标语！

4．相同类型的图像采用相同效果，比如说标题字都采用阴影效果，那么在网站中出现的所有标题字的阴影效果的设置应该是完全一致的！

二、网页色彩的搭配

1．用一种色彩。

这里是指先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感。

2．用两种色彩。

先选定一种色彩，然后选择它的对比色。

3．用一个色系。

简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。

1.3大作业目的和意义

本大作业主要是对网页设计与制作的语言基础上进行探讨，主要内容如下：

通过已经做好的网页，分析html网页设计技术、XML技术、JavaApplet技术和Javascript技术在网页设计中的应用。

第二章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。

第三章色彩在网页中的应用

3.1色彩在网页中的应用

色彩是艺术表现的要素之一。

在网页设计中，我们的设计师根据和谐、均衡和重点突出的原则，将不同的色彩进行组合．搭配来构成美丽的页面。

根据色彩对人们心理的影响，合理地加以运用。

先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感。

简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。

在网页配色中不要将所有颜色都用到，尽量控制在三至五种色彩以内。

背景和前文的对比尽量要大以便突出主要文字内容。

3.2主页色彩的处理

色彩是人的视觉最敏感的东西。

主页的色彩处理得好，可以锦上添花，达到事半功倍的效果。

色彩总的应用原则应该是“总体协调，局部对比”，也就是：

主页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。

在色彩的运用上，可以根据主页内容的需要，分别采用不同的主色调。

因为色彩具有象征性，例如：

嫩绿色、翠绿色、金黄色、灰褐色就可以分别象征着春、夏、秋、冬。

其次还有职业的标志色，例如：

军警的橄榄绿，医疗卫生的白色等。

色彩还具有明显的心理感觉，例如冷、暖的感觉，进、退的效果等。

另外，色彩还有民族性，各个民族由于环境、文化、传统等因素的影响，对于色彩的喜好也存在着较大的差异。

充分运用色彩的这些特性，可以使我们的主页具有深刻的艺术内涵，从而提升主页的文化品位。

3.3常用的配色方案

1.暖色调。

即红色、橙色、黄色、赭色等色彩的搭配。

这种色调的运用，可使主页呈现温馨、和煦、热情的氛围。

2.冷色调。

即青色、绿色、紫色等色彩的搭配。

这种色调的运用，可使主页呈现宁静、清凉、高雅的氛围。

3.对比色调。

即把色性完全相反的色彩搭配在同一个空间里。

例如：

红与绿、黄与紫、橙与蓝等。

这种色彩的搭配，可以产生强烈的视觉效果，给人亮丽、鲜艳、喜庆的感觉。

最后，还要考虑主页底色（背景色）的深、浅，这里借用摄影中的一个术语，就是“高调”和“低调”。

底色浅的称为高调；底色深的称为低调。

底色深，文字的颜色就要浅，以深色的背景衬托浅色的内容（文字或图片）；反之，底色淡的，文字的颜色就要深些，以浅色的背景衬托深色的内容（文字或图片）。

这种深浅的变化在色彩学中称为“明度变化”。

当然，色彩的明度也不能变化太大，否则屏幕上的亮度反差太强，同样也会使读者的眼睛受不了。

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

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

4.1窗体基础知识

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

4.1.1窗体对象

窗体（Form）：

它构成了Web页面的基本元素。

通常一个Web页面有一个窗体或几个窗体，使用Forms[]数组来实现不同窗体的访问。

在Forms[0]中共有三个基本元素，而Forms[1]中只有两个元素。

窗体对象最主要的功能就是能够直接访问HTML文档中的窗体，它封装了相关的HTML代码：

Name="表的名称"

Target="指定信息的提交窗口"

action="接收窗体程序对应的URL"

Method=信息数据传送方式（get/post）

enctype="窗体编码方式"

[onsubmit="JavaScript代码"]>

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元素值改变时，产生该文件。

例：

...

document.mytest.value="thatisaJavascript";

document.mytest.select（）;

document.mytest.blur（）;

（2）textarea多行多列输入元素

功能：

实施对Textarea中的元素进行控制。

基本属性

name：

设定提交信息时的信息名称，对应HTML文档Textarea的Name。

Value：

用以设定出现在窗口中对应HTML文档中Value的信息。

Defaultvalue：

元素的默认值。

方法：

blur（）：

将输入焦点失去

select（）：

将文字加亮后

事件：

onBlur:

当失去输入焦点后产生该事件

onFocus:

当输入获得焦点后，产生该文件

Onchange:

当文字值改变时，产生该事件

Onselect:

当文字加亮后，产生该文件

（3）Select选择元素

功能：

实施对滚动选择元素的控制。

属性：

name:

设定提交信息时的信息名称，对应文档select中的name。

Length:

对应文档select中的length

options:

组成多个选项的数组

selectIndex;该下标指明一个选项

select在中每一选项都含有以下属性：

Text:

选项对应的文字

selected:

指明当前选项是否被选中

Index:

指明当前选项的位置

defaultselected:

默认选项

事件：

OnBlur：

当select选项失去焦点时，产生该文件。

onFocas:

当select获得焦点时，产生该文件。

Onchange:

选项状态改变后，产生该事件。

（4）Button按钮

功能：

实施对Button按钮的控制。

属性：

Name:

设定提交信息时的信息名称，对应文档中button的Name。

Value:

用以设定出现在窗口中对应HTML文档中Value的信息。

方法：

click（）该方法类似于一个按下的按钮。

事件：

onclick当单击button按钮时，产生该事件。

例：

...

document.elements[0].value="mytest";//通过元素访问

或

document.testcallvalue="mytest";//通过名字访问

.....

4.3窗体对象实例

下面我们演示通过点击一个按钮（red）来改变窗口颜色，点击“调用动态按钮文档”调用一个动态按钮文档。

test8_1.htm

//原来的颜色

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";

}

调用动态按钮文档

输出结果见图4-1所示。

图4-1调用动态按钮图

动态按钮程序。

test8_2.htm