网页设计制作规范

HTML 及及 CSS 开发规范开发规范 总总 论论 本规范针对从事大型 WEB 站点开发设计人员 要求使用者具有一定的 HTML CSS 基础 知识 对原代码具有较强的控制能力 本规范的目的是为了开发出通用的 易于维护的高 效率的 WEB 界面 基基 本本 要要 求求 1 网站目录命名规则 所有目录名称使用小写英文字母的组合 绝对禁止包含汉字 空格和特殊字符 可以添加 数字或下划线的组合 禁止大小写混用 2 在网站根目录中开设 images common 三个子目录 根据需要再开设 media 子 目录 images 目录中放网站所有页面都要用到的公共图片 例如公司的标志 banner 条 菜单 按钮等等 common 子目录中放 Css JavaScript Asp Php include 等公共文件 media 子目录中放 flash avi quick time 等多媒体文件 3 在根目录中原则上应该按照首页的栏目结构 给每一个栏目开设一个目录 根据需要 在每一个栏目的目录中开设一个 images 和 media 的子目录用以放置此栏目专有的图片 和多媒体文件 如果这个栏目的内容特别多 又分出很多下级栏目 可以相应的再开设其 他目录 4 temp 目录中的文件往往会比较多 建议以时间为名称开设目录 将客户陆续提供的 资料归类整理 5 针对 dreamweaver 的用户还有模板目录与库目录 6 针对 dreamweaver script 客户端 Javascript 函数定义及初始化操作 2 补充 为了保证网站能够与下一代的 web 语言 xml 标准兼容 所有的 HTML 标签的属性都要 用单引号或者双引号括起 即我们应该写 而不是 3 关键字等 META 信息 允许全文检索的页面 为了使 Internet 上的搜索引擎能够有效检索 在网站首页及各频 道首页的 html 的之间应该加入 Keywords 和 Description 元标记 但仅使用在首页 其它页面并非必须 4 CSS 文件的书写 样例 body font family 宋体 font size 12px color 000000 background image url td font family 宋体 font size 12px color 000000 p text indent 2em text align justify a link color FFFFFF text decoration none a visited color 99FFFF text decoration none a active color FF9900 text decoration underline a hover color FF9900 text decoration underline a biglink link font size 14 8px color 99FFFF text decoration none a biglink visited font size 14 8px color 99FFFF text decoration none a biglink active font size 14 8px color FF9900 text decoration underline a biglink hover font size 14 8px color FF9900 text decoration underline bigfont font size 14 8px 说明 CSS 定义的顺序为 重定义的最先 伪类其次 自定义最后 以便于他人阅读 除非需要 一般不特别定义文字的行高 对于伪类 CSS 定义 请严格按照以上顺序格式 即 a hover 放在最后 以便使其不会被 其他定义覆盖 为 了保证不同浏览器上字号保持一致 字号建议用点数 pt 和像素 px 来定义 使 用 pt 单位时一般使用中文宋体的 9pt 和 10 5pt 使用 px 单位时 一般使用中文宋体 12px 和 14 8px 字体需要作为标题显示时 一般选用 10 5pt 或 14 8px 的字号比较 合适 为了 使得英文字体浏览时更加美观 建议制作完成后 上传的 CSS 文件中将字体定义修 改为中英文兼容的格式 例如 font family Verdana 宋体 之所以编辑时不采 用此种定义方式是由于在使用所见即所得的网页编辑器中会出现中文字体无法自动换行的 错误 因此编辑时请保证字体定义中 宋体 为首选字 体 如果 CSS 定义较为繁琐 致使 CSS 文件大小超过 3K 建议书写 CSS 时使用速记格式 例如 body font 12px 16px 宋体 color 000000 background FFFFFF url 5 单一的表格应用 样例 基本原则 基本原则 单一的表格不使用表格边框形式 即不得设置 bordercolordark 和 bordercolorlight 属 性 如果需要表格边框颜色 则在 CSS 中设置 Border 属性或者使用表格嵌套格式 此两 种方式均可兼容 IE5 和 NC6 当浏览时单元格中无内容时 在原代码中必须保证其代码不为空 可以使用 或者透明 GIF 图片填充 表格中单元格不同数目时 建议使用和 以保证表格能够正确排 列 并方便他人阅读表格代码 对于表格一般不建议使用除 center 外的 align 属性 即 left 或 right 不知道作何理解 我通常表格内的位置 都是用 td 的对齐属性以减少代码 Width 和 height 的写法 一般情况下 Width 和 height 写在 的标签内 多 行多列的表格 单元格的 width 写在每一列的第一个 标签内 不再书写 height 标 签 总之遵循一条原则 不出现多于一个的控制同一个单元格大小的 height 和 width 保证任何一个 width 和 height 都是有效的 也就是你改动代码中任何一个 width 和 height 的数值 都应该在浏览器中看到变化 做到这一条不容易 需要较长时间的练习 和思考 6 注意在源代码中不应有这样的代码 而应该是这样的 这是因为浏览器认为换行相当于一个半角空格 以上不规范的写法相当于无意中增加一个 半角空格 如果确实有必要增加一个半角空格 也应该这样写 7 表格的嵌套 表格嵌套的原则是 嵌套层数不超过三 能不嵌套的尽量不要使用嵌套 制 作人员与美工设计合作时 应尽可能地将美工的设计图做拆分 以避免在网页中将所以 内容嵌套在一个大的表格中 因为浏览器在解释页面的元素时 是以表格为单 位逐一显示 如果一张网页是嵌套在一个大表格之内 那么很可能造成的后果就是 当浏览者敲入网址 他要先面对一片空白很长时间 然后所有的网页内容同时出 现 如果必须这样做 请使用 此标签仅限 IE 标记 以便能够使这个大表格分块显示 嵌套的表格大小尽量给定 Width 和 height 数值 单位尽量为 px 以便于浏览器加快解 释的速度 如采用自适应性页面布局 可统筹考虑使用 还是 px 单位 制制 作作 原原 则则 1 文字排版 文章分段请使用 标记 注意 一般情况下 请不要省略 结束标记 排版中我们经常会遇到需要进行首行缩进的处理 不要使用 或者全角空格来达到效果 规 范的做法是在样式表中定义 p text indent 2em 的 CSS 设置中请选定 text align justify 方式 以保证文字左右均对齐排列 尽量 避免锯齿现象的发生 此方式仅限 IE 最好少用 最好删除 为了最大程度的发挥浏览器自动排版的功能 在一段完整的文字中请尽量不要使用 来人工干预分段 不同语种的文字之间应该有一个半角空格 但避头的符号之前和避尾的符号之后除外汉字 之间的标点要用全角标点 英文字母和数字周围的括号应该使用半角括号 2 插入图形 网页中插入的图形文件除程序自动调用的以外 必须指定其大小 即必须书写为 这样在图形文件未被读取时 保证浏览器预留图形占用的空间 防止网页最终显示时出现抖动现象 带有连接的图形文件必须设置 border 0 以避免图形被加入边框颜色 3 所有的字号都应该用样式表来实现 禁止在页面中出现 标记 4 请不要在网页中连续出现多于二个 的 也尽量少使用全角空格 英文字符集下 全角空 格会变成乱码 空白应该尽量使用 text indent padding margin hspace vspace 以及透明的 gif 图片来实现 5 中英文混排时 我们尽可能的将英文和数字定义为 verdana 或 arial 两种字体 参看 CSS 定义部分 6 网站内的文件连接的路径全部采用相对路径 即格式为 一般链接到某一目录下的缺省文件的链接路径不必写全名 如我们不必这样 而可以这样 7 网页大小 定义为网页的所有文件大小的总和 包括 HTML 文件和所有的嵌入的对象 用户喜欢快的而不是新奇的站点 对于解调器用户 网页大小保持在 70K 以下为合适 40K 以下更好 文文 件件 的的 命命 名名 1 每一个目录中应该包含一个缺省的 html 文件 文件名统一用 index htm 2 文件名称统一用小写的英文字母 数字和下划线的组合 3 命名原则 指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义 二是 当我们在文件夹中使用 按名称排例 的命令时 同一种类的文件能够排列在一起 以便我 们查找 修改 替换 计算负载量等等操作 因此文件命名原则为 栏目名 分类名 日期 序号 4 下面以 新闻 包含 国内新闻 和 国际新闻 这个栏目来说明 html 文件的命名原则 在根目录下开设 news 目 录 新闻首页取名 index htm 所有属于 国内新闻 的新闻依次取名为 news china 20010303 001 htm news china 20010303 002 htm 所有属于 国际新闻 的新闻依次取名为 news internation 20010303 001 htm news internation 20010303 002 htm 5 图片的命名原则遵循以下几条规范 名称分为头尾两两部分 用下划线隔开 头部分表示此图片的大类性质 例如广告 标志 菜单 按钮等等 一般来说 放置在页面顶部的广告 装饰图案等长方形的图片我们取名 banner 标志性的图片我们取名为 logo 在页面上位置不固定并且带有链接的小图片我们取名为 button 在页面上某一个位置连续出现 性质相同的链接栏目的图片我们取名 menu 装饰用的照片我们取名 pic 不带链接表示标题的图片我们取名 title 依照此原则类推 尾部分用来表示图片的具体含义 下面是几个样例 大家应