版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領
文檔簡介
1、web標準化頁面制作規(guī)范目錄3.7. 引言3 制作規(guī)范編寫目的及原則3 制作規(guī)范適用的工作人員3 制作規(guī)范制定的范圍4 制作規(guī)范適用的產品范圍43.8. 站點目錄結構4 目錄名稱的命名4 站點目錄s次結構43.9. html代碼編寫部分5 頁而文件的人小5 頁而文件內容顯示時長5 代碼的編寫格式5 文件名稱的命名6 文件的標準名稱6 doctype 聲名6 xmlns命名空間聲明7 meta標簽描述7 title頁面標題7 引入css樣式文件8 引入script腳本文件8 代碼的結構8 表格代碼定義9 標簽屬性位定義9 標簽屬性的縮寫9 引入w片的定義9 頁而內容的長度定義10 代碼的測試10
2、 代碼的校驗113.10. css代碼編寫部分11 文件的人小定義11 代碼的編寫格式11 文件名稱的命名11 基本文件12 文件的編碼12 id和class命名的規(guī)拖13 注釋的寫法13 代碼書寫樣式14 通用樣式定義標準143.11. 內容制作部分15 閔片大小15 閔片的名稱15 關于1像素透明網片15 圖片的應用格式16 lal客寬度的適應16可拉仲的內容定義16適當拉伸的內容定義16不川拉伸的內容定義171. 引言w3c是“world wide web consortium”的縮寫，中文名稱為“萬維網組織”。w3c主耍工作是研究和制定開放的規(guī)范(事實上的標準)，以便提高web相關產品
3、的互用性。 web鉍準足由w3c和ecma制定的一系列«準的集合。web標準化的m頁主要由三部分組成：結構(structure)、表現(presentation)和行為 (behavior)：結構化標準語言主要包拈：xhtml1.0；表現標準語言主要包拈：css2.0；行為標準主耍包括：ecmajavascript。xhtml a： the extensible hypertext markup language 可擴展杯識語言的縮寫，楚一種增強了 的 html。c s s是cascading style sheet的縮寫，譯作層疊樣式表單，簡稱樣式表。是用于 增強和控制網頁內容樣式
4、并允許將樣式信息與內容相分離的一種記性語言。3.2. 制作規(guī)范編寫目的及原則木文檔是作為web頁而制作的一個規(guī)范性的文件，可以幫助提高部門頁側制作人員建立相關 部門的貝而制作規(guī)范文件。制作原則：縮減文件人小，減少文件內矜服務器的請求3.3. 制作規(guī)范適用的工作人員木文檔主要ifti向web頁衡制作人虬頁iftf設計人m和貞曲'開發(fā)人m也可以參閱y解相關內容， 閱讀本文檔志耍掌握相太基礎知識：掌握htmw.o和xhtmh.0相關標準和川法；掌握css2.0相關標準和屬性；對script腳本的作用和用法有一定程度的了解。3.4. 制作規(guī)范制定的范本文捫對目錄建立、xhtml文件編寫、css
5、樣式編寫以及制做中的方法進行了規(guī)范化定義。 對于木文襠中一些需要掌握的技術技能和技木知識木文檔不做詳細描述，請：w外閱讀相關技術知識文襠。3.5. 制作規(guī)范適用的產品范本文檔適用于基于html頁面的產品。2. 站點目錄結構2.1. 目錄名稱的命名【規(guī)則內界】采川小寫的英文單詞或拼音、k劃線、數字，長度不超過20個字符，名稱要能反 映r錄的閃容，起到語義化效果?！狙a充說明】不要使用數字、下劃線做目錄名的開頭，不要采用中文字符和特殊字符命名目錄。 【示例內界】圖片0錄（images ）2.2. 站點目錄層次結構目錄建立的原則：以文件類型來分別建立相應的目錄?！疽?guī)則內容】以下為站點目錄結構：z cs
6、s文件r錄：存放css樣式文件ii、css tr"! flashflash文件鬥錄：存放.swf文件htmlhtrnl文件鬥錄：存放分內容貝而i, images images 文件 0 錄javascript文件鬥錄:存放圖片文件存放js文件lp j avascriptlc language _librarylanguage 文件 0隸：存放多種語言文件lr templates1 ibrary文件門錄：存放庫文件查index, htmltemplates文件目錄:存放模板頁面product, html j pro duct add. htmlindex.html首頁文件product
7、_edi t. ktmlproduct, html產品內容文件國 readme, txt【補充說明】z fi錄的層次深度=3層；如果是綜合門戶和產品類型的站點，則可以在html目錄巾建立相應目錄，將 各分欄目的頁而文件分別存放屮；z如果有換膚效果時，則可以在css目錄中再建立換膚目錄，將所有換膚樣式存放其屮；z 如果單個分欄目的html頁面超過50頁時，則可以在html鬥錄中建立分欄目 的目錄；z如果以上目錄沒冇所需要的目錄類別，可肖建立新h錄，名稱要盡fi語義化; z 以上目錄根據需要選擇建立，但是一個站點只允許冇一個上述的fi錄存在。【示例內容】圖片目錄(images )3. html代碼
8、編寫部分3.1.頁面文件的大小頁面文件的大小直接關系到下載時的速率，所以一定要控制文件的大小。 【規(guī)則p、j容】單個頁面的字節(jié)大?。捍a+文字內界=30k圖片 + flash = 120k代碼+文字閃容+閣片+ flash = 150k【補充說明】無 【示例內容】無頁面文件內容顯示時長【規(guī)則閃容】52k網絡帯寬的情況下：苗頁面時，50%的頁面內界顯示的吋間=3秒，否則要有l(wèi)oading條提示。 二級頁謝時，50%的頁側內容顯示的時間=2秒，否則要冇loading條提示【補充說明】無【示例內容】測算工具：dreamweaver根拋貞*jfti的整個閃容(包柄所有鍍接對象，例如圖像和插件) 來計算
9、大小選擇編鉗(edit)首選參數(preferences) 狀態(tài)欄(status bar) 連接速度(connect ion)在右下角狀態(tài)欄會顯示計算結果：| v q, 100%1251 x 437x( ik/lsec3.3.代碼的編寫格式【規(guī)則閃容】所有html標簽和屬性名，在xhtml文捫巾必須采用小寫格式。 【補充說明】無 【示例內容】正確代碼格式：<body></body>z錯誤代碼格式：<body></body>3.4.文件名稱的命名【規(guī)則內容】采用小寫的英文單詞或拼音、下劃線、數字，名稱長度=20字符名稱耍語義化。 【補充說明】不要使
10、用數字、下劃線做n錄名的幵失，不要采用中文字符和特殊字符命名；兩個以上單詞表達吋，川卜*劃線“_”分開兩個單詞，最多不要超過三個以上 單詞；例:name_edit.html;z xhtml文件名的a綴必須為“.html”?！臼纠齼热荨?頁文件名：index.html z 二級頁文件：name.htmlname_add.htmlname_edit.htmlname_view.htmlname_del.htmlname*.html二級頁關聯添加文件: 二級頁關聯修改文件: 二級頁關聯杏看文件: 二級頁關聯刪除文件: 二級頁關聯其它文件:3.5.文件的標準名稱【規(guī)則內容】首頁文件名稱:index.h
11、tml 登錄文件名稱：login.html 幫助文件名稱:help.html【補充說明】無 【示例內界】無3.6. doctype 聲名每一個符合web標準的貝而必須4:文件代碼的最頂部添加一個doctype聲明，用來說明此 文件的類型是xhtml?！疽?guī)則內容】，普通頁面文件采川過渡型(transitional)聲明 <! doctype html public "-/w3c/dtd xhtml 1.0 transitional/en""/tr/xhtml1/dtd/xhtml1-transitional.dtct>z框
12、架頁面文件采用此聲明<! doctype html public "-/w3c/dtd xhtml 1.0 frameset/en""/tr/xhtml1/dtd/xhtml1-frameset.dtd">z模板頁面文件采川此聲明<!doctype html public "-/w3c/dtd xhtml 1.0 transitional/en" "/tr/xhtml1/dtd/xhtml1-transitional.dtd">
13、【補充說明】無 【示例內容】無xmlns命名空間聲明xhtml是html xml過渡的標識語言，它需要符合xml文檔規(guī)則，w此需要定義命名空1川。 【規(guī)則內容】<html xmlns=h/1999/xhtml"> </html>【補充說明】必須添加xmlns命名空問聲明 【示例內容】無meta標簽描述meta標簽川來描述-個html網頁文檔的屬性，例如字符編碼、網頁描述、關鍵詞、h 期等信息。meta標簽內容直接關系到對搜索引擎的友好度，所以一定要建立好相關信息。 【規(guī)則內容】<meta http-equiv="
14、content-type" content="text/html; 01361=字符編碼"/><meta name=”description" content="網頁描述” /><meta name="keywords” content="關鍵詞"/>【補充說明】前臺制作與盾臺開發(fā)的編碼格式一定要一致 z字符編碼：國際化的項目采用編碼：utf-8；字符編碼：簡體屮文項s采川編碼：gb2312；z字符編碼：繁體中文項目采用編碼：gbk;【示例p、j容】無title頁面標題【規(guī)則內界】&l
15、t;title>頁而內容標題</title>【規(guī)則內容】z非框架類型的文件，則要在毎個頁而中title寫明與容對應的標題。 z框架類型的文件，附屬的文件在k頁面屮可不用添寫title內容。 z title內容要簡潔、明確，不要超過20個字符?！臼纠齼冉纭繜o引入css樣式文件貝而中的樣式定義耍全部放入css樣式文件中，采用引入至xhtml文件中方法來應用。 【規(guī)則內容】clink rel="stylesheeth type="text/css" href=" css 文件路徑"/>【補充說明】特例：綜合類型的站點首貝，討以
16、考慮將css樣式代碼直接嵌入頁而代碼幵始處, 以減少頁面諮求次數，加快頁面顯示速率。【示例內容】無引入script腳本文件【規(guī)則內容】script type="text/javascript" src=*'script 文件路徑"></script>【補充說明】為加快頁面顯示速度，可以將js代碼放在頁面代碼最末尾處。要確保腳木文件的兼容性，在不同的瀏覽器中能正常使用。禁止添加language屬性，因其在xhtml1. 0中不被支持?！臼纠齼冉纭繜o代碼的結構【規(guī)則內容】代碼的結構耍保持完整性，單個標簽必須關閉?！狙a充說明】無 【示例內界】成
17、對標簽必須冇結束標簽代碼格式：<div>.錯誤代碼：<div>.</div>單個標簽必須關閉代碼格式：<br/、<hr/>、<img/>、input/、<meta/>錯誤代碼：<br>、<hr、<img、input、<meta>3.13.表格代碼定義【規(guī)則p、j容】表格的嵌套<=3層?！狙a充說明】確保代碼層次分明；表格樣式耍使用css文件進行控制?！臼纠齼热荨?lt;table><th><td>.</td></th><
18、;tr><td>.</td></tr></table>3.14.標簽屬性值定義【規(guī)則內容】屬性值耍使川雙引兮“”?！狙a充說明】無【示例內稗】代碼格式:input type="checkbox" name="shirt. value="medium" checked=”checked”/> 錯誤代碼：input type="checkbox name="shirt value=medium checked=checked />3.15.標簽屬性的縮寫【規(guī)則內容】
19、屬性值禁止縮寫 【補充說明】無 【示例內界】代碼格式:<input type="checkbox" name="shirt" value="medium" checked="checked"/> 錯誤代碼:input type="checkbox" name="shirt" value=medium" checked />3.16.引入圖片的定義【規(guī)則內界】tmg標簽十必須添加alt屬性，文字表述要清晰。 【補充說明】心屈性說明有利于搜索引擎的檢索
20、；當圖片沒有顯示時，alt屬性會標示出此圖片的說明?！臼纠齼热荨?lt;img src=倒片路徑"alt=，片說明n /3.17.頁面內容的長度定義【規(guī)則p、j容】頁而a容不要人長，以免影響瀏覽者對內容的接收質m。 【補充說明】產品類：首頁的縱向滾屏 二級頁縱向滾屏門戶類：首頁的縱向滾屏 二級頁縱h'd滾屏<=1024*768分辨率下的1屏 <=1024*768分辨率下的4屏<=1024*768分辨率下的3屏 <=1024*768分辨率下的4屏【示例內容】無3.18.代碼的測試【規(guī)則閃容】制作完的頁而一定要通過ie6、ie7和firefox瀏覽器的測試
21、。【補充說明】禁止在1024*768分辨率下出現水平橫滾動條。測試的瀏覽器：(2007.11月統計)市場占有率前三名：ie6 (87%)、ie7 (10%)、firefox2.0 (2%) 圖示:2007.11統計卿震代 ms ie6.0 ms ie7.0 firefox2.0 其他87%測試的分辨率.市場使用率:1024x768 (77%)、1280x800 (8%,此為寬屏分辨率) 圖示:2007.11統計 1024x768 1280x800 1280x1024 800x600 1440x900 1152x864 1280x76877%【示例pl容】無3.19.代碼的校驗【規(guī)則內容】制作完
22、的頁面一定要校驗代碼足否符合w3c的標準?！狙a充說明】代碼驗i正路徑：http:/validator.w3.org/#validate by upload【示例a容】無4. css代碼編寫部分5.5.2. 文件的大小定義【規(guī)則p、j容】樣式文件=25k （單位：每css文件）【補充說明】如有多個css文件時，要考慮載入xhtml文件吋的平衡性，不要加載過多的 css文件?！臼纠齪、j容】無5.5.3. 代碼的編寫格式【規(guī)則內容】所冇css代碼要采用小寫格式，不包括class和id名稱 【補充說明】無 【示例內界】無5.5.4. 文件名稱的命名css文件命名的指導思想是：短小、語義化名稱，這樣可
23、以使自己和工作組的每一個成員 能夠方便的理解和記憶文件的意義，方便杏找、修改、替換、移植等操作，提島工作效率。.【規(guī)則內界】采川小寫的英文單詞或拼音、k劃線、數字，長度=20個字符 【補充說明】z不要使用數字、下劃線做目錄名的丌頭，不要采用屮文字符和特殊字符命名 目錄。兩個以上單詞表達時，用下劃線“分丌兩個單詞，最多不要超過三個以上 單詞?！臼纠齼热荨抗畼映晌募篶ommon.css4.4.基本文件【規(guī)則內界】通用樣式文件名：common, css （必選，不xt修改此文件名）負責頁面整體布局的樣式和公共樣式，必須采用此文件名，具右唯一性。xt擴屁的樣成文件：module, css （xt選
24、，w修改此文件名）只適用于單個模塊的樣式，不具有通用性，文件名可以自己定義。【補充說明】無【示例內容】個性模塊=module.css字體模塊=module_font.css顏色模塊=module_color.css內容專欄=module_columns.css頁jftf文字=modulc_tcxt.css災面表單=module_forms.css打印模塊=moduleprint.css4.5.文件的編碼如果項h對編碼有要求，則需遵4指定的編碼要求。【規(guī)則內界】代碼格式：chanset”編碼”，前臺制作與后臺開發(fā)的編碼格式一定要一致。 【補充說明】國際化的項目采用編碼：utf-8；簡體屮文項b采
25、川編碼：gb2312；繁體中文項目采川編碼：gbk;【示例內容】無4.6. id和class命名的規(guī)范如果項n對編碼冇耍求，則耑遒守指定的編碼耍求?！疽?guī)則內容】采川英文單詞、拼音作為其名稱，兩個單詞時第二個單詞的首字母要大寫， 不超過20個字符忪?！狙a充說明】不要使用id來進行樣式定義，如有特殊情況請標明緣由。禁止用數字開尖命名，禁止用中文命名，禁止用特殊字符命名；同一類型的id和class名稱第一個單詞要一致?！臼纠W界】示例一：z 兩個單詞 class 名稱：.productlistz 三個單詞 class 名稱：productlistleft示例二：z 字 體：.font z 紅色字體：
26、fontred綠色字體：.fontgreen 加粗字體：fontbold4.7.注釋的寫法【規(guī)則內界】css文件編寫時要添加注釋內各，完成后進行對外發(fā)布吋，可將注釋內界去掉， 以減少文件的大小【補充說明】其體注釋格式采用以卜格式：z css文件中必須冇如下信息放在文件中域上部分*z巾 ，;，巾巾，;，屮巾，巾屮巾，;，巾屮巾，個，7,巾，巾巾巾ri，巾巾巾ri，巾，y，*7*屮巾，y，*7*file name： common.csspersonnel： *date： 2007-1-10contact：namecontent：:奴面制作樣式庫文件*?* *1* *1*
27、 *1* *?* （z7/z個性模塊a容樣式信息（冇個性模板時選擇此格式）個性模塊內容區(qū)注釋樣式/*本冰* content end */z單個樣式的注釋信息 /* content */z csshack 注釋使用了 csshack，一定要添加注釋，并且要寫明為什么使用此csshack 【示例pl容】無4.8.代碼書寫樣式【規(guī)則閃容】代碼要采用閥定的格式 【補充說明】無 【示例閃容】/* content */.test width： 100%；(前面空白的地方使用tab鍵空一格).testleft width： 100%；(前面空白的地方使用tab鍵空一格)4.9.通用樣式定義標準在毎個css文
28、件定義的公共n容中，都要初始化定義以卜p、j容 【規(guī)則內界】盤個站點的v?景色(background)：缺省時定義為白色; 巾文大小(font-size): 12px；巾文字體(font-family):宋體；英文字體(font-family): arial, helvetica, sans-serif； 表單值(form): opx；空白(margin): opx；間隙(padding): opx；字體鏈接顏色:a:link、a:visited、a:active、a:hover 圖片邊框(img): border:()px；輸入框定義(i叩ut)z按鈕定義(button)【補充說明】在定義樣
29、式文件時，一定要注意默認值這個問題，因為不同瀏覽器對默認值的解 釋都不一樣，所以在定義屬性吋，要考慮默汄值的影響問題【示例內容】無5.內容制作部分5.1.圖片大小【規(guī)則內容】閣片的字節(jié)數大小<=12k （單個閣片）背景圖字節(jié)數人小<=10k （單個圖片）首頁：圖片+ flash <= 120k （單位：每xhtml頁）二級頁：圖片+ flash <= 100k （單位：每xhtml頁）【補充說明】圖片字節(jié)人小要壓縮至最小化【示例內容】圖片的字節(jié)數計算公式：k= （l *s/58oo） *1.80 （當 l彡300）許可誤差 9.0k k= （l*s/3200） *1.65 （當 200彡l<300）許可誤差 4.0k k= （l*s/2000） *1.50 （當 100<l<200）許可誤差 2.0k k= （1*s/ 1800） *1.40 （當 50彡l<100）許可誤差 1.
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
- 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
- 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
- 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
評論
0/150
提交評論