网页设计规范标准

曼　呈　躅圆　网页设计中的细节与规范　文◎　曾勇赵侠（湖北工业大学工程技术学院）　摘要：本文主要讲述了网页设计中的一　些元素（模块）的具体细节，以及各部分元　素（模块）之间的关系。其中包括整个网页　的设计，版块的布局，基本模块（导航，内　容区域，底部），文字，以及网页上用到的　图片及表单等内容的细节与规范化问题。特　别强调的是网页上的留白，模块与模块之间　的间隙。阐述了一个优秀的网页应该具备哪　些规范。　关键词：网页设计：细节；规范　引言　随着网络时代的到来，人们越来越多的　信息是于网络上交流吸收。作为一种平面设　计与信息技术的结合延伸，网页设计也越来越　突显其重要性。一个好的网页设计可以给其　相关单位带来好的印象，带来一系列良性的发　展。而网页设计是通过视觉元素来实现信息　内容的传达，为了使网页获得最大的视觉传　达功能，使网络真正成为可读强性而且新颖　的媒体，网页的设计必须适应人们视觉流向　的心理和生理的特点，满足社会科技条件的　要求，因此网页设计中各种构成元素之间必须　有～定的关系和秩序，而相关的网页设计细　节与规范就显得尤为重要。　那么网页设计中的细节主要体现在哪些　地方呢？我们又该如何去把握这些细节呢？　一、页面基本属性的设计规范　网页设计的总体宽度，没有固定的局　限，但是有一些常规的尺寸可供参考。在　以前小屏幕小分辨率时代（ｗｉｎｄＯＷＳ　９５或　Ｗｉｎｄｏｗｓ　９８时代），大部分显示器的分辨率　都是８００ｘ６００，所以那时候，网页的常规尺寸　一般都是７７０像素至７８０像素之间，特别常用　的～种是７７８像素。为什么不直接使用显示器　的宽度８００像素来作为网页的宽度呢？因为浏　览器右边有…个２Ｏ像素的滚动条。随着网络　科技的发展，传统的网页宽度已经远远不能　适应现在的页面需求，我们早已越过８Ｏ０Ｘ　６００的时代，现在普及显示器的分辨率是１０２４　×７６８，甚至更大。那么，我们的网页宽度也　应该随之而加入，目前最常用的网页宽度是　９６０像素。　二、版块基本布局的设计细节与规范　网页布局大体是三大版块：顶部，内容　区域，底部。网页上每个版块之间的间隙也　有很严格的讲究，￣ｆｆＭＳＮ中国使用的横向间隙　是ｌ０像素，纵向间隙是８像素。无论是横向　间隙，还是纵向间隙，都必须统　，比如全　部用８像素，或者全部用ｌＯ像素，那么每个版　块之间的间隙就可以保持相等，这样页面看　起来才更加规范。这一点也是很容易被大多　网页设计人员所忽视的。另外，网页顶部与　底部的间隙应该比内容版块之间的间隙稍大　一些，这样使整个网页的结构看起来更加明　了。　同时，如果你的网页设计总体宽度是９３６　像素，那么它的内容区域最好为９３０像素，两　边都应该留有２～３像素的留白。页面上的留　白运用也是网页设计人员要注意的，特别是　网页的左右两侧，距离屏幕显示边缘一定要　留有一点余地，如果一个网页的上下左右四　边都跟浏览器边缘贴得紧紧的，那么这个网　页看起来一定不会舒服，感觉很“撑”，很　挤。　三、网页基本模块的设计细节与规范　１、标准导航及搜索区域细节与规范　无论是什么网站的导航页面部分，它　都有它的内容（一排文字链接）与它的背景　（一个区块）。我们这里要强调的是文字链　接部分，导航的文字链接内容在它的背景区　块里一定要是垂直居中的，而且，文字链接　的内容上面部分与下面部分一定要有留自，　不能紧贴着背景区块的项边与底边。这样才　能达到最佳的效果。至于留白的距离多少，　我国设计界目前没有具体的规定，只需要与　整体网页各个地方的留白大体保持一致既　可，不能相差太大。　另外，网页导航设计中很多设计师喜欢　用图片来替代文字链接，这对带宽及浏览者　来说是一种负担，考虑到服务器带宽的成本　和用户体验，以及商业网站对搜索引擎的友　好性，除非不得已要达到某种美观效果，一　般我们建议使用文字链接来制作导航。　门户站点页面的搜索区域一般分为三个　部分：选项框（可以供用户选择搜索文章或　图片等类别），文本输入框（输入搜索关键　词），搜索按钮。这三个部分放在一起，中　间产生两个间隙，这两个间隙必须相等。常　规来说都设置为６像素。如果整体页面布局比　较大气，可以设置１０像素的间隙。　２、标准底部细节与规范　网站底部是注明版权及～一些附加内容的　地方（如地址），大部分网页的底部文字都　是居中显示的，但是也有小部分是居左或者　居右，取决于设计师在决定底部文字的对齐　方式之后，对页面平衡感的检查，底部文字　的上部下部也要留白。部分网站为了方便用　户，在底部也加上了搜索区域。　３、内容区域细节与规范　网页内容区域一般包含模块框，栏目　标题与文字内容，内容区域上下左右四边的　留白要相等，包括内容图片四边的留白也一　样，图片内容包括３个部分：单一图片，图片　＋文字注释，还有图片组合。通过这些细节　的规范能够使网页在计算机上得到最佳的显　不。　４、文字属性细节与规范　在开始设计网页之前，文字属性就是　必须得考虑好的，比如页面上的常规文字大　小，以及用什么字体，还有文字的颜色，超　级链接文字的颜色等等……这都是文字属　性。这些东西定义好了，之后前端开发人员　进行编写ＣＳＳ样式的时候，才会有所依据。同　等级同重要性的文字大小等属性保持一致，　这也是我们在设计一个网页之前，需要遵守　的规范。具体举例来说，如常规内容字体大　小要保持一致，各栏目标题的字体与大小保　持一致等等。　还有英文字体，我们可以使用Ｔａｈｏｍａ　与Ａｒｉａｌ，国内部分设计师也比较喜欢用　Ｖｅｒｄａｎａ或者Ｌｕｃｉｄａ　Ｇｒａｎｄｅ（Ｍａｃ与Ｕｎｉｘ／　Ｌｉｎｕｘ系统下的一种系统字体）。当然，问题　的关键是，尽量使用电脑系统默认自带的字　体，不要用一些偏门的字体。　另外，网页上还有一些常见的符号及图　形元素，比如无序列表与有序列表前的符号　或者图形，也应该在设计之前构思好，同级　内容的这些元素要保持一致。　５、图片属性细节与规范　网页上的图片展示大体上有５种形式：　１．横图；２．竖图；３．方图：４．广告图片；　５．焦点图及Ｂａｎｎｅｒ。　对于图片的大小，没有明确的规定，因　为不同性质的网站，图片的大小是应该不一　样的。但是图片最好是遵守一些常规的宽高　比例。下面说说网页上这５中形式的图片的一　些常规宽高比例。　（１）横图：４：３，３：２，２：ｌ，１６：９　（２）竖图：３：４，２：３　（３）方图：１：ｌ　（４）广告图片是有一些常用尺寸的，　下面列出集中常见的广告图片尺寸（单位均　为像素）：３００ｘ　３００，３００ｘ　２５０，４６８×６Ｏ，　１２Ｏ×６０，７６０×９０　（５）焦点图的尺寸町自定义，但是最好　尽量遵循宽高ＬＬ／￣Ｕ４：３，Ｂａｎｎｅｒ的宽度不得超　过网页总宽度。　６、表单属性　基本的表单类型可分为６类：　（１）按钮：一般设置２Ｏ一３０像素。　（２）文本框：文本框的高度要与按钮的　高度保持一致，另外我们建议前端开发人员　在编写网页ＣＳＳ样式的时候，对文本框设置样　式ｐａｄｄｉｎｇ：２ｐｘ或者ｐａｄｄｉｎｇ：４ｐｘ，因为这　样一来，文本框内输入的文字就不会紧贴着　文本框的边缘了。　（３）文本区域：一样要注意，在输入文　字之后，文字与文本区域边缘的留白，考虑　到整体宽度和细节板块布局的协调性，一般　网页设计设置４像素或者６像素。　（４）文件域：文件域是由文本框与按钮　组合起来的区域，这个区域要注意的就是高　度的统一。　（５）复选框与单选框：这两个部分采用　浏览器默认样式即可，无需其他设置。　（６）列表菜单：样式也可保持默认样　式，留白最好跟文本框保持一致。　总之，表单中每个元素的样式及中间的　间隙和留白要尽量统一，这样整个页面才会　显得更加稳重。　四、结论　关于网页设计中细节和规范的把握，要　说的内容还很多，涉及到的东西也很多，比　如网页的色彩与重量感的平衡，网页中层次　的体验等等……这里就不一一阐述了。我们　需要掌握这些的目的只有‘一个，就是使我们　设计的网页更加出色，让用户看起来更加舒　服。细节决定一切１　

