【网页设计规范】网页设计规范尺寸

摘 要

随着网络的快速发展，互联网的应用越来越贴近生活，越来越多的人假如到了

制作网页的工作中，各式各样的网站如雨后春笋般出现在互联网上。网络技术的发

展带动了软件业的发展，所以用于制作Web页面的工具软件也越来越丰富。从最基

本的HTML编辑器到现在非常流行的Flash互动网页制作工具，各种各样的Web页

面制作工具，而吸引浏览用户的则是视觉效果出色、信息量丰富、使用起来便捷的

网页，所以网页设计尤为重要。互联网成为人们快速获取、发布和传递信息的重要

渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。网页设计伴随着

网络的快速发展而快速兴起，作为上网的主要依托，由于人们使用网络的频繁而变

得非常的重要。网页讲究的是排版布局，其功能主要就是提供一种形式给每个上网

者，让他们能够了解网站提供的信息。

关键字：网页设计，基本构成，注意事项，FRONNPATE

Abstract

groups with the rapid development of the network, the application of the Internet

more and more close to the life, more and more people to make a web page work if,

various web sites springing up appeared on the Internet. The development of Internet

technology driven the development of the software industry, so used to make Web page

tool software is also more and more colorful. From the most basic HTML editor to now

very popular Flash interactive Web page creation tools, various Web page making tools,

and attract users powse the visual effect is excellent, rich information, use rise

convenient Web page, so Web design is especially important. The Internet become people

to quickly get, distribution and transfer information important channel, it people in

politics, economy, life and other aspects played an important role. Web design with the

rapid development of network and rapid rise, as the main rely on the Internet, because

people use the Internet frequent and become very important. Web cultured is typesetting

layout, its main function is to provide a form for each user, to let them know the

information provided on this site.

Keywords: SITE DESIGN，CONSIDERATIONS，BASIC FORM，FRONNPATE

目 录

第一章 网页的相关概念..................................................................................................1

1.1 什么是网页...................................................................................................1

1.2 网页的构成...................................................................................................1

1.3 常见的网页版式类型...................................................................................2

第二章 常用的制作工具..................................................................................................3

2.1 Macromedia公司出品的Flash互动网页制作工具 ....................................3

2.2 Macromedia Dreamweaver 8 .........................................................................3

2.3 HTML编辑器 ...............................................................................................3

2.4 网页编辑器...................................................................................................3

第三章 网页设计的要素................................................................................................4

3.1 关于文字.......................................................................................................4

3.2 图片要素.......................................................................................................4

3.3 排列方法要素...............................................................................................4

3.4 色彩要素.......................................................................................................5

第四章 网页设计的技巧................................................................................................6

4.1 框架的使用...................................................................................................6

4.2 颜色的搭配...................................................................................................6

4.3 CSS样式的使用 ...........................................................................................7

第五章 网页的注意事项....................................................................................................8

5.1 网页内容要新颖...........................................................................................8

5.2 网页的布局...................................................................................................8

5.3 整体归纳.......................................................................................................9

第六章 总 结................................................................................................................10

致 谢................................................................................................................................ 11

参考文献............................................................................................................................12

第一章 网页的相关概念

1.1 什么是网页

网页(Web Page)其实就是一个用来传输各种信息的文件，它能在网上传输并被浏览器识别和翻译成页面，然后显示在计算机屏幕上。简单的说，通过浏览器在WWW上所看到的每一幅画面都是一个网页。网页是网络上的基本文档。网页中包含文字，图片，声音，动画，影像以及链接等元素，通过对这些元素的有机组合，构成了包含各种信息的网页。其中，文字是网页中最常用的元素。图片可以给人以生动直观的视觉印象，适当运用图片可以美化网页。链接的设计，可以使我们进行选择性的浏览。声音，动画等多媒体信息的加入，使网页内容更加丰富多彩。

1.2 网页的构成

