XHTMLCSS標(biāo)準(zhǔn)化文檔_第1頁
XHTMLCSS標(biāo)準(zhǔn)化文檔_第2頁
XHTMLCSS標(biāo)準(zhǔn)化文檔_第3頁
XHTMLCSS標(biāo)準(zhǔn)化文檔_第4頁
XHTMLCSS標(biāo)準(zhǔn)化文檔_第5頁
已閱讀5頁，還剩17頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

1、XHTML&CSS標(biāo)準(zhǔn)化文檔20100329更新目 錄第一章 XHTML標(biāo)準(zhǔn)2一、XHTML文檔結(jié)構(gòu)21、定義文檔類型：22、聲明命名空間：23、編碼類型：2二、XHTML書寫規(guī)范31、語法規(guī)范：32、注釋規(guī)范：3第二章 CSS標(biāo)準(zhǔn)化及CSS框架4一、CSS文檔統(tǒng)籌與編碼規(guī)范41、CSS文檔統(tǒng)籌：42、CSS書寫的規(guī)范：53、屬性的組織：64、A屬性排列順序：65、CSS命名規(guī)則：76、CSS命名方法：7二、Reset CSS10三、清除浮動方法11第三章 通用規(guī)范12一、文檔結(jié)構(gòu)和命名規(guī)范121、Style文件命名規(guī)范：132、Images規(guī)范：133、Javascript規(guī)范：14

2、第四章 項目制作完成15一、代碼的優(yōu)化（制作部分）15二、夸瀏覽器兼容性161、測試代碼在各主流瀏覽器兼容性：16三、項目的上傳16第五章 頁面制作中的SEO規(guī)范17一、頁面制作中的SEO規(guī)范17附錄：設(shè)計規(guī)范18一、頁面設(shè)計尺寸18二、字體規(guī)定18三、字號規(guī)定18四、行高規(guī)定18五、圖片尺寸規(guī)范19六、文本顏色20七、切圖規(guī)則20第一章 XHTML標(biāo)準(zhǔn)一、 XHTML文檔結(jié)構(gòu)1、 定義文檔類型：過渡型DTD（XHTML 1.0 Transitional）是比較理想的選擇。因為這種DTD允許使用描述性的元素和屬性，也比較容易通過W3C的代碼校驗。定義文檔類型：過渡型（Transitional）

3、<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">2、 聲明命名空間：xmlns是XHTML NameSpace的縮寫，中文翻譯為命名空間。命名空間是收集元素類型和屬性名字的一個詳細DTD，如果不指明各自的命名空間，就會出現(xiàn)語義混淆現(xiàn)象。聲明命名空間<html xmlns="/1999/xhtml">

4、;3、 編碼類型：編碼類型：GB2312二、 XHTML書寫規(guī)范1、 語法規(guī)范：語法規(guī)范1、 XHTML對大小寫敏感，所有的元素和屬性都必須小寫。2、 所有的屬性必須用引號”括起來。3、 XHTML要求有嚴(yán)謹(jǐn)?shù)慕Y(jié)構(gòu)，因此所有的標(biāo)簽都必須合理嵌套4、 所有的屬性必須被賦值5、 所有的特殊符號都用編碼表示，例如小于號必須被編碼為“&lt;”6、 不要在注釋內(nèi)容中使用“-”， “-”只能出現(xiàn)在XHTML注釋的開頭和結(jié)結(jié)。7、 XHTML規(guī)范廢除了name屬性，而使用id屬性作為統(tǒng)一的名稱。2、 注釋規(guī)范：代碼的注釋規(guī)范舉例<!- Header start -><div id

5、="header">內(nèi)容</div><!- Header end ->第二章 CSS標(biāo)準(zhǔn)化及CSS框架一、 CSS文檔統(tǒng)籌與編碼規(guī)范1、 CSS文檔統(tǒng)籌：CSS文檔統(tǒng)籌(產(chǎn)品類)reset.cssbase.cssmodule.cssstyle.css1、 Reset樣式表：重設(shè)瀏覽器的樣式2、 Base樣式表：頁面公共的布局樣式3、 Module樣式表：小模塊、小版塊樣式表的制定。CSS文檔統(tǒng)籌(發(fā)布頁面類)style.css1、 重設(shè)瀏覽器的樣式、頁面公共的布局樣式、小模塊、小版塊樣式表，全部寫入style.css一個文件中。2、 CSS書寫

6、的規(guī)范：每個版塊用注釋加以說明，對日后維護提供很大的方便。代碼的注釋規(guī)范/*d1注釋說明*/#id1 #id1 .class /* id2注釋說明*/#id2 #id2 .class 3、 屬性的組織：根據(jù)屬性在布局中的重要性，建議先聲明布局屬性，然后定義盒模型屬性，最后定義排版屬性。按主次關(guān)系組織第一步：如果需要的話，先聲明布局屬性（確定元素的顯示），例如這些屬性：float display position 第二步：如果需要的話再聲明盒模型屬性（確定元素的形狀），例如這些屬性：width height margin padding border background第三步：如果需要的話最后

