6 第二章
第二章 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的知识就可以做出网页,这类软件主要有Frontpage,DREAMWEAVER、Delphi、Eclipse、UltraEdit。
6
第三章 7
第三章 色彩在网页中的应用
3.1色彩在网页中的应用
色彩是艺术表现的要素之一。在网页设计中,我们的设计师根据和谐、均衡和重点突出的原则,将不同的色彩进行组合.搭配来构成美丽的页面。 根据色彩对人们心理的影响,合理地加以运用。
先选定一种色彩,然后调整透明度或者饱和度,这样的页面看起来色彩统一,有层次感。简单的说就是用一个感觉的色彩,例如淡蓝,淡黄,淡绿;或者土黄,土灰,土蓝。
在网页配色中不要将所有颜色都用到,尽量控制在三至五种色彩以内。背景和前文的对比尽量要大以便突出主要文字内容。
3.2主页色彩的处理
色彩是人的视觉最敏感的东西。主页的色彩处理得好,可以锦上添花,达到事半功倍的效果。色彩总的应用原则应该是“总体协调,局部对比”,也就是:主页的整体色彩效果应该是和谐的,只有局部的、小范围的地方可以有一些强烈色彩的对比。在色彩的运用上,可以根据主页内容的需要,分别采用不同的主色调。因为色彩具有象征性,例如:嫩绿色、翠绿色、金黄色、灰褐色就可以分别象征着春、夏、秋、冬。其次还有职业的标志色,例如:军警的橄榄绿,医疗卫生的白色等。色彩还具有明显的心理感觉,例如冷、暖的感觉,进、退的效果等。另外,色彩还有民族性,各个民族由于环境、文化、传统等因素的影响,对于色彩的喜好也存在着较大的差异。充分运用色彩的这些特性,可以使我们的主页具有深刻的艺术内涵,从而提升主页的文化品位。
3.3常用的配色方案
1.暖色调。即红色、橙色、黄色、赭色等色彩的搭配。这种色调的运用,可使主页呈现温馨、和煦、热情的氛围。
2.冷色调。即青色、绿色、紫色等色彩的搭配。这种色调的运用,可使主页呈现宁静、清凉、高雅的氛围。
3.对比色调。即把色性完全相反的色彩搭配在同一个空间里。例如:红与绿、黄与紫、橙与蓝等。这种色彩的搭配,可以产生强烈的视觉效果,给人亮丽、鲜艳、喜庆的感觉。
7
8 第四章
最后,还要考虑主页底色(背景色)的深、浅,这里借用摄影中的一个术语,就是“高调”和“低调”。底色浅的称为高调;底色深的称为低调。底色深,文字的颜色就要浅,以深色的背景衬托浅色的内容(文字或图片);反之,底色淡的,文字的颜色就要深些,以浅色的背景衬托深色的内容(文字或图片)。这种深浅的变化在色彩学中称为“明度变化”。当然,色彩的明度也不能变化太大,否则屏幕上的亮度反差太强,同样也会使读者的眼睛受不了。
第四章 WEB页面信息的交互——窗体与框架
要实现网页的动态交互,必须掌握有关窗体对象(Form)和框架对象(Frames)更为复杂的知识。
4.1窗体基础知识
窗体对象可以使设计人员能用窗体中不同的元素与客户机用户相交互,而用不着在之前首先进行数据输入,就可以实现动态改变Web文档的行为。
4.1.1窗体对象
窗体(Form):它构成了Web页面的基本元素。通常一个Web页面有一个窗体或几个窗体,使用Forms[]数组来实现不同窗体的访问。
在Forms[0]中共有三个基本元素,而Forms[1]中只有两个元素。
窗体对象最主要的功能就是能够直接访问HTML文档中的窗体,它封装了相关的HTML代码:
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元素值改变时,产生该文件。 例:
...
9
10 第四章
(2)textarea多行多列输入元素
功能:实施对Textarea中的元素进行控制。 基本属性
name:设定提交信息时的信息名称,对应HTML文档Textarea的Name。 Value:用以设定出现在窗口中对应HTML文档中Value的信息。 Default value:元素的默认值。 方法:
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按钮时,产生该事件。 例 :
10