web 開發規範

很久沒整理博文了

囉嗦兩句  轉載至新浪。。。。。。

於在未開啓cleartype的狀況下，一些中文字體在非偶數字號下的顯示效果欠佳，因此通常建議使用十二、1四、1六、1八、22px等偶數字號。也就 是對某個分辨率選擇離它最近的偶數字號。例如：屏幕橫向分辨率在1100如下的採用14px，1100到1500採用16px，1500以上採用 18px，依此類推。
    最通用的網站設計規範參考 
參考網上的一些文章和部分門戶網站規範，結合用戶瀏覽習慣以及實際策劃、設計、使用中的經驗，制訂了《通用網站設計規範參考》。 
1、設計風格
一、依照網站的定位肯定總體的設計風格。  
二、主體框架頁面、內容頁儘可能採用方型結構。禁用長距離的斜線及弧線結構，可容許 小範圍內的斜線及弧線。封面頁、專題頁可不受此限制。  
三、設計時儘可能在方塊區邊緣、按鈕、標題裝飾塊上體現設計技巧，拐角能夠有曲線變 化。拐角塊最大不得超過18像素。同一頁面弧度儘可能保持一致。 
 
四、各主要欄目之間要求使用一致的佈局，包括一致的頁面元素；一致的導航形式，使 用相同的銨鈕，相同的順序。可跟首頁有變化。  
五、首頁及各級頁面都必須帶有網站的LOGO，並連接到網站首頁。 
六、設計要兼容分辨率，就目前顯示器分辨率的覆蓋率，能夠採用1024*768 分辨率，建議頁面使用寬度爲1000px、980px或者950px設計等，對於內容偏少的網站或者專題，也可採用800*600分辨率，建議使用寬度爲778px或者760px。
 
七、網站頁面長度建議1屏半到2屏。原則上長度不超過3屏，寬度不超過1屏。根據 用戶習慣和網站須要，國內中文網站綜合類、門戶類(包括垂直門戶)網站可設計超過3 屏。
 
2、圖形設計規範
 
一、 圖片標準尺寸
全尺寸banner爲468×60px，半尺寸banner爲234×60px，小logo爲88×31px，另外150×6八、120×90，120×60也是標準尺寸，網站logo通常控制在150×54之內，客戶要求或特殊廣告圖片可另定尺寸。
 
建議首頁存儲大小不得超過150K(包括圖片)，其它頁面經壓縮後尺寸不得超過70K。 
二、 圖片的分類及命名規則
☆ 名稱分爲頭尾兩兩部分，用下劃線隔開。
 
☆ 頭部分表示此圖片的大類性質，例如廣告、標誌、菜單、按鈕等等。 通常來講:
放置在頁面頂部的廣告、裝飾圖案等長方形的圖片咱們取名：banner 標誌性的圖片咱們取名爲：logo
在頁面上位置不固定而且帶有連接的小圖片咱們取名爲button
在頁面上某一個位置連續出現，性質相同的連接欄目的圖片咱們取名：menu






裝飾用的照片咱們取名：pic
不帶連接表示標題的圖片咱們取名：title 依照此原則類推。 
☆ 尾部分用來表示圖片的具體含義，若是有相似圖片就用數字區別。 
☆ 下面是幾個樣例，你們應該可以一眼看明白圖片的意義：
banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif  logo_police.gif,title_top01.gif, title_top02.gif 
☆小標必定作成透明的。 
三、Banner製做要求 
1）大Banner(468×60Pixel)容量儘可能限制在15K內，格式儘可能選用GIF及動態格式。 
2）幀切換時儘可能半靜半動。少用滿底256色以上的圖像。閃切變化主要體如今文字上。  
3）廣告條的border設爲0，並要求加上alt說明。  
四、圖標和圖片 
1）在圖標的製做上應採用簡捷，色彩明快的圖標；在選用單色圖標時應根據本欄目的色彩進行搭配。  
2）圖標存儲爲GIF格式(除個別狀況外)，儘可能採用16色、填充色或單色。  
3）圖片依狀況存成GIF或JPEG格式，原則上色調單一的圖片存成GIF格式，色彩複雜、層次豐富的存在JPEG格式。 
 
4）設計時不得用15K以上的圖片，如圖片過大能夠考慮採用圖片分割的辦法。  
5）內容圖片、導航圖片的border設爲0，並要求加上alt說明。  
6）普通圖片沒必要加alt說明，但若是有連接要把border設爲0。 
7）公用圖片或有可能更換的圖片不要  
指定圖片的尺寸大小（width,height）。 3、名稱約定 
一、路徑/文件名設定 
路徑/文件命名時一概採用小寫英文字母、數字、下劃線的組合，其中不得包含漢字、空格和特殊字符；目錄的命名請儘可能以英文翻譯爲優先，儘可能避免使用拼音做爲目錄名稱 
二、路徑/文件名稱需與欄目菜單名稱具備相關性  
三、 各路徑下的開始文件，命名爲index.* 靜態文件爲index.html，動態文件爲






index.asp,index.aspx,index.php,index.jsp
 
