长时间整理的xhtml网页设计规范
在閱讀前請先了解一些XHTML、CSS的基本知識，以方便理解編寫的內容。本規范的目的是為了方便大家在開發過程中，通用的、易于維護、高效率的制作WEB界面。
一. 目錄建立、文件夾命名規則：
01. 目錄：
?????? 除非有特殊情況外，目錄應使用小寫字母，并且以字母開頭其中不得包含漢字、空格與特殊字符。
?????? 目錄命名請盡量英文為指導，不要以拼音作為目錄名稱。
?????? 以下為一些常用目錄的推薦英文名稱：
?????? image 放網站不同欄目的頁面都要用到的公共圖片
?????? media 放 flash、avi、quicktime 等多媒體文件
?????? public 放公共文件
?????? style 放 css 樣式文件
?????? js放js文件
?????? temp 放一些策劃與設計中使用的原始資料與備份文件
?????? 在根目錄中原則上應該按照首頁的欄目結構，給每一個欄目開設一個目錄，根據需要在每一個欄目的目錄中開設一個 images 和 medias 的子目錄用以放置此欄目專有的圖片和多媒體文件，如果這個欄目的內容特別多，又分出很多下級欄目，可以相應的再開設其他目錄。temps目錄中的文件與網上無關，請杜絕非內容的上傳。
02. 文件：
?????? 除非有特殊情況外，目錄應使用小寫字母，并且以字母開頭其中不得包含漢字、空格與特殊字符，否則在網頁讀取過程中可能會出現錯誤；請盡量英文為指導，不要以拼音作為目錄名稱。
?????? 以下為一些常用文件命名的格式推薦：
?????? 首頁類文件 index(_xxxxxx).后綴名 [index_wealth.html]
?????? 列表類文件 list(_xxxxxx).后綴名 [list.html]
?????? 內容類文件 detail(_xxxxxx).后綴名 [detail.html]
?????? 表單類文件 post(_xxxxxx).后綴名 [post.html]
?????? 表單反饋類文件 result(_xxxxxx).后綴名 [result.html]
?????? 圖片類文件文件類型_xxxxx(圖片序號)(背景).后綴名 (詳見以下)
?????? 廣告圖片動畫類文件 xxxxxx_widthxheight.后綴名 (詳見以下)
03 圖片文件：
?????? 透明的1x1像素圖片名稱為：c.gif
?????? 圖片的分類及命名規則：
?????? 廣告類 banner banner_vnvbiz_500x400.swf | banner_vnvbiz_680x100.swf
?????? 標志類 logo logo.gif | logo_newyear2007.gif
?????? 按鈕類 button button_01.gif | button_01bg.gif
?????? 菜單類 menu menu_aboutus.gif | menu_job.gif
?????? 裝飾類 pic pic_01.gif | pic_02.gif
?????? 欄目類 title title_top01.gif | title_top02bg.gif
04 命名規則
?????? 兩種方式：下劃線連接法、駝峰法。選擇其中一種方式即可
?????? 如：index_menu.html
?????? indexMenu.html
二設計規范：
01. 整體規范：
?????? 統一按顯示器分辨率暫為 1024×768px 來設計頁面，所以使用最大寬度 1000px進行設計。
網站頁面長度建議1屏半到2屏。原則上長度不超過3屏，寬度不超過1屏。根據用戶習慣和網站需要，站點首頁、分欄首頁可設計超過3屏。
02. 圖片標準尺寸：
除了布局類文件沒有限制外，其它的廣告、產品等圖片，基本滿足以下三種規格：
1x1 => 正方比例；
4x3 => 黃金比例；
另外還有一種的特定圖片尺寸。
以下為一些常見圖片的推薦尺寸：
全尺寸banner => 468×60px；
半尺寸banner => 234×60px；
產品縮略圖片 => 100×75px；
?????? 內容圖片 => 50×50px 120×90px
圖片文件大小一般保持在 5k 以內；大尺寸的banner文件大小保持在15k 以內。
03. 文字規范：
?????? 網頁中總體上使用：
?????? 字體 font-family:Arial, Helvetica, sans-serif
?????? 字號 font-size:12px
?????? 字色 color:#000
大字體設置上請多使用雙尾數值，比如 12px 14px 16px 22px：
?????? 一般標題宋體粗體12px
?????? 模塊標題宋體粗體14px
?????? 內容標題宋體粗體16px
文字的行間距也請多使用雙尾數值：
?????? 12號字體常用行間中距 18px│20px│22px
?????? 14號宋體常用行間中距 24px│26px│28px
?????? 文字的顏色請使用216安全色，方便定義和規范顏色，即類似于 "#000000 | #CC6666 | #66CCFF"
04. 鏈接規范：
新聞、信息類通常用新開窗口方式打開。
頂部導航、底部導航通常采取在本頁打開，特殊欄目和功能可新開窗口。
鏈接帶下劃線為鏈接通常的默認風格，頂部導航或特殊位置為了觀賞性可用樣式表取消下劃線。
鏈接的顏色可配合主題顏色風格改變，通常為藍色、暗藍色、黑色，但激活后的鏈接顏色、鼠標移動其上時的鏈接顏色要同本身顏色進行區分。
三 XHTML制作規范：
?01. 制作規范總論：
每個網頁都應注明 DTD 版本信息，并且放在網頁的最上面。
所有xhtml標簽都必須使用小寫，并且必須有屬性值，且加雙引號。
所有xhtml標簽都必須閉合。
"網頁大小"定義為網頁的所有文件大小的總和，包括html文件和所有的嵌入的對象。用戶喜歡快的而不是新奇的站點。對于解調器用戶，網頁大小保持在70K以下為合適，40K以下更好。
為了更好的控制代碼長度與代碼的可讀性，盡量使用手寫代碼來完成書寫，并且使用tab來控制代碼縮進（嚴禁使用空格鍵）。
所有的文件聯接與鏈接都使用絕對路徑的形式，如：/news/detail.aspx?id=1111
在制作頁面時，請先全局性的了解一下頁面的結構，然后按粗放到細致的順序去完成頁面。最后是同一欄目使用同時制作，從而減少ＣＳＳ的代碼量。
02. 網頁文件通用模板：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" contect="zh-CN" />
<title></title>
</head>
<body>
</body>
</html>
03. 頁首head區代碼規范：
網站簡介： <meta name="description" content="網站的簡介" /> 必需
搜索關鍵字： <meta name="keywords" content="關鍵字1,關鍵字2..." />? 必需
搜索機器人： <meta name="robots" content="all" />(all,none,index,noindex,follow,nofollow)
網頁著作者： <meta name="author" content="" />
網頁版權注釋： <meta name="copyright" content="joinDeer,Inc 04/2010 " />
網頁定時跳轉： <meta http-equiv="refresh" content="10; url=http://yourlink" />
網頁間轉換時加入效果：
<meta http-equiv="page-enter" content="revealtrans(duration=10, transition=50)" />
<meta http-equiv="page-exit" content="revealtrans(duration=20, transition=6)" />收藏夾圖片：
<link type="image/x-icon" rel="icon" href="/favicon.ico" />
<link type="image/x-icon" rel="shortcut icon" href="/favicon.ico" />RSS文件代碼：
<link type="application/rss+xml" rel="alternate" title="" href="rss/feed.rss" />
04. CSS調用規范：
<link type="text/css" rel="stylesheet" href="style/style.css" />
所有的css的盡量采用外部調用：
代碼較長的首頁和重要欄目首頁可直接內嵌css，避免調用時間太長，使頁面未及時調用css風格而顯得凌亂。
某些獨立存在的單頁也可以使用以上的方法。
在類似換模板的css調用時，請遵守前后順序的規定。
05. JS調用規范：
<script type=" text/javascript" src=" commons/xxxxx.js"></script>
所有的javascript腳本盡量采取外部調用：
某些獨立存在的單頁也可以使用直接內嵌JS。
JS的編寫每個人都有自己的習慣用法，所以請在編寫時加注釋信息，方便其它同事可以閱讀與修改。
06. img標簽規范：
?????? <img src="" width="" height="" alt="" />
?????? 所有img標簽除了程序控制寬高值外，都應該 width="" height=""，這樣在圖形文件未被讀取時，保證瀏覽器預留圖形占用的空間，防止網頁最終顯示時出現抖動現象。
?????? 所有帶鏈接的img標簽都應該 border="0"。
?????? 一般img標簽都應該設置 alt=""，alt的內容盡量貼近圖的內容。
07. a標簽規范：
?????? <a href="" title="" class=""></a>
?????? 所有a標簽都應該有 title="" 的值，title的內容盡量貼近鏈接的內容。
?????? 除了默認的鏈接ＣＳＳ，其它的特別鏈接都應該有自己的class值，以方便其它鏈接調用。
?????? 希望可以使用三段式的ＣＳＳ設置，未點前 | 點擊中 | 已點后 這三種狀態，以方便用戶可以清楚的知道那些是已經點過的。
?????? 一般鏈接到某一目錄下的缺省文件的鏈接路徑不必寫全名，如：
?????? <a href="/aboutus/index.html"> 可以寫為 <a href="/aboutus/">
08. form標簽與表單相關標簽規范：
?????? <form method="post | get" action=""></form>
?????? <input type="text | password | radio | checkbox | submit | button | reset | image | file | hidden" ??? name="" value="" size="" />
?????? maxlength="" // 允許輸入的最大寬值
?????? checked="checked" // radio checkbox類型中的選中
?????? disabled="disabled" // 灰色不可選
?????? readonly="readonly" // 只讀
?????? <select name="" disabled="disabled"></select>
?????? size="" // 拉長轉為高度狀態
?????? multiple="multiple" // 可復選
?????? <option value="" disabled="disabled"></option>
?????? selected="selected" // 默認值
?????? <textarea name="" disabled="disabled" readonly="readonly"></textarea>
?????? rows="" // 高度
?????? cols="" // 寬度
?????? <label for=""></label>
?????? <button type="button | submit | reset" name="" value="" disabled="disabled"></button>
其中灰色文字代表的是可以選擇性輸入的部分。
所有form標簽都應該有 method="" 的值，默認請使用post。
可以使用label標簽來關聯表單標簽。
可以使用table標簽來控制表單的內容形式。
請盡量把form標簽放在table中間使用，如：<??? table><form><tr><td></td></tr></form></table>
09. table標簽規范：
?????? <table border="0" cellpadding="0" cellspacing="0" width="" height="" rules="groups">
?????? <caption align="" valign=""> </caption>
?????? <thead>
?????? <tr>
?????? <th></th>
?????? <th></th>
?????? <th></th>
?????? </tr>
?????? </thead>
?????? <tbody>
?????? <tr>
?????? <td width="" height="" colspan="" rowspan=""></td>
?????? <td width="">
?????? <table border="0" cellpadding="0" cellspacing="0">
?????? <tr><td></td></tr>
?????? </table>
?????? </td>
?????? </tr>
?????? </tbody>
?????? <tfoot>
?????? <tr><td></td></tr>
?????? </tfoot>
?????? </table>
?????? 使用div+css并不代表不可以再使用table，只是table不在用于結構與布局。
? 除了以下幾個table標簽屬性外，其它的table標簽屬性最好放棄使用，因為其存在兼容性問題。
?????? 以下為表格的嵌套格式：
1.) 對于單獨的一個<table>來說，<table><tr>對齊，<td>縮進一個tab。
?????? 2.) 對于存在<thead> <tbody> <tfoot>的<table>來說，<table> 與<thead><tbody><tfoot>對齊，<tr>縮進一個tab。
3.) 如果<td>中沒有任何嵌套的表格，</td>結束標記應該與<td>處于同一行，不要換行。
4.) 如果<td>中出現嵌套表格，<td>下面的<table>縮進一個tab。
5.) 如果<tr>下內有一個<td>，并且<td>沒有任何嵌套，可以讓<tr><td>都處于同一行中。
?????? 原則上，不贊同使用超過三次的table嵌套，如出現這樣的樣式，都嘗試使用div等其它方式。
嵌套的表格大小盡量給定width和height數值，以便于瀏覽器加快解釋的速度，以下為設置寬高的基本原則，一行或一列都只存在一個width或height的值
10. 列表相關標簽規范：
?????? <ul>
?????? <li></li>
?????? </ul>
?????? <ol>
?????? <li></li>
?????? </ol>
?????? <dl>
?????? <dt></dt>
?????? <dd></dd>
?????? </dl>
1) 使用<li>、<dd>等格式控制時必須加注<ul></ul>和<dl></dl>，不準單獨使用<li>、<dd>。
2) 在一般情況下，列表中的margin padding 都應該在css中設置為0，list-stype設置為none。
3) 文字 + 行高 + 列表頭控制 + 列表頭圖片統一寫入樣式，列表頭符號不加鏈接。
11. 其它：
為swf設置一個 <param name="wmode" value="transparent" /> 就可以解決swf總是浮動在總最上面的問題了，但同時在制作swf動畫時，按實際需要設置一個實色的底色框。
因為marquee的兼容性問題，所以請暫停使用本標簽，可以使用javascript來完成滾動。
font標簽也已經被w3c拋棄，所以建議用CSS來替換使用。
四 CSS制作規范
01. 一般常用CSS樣式的范本：
* { background:#fff; margin:0; padding:0; font-family: Arial, Helvetica, sans-serif; color: #000; }
ul, ol, menu, dl { list-style:none; }
p {text-indent:2em;}
a:link { color:#333; text-decoration:none; }
a:visited { color:#333; text-decoration:none; }
a:hover { color:#C60; text-decoration:underline; }
a:active { color:# C60; text-decoration:underline; }
02. 常用CSS縮寫形式：
?????? 字體縮寫：
font:normal normal normal 12px/18px 宋體;
?????? 背景縮寫：
background:red url(images/bg.gif) repeat-y top right;
?????? 列表縮寫：
list-style : list-style-image || list-style-position || list-style-type
list-style:url(images/icon.gif) 0 0;
?????? 邊框縮寫：
border:1px solid black;
?????? Box模形縮寫：
(上)(右)(下)(左) | (上)(左右)(下) | (上下)(左右) 這幾種表現方式。
?????? color縮寫：
如果使用216安全色，就可以使用 #FFF, #F06這樣的表達形式。
03. 常用布局形式：
?????? 為了兼容IE6、Firefox，在布局的時候請使用以下格式：
?????? 居中：margin:0 auto;
?????? 居右：margin:0 0 0 auto;
?????? 居左：margin:0 auto 0;
?????? 左浮動：float:left; clear:left;
?????? 右浮動：float:right; clear:right;
04. CSS語意性設置：
?????? <h1>可以設置為與網頁的 title 一樣，不過可以通過 display:none; 隱藏，這樣做可以方便搜索引擎的提取；
?????? <h2>可以設置文章的標題；
?????? <h3>可以用于分欄目的標題；
?????? <p>可以放置文章的內容；
?????? <label>可以與表單框對應使用；
?????? <ul>可以用來做一層的菜單；
?????? <dl>可以用來做二層的菜單；
05. CSS常用命名規則：
?????? 命名含義命名含義命名含義
header 頭部 container 內容部分 footer 尾部
nav 導航 menu 菜單 crumb 當前位置
left 左側部分 center 中間部分 right 右側部分
login 登錄 regsiter 注冊 search 搜索
06. CSS設置的注意事項：
?????? Hack的問題：
?????? IE6采用 *html解決
?????? IE7采用 *+html解決
五搜索引擎優化：
?????? 使用flash或者圖片作為導航菜單的時候，會影響搜索引擎對其內容的搜索，所以可以使用圖片替換文字的方式來做導航菜單.
?????? 每個分欄都應該精心設計其的meta標簽、meta關鍵字。
總結
以上是生活随笔為你收集整理的长时间整理的xhtml网页设计规范的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 减少系统资源占用的15个CSS常识
- 下一篇： 飞鸽传书2013