...
資訊專(zhuān)欄INFORMATION COLUMN
摘要：規(guī)范目的為提高團(tuán)隊(duì)協(xié)作效率便于后臺(tái)人員添加功能及前端后期優(yōu)化維護(hù)輸出高質(zhì)量的文檔特制訂此文檔。
規(guī)范目的
為提高團(tuán)隊(duì)協(xié)作效率, 便于后臺(tái)人員添加功能及前端后期優(yōu)化維護(hù), 輸出高質(zhì)量的文檔, 特制訂此文檔。
文件名稱(chēng)統(tǒng)一用小寫(xiě)的英文字母、數(shù)字和下劃線的組合，其中不得包含漢字、空格和特殊字符；命名原則的指導(dǎo)思想一是使得你自己和工作組的每一個(gè)成員能夠方便的理解每一個(gè)文件的意義，二是當(dāng)我們?cè)谖募A中使用“按名稱(chēng)排例”的命令時(shí)，同一種大類(lèi)的文件能夠排列在一起，以便我們查找、修改、替換、計(jì)算負(fù)載量等等操作。
HTML的命名原則
主頁(yè)統(tǒng)一使用index.htm、index.html或index.asp文件名（小寫(xiě)）
各子頁(yè)命名的原則首先應(yīng)該以欄目名的英語(yǔ)翻譯取單一單詞為名稱(chēng)。例如：
關(guān)于我們 --> aboutus 信息反饋 --> feedback 產(chǎn)品 --> product
如果欄目名稱(chēng)多而復(fù)雜并不好以英文單詞命名，則統(tǒng)一使用該欄目名稱(chēng)拼音或拼音的首字母表示；
每一個(gè)目錄中應(yīng)該包含一個(gè)缺省的html 文件，文件名統(tǒng)一用index.htm、index.html或index.asp；
圖片的命名原則
圖片的名稱(chēng)分為頭尾兩部分，用下劃線隔開(kāi)，頭部分表示此圖片的大類(lèi)性質(zhì)
例如：廣告、標(biāo)志、菜單、按鈕等等。
放置在頁(yè)面頂部的廣告、裝飾圖案等長(zhǎng)方形的圖片取名： banner
標(biāo)志性的圖片取名為： logo
在頁(yè)面上位置不固定并且?guī)в墟溄拥男D片我們?nèi)∶麨?button
在頁(yè)面上某一個(gè)位置連續(xù)出現(xiàn)，性質(zhì)相同的鏈接欄目的圖片我們?nèi)∶?menu
裝飾用的照片我們?nèi)∶?pic
不帶鏈接表示標(biāo)題的圖片我們?nèi)∶?title
范例：banner_sohu.png、banner_sina.png、menu_aboutus.png、menu_job.png、title_news.png、logo_police.png、 logo_national.png、pic_people.png
鼠標(biāo)感應(yīng)效果圖片命名規(guī)范為"圖片名+_+on/off"。
例如：menu1_on.png、menu1_off.png
javascript的命名原則
例如：廣告條的javascript文件名為 ad.js 彈出窗口的javascript文件名為 pop.js
動(dòng)態(tài)語(yǔ)言文件命名原則
以性質(zhì)_描述，描述可以有多個(gè)單詞，用“_”隔開(kāi)，性質(zhì)一般是該頁(yè)面得概要。
范例：register_form.asp、register_post.asp、topic_lock.asp
//項(xiàng)目目錄(都不是必須存在的目錄)
cn 存放中文HTML文件
en 存放英文HTML文件
flash 存放Flash文件
images 存放圖片文件
imagestudio 存放PSD源文件
flashstudio 存放flash源文件
inc 存放include文件
library 存放庫(kù)文件
media 存放多媒體文件
project 存放工程項(xiàng)目資料
temp 存放客戶(hù)原始資料
js 存放JavaScript腳本
css 存放CSS文件
CSS書(shū)寫(xiě)規(guī)范
基本原則：
CSS樣式可細(xì)分為3類(lèi)：自定義樣式、重新定義HTML樣式、鏈接狀態(tài)樣式。
自定義樣式為設(shè)計(jì)師自定義的新CSS樣式，影響被使用本樣式的區(qū)域，用于完成網(wǎng)頁(yè)中局部的樣式設(shè)定。樣式名為“.”+“相應(yīng)樣式效果描述的單詞或縮寫(xiě)”，例： .shadow，文字樣式樣式名為“.word”+“字號(hào)”+“行距”+“顏色縮寫(xiě)”，例：.word12、.word12-24、.word12-24-red
重新定義HTML樣式為設(shè)計(jì)師重新定義已有的HTML標(biāo)簽樣式，影響全部的被設(shè)定標(biāo)簽樣式，用于統(tǒng)一網(wǎng)頁(yè)中某一標(biāo)簽的樣式定義。樣式名為HTML標(biāo)簽，例：hr { border: 1px dotted #333333 }
鏈接狀態(tài)樣式為設(shè)計(jì)師對(duì)鏈接不同狀態(tài)設(shè)定特殊樣式，影響被使用本樣式區(qū)域中的鏈接，該樣式寫(xiě)法有2種：a.nav:link、nav.a:link，第一種只能修飾標(biāo)簽中；第二種可以修飾所有包含有標(biāo)簽的其他標(biāo)簽。
頁(yè)面內(nèi)的樣式加載必須用鏈接方式
注意細(xì)則：
協(xié)作開(kāi)發(fā)及分工: Me(前端負(fù)責(zé)人，主開(kāi)發(fā)人員，以下簡(jiǎn)稱(chēng)Me)會(huì)根據(jù)各個(gè)模塊, 同時(shí)根據(jù)頁(yè)面相似程序, 事先寫(xiě)好大體框架文件, 分配給前端人員實(shí)現(xiàn)內(nèi)部結(jié)構(gòu)、表現(xiàn)、行為; 共用css文件base.css由Me書(shū)寫(xiě), 協(xié)作開(kāi)發(fā)過(guò)程中, 每個(gè)頁(yè)面請(qǐng)務(wù)必都要引入, 此文件包含reset及頭部底部樣式, 此文件不可隨意修改;
class與id的使用: id是唯一的并是父級(jí)的, class是可以重復(fù)的并是子級(jí)的, 所以id僅使用在大的模塊上, class可用在重復(fù)使用率高及子級(jí)中; id原則上都是由Me分發(fā)框架文件時(shí)命名的, 為JavaScript預(yù)留鉤子的除外;
為JavaScript預(yù)留鉤子的命名, 請(qǐng)以js_起始, 比如:js_hide、js_show;
class與id命名: 大的框架命名比如header/footer/wrapper/left/right之類(lèi)的在 2 中由Me統(tǒng)一命名.其他樣式名稱(chēng)由 小寫(xiě)英文、數(shù)字、_來(lái)組合命名(不能以數(shù)字開(kāi)頭), 如i_comment, fontred, width200; 避免使用中文拼音, 盡量使用簡(jiǎn)易的單詞組合; 總之, 命名要語(yǔ)義化, 簡(jiǎn)明化.
規(guī)避class與id命名(此條重要, 請(qǐng)及時(shí)與Me溝通):
a、 通過(guò)從屬寫(xiě)法規(guī)避, 示例見(jiàn)d;
b、 取父級(jí)元素id/class命名部分命名, 示例見(jiàn)d;
c、 重復(fù)使用率高的命名, 請(qǐng)以自己代號(hào)加下劃線起始, 比如Me_clear;
d、 a,b兩條, 適用于在 2 中已建好框架的頁(yè)面, 如, 要在 2 中已建好框架的頁(yè)面代碼中加入新的div元素:
//按a命名法則 //樣式寫(xiě)法 #mainnav .firstnav{.......} //按b命名法則 //樣式寫(xiě)法 .main_firstnav{.......}
css屬性書(shū)寫(xiě)順序, 建議遵循布局定位屬性-->自身屬性-->文本屬性-->其他屬性. 此條可根據(jù)自身習(xí)慣書(shū)寫(xiě), 但盡量保證同類(lèi)屬性寫(xiě)在一起. 屬性列舉: 布局定位屬性主要包括: margin、padding、float（包括clear）、position（相應(yīng)的 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等，所列出的這些屬性只是最常用到的, 并不代表全部;
書(shū)寫(xiě)代碼前, 考慮并提高樣式重復(fù)使用率;
充分利用html自身屬性及樣式繼承原理減少代碼量, 比如:
，定義ul.list li{position:relative} ul.list li span{position:absolute; right:0}，即可實(shí)現(xiàn)日期居右顯示。
樣式表中中文字體名, 請(qǐng)務(wù)必轉(zhuǎn)碼成unicode碼, 以避免編碼錯(cuò)誤時(shí)亂碼;
背景圖片請(qǐng)盡可能使用sprite技術(shù), 減小http請(qǐng)求, 考慮到多人協(xié)作開(kāi)發(fā), sprite按模塊制作;
使用table標(biāo)簽時(shí)(盡量避免使用table標(biāo)簽), 請(qǐng)不要用width/height/cellspacing/cellpadding等table屬性直接定義表現(xiàn), 應(yīng)盡可能的利用table自身私有屬性分離結(jié)構(gòu)與表現(xiàn), 如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會(huì)初始化表格樣式)
用png圖片做圖片時(shí), 要求圖片格式為png-8格式,若png-8實(shí)在影響圖片質(zhì)量或其中有半透明效果, 請(qǐng)為ie6多帶帶定義背景:background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’img/bg.png’);
避免兼容性屬性的使用, 比如text-shadow、css3的相關(guān)屬性;
減少使用影響性能的屬性, 比如position:absolute、float;
必須為大區(qū)塊樣式添加注釋, 小區(qū)塊適量注釋;
代碼縮進(jìn)與格式: 建議單行書(shū)寫(xiě), 可根據(jù)自身習(xí)慣, 后期優(yōu)化Me會(huì)統(tǒng)一處理;
命名規(guī)則:頭：header
內(nèi)容：content/container
尾：footer
導(dǎo)航：nav
側(cè)欄：sidebar
欄目：column
頁(yè)面外圍控制整體布局寬度：wrapper
左右中：left right center
登錄條：loginbar
標(biāo)志：logo
廣告：banner
頁(yè)面主體：main
熱點(diǎn)：hot
新聞：news
下載：download
子導(dǎo)航：subnav
菜單：menu
子菜單：submenu
搜索：search
友情鏈接：friendlink
頁(yè)腳：footer
版權(quán)：copyright
滾動(dòng)：scroll
內(nèi)容：content
標(biāo)簽頁(yè)：tab
文章列表：list
提示信息：msg
小技巧：tips
欄目標(biāo)題：title
加入：joinus
指南：guild
服務(wù)：service
注冊(cè)：regsiter
狀態(tài)：status
投票：vote
合作伙伴：partner
/* Footer */ 內(nèi)容區(qū) /* End Footer */
頁(yè)面結(jié)構(gòu)
容器: container
頁(yè)頭：header
內(nèi)容：content container
頁(yè)面主體：main
頁(yè)尾：footer
導(dǎo)航：nav
側(cè)欄：sidebar
欄目：column
頁(yè)面外圍控制整體布局寬度：wrapper
左右中：left right center
導(dǎo)航
導(dǎo)航：nav
主導(dǎo)航：mainbav
子導(dǎo)航：subnav
頂導(dǎo)航：topnav
邊導(dǎo)航：sidebar
左導(dǎo)航：leftsidebar
右導(dǎo)航：rightsidebar
菜單：menu
子菜單：submenu
標(biāo)題: title
摘要: summary
功能
標(biāo)志：logo
廣告：banner
登陸：login
登錄條：loginbar
注冊(cè)：regsiter
搜索：search
功能區(qū)：shop
標(biāo)題：title
加入：joinus
狀態(tài)：status
按鈕：btn
滾動(dòng)：scroll
標(biāo)簽頁(yè)：tab
文章列表：list
提示信息：msg
當(dāng)前的: current
小技巧：tips
圖標(biāo): icon
注釋?zhuān)?b>note
指南：guild
服務(wù)：service
熱點(diǎn)：hot
新聞：news
下載：download
投票：vote
合作伙伴：partner
友情鏈接：link
版權(quán)：copyright
/* CSS Document */
body {margin:0; padding:0; font:12px "5B8B4F53",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;}
//重定義的最先，偽類(lèi)其次，自定義最后，便于自己和他人閱讀！
中英文混排時(shí)，我們盡可能的將英文和數(shù)字定義為verdana?和 arial?兩種字體。
head區(qū)是指HTML代碼的和之間的內(nèi)容。
必須加入的標(biāo)簽:
公司版權(quán)注釋
網(wǎng)頁(yè)顯示字符集
簡(jiǎn)體中文： 繁體中文： 英 語(yǔ)：
網(wǎng)頁(yè)制作者信息
網(wǎng)站簡(jiǎn)介
搜索關(guān)鍵字
網(wǎng)頁(yè)的css規(guī)范
網(wǎng)頁(yè)標(biāo)題
可以選擇加入的標(biāo)簽:
設(shè)定網(wǎng)頁(yè)的到期時(shí)間。一旦網(wǎng)頁(yè)過(guò)期，必須到服務(wù)器上重新調(diào)閱。
禁止瀏覽器從本地機(jī)的緩存中調(diào)閱頁(yè)面內(nèi)容。
用來(lái)防止別人在框架里調(diào)用你的頁(yè)面。
自動(dòng)跳轉(zhuǎn)。5指時(shí)間停留5秒
網(wǎng)頁(yè)搜索機(jī)器人向?qū)АＳ脕?lái)告訴搜索機(jī)器人哪些頁(yè)面需要索引，哪些頁(yè)面不需要索引。 CONTENT的參數(shù)有all,none,index,noindex,follow,nofollow。默認(rèn)是all。
收藏夾圖標(biāo)
所有的javascript的調(diào)用盡量采取外部調(diào)用.
附標(biāo)簽： 標(biāo)簽不屬于head區(qū)，這里強(qiáng)調(diào)一下，為了保證瀏覽器的兼容性，必須設(shè)置頁(yè)面背景
在設(shè)定字體樣式時(shí)對(duì)于文字字號(hào)樣式和行間距應(yīng)必須使用CSS樣式表。禁止在頁(yè)面中出現(xiàn) 標(biāo)記。
在網(wǎng)頁(yè)中中文應(yīng)首選使用宋體。英文和數(shù)字首選使用verdana?和arial?兩種字體。一般使用中文宋體的9pt?和11pt 或12px?和14.7px?這是經(jīng)過(guò)優(yōu)化的字號(hào)，黑體字或者宋體字加粗時(shí)，一般選用11pt?和14.7px?的字號(hào)比較合適。
為了最大程度的發(fā)揮瀏覽器自動(dòng)排版的功能，在一段完整的文字中請(qǐng)盡量不要使用
來(lái)人工干預(yù)分段。
不同語(yǔ)種的文字之間應(yīng)該有一個(gè)半角空格，但避頭的符號(hào)之前和避尾的符號(hào)之后除外，漢字之間的標(biāo)點(diǎn)要用全角標(biāo)點(diǎn)，英文字母和數(shù)字周?chē)睦ㄌ?hào)應(yīng)該使用半角括號(hào)。
請(qǐng)不要在網(wǎng)頁(yè)中連續(xù)出現(xiàn)多于一個(gè)的空格，也盡量少使用全角空格（英文字符集下，全角空格會(huì)變成亂碼），空白應(yīng)該盡量使用text-indent, padding, margin, hspace, vspace 以及透明的gif圖片來(lái)實(shí)現(xiàn)。
行距建議用百分比來(lái)定義，常用的兩個(gè)行距的值是line-height:120% line-height:150%。
排版中我們經(jīng)常會(huì)遇到需要進(jìn)行首行縮進(jìn)的處理，不要使用空格或者全角空格來(lái)達(dá)到效果，規(guī)范的做法是在樣式表中定義 p { text-indent: 2em; } 然后給每一段加上
標(biāo)記，注意，一般情況下，請(qǐng)不要省略
結(jié)束標(biāo)記 。網(wǎng)站中的鏈接路徑全部采用相對(duì)路徑，一般鏈接到某一目錄下的缺省文件的鏈接路徑不必寫(xiě)全名，如我們不必這樣： 而應(yīng)該這樣：，所有內(nèi)頁(yè)指向首頁(yè)的鏈接寫(xiě)成
在瀏覽器里，當(dāng)我們點(diǎn)擊空鏈接時(shí)，它會(huì)自動(dòng)將當(dāng)前頁(yè)面重置到首端，從而影響用戶(hù)正常的閱讀內(nèi)容，我們用代碼javascript:void(null)代替原來(lái)的“#”標(biāo)記
1px表格style="border-collapse: collapse"
實(shí)例如下：
設(shè)置亮、暗邊框顏色
表格有亮邊框（bordercolorlight）和暗邊框（bordercolordark）兩個(gè)屬性可以對(duì)表格樣式設(shè)置。
| 縮進(jìn)兩個(gè)半角空格， | 中如果還有嵌套的表格，
|
