2022年网页设计规范参照 .pdf

《2022年网页设计规范参照 .pdf》由会员分享，可在线阅读，更多相关《2022年网页设计规范参照 .pdf（7页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、中国移动手机支付网页设计规范本规范的目的是为了方便在中国移动手机支付网站建设中，制作出通用的、易于维护、高效率的制作 WEB 页面。一.目录建立、文件夹命名规则：01.目录：除非有特殊情况外，目录应使用小写字母，并且以字母开头其中不得包含汉字、空格与特殊字符。目录命名请尽量英文为指导，不要以拼音作为目录名称。以下为一些常用目录的推荐英文名称：image 放网站不同栏目的页面都要用到的公共图片media 放 flash、avi、quicktime 等多媒体文件public 放公共文件style 放 css 样式文件js 放 js 文件temp 放一些策划与设计中使用的原始资料与备份文件在根目录中

2、原则上应该按照首页的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个images 和 medias 的子目录用以放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。temps 目录中的文件与网上无关，请杜绝非内容的上传。02.文件：除非有特殊情况外，目录应使用小写字母，并且以字母开头其中不得包含汉字、空格与特殊字符，否则在网页读取过程中可能会出现错误；请尽量英文为指导，不要以拼音作为目录名称。以下为一些常用文件命名的格式推荐：首页类文件index(_xxxxxx).后缀名index_wealth.html 列表类文件

3、list(_xxxxxx).后缀名list.html 内容类文件detail(_xxxxxx).后缀名detail.html 表单类文件post(_xxxxxx).后缀名post.html 表单反馈类文件result(_xxxxxx).后缀名result.html 图片类文件文件类型_xxxxx(图片序号)(背景).后缀名(详见以下)广告图片动画类文件xxxxxx_widthxheight.后缀名(详见以下)03 图片文件：透明的 1x1 像素图片名称为：c.gif 图片的分类及命名规则：广告类标志类按钮类button button_01.gif|button_01bg.gif 菜单类装饰类p

4、ic pic_01.gif|pic_02.gif 栏目类title title_top01.gif|title_top02bg.gif 04 命名规则名师资料总结-精品资料欢迎下载-名师精心整理-第 1 页，共 7 页 -两种方式：下划线连接法、驼峰法。选择其中一种方式即可如：二设计规范：01.整体规范：中国移动手机支付网站统一采用950 像素的宽网站页面长度建议1 屏半到 2 屏。原则上长度不超过3 屏，宽度不超过1 屏。根据用户习惯和网站需要，站点首页、分栏首页可设计超过3 屏。02.图片标准尺寸：除了布局类文件没有限制外，其它的广告、产品等图片，基本满足以下三种规格：1x1=正方比例；4

5、x3=黄金比例；另外还有一种的特定图片尺寸。以下为一些常见图片的推荐尺寸：全尺寸 banner=468 60px；半尺寸 banner=234 60px；产品缩略图片=100 75px；内容图片=50 50px 120 90px图片文件大小一般保持在5k 以内；大尺寸的banner 文件大小保持在15k 以内。03.文字规范：网页中总体上使用：字体 font-family:宋体字号 font-size:12px 字色 普通：color:#333 浅色：color:#666大字体设置上请多使用双尾数值，比如12px 14px 16px 22px：一般标题宋体粗体12px 模块标题宋体粗体14px

6、 内容标题宋体粗体16px文字的行间距也请多使用双尾数值：12 号字体常用行间中距18px 20px 22px14 号宋体常用行间中距24px 26px 28px文字的颜色请使用216 安全色，方便定义和规范颜色，即类似于#000000|#CC6666|#66CCFF 04.链接规范：新闻、信息类通常用新开窗口方式打开。顶部导航、底部导航通常采取在本页打开，特殊栏目和功能可新开窗口。链接带下划线为链接通常的默认风格，顶部导航或特殊位置为了观赏性可用样式表取消下划线。链接的颜色可配合主题颜色风格改变，通常为蓝色、暗蓝色、黑色，但激活后的链接颜色、鼠标移动其上时的链接颜色要同本身颜色进行区分。三

7、XHTML制作规范：01.制作规范总论：名师资料总结-精品资料欢迎下载-名师精心整理-第 2 页，共 7 页 -每个网页都应注明DTD 版本信息，并且放在网页的最上面。所有 xhtml 标签都必须使用小写，并且必须有属性值，且加双引号。所有 xhtml 标签都必须闭合。网页大小 定义为网页的所有文件大小的总和，包括html 文件和所有的嵌入的对象。用户喜欢快的而不是新奇的站点。对于解调器用户，网页大小保持在70K 以下为合适，40K以下更好。为了更好的控制代码长度与代码的可读性，尽量使用手写代码来完成书写，并且使用 tab来控制代码缩进（严禁使用空格键）。所有的文件联接与链接都使用绝对路径的形

8、式，如：/news/detail.aspx?id=1111在制作页面时，请先全局性的了解一下页面的结构，然后按粗放到细致的顺序去完成页面。最后是同一栏目使用同时制作，从而减少的代码量。02.网页文件通用模板：/title03.页首 head区代码规范：网站简介：必需搜索关键字：必需搜索机器人：(all,none,index,noindex,follow,nofollow)网页著作者：网页版权注释：网页定时跳转：meta http-equiv=refresh content=10;url=http:/yourlink网页间转换时加入效果：收藏夹图片：RSS文件代码：04.CSS 调用规范：名师资

