頁面設(shè)計(jì)規(guī)范_第1頁
頁面設(shè)計(jì)規(guī)范_第2頁
頁面設(shè)計(jì)規(guī)范_第3頁
頁面設(shè)計(jì)規(guī)范_第4頁
頁面設(shè)計(jì)規(guī)范_第5頁
已閱讀5頁，還剩3頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

文檔屬性：屬性文檔屬性文檔主題：頁面開發(fā)規(guī)范文檔編號：文檔版本：版本號(如：版今日期：2009-12-30文檔狀態(tài)：文檔更改版本訂正日期訂正人描繪2009-1-23呂勇創(chuàng)立文檔頁面開發(fā)規(guī)范目錄1概括3背景3目的32規(guī)范細(xì)則3頁面設(shè)計(jì)企圖明確3頁面HTML代碼構(gòu)造清楚，易于閱讀和研發(fā)嵌入程序代碼4頁面流程清楚，指向明確6頁面制作規(guī)范及其細(xì)節(jié)，加強(qiáng)seo成效6頁面id,class及其css命名規(guī)范參照，提升團(tuán)隊(duì)開發(fā)效率和方便管理6概括背景不規(guī)范的頁面，會(huì)存在好多的冗余代碼、構(gòu)造不合理等現(xiàn)象，將對研發(fā)的嵌套工作造成了影響，HTML頁面代碼的易讀性較差。

一些目的規(guī)范HTML頁面：1.減少冗余代碼2.提升代碼的易讀性3.逐漸提升設(shè)計(jì)師對代碼的理解，能夠和開發(fā)工程師更好的交互4.讓頁面更優(yōu)化，高效讓用戶能夠更好的體驗(yàn).規(guī)范細(xì)則頁面設(shè)計(jì)企圖明確1）頁面標(biāo)題明確，能清楚反應(yīng)本頁面策劃功能，嚴(yán)禁

“無標(biāo)題文檔”

，“

標(biāo)題1”，“標(biāo)題2”等歸屬不明確標(biāo)題2）頁面文字描繪清楚，和產(chǎn)品策劃人員交流確認(rèn)頁面文字描繪3）同項(xiàng)目中不一樣頁面中同樣或許相像功能頁面文字描繪保持一致性頁面HTML代碼構(gòu)造清楚，易于閱讀和研發(fā)嵌入程序代碼1）HTML代碼分區(qū)明確在頁面的每一個(gè)功能分區(qū)前后加入標(biāo)記，說明此區(qū)塊的功能指向，比如<!--一致頭開始/鈴聲排行開始--><!--一致頭結(jié)束/鈴聲排行結(jié)束-->2）代碼構(gòu)造清楚明確，要求HTML標(biāo)簽的開始和結(jié)束對齊，合理換行，代碼縮進(jìn)切合規(guī)范的代碼：<!--鈴聲排行開始

--><tablecellpadding=”0”cellspacing=”0”border=”0”><tr><td>這里是內(nèi)容地區(qū)</td><td>這里是內(nèi)容地區(qū)</td></tr></table><!--

一致頭結(jié)束

/鈴聲排行結(jié)束

-->不切合規(guī)范的代碼：<tablecellpadding=”0”cellspacing=”0”border=”0”><tr><td>這里是內(nèi)容地區(qū)</td><td>這里是內(nèi)容地區(qū)</td></tr></table><tablecellpadding=”0”cellspacing=”0”border=”0”><tr><td>這里是內(nèi)容地區(qū)</td><td>這里是內(nèi)容地區(qū)</td></tr></table>3）同項(xiàng)目中不一樣頁面中近似地區(qū)保持一致，

比如表格款式、表格文字的對齊方式，要注意表格

單元格中文字的對齊方式、距離等要素頁面流程清楚，指向明確1）頁面中的鏈接指向正確，鏈接指向代表了操作流程，操作流程的合理性在此會(huì)獲得反應(yīng)2）頁面中的鏈接指向嚴(yán)禁使用空鏈接以及#號取代3）不一樣頁面的文字、鏈接的款式等要保持風(fēng)格一致性4）導(dǎo)航鏈接清楚、指向明確完好、風(fēng)格一致5）不一樣頁面圖標(biāo)、按鈕風(fēng)格一致，間距合理雅觀6）頁面中能夠少用圖片就少用圖片，特別背風(fēng)景、邊框等，盡量少用圖片7）頁面中不要保存從其余頁面拷貝的無用Javascript代碼8）頁面中使用的style、javascript要獨(dú)自放到文件引用，不可以直接寫入頁面頁面制作規(guī)范細(xì)節(jié)，加強(qiáng)seo成效.1）命名一律小寫，盡量用英文，盡量少加中杠和下劃線；盡量不縮寫，除非一看就理解的單詞如果能夠話2）目錄成立的原則：以最少的層次供給最清楚簡易的接見構(gòu)造，根目錄一般只寄存以及其余一定的系統(tǒng)文件，每個(gè)主要欄目開設(shè)一個(gè)相應(yīng)的獨(dú)立目錄，根目錄下的images用于存放各頁面都要使用的公用圖片，子目錄下的images目錄寄存本欄目頁面使用的私有圖片。3）全部的CSS，js的都采納外面調(diào)用，<LINKhref="style/"rel="stylesheet"type="text/css">書寫時(shí)重定義的最初，偽類其次，自定義最后（此中a:linka:visiteda:hovera:actived要依據(jù)次序?qū)懀┍阌谧约汉蛣e人閱讀。4）為了保證不一樣閱讀器上字號保持一致，字號建議用點(diǎn)數(shù)pt和像素px來定義，pt一般使用中文宋體的9pt和11pt，px一般使用中文宋體12px和這是經(jīng)過優(yōu)化的字號，黑體字或許宋體字加粗時(shí)，一般采納11pt和的字號比較適合。5）圖片都加上alt標(biāo)簽，防備嵌入程序時(shí)候程序員忘掉此標(biāo)簽調(diào)用，合理的使用標(biāo)題等文字去描繪圖片，這樣能增添頁面的重點(diǎn)字密度。6）盡量不使用Table布局，去掉頁面中的比如font/bgcolor等格式化控制標(biāo)簽。用切合web標(biāo)準(zhǔn)的代碼來制作頁面。這樣能夠讓代碼構(gòu)造化、語義化。提升頁面代碼的可讀性。7）首頁HTML代碼的<head>和</head>之間的內(nèi)容，簡單忘掉加入的標(biāo)簽，網(wǎng)站簡介<METANAME="DESCRIPTION"CONTENT="xxxxxxxxxxxxxxxxxxxxxxxxxx">搜尋重點(diǎn)字<METANAME="keywords"CONTENT="xxxx,xxxx,xxx,xxxxx,xxxx,">id,class及其css命名規(guī)范參照，提升團(tuán)隊(duì)開發(fā)效率和方便管理.1）頁面不一致的命名規(guī)則，會(huì)致使新制作無法很快接手，無法很好的保護(hù)現(xiàn)有的頁面，型的網(wǎng)站來說這個(gè)是一個(gè)重要的失誤，因此制作請一致命名規(guī)范，大型網(wǎng)站團(tuán)隊(duì)開發(fā)統(tǒng)一的命名規(guī)范，加強(qiáng)代碼可讀性，便于制作之間接手，配合，提升團(tuán)隊(duì)開發(fā)效率加強(qiáng)SEO的div+css命名規(guī)范實(shí)例.

一個(gè)大.以下是class的命名頁頭：header登錄條：loginbar標(biāo)記：logo側(cè)欄：sidebar廣告：banner導(dǎo)航：nav子導(dǎo)航：subnav菜單：menu子菜單：submenu搜尋：search轉(zhuǎn)動(dòng)：scroll頁面主體：main內(nèi)容：content標(biāo)簽頁：tab文章列表：list提示信息：msg小技巧：tips欄目標(biāo)題：title加入：joinus指南：guild服務(wù)：service熱門：hot新聞：news下載：download注冊：register狀態(tài)：status按鈕：btn投票：vote合作伙伴：partner友誼鏈接：friendlink頁腳：footer版權(quán)：copyrightID的命名外套：wrap主導(dǎo)航：mainnav子導(dǎo)航：subnav頁腳：footer整個(gè)頁面：content頁眉：header頁腳：footer商標(biāo)：label標(biāo)題：title主導(dǎo)航：mainnav（globalnav）頂導(dǎo)航：topnav邊導(dǎo)航：sidebar左導(dǎo)航：leftsidebar右導(dǎo)航：rightsidebar旗志：logo標(biāo)語：banner菜單內(nèi)容1：menu1content菜單容量：menucontainer子菜單：submenu邊導(dǎo)航圖標(biāo)：sidebarIcon說明：note面包屑：

breadcrumb(即頁面所處地點(diǎn)導(dǎo)航提示）容器

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(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ǔ)空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論