7、聲明版式屬性（確定元素的內(nèi)容顯示），例如這些屬性：color font font-size font-weight text-align4、 A屬性排列順序：A的屬性按照：aa:linka:visiteda:hovera:active這種排列順序5、 CSS命名規(guī)則：CSS命名規(guī)則應(yīng)該遵循一定規(guī)則，簡單的說就是要求直觀、簡潔、一目了然，方便后期維護和交流。CSS命名規(guī)則1、 要區(qū)分大小寫：在命名CLASS和ID時全部使用小寫字母2、 要注意合法性：CSS命名以字母開頭，可以連接數(shù)字、字母、下劃線、連接符。3、 語義定義明確易懂：CSS命名要詞必達意，名稱要反映用途和相關(guān)信息，同時要簡短，不要附

8、帶任何冗余信息。6、 CSS命名方法：下表為常用命名舉例：布局常用名稱：名稱說明名稱說明wrap外套container容器site站點content內(nèi)容塊nav導(dǎo)航column欄main主體left左layout布局center中sidebar側(cè)欄right右模塊常用名稱：名稱說明名稱說明logo標(biāo)志banner廣告條login登錄loginbar登錄條regsiter注冊search搜索shop購物車list列表tool/toolbar工具條service服務(wù)tab標(biāo)簽頁hot熱點source資源news新聞site_map網(wǎng)站地圖download下載about_us關(guān)于我們copyrigh

9、t版權(quán)partner合作伙伴friendlink友情鏈接guide指南vote投票joinus加入header頁眉footer頁腳homepage首頁類常用名稱：名稱說明名稱說明title標(biāo)題current當(dāng)前l(fā)abel標(biāo)簽spec特別note注釋red紅色summary摘要submit提交msg提示信息textbox文本框status狀態(tài)drop下拉tips小技巧btn按鈕scroll滾動form表單icon圖標(biāo)count統(tǒng)計arr/arrow箭頭crumb導(dǎo)航cor/corner轉(zhuǎn)角/圓角breadcrumb導(dǎo)航提示導(dǎo)航常用名稱：名稱說明名稱說明nav導(dǎo)航menu菜單mainnav/glo

10、balnav主導(dǎo)航topnav頂導(dǎo)航subnav子導(dǎo)航sidebar邊導(dǎo)航leftsidebar左導(dǎo)航rightsidebar右導(dǎo)航submenu子菜單dropmenu下來菜單sidebaricon邊導(dǎo)航圖標(biāo)menucontainer菜單容器文件常用名稱：名稱說明名稱說明master.css主要文件themes.css主體文件layout.css布局、版面文件base.css基本公共文件columns.css專欄文件module.css模塊文件font.css文字樣式文件forms.css表單文件print.css打印樣式文件mend.css補丁文件二、 Reset CSSCSS Reset是

11、指重設(shè)瀏覽器的樣式。在各種瀏覽器中，都會對CSS的選擇器默認(rèn)一些數(shù)值，譬如當(dāng)h1沒有被設(shè)置數(shù)值時，顯示一定大小。但并不是所有的瀏覽器都使用一樣的數(shù)值，所以有了CSS Reset，以讓網(wǎng)頁的樣式在各瀏覽器中表現(xiàn)一致。CSS Reset的代碼。CSS Resethtml, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, k

12、bd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: bas

13、eline; :focus outline: 0; a img, iframe border: none; ol, ul list-style: none; input, textarea, select, button font-size: 100%; font-family: inherit; select margin: inherit; /* Fixes incorrect placement of numbers in ols in IE6/7 */ol margin-left:2em; 建議將Reset CSS代碼保持為reset.css上傳服務(wù)器。所有設(shè)計制作人員統(tǒng)一引用這個文件

14、。管理員在需要的時候可以維護更新此文件。（發(fā)布類頁面，將CSS Reset代碼寫在style.css中。）三、 清除浮動方法使用代碼中的ClearFix的方法清除浮動，不會像傳統(tǒng)方法清楚浮動時，在頁面中增加無用的空div，破壞文檔的結(jié)構(gòu)。ClearFix的使用方法，在需要清除浮動的父級菜單，添加class屬性clearfixClearFix的CSS代碼/* = clearfix = */.clearfix:after /*/*/ content: "." /* IE8 hack */ display: block; height: 0; clear: both; visib

15、ility: hidden; /* IE7 hack */.clearfix display: inline-block; /* IE-mac, IE5, IE6 */* html .clearfix height: 1%; .clearfix display: block; ClearFix的用法<div class="clearfix"> <div style="float:left"></div> <div style="float:right"></div></

