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

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

《毕业论文个人网页设计与制作.docx》由会员分享，可在线阅读，更多相关《毕业论文个人网页设计与制作.docx（44页珍藏版）》请在冰豆网上搜索。

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

个人网页设计与制作

摘要

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

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

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

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

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

知识。

第二章：

网页设计语言概述，本章主要介绍网页设计的语言—HTML，以及用于编辑HTML语言的软件。

第三章：

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

第四章：

内部对象系统的使用，本章主要介绍使用浏览器的内部对象系统，可实

现与HTML文档进行交互。

第五章：

WEB页面信息的交互—窗体与框架，

本章主要介绍实现网页的动态交互，必须掌握有关窗体对象（From）和

框架对象（Frames）更为复杂的知识。

关键词

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

Abstract

Webdesignastheextendingofuserinterfacedesigning,isinthenewmedia

andnewtechnologybranchtoachieveanewdesignfield,

ThispaperwillbeofpersonalwebpagedesignandmakingofthelanguageAndthestepsforstudyanddiscussion.Thisthesismainlyfollowswithchapters,chapterone:

introduction,thisChaptermainlyintroducestherelevantwebpagedesignknowledge.Thesecondchapter:

webpagedesignlanguage,thischapterintroducesthewebpagedesignlanguageHTML,andforeditingtheHTMLlanguagesoftware.Thethirdchapter:

object-orientedJavaScriptlanguage,thischaptermainlyintroducedtheobject-orientedJavaScriptcommonlyusedinternalobjectproperties.UsingthemethodofThefourthchapter:

theinternalobjectsystemsareused,thischapterintroducestheuseofbrowserinternalobjectsystem,canrealizeNowwiththeHTMLdocumenttointeract.Chapterfifth:

WEBpageinformationinteractiveformandframe,thischaptermainlyintroducestherealizationoftheinteractivedynamicwebpage,mustmastertheformobject（From）andframeobject（Frames）morecomplexknowledge.

Keyword

Webpagedesign;webpageproduction;websiteconstruction;HTML

第一章绪论…………………………………………………………………1

1.1网页的概述……………………………………………………………………11.2网页的要素……………………………………………………………….……….1

1.3制作步骤……………………………………………………………………………1

第二章网页设计语言概述…………………………………………………7

2.1HTML语言介绍…………………………………………………………………….7

2.2常用的HTML语言编辑软件………………………………………………………8

2.3本章小结………………………………………………………………………….12

第三章基于对象的JAVASCRIPT语言…………………………………….13

3.1对象的基础知…………………………………………………………………….13

3.2常用对象的属性和方法……………………………………………......................16

3.3本章小结………………………………………………………………………….22

第四章内部对象系统的使用…………………………………………….23

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

4.2文档对象功能及其作用……………………………………………………….23

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

第一章绪论

随着21世纪的到来，人们更深切地感受到计算机在生活和工作中的作用越来越

重要，越来越多的职业需要具有计算机的应用技能.掌握计算机是职业的需求，更是

事业发展的需要.网页设计与制作是计算机能力的具体表现，本章主要介绍网页设计

的相关知识.

1.1网页的概述

网页是用html语言编写的，通过www网传输，并被web浏览器翻译成可以显示出

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

1.2网页的要素

网页的基本要素一般包括：

文字，图像，动画和链接标志等，除此之外，网页的

元素还包括声音，多媒体和视频等。

1.2.1文本：

是网页中最基本的元素。

网页中文字的设计一般从以下几个方面来考

虑：

字体的选择；字号，行据的选择；特殊字体的使用；字体的颜色。

1.2.2图像：

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

1.2.3链接：

也叫超链接，是从一个网页指向另一个目的端的链接，是页面间的链

接关系。

超链接的标志一般有：

文本，图像，热区三种。

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

息的形式。

1.3网页制作步骤

网站是网页的集合，一个站点用的所有网页构成一个网站，网页是网站的表现形式，网页设计是指对网站整体页面的设计，包括页面风格、配色、布局、内容等。

网页设计包含的内容非常多，大体分为两个方面：

