页面规范PC端

浏览: 177 发布日期: 2017-12-21 分类: html
  • 示例

{code}
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="robots" content="all">
    <meta name="author" content="吉比特网络技术股份有限公司">
    <meta name="Copyright" content="吉比特(斗仙、问道等)运营组">
    <meta name="Description" content="">
    <meta name="Keywords" content="雷霆游戏">
    <title>专题主题(标题)- 产品中文全称官方网站 - 雷霆游戏</title>
    <link href="css/common.css" rel="stylesheet">
    <!-- 页面设计:lumj | 页面制作:zhongtt | 创建:xxxx-xx-xx -->
</head>
<body>

</body>

</html>
{code}

  • doctype

{code}
<!DOCTYPE html>
{code}
注:文档类型统一使用html5的doctype

  • 页面编码

{code}
<meta charset="utf-8" />
{code}
注:编码统一使用utf-8

  • Author

{code}
<meta name="author" content="吉比特网络技术股份有限公司" />
{code}

  • Copyright

{code}
<meta name="Copyright" content="吉比特(斗仙、问道等)运营组" />
{code}
注:吉比特 项目名(斗仙2、问道手游、地下城堡、雷霆火线) 运营组

  • Description和Keywords

{code}
<meta name="Description" content="" />

<meta name="Keywords" content="" />
{code}
注:Description值一般为页面标题或主题,针对该页面主题的说明。Keywords为产品名、专题名、专题相关名词,之间用英文半角逗号隔开。(关键字与描述找产品要,如果没有复制官网的描述和关键字)

  • title

-# 官网通用格式:产品中文全称-产品英文缩写-官方网站-雷霆游戏-产品slogin,例如
{code}
<title>斗仙2-pk.leiting-官方网站-雷霆游戏-今日不删档开发测试</title>
{code}
-# 专题通用格式:专题主题(标题)-产品中文全称官方网站-雷霆游戏,例如
{code}
<title>火爆新服 大圣归来 今日开启 - 斗仙2官方网站 - 雷霆游戏</title>
{code}

  • 页面说明注释

在head区域中加上对页面相关人员注释。
{code}
<!-- 页面设计:lumj | 页面制作:zhongtt | 创建:xxxx-xx-xx -->
{code}

  • CSS引入方式

页面统一使用外链CSS文件方法,例如
{code}
<link href="css/comm.css" rel="stylesheet" />
{code}
注:必须在head区域内引用

  • 页面文字

-# 基本字体
{code}
body{font:12px/1.5 '5FAE8F6F96C59ED1',tahoma,sans-serif;}
{code}
-# 中文字体
说明:出于有可能乱码而导致字体解析错误的原因,font-family中用到中文字体时,建议优先使用unicode码方式,英文别名方式为备选方案
{color:#ff0000}禁止使用中文方式{color}
{code}
font-family:'5FAE8F6F96C59ED1'; /推荐/
font-family:'Microsoft Yahei'; /备选/
{code}
-# 文本内容
页面上没有做特殊效果,后期需要修改的内容,如:活动时间、活动方式、活动规则、奖品内容等,尽量用文本内容来实现,不要切在背景中

{expand:reset示例}

  • 精简版(适用于一般的官网、专题)

{code}
body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,p,form{margin:0}
body,button,input,select,textarea{font:12px/1.5 tahoma,'5FAE8F6F96C59ED1',sans-serif}
h1,h2,h3,h4,h5,h6{font-size:100%}
em,b{font-style:normal}
a{text-decoration:none}
a:hover{text-decoration:underline}
img{border:0}
button,input,select,textarea{font-size:100%;outline:none}
table{border-collapse:collapse;border-spacing:0}
td,th,ul,ol{padding:0}
{code}

  • 通用版(基本适用于所有的页面)

{code}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
input,textarea,select{*font-size:100%}
{code}

  • 通用版(支持html5)

{code}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block; }
table{border-collapse:collapse;border-spacing:0}
audio,canvas,video { display: inline-block;display: inline;zoom: 1;}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
input,textarea,select{*font-size:100%}
{code}
{expand}

{expand:文件规范}

html, css, js, images文件均归档至约定的目录中;

html文件命名: 英文命名, 后缀.html. 同时将对应界面稿放于同目录中, 若界面稿命名为中文, 请重命名与html文件同名, 以方便后端添加功能时查找对应页面;

css文件命名: 英文命名, 后缀.css. 共用base.css, 首页index.css, 其他页面依实际模块需求命名;

JS文件命名: 英文命名, 后缀.js. 共用common.js, 其他依实际模块需求命名。

{expand}

{expand:图片规范}

图片标签

图片标签必须写上宽度、高度和alt属性,宽高为图片的原大小,例如:
{code}
<img src="" width="500" height="200" alt="图片信息" title="图片信息"/>
{code}

图片质量

* 图片体积不能超过150K,图片格式包括.jpg/.gif/.png;

* jpg图片必须压缩,一般60%品质即可,如果图片质量不好,可提高到80%;

* 透明PNG32图片必须用压缩工具压缩后提供。

切图要求

* 合并当前页面中出现的小图片,尽可能减少页面请求数;

* 辅助图片(修饰、间隔、提醒的图片)作为背景图处理,通过css的background定义;

* 各类按钮、文字、标题要尽量从背景中分离;能重复利用的部分尽量提取;

* 页面需具有扩展性,特殊情况除外;

* 合理切图,需要程序后台动态生成的图片,必须单独切割出来;

{expand}

{expand:测试标准}

浏览器兼容性测试

兼容IE6、IE7、IE8、IE9、Firefox、chrome,TT浏览器。并且拖大和缩小窗口,页面布局不会发生错位;

显示器分辨率测试

1024x768、1440x900

可读性测试

* 在屏蔽js、css后,页面要仍然具有良好的可读性;

* 表现与结构分离,代码中不要涉及表现元素,如:style、font、bgColor、border等;

* 选用恬当的元素,标题使用h1~h6,h1为网页一级标题,一个页面中只出现一次;

* 分大块使用div,段落使用p。数据列表使用table/ul/ol/dd等,关键字使用strong;

* ...

{expand}

返回顶部