色彩毕业论文--个人网页设计与制作.doc

毕业论文--个人网页设计与制作

个人网页设计与制作

学生:张宇数学与计算机科学学院

指导老师:陶俊江汉大学

1

摘要

网设计作为用户界面交互设计的延伸是在新的媒体和新的技术支

下实现一个全新的设计创作领域。

本论文将对个人网页设计与制作的语言和步骤进行研究和探讨。

本论文主要章节如下第一章:绪论本章主要介绍网页设计的相关知识。第二章:网页设计语言概述本章主要介绍网页设计的语言—HTML 以及用于编辑HTML语言的软件。第三章:基于对象的JavaScript语言本章主要介绍了基于对象的JavaScript常用内部对象属性.方法的使用。第四章:内部对象系统的使用本章主要介绍使用浏览器的内部对象系统可实现与HTML文档进行交互。第五章:WEB页面信息的交互—窗体与框架本章主要介绍实现网页的动态交互必须掌握有关窗体对象(From)和框架对象(Frames)更为复杂的知识。

关键词

网页设计;网页制作;网站建设;HTML

1

Abstract

Web design as the extending of user interface designing, is in thenew media and new technology branch to achieve a new design field,

This paper will be of personal webpage design and making of thelanguageAnd the steps for study and discussion.This thesis mainlyfollows with chapters, chapter one: introduction, this Chapter mainlyintroduces the relevant webpage design knowledge. The second chapter:webpage design language, this chapter introduces the webpage designlanguage HTML, and for editing the HTML language software. The thirdchapter: object-oriented JavaScript language, this chapter mainlyintroduced the object-oriented JavaScript commonly used internal objectproperties.Using the method of The fourth chapter: the internal objectsystems are used, this chapter introduces the use of browser internalobject system, can realize Now with the HTML document to interact.Chapter fifth: WEB page information interactive form and frame, thischapter mainly introduces the realization of the interactive dynamicwebpage, must master the form object ( From ) and frame object (Frames )more complex knowledge.

Key word

Webpage design; webpage production; website construction; HTML

1

目录

第一章绪论„„„„„„„„„„„„„„„„„„„„„„„„„1 1. 1网

页的概述„„„„„„„„„„„„„„„„„„„„„„„„„„1

1.2网页的要

素„„„„„„„„„„„„„„„„„„„„„„„„.„„„. 11.3制作步

骤„„„„„„„„„„„„„„„„„„„„„„„„„„„„„1第二章网

页设计语言概述„„„„„„„„„„„„„„„„„„„7 2. 1 HTML语言介

绍„„„„„„„„„„„„„„„„„„„„„„„„„„.7 2.2常用的HTML

语言编辑软件„„„„„„„„„„„„„„„„„„„„„8 2.3本章小

结„„„„„„„„„„„„„„„„„„„„„„„„„„„„. 12第三章基

于对象的JAVASCRIPT语言„„„„„„„„„„„„„„. 13 3. 1对象的基础

知„„„„„„„„„„„„„„„„„„„„„„„„„„. 13 3.2常用对象的

属性和方法„„„„„„„„„„„„„„„„„. . . . . . . . . . . . . . . . . . . . . . 16

3.3本章小

结„„„„„„„„„„„„„„„„„„„„„„„„„„„„.22

第四章内部对象系统的使用„„„„„„„„„„„„„„„„„.23 4. 1

浏览器对象层次及其主要作用„„„„„„„„„„„„„„„.„„„23

.2文档对象功能及其作用„„„„„„„„„„„„„„„„„„„„„.23

4

4.3 内部对象系统实

例„„„„„„„„„„„„„„„„„„„„„„„.25 4.4本章小

结„„„„„„„„„„„„„„„„„„„„„„„„„„„. .27

第五章WEB页面信息的交互—窗体与框架„„„„„„„„„„. .28 5. 1窗

体基础知识„„„„„„„„„„„„„„„„„„„„„„„„„.28 5.2窗体

中的基本元素„„„„„„„„„„„„„„„„„„„„„„„.29 5.3窗体对

象实例„„„„„„„„„„„„„„„„„„„„„„„„„.33 5.4框

架„„„„„„„„„„„„„„„„„„„„„„„„„„„„„.36 5.5架的

访问„„„„„„„„„„„„„„„„„„„„„„„„„„.„38 5.6本章小

结„„„„„„„„„„„„„„„„„„„„„„„„„„.„41第六章结

论„„„„„„„„„„„„„„„„„„„„„„„„.42致

谢„„„„„„„„„„„„„„„„„„„„„„„„„„.43参考文

献„„„„„„„„„„„„„„„„„„„„„„„„„„44

1

1

第一章绪论

