网页

原图链接来自红动中国网

网页(英語: Web page )，是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，您的网站就是由网页组成的，如果您只有域名和虚拟主机而没有制作任何网页的话，您的客户仍旧无法访问您的网站。

网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一“页”，是超文本标记语言格式（标准通用标记语言的一个应用，文件扩展名为.html或.htm）。网页通常用图像档来提供图画。网页要通过网页浏览器来阅读。

目录

主流代码布局

原来是以表格来定位，现在是 DIV（区）+CSS（0.0）。

构成

文字与图片是构成一个网页的两个最基本的元素。你可以简单地理解为：文字，就是网页的内容。图片，就是网页的美观。除此之外，网页的元素还包括动画、音乐、程序等等。

在网页上点击鼠标右键，选择菜单中的 “查看源文件” ，就可以通过记事本看到网页的实际内容。可以看到网页实际上只是一个纯文本文件。它通过各式各样的标记对页面上的文字、图片、表格、声音等元素进行描述（例如字体、颜色、大小），而浏览器则对这些标记进行解释并生成页面，于是就得到你现在所看到的画面。 为什么在源文件看不到任何图片？ 网页文件中存放的只是图片的链接位置，而图片文件与网页文件是互相独立存放的，甚至可以不在同一台计算机上。

网页通常有以下元素：
文字资料图像档案Applet（在页面内执行的副程式）超链结网页的合成体为网站，一个网站的开始点为首页。

记录功能

当你每次上网时，都会在历史记录里留下记录，并且被保存在浏览器的缓存文件夹里，删除时只要右键删除就可以了。

网页游戏

从08年开始，国内网页游戏开始不断兴起，网页游戏（Webgame）又称Web游戏，无端网游，简称页游。网页游戏也是需要重视水平的，如音效的筛选、恰到好处的乐曲与音效搭配、以及良好的结构平台等等，有了这些元素，才能做出一个好的网页游戏，同时也会引来更多的浏览人数。网页游戏的出现让中国进入了一个新的网络游戏平台，也进入了一个页游发展的竞争时代。

元素

感知信息 文本：文本是网页上最重要的信息载体和交流工具，网页中的主要信息一般都以文本形式为主。

图像：图像元素在网页中具有提供信息并展示直观形象的作用。

静态图像：在页面中可能是光栅图形或矢量图形。通常为GIF，JPEG或PNG；或矢量格式，如SVG或Flash。

动画图像：通常动画为GIF和SVG。

三、Flash动画：动画在网页中的作用是有效地吸引访问者更多的注意。

四、声音：声音是多媒体和视频网页重要的组成部分。

五、视频：视频文件的采用是网页效果更加精彩且富有动感。

六、表格：表格是在网页中用来控制面业信息的布局方式。

七、导航栏：导航栏在网页中是一组超链接，其连接的目的端是网页中重要的页面。

八、交互式表单：表单在网页中通常用来联系数据库并接受访问用户在浏览器端输入的数据。利用服务器的数据库为客户端与服务器端提供更多的互动。

互动媒体

页面上的：

交互式文本：DHTML。

互动插图：例如“点击此处玩耍该游戏”。

超链接：超链接是从一个网页指向另一个目的端的链接，超链界的目的端可以是网页，也可以是图片、电子邮件地址、文件和程序等。（标准的“换页”反应。分为URL、URI、URN）。

内部信息

一、通过超链接链接到某文件（如DOC，习，SGML等）。

二、元数据与语义的元信息，字符集信息，文件类型描述（DTD），等等。

三、样式信息：提供的项目的信息（如图像大小属性）和视觉规范，层叠样式表（CSS）、文档样式的语义和规范语言（外语全称：Document Style Semantics and Specification Language、外语缩写：DSSSL）。

四、脚本，通常是爪哇脚本（JavaScript），提供交互性以及相关功能的补充（比如倒计时关闭窗口等）。

网页还包含动态适应的信息元素，取决于某某渲染浏览器或最终用户的位置。（通过使用IP地址跟踪和/或“cookie”的信息）。从更一般/宽的角度来看，一些信息（分组）的元素，像一个导航栏，所有的网页是统一的，像一个标准，比如“网页模板系统”。

分类

静态页

