簡明 HTML CSS 開發規範 (轉自“清清月兒”)

//總論

本規範既是一個開發規範,也是一個腳本語言參考,本規範並不是一個一成不變的必須嚴格遵守的條文,特殊情況下要靈活運用,做一定的變通。但是,請大家千萬不要隨意更改規範。如果有任何問題,請及時與我聯繫,我會及時更改本規範的相關代碼樣例和文檔。

/基 本 要 求

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 文件的通用模板:

<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">


其他meta 標 記

<link rel="stylesheet" type="text/css" href="style/style.css">


樣式表定義
客戶端javascript 函數定義及初始化操作

</head>
<body bgcolor="#ffffff">
… …
</body>


補充:
爲了保證網站能夠與下一代的web 語言xml 標準兼容,所有的HTML 標籤的屬性都要用單引號或者雙引號括起,即我們應該寫 <a href=”url”> 而不 是 <a href=url>.

2. 允許全文檢索的頁面,爲了使Internet上的搜索引擎能夠有效檢索,在頻道的首頁的html的<head></head>之間應該加入Keywords 和Description 元標記,例如 :

<meta name=”keywords” content=”東方新幹線,汽車,買車”>
<meta name=”description” content=”東方新幹勁線,全球中文汽車信息第一站”>


3. CSS 文件的格式樣例代碼 :

<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>


這裏尤其要注意的是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> 處於同一行,不要換行,

如我們注意在源代碼中不應有這樣的代碼:

<td><img src=”../images/sample.gif”>
</td>


而應該是這樣的:

<td><img src=”../images/sample.gif”></td>


這是因爲瀏覽器認爲換行相當於一個半角空格,以上不規範的寫法相當於無意中增加一個半角空格,如果確實有必要增加一個半角空格,也應該這樣寫:

<td><img src=”../images/sample.gif”> </td>


屬於同一個級別 的 <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 文件的命名原則 :

☆ 在根目錄下開設news目 錄

☆ 第一條缺省新聞取名index.htm

☆ 所有屬於“國內新聞”的新聞依次取名爲:china_1.htm, china_2.htm, …

☆ 所有屬於“國際新聞”的新聞依次取名爲:internation_1.htm, internation _2.htm, …

☆ 如果文件的數量是兩位數,請將前九個文件命名爲:china_01.htm, china_02.htm 以保證所有的文件能夠在文件夾中正確排序。

5. 圖片的命名原則遵循以下幾條規範 :

☆ 名稱分爲頭尾兩兩部分,用下劃線隔開。

☆ 頭部分表示此圖片的大類性質,例如廣告、標誌、菜單、按鈕等等。

☆ 一般來說:

放置在頁面頂部的廣告、裝飾圖案等長方形的圖片我們取名:banner
標誌性的圖片我們取名爲:logo
在頁面上位置不固定並且帶有鏈接的小圖片我們取名爲button
在頁面上某一個位置連續出現,性質相同的鏈接欄目的圖片我們取名:menu
裝飾用的照片我們取名:pic
不帶鏈接表示標題的圖片我們取名:title
依照此原則類推。

☆ 尾部分用來表示圖片的具體含義。

☆ 下面是幾個樣例,大家應該能夠一眼看明白圖片的意義:

banner_sohu.gifbanner_sina.gifmenu_aboutus.gifmenu_job.gif
title_news.giflogo_police.giflogo_national.gifpic_people.jpg
pic_hill.jpg.
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章