一方面是纯网站本身的设计，如文字、排版、图片制作、平面设计、静态图文和动态声音、影像等；另一方面是网站的延伸设计，包括网站主题、浏览群的定位、智能交互、制作策划、形象包装和宣传营销等。

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

1.草稿新页面就像一张白纸，没有任何的约定俗成的东西，可以尽可能地发挥想象力、创造力，将想象的布局到上面去。

这是原创阶段，你不必讲究细腻工整，你也可在草稿本上先画出整个布局框架，把多个版块的位置先粗略的布置上去以往下一步工作的展示，这一步也可以借住PHOTOSHOP或其他工具软件来完成。

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

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

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

1.3.1常用参数

图片质量与下载速度

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

1.分辨率

理解图像分辨率可以直接控制文件大小和下载速度，进而影响访问者的人数，创建WEB图片的要求是小、快、好。

显示器的分辨率起决定性的作用，大多数显示器使用的是1024*768的分辨率，因为要通过显示器页面，所以用高分辨率并不会增加图片质量相反还会降低图片的下载速度。

2.位图

习惯性称为图像，而将矢量图称为图形，位图是位映射图像的简称，也可叫栅格图。

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

3.矢量

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

放大位图会失真，但放大矢量图不会失真。

4.图片格式

制作好的效果图可以保存为各种格式，包括GIF格式，JPEG格式和PNG格式等各个图片格式之间的区别为：

GIF格式即图形交换格式；GIF格式的图片只能使用256种颜色，不适合显示色彩丰富的图像内容。

其特点是1.采用隔行扫描的显示方式；2.可以设置背景透明；3.可以制作简单的动画。

JPEG格式可以显示颜色复杂的图片，但是在处理大面积的颜色块时可能会出现明显的压缩痕迹。

PNG格式的图片兼有GIF和JPEG的优点

1.3.2网页布局

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

两栏式结构，即页面顶部为网站标志或广告条，下面分为左右两栏，一般左栏式导航或分类信息，右栏为主要内容，这种布局很容易掌握，但如果在色彩上不加以注意的，很容易给人一种“乏味”的感觉。

三栏式结构是一些大型网站常用的布局结构，一般为上面是横幅的广告条，下面分为三竖栏，中间较大，是主要的信息，左右是小条内容或者广告条。

三栏式给人一种充实的感觉，但页面拥挤，不够灵活，是网站常用的一种布局形式。

“三”型结构，这种结构多用于国外网站或者视频类网站，其特点是分类清晰，展示方便。

左右框架型，是企业网站或论坛常用的布局，页面分为左右两部分，左边一般为导航部分，右边是与导航相对应的内容。

左右框架型的结果非常清晰，内容一目了然，便于信息的查询。

上下框架型与左右框架型类似，其区别仅仅在于形式。

页面整体为横向分布，上面为导航，中间的大展式窗口很突出，整个网站显得简洁明亮，这种结构适合于信息量不大，主要靠图片展示内容的网站。

Flash型主要采用现在流行的Flash技术，页面表达的内容较为丰富，给人视觉和听觉上很大的冲击，处理得当会达到Web页面难以达到的效果。

1.3.3网页色彩

1.色彩模式。

在自然界看到的各种色彩都是由三种色光或三种颜色组成的，而他们本身不能再分拆出其他的颜色成分，所以称为三原色。

三原色分为光学三原色和物理三原色。

这两种三原色各自混合后，分别形成了不同的色彩体系。

RGB模式：

R代表红色，G代表绿色，B代表蓝色，三种色彩叠加形成了其它的色彩。

因为三种颜色都有256个亮度水平级，所以三种色彩叠加就形成1670万种颜色了，通过它们足以再现绚丽的世界。

就编辑图象而言，RGB色彩模式也是最佳的色彩模式，因为它可以提供全屏幕的24bit的色彩范围，即真彩色显示。

CMYK模式：

CMYK代表印刷上用的四种颜色，C代表青色，M代表洋红色，Y代表黄色，K代表黑色。

因为在实际引用中，青色、洋红色和黄色很难叠加形成真正的黑色，最多不过是褐色而已。

因此才引入了K——黑色。