静态网页，其内容是预先确定的，并存储在Web服务器或者本地计算机/服务器之上。

特点：

制作速度快，成本低。

模板一旦确定下来，不容易修改，更新比较费时费事。

常用于制作一些固定板式的页面。

通常用于文本和图像组成，常用于子页面的内容介绍。

对服务器性能要求较低，但对存储压力相对较大。

动态页

动态网页，是取决于由用户提供的参数，并根据存储在数据库中的网站上的数据中创建的页面。

通俗地讲，静态页是照片，每个人看都是一样的，而动态页则是镜子，不同的人（不同的参数）看都不相同。

设计要点

网页设计的两大要点是：整体风格和色彩搭配。

整体风格

网站的整体风格及其创意设计是最难以学习的，难就难在没有一个固定的模式可以参照和模仿。给你一个主题，任何两人都不可能设计出完全一样的网站。

风格（style）是抽象的。是指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI（标志、色彩、字体、标语）、版面布局、浏览方式、交互性、文字、语气、内容价值、存在意义、站点荣誉等等诸多因素。举个例子：我们觉得网易是平易近人的，迪斯尼是生动活泼的。IBM是专业严肃的，这些都是网站给人们留下的不同感受。

在这里，一些参考经验：
将你的标志，尽可能的放在每个页面上最突出的位置。

突出你的标准色彩。

总结一句能反映贵站精髓的宣传标语！

相同类型的图像采用相同效果，比如说标题字都采用阴影效果，那么在网站中出现的所有标题字的阴影效果的设置应该是完全一致的！

色彩搭配

无论是平面设计，还是网页设计，色彩永远是最重要的一环。当我们距离显示屏较远的时候，我们看到的不是优美的版式或者是美丽的图片，而是网页的色彩。

关于色彩的原理有许多，在此我们不可能一一阐述，大家可以看看相关设计书籍，有利于系统地理解。在此我们仅仅想告诉大家一些网页配色时的小技巧。

用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感。

用两种色彩。先选定一种色彩，然后选择它的对比色。

用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。

在网页配色中，还要切记一些误区：

不要将所有颜色都用到，尽量控制在三至五种色彩以内。

背景和前文的对比尽量要大（绝对不要用花纹繁复的图案作背景），以便突出主要文字内容。

排版问题

字间距太挤或太宽。

行距太小或太大。

段距太少或太多。

每行字数太多或太少。

设计工具

一、Amaya（单位：万维网联盟）用于编辑HTML、CSS、数学标记语言、可缩放矢量图形的工具

二、Dreamweaver（单位：奥多比）用于编辑HTML、ASP、JSP、PHP的辅助工具

三、Frontpage（单位：微软）跟Dreamweaver一样。

四、FLASH（单位：奥多比）网页需要画面流动（动画）时的首选择。

五、PhotoShop（单位：奥多比）图象处理软件，一般网页都需要有图片的相搭配，PhotoShop是款很强大的工具。

六、FireWorks（单位：奥多比）跟PhotoShop一样都是图象处理软件，但FireWorks偏向与对网页的处理。Fireworks主要用于制做动态图片格式。

七、StylePix（单位：Hornil）跟PhotoShop一样都是图象处理软件，可以处理光栅及矢量图形。

可用性提升

权威研究结果表明：人们在线的阅读习惯和平时的阅读习惯是完全不一样的。访问者通常是在非常随意的状态下快速浏览你的网页的，他们急于获取真实的、实用的，并且是有价值的信息。如果他们不能及时地获取所需信息，那么，他们将离开你的网页。

下面的3点方法将会给你带来帮助，它会让你为你的访问者提供所需信息，指出提升网页可用性的方法。

一、精简的文本描述

你所写的文章必须围绕一个主题，这可以方便访问者快速获取主旨信息和中心思想。好好想想如何把文章改得精简得体以便于访问者阅读。这里告诉你一个可行的办法，尽量把一段文章在3-4行之内叙述完整，然后再另起一行写下面一段。

二、便于快速浏览的文本

