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

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

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

<table><tr>對齊，<td> 縮進(jìn)兩個半角空格，<td> 中如果還有嵌套的表格，<table>也縮進(jìn)兩個半角空格，如果<td>中沒有任何嵌套的表格，</td> 結(jié)束標(biāo)記應(yīng)該與 <td> 處于同一行，不要換行，

如我們注意在源代碼中不應(yīng)有這樣的代碼：

</td>

而應(yīng)該是這樣的：

這是因為瀏覽器認(rèn)為換行相當(dāng)于一個半角空格，以上不規(guī)范的寫法相當(dāng)于無意中增加一個半角空格，如果確實有必要增加一個半角空格，也應(yīng)該這樣寫：

屬于同一個級別的 <table> 一定是左首對齊的，另外不允許沒有任何內(nèi)容的空的單元格存在，高度大于等于12px 的單元格應(yīng)該在 <td> 和 </td> 之間寫一個如果高度小于12px, 則應(yīng)該在 <td> 和 </td> 之間插入一個1*1 大小的透明的gif 圖片，這是因為某些瀏覽器認(rèn)為空單元格非法而不會予以解釋。如果代碼順序較亂，可以通過command->apply souce formatting進(jìn)行重新整理！

4）Width 和height 的寫法也有統(tǒng)一的規(guī)范，一般情況下只有一列的表格，width 寫在<table> 的標(biāo)簽內(nèi)，只有一行的表格，height 寫在 <table> 的標(biāo)簽內(nèi)，多行多列的表格，width 和height 寫在第一行或者第一列的 <td> 標(biāo)簽內(nèi)。總之遵循一條原則：不出現(xiàn)多于一個的控制同一個單元格大小的height 和width, 保證任何一個width 和height 都是有效的，也就是你改動代碼中任何一個width 和height 的數(shù)值，都應(yīng)該在瀏覽器中看到變化。做到這一條不容易，需要較長時間的練習(xí)和思考。

3一般原則

1）在排布表格之前，請大家一定要好好思考一個最佳的方案，表格的嵌套盡量控制在三層以內(nèi)，并且應(yīng)該盡量避免 <colspan>，<rowspan> 兩個標(biāo)記，經(jīng)驗表明，這兩個標(biāo)記會帶來許多麻煩。

2）一個網(wǎng)頁要盡量避免用整個一張大表格，所有的內(nèi)容都嵌套在這個大表格之內(nèi)，因為瀏覽器在解釋頁面的元素時，是以表格為單位逐一顯示，如果一張網(wǎng)頁是嵌套在一個大表格之內(nèi)，那么很可能造成的后果就是，當(dāng)瀏覽者敲入網(wǎng)址，他要先面對一片空白很長時間，然后所有的網(wǎng)頁內(nèi)容同時出現(xiàn)。如果必須這樣做，請使用 <tbody>標(biāo)記，以便能夠使這個大表格分塊顯示。

3）排版中我們經(jīng)常會遇到需要進(jìn)行首行縮進(jìn)的處理，不要使用或者全角空格來達(dá)到效果，規(guī)范的做法是在樣式表中定義 p { text-indent: 2em; } 然后給每一

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

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

我要收藏

個贊