1 网页设计评分标准

学号 总分

总分

总分

序号 评分点 分值 计分标准 得分

第一部分 页面（15分）

1 文件操作 2 文件命名规范（0-2分），首页以default.html或index.html命名，否则0分。

2 布局

5 （1）结构清晰，布局合理、规范

（2）布局新颖，有创意

美观性

5 （1）文字清晰

（2）背景恰当、美观

（3）整体效果(字体大小、颜色搭配、动画在整个页面的效果等)

主题 3 各个页面均有主题

第二部分 层次（23分）

3

页面

6 （1）不同内容的页面不少于30页(页面没有完成或只有文字,该页不计在内) 0-3分

（2）层次清楚、合理（0-3分）

4

链接、导航

17 （1）首页有导航条，设置正确0-5分

（2）各个页面可直接回主页 0-5分

（3）各级分页面可以互相链接0-5分

（4）给首页加入水平线和版权信息0-2分

第三部分 图片（22分）

5

图片

22 （1）能正确显示图片(动态、静态)0-3分，一处不能正确显示扣1分，最多扣3分

（2）图片选择恰当，符合主题 0-3分

（3）主页有logo图片，鼠标悬停时有图片说明 0-4

（4）有自制图片(注意制作的技术难度和复杂程度,含背景图片) 0-4分

