一種通用的網(wǎng)頁(yè)設(shè)計(jì)規(guī)范

2013-12-12 09:32:19 電力信息化　點(diǎn)擊量：評(píng)論 (0)

0引言作為B S架構(gòu)辦公自動(dòng)化系統(tǒng)的主要角色，網(wǎng)頁(yè)已經(jīng)被越來(lái)越多地應(yīng)用到實(shí)際工作中去，而基于網(wǎng)頁(yè)的動(dòng)態(tài)站點(diǎn)則成為重要的一種軟件系統(tǒng)應(yīng)用方式。我們?cè)趨⒖剂吮姸嗟木W(wǎng)頁(yè)設(shè)計(jì)文檔后發(fā)現(xiàn)，大多數(shù)的網(wǎng)頁(yè)在設(shè)計(jì)時(shí)除

3）排版中我們經(jīng)常會(huì)遇到需要進(jìn)行首行縮進(jìn)的處理，不要使用或者全角空格來(lái)達(dá)到效果，規(guī)范的做法是在樣式表中定義 p { text-indent: 2em; } 然后給每一段加上 <p> 標(biāo)記，注意，一般情況下，請(qǐng)不要省略 </p> 結(jié)束標(biāo)記。

4）原則上，我們禁止用 <img width=? height=?> 來(lái)人為干預(yù)圖片顯示的尺寸，而且建議 <img> 標(biāo)簽中不要帶上width 和height 兩個(gè)屬性，這是因?yàn)橹谱鬟^(guò)程中，圖片往往需要反復(fù)的修改，這樣可以避免人為干預(yù)圖片顯示的尺寸，盡可能的發(fā)揮瀏覽器自身的功能；但是這樣的一個(gè)副作用是當(dāng)網(wǎng)頁(yè)還未加載圖片時(shí)，不會(huì)留出圖片的站位大小，可能會(huì)造成網(wǎng)頁(yè)在加載過(guò)程中抖動(dòng)（如果圖片是插在一個(gè)固定大小的表格里的，不會(huì)有這個(gè)現(xiàn)象），尤其是當(dāng)圖片的尺寸較大時(shí)，這種現(xiàn)象會(huì)很明顯，所以當(dāng)預(yù)料到這種會(huì)明顯導(dǎo)致網(wǎng)頁(yè)抖動(dòng)的情況會(huì)發(fā)生時(shí)，請(qǐng)大家務(wù)必在最后給 <img>附上 width 和 height 屬性。

5）為了最大程度的發(fā)揮瀏覽器自動(dòng)排版的功能，在一段完整的文字中請(qǐng)盡量不要使用<br> 來(lái)人工干預(yù)分段。

6）不同語(yǔ)種的文字之間應(yīng)該有一個(gè)半角空格，但避頭的符號(hào)之前和避尾的符號(hào)之后除外漢字之間的標(biāo)點(diǎn)要用全角標(biāo)點(diǎn)，英文字母和數(shù)字周圍的括號(hào)應(yīng)該使用半角括號(hào)。

7）所有的字號(hào)都應(yīng)該用樣式表來(lái)實(shí)現(xiàn)，禁止在頁(yè)面中出現(xiàn) <font size=?> 標(biāo)記。

8）請(qǐng)不要在網(wǎng)頁(yè)中連續(xù)出現(xiàn)多于一個(gè) 的也盡量少使用全角空格（英文字符集下，全角空格會(huì)變成亂碼），空白應(yīng)該盡量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 圖片來(lái)實(shí)現(xiàn)。

9）中英文混排時(shí)，我們盡可能的將英文和數(shù)字定義為verdana 和arial 兩種字體。

10）行距建議用百分比來(lái)定義，常用的兩個(gè)行距的值是line-height:120%/150%。

11）網(wǎng)站中的路徑全部采用相對(duì)路徑，一般鏈接到某一目錄下的缺省文件的鏈接路徑不必寫(xiě)全名，如我們不必這樣：<a href=”aboutus/index.htm”> 而應(yīng)該這樣：<a href=”aboutus/”>

12）嵌入圖形文本的使用較大的字體，建議不要在圖形中包括文本。

13）“網(wǎng)頁(yè)大小”定義為網(wǎng)頁(yè)的所有文件大小的總和，包括HTML文件和所有的嵌入的對(duì)象。用戶喜歡快的而不是新奇的站點(diǎn)。對(duì)于解調(diào)器用戶，網(wǎng)頁(yè)大小保持在34K以下為合適。

4文件命名原則

1）每一個(gè)目錄中應(yīng)該包含一個(gè)缺省的html 文件，文件名統(tǒng)一用index.htm

2）文件名稱統(tǒng)一用小寫(xiě)的英文字母、數(shù)字和下劃線的組合。

3）命名原則的指導(dǎo)思想一是使得你自己和工作組的每一個(gè)成員能夠方便的理解每一個(gè)文件的意義，二是當(dāng)我們?cè)谖?/span>

上一頁(yè) 1 2 3 4 5 下一頁(yè)

責(zé)任編輯：和碩涵

免責(zé)聲明：本文僅代表作者個(gè)人觀點(diǎn)，與本站無(wú)關(guān)。其原創(chuàng)性以及文中陳述文字和內(nèi)容未經(jīng)本站證實(shí)，對(duì)本文以及其中全部或者部分內(nèi)容、文字的真實(shí)性、完整性、及時(shí)性本站不作任何保證或承諾，請(qǐng)讀者僅作參考，并請(qǐng)自行核實(shí)相關(guān)內(nèi)容。

我要收藏

個(gè)贊