一種通用的網(wǎng)頁設(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)頁已經(jīng)被越來越多地應(yīng)用到實(shí)際工作中去，而基于網(wǎng)頁的動(dòng)態(tài)站點(diǎn)則成為重要的一種軟件系統(tǒng)應(yīng)用方式。我們?cè)趨⒖剂吮姸嗟木W(wǎng)頁設(shè)計(jì)文檔后發(fā)現(xiàn)，大多數(shù)的網(wǎng)頁在設(shè)計(jì)時(shí)除

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

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

</td>

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

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

屬于同一個(gè)級(jí)別的 <table> 一定是左首對(duì)齊的，另外不允許沒有任何內(nèi)容的空的單元格存在，高度大于等于12px 的單元格應(yīng)該在 <td> 和 </td> 之間寫一個(gè) 如果高度小于12px, 則應(yīng)該在 <td> 和 </td> 之間插入一個(gè)1*1 大小的透明的gif 圖片，這是因?yàn)槟承g覽器認(rèn)為空單元格非法而不會(huì)予以解釋。如果代碼順序較亂，可以通過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)多于一個(gè)的控制同一個(gè)單元格大小的height 和width, 保證任何一個(gè)width 和height 都是有效的，也就是你改動(dòng)代碼中任何一個(gè)width 和height 的數(shù)值，都應(yīng)該在瀏覽器中看到變化。做到這一條不容易，需要較長(zhǎng)時(shí)間的練習(xí)和思考。

3一般原則

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

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

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

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

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

我要收藏

個(gè)贊