不同性质的网站，构成网页的基本元素是不同的，一般情况下，网页的构成包括网页标题，网页标志，横幅广告，导航栏，主内容区，页脚版权信息等。

1.网页标题

网站中的每一个页面都有标题，用来提示该页面的主要内容。标题出现在浏览器的标题栏中，而不是出现在页面布局中。它的一个比较重要的作用就是引导访问者清楚的知道所要浏览的网页的内容。

2.网页标志

网页标志是一个站点的象征，也是一个站点是否正规的标志之一。一个好的标志可以很好的树立形象。网页标志一般放在网站的左上角，访问者一眼就能看到它。

3.横幅广告

横幅广告（Banner）是互联网广告中最基本的广告形式。Banner可以位于网页顶部，中部或底部的任意一处，一般横向贯穿整个或者大半个页面。

4.网页导航栏

导航栏既是网页设计中的重要部分，又是整个网站设计中较为独立的部分。一般来说，网站中的导航栏在各个页面中出现的位置是比较固定，而且风格也较为一致。

5.主内容区

网页的主内容区是网页的主要内容显示区域。

6.页脚版权信息

页脚是放置网站版权信息的地方，可以放置一些联系方式或其他的导航栏目。

1.3 常见的网页版式类型

网页内容在页面上有规则的排列布置，就称为网页的排版。网页版式类型就是各种不同排版方式的组合。网页的版式是可以随心所欲设计的。一般可以分为满版型，左中右型和上左中右型。

第二章 常用的制作工具

2.1 Macromedia公司出品的Flash互动网页制作工具

这是是一款功能非常强大的交互式矢量多媒体网页制作工具。能够轻松输出各种各样的动画网页，它不需要特别繁杂的操作，也比JAVA小巧精悍！但它的动画效果、互动效果、多媒体效果十分出色。并且由于Flash编制的网页文件比普通网页文件要小得多，所以加快了浏览速度。这是一款十分适合动态Web制作的工具。

2.2 Macromedia Dreamweaver 8

Macromedia Dreamweaver 8是一款专业的网页设计软件，它采用所见即所得的编辑方式，用于对Web站点，Web页和Web应用程序进行设计，编码和开发，利用它可以轻而易举的制作出充满动感的网页。利用Dreamweaver 8的可视化编辑功能，用户可以快速创建Web页面而无需编写任何代码，用户可以查看所有站点元素或资源并将它们从易于使用的面板直接拖到文档中。

2.3 HTML编辑器

虽然HTML代码复杂，编辑和调试要花费大量的时间，但因HTML的稳定性、广泛支持性及可创建复杂的页面效果，仍受高级网页制作人员的青睐。就目前来说，有众多的编辑器供选择，这些编辑器广泛支持复杂页面创建及高级HTML规范。

2.4 网页编辑器

其中以Microsoft Frontpage为代表，它具有如Word一样的操作界面，熟知Word功能的操作者，只要稍加培训就能轻松编制网页。而且，Frontpage还能解析网页的HTML源代码，并提供了预览支持。但Frontpage的一些特殊显示功能并不能在其它非IE浏览器下实现。所以Frontpage是一款非常适合初、中级网页制作人员使用的工具软件。

第三章 网页设计的要素

3.1 关于文字

文字是美好事物最基本的方式，在网页中，文本内容也是最重要的组成部分，最美观，最整齐的方式放入到网页中，才能构成一个美观的页面。有的设计者想通过闪烁的文字来引起访问者的注意是可以被人理解的，但一个页面中最多不能有三处闪烁文字，太多了给用户一种眼花缭乱的感觉，反而会影响用户去访问该网站的其他内容，正所谓“物极必反”也。

虽然你可以在你的HTML中使用特殊的字体，但是，你不可能预测你的访问者在他们的计算机上将看到什么。在你的计算机里看起来相当好的页面，在另一个不同的平台上看起来可能非常糟糕。一些网站设计员喜欢使用来定义特性，这虽然允许你使用特殊的字体，但是仍需要一些变通的方法，以免你所选择的字体在访问者的计算机上不能显示。所以用普通的文字进行制作是最保险也是最方便的。

