网页设计规范

规范|设计|网页|网页设计

 
总 论

     本规范既是一个开发规范,也是一个脚本语言参考,本规范并不是一个一成不变的必须严格遵守的条文,特殊情况下要灵活运用,做一定的变通。但是,请大家千万不要随意更改规范。如果有任何问题,请及时与项目负责人沟通。
  
  主目录下应有一个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 所有的功能完成后,要进行整合测试,后台管理程序要放到一起,也形成一个后台管理型网站,目的:操作简洁方便。

时间: 2024-10-28 14:33:23

网页设计规范的相关文章

互联网上杰出人物总结的网页设计规范

简介 这是一篇介绍网页设计原则的文章.在互联网迅速发展的今天,各种web 2.0网站竞争激烈,你死我亡.Jini, DHTML等复杂新技术被预言为没有前途,而看上去简单的metadata, XML, CSS获得了显著的突破进展.同时,或繁复或单纯的网页设计流派相互对立却同时成功.为了更好的理解这一切,BusinessWeek.com调查了时下网络精英,总结出这2008年设计者赖以生存的网页设计10大戒律. 互联网一直在改变,BusinessWeek.com与一群专家总结出了如今的网页设计师必须遵

网页设计规范 用FrontPage 2000做样式表

frontpage|规范|设计|网页|网页设计|样式表    Dreamweaver以其强大的功能正在扩张到更多"网虫"的硬盘里,然而Dreamweaver并非每个功能都那么出色.至少,在样式表(CSS)设置方面就显得太专业,让这些英文不好的"虫虫"们大伤脑筋.经过N次下载.安装,到头来我才发现原来最好的早已在自己的手中,那就是被我封存很久的-- FrontPage2000.下面就让我带领大家一块来分享"傻瓜"化软件带来的快乐吧. 一.三种添加C

网页设计规范总结:一套不错的网页制作规范

文章简介:为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改. 规范目的为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改. 基本准

响应式网页设计和移动互联网

文章简介:响应式网页设计被提出以来,争论就不断,其实核心问题只有两个个:太多的资源请求和有限的终端支持之间的矛盾.响应式的网页设计和移动终端在用户体验和视觉风格上的差异. 个话题最近很火爆,我也一直在关注,响应式网页设计和移动互联网密切相关,并因移动终端的丰富和普及而兴盛,并且是一个颇具争议的话题,我今天将和大家探讨下. 上周写了个简单的ppt在组内大概介绍了下,感兴趣的话可以先看下这个PPT. 移动互联网的现状和未来 在说到这个话题前,我们先看下网页设计和前端开发的现状: 全球有超过53亿手机

如何让网站防采集?

网站|采集 很多防采集方法在施行的时候需要考虑是否影响搜索引擎对网站的抓取,所以先来分析下一般采集器和搜索引擎爬虫采集有何不同. 相同点: a. 两者都需要直接抓取到网页源码才能有效工作, b. 两者单位时间内会多次大量抓取被访问的网站内容; c. 宏观上来讲两者IP都会变动; d. 两者多没耐心的去破解你对网页的一些加密(验证),比如网页内容通过js文件加密,比如需要输入验证码才能浏览内容,比如需要登录才能访问内容等. 不同点: 搜索引擎爬虫先忽略整个网页源码脚本和样式以及html标签代码,然

Photoshop适合新手的零基础配色方案分享

给各位Photoshop软件的使用者们来详细的解析分享一下适合新手的零基础配色方案. 解析分享: 今天对一些配色技巧和方法做一个分享和总结,无论你有美术基础/色彩基础还是零基础,都可以使用此方法创造出安全的配色方案. 所谓安全配色,就是遵循一些设计规范,色彩规范,适应于Web和其它方面的UI设计,在这些色彩的基础上,只要能控制好比例,就可以大胆的配色,无需参考,无需临摹,无需借鉴.一种感性的安全配色,一种符合标准的安全配色. 这次分享介入了一些自己学习过总结过的色彩理论,当然如果同学们能够学习巩

十点防采集黄金建议_网站应用

笔者自己是写采集器的,所以对网站防采集有一些心得体会.因为是在上班时间,各种方法只是简单的提及.     很多防采集方法在施行的时候需要考虑是否影响搜索引擎对网站的抓取,所以先来分析下一般采集器和搜索引擎爬虫采集有何不同.     相同点:     a. 两者都需要直接抓取到网页源码才能有效工作,    b. 两者单位时间内会多次大量抓取被访问的网站内容:     c. 宏观上来讲两者IP都会变动:     d. 两者多没耐心的去破解你对网页的一些加密(验证),比如网页内容通过js文件加密,比如

网页设计面包屑:面包屑的使用前提及设计规范

文章描述:网站面包屑(breadcrumb)设计. 一.什么是面包屑 A "breadcrumb" (or "breadcrumb trail") is a type of secondary navigation scheme that reveals the user's location in a website or Web application. The term comes from the Hansel and Gretel fairy tale i

网页界面交互设计:系统的用户体验的衡量标准

文章描述:精益用户体验(UX):摆脱只注重结果的工作(留意互动机构的区别之处). By Jeff Gothelf from SmashingMagazine.com翻译&编辑:DamnDigital, (转载请说明翻译来源, 尊重我们的努力) 网页(以及交互设计,界面设计,等)传统上是基于可交付的形式来执行.框架.网站地图.流程图.内容清单.分类系统.原型和规范文档(又称"The Spec"),帮助定义网站在其起步阶段的执行.这些结果构成了一个系统的用户体验的衡量标准. 随着时