9、料总结-精品资料欢迎下载-名师精心整理-第 3 页，共 7 页 -所有的 css 的尽量采用外部调用：代码较长的首页和重要栏目首页可直接内嵌css，避免调用时间太长，使页面未及时调用 css风格而显得凌乱。某些独立存在的单页也可以使用以上的方法。在类似换模板的css 调用时，请遵守前后顺序的规定。05.JS调用规范：所有的 javascript 脚本尽量采取外部调用：某些独立存在的单页也可以使用直接内嵌JS。JS 的编写每个人都有自己的习惯用法，所以请在编写时加注释信息，方便其它同事可以阅读与修改。06.img 标签规范：所有 img 标签除了程序控制宽高值外，都应该width=height=

10、，这样在图形文件未被读取时，保证浏览器预留图形占用的空间，防止网页最终显示时出现抖动现象。所有带链接的img 标签都应该border=0。一般 img 标签都应该设置alt=，alt 的内容尽量贴近图的内容。07.a 标签规范：所有 a标签都应该有title=的值，title 的内容尽量贴近链接的内容。除了默认的链接，其它的特别链接都应该有自己的class值，以方便其它链接调用。希望可以使用三段式的设置，未点前|点击中|已点后这三种状态，以方便用户可以清楚的知道那些是已经点过的。一般链接到某一目录下的缺省文件的链接路径不必写全名，如：可以写为08.form 标签与表单相关标签规范：maxlen

11、gth=/允许输入的最大宽值checked=checked/radio checkbox 类型中的选中isabled=disabled/灰色不可选readonly=readonly/只读 size=/拉长转为高度状态multiple=multiple/可复选 selected=selected/默认值 rows=/高度cols=/宽度 名师资料总结-精品资料欢迎下载-名师精心整理-第 4 页，共 7 页 -其中灰色文字代表的是可以选择性输入的部分。所有 form 标签都应该有method=的值，默认请使用post。可以使用 label 标签来关联表单标签。可以使用 table 标签来控制表单的

12、内容形式。请尽量把 form 标签放在 table 中间使用，如：09.table 标签规范：f 使用 div+css 并不代表不可以再使用table，只是 table 不在用于结构与布局。除了以下几个table 标签属性外，其它的 table 标签属性最好放弃使用，因为其存在兼容性问题。以下为表格的嵌套格式：1.)对于单独的一个来说，对齐，缩进一个 tab。2.)对于存在 的来说，与 对齐，缩进一个 tab。3.)如果 中没有任何嵌套的表格，结束标记应该与处于同一行，不要换行。4.)如果 中出现嵌套表格，下面的 缩进一个tab。5.)如果 下内有一个，并且 没有任何嵌套，可以让 都处于同一行

13、中。原则上，不赞同使用超过三次的table 嵌套，如出现这样的样式，都尝试使用div 等其它方式。嵌套的表格大小尽量给定width 和 height 数值，以便于浏览器加快解释的速度，以下为设置宽高的基本原则，一行或一列都只存在一个width 或 height 的值名师资料总结-精品资料欢迎下载-名师精心整理-第 5 页，共 7 页 -10.列表相关标签规范：1)使用 、等格式控制时必须加注 和，不准单独使用、。2)在一般情况下，列表中的margin padding 都应该在css中设置为0，list-stype 设置为none。3)文字+行高+列表头控制+列表头图片统一写入样式，列表头符号不

14、加链接。11.其它：为 swf 设置一个 就可以解决swf 总是浮动在总最上面的问题了，但同时在制作swf 动画时，按实际需要设置一个实色的底色框。因为marquee 的兼容性问题，所以请暂停使用本标签，可以使用 javascript 来完成滚动。font 标签也已经被 w3c 抛弃，所以建议用CSS 来替换使用。四 CSS 制作规范01.一般常用 CSS 样式的范本：*background:#fff;margin:0;padding:0;font-family:Arial,Helvetica,sans-serif;color:#000;ul,ol,menu,dl list-style:non

15、e;p text-indent:2em;a:link color:#333;text-decoration:none;a:visited color:#333;text-decoration:none;a:hover color:#C60;text-decoration:underline;a:active color:#C60;text-decoration:underline;02.常用 CSS 缩写形式：字体缩写：font:normal normal normal 12px/18px 宋体;背景缩写：列表缩写：l ist-style:list-style-image|list-style

16、-position|list-style-typelist-style:url(images/icon.gif)0 0;边框缩写：border:1px solid black;Box 模形缩写：(上)(右)(下)(左)|(上)(左右)(下)|(上下)(左右)这几种表现方式。名师资料总结-精品资料欢迎下载-名师精心整理-第 6 页，共 7 页 -color 缩写：如果使用 216 安全色，就可以使用#FFF,#F06 这样的表达形式。03.常用布局形式：为了兼容 IE6、Firefox，在布局的时候请使用以下格式：居中：margin:0 auto;居右：居左：margin:0 auto 0;左浮

17、动：float:left;clear:left;右浮动：float:right;clear:right;04.CSS 语意性设置：可以设置为与网页的title 一样，不过可以通过display:none;隐藏，这样做可以方便搜索引擎的提取；可以设置文章的标题；可以用于分栏目的标题；可以放置文章的内容；可以与表单框对应使用；可以用来做一层的菜单；可以用来做二层的菜单；05.CSS 常用命名规则：命名含义命名含义命名含义header 头部container 内容部分footer 尾部nav 导航menu 菜单crumb 当前位置left 左侧部分center 中间部分right 右侧部分login 登录regsiter 注册search 搜索06.CSS 设置的注意事项：Hack 的问题：IE6 采用 _解决IE7 采用*+解决五搜索引擎优化：使用 flash 或者图片作为导航菜单的时候，会影响搜索引擎对其内容的搜索，所以可以使用图片替换文字的方式来做导航菜单.每个分栏都应该精心设计其的meta标签、meta关键字。名师资料总结-精品资料欢迎下载-名师精心整理-第 7 页，共 7 页 -