前端技術(shù)規(guī)范總結(jié)_第1頁
前端技術(shù)規(guī)范總結(jié)_第2頁
前端技術(shù)規(guī)范總結(jié)_第3頁
全文預(yù)覽已結(jié)束

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

第一部分：目錄、文件、CSS命名方式文件夾與文件名稱、CSS樣式命名、程序中的一些控件等等：名稱全部用小寫英文字母、數(shù)字、下劃線的組合，其中不得包含漢字、空格和特殊字符；目錄名應(yīng)以英文、拼音為主（不到萬不得已不要以拼音作為目錄名稱，經(jīng)驗(yàn)證明，用拼音命名的目錄往往連一個(gè)月后的自己都看不懂）。盡量用一些大家都能看懂的詞匯。使得你自己和工作組的每一個(gè)成員能夠方便的理解每一個(gè)文件的意義。而且當(dāng)我們?cè)谖募A中使用“按名稱排例”的命令時(shí)，同一種大類的文件能夠排列在一起，以便我們查找、修改、替換、計(jì)算負(fù)載量等等操作。例如：images(圖形文件)，flash（Flash文件）等。命名方式：（性質(zhì)_描素_位置_分類_數(shù)量）項(xiàng)相結(jié)合，采用簡(jiǎn)寫、組合的方式形成通用規(guī)則。例如：news(性質(zhì))news_title(性質(zhì)_描素)news_title_top(性質(zhì)_描素_位置)news_title_top_01(性質(zhì)_描素_位置_數(shù)量)news_title_top_a_01(性質(zhì)_描素_位置_分類_數(shù)量)news_title_top_b_01(性質(zhì)_描素_位置_分類_數(shù)量)常用目錄名：data(數(shù)據(jù)庫)images(圖片)install(安裝)templets(模版)include(包含)admin(后臺(tái))rss(定閱)media(媒體)config(配置)Script(腳本)Language(語言)style(樣式)等……常用CSS名：頁面外圍控制整體布局寬度：wrapper頭：header內(nèi)容：content/container頁面主體：main側(cè)欄：sidebar尾：footer等……第二部分：結(jié)構(gòu)（XHTML）網(wǎng)站的前端結(jié)構(gòu)與表現(xiàn)分離，達(dá)到95%以上。正式上線后的網(wǎng)頁代碼結(jié)構(gòu)要清晰、明朗，容易閱讀，布局與結(jié)構(gòu)的鑲套盡量控制在4-5層以內(nèi)，嚴(yán)格遵循w3c的xhtml1.0Transtitonal。

并遵循以下原則：DDT類型：XHTML1.0Transitional編碼：utf-8元標(biāo)記必須項(xiàng)：

<metaname="keywords"content=""/>該頁面的關(guān)鍵詞概況

<metaname="description"content=""/>該頁面的簡(jiǎn)要描述

<metaname="robots"content="all"/>

具體內(nèi)容根據(jù)SEO要求設(shè)置Html代碼中的所有標(biāo)簽遵循XHTML1.0的書寫規(guī)范，包括：標(biāo)簽全部使用小寫；標(biāo)簽全部閉合；所有屬性必須有值而且用雙引號(hào)；把所有<和&特殊符號(hào)用編碼表示；所有的標(biāo)簽必須合理嵌套；注釋中不要使用--------如這樣寫是錯(cuò)誤的：<!--注釋------------注釋-->；標(biāo)簽有語意：布局排版用<div>；標(biāo)題用<h1>——<h6>；段落用<p>；無序列表用<ul>，有序列表用<ol>；放棄不被IE支持的標(biāo)簽，如<abbr；放棄不被w3c推薦的html4標(biāo)簽，如：<center><font><b>等等；title的合理應(yīng)用：<a>標(biāo)簽必須用title；<img>必須賦予alt值；<div>可以用title說明；根據(jù)網(wǎng)站的結(jié)構(gòu)，對(duì)HTML進(jìn)行模塊化，比如：信息頁面的頭部尾部的通用文件，功能頁面的頭部尾部的通用文件，分頁文件，可以模塊化的信息列表模塊。JS：頁面中的JS處理成外部文件，不能在頁面中使用大量JS腳本，同時(shí)注意js文件調(diào)用的位置，比如統(tǒng)計(jì)代碼跟頁面的加載沒有任何關(guān)系，必須放在頁面最底部；盡量不要使用框架；為表單添加<lable>標(biāo)簽；所有頁面都需要定義背景顏色，系統(tǒng)默認(rèn)值是可以被用戶隨意更改的圖片采用gif,jpg,png壓縮格式，以減小頁面下載數(shù)據(jù)量，<img>標(biāo)記要有width,height屬性第三部分：表現(xiàn)（CSS）CSS文件作為外部鏈接，在頁面的<head>區(qū)鏈接調(diào)用，位置在元標(biāo)記結(jié)束下一行，JS調(diào)用的上一行。視情況可以在頁面中書寫內(nèi)聯(lián)樣式<style></style>，用于定義此頁面特殊的樣式和覆蓋CSS樣式庫中一定需要更改覆蓋的樣式，位置在外部鏈接樣式表的下一行；