16、div>第三章 通用規(guī)范一、 文檔結(jié)構(gòu)和命名規(guī)范文檔結(jié)構(gòu)規(guī)范style文件夾images文件夾js文件夾WEB文件夾1、 Style文件命名規(guī)范：Style文件命名規(guī)范詳見第二章2、 Images規(guī)范：Images命名規(guī)范1、CSS切圖文件按照下列命名規(guī)范：（XXX為自定義名稱）l b01.pngl b02.pngl l bN.png2、頁面中的其他照片類圖片引用絕對地址的圖片，不做切圖處理。Images切圖規(guī)范1、 采用jpg、gif、png作為切圖輸出格式。2、 切圖圖片大小根據(jù)具體項目制定，要求盡量優(yōu)化圖片。3、 CSS背景圖片輸出為PNG 8。PNG 8除了不支持動畫外，PNG8

17、有GIF所有的特點，但是比GIF更加具有優(yōu)勢的是它支持alpha透明和更優(yōu)的壓縮。所以，大多數(shù)情況下，都應(yīng)該用 PNG8不是GIF（除了非常小的圖片GIF會有更好的壓縮外）。4、 同類型的圖片進行CSS Sprites優(yōu)化。減少http請求。3、 Javascript規(guī)范：Javascript規(guī)范1、 統(tǒng)一采用jquery框架，建立常用JavaScript庫和使用文檔2、 Js命名規(guī)范：jquery-XXXX.pack.js（XXXX為自定義功能模塊名稱）第四章 項目制作完成一、 代碼的優(yōu)化（制作部分）1、 CSS代碼進行整理，優(yōu)化文檔結(jié)構(gòu)：l 選擇符頂行書寫，所有屬性都在一行內(nèi)；l 使用外部

18、樣式表，盡量不使用<style>< style />內(nèi)部樣式；l 修改頁面樣式時，檢查樣式表的有效性。減少冗余樣式代碼。2、 JS代碼進行整理，優(yōu)化文檔結(jié)構(gòu)：l 去除多余的縮進；l 將多個js代碼整理成一個js代碼。3、 HTML代碼進行整理，優(yōu)化文檔結(jié)構(gòu)：l 避免使用iframe和style標(biāo)簽，以減少頁面渲染時間；l 刪除不必要的屬性標(biāo)簽，例如table標(biāo)簽中的border="0" cellspacing="0" cellpadding="0"等，可以在CSS中定義；l 刪除空標(biāo)簽和無用的標(biāo)簽，清除浮動使用

19、.clearfix類以減少空標(biāo)簽的使用；l 減少層級嵌套，減低頁面大小。二、 跨瀏覽器兼容性1、 測試代碼在各主流瀏覽器兼容性：使用瀏覽器測試代碼在各個瀏覽器中的兼容性：制作的頁面滿足IE6+，F(xiàn)F3.5+，Chrome，Safai，Opera的兼容性。三、 項目的上傳項目頁面制作完成后，壓縮成rar文件包上傳到mantis中。Rar文件格式如下：XXXX -html-YYYYMMDD.rar說明：XXXX項目名稱，例如：家居產(chǎn)品庫項目YYYYMMDD年月日，例如：20100315第五章 頁面制作中的SEO規(guī)范一、 頁面制作中的SEO規(guī)范1、 CSS命名避免使用focus作為名稱。2、 頁面中

20、不要出現(xiàn)過多strong標(biāo)簽。3、 頁面中h1只能唯一，并且指定為頁面重要的標(biāo)題（與項目管理人員確認(rèn)）。4、 頁面中，h2h6標(biāo)題要按照等級順序書寫。5、 Img標(biāo)簽中不能缺少alt屬性6、 圖片標(biāo)題使用圖片作為背景，縮進隱藏文字，使搜索引擎可以抓取關(guān)鍵詞。7、 文字使用CSS進行文字截取以符合搜索引擎對文字的抓?。ㄅc頁面發(fā)布工程師確認(rèn)）。8、在不影響用戶體驗的情況下給鏈接加title屬性9、在不影響用戶體驗的情況下給圖片加title屬性10、對于產(chǎn)品頁，每個細欄目名稱必須是文字，建議是<h2>，如果沖突可降級(用<h3>等等)11、對于產(chǎn)品頁，圖片下方必須有文字區(qū)域12、通過外部調(diào)用的方式使用JS，如果JS必須放到頁面中，建議放到主內(nèi)容以下的位置13、對每個詳情頁正文上方增加面包屑14、代碼符合xhtml標(biāo)準(zhǔn)附錄：設(shè)計規(guī)范一、 頁面設(shè)計尺寸1、 大網(wǎng)頁面標(biāo)準(zhǔn)尺寸

溫馨提示

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

最新文檔

評論

0/150

提交評論