（5）有自制Flash动画(注意制作的技术难度和复杂程度) 0-4分

（6）图片以英文或数字命名0-4分，若有以中文命名的图片此项得0分

2 第四部分 技术（20分）

6 框架、层、表格

4 框架结构、层、表格的使用，能完整浏览网页内容 (含利用滚动条浏览) 0-4分

自制动态效果 8 （1）使用字幕、按钮、翻转、浮动图片、时间轴等单一技术手段制作动态效果4分，多一种效果加1分。

（2）动态效果使页面重点突出，且无杂乱感

0-3分

CSS样式 3 合理使用CSS样式 0-3分

一、 页面信息规范

1、页面命名

每个页面都要有与之模块对应的名称。

2、页面兼容性

（1）页面大小兼容

o 自适应1366*768px及以上的分辨率

o

默认窗口设置下，不应出现水平滚动条，避免出现垂直滚动条（当内容过多时允许滚动条）

（2）弹窗、弹页要保证768高度的分辨率显示正常，同时能移动查看弹出框内容。弹出框高度为不超过450px，且显示在内容页面相对水平、垂直相对居中位置。

（3）浏览器兼容

兼容Chrome、Firefox、Safari、IE8及以上主流浏览器。

o 文字

文字用系统自带的常规字体，且分一级标题、二级标题、主内容文字、次内容文字、辅助文字（说明或引导性文字，提醒性文字），分别用不同的字号、颜色。具体字号大小和颜色参考UI设计效果图。

o 内容图片

内容图片均带1px描边；内容图片未加载出来时显示系统默认图片。 二、 信息交互规范

1、数据操作

显示数据（表格）

（1）表头：字体加粗、且比单无格内容字体大一号，且体字体大小参照UI效果图。

（2）单无格：文字图片内容左对齐，数字、金额内容右对齐。

（3）操作内容原则上均用文字表达，如“编辑-删除”

（4）鼠标划过表格单行时，颜色高亮。

（5）原则上每页显示15-20条数据，实际显示条数据可按设计排列效果而定。

（6）表格中不定长的字段，固定显示宽度，超出内容用“…”显示光标停留后，在浮动层显示详细内容。

选中数据

（1）勾选全选则选中当页所有记录

（2）去掉当页某个记录的勾选，则全选也去掉勾选。

（3）翻页后，自动去掉已勾选的记录及全选的勾选。

（4）翻页后是否进行选择记录的保留应试具体业务而定。

（5）刷新页面后，自动去掉已勾选的记录及全选的勾选。 新增数据

（1）新增的记录必须排在新增页的首行；

（2）所有列表页面默认按数据新增时间倒序排列。

（3）提交失败后留在当前提交页，且保存用户已经输入的内容以便再次提交。

网页设计的标准与规范

网页设计的标准与规范

网页设计的工作目标，是通过使用更合理的颜色、字体、图片、样式进行页面设计美化，在功能限定的情况下，尽可能给予用户完美的视觉体验。高级的网页设计甚至会考虑到通过声光、交互等来实现更好的视听感受。网页设计的标准和规范是什么呢?以下是店铺整理的相关内容，欢迎阅读!

基本内容

网络上的变革每天都在发生，当我们觉得网站设计技术已经非常简单和熟悉的时候。国外网站设计标准化的概念早已悄悄的形成和迅速“蔓延”，自2000年起，大部分新发行的浏览器版本都开始支持网站标准。主流的网页编辑工具也开始全面支持网站标准，甚至一些软件几乎完全由XML文件组成，例如Dreamweaver MX。一些著名的大型商业网站开始采用网站标准来重新构建另外一些则拒绝非标准浏览器浏览它们的网站众多的设计网站和个人网站更是标准推广的先行者，纷纷转向采用XHTML+CSS来建立。2004年2月4日XML1.1推荐标准正式发布，标志着网站设计的标准时代已经到来。

一.为什么要建立网站标准

我们大部分人都有深刻体验，每当主流浏览器版本的升级，我们刚建立的网站就可能变得过时，我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的“浏览器大战”，为了兼容Netscape和IE，网站不得不为这两种浏览器写不同的代码。同样的，每当新的`网络技术和交互设备的出现，我们也需要制作一个新版本来支持这种新技术或新设备，例如支持手机上网的WAP技术。类似的问题举不胜举：网站代码臃肿、繁杂浪费了我们大量的带宽;针对某种浏览器的DHTML特效，屏蔽了部分潜在的客户;不易用的代码，残障人士无法浏览网站等等。这是一种恶性循环，是一种巨大的浪费。

如何解决这些问题呢?有识之士早已开始思考，需要建立一种普遍认同的标准来结束这种无序和混乱。商业公司(Netscape、Microsoft等)也终于认识到统一标准的好处，因此在W3C()的组织下，网站标准开始被建立(1998年2月10日发布XML1.0为标志)，并在网站标准组织()的督促下推广执行。