CSS文件視重要程度添加注釋，方法為/*注釋*/；

CSS選擇器命名書寫規(guī)范：

#idname,.classname{

width:%或px\em;

height:%或px\em;

margin:

border:

padding:

---------------------------------------------------------容器長(zhǎng)寬確定

background:#fffurl()repeatleftbottomfixed1px2px;

color:

font-family:“宋體”,Arial,Helvetica,sans-serif;

font-size:

line-height:

---------------------------------------------------------容器內(nèi)容格式

display:

visibility:

overflow:

position:

top:

right:

bottom:

left:

float:

clear:

---------------------------------------------------------容器布局

}

每一個(gè)屬性結(jié)尾都必須寫分號(hào)，其中有的值如果不需要，可以不寫，大體上是這樣的順序，也符合思考的順序。

有幾點(diǎn)注意事項(xiàng)：font-family:必須以sans-serif字體做結(jié)尾；減少樣式數(shù)量，盡量重復(fù)使用；必須清除float；單位：使用像素（px）；顏色值：使用#RRGGBB格式第四部分：UE指導(dǎo)原則網(wǎng)站LOGO的視覺統(tǒng)一，網(wǎng)站主體的視覺風(fēng)格、文本顏色、鏈接顏色、修飾圖片風(fēng)格以及按鈕和表單控件的視覺進(jìn)行統(tǒng)一；為每一個(gè)頁面設(shè)定一個(gè)最合適的標(biāo)題<title>，使用戶和搜索引擎一目了然知道頁面的主題；為大部分頁面加入元標(biāo)記，即<meta>相關(guān)內(nèi)容，描述頁面屬性；在最終頁<link>加入具有親和力的版權(quán)說明、免責(zé)聲明、交互設(shè)計(jì)說明文檔的鏈接地址；頁面中必須有回到“首頁”的鏈接——一般做法是將站點(diǎn)LOGO加上首頁的鏈接，最好還是有回到首頁的文字鏈接；如果網(wǎng)站欄目很多，要讓用戶知道所處的頁面屬于哪個(gè)欄目之下，以及很輕松的可以回到上一級(jí)欄目——標(biāo)簽是一種不錯(cuò)的方法；現(xiàn)在位置。如果上一條原則處理的很好，“現(xiàn)在位置”可以去掉；搜索。合理的放置搜索表單，最好在首屏，并且確保搜索結(jié)果的準(zhǔn)確性；表單設(shè)計(jì)原則:面向菜鳥和專業(yè)用戶，填寫項(xiàng)盡量精簡(jiǎn)，做簡(jiǎn)單的填寫說明，僅放置與填寫表單相關(guān)的鏈接，避免用戶通過其他鏈接轉(zhuǎn)移視線到別的地方，從而放棄填寫表單清晰的驗(yàn)證——告訴用戶為什么出現(xiàn)錯(cuò)誤，并引導(dǎo)正確的填寫；如果完成表單任務(wù)需要多個(gè)步驟，需要用圖形或文字表明所需的步驟，以及當(dāng)前正在進(jìn)行的步驟——使用戶知道離成功還有多遠(yuǎn)；如果可能，盡量先放置input、textaera等需要鍵盤輸入的項(xiàng)，再放置下拉、單選、復(fù)選等鍵盤操作的項(xiàng)，緊接著是“提交”按鈕——就是說，減少鍵盤操作被鼠標(biāo)操作打斷的次數(shù)；文本域允許更改內(nèi)容的文本格式，比如加粗、字體大小、超鏈接、圖片等等，而且，盡量讓此內(nèi)容與用戶完成發(fā)布以后的內(nèi)容格式相同；提供將表單保存為草稿的功能；設(shè)計(jì)符合習(xí)慣的表單。

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論