黑色的作用是强化暗调，加深暗部色彩。

CMYK模式是最佳的打印模式，RGB模式尽管色彩多，但不能完全打印出来。

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

2.色彩的心理表现。

色彩具有精神的价值，人们常常能感受到色彩对自己心理的影响，这些影响总是在不知不觉中发挥作用，影响我们的情绪。

色彩的心理效应法是在不同层次中，有些色彩对人有直接的刺激，有些则需要通过间接的联想，更高层次的则涉及人的观念与信仰。

3.色彩的表达感觉。

不同的色彩给人不同的心理暗示。

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

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

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

亲切感——色彩的亲切感是指人对色彩的对比变化所产生的亲近的心理感觉。

通常较为明快柔和的色彩都能使人产生亲切感，色彩的纯度对比和明度对比较弱时，也会使整体色调变得柔和、轻快。

产生亲切感的网页一般采用同类色、类似色和邻近色。

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

庄重感——通常，明度较低、纯度不高的色彩能给人以庄重感、常用的有黑、棕色、深蓝和褐色等。

在使用时要注意搭配，搭配不当则会产生沉闷、呆板的感觉。

神秘感——色彩的神秘感，并不是色彩本身具有的，而是人的联想所产生的心理感觉。

一般能使人感到神秘的色彩，多为明度较低、色相不明确、纯度也不高的色彩，如昏黄的氛围、幽暗的巷子、夜晚的角落，都可以用来营造色彩的神秘感。

兴奋和忧郁感——色彩和人的个性一样，具有明朗与忧郁的区分。

明朗的色彩必然是明度高、对比较强的色彩，以及纯度偏纯的色彩，忧郁的色彩则是明度低、对比较弱的色彩，以及纯度偏低且色性偏冷的色彩。

一般来说，暖色较易引起心理的亢奋和积极性，属于兴奋色，其中朱红色最具兴奋作用，其他明度较高、纯度较高的颜色（如黄色、橘黄色等）也具有煽动性、倾向于兴奋色。

4.网页色彩的搭配。

将色彩具体到网页搭配中，应遵循一定的方法。

同色搭配，该方法采用一种颜色的深浅搭配，尽管网站设计要避免采用单一色彩，以免产生单调的感觉，但通过调整色彩的饱和度和透明度也可以产生变化，使网站避免单调。

邻近色搭配，使用在色带上相邻近的颜色，如绿色和蓝色、红色和黄色。

采用邻近色彩设计网页可以使网页避免色彩杂乱，易于达到页面的和谐统一。

对比色搭配，该方法使用两种完全不同的颜色搭配。

对比色可以突出重点，产生强烈的视觉效果。

通过合理使用对比色，能够使网站特色鲜明，重点突出。

在设计时一般以一种颜色为主色调，对比色作为点缀，起到画龙点睛的作用。

明度推移色彩搭配，有两种方法操作：

通过加入等量的白色，使一种颜色渐亮；或者通过加入等量的黑色，使颜色变暗。

这两种方法都可以产生色彩明度渐变的效果。

1.3.4细节的把握

网站的品位，除了页面本身整体的视觉效果外，往往更突出在一些细节上，只有把握住细节，才能更好地提高浏览者的使用友好度，给浏览者留下深刻的印象。

1． 颜色。

在初学网页设计的时候，在用色方面要非常注意，如果对网页用色没有太大的把握，那么就先选择好网页的基本色调，然后针对这一种颜色去进行变化，如需加其他颜色，可以试着加些灰色，因为灰色是中色调，不会对页面颜色造成太大的冲突。

这样做出的网页整体颜色会非常协调统一。

2．线条的运用。

很多朋友在制作网页的时候，在两块过渡的地方，如banner和导航条之间会用一条细线区分开，此时往往会画上一条直直的线，这样给人感觉会很突兀。

3．图标。

网站中在各个标题的前面适当的加些图标点缀网页，可以使网页效果更加出彩，但是切忌网页图标使用过多，图标的色调也要一致，避免杂乱。

4．文字。

网站中文字的运用，用户在浏览网页时，主要是要看网页当中的文字内容，所以要特别注意文字的处理。

