网页设计与制作-论文文档格式.docx
- 文档编号:941976
- 上传时间:2023-04-29
- 格式:DOCX
- 页数:27
- 大小:358.56KB
网页设计与制作-论文文档格式.docx
《网页设计与制作-论文文档格式.docx》由会员分享,可在线阅读,更多相关《网页设计与制作-论文文档格式.docx(27页珍藏版)》请在冰点文库上搜索。
3.用一个色系。
简单的说就是用一个感觉的色彩,例如淡蓝,淡黄,淡绿;
或者土黄,土灰,土蓝。
1.3大作业目的和意义
本大作业主要是对网页设计与制作的语言基础上进行探讨,主要内容如下:
通过已经做好的网页,分析html网页设计技术、XML技术、Java Applet技术和
Javascript技术在网页设计中的应用。
1.4要分析的网页
第二章HTML网页设计技术的应用
第二章 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。
2.1.4html语言在网页设计中的应用
2.2.3 JavaScript技术在网页设计中应用一、JavaScript概述
JavaScript是一种基于对象(Object)和事件驱动(EventDriven)并具有安全性能的脚
本语言。
使用它的目的是与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)的应用程式所处理。
第五章色彩在网页中的应用
第五章 色彩在网页中的应用
5.1色彩在网页中的应用
色彩是艺术表现的要素之一。
在网页设计中,我们的设计师根据和谐、均衡和重点突出的原则,将不同的色彩进行组合.搭配来构成美丽的页面。
根据色彩对人们心理的影响,合理地加以运用。
先选定一种色彩,然后调整透明度或者饱和度,这样的页面看起来色彩统一,有层次感。
或者土黄,土灰,土蓝。
在网页配色中不要将所有颜色都用到,尽量控制在三至五种色彩以内。
背景和前文
的对比尽量要大以便突出主要文字内容。
5.2主页色彩的处理
色彩是人的视觉最敏感的东西。
主页的色彩处理得好,可以锦上添花,达到事半功倍的效果。
色彩总的应用原则应该是“总体协调,局部对比”,也就是:
主页的整体色彩效果应该是和谐的,只有局部的、小范围的地方可以有一些强烈色彩的对比。
在色彩的运用上,可以根据主页内容的需要,分别采用不同的主色调。
因
为色彩具有象征性,例如:
嫩绿色、翠绿色、金黄色、灰褐色就可以分别象征着春、夏、秋、冬。
其次还有职业的标志色,例如:
军警的橄榄绿,医疗卫生的白色等。
色彩还具有明显的心理感觉,例如冷、暖的感觉,进、退的效果等。
另外,色彩还有民族性,各个民族由于环境、文化、传统等因素的影响,对于色彩的喜好也存在着较大的差异。
充分运用色彩的这些特性,可以使我们的主页具有深刻的艺术内涵,从而提升主页的文化品位。
5.3常用的配色方案
1.暖色调。
即红色、橙色、黄色、赭色等色彩的搭配。
这种色调的运用,可使主页呈现温馨、和煦、热情的氛围。
2.冷色调。
即青色、绿色、紫色等色彩的搭配。
这种色调的运用,可使主页呈现宁静、清凉、高雅的氛围。
3.对比色调。
即把色性完全相反的色彩搭配在同一个空间里。
例如:
红与绿、黄与紫、橙与蓝等。
这种色彩的搭配,可以产生强烈的视觉效果,给人亮丽、鲜艳、喜庆的感觉。
最后,还要考虑主页底色(背景色)的深、浅,这里借用摄影中的一个术语,就是“高调”和“低调”。
底色浅的称为高调;
底色深的称为低调。
底色深,文字的颜色就要浅,以深色的背景衬托浅色的内容(文字或图片);
反之,底色淡的,文字的颜色就要深些,以浅色的背景衬托深色的内容(文字或图片)。
这种深浅的变化在色彩学中称为“明度变化”。
当然,色彩的明度也不能变化太大,否则屏幕上的亮度反差太强,同样也会使读者的眼睛受不了。
5.4合理搭配网页色彩
网页的色彩是树立网站形象的关键之一,网页的背景、文字、图标、边框、超链接等都要用到色彩。
不同的色彩会使浏览者有不同的心理感受。
合理的搭配色彩,会更好的表现主题,吸引用户的注意力。
网页色彩涉及到艺术知识,让美术教师参加网页色彩设计,可能会出现比较理想的效果。
在色彩搭配上要注意色彩的鲜明性、独特性、合适性、联想性。
背景色和前景色对比要大,以突出主要内容
网站给人的第一印象来自视觉冲击,不同的色彩搭配产生不同的效果,并可能影响到访问者的情绪。
“标准色彩”是指能体现网站形象和延伸内涵的色彩,要用于网站的标志,标题,主菜单和主色块。
给人以整体统一的感觉。
至于其它色彩也可以使用,但应当只是作为点缀和衬托,绝不能喧宾夺主。
一般来说,一个网站的标准色彩不超过3种,太多则让人眼花缭乱。
适合于网页标准色的颜色有:
蓝色,黄/橙色,黑
/灰/白色三大系列色。
第六章 WEB页面信息的交互——窗体与框架
要实现网页的动态交互,必须掌握有关窗体对象(Form)和框架对象(Frames)更为复杂的知识。
6.1窗体基础知识
窗体对象可以使设计人员能用窗体中不同的元素与客户机用户相交互,而用不着在之前首先进行数据输入,就可以实现动态改变Web文档的行为。
6.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>
6.1.2窗体对象的方法
窗体对象的方法只有一个--submit()方法,该方法主要功用就是实现窗体信息的
提交。
如提交Mytest窗体,则使用下列格式:
document.mytest.submit()
6.1.3窗体对象的属性
窗体对象中的属性主要包括以下:
elementsnameactiontargetencodingmethod。
除Elements外,其它几个均反映了窗体中标识中相应属性的状态,这通常是单个
窗体标识;
而elements常常是多个窗体元素值的数组,例:
elements[0].Mytable.elements[1]
6.1.4访问窗体对象
在JavaScript中访问窗体对象可由两种方法实现:
(1)通过访问窗体
在窗体对象的属性中首先必须指定其窗体名,而后就可以通过下列标识访问窗体如:
document.Mytable()。
(2)通过数组来访问窗体
除了使用窗体名来访问窗体外,还可以使用窗体对象数组来访问窗体对象。
但需要注意一点,因窗体对象是由浏览器环境的提供的,而浏览器环境所提供的数组下标是由0到n。
所以可通过下列格式实现窗体对象的访问:
document.forms[0]document.forms[1]
document.forms[2]...
6.1.5引用窗体的先决条件
在JavaScript中要对窗体引用的条件是:
必须先在页面中用标识创建窗体,并将定义窗体部分放在引用之前。
6.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="
//通过名字访问
.....
(5)checkbox检查框
实施对一个具有复选框中元素的控制。
Checked:
该属性指明框的状态true/false.
defauitchecked:
默认状态方法:
click()该方法使得框的某一个项被选中。
Onclick:
当框的选被选中时,产生该事件。
(6)radio无线按钮
实施对一个具单选功能的无线按钮控制。
设定提交信息时的信息名称,对应HTML文档中的radio的name相同Value:
用以设定出现在窗口中对应HTML文档中Value的信息,对应HTML文档
中的radio的name。
length:
单选按钮中的按钮数目。
defalechecked:
默认按钮。
checked:
指明选中还是没有选中。
index:
选中的按钮的位置。
chick():
选定一个按钮。
onclick:
单击按钮时,产生该事件。
(7)hidden:
隐藏
实施对一个具有不显示文字并能输入字符的区域元素的控制。
设定提交信息时的信息名称,对应HTML文档的hidden中的Name。
hidden中的value。
defaleitvalue:
默认值
(8)Password口令
实施对具有口令输入的元素的控制。
设定提交信息时的信息名称,对应HTML文档中password中的name。
用以设定出现在窗口中对应HTML文档中Value的信息,对应HTML文档中password中的Value。
defaultvalu:
默认值方法:
select():
加亮输入口令域。
blur():
使这丢失passward输入焦点。
focus():
获得password输入焦点。
(9)submit提交元素
实施对一个具有提交功能按钮的控制。
设定提交信息时的信息名称,对应HTML文档中submit。
用以设定出现在窗口中对应HTML文档中Value的信息,对应HTML文档中value。
方法
click()相当于按下submit按钮。
onclick()当按下该按钮时,产生该事件。
6.3窗体对象实例
下面我们演示通过点击一个按钮(red)来改变窗口颜色,点击“调用动态按钮文档”调用一个动态按钮文档。
test8_1.htm
html>
head>
ScriptLanguage="
JavaScript"
//原来的颜色document.bgColor="
blue"
document.vlinkColor="
white"
document.linkColor="
yellow"
document.alinkcolor="
red"
//动态改变颜色
functionchangecolor(){document.bgColor="
green"
document.alinkcolor="
}
/HEAD>
bodybgColor="
White"
Ahref="
test8_2.htm"
调用动态按钮文档<
/a>
form>
Inputtype="
Value="
onClick="
changecolor()"
/BODY>
/HTML>
输出结果见图5-1所示。
图5-1调用动态按钮图
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 制作 论文