网页设计规范

网页设计规范 作为一个网页设计这应该了解的东西（刚刚给公司整理的。。也参照了一些别人的规范）

 网 页 设 计 制 作 规 范
 总 论
 本规范既是一个开发规范，也是一个脚本语言参考，本规范并不是一个一成不变的必须严格遵守的条文，特殊情况下要灵活运用，做一定的变通。但是，请大家千万不要随意更改规范。如果有任何问题，请及时与项目负责人沟通。
 主目录下应有一个help目录,存放说明文件。说明文件包括：
 目录说明
 文件列表说明：存放位置、文件名称、功能及处理逻辑描述、所涉及的库表、调用关系。
 数据库说明：数据库位置、空间分配要求、表设计、关系设计、视图设计、存储过程设计等。
 ▲ 静态页面制作注意事项
 一、 制 作 常 规 要 求

 l 主要页面要写title（主页要写上企业中英文名称）
 l 主要页面meta字段便于搜索引擎查找。
 l 尽量使用广泛支持的技术。以最流行的浏览器的最普及版本为标准，同时照顾低版本浏览器。
 l 不使用过小的字体不使用过大的图片、动画、声音.不使用过长的滚屏
 l 及时删除无用文件，防止无谓的下载速度减慢
 l 由于server的linux系统，严格区分文件大小写!所有文件全部以小写字母命名，包括图形文件.禁止用中文作文件名。
 l 页面以800X600屏幕设置营为主（实际尺寸为778*434px），但也应注意在1024X800 屏幕设置的浏览效果； 即在800X600分辩率下应在浏览器中不出现横向的流动条；
 l 通常情况下页面应以居中为主，如有特殊要求可以设置居顶、居左；
 二 、文 件 命 名 规 则 与 目 录 结 构 规 则
 l 首页面必须以“index.htm 、index.asp命名的文件。
 l HTML文件扩展文件名一律用 .htm
 l 在根目录中原则上应该按照首页的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个image 的子目录用以放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。
 l 除非有特殊情况，目录、文件的名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录名应以英文、拼音为主。尽量用一些大家都能看懂的词汇。使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义。
 l 网站css文件要放到根目录image下，供其它文件调用，如子栏目较多也可分别copy到自己目录下，使网站风格统一。
 l 共用的模板文件应放在根目录的Templates文件夹下（此为dreamweaver的默认路径，如用其它软件开发者也需遵守此规则）。

 三、VI 标 准 化 要 求
 l Banner
 格式：GIF 尺寸：468X60 pixels 大小：<15K
 l Logo
 格式：GIF 尺寸：88X31 大小：<7K
 四、页 面 制 作 规 则
 1． 表格尽量用绝对像素，以免浏览器分辨率不同时表格产生变形。一个网页要尽量避免用整个一张大表格，所有的内容都嵌套在这个大表格之内，因为浏览器在解释页面的元素时，是以表格为单位逐一显示，如果一张网页是嵌套在一个大表格之内，那么很可能造成的后果就是，当浏览者敲入网址，他要先面对一片空白很长时间，然后所有的网页内容同时出现。如果必须这样做，请使用 <tbody>标记，以便能够使这个大表格分块显示。

 2． CSS定义规范 及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}
 -->
 </style> 
 为了保证不同浏览器上字号保持一致，字号建议用点数pt和像素px来定义，pt一般使用中文宋体的9pt和11pt，px一般使用中文宋体12px 和14.7px 这是经过优化的字号，黑体字或者宋体字加粗时，一般选用11pt和14.7px 的字号比较合适。

 3． 图片采用 gif , jpg 压缩格式，以减小页面下载数据量。每幅图片要有本图片的说明文字(alt=””)，这样如果图片不能正常显示，也可知道图片处代表什么意思。<img >标记要增加width, height，以免图像不能正常显示时，出现页面混乱现象。

 4． 如页面采用动画活跃网页，须避免动画过大，尽量减少用户浏览等待时间。整页用到flash动画，要考虑到flash与页面的融合统一。

 5． 每一相对独立的栏目首页一般也要求在40K容量以内，如特殊要求也不得超过60K；每个网页（本网首页除外）都要有返回主页和返回上级的图标或文字链接。

 6． 返回连接使用相对路径，尽量不使用绝对路径。如：../index.htm

 7． 字体要求使用国家简化字。
 ▲ 程序开发注意事项
 1． 次网站系统要连接一个数据库(sql),所以要连接数据库，但不允许建立odbc数据源，不允许作多个头包含连接，整个系统只有一个，以便将来更改数据库密码时很方便的更改本系统，同时，移植也很方便。
 2 头包含要做成例如*.asp的文件，这样用户不会发现密码及数据库，如果有acess数据库，扩展名一定要改成例如*.asp的样子，以便保护数据。
 3 所有的各个子模块，都要有一个readme.asp（readme.txt----改成àreadme.asp，什么都不显示）文件，里面详细叙述本子模块用到的表，表结构，每个字段的意义及大小，SQL 建表脚本语言（用SQL 工具导出），每个程序文件的功能。
 4 建表要有一定的意义，其字段也要有意义，如4967班的表学生，表名 ：table_4967_student字段：姓名,年龄table_4967_student_name，table_4967_student_age等等。同时，要有5个人上的扩展字段，以便将来扩充功能。
 5 要有注释，以便维护。删除测试时候的无用代码，使程序清晰明了。
 6 要用相对路径，坚决禁止用绝对路径。
 7 后台管理程序要整合到一个页面上，而且要有权限，只能是有权限的用户登录后才能进行系统管理。
 8 不要开设不必要的session变量，以免浪费资源，同时，能一次性用sql语句解决的问题就用sql语句，避免多次进行数据库检索，反馈，再检索等等，以免影响速度，致使大量的时间浪费在网络连接上。
 9 程序开发时不要用已投入运行的网站进行测试，请自己搭建环境或申请环境。
 10 要有错误捕获处理，提醒用户如何操作造成错误。
 11 删除信息时要有确认，毕竟是删除，确认后再行删除。
 12 各个模块间要条例分明，不要混乱一片。每个模块要有自己的目录（放到主目录下）。
 13 该用js验证合法的就要验证，坚决避免服务器端进行验证，以免加大服务器负担，同时，影响网页反应的速度。
 14 编程人员测试程序时要用上界限外值，合法值，下界限外值进行测试。
 15 绝对禁止使用触发器，存储过程。
 16 如果整个网站系统都用到同一个变量或常量，请仿照c语言中的常量定义，以便维护上的方便。
 17 显示数据库信息时候，应考虑到段落层次，各标点符号的正常显示，记录比较多可以考虑分页，避免过长的页面出现。
 18 所有模块内部测试通过后再交往上级进行测试及验收。
 19 所有的功能完成后，要进行整合测试，后台管理程序要放到一起，也形成一个后台管理型网站，目的：操作简洁方便