一是文字的颜色不要和背景颜色相近，这样用户在浏览文字信息时会非常的吃力；二是不要乱用字体，你使用的字体在本机上可以显示，但是到了别人的电脑上就不一定能显示出来了；三是注意文字之间的行距，通常我们不对文字进行行距的设置时，文字间的行距会非常小；影响页面的美观度，注意文字间的行距，使其不会显得特别挤，做到宽松有序。

1.3.5常用工具介绍

用来制作效果图的软件并没有明确的规定。

可以使用各种图形制作软件和处理软件，现在通常使用的软件是PHOTOSHOOP和FIREWORKS。

在制作效果图时，使用的软件对最终结果并没有什么影响，用自己精通的即可。

Photoshop是一款非常好用的平面设计软件。

由Adobe公司开发设计，其用户界面易懂、功能完善、性能稳定，是比较专业的图像处理软件，它具有强大的滤镜功能。

所以，在很多的的广告、出版、软件公司，Photoshop都是首选的平面工具，它有很多的快捷方式，如抓手工具H键，TABLE键切换显示或隐藏所有的控制板，D键、X键迅速切换前景色和背景色等，灵活的运用快捷键，可以使设计的速度大大提高。

Fireworks是网页开发图形处理工具，可以做出矢量的图形，主要是和Dreamweaver配合做网页。

对处理一般的网页图片比较实用，而且学起来也比Photoshop易上手，是一个入门级的网页设计软件。

第二章网页设计语言概述

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。

一个HTML文件由一个HTML元素组成，即文件以开始。

以结束，文档中其他元素及其属性的声明都是HTML的元素体。

HTML元素的元素体和元素体由两大部分组成，即头元素…和体元素…。

头元素和体元素的元素体又由其他元素、文本和注释等组成。

一个标准的HTML文件应该具备如下结构：

标记一个HTML文件的开始

HTML文件的文件头部分开始

…文件头部分内容

HTML文件的文件头部分结束

HTML文件的文件体部分开始

…文件体

HTML文件的文件部分结束

标记该HTML文件结束

有些元素只能出现在头元素中，如meta、title等元素，而大多数的元素只能出现在体元素中。

在头元素中的元素表示的是该HTML文件的一般信息，比如该文件的标题、来源、作者、版本、字符集和关键字等，这些元素与书写的顺序无关，它们只是表明该HTML文件的属性值。

但出现在元素体中的元素则是要注意书写顺序的，改变了它们的书写顺序就会改变HTML文件在浏览器上输出的形式。

2.2常用的HTML语言编辑软件

2.2.1Dreamweaver

Dreamweaver是美国Adobe（原Macromedia，2005年被Adobe收购）公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。

它不仅是优秀的WYSIWYG编辑器，更是优秀的代码编辑器，有代码加亮，代码提示等丰富功能，提供各种示例代码，并支持Javascript,PHP,ASP,JSP等多种脚本语言。

最新版本为CS4，发布于2008年9月。

2.2.2ASP

ASP技术是Microsoft公司开发的一套全新的服务器端脚本程序环境。

它可以根据客户端的不同请求，在服务器端经过相应的ASP程序处理生成不同的静态HTML页面并穿回给浏览器。

ASP自身有很多优点，这些优点使它成为了当今世界网络上应用最多的脚本设计环境。

1、什么是ASP

ASP的全称是ActiveServerPages,中文名称叫做动态服务器网页，其功能在于可以使用它来开发运行在Windows服务器平台上的动态网页和网页。

尽管我们常把“ASP脚本”挂在嘴边，但ASP既不是一种编程语言，也不是开发工具软件，同样也不是一种应用程序，它实际上是一种开发动态网页的技术。

2、ASP的脚本语言

ASP的脚本语言可以是VBScript或者Jscript，也可以是两者的结合，所以任何一种文本编辑器都能编辑ASP脚本，当然不同的编辑器开发调试效率是不一样的。

和通常的VBScript和Jscript应用程序不同，ASP所有的程序都是在服务器端运行的，而不是在浏览器或者客户端执行的，这样用户就不必担心自己的浏览器能否运行所编写的ASP