随着21世纪的到来人们更深切地感受到计算机在生活和工作中的作用越来越重要越来越多的职业需要具有计算机的应用技能.掌握计算机是职业的需求更是事业发展的需要.网页设计与制作是计算机能力的具体表现本章主要介绍网页设计的相关知识.

1. 1网页的概述

用h t m l语言编写的通过www网传输并被w e b浏览器翻译成可以显示出网页是

来的集合文本 图片声音和动画等信息元素的页面文件.

1.2网页的要素

网页的基本要素一般包括:文字 图像动画和链接标志等除此之外 网页的元素还包括声音多媒体和视频等。

1.2. 1文本:是网页中最基本的元素。 网页中文字的设计一般从以下几个方面来考

虑:字体的选择;字号行据的选择;特殊字体的使用;字体的颜色。

1.2.2图像:现在网络上使用的绝大多数图片和图像时gif, jpeg和png文件格式

1.2.3链接:也叫超链接是从一个网页指向另一个目的端的链接是页面间的链接关系。超链接的标志一般有:文本 图像热区三种。

1.2.4除上述几种要素之外在网页上经常使用的还有动画视频声音等各种信息的形式。

1.3网页制作步骤

网站是网页的集合一个站点用的所有网页构成一个网站 网页是网站的表现形式 网页设计是指对网站整体页面的设计包括页面风格、配色、布局、 内容等。 网页设计包含的内容非常多大体分为两个方面:一方面是纯网站本身的设计如文字、排版、 图片制作、平面设计、静态图文和动态声音、影像等;另一方面是网站的延伸设计包括网站主题、浏览群的定位、智能交互、制作策划、形象包装和宣传营销等。

设计页面的第一步就是设计片面布局就像报刊杂志版面设计一样我们可以看作一张报约或者一份杂志来进行排版布局。

1.草稿新页面就像一张白纸没有任何的约定俗成的东西可以尽可能地发挥想象力、创造力将想象的布局到上面去。这是原创阶段你不必讲究细腻工整你也可在草稿本上先画出整个布局框架把多个版块的位置先粗略的布置上去以往下一步工作的展示这一步也可以借住PHOTOSHOP或其他工具软件来完成。

2.粗略布局在草稿的基础上将需要的功能模块放到页面上去这时要遵循突出重点、整体协调的原则首先将网站标志、导航条、广告条等最主要的模块放在最突出位置然后考虑其他模块的布局。

3. 定稿定稿即将粗略布局精细化、具体化完成整个页面的设计。

1

页面的制作首先在根据客户的要求下完成首页的制作在经客户确定后再制作其他的页面制作完成后交给客户验收然后发给客户确定待所有的页面的都经客户确定后完成网页的制作进程交给程序员添加程序。

1.3. 1常用参数

图片质量与下载速度

由于网络速度问题我们要考虑图片的大小对传输速度的影响如果图片太大就会影响浏览速度访问者很快就对这个网站失去了兴趣只有充分了解图片质量与下载速度的关系并了解不同的文件格式才能更有效的表达内容。

1.分辨率

理解图像分辨率可以直接控制文件大小和下载速度进而影响访问者的人数创建WEB图片的要求是小、快、好。显示器的分辨率起决定性的作用大多数显示器使用的是1024*768的分辨率 因为要通过显示器页面所以用高分辨率并不会增加图片质量相反还会降低图片的下载速度。

2.位图

习惯性称为图像而将矢量图称为图形位图是位映射图像的简称也可叫栅格图。它将一幅图像分成许多栅格栅格的每一个点就是图像的像素其值就是像素的亮度和色彩度扩大位图尺寸的效果是增多像素从而将使线条和形状显得的参次不齐位图的与其分辨率密切相关 因此在处理位图图像时必须设置合适的图像分辨率否则输出图像时会遗漏细节使图像模糊。

3.矢量

矢量图也称为面向对像的图像或绘图图像它使用一组线段造型描述一段图像 图像中包含的直线弧线和造型的设置与开关是由指令描述的矢量图适用于描述色彩简单的图像矢量文件中的图像元素称为对象每一个对象都是一个自成一体的主体它具有形状、轮廓、大小和屏幕位置等属性。放大位图会失真但放大矢量图不会失真。 4.图片格式

制作好的效果图可以保存为各种格式包括GIF格式 JPEG格式和PNG格式等各个图片格式之间的区别为:GIF格式即图形交换格式;GIF格式的图片只能使用256种颜色不适合显示色彩丰富的图像内容。其特点是1.采用隔行扫描的显示方

式;2.可以设置背景透明;3.可以制作简单的动画。 JPEG格式可以显示颜色复杂的图片但是

2

在处理大面积的颜色块时可能会出现明显的压缩痕迹。 PNG格式的图片兼有GIF和JPEG的优点