四、 文件名中用"_"下劃線做爲鏈接符。 
五、 如頁面文件過長鬚要拆分，建議多個文件按順序依次命名爲filename01.*、filename02.*…… 
內容不一樣但屬於同類的，且需按期更新的頁面文件或文本採用：  名稱縮寫＋(年份)＋月份＋日期＋序號 ，如= news081508.* 
六、大流量網站的首頁和各欄目首頁儘可能使用以html爲文件後綴名的靜態頁面。其餘經 常訪問的動態頁面也建議模擬爲靜態頁面。 
4、目錄結構規範 
目錄創建的原則：以最少的層次提供最清晰簡便的訪問結構。 一、 目錄命名的規範（參照名稱約定）
 
二、 根目錄通常只存放index.html以及其餘必須的系統文件 
三、 每一個主要欄目創建一個相應的獨立目錄 
四、 根目錄下的images用於存放各頁面都要使用的公共圖片，子目錄下的images目錄存放本欄目頁面使用的私有圖片 
五、 全部JS腳本存放在根目錄下的scripts目錄或includes目錄 
六、 全部CSS文件存放在根目錄下style目錄
 
七、 每一個語言版本存放於獨立的目錄。例如：簡體中文gb，英文en 
八、 全部flash, avi, ram, quicktime 等多媒體文件建議存放在根目錄下的media目錄，若是屬於各欄目下面的媒體文件，分別在該欄目目錄下創建media目錄 
九、 廣告、交換連接、banner等圖片保存到adv目錄
 十、頁面下載、解釋時間在56k連接速度下不能超過40秒（欄目首頁、表單頁）或20秒（通常頁面）。  
5、連接規範
 
一、新聞、信息類一般用新開窗口方式打開。
 
二、頂部導航、底部導航一般採起在本頁打開，特殊欄目和功能可新開窗口。 






三、連接帶下劃線爲連接一般的默認風格，頂部導航或特殊位置爲了觀賞性可用樣式表取消下劃線。 
四、連接的顏色可配合主題顏色風格改變，一般爲藍色、暗藍色、黑色，但激活後的連接顏色、鼠標移動其上時的連接顏色要同自己顏色進行區分。 
6、頁面製做規範  
一、色彩規範  
1）根據網站性質,避免在一個頁面上有太多的色彩，活潑但不失穩重，顏色柔和但不亂 
2）文字的色彩要與頁面協調。  
）即便頁面有背景圖片，也應該設置背景色，一般默認設置背景色爲白色 
二、表格 
1）定義表格寬度時使用絕對值（指定像素）。 
2）內嵌最大表格寬度爲775pix，align=left （前提在設定爲778pix的框架內） 
3）頁面中從上至下儘可能拆分紅多個層疊的表格，儘可能用TBODY這個標籤  
能夠控制表格分行下載，當表格內容很大時比較實用，在須要分行下載處加上和
 
4）表格必須指定（border，cellspacing，cellpadding），圖文混排時推薦使用vspace=5  hspace=5。  
5）爲加快網頁下載速度，最好使用CSS定義類表格樣式。 三、字體 
1） 爲了保證不一樣瀏覽器上字號保持一致，字號建議用點數pt和像素px來定義，pt通常使用中文宋體的9pt和11pt，px通常使用中文宋體12px 和14.7px 這是通過優化的字號，黑體字或者宋體字加粗時，通常選用11pt和14.7px 的字號比較合適。 
2） 大小爲9pt時，行距爲120%；信息類最終頁面採用彈出方式，標題及正文字體規定爲11pt，行距爲140%。全部頁面字體大小建議不要超過11pt。  
3） 考慮字體大小的兼容性，避免使用size=2的方式定義，儘可能使用pt或px並用css定義 
4）文字顏色與頁面配色協調，不使用與背景色相近的顏色。  
5） 非圖像設計的字體一概採用windows標準宋體。（若是作特殊效果需作成圖）要 加粗文字用Bold,不要用Strong。  






6） 頁面文本不使用下劃線方式，也儘可能少採用粗體顯示。 
四、CSS書寫規範
1）全部的CSS的儘可能採用外部調用
 
 
2）代碼較長的首頁和重要欄目首頁可直接內嵌CSS，避免調用時間太長，使頁面未及時調用CSS風格而顯得凌亂。 
3）書寫時重定義的最早，僞類其次，自定義最後（其中a:link a:visited a:hover a:actived 要按照順序寫）便於本身和他人閱讀。  
五、JS調用規範
全部的javascript腳本儘可能採起外部調用
 
六、首頁head區代碼規範
head區是指首頁HTML代碼的和之間的內容。 head區必須加入的標識 
1）公司版權註釋    2）網頁顯示字符集 例如：
簡體中文： 繁體中文： 英 語： 3）網站簡介  
4）搜索關鍵字 
5）網頁的css規範   網頁標題  
收藏夾圖標 
七、錯誤頁面規範
全部程序出錯頁面、找不到的頁面不要使用默認的出錯提示，要設計 
 
爲帶網站標識和說明的個性化的出錯提示頁面。 八、全部頁面必須均需通過瀏覽器兼容測試，一般須支持主流瀏覽器IE、Firefox。