3.2 图片要素

要设计出漂亮的主页，首先要成为计算机图形高手，仅这一点就可以让初学者花上一年半载的时间。图片的要求与页面的内容有关，一些较随意的主页像股票、医药站点等，来访者并不在乎你能否做出精彩的图片，有些时候他们反而觉得放置图象后影响了访问速度，他们关心的只是页面内容；相反像一些需要靠图象来吸引访客的主页，如游戏介绍、影视介绍、风光名胜等站点，图象是一个极为重要的要素，在这里缺少了恰当的图象，整个页面就会黯然失色、就是一个不完整的主页。这需要去学习像photoshop这样的图形图像处理软件，还要有一定的美术基础，如审美观、创意技巧等。如果给每个图形加上文字的说明，在出现之前就可以看到相关内容，尤其是导航按钮和大图片更应如此。这样一来，用户在访问你的站点时就有一种亲切感觉，认为你心细，比较善解人意，时时刻刻为他人着想，相信你的好心会有好报的。

3.3 排列方法要素

主页的第二个要素是排列方法，即网页布局。网页作为一种版面，既有文字，

又有图片；文字有大有小，还有标题和正文之分；图片页有大小而且有横竖之别。图片和文字都需要同时展示给观众，不能简单地将其罗列在一个页面上，否则会搞得杂乱无章。关于具体的网页布局，常见的有“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型等，关于它们，在网页设计的相关书籍中或者在网络上都可以看到详细的叙述。比如如果内容非常多，就要考虑用“国字型”或拐角型；而如果内容不算太多而一些说明性的东西比较多，则可以考虑标题正文型；而如果是一个企业网站想展示一下企业形象或个人主页想展示个人风采，封面性是首选；Flash型更灵活一些，好的Flash大大丰富了网页，但是它不能表达过多的文字信息。还没有提到的就是变化型了，只有不断的变化才会提高，才会不断丰富我们的网页。

3.4 色彩要素

色彩在网页所占比重很大。有了合理清新的色调，会弥补主页上的其它不足。页面的色彩搭配是与网站的主题分不开的，一个网站必须有一种或两种主题色。不至于让浏览者迷失方向，也不至于单调乏味。一般来说，页面的主体文字应尽量使用黑色等较深的颜色，与背景对比明显，按钮、边框等使用彩色。例如教育类网站使用蓝色为主题色，再用红色和黑色作为配色，就能表达出严肃、稳重的效果。

第四章 网页设计的技巧

4.1 框架的使用

框架（FRAME）是Web上经常会看到的页面结构。框架的最常见用途就是导航。一组框架通常包括一个含有导航条的框架和另一个要显示主要内容页面的框架。

使用框架具有以下优点：访问者的浏览器不需要为每个页面重新加载与导航相关的图形；每个框架都具有自己的滚动条(如果内容太大，在窗口中显示不下)，因此访问者可以独立滚动这些框架。例如，当框架中的内容页面较长时，如果导航条位于不同的框架中，那么向下滚动到页面底部的访问者就不需要再滚动回顶部来使用导航条。

使用框架具有以下缺点：可能难以实现不同框架中各元素的精确图形对齐；对导航进行测试可能很耗时间。

许多专业 Web 设计人员不喜欢使用框架，并且许多浏览 Web 的人也不喜欢框架。在大多数情况下，这种反感是因为遇到了那些使用框架效果不佳或不必要地使用框架的站点(例如，每当访问者单击导航按钮时就重新加载导航框架内容的框架集)。如果框架使用得法(例如，在允许其他框架的内容发生更改的同时，使一个框架中的导航控件保持静态)，则这些框架对于某些站点可能非常有用。

4.2 颜色的搭配