1.3.2网页布局

常见网页版式布局结构有以下几种:

两栏式结构 即页面顶部为网站标志或广告条下面分为左右两栏一般左栏式导航或分类信息右栏为主要内容这种布局很容易掌握但如果在色彩上不加以注意的很容易给人一种“乏味”的感觉。三栏式结构是一些大型网站常用的布局结构一般为上面是横幅的广告条下面分为三竖栏 中间较大是主要的信息左右是小条内容或者广告条。三栏式给人一种充实的感觉但页面拥挤不够灵活是网站常用的一种布局形式。 “三”型结构这种结构多用于国外网站或者视频类网站其特点是分类清晰展示方便。左右框架型是企业网站或论坛常用的布局页面分为左右两部分左边一般为导航部分右边是与导航相对应的内容。左右框架型的结果非常清晰 内容一目了然便于信息的查询。上下框架型与左右框架型类似其区别仅仅在于形式。页面整体为横向分布上面为导航 中间的大展式窗口很突出整个网站显得简洁明亮这种结构适合于信息量不大主要靠图片展示内容的网站。 Flash型主要采用现在流行的Flash技术页面表达的内容较为丰富给人视觉和听觉上很大的冲击处理得当会达到Web页面难以达到的效果。

1.3.3网页色彩

1.色彩模式。

在自然界看到的各种色彩都是由三种色光或三种颜色组成的而他们本身不能再分拆出其他的颜色成分所以称为三原色。三原色分为光学三原色和物理三原色。这两种三原色各自混合后分别形成了不同的色彩体系。

RGB模式:

R代表红色 G代表绿色 B代表蓝色三种色彩叠加形成了其它的色彩。因为三种颜色都有256个亮度水平级所以三种色彩叠加就形成1670万种颜色了通过它们足以再现绚丽的世界。就编辑图象而言 RGB色彩模式也是最佳的色彩模式 因为它可以提供全屏幕的24bit的色彩范围 即真彩色显示。

CMYK模式:

3

CMYK代表印刷上用的四种颜色 C代表青色 M代表洋红色 Y代表黄色 K代表黑色。因为在实际引用中青色、洋红色和黄色很难叠加形成真正的黑色最多不过是褐色而已。因此才引入了K——黑色。黑色的作用是强化暗调加深暗部色彩。 CMYK模式是最佳的打印模式 RGB模式尽管色彩多但不能完全打印出来。

可以先用RGB模式进行编辑工作再用CMYK模式进行打印工作在打印前才进行转换然后加入必要的色彩校正锐化和休整。

2.色彩的心理表现。

色彩具有精神的价值人们常常能感受到色彩对自己心理的影响这些影响总是在不知不觉中发挥作用影响我们的情绪。色彩的心理效应法是在不同层次中有些色彩对人有直接的刺激有些则需要通过间接的联想更高层次的则涉及人的观念与信仰。

3.色彩的表达感觉。

不同的色彩给人不同的心理暗示。对色彩的不同感觉和认知对色彩搭配所产生的心理联想会导致不同的心理反应。

空间感——色彩的空间感与色彩对比的知觉度有关对比度强和高纯度的色彩具有前进感对比度弱和低纯度色的色彩具有后退感。

色彩的空间感具体表现在利用色彩的明度对比层次、形与色的排列转折、大小弯曲等秩序节奏从而有意识地形成凹凸深远的空间感甚至利用人的错觉形成假象空间色彩的前进、后退感形成的距离措视原理、在网页中常被用来加强画面的空间层次。

亲切感——色彩的亲切感是指人对色彩的对比变化所产生的亲近的心理感觉。通常较为明快柔和的色彩都能使人产生亲切感色彩的纯度对比和明度对比较弱时也会使整体色调变得柔和、轻快。产生亲切感的网页一般采用同类色、类似色和邻近色。

使用具有亲切感的色彩可以用来表现家具网站、儿童网站和女性网站、服装网站及日用消费品网站等。

庄重感——通常 明度较低、纯度不高的色彩能给人以庄重感、常用的有黑、棕色、深蓝和褐色等。在使用时要注意搭配搭配不当则会产生沉闷、呆板的感觉。

神秘感——色彩的神秘感并不是色彩本身具有的而是人的联想所产生的心理感觉。一般能使人感到神秘的色彩多为明度较低、色相不明确、纯度也不高的色彩如昏黄的氛围、幽暗的巷子、夜晚的角落都可以用来营造色彩的神秘感。

4

兴奋和忧郁感——色彩和人的个性一样具有明朗与忧郁的区分。 明朗的色彩必然是明度高、对比较强的色彩 以及纯度偏纯的色彩忧郁的色彩则是明度低、对比较弱的色彩 以及纯度偏低且色性偏冷的色彩。