CSS網頁佈局也可以算是一個系統的工作，DIVCSS網站的開發可能有多人協作，由一個團隊來完成，這就涉及到很多規範性操作的問題，即使是一個人進行開發，也需要有一定的條理和規範，這是一篇轉載自藍色的文章，非常有效，作者總結了許多實用的經驗，大家可以參考學習。 總論 本規範既是開發規範，也是腳本語言參考，本規範並非一成不變的必須嚴格遵守的條文，特殊情況下要靈活運用，做一定的變通。但是，請大家千萬不要隨意更改規範。如果有任何問題，請及時與我聯繫，我會及時更改本規範的相關程式碼範例和文件。 基本要求 1. 在網站根目錄中開設images common temp 三個子目錄，根據需要再開設media 子目錄，images目錄中放不同欄目的頁面都要用到的公共圖片，例如公司的標誌、banner 條、菜單、按鈕等等；common 子目錄中放css、js,、php、include 等公共文件；temp 子目錄放客戶提供的各種文字圖片等等原始資料；media 子目錄中放置flash, avi, quick time等多媒體檔案。 2. 在根目錄中原則上應該按照首頁的欄目結構，給每一個欄目開設一個目錄，根據需要在每一個欄目的目錄中開設一個images 和media 的子目錄用以放置此欄位專有的圖片和多媒體文件，如果這個欄目的內容特別多，又分出很多下級欄目，可以相應的再開設其他目錄。 3. temp 目錄中的檔案往往會比較多，建議以時間為名稱開設目錄，將客戶陸續提供的資料歸類整理。 4. 除非有特殊情況，目錄、文件的名稱全部用小寫英文字母、數字、底線的組合，其中不得包含漢字、空格和特殊字符；目錄的命名請盡量以英文為指導，不到萬不得已不要以拼音作為目錄名稱，經驗證明，用拼音命名的目錄往往連一個月後的自己都看不懂， 腳本編寫 我們應該有一個腳本整體風格一致的概念，意思是一個月後和一個月前的你寫的腳本風格保持一致，以及同一個工作組中不同的開發人員編寫的腳本風格保持一致，因為我們不可能永遠孤立的開發，你隨時都有可能和三個月前的自己合作（你的客戶要求改版），也經常要和工作室中不同的同事共同開發一個項目，還有可能被要求修改已經離職人員開發的腳本，當然你自己也有可能會丟下一個專案給後來的同事。 1. Html 檔案的通用範本： div css xhtml xml Example Source Code Example Source Code [www.52css.com] 其他meta標記 div css xhtml xml Example Source Code Example Source Code [www.52css.com] 樣式表定義客戶端Javascript 函數定義及初始化操作 div css xhtml xml Example Source Code Example Source Code [www.52css.com] 補充： 2. 允許全文檢索的頁面，為了使Internet上的搜尋引擎能夠有效檢索，在頻道的首頁的html的<head></head>之間應該加入Keywords 和Description 元標記，例如： div css xhtml xml Example Source Code Example Source Code [www.52css.com] 3. CSS 檔案的格式範例程式碼： div css xhtml xml Example Source Code Example Source Code [www.52css.com] 這裡尤其要注意的是a:link a:visited a:hover a:actived 的排列順序一定要嚴格照上面的範例程式碼，否則或多或少會出問題。另外我們規定重訂的最先，偽類其次，自訂最後，方便自己和他人閱讀！ 為了確保不同瀏覽器上字號保持一致，字號建議用點數pt和像素px來定義，pt一般使用中文宋體的9pt和11pt，px一般使用中文宋體12px 和14.7px 這是經過優化的字號，黑體字或者宋體字加粗時，一般選用11pt和14.7px 的字號比較適合。 在寫<table> 互相嵌套時，嚴格按照的規範，對於單獨的一個<table>來說，<table>< tr>對齊，<td> 縮進兩個半角空格，<td> 中如果還有嵌套的表格，<table>也縮排兩個半角空格，如果<td>中沒有任何嵌套的表格，</td> 結束標記應該與<td> 處於同一行，不要換行， 如我們注意在原始碼中不應有這樣的程式碼： div css xhtml xml Example Source Code Example Source Code [www.52css.com] 而應該是這樣的： div css xhtml xml Example Source Code Example Source Code [www.52css.com] 這是因為瀏覽器認為換行相當於一個半角空格，以上不規範的寫法相當於無意中增加一個半角空格，如果確實有必要增加一個半角空格，也應該這樣寫： div css xhtml xml Example Source Code Example Source Code [www.52css.com] 屬於同一個等級的<table> 一定是左首對齊的，另外不允許沒有任何內容的空的單元格存在，高度大於等於12px 的單元格應該在<td> 和</td> 之間寫一個，如果高度小於12px, 則應該在<td> 和< /td> 之間插入一個1*1 大小的透明的gif 圖片，這是因為某些瀏覽器認為空單元格非法而不會予以解釋。如果程式碼順序較亂，在DW3中可以透過command->apply souce formatting進行重新整理！ 5. Width 和height 的寫法也有統一的規範，一般情況下只有一列的表格，width 寫在<table> 的標籤內，只有一行的表格，height 寫在< table> 的標籤內，多行多列的表格，width 和height 寫在第一行或第一列的<td> 標籤內。總之遵循一條原則：不出現多於一個的控制同一個單元格大小的height 和width, 保證任何一個width 和height 都是有效的，也就是你改動代碼中任何一個width 和height 的數值，都應該在瀏覽器中看到變化。要做到這一點不容易，需要較長時間的練習和思考。 一般原則 1. 在排布表格之前，請大家一定要好好思考一個最佳的方案，表格的嵌套盡量控制在三層以內，並且應該盡量避免<colspan> <rowspan> 兩個標記，經驗表明，這兩個標記會帶來許多麻煩。 2. 一個網頁要盡量避免用整個一張大表格，所有的內容都嵌套在這個大表格之內，因為瀏覽器在解釋頁面的元素時，是以表格為單位逐一顯示，如果一張網頁是嵌套在一個大表格之內，那麼很可能造成的後果就是，當瀏覽者敲入網址，他要先面對一片空白很長時間，然後所有的網頁內容同時出現。如果必須這樣做，請使用<tbody>標記，以便能夠使這個大表格分塊顯示。 3. 排版中我們常常會遇到需要進行首行縮排的處理，不要使用或全角空格來達到效果，規範的做法是在樣式表中定義p { text-indent: 2em; } 然後給每一段加上<p> 標記，注意，一般情況下，請不要省略</p> 結束標記。 4. 原則上，我們禁止用<img width=? height=?> 來人為幹預圖片顯示的尺寸，而且建議<img> 標籤中不要帶上width 和height兩個屬性，這是因為製作過程中，圖片往往需要反覆的修改，這樣可以避免人為幹預圖片顯示的尺寸，盡可能的發揮瀏覽器自身的功能；但是這樣的一個副作用是當網頁還未加載圖片時，不會留出圖片的站位大小，可能會造成網頁在加載過程中抖動（如果圖片是插在一個固定大小的表格裡的，不會有這個現象），尤其是當圖片的尺寸較大時，這種現象會很明顯，所以當預料到這種會很明顯導致網頁抖動的情況會發生時，請大家務必在最後給<img>附上width和 height 屬性。 5. 為了最大程度的發揮瀏覽器自動排版的功能，在一段完整的文字中請盡量不要使用<br> 來人工幹預分段。 6. 不同語種的文字之間應該有一個半角空格，但避頭的符號之前和避尾的符號之後除外漢字之間的標點要用全角標點，英文字母和數字周圍的括號應該使用半角括號。 7. 所有的字號都應該用樣式表來實現，禁止在頁面中出現<font size=?> 標記。 8. 請不要在網頁中連續出現多於一個的也盡量少使用全角空格（英文字符集下，全角空格會變成亂碼），空白應該盡量使用text-indent, padding, margin, hspace, vspace 以及透明的gif 圖片來實現。 9. 中英文混排時，我們盡可能的將英文和數字定義為verdana 和arial 兩種字體。 10. 行距建議用百分比來定義，常用的兩個行距的值是line-height:120%/150%. 11. 網站中的路徑全部採用相對路徑，一般連結到某一目錄下的缺省文件的連結路徑不必寫全名，如我們不必這樣：<a href=”aboutus/index.htm”> 而應該這樣：<a href=”aboutus/”> 12. 嵌入圖形文字的使用較大的字體，建議不要在圖形中包含文字。 13.「網頁大小」定義為網頁的所有檔案大小的總和，包括HTML檔案和所有的嵌入的物件。用戶喜歡快的而不是新奇的網站。對於解調器用戶，網頁大小保持在34K以下為合適。 文件命名原則 1. 每一個目錄中應該包含一個缺省的html 文件，文件名統一用index.htm 2.件名稱統一用小寫的英文字母、數字和底線的組合。 3. 命名原則的指導思想一是使得你自己和工作組的每一個成員能夠方便的理解每一個文件的意義，二是當我們在文件夾中使用“按名稱排例”的命令時，同一種大類的文件能夠排列在一起，以便我們可以找到、修改、替換、計算負載量等等操作。 4. 以下以「新聞」（包含「國內新聞」和「國際新聞」）這個欄位來說明html 檔案的命名原則： 5. 圖片的命名原則遵循以下幾個規範： ☆ 尾部分用來表示圖片的具體意義。 ☆ 以下是幾個範例，大家應該可以一眼看懂圖片的意義： div css xhtml xml Example Source Code Example Source Code [www.52css.com]
<html>
<!–
Generator: Sub Design Studio ( www.eastline.net.cn )
Creation Data: 2000-8-1
original Author: eastline
–>
<head>
<title> 文件標題</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<meta name="author" content="eastline">
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body bgcolor="#ffffff">
… …
</body>
為了確保網站能夠與下一代的web 語言xml 標準兼容，所有的HTML 標籤的屬性都要用單引號或雙引號括起，即我們應該寫<a href=”url”> 而不是<a href=url >.
<meta name=”keywords” content=”東方新幹線，汽車，買車"/>
<meta name=”description” content=”東方新幹勁線，全球中文汽車資訊第一站"/>
<style type="text/css">
<!—
p { text-indent: 2em; }
body { font-family: "宋體"; font-size: 9pt; color: #000000; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px}
table { font-family: "宋體"; font-size: 9pt; line-height: 20px; color: #000000}
a:link { font-size: 9pt; color: #FFFFFF; text-decoration: none}
a:visited { font-size: 9pt; color: #99FFFF; text-decoration: none}
a:hover { font-size: 9pt; color: #FF9900; text-decoration: none}
a:active { font-size: 9pt; color: #FF9900; text-decoration: none}
a.1:link { font-size: 9pt; color: #3366cc; text-decoration: none}
a.1:visited { font-size: 9pt; color: #3366cc; text-decoration: none}
a.1:hover { font-size: 9pt; color: #FF9900; text-decoration: none}
a.1:active { font-size: 9pt; color: #FF9922; text-decoration: none}
.blue { font-family: "宋體"; font-size: 10.5pt; line-height: 20px; color: #0099FF; letter-spacing: 5em}
–>
</style>
<td><img src=”../images/sample.gif”>
</td>
<td><img src=”../images/sample.gif”></td>
<td><img src=”../images/sample.gif”> </td>
☆ 在根目錄下開設news目錄☆ 第一條缺省新聞取名index.htm
☆ 所有屬於「國內新聞」的新聞依序取名為：china_1.htm, china_2.htm, …
☆ 所有屬於「國際新聞」的新聞依序命名為：internation_1.htm, internation _2.htm, …
☆ 如果檔案的數量是兩位數，請將前九個檔案命名為：china_01.htm, china_02.htm 以確保所有的檔案能夠在資料夾中正確排序。
☆ 名稱分為頭尾兩兩部分，用底線隔開。
☆ 頭部分錶示此圖片的大類性質，例如廣告、標誌、選單、按鈕等等。
☆ 一般來說:
放置在頁面頂部的廣告、裝飾圖案等長方形的圖片我們取名：banner
標誌性的圖片我們取名為：logo
在頁面上位置不固定且帶有連結的小圖片我們取名為button
在頁面上某一個位置連續出現，性質相同的連結欄目的圖片我們取名：menu
裝飾用的照片我們取名：pic
不附連結表示標題的圖片我們取名：title
依照此原則類推。
banner_sohu.gif
banner_sina.gif
menu_aboutus.gif
menu_job.gif
title_news.gif
logo_police.gif
logo_national.gif
pic_people.jpg
pic_hill.jpg