网页设计与应用Word格式文档下载.docx
- 文档编号:16904003
- 上传时间:2022-11-27
- 格式:DOCX
- 页数:18
- 大小:62.20KB
网页设计与应用Word格式文档下载.docx
《网页设计与应用Word格式文档下载.docx》由会员分享,可在线阅读,更多相关《网页设计与应用Word格式文档下载.docx(18页珍藏版)》请在冰豆网上搜索。
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[]数组来实现不同窗体的访问。
<
formName=Form1>
INPUTtype=text...>
Inputtype=text...>
Inpupbyne=text...>
/form>
formName=Form2>
在Forms[0]中共有三个基本元素,而Forms[1]中只有两个元素。
窗体对象最主要的功能就是能够直接访问HTML文档中的窗体,它封装了相关的HTML代码:
Form
Name="
表的名称"
Target="
指定信息的提交窗口"
action="
接收窗体程序对应的URL"
Method=信息数据传送方式(get/post)
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="
value="
thisisajavascript"
>
...
scriptlanguage="
Javascirpt"
document.mytest.value="
thatisaJavascript"
;
document.mytest.select();
document.mytest.blur();
/script>
(2)textarea多行多列输入元素
实施对Textarea中的元素进行控制。
基本属性
name:
设定提交信息时的信息名称,对应HTML文档Textarea的Name。
Defaultvalue:
元素的默认值。
方法:
将输入焦点失去
将文字加亮后
事件:
onBlur:
当失去输入焦点后产生该事件
onFocus:
当输入获得焦点后,产生该文件
Onchange:
当文字值改变时,产生该事件
Onselect:
当文字加亮后,产生该文件
(3)Select选择元素
实施对滚动选择元素的控制。
属性:
name:
设定提交信息时的信息名称,对应文档select中的name。
Length:
对应文档select中的length
options:
组成多个选项的数组
selectIndex;
该下标指明一个选项
select在中每一选项都含有以下属性:
Text:
选项对应的文字
selected:
指明当前选项是否被选中
Index:
指明当前选项的位置
defaultselected:
默认选项
当select选项失去焦点时,产生该文件。
onFocas:
当select获得焦点时,产生该文件。
选项状态改变后,产生该事件。
(4)Button按钮
实施对Button按钮的控制。
Name:
设定提交信息时的信息名称,对应文档中button的Name。
Value:
click()该方法类似于一个按下的按钮。
onclick当单击button按钮时,产生该事件。
例:
button"
testcall"
onclick=tmyest()>
scriptlanguage="
javascirpt"
document.elements[0].value="
mytest"
//通过元素访问
或
document.testcallvalue="
//通过名字访问
.....
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="
document.vlinkColor="
document.linkColor="
green"
document.alinkcolor="
}
/HEAD>
bodybgColor="
White"
Ahref="
test8_2.htm"
调用动态按钮文档<
/a>
form>
<
Inputtype="
Value="
onClick="
changecolor()"
/BODY>
/HTML>
输出结果见图4-1所示。
图4-1调用动态按钮图
动态按钮程序。
test8_2.htm
HTML>
HEAD>
palign="
center"
<
/p>
divalign="
center>
tableborder="
0"
cellspacing="
cellpadding="
tr>
tdwidth="
100%"
formname="
form2"
onSubmit="
null"
p>
submit"
banner"
VALUE="
Submit"
alert('
Youhavetoputan\'
action=[url]\'
ontheform
tag!
!
'
)"
br>
varid,pause=0,position=0;
functionbanner(){
//variablesdeclaration
vari,k,msg="
这里输入你要的内容"
//increasemsg
k=(30/msg.length)+1;
for(i=0;
i<
=k;
i++)msg+="
"
+msg;
//showittothewindow
document.form2.banner.value=msg.substring(position,position-30);
//setnewposition
if(position++==msg.length)position=0;
//repeatatenteredspeed
id=setTimeout("
banner()"
60);
}
//end-->
banner();
/td>
/tr>
/table>
/center>
/div>
BODY>
test8_1.htm"
返回<
图4-2动态按钮网页图
本讲介绍了使用JavaScript脚本实现Web页面信息交互的方法。
其中主要介绍了窗体中的基本元素的主要功能和使用。
4.4框架
框架Frames最主要功用是"
分割"
视窗,使每个"
小视窗"
能显示不同的HTML文件,不同框架之间可以互动(interact),这就是说不同框架之间可以交换讯息及资料。
例如:
假设您开了两个frames,第一个frame可显示书的目录,第二个frame则显示章节的具体内容。
框架可以将屏幕分割成不同的区域,每个区域有自己的URL,通过Frames[]数组对象来实现不同框架的访问。
实际上框架对象本身也一类窗口,它继承了窗口对象的所有特征,并拥有所有的属性和方法。
利用框架的例子具体说明,见图5-3所示。
图4-3框架对象
FramesetRows="
20%,80%"
framesrc="
test9_1.html"
FramesetCols="
50%,50%"
test9_2.html"
test9_3.html"
/Frameset>
以上HTML标识将屏幕分成三个框架。
先将窗口分成以二行为单位的窗口,之后再按分成二个窗口。
并在相应的框架中放入自己的HTML文档。
通过[Framset]告诉浏览器您要设置几个框架;
rows这项参数告诉浏览器您想将视窗分割成几列;
而cols这项参数是告诉浏览器您想将视窗分割成几行。
可以用很多组的<
frameset...>
tags将视窗分割得更复杂。
可以给每个frame一个“名字”(name)。
frame的名字在JavaScript语法中的地位非常重要。
可以用<
src>
告诉浏览器要载入的HTML文件。
4.5框架的访问
在前面我们介绍过使用document.forms[]实现单一窗体中不同元素的访问。
而要实现框架中多窗体的不同元素的访问,则必须使用window对象中的Frames属性。
Frames属性同样也是一个数组,他在父框架集中为每一个子框架设有一项。
通过下标实现不同框架的访问:
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
10%,90%"
<
test9_1.htm"
40%,60%"
test9_2.htm"
test9_3.htm"
第一个框架
主要作用是显示标题文档。
Test9_1.htm
H2>
使用框架实现WEB交互<
/H2>
第二个框架
主要作用是实现交互。
可以通过JavaScript脚本将所示的“云南省”和“四川省”分别改为“昆明市”和“成都市”。
Test9_2.htm
Body>
test9_1"
请选择城市:
BR>
Selectname="
select1"
Multiple>
Option>
山西省
四川省
贵州省
山东省
江苏省
浙江省
安徽省
河南省
/select>
HR>
InputType="
"
提交"
reset"
复位"
pre>
document.test9_1.elements[0].options[0].text="
太原市"
document.test9_1.elements[0].options[1].text="
成都市"
/pre>
/Body>
第三个框架:
Test9_3.htm
test9_2"
请输入用户名:
text1"
Size=20>
请选择:
Checkbox"
checkbox1"
qb"
全部信息<
checkbox2"
bf"
部分信息<
checkbox3"
sy"
所有城市<
InputT
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 应用