网络用户一般不会在线精读文本内容，他们通常是快速浏览。因此，应该尽量使用简短、醒目的文本。举个例子来说，可以通过超链接的形式将重要的信息从页面中分离出来，这样做会使得这段重要信息显得非常醒目。将一个段落以重点列表的形式表示也是一种非常可行的方法。学会在你的重点词组前方加一个起强调作用的圆点。还有一点，学会在页面中使用副标题 ，当你浏览网页时，将重点挑选出来，并将它们写在标题标签内，“标题2”和“标题3”的效果最好，但是“标题1”标签的效果也会相当不错，这样做会可以给整个页面的信息分出层次，以帮助阅读者在简单地浏览页面之后快速地获取所需信息。

三、必须要客观公正

这里要提到的“客观公正”指的是：在你的网页上放上与你网页内容相关的链接，让访问者做出自由的选择：是继续留在你的网页上，还是去别的网页上寻找信息。这对于你——网页的所有者来说，并不是一件坏事。因为你可以为访问者指明确切的方向。好好按照上面说的把你的网页改进一下。我相信，网页的可用性一定会大大提升；同时，你的访问者也会非常感激你，并且会很愿意与你进行往来。

设计师速成

循序渐进学知识

先学一学HTML，找本自己能看懂的教材。浏览为主，然后学CSS，进而再了解一下JavaScript。 然后就可以用记事本尝试写几个网页，记住这时千万不要用那些可视化工具，比如Amaya、FrontPage、Dreamweaver（那些以后再学）。

有一个提高自己“写网页”的捷径，就是上各大网站，模仿他们的写法，不断规范自己的代码。 接下来学一下Fireworks。学Fireworks主要是学图片处理，还有切图。 元素 一、文本：文本是网页上最重要的信息载体与交流工具，网页中的主要信息一般都以文本形式为主。

二、图像：图像元素在网页中具有提供信息并展示直观形象的作用。

静态图像。在页面中可能是光栅图形或矢量图形。通常为GIF，JPEG或PNG；或矢量格式，如SVG或Flash。

使用脚本

ASP全名Active Server Pages（活性服务器页面），是一个WEB服务器端的开发环境。利用它可以产生和执行动态的、互动的、高性能的WEB服务应用程序。ASP采用脚本语言VBScript（Java script）作为自己的开发语言。

PHP是一种跨平台的服务器端的嵌入式脚本语言。它大量地借用C,Java和Perl语言的语法，并耦合PHP自己的特性，使WEB开发者能够快速地写出动态产生页面。

JSP是Sun公司推出的新一代网站开发语言，Sun公司借助自己在Java上的不凡造诣，将Java从Java应用程序和Java Applet（爪哇小程序）之外，又有新的硕果，就是JSP（爪哇服务器页面）。JSP可以在Serverlet和JavaBean的支持下，完成功能强大的站点程序。

WebDNA是一个服务器端的脚本，解释型的语言且带一个嵌入式数据库系统，专门设计用于万维网发布的一个免费的（FastCGI的版本）。基于标签与上下文。

.NET 是 Microsoft XML Web services 平台。XML Web services 允许应用程序通过 Internet 进行通讯和共享数据，而不管所采用的是哪种操作系统、设备或编程语言。Microsoft .NET 平台提供创建 XML Web services 并将这些服务集成在一起之所需。对个人用户的好处是无缝的、吸引人的体验。

设计原则

关于网站

所谓网站（Website），就是指在网际网路（因特网）上，根据一定的规则，使用HTML等工具制作的用於展示特定内容的相关网页的集合。简单地说，网站是一种通讯工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯（信息），或者利用网站来提供相关的网路服务（网络服务）。人们可以通过网页浏览器来访问网站，获取自己需要的资讯（信息）或者享受网路服务。

在你眼前，出现在显示器上的这个“东西”，就是一个网页。网页实际是一个文件，它存放在世界某个角落的的某一台计算机中，而这台计算机必须是与互联网相连的。网页经由网址（URL）来识别与存取，当我们在浏览器输入网址后，经过一段复杂而又快速的程序。网页文件会被传送到你的计算机，然后再通过浏览器解释网页的内容，再展示到你的眼前。

站点主页成分

Web站点主页应具备的基本成分包括：

页头：准确无误地标识你的站点和企业标志；

Email地址：用来接收用户垂询；

联系信息：如普通邮件地址或电话；

版权信息：声明版权所有者等。

充分利用已有信息，如客户手册、公共关系文档、技术手册和数据库等。

要素