做网页的初学者可能习惯使用一些漂亮的图片作为自己网页的背景，但是浏览了一下大型的商业网站，你会发现他们更多运用的是白色，蓝色，黄色等，使得网页显得很典雅温馨。我们可以使用一些简单的配色技巧来使我们的网页看起来美观大方。

1.用一种色彩

这就是指先选定某一种色彩，然后通过讲色彩变浅或者加深的方法以产生新的色彩，这样会让人看起来比较统一。例如以咖啡色为基调，整体上的色彩都以咖啡色为主，给人的视觉效果是一种古朴的气息迎面扑来。

2.用黑色和一种彩色

一般来说，网页的背景色应该柔和、淡素一些，再配上深色的文字，使人看起

来自然、舒畅。而为了追求醒目的视觉效果，可以为标题使用较深的颜色。例如以黑色为底色，衬以亮黄色，这样配出来的效果会让人感觉别具一格。

3.用两种色彩

可以先选择一种色彩，然后再选择其对比色，这样选出的色彩丰富但不杂乱。例如以橙色和蓝色相结合作为主色彩的网页，通过橙色和蓝色在网页上的对比能迅速传达网站主题内容，容易增添强烈的兴奋度，多用于内容是食品、休闲娱乐、产品等的网站。

4.3 CSS样式的使用

CSS(层叠样式表)是一种制作网页的新技术,它的全称是级联样式表,即Cascading StyleSheets的缩写，又称之为风格样式表单。CSS是在网页制作过程中普遍用到的技术。采用了CSS技术控制的网页，设计者会更轻松、有效地对页面的整体布局、颜色、字体、链接、背景以及同一页面的不同部分、不同页面的外观和格式等效果实现更加精确地控制。

第五章 网页的注意事项

5.1 网页内容要新颖

1.网页内容的选择要不落俗套，要重点突出一个“新”字，这个原则要求我们在设计网站内容时不能照抄别人的内容，要结合自身的实际情况创作出一个独一无二的网站。 放眼望去，网上的许多个人主页简直就是"杂货店"，内容包罗万象题材千篇一律，人人都是"软件下载"个个都有"网络导航"，从头到尾找不出一丝“鲜”意。所以，我们在设计网页时，要把功夫下在选材上。选材要尽量做到“少”而“精”又必须突出“新”，如能坚持天天更新的话我相信这样的网页一定会受到大家的欢迎。

2.网页制作好后，不能说万事大吉了，其实事后的工作量更大。因为网页制作是一时的，而维护更新的工作是每天都要做的。要及时把网页上已经作废的连接应该立即删除掉，比如用户无意中点击了页面中的一个连接，在苦苦的等待之后，换来的是无法访问的结果，那么他们会对你的网页大失所望，可能以后再也不会光顾你的网页了。若不能及时更新，也最好在主页上发布信息，告诉前来访问的朋友，因有特殊情况需要离开一段时间，未能及时更新主页，希望各位见谅，这样就能给人一种对别人负责的感觉，同时能得到网友的信任。

5.2 网页的布局

1.善用表格布局。不要把一个网站的内容象作报告似的一二三四地罗列出来，要注意多用表格把网站内容的层次性和空间性突出显示出来，使人一眼就能看出你的网站重点突出，结构分明。

2.注意视觉效果。设计Web页面时，一定要用640×480和800×600的分辨率来 分别观察。许多浏览器使用640×480的分辨率，尽管在800×600高分辨率下一 些Web页面看上去很具吸引力，但在640×480的模式下可能会黯然失色。作一点小小的努力，设计一个在不同分辨率下都能正常显示的网页。

3.少放网站地图。许多设计者把他们的网站地图放在网站上，这种做法，却是弊大于利。绝大部分的访问者上网是寻找一些特别的信息，他们对于你的网站是如何工作的，并没有兴趣。如果你觉得你的网站需要地图，那很可能是需要改进你的导航和工具条。

5.3 整体归纳

