| 网页设计规范及脚本语言规范 | (微笑)
提高网页设计制作效果,加快信息化建设工作,网页设计制作规范化是一项很重要的工作,以下网页设计制作规范以供大家参考。
一、运行环境
1 ．网页制作软件平台：
网页制作可采用 D reamWeaver X.0/ FrontPage 98 (2000)/ FireWorks X.0 / HotDog X.0/ Office 97(2000) 等编辑软件,建议采用 DreamWeaver 4.0 以上版本。
2 ．网络浏览软件：
浏览软件建议采用 Netscape, Internet Explorer 4.0 及以上版本。
3 ．网页适用的屏幕大小：
制作网页时,显示器的分辨率设置可以为 800*600 或 1024×768 。
二、主页连接方式
1 ．主页制作完成后,经部门领导审查同意后（信息安全性由信息提供部门负责）,向公司业务及信息中心提出挂接申请。
2 ．信息中心根据实际需求和可提供服务的能力,在主服务器上开设虚拟 WWW 目录。
3 ．公司主页由技术总监负责统一管理,由网页设计制作中心统一维护,各页信息由信息部门定期提供。
4 ．与公司有关主页的链接统一管理。
5 ．由网页设计制作中心定期向用户通知网页连接情况。
三、制作主页的要求
1 ．制作主页时,不要使用 ShareBorder ,此项功能和计数器由网页组来统一负责添加设置。
2 ．网页制作允许使用 JAVASCRIPT 或 VBSCRIPT 语言, JAVA 、 CGI 、 PEEL 等设计工具。
3 ．所有的图片最好都放置在 IMAGE 目录下,以便于管理和维护。
4 ．指定专人负责主页的制作、维护,同时对信息的安全性、正确性和准确性进行负责。
5 ．技术中心定期进行制作网页的技术培训。
另外,对于一个商业信息网站的总体的规范,也是相当重要,归纳为以下几点：
一 . 导航规范
* 每一个页面都出现的固定信息
* 内容包括：首页,网站介绍,网站地图,联系方式,反馈,搜索工具,常见问题解答,实际内容栏目 ( 包括相关站点链接、新闻页 )
* 栏目如果采用图标 , 下面应附有文字说明,以避免图像表达不清。
* 无任何链接内容的不做成按钮的形式
* 纯文本 like 用常用颜色。避免在链接处使用特殊的颜色。应该使用标准、
醒目的颜色。
* 每个页面都应包括 : 版权及网站管理员的 E-mail 地址
** 每个页面都应包括代表 " 返回 " 或 " 前进 " 的箭头。
二 . 网站框架
1. 网站介绍
* 背景介绍
* 栏目介绍（提供连接）
2. SITE MAP （站点结构图）
* 结构图（提供连接）
3. CONTACT PAGE （联系方式页）
* 网站管理员的 E-mail 地址（根据需要加入其它职能负责的 E-mail ）
* 通信地址,联系人,传真、电话号码等。
4. FEEDBACK FORMS （反馈表） Reasons :
* 姓名：
* 性别：
* 职业：
* 单位地址：
* 联系方式：
* 意见建议：
（根据实际就以上各项作调整,力求简洁有效）
5. 实际内容,及栏目设置要求
* 在每页中都要包含相关的,引人入胜的内容。特别是当你要销售一种产
品的时候,每个页面都要用详细的内容和图像精心修饰一番。
* 网页上的语言尽量通俗易懂。
* 用符号突出特别重要的内容,不要过多,保持页面的简洁。
* 不要把你的站点建成单纯的网上公司介绍,适当发布行业信息。
6. FAQs （常见问题解答）
* 将所有问题列于页面的上部,并将每个问题与答案链接在一起。
* 对专业用语及技术术语进行解释。
* 回答共性问题节省网管和访问者的时间和精力。
7. SEARCHING MECHANISMS （搜索工具）
* 在搜索框中键入关键词语或词组,在点击查寻按钮后,本站
相关的网页列表就会出现在屏幕中。
* 有效查寻的说明。
8. 新闻
* 在最新更新的信息边加注一个亮丽的小图标 --" 新！ " 。
* 为最新消息创建单独页面,并在一段时间后将新闻放置于适当的目录下。
* 在主页或每个页面下加注一行文字,表明本站点或每个单独的页面最近
一次被更新的时间。
9. RELEVANT LINKS （相关站点链接）
* 提供其它网站链接,以提供更多相关信息。
* 每个链接做简要说明,并对它被链接的原因进行阐述。
* 每周对各链接站点作定期的访问,删除那些死站点。
** 为你的站点创建纯文本的版本。
三 . VI 标准化要求
* logo 及中英文标准字体 ( 包括应用范例 )
* 网站标准色 ( 包含扩展范例 )
* 链接图标 ( 尺寸 pixels: 88x31\468x60 ) 各两个 ( 包括应用范例 )
四 . 网页制作技术要求
* 主要页面要写 <title>( 主页要写上企业中英文名称 )
* 主要页面 <meta> 字段便于搜索引擎查找。
* <img> 的长宽值和 alt 属性 , 使不能看图的用户也可以读懂页面。
* 以最流行的浏览器的最普及版本为标准,同时照顾低版本浏览器。
为不同的浏览器分别制作不同的页面,以获得尽可能多的浏览量。
* 尽量使用广泛支持的技术。页面适应不同的屏幕分辨率。
* 不使用过小的字体
不使用过大的图片、动画、声音
不使用过长的滚屏
其中各具体规范如下：
网络 LOGO 的规范
设计 LOGO 时,面向应用的各种条件作出相应规范,对指导网站的整体建设有着极现实的意义。具体须规范 LOGO 的标准色、设计可能被应用的恰当的背景配色体系、反白、在清晰表现 LOGO 的前提下制订 LOGO 最小的显示尺寸,为 LOGO 制订一些特定条件下的配色,辅助色带等方便在制作 BANNER 等场合的应用。另外应注意文字与图案边缘应清晰,字与图案不宜相交叠。另外还可考虑 LOGO 竖排效果,考虑作为背景时的排列方式等。
一个网络 LOGO 不应只考虑在设计师高分辨屏幕上的显示效果,应该考虑到网站整体发展到一个高度时相应推广活动所要求的效果,使其在应用于各种媒体时,也能发挥充分的视觉效果；同时应使用能够给予多数观众好感而受欢迎的造型。
所以应考虑到 LOGO 在传真、报纸、杂志等纸介质上的单色效果、反白效果、在织物上的纺织效果、在车体上的油漆效果,制作徽章时的金属效果、墙面立体的造型效果等。
网络图形的规范：
1、在同一张网页中,不应有超出三幅以上的动画闪动。(友情链接广告除外)
2、尽量少使用大图片,图形大于100K时,必须采用缩略图,用点击放大方式制作。
3、一页网页的在56K调制解调器完全显示的等待时间不得大于30S。
4、为减少图形文件大小,图形颜色丰富（>128色）时使用JPG格式(JPG压缩比为6),颜色单调（<128色）时使用GIF格式。
5、一张网页放置多幅图片时,图形排列要整齐,横排的图形高度要一致,竖排的图形宽度要一致。
6、网页使用图片时,应有说明性的文字,以便图片未显示时供浏览者阅读。
7、图形中文字内容正确无误、文字清晰。
8、图形与网页背景必须完全融合。（必要时可考虑采用WEB安全色。）
9、图形创意美观、和谐,符合客户企业文化。
网络文字与表格的规范：
10、 处理网页中的文字,禁止直接复制粘贴WORD中的文字,应将文字粘贴至记事本后再使用。用户无特殊要求时,一般汉字采用宋体,英文数字采用Arial,日文采用MS明朝。
11、 处理网页中的表格,禁止直接复制粘贴WORD中的表格,应在网页制作软件中制作表格。在空的单元格中,应插入一些与网页背景颜色相同的点,使表格在浏览器显示比较美观。
12、 网站的所有网页风格要一致（包括文字大小、框架、色彩等）,网页背景色一定要定义。
13、 必须使用CSS样式表来定义整个网站文字风格。
14、 文字正确无误,段落层次清晰,中文段落首行缩进二个汉字或直接采用方便浏览直接用文字左对齐方式。
网络兼容性：
15、 网页设计时要考虑到IE和Netscape浏览器的兼容性。国内用户可先优考虑IE浏览器,美国、日本用户 必须使两种浏览器均能正确浏览。
16、 网页设计时要考虑到不同语言环境的兼容性,正确设置语言属性。
17、 兼顾桌面分辨率800×600、1024×768下的显示效果。
18、 在主页中尽量少使用滚动条,网页中禁止出现横向滚动条。
网络标识：
19、 每张网页上都清晰明了地显示出客户公司的名称及产品图形。
20、 每张网页的标题要清晰。推荐使用“欢迎光临××公司网站”字样,禁止出现“New Page”或“Untitled Document”字样。
21、 网页版权信息清晰明了。主页版权信息推荐使用下列格式：
Best viewed with IE4.0, Resolution: 800×600.
Copyright?001 ××××××,All right reserved.
Designed by amayonline.
如果有需要采用中文推荐使用下列格式：
建议使用 800×600屏幕分辨率和IE4.0以上版本浏览器浏览本站
版权所有: ××××××××××××××××公司 网站制作维护：AMAY
注：版权信息均使用小字体（ 9pt）,××××××为客户公司名称、公司英文名称较长时可采用域名（xxx.com）代替。AMAYONLINE超链至http://amayonline.myrice.com。“Best viewed with 800×600”、“建议使用800×600屏幕分辨率”在网页只适用于800×600时使用。网页只适用于1024×768时作相应修正。在网页只适用于IE时使用必须加上“IE4.0”字样。
22、 未完成网页一律采用“网页正在建设中……”或“The Homepage is building……”字样,并加注网页版权信息。
网站结构：
23、 确保电子邮箱的超级链接正确无误。
24、 文档间的超级链接必须使用相对路径、各超级链接正确无误。
25、 网页的文件名命名规范,必须使用英文小写字母、数字或下划线。
26、 网页存放文件夹必须清晰,网站根目录文件只放置index.htm或index.asp,HTML文件与图形文件应分开存放。各种语言版本的文件也应分开存放。如有特效情况,必须在readme.txt文件中说明。
总 论
本规范既是一个开发规范,也是一个脚本语言参考,本规范并不是一个一成不变的必须严格遵守的条文,特殊情况下要灵活运用,做一定的变通。但是,请大家千万不要随意更改规范。如果有任何问题,请及时与我联系,我会及时更改本规范的相关代码样例和文档。
基 本 要 求
1. 在网站根目录中开设 images common temp 三个子目录,根据需要再开设 media 子目录, images 目录中放不同栏目的页面都要用到的公共图片,例如公司的标志、 banner 条、菜单、按钮等等； common 子目录中放 css 、 js, 、 php 、 include 等公共文件； temp 子目录放客户提供的各种文字图片等等原始资料； media 子目录中放 flash, avi, quick time 等多媒体文件 。
2. 在根目录中原则上应该按照首页的栏目结构,给每一个栏目开设一个目录,根据需要在每一个栏目的目录中开设一个 images 和 media 的子目录用以放置此栏目专有的图片和多媒体文件,如果这个栏目的内容特别多,又分出很多下级栏目,可以相应的再开设其他目录。
3. temp 目录中的文件往往会比较多,建议以时间为名称开设目录,将客户陆续提供的资料归类整理。
4. 除非有特殊情况,目录、文件的名称全部用小写英文字母、数字、下划线的组合,其中不得包含汉字、空格和特殊字符；目录的命名请尽量以英文为指导,不到万不得已不要以拼音作为目录名称,经验证明,用拼音命名的目录往往连一个月后的自己都看不懂,
脚 本 编 写
我们应该有一个脚本整体风格一致的概念,意思是一个月后和一个月前的你写的脚本风格保持一致,以及同一个工作组中不同的开发人员编写的脚本风格保持一致,因为我们不可能永远孤立的开发,你随时都有可能和三个月前的自己合作（你的客户要求改版）,也经常要和工作室中不同的同事共同开发一个项目,还有可能被要求修改已经离职人员开发的脚本,当然你自己也有可能会扔下一个项目给后来的同事。
1. Html 文件的通用模板：
<html>
<!--
Generator: Sub Design Studio ( http://www.eastline.net.cn)
Creation Data: 2000-8-1
Original Author: eastline
-->
<head>
<title> 文档标题 </title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<meta name="author" content="eastline">
其他 meta 标 记
<link rel="stylesheet" type="text/css" href="style/style.css">
样式表定义
客户端 Javascript 函数定义及初始化操作
</head>
<body bgcolor="#ffffff">
… …
</body>
补充：
为了保证网站能够与下一代的 web 语言 xml 标准兼容,所有的 HTML 标签的属性都要用单引号或者双引号括起,即我们应该写 <a href= ” url ” > 而不 是 <a href=url>.
2. 允许全文检索的页面,为了使 Internet 上的搜索引擎能够有效检索,在频道的首页的 html 的 <head></head> 之间应该加入 Keywords 和 Description 元标记,例如 ：
<meta name= ” keywords ” content= ”东方新干线,汽车,买车” >
<meta name= ” description ” content= ”东方新干劲线,全球中文汽车信息第一站” >
. CSS 文件的格式样例代码 ：
<style type="text/css">
<! —
p { text-indent: 2em; }
body { font-family: " 宋体 "; font-size: 9pt; color: #000000; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px}
table { font-family: " 宋体 "; font-size: 9pt; line-height: 20px; color: #000000}
a:link { font-size: 9pt; color: #FFFFFF; text-decoration: none}
a:visited { font-size: 9pt; color: #99FFFF; text-decoration: none}
a:hover { font-size: 9pt; color: #FF9900; text-decoration: none}
a:active { font-size: 9pt; color: #FF9900; text-decoration: none}
a.1:link { font-size: 9pt; color: #3366cc; text-decoration: none}
a.1:visited { font-size: 9pt; color: #3366cc; text-decoration: none}
a.1:hover { font-size: 9pt; color: #FF9900; text-decoration: none}
a.1:active { font-size: 9pt; color: #FF9922; text-decoration: none}
.blue { font-family: " 宋体 "; font-size: 10.5pt; line-height: 20px; color: #0099FF; letter-spacing: 5em}
-->
</style>
这里尤其要注意的是 a:link a:visited a:hover a:actived 的排列顺序一定要严格照上面的样例代码,否则或多或少会出问题。另外我们规定重定义的最先,伪类其次,自定义最后,便于自己和他人阅读！
为了保证不同浏览器上字号保持一致,字号建议用点数 pt 和像素 px 来定义, pt 一般使用中文宋体的 9pt 和 11pt , px 一般使用中文宋体 12px 和 14.7px 这是经过优化的字号,黑体字或者宋体字加粗时,一般选用 11pt 和 14.7px 的字号比较合适。
在写 <table> 互相嵌套时,严格按照的规范,对于单独的一个 <table> 来说, <table><tr> 对齐, <td> 缩进两个半角空格, <td> 中如果还有嵌套的表格, <table> 也缩进两个半角空格,如果 <td> 中没有任何嵌套的表格, </td> 结束标记应该与 <td> 处于同一行,不要换行,
如我们注意在源代码中不应有这样的代码：
<td><img src= ” ../images/sample.gif ” >
</td>
而应该是这样的：
<td><img src= ” ../images/sample.gif ” ></td>
这是因为浏览器认为换行相当于一个半角空格,以上不规范的写法相当于无意中增加一个半角空格,如果确实有必要增加一个半角空格,也应该这样写：
<td><img src= ” ../images/sample.gif ” > </td>
属于同一个级别 的 <table> 一定是左首对齐的,另外不允许没有任何内容的空的单元格存在,高度大于等于 12px 的单元格应该 在 <td> 和 </td> 之间写一 个 如果高度小于 12px, 则应该 在 <td> 和 </td> 之间插入一个 1*1 大小的透明的 gif 图片,这是因为某些浏览器认为空单元格非法而不会予以解释。如果代码顺序较乱,在 DW3 中可以通过 command->apply souce formatting 进行重新整理！
5. Width 和 height 的写法也有统一的规范,一般情况下只有一列的表格, width 写在 <table> 的标签内,只有一行的表格, height 写在 <table> 的标签内,多行多列的表格, width 和 height 写在第一行或者第一列的 <td> 标签内。总之遵循一条原则：不出现多于一个的控制同一个单元格大小的 height 和 width, 保证任何一个 width 和 height 都是有效的,也就是你改动代码中任何一个 width 和 height 的数值,都应该在浏览器中看到变化。做到这一条不容易,需要较长时间的练习和思考。
一 般 原 则
1. 在排布表格之前,请大家一定要好好思考一个最佳的方案,表格的嵌套尽量控制在三层以内,并且应该尽量避免 <colspan> <rowspan> 两个标记,经验表明,这两个标记会带来许多麻烦。
2. 一个网页要尽量避免用整个一张大表格,所有的内容都嵌套在这个大表格之内,因为浏览器在解释页面的元素时,是以表格为单位逐一显示,如果一张网页是嵌套在一个大表格之内,那么很可能造成的后果就是,当浏览者敲入网址,他要先面对一片空白很长时间,然后所有的网页内容同时出现。如果必须这样做,请使用 <tbody> 标记,以便能够使这个大表格分块显示。
3. 排版中我们经常会遇到需要进行首行缩进的处理,不要使用 或者全角空格来达到效果,规范的做法是在样式表中定义 p { text-indent: 2em; } 然后给每一段加上 <p> 标记,注意,一般情况下,请不要省略 </p> 结束标记 。
4. 原则上,我们禁止用 <img width=? height=?> 来人为干预图片显示的尺寸,而且建议 <img> 标签中不要带上 width 和 height 两个属性,这是因为制作过程中,图片往往需要反复的修改,这样可以避免人为干预图片显示的尺寸,尽可能的发挥浏览器自身的功能；但是这样的一个副作用是当网页还未加载图片时,不会留出图片的站位大小,可能会造成网页在加载过程中抖动（如果图片是插在一个固定大小的表格里的,不会有这个现象）,尤其是当图片的尺寸较大时,这种现象会很明显,所以当预料到这种会明显导致网页抖动的情况会发生时,请大家务必在最后给 <img> 附上 width 和 height 属性。
5. 为了最大程度的发挥浏览器自动排版的功能,在一段完整的文字中请尽量不要使用 <br> 来人工干预分段。
6. 不同语种的文字之间应该有一个半角空格,但避头的符号之前和避尾的符号之后除外汉字之间的标点要用全角标点,英文字母和数字周围的括号应该使用半角括号。
7. 所有的字号都应该用样式表来实现,禁止在页面中出现 <font size=?> 标记。
8. 请不要在网页中连续出现多于一个 的 也尽量少使用全角空格（英文字符集下,全角空格会变成乱码）,空白应该尽量使用 text-indent, padding, margin, hspace, vspace 以及透明的 gif 图片来实现。
9. 中英文混排时,我们尽可能的将英文和数字定义为 verdana 和 arial 两种字体。
10. 行距建议用百分比来定义,常用的两个行距的值是 line-height:120%/150%.
11. 网站中的路径全部采用相对路径,一般链接到某一目录下的缺省文件的链接路径不必写全名,如我们不必这样： <a href= ” aboutus/index.htm ” > 而应该这样： <a href= ” aboutus/ ” >
12 、嵌入图形文本的使用较大的字体,建议不要在图形中包括文本。
13 、“网页大小”定义为网页的所有文件大小的总和,包括 HTML 文件和所有的嵌入的对象。用户喜欢快的而不是新奇的站点。对于解调器用户,网页大小保持在 34K 以下为合适。
文 件 命 名 原 则
1. 每一个目录中应该包含一个缺省的 html 文件,文件名统一用 index.htm
2 ． 件名称统一用小写的英文字母、数字和下划线的组合。
3. 命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义,二是当我们在文件夹中使用“按名称排例”的命令时,同一种大类的文件能够排列在一起,以便我们查找、修改、替换、计算负载量等等操作 。
4. 下面以“新闻”（包含“国内新闻”和“国际新闻”）这个栏目来说明 html 文件的命名原则
☆ 在根目录下开设 news 目 录
☆ 第一条缺省新闻取名 index.htm
☆ 所有属于“国内新闻”的新闻依次取名为： china_1.htm, china_2.htm, …
☆ 所有属于“国际新闻”的新闻依次取名为： internation_1.htm, internation _2.htm, …
☆ 如果文件的数量是两位数,请将前九个文件命名为： china_01.htm, china_02.htm 以保证所有的文件能够在文件夹中正确排序。
5. 图片的命名原则遵循以下几条规范 ：
☆ 名称分为头尾两两部分,用下划线隔开。
☆ 头部分表示此图片的大类性质,例如广告、标志、菜单、按钮等等 。
☆ 一般来说 :
放置在页面顶部的广告、装饰图案等长方形的图片我们取名： banner
标志性的图片我们取名为： logo
在页面上位置不固定并且带有链接的小图片我们取名为 button
在页面上某一个位置连续出现,性质相同的链接栏目的图片我们取名： menu
装饰用的照片我们取名： pic
不带链接表示标题的图片我们取名： title
依照此原则类推。
☆ 尾部分用来表示图片的具体含义。
☆ 下面是几个样例,大家应该能够一眼看明白图片的意义：
banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic_people.jpg pic_hill.jpg.
设计流程规范
<1> 、收集网站前期资料以及所需文档
网站策划人员先期分析网站的目的,并分析出网站的功能情况、定位以及初步栏目的规划描述。然后根据策划方案去收集相关资料
l 小组讨论开会 ----- 分析网站目的和功能情况 ------ 主要负责人签字 ------ 生效并打印文档
<2> 、将策划方案打印给小组成员人手一份,开始设计人员进行设计工作。
根据策划文档及网站设计规范,主要设计人员进行前期的首页设计。
l 小组负责人确定设计进程时间并派任务单 ------ 主要设计人员开始设计 ----- 递交审核 ------ 通过后主要负责人签字
<3> 、根据网站的模式和特点以及网站制作规范定制出最适当的标准样式
l 主要负责人与策划人员、主要网站制作人员定制标准样式 ---- 打印并小组成员人手一份
<4> 、设计人员进行二级页面设计工作
l 依照网站设计规范和标准样式 ------ 由小组负责人确定设计进程时间并派任务单 ----- 主要设计人员开始设计工作 ----- 递交审核 ----- 通过后主要负责人签字
<5> 、制作人员开始制作工作
l 依照网站设计规范和标准样式 ------ 由小组负责人确定制作进程时间并派任务单 ----- 主要制作人员开始内容建设工作 ----- 与程序方面配合人员协调工作 ------ 递交审核 ----- 通过后主要负责人签字
<6> 、程序开发阶段
l 所有工作人员开始与程序上的结合页面修改工作
<7> 、完成
网站策划人员把所有有关网站的备份文件以及原程序备份,并书写一份网站跟踪报告。说明此网站的建设工作的开始到结束所用资源人力以及执行情况。
<8> 、 QA 部门进行测试工作
注：
+ 主要负责人包括所有参与网站项目的负责人,每个负责人做到审核签字。
+ 所有工作人员进行工作时必须在规定的工作时间内完成工作,不能完成工作的有权承担一定的责任。
+ 在主要负责人通过后,任何人不得以理由修改页面设计工作,特殊情况除外。
+ 网站策划人员必须及时跟踪网站建设情况并记录下来。安排任务进程。
| |
|
泉州V23网络为您的企业打造精品网站: 800元起"网站建设+精美网页设计+搜索引擎推广"服务!! 7*24咨询:13559567956