设计一个网站，应该考虑下列九条基本因素，这些因素对网站的成功与否有着重要影响。

1. 整体布局

网站主页就好像是宣传栏或者店面——对访问者产生第一印象，都希望尽量给人留下好的印象，不是吗？

一般来说，好的网站应该给人有这样的感觉：

干净整洁

条理清楚

专业水准

引人入胜

网页应该力求抓住而不是淹没浏览者的注意力，过多的闪烁、色彩、下拉菜单框、图片等会让访问者无所适从——离开是最好的选择。就像一些商店，播放震耳欲聋的发烧音乐，你要做的唯一决定就是离开那里，越快越好。

2. 信息
无论商业站点还是个人主页，你必须给人们提供有一定价值的内容才能留住访问者。因为我们人类总是惟利是图，第一个问题总是：“对我有什么用处？” 所以你必须提供某些有价值的东西，当然并不是说必须提供某些免费的物品——免费书籍、免费入场券、免费度假等，这些“有价值的东西”可以是： 信息；

娱乐；

劝告；

对一些问题的帮助；

提供志趣相投者联络的机会；

链接到有用的网页，等等。

如果你经营的是企业网站，需要提供关于产品或服务的信息：

容易理解；

容易查询；

容易订货。

3. 速度
我们都知道，页面下载速度是网站留住访问者的关键因素。如果20—30秒还不能打开一个网页，一般人就会没有耐心。至少应该确保主页速度尽可能快，最好不要用大的图片。 应该时时提醒自己，网站首页就像一个广告牌。当开车经过一个广告牌时，没有时间阅读上面的详细说明，也不可能赞赏其复杂的图案，广告标志从眼前一闪而过，必须在一瞬间给人留下印象。 网上访问者也是“一闪而过”，保证你的首页简单而快速。网上有许多关于如何增加速度的文章——检查下载速度，放弃一切显著减慢主页速度的资料。

4. 图形和版面设计
图形和版面设计关系到对主页的第一印象，图象应集中反映主页所期望传达的主要信息。

如果有系列商业站点，你不必让过分显眼的动画出现在首页——但如果你的网站是游戏站点，动画将是必不可少的一部分内容。

图片是影响网页下载速度的重要原因，根据经验。把每页全部内容控制在30K左右可以保证比较理想的下载时间，图象在6—8K之间为宜，每增加2K会延长1秒钟的下载时间。

颜色也是影响网页的重要因素，不同的颜色对人的感觉有不同的影响，例如：

红色和橙色使人兴奋并使得心跳加速；

黄色使人联想到阳光，是一种快活的颜色；

考虑到你希望对浏览者产生什么影响，请为网页选择合适的颜色。

阅读西方格式文本时，眼睛从左上方开始。逐行浏览到达右下方，插入图象时不要忘记这种特性。任何具有方向性的图片应该放置在网页中对眼睛最重要的地方，如果在左上角放置一幅小鸟的图片，鸟嘴应该放在把浏览者目光引向页面中部的地方，而不是把视线引走。

这种思路可以用于所有图片：

面部应该“看”网页的中部；

汽车的“停靠”面向网页中部；

道路、领带等等图片的放置都应该在有助于吸引目光从左向右、从上向下移动。

一般总是把网站导航条放置在页面左边，也是出于这种考虑——不断地出现在浏览者的视野之中。

5. 文字的可读性
我们仍然用广告牌的比喻来说明，文字要在广告牌上突出，周围应该留有足够的空间。也许你曾到过一些网站，要么拥挤不堪的文字觉得好像只有把脑袋钻进去才能阅读，要么深色的背景给人的感觉好象处于非常狭窄的空间里，而且让人的心情感觉很压抑。某些背景色的令人阅读困难；紫色、橙色和红色让人眼花缭乱。

文字的颜色也很重要，不同的浏览器有不同的显示效果，有些在你的浏览器上很漂亮的颜色在其他浏览器上可能无法显示。

参考报纸的编排方式，为方便或快速阅读将你的内容分栏设计，甚至两栏也要比一满页的视觉效果要好。

另一种能够提高文字可读性的因素是你所选择的字体，通用的字体（Arial, Times New Roman, Garamond and Courier）最易阅读，特殊字体用于标题效果较好，但是不适合正文（试想浏览整页的 Gothic, Script, Westminster, or Cloister会是怎样的感受）。因为阅读费力，你的眼睛很快就会疲劳，不得不转移到其他页面。