1.内容要通俗易懂。网站设计最重要的诀窍，恐怕就是你的网页要易读 。这就意味着&def你必须花点心思来规划文字与背景颜色的搭配方案。 注意不要使背景的颜色冲淡了文字的视觉效果，别用花里胡哨的色彩组合，让人看起来你的网页来很费劲。一般来说，浅色背景下的深色文字为佳 。这个要点要求你最好别把文字的规格设得太小、也不能太大。文字太小，人家读起来难受；文字太大，或者文字视觉效果变化频繁，像是冲着人大喊大叫，看起来不舒服。另外，最好让文本左对齐，而不是居中。按当代中文的阅读习惯，文本大都居左的。当然，标题一般应该居中，因为这符合读者的阅读习惯。

2.多学习使用HTML。为了成功地设计网站，你必须理解HTML是如何工作的。大多数的网站设计者建议网络新手应从有关HTML的书中去寻找答案，用Notepad制作网页。因为用HTML设计网站，可以控制设计的整个过程。但是，如果你仅仅是网站设计的新手，你应该寻找一个允许修改HTML的软件包。HomeSite4是一个很好的Web设计工具。在设计过程中，HomeSite4能帮助你学习HTML。它还允许你切换到所见即所得的模式，以便你在把网站发送到Web之前，预览你的网站。

3.少用Java程序。不要使用大幅面的Java程序&def能够用javascript替代效果的则尽量不要使用java.因为目前来讲java的运行速度实在慢的让人无法忍受，往往使浏览者没有耐心等页面全部显示出来，这样你的精心设计便毫无效果啦。

第六章 总 结

网络技术的发展带动了软件业的发展，所以用于制作Web页面的工具软件也越来越丰富。从最基本的HTML编辑器到现在非常流行的Flash互动网页制作工具，各种各样的Web页面制作工具。

当你在INTERNET这个信息的海洋中尽情遨游时，会发现许许多多内容丰富、创意新颖、设计独特的个人网页，不知道你见到这样漂亮可人的网页是否有点心动。一旦你具备了上网的条件，又萌发了制作主页的念头，那么就应该注意网页设计时应考虑哪些方面的问题，包括网站功能和以及访问者需要什么。你的整个设计都应该围绕这些方面来进行。

在一个网站中，最重要的页面当属主页，所以在此以主页为例，说明在网页制作中版面设计的问题。从版面设计来讲,一个有特色的主页,必须包含有四个要素：文字，图片，排列方式和主色调，这四者相辅相成，缺一不可。

致 谢

对于本次毕业设计，我付出了很大的努力才完成。同时也体会到了收获的喜悦。 当然，设计的很大的一部分是得到了秦洪涛老师的大力支持与指导，秦老师认真负责的工作态度，严谨的治学精神和深厚的理论水平都使我受益匪浅。他无论在理论上还是在实践中，都给予我很大的帮助，使我得到不少的提高，这对于我以后的工作和学习都有很大的帮助，感谢他耐心的辅导。

同时也感谢所有帮助我修改论文的同学们，感谢他们的帮助与支持。

参考文献

[1]《中国 档案管理精览》，北京：中国档案出版社，2009．

[2] 沈庆伟，张霖．基于隧道的IPV4/IPV6过渡技术分析[J]．计算机技术与发展，2008

[3]中文Access 2000 24学时教程 作者：Craig Eddy ，Timothy Buchanan出版社：机械工业出版社

[4]刘韬,骆娟等.Visual Basic 实效编程百例（第二版）.人民邮电出版社，2009.8

[5]李维.面向对象开发实践之路（visual basic 6.0版）(BORLAND资深顾问著名visual basic 6.0专家李维最新力作).电子工业出版社，2009.4

[6]KAYEYAMA M. Incompatible displacement methods[A].SPRIET JA.Numerical anComputational Methods

[7]in Structural Mechanics[C].New York:Academic Press,2007.43-57.