推荐设备MORE

如何让你的网站容易被浏览者

如何让你的网站容易被浏览者

行业知识

Web前端开发开发设计标准指南,JAVA指南

日期:2020-11-16
我要分享
假如频道名字多而繁杂其实不好以英语英语单词取名,则统一应用该频道名字拼音字母或拼音字母的首英文字母表明; <或index.asp;
案例:banner_sohu.png、banner_sina.png、menu_aboutus.png、menu_job.png、title_news.png、logo_police.png、 logo_national.png、pic_people.png
文档储放部位标准 //新项目文件目录(也不是务必存有的文件目录) cn 储放汉语HTML文档 en 储放英语HTML文档 flash 储放Flash文档 images 储放照片文档 imagestudio 储放PSD源代码 flashstudio 储放flash源代码 inc 储放include文档 library 储放库文档 media 储放多媒体系统文档 project 储放工程项目新项目材料 temp 储放顾客初始材料 js 储放JavaScript脚本制作 css 储放CSS文档 CSS撰写标准 基本准则: CSS款式可细分化为3类:自定款式、再次界定HTML款式、连接情况款式。
自定款式为设计方案师自定的新CSS款式,危害被应用本款式的地区,用以进行网页页面中部分的款式设置。款式名叫 . + 相对款式实际效果叙述的英语单词或简称 ,例: .shadow,文本款式款式名叫 .word + 字体大小 + 行间距 + 色调简称 ,例:.word12、.word12-24、.word12-24-red
再次界定HTML款式为设计方案师再次界定现有的HTML标识款式,危害所有的被设置标识款式,用以统一网页页面中某一标识的款式界定。款式名叫HTML标识,例:hr { border: 1px dotted #333333 }
连接情况款式为设计方案师对连接不一样情况设置独特款式,危害被应用本款式地区中的连接,该款式书写有2种:a.nav:link、nav.a:link,第一种只有装饰 a 标识中;第二种能够装饰全部包括有 a 标识的别的标识。
网页页面内的款式载入务必用连接方法 link rel="stylesheet" type="text/css" href="xxx/xxx.css" 留意实施方案:
合作开发设计及职责分工: Me(前端开发承担人,主开发设计工作人员,下列通称Me)会依据每个控制模块, 同时依据网页页面类似程序, 事前写好大致架构文档, 分派给前端开发工作人员完成內部构造、主要表现、个人行为; 同用css文档base.css由Me撰写, 合作开发设计全过程中, 每一个网页页面请尽量必须引进, 此篇件包括reset及头顶部底端款式, 此篇件不能随便改动;
class与id的应用: id是唯一的并是父级的, class是能够反复的并是子级的, 因此id仅应用在大的控制模块上, class能用在反复应用率高及子级中; id标准上面是由Me派发架构文档时取名的, 为JavaScript预埋勾子的以外;
class与id取名: 大的架构取名例如header/footer/wrapper/left/right这类的在 2 中由Me统一取名.别的款式名字由 小写英语、数据、_来组成取名(不可以以数据开始), 如i_comment, fontred, width200; 防止应用汉语拼音字母, 尽可能应用简单的英语单词组成; 总而言之, 取名要词义化, 简要化.
避开class与id取名(此条关键, 请立即与Me沟通交流): a、 根据依附书写避开, 实例见d; b、 取父级原素id/class取名一部分取名, 实例见d; c、 反复应用率高的取名, 要以自身代号加下横线起止, 例如Me_clear; d、 a,b两根, 可用于在 2 中已建成架构的网页页面, 如, 要在 2 中已建成架构的网页页面编码 div id="mainnav" /div 里加入新的div原素://按a取名规律 div id="mainnav" div ... /div /div //款式书写 #mainnav .firstnav{.......} //按b取名规律 div id="mainnav" div ... /div /div //款式书写 .main_firstnav{.......}
css特性撰写次序, 提议遵照合理布局精准定位特性-- 本身特性-- 文字特性-- 别的特性. 此条可依据本身习惯性撰写, 但尽可能确保类似特性写在一起. 特性例举: 合理布局精准定位特性关键包含: margin、padding、float(包含clear)、position(相对的 top,right,bottom,left)、display、visibility、overflow等;本身特性关键包含: width、height、background、border; 文字特性关键包含:font、color、text-align、text-decoration、text-indent等;别的特性包含: list-style(目录款式)、vertical-align、cursor、z-index(堆叠次序) 、zoom等,列出出的这种特性仅仅最经常采用的, 其实不意味着所有;
充足运用html本身特性及款式承继基本原理降低编码量, 例如: ul li 这儿是题目目录 span 2010-09-15 /span /ul ,界定ul.list li{position:relative} ul.list li span{position:absolute; right:0},就可以完成时间居右显示信息。
应用table标识时(尽可能防止应用table标识), 请不必用width/height/cellspacing/cellpadding等table特性立即界定主要表现, 应负将会的运用table本身独享特性分离出来构造与主要表现, 如thead,tr,th,td,tbody,tfoot,colgroup,scope; (cellspaing及cellpadding的css操纵方式: table{border:0;margin:0;border-collapse:collapse;} table th, table td{padding:0;}, 一般base.css文档中Me会原始化报表款式)
用png照片做照片时, 规定照片文件格式为png-8文件格式,若png-8确实危害照片品质或在其中有半全透明实际效果, 请为ie6独立界定情况:background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src= img/bg.png );
取名标准: 注解的书写: /* Footer */ 內容区 /* End Footer */ id的取名:
网页页面构造 器皿: container 页头:header 內容:content container 网页页面行为主体:main 页尾:footer 导航栏:nav 侧边栏:sidebar 频道:column 网页页面外场操纵总体合理布局总宽:wrapper 上下中:left right center
导航栏 导航栏:nav 核心航:mainbav 子导航栏:subnav 顶导航栏:topnav 边导航栏:sidebar 左导航栏:leftsidebar 右导航栏:rightsidebar 莱单:menu 子莱单:submenu 题目: title 引言: summary
基本款式: /* CSS Document */ body {margin:0; padding:0; font:12px "\5B8B\4F53",san-serif;background:#fff;} div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;} table,td,tr,th{font-size:12px;} li{list-style-type:none;} img{vertical-align:top;border:0;} ol,ul {list-style:none;} h1,h2,h3,h4,h5,h6 {font-size:12px; font-weight:normal;} address,cite,code,em,th {font-weight:normal; font-style:normal;} .fB{font-weight:bold;} .f12px{font-size:12px;} .f14px{font-size:14px;} .left{float:left;} .right{float:right;} a {color:#2b2b2b; text-decoration:none;} a:visited {text-decoration:none;} a:hover {color:#ba2636;text-decoration:underline;} a:active {color:#ba2636;} //重界定的最开始,伪类次之,自定最终,有利于自身和别人阅读文章! 英中文混排时,大家尽量的将英语和数据界定为verdana 和 arial 二种字体样式。 HTML撰写标准 head区编码标准 head区就是指HTML编码的 head 和 /head 中间的內容。 务必添加的标识:
网页页面显示信息标识符集接下来汉语: META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312" 繁体字汉语: META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8" 英 语: META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"
设置网页页面的期满時间。一旦网页页面到期,务必到网络服务器上再次调取。 META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT"
全自动自动跳转。 META HTTP-EQUIV="Refresh" CONTENT="5;URL=>网页页面检索设备人指导。用于告知检索设备人什么网页页面必须数据库索引,什么网页页面不用数据库索引。 META NAME="robots" CONTENT="none" CONTENT的主要参数有all,none,index,noindex,follow,nofollow。默认设置是all。
全部的javascript的启用尽可能采用外界启用. SCRIPT LANGUAGE="JavaScript" SRC="script/xxxxx.js" /SCRIPT
附 body 标识: body 标识不归属于head区,这儿注重一下,以便确保访问器的适配性,务必设定网页页面情况 body bgcolor="#FFFFFF"
在设置字体样式款式时针对文本字体大小款式和行距应务必应用CSS款式表。严禁在网页页面抽出现 font size=? 标识。
在网页页面中汉语应优选应用老宋体。英语和数据优选应用verdana 和arial 二种字体样式。一般应用汉语老宋体的9pt 和11pt 或12px 和14.7px 它是历经提升的字体大小,黑体字字或是老宋体字字体加粗时,一般采用11pt 和14.7px 的字体大小较为适合。
以便较大水平的充分发挥访问器全自动排版设计的作用,在一段详细的文本中请尽可能不必应用 br 来人力干涉按段。
不一样语系的文本中间应当有一个半角空格符,但避头的标记以前和避尾的标记以后以外,中国汉字中间的标点要用全角标点,英语英文字母和数据周边的括弧应当应用半角括弧。
请不必在网页页面中持续出現超过一个的空格符,也尽可能少应用全角空格符(英语标识符集下,全角空格符能变成错码),空白页应当尽可能应用text-indent, padding, margin, hspace, vspace 及其全透明的gif照片来完成。
排版设计中大家常常会碰到必须开展首行缩近的解决,不必应用空格符或是全角空格符来做到实际效果,标准的作法是在款式表格中界定 p { text-indent: 2em; } 随后给每一段再加 p 标识,留意,一般状况下,请不必省去 /p 完毕标识 。
网站内的连接相对路径所有选用相对性相对路径,一般连接到某一文件目录下的默认设置文档的连接相对路径无须写全称,如大家无须那样: a href= 而应当那样: a href= aboutus/ ,全部内容页偏向的连接写出 a href= /
在访问器里,当我们们点一下空连接时,它会全自动将当今网页页面重设到首端,进而危害客户一切正常的阅读文章內容,大家用编码javascript:void(null)替代原先的 # 标识
报表有亮外框(bordercolorlight)和暗外框(bordercolordark)2个特性能够对报表款式设定。 table border="1" width="500" bordercolorlight="#000000" bordercolordark="#FFFFFF" 在写 table 相互之间嵌套循环时,严苛依照的标准,针对独立的一个 table 来讲, table tr 两端对齐, td 缩近2个半角空格符, td 中假如也有嵌套循环的报表, table 也缩近2个半角空格符,假如 td 中沒有一切嵌套循环的报表, /td 完毕标识应当与 td 处在同一行,不必换行, 如大家留意在源码中不可有那样的编码: td img src= ../images/sample.gif /td 而应当是那样的: td img src= ../images/sample.gif /td 它是由于访问器觉得换行非常于一个半角空格符,之上不标准的书写非常于不经意中提升一个半角空格符,假如的确必须提升一个半角空格符,也应当那样写: td img src= ../images/sample.gif /td 一个网页页面要尽可能防止用全部一张大报表,全部的內容都嵌套循环在这里个大报表以内,由于访问器在表述网页页面的原素时,是以报表为企业逐一显示信息,假如一张网页页面是嵌套循环在一个大报表以内,那麼极可能导致的不良影响便是,当访问者敲入网站地址,他要先应对一片空白页较长時间,随后全部的网页页面內容同时出現。假如务必那样做,请应用 tbody 标识,便于可以使这一大报表分层显示信息 免费下载速率 Flash 网页页面尺寸应限制在 200K下列,尽量的应用矢量素材图型和Action来减少动漫尺寸。非静态数据网页页面含照片尺寸应限制在70K上下,尽量的应用情况色调更换大块同色照片。 include asp规范书写 !--#include file="" -- jsp规范书写 %@ include file="../" % Alt和Title 全是提醒性語言标识,一定要注意他们中间的差别。
在大家访问网页页面时,当电脑鼠标滞留在照片目标或文本连接处时,在电脑鼠标的右下方有时候会出現一个提醒信息内容框。对总体目标开展一定的注解表明。在一些场所,它的功效是太重要的。
p Title="给连接文本提醒" 文本 /p a href="#" Title="给连接文本提醒" 文本 /a img src="照片.gif" alt="给照片提醒" HTM网页页面 META HTTP-EQUIV="pragma" CONTENT="no-cache" META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate" META HTTP-EQUIV="expires" CONTENT="0" ASP网页页面 Response.Expires = -1 Response.ExpiresAbsolute = Now() - 1 Response.cachecontrol = "no-cache" 访问器适配性 建立站点时,应当搞清楚浏览者将会应用各种各样 Web 访问器。在己知的别的设计方案限定下,尽量将站点设计方案为具备较大的访问器适配性。 现阶段应用的 Web 访问器有二十多种多样,大多数数已发售了好几个版本号。即便您只对于应用 Netscape Navigator 和 Explorer 的大多数数 Web 客户,但您应确立其实不是每一个人都会应用这二种访问器的全新版本号。 您的站点越繁杂(在合理布局、动漫、多媒体系统內容和互动层面),跨访问器适配的将会性就会越小。比如,并不是全部的访问器都可以以运作JavaScript。不应用独特标识符的纯文字网页页面也许可以在一切访问器中恰当显示信息,但相比合理地应用图型、合理布局和互动的网页页面,那样的网页页面在艺术美上将会要差很多。因此,应负量在最好实际效果设计方案和较大访问器适配性设计方案中间获得均衡。 全部的HTML 标识的特性必须用单引号或是双引号括起,即大家应当写 a href= url 而并不是 a href=url . banner 全规格banner为468X60px,半规格banner为234X60px,小banner为88X31px。 此外120X90,120X60也是小标志的规范规格。全规格banner不超出14k高清。 广泛的banner规格760X100,750X120,468X60,468X95,728X90,585X140 次级线圈页的pip规格360X300,336X280 游标:100X100或120X120 LOGO的国际性规范标准 以便有利于INTERNET上信息内容的散播,一个统一的国际性规范是必须的。具体上早已拥有那样的一全套规范。在其中有关网站的LOGO,现阶段有三种规格型号:88*31 它是互连在网上最广泛的LOGO规格型号。120*60 这类规格型号用以一般尺寸的LOGO。120*90 这类规格型号用以大中型LOGO。 网页页面装饰照片解决 照片历经提升以加速免费下载的速率,有最佳的视觉效果室内空间实际效果,用图要与网页页面设计风格、网页页面內容符合;制作精致,关键点解决恰当。 JavaScript撰写标准
撰写全过程中, 每列编码完毕务必有分号; 标准上全部作用均依据XXX新项目要求原生态开发设计, 以免在网上down出来的编码导致的编码环境污染(沉冗编码 || 与目前编码矛盾 || ...);
自变量取名: 驼峰式取名. 原生态JavaScript自变量规定是纯英语英文字母, 首英文字母须小写, 如iTaoLun; jQuery自变量规定首标识符为_, 别的与原生态JavaScript 标准同样, 如: _iTaoLun; 另, 规定自变量集中化申明, 防止全局性自变量.
中后期提升中, JavaScript非注解类汉语标识符须变换成unicode编号应用, 以免编号不正确时错码显示信息;
取名所有用小写英语英文字母 || 数据 || _ 的组成,在其中不可包括中国汉字 || 空格符 || 独特标识符;尽可能用易懂的语汇, 有利于精英团队别的组员了解; 另, 取名分头尾两台分, 用下横线分隔, 例如ad_left01.gif || btn_submit.gif;
应用css sprite技术性集中化小的情况图或标志, 减少网页页面http恳求, 但留意, 请尽量在相匹配的sprite psd源图上划参照线, 并储存至img文件目录下.
1.IE6和firefox的差别: background:orange;*background:blue; 含意便是火狐浏览器访问器的情况色调是橘色,而IE访问器的情况色是深蓝色. 2.IE6和IE7的差别: background:green !important;background:blue; 含意指的是:IE7的情况色调是翠绿色,IE6的情况色调是深蓝色 3.IE7和FF的差别: background:orange; *background:green; 含意指的是:火狐浏览器访问器的情况色调是橘色,而IE7的情况色调是翠绿色 4.FF,IE7,IE6的差别: background:orange;*background:green !important;*background:blue; 含意是火狐浏览器访问器的的情况橘色,IE7访问器的情况色调是翠绿色,而IE6访问器的色调是深蓝色. via:a/17104  

dengb.TechArticleWeb前端开发开发设计标准指南,JAVA指南 标准目地 为提升精英团队合作高效率, 有利于后台管理工作人员加上作用及前端开发中后期提升维护保养, 輸出高品质量的文本文档, 特制定此篇...