6. 网页标题的可读性
必须尽量使你的网页易于阅读，除了分栏之外（将页面纵向分割），也需要利用标题和副标题将文档分段。

为所有标题和副标题设置同一字体，并将标题字体加大一号，所有标题和副标题都采用粗体，这样便于识别标题（字体加大加粗）和副标题（粗体，与正文字体大小相同），使浏览者一眼就可以看到要点，以便找出并继续阅读有兴趣的内容。标题的重要性可见一斑，要认真写好每个标题！ 也可以将整句采用粗体或用不同的颜色突出某些内容，不过不要用难以阅读的颜色。

7. 导航
由于人们习惯于从左到右、从上到下阅读，所以主要的导航条应放置在页面左边，对于较长页面来说，在最底部设置一个简单导航也很有必要（只要两项就够了：主页|页面顶部）。 确定一种你满意的模式之后，最好将这种模式应用到同一网站的每个页面，这样，浏览者就知道如何寻找信息。

8. 保护个人信息声明和客户推荐信
对于商业网站来讲，最重要的事情之一是确保潜在客户的信心，你应该明确地告诉人们，如何对其兴趣、爱好，尤其个人隐私保密，很有必要专门用一个页面详细陈述你的保护个人信息声明，包括对访问者的email地址保密、如何接受定单、如何汇总信息、汇总这些信息的目的、谁可以看到这些信息等基本内容。

访问者也想知道你的产品或服务现有客户的反映，所以如果能引用与你关系融洽的客户对你的积极评价，对你的可信度将很有帮助。

不要害怕向顾客索取推荐信——人们都愿意自己的意见有价值。

你可以把客户的推荐信另设计为一个网页，作为对客户提供推荐信的回报，在这里链接到客户的网站——这也是一种“双赢”。

9. 词语
一个网站如果只有漂亮的外观而词语错误连篇、语法混乱，同样是失败的，对于网站所有者和负责人将产生很坏的影响，人们会用许多贬义词来评价你：粗心大意、懒惰、外行、没水平等等。

你愿意把自己辛苦挣来的钱花在一个连自己的网站都马马虎虎的人吗？

你可以按照上述步骤改进你的网站制作技巧；

你可以请人对你的工作进行校对、编辑；

你也可以请人为你制作网页；

总之，上述步骤在很多方面对你会有所帮助，不要因为对某些步骤的疏忽而影响你的网站的整体效果。

类型

1、电子商务类网站

电子商务类网站分为B2B(商家对商家)和B2C(商家对个人)两种，这种是以网上销售为主要盈利手段的网站。

2、主题性网站

这种主题性网站是主要提供有共同的兴趣爱好的人一起去分享和观看的网站。

3、个人性网站

这种网站主要是突出自己鲜明的个性的网站，比如个人微博、博客、论坛等等。 布局=== 1. 图片与文字的协调性
一个完美的网页布局会给人一种和平舒畅的心情，它不仅仅是表现在文字的表达程度，更多的表现在图片与文字的协调性。

2. 视觉上的对比性
通过不同的色彩、不同的图形进行对比，在视觉上形成视觉的冲击，同时在图形也要形成对比，只有这样才能让人们过目不忘。

3. 有松有驰
网页制作上也要讲究有松有驰，不要整个网页都是一种样式，要适当进行留白，运用空格或是改变字体之间的间距，从而达到不一样的变化效果。

网页储存

当要将网页存入自己的电脑内，网页浏览器通常提供以下的选择：

只储存网页的文字部分完装封装，即连同该网页（HTML）所要用到的图像、Applet和JavaScript等文件也一并封装储存只有HTML，不作任何改动；若果网页内的连结是相对连结，可能会令图片消失只有HTML，但将网页内连结到的文件改成绝对定义有些网页浏览器容许在打印网页前预览，并可选择印底色与否，甚至放大、缩小。

网页尺寸

从2003年到2008年，网页的平均尺寸从93.7K增至312K；网页中的平均对象数量从25.7个增长到49.9个。而随着宽带的普及，页面响应速度从2006年2月的2.8秒降低到了2008年2月的2.33秒。