參考網(wǎng)上的一些文章和部分門戶網(wǎng)站規(guī)范，結(jié)合用戶瀏覽習(xí)慣以及實(shí)際策劃、設(shè)計(jì)、使用中的經(jīng)驗(yàn)，制訂了《通用網(wǎng)站設(shè)計(jì)規(guī)范參考》，希望能給其他網(wǎng)站策劃人員、站長(zhǎng)提供一些參考。（注：后續(xù)可能會(huì)做細(xì)微補(bǔ)充，另外技術(shù)規(guī)范方面這里沒有涉及）－風(fēng)言瘋語

一、設(shè)計(jì)風(fēng)格

1、依照網(wǎng)站的定位確定整體的設(shè)計(jì)風(fēng)格。
2、主體框架頁(yè)面、內(nèi)容頁(yè)盡量采用方型結(jié)構(gòu)。禁用長(zhǎng)距離的斜線及弧線結(jié)構(gòu)，可允許
小范圍內(nèi)的斜線及弧線。封面頁(yè)、專題頁(yè)可不受此限制。
3、設(shè)計(jì)時(shí)盡量在方塊區(qū)邊緣、按鈕、標(biāo)題裝飾塊上體現(xiàn)設(shè)計(jì)技巧，拐角可以有曲線變
化。拐角塊最大不得超過18像素。同一頁(yè)面弧度盡量保持一致。
4、各主要欄目之間要求使用一致的布局，包括一致的頁(yè)面元素；一致的導(dǎo)航形式，使
用相同的銨鈕，相同的順序?？筛醉?yè)有變化。
5、首頁(yè)及各級(jí)頁(yè)面都必須帶有網(wǎng)站的LOGO(建議小于150×54)，并鏈接到網(wǎng)站首頁(yè)。
6、統(tǒng)一按兼容分辨率800*600設(shè)計(jì)。為了使顯示更友好，建議使用778或者760 px設(shè)
計(jì)。
7、網(wǎng)站頁(yè)面長(zhǎng)度建議1屏半到2屏。原則上長(zhǎng)度不超過3屏，寬度不超過1屏。根據(jù)
用戶習(xí)慣和網(wǎng)站需要，國(guó)內(nèi)中文網(wǎng)站綜合類、門戶類(包括垂直門戶)網(wǎng)站可設(shè)計(jì)超過3
屏。
 
二、圖形設(shè)計(jì)規(guī)范

1、 圖片標(biāo)準(zhǔn)尺寸
全尺寸banner為468×60px，半尺寸banner為234×60px，小logo為88×31px
另外150×68、120×90，120×60也是標(biāo)準(zhǔn)尺寸，網(wǎng)站logo一般控制在150×54以內(nèi)，
客戶要求或特殊廣告圖片可另定尺寸。
建議首頁(yè)存儲(chǔ)大小不得超過150K(包括圖片)，其它頁(yè)面經(jīng)壓縮后尺寸不得超過70K。

2、 圖片的分類及命名規(guī)則
☆ 名稱分為頭尾兩兩部分，用下劃線隔開。
☆ 頭部分表示此圖片的大類性質(zhì)，例如廣告、標(biāo)志、菜單、按鈕等等。
☆ 一般來說:
放置在頁(yè)面頂部的廣告、裝飾圖案等長(zhǎng)方形的圖片我們?nèi)∶篵anner
標(biāo)志性的圖片我們?nèi)∶麨椋簂ogo
在頁(yè)面上位置不固定并且?guī)в墟溄拥男D片我們?nèi)∶麨閎utton
在頁(yè)面上某一個(gè)位置連續(xù)出現(xiàn)，性質(zhì)相同的鏈接欄目的圖片我們?nèi)∶簃enu
裝飾用的照片我們?nèi)∶簆ic
不帶鏈接表示標(biāo)題的圖片我們?nèi)∶簍itle
依照此原則類推。
  ☆ 尾部分用來表示圖片的具體含義，如果有類似圖片就用數(shù)字區(qū)別。
  ☆ 下面是幾個(gè)樣例，大家應(yīng)該能夠一眼看明白圖片的意義：
banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif
logo_police.gif,title_top01.gif, title_top02.gif
☆小標(biāo)一定做成透明的。

3、Banner制作要求
1）大Banner(468×60Pixel)容量盡量限制在15K內(nèi)，格式盡量選用GIF及動(dòng)態(tài)格式。
2）幀切換時(shí)盡量半靜半動(dòng)。少用滿底256色以上的圖像。閃切變化主要體現(xiàn)在文字上。
3）廣告條的border設(shè)為0，并要求加上alt說明。

4、圖標(biāo)和圖片
1）在圖標(biāo)的制作上應(yīng)采用簡(jiǎn)捷，色彩明快的圖標(biāo)；在選用單色圖標(biāo)時(shí)應(yīng)根據(jù)本欄目的色彩進(jìn)行搭配。
2）圖標(biāo)存儲(chǔ)為GIF格式(除個(gè)別情況外)，盡量采用16色、填充色或單色。
3）圖片依情況存成GIF或JPEG格式，原則上色調(diào)單一的圖片存成GIF格式，色彩復(fù)雜、層次豐富的存在JPEG格式。
4）設(shè)計(jì)時(shí)不得用15K以上的圖片，如圖片過大可以考慮采用圖片分割的辦法。
5）內(nèi)容圖片、導(dǎo)航圖片的border設(shè)為0，并要求加上alt說明。
6）普通圖片不必加alt說明，但如果有鏈接要把border設(shè)為0。
7）公用圖片或有可能更換的圖片不要指定圖片的尺寸大?。╳idth,height）。

三、名稱約定

1、路徑/文件名設(shè)定
路徑/文件命名時(shí)一律采用小寫英文字母、數(shù)字、下劃線的組合，其中不得包含漢字、空格和特殊字符；目錄的命名請(qǐng)盡量以英文翻譯為優(yōu)先，盡量避免使用拼音作為目錄名稱

2、路徑/文件名稱需與欄目菜單名稱具有相關(guān)性

3、 各路徑下的開始文件，命名為index.* 靜態(tài)文件為index.html，動(dòng)態(tài)文件為
index.asp,index.aspx,index.php,index.jsp

4、 文件名中用"_"下劃線作為連接符。

5、 如頁(yè)面文件過長(zhǎng)需要拆分，建議多個(gè)文件按順序依次命名為filename01.*、filename02.*……
內(nèi)容不同但屬于同類的，且需定期更新的頁(yè)面文件或文本采用：
名稱縮寫＋(年份)＋月份＋日期＋序號(hào) ，如= news081508.*

6、大流量網(wǎng)站的首頁(yè)和各欄目首頁(yè)盡量使用以html為文件后綴名的靜態(tài)頁(yè)面。其他經(jīng)
 常訪問的動(dòng)態(tài)頁(yè)面也建議模擬為靜態(tài)頁(yè)面。

四、目錄結(jié)構(gòu)規(guī)范

 目錄建立的原則：以最少的層次提供最清晰簡(jiǎn)便的訪問結(jié)構(gòu)。
1、 目錄命名的規(guī)范（參照名稱約定）

2、 根目錄一般只存放index.html以及其他必須的系統(tǒng)文件

3、 每個(gè)主要欄目建立一個(gè)相應(yīng)的獨(dú)立目錄

4、 根目錄下的images用于存放各頁(yè)面都要使用的公共圖片，子目錄下的images目錄存放本欄目頁(yè)面使用的私有圖片

5、 所有JS腳本存放在根目錄下的scripts目錄或includes目錄

6、 所有CSS文件存放在根目錄下style目錄

7、 每個(gè)語言版本存放于獨(dú)立的目錄。例如：簡(jiǎn)體中文gb，英文en

8、 所有flash, avi, ram, quicktime 等多媒體文件建議存放在根目錄下的media目錄，如果屬于各欄目下面的媒體文件，分別在該欄目目錄下建立media目錄

9、 廣告、交換鏈接、banner等圖片保存到adv目錄

10、頁(yè)面下載、解釋時(shí)間在56k鏈接速度下不能超過40秒（欄目首頁(yè)、表單頁(yè)）或20秒（一般頁(yè)面）。

五、鏈接規(guī)范

1、新聞、信息類通常用新開窗口方式打開。

2、頂部導(dǎo)航、底部導(dǎo)航通常采取在本頁(yè)打開，特殊欄目和功能可新開窗口。

3、鏈接帶下劃線為鏈接通常的默認(rèn)風(fēng)格，頂部導(dǎo)航或特殊位置為了觀賞性可用樣式表取消下劃線。

4、鏈接的顏色可配合主題顏色風(fēng)格改變，通常為藍(lán)色、暗藍(lán)色、黑色，但激活后的鏈接顏色、鼠標(biāo)移動(dòng)其上時(shí)的鏈接顏色要同本身顏色進(jìn)行區(qū)分。

六、頁(yè)面制作規(guī)范

1、色彩規(guī)范
1）根據(jù)網(wǎng)站性質(zhì),避免在一個(gè)頁(yè)面上有太多的色彩，活潑但不失穩(wěn)重，顏色柔和但不亂
2）文字的色彩要與頁(yè)面協(xié)調(diào)。
3）即使頁(yè)面有背景圖片，也應(yīng)該設(shè)置背景色，通常默認(rèn)設(shè)置背景色為白色

2、表格
1）定義表格寬度時(shí)使用絕對(duì)值（指定像素）。
2）內(nèi)嵌最大表格寬度為775pix，align=left （前提在設(shè)定為778pix的框架內(nèi)）
3）頁(yè)面中從上至下盡量拆分成多個(gè)層疊的表格，盡量用TBODY這個(gè)標(biāo)簽可以控制表格分行下載，當(dāng)表格內(nèi)容很大時(shí)比較實(shí)用，在需要分行下載處加上<tbody>和</tbody>
4）表格必須指定（border，cellspacing，cellpadding），圖文混排時(shí)推薦使用vspace=5
hspace=5。
 5）為加快網(wǎng)頁(yè)下載速度，最好使用CSS定義類表格樣式。

3、字體
1） 為了保證不同瀏覽器上字號(hào)保持一致，字號(hào)建議用點(diǎn)數(shù)pt和像素px來定義，pt一般使用中文宋體的9pt和11pt，px一般使用中文宋體12px 和14.7px 這是經(jīng)過優(yōu)化的字號(hào)，黑體字或者宋體字加粗時(shí)，一般選用11pt和14.7px 的字號(hào)比較合適。
2） 大小為9pt時(shí)，行距為120%；信息類最終頁(yè)面采用彈出方式，標(biāo)題及正文字體規(guī)定為11pt，行距為140%。所有頁(yè)面字體大小建議不要超過11pt。
3） 考慮字體大小的兼容性，避免使用size=2的方式定義，盡量使用pt或px并用css定義
4）文字顏色與頁(yè)面配色協(xié)調(diào)，不使用與背景色相近的顏色。
5） 非圖像設(shè)計(jì)的字體一律采用windows標(biāo)準(zhǔn)宋體。（如果做特殊效果需做成圖）要
加粗文字用Bold,不要用Strong。
6） 頁(yè)面文本不使用下劃線方式，也盡量少采用粗體顯示。

4、CSS書寫規(guī)范
1）所有的CSS的盡量采用外部調(diào)用
<LINK href="style/style.css" rel="stylesheet" type="text/css">
2）代碼較長(zhǎng)的首頁(yè)和重要欄目首頁(yè)可直接內(nèi)嵌CSS，避免調(diào)用時(shí)間太長(zhǎng)，使頁(yè)面未及時(shí)調(diào)用CSS風(fēng)格而顯得凌亂。
3）書寫時(shí)重定義的最先，偽類其次，自定義最后（其中a:link a:visited a:hover a:actived 要按照順序?qū)懀┍阌谧约汉退碎喿x。

5、JS調(diào)用規(guī)范
所有的javascript腳本盡量采取外部調(diào)用
<SCRIPT LANGUAGE="JavaScript" SRC="script/xxxxx.js"></SCRIPT>

6、首頁(yè)head區(qū)代碼規(guī)范
head區(qū)是指首頁(yè)HTML代碼的<head>和</head>之間的內(nèi)容。
head區(qū)必須加入的標(biāo)識(shí)
1）公司版權(quán)注釋 <!--- The site is designed by yourcompany,Inc 07/2005 --->
2）網(wǎng)頁(yè)顯示字符集 例如：
簡(jiǎn)體中文：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
繁體中文：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=BIG5">
英 語：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
3）網(wǎng)站簡(jiǎn)介 <META NAME="DESCRIPTION" CONTENT="網(wǎng)站的簡(jiǎn)介">
4）搜索關(guān)鍵字 <META NAME="keywords" CONTENT="關(guān)鍵字1,關(guān)鍵字2...">
5）網(wǎng)頁(yè)的css規(guī)范 <LINK href="style/style.css" rel="stylesheet" type="text/css">
網(wǎng)頁(yè)標(biāo)題 <title>這里是你的網(wǎng)頁(yè)標(biāo)題</title>
收藏夾圖標(biāo)<link rel = "Shortcut Icon" href="favicon.ico">

7、錯(cuò)誤頁(yè)面規(guī)范
所有程序出錯(cuò)頁(yè)面、找不到的頁(yè)面不要使用默認(rèn)的出錯(cuò)提示，要設(shè)計(jì)為帶網(wǎng)站標(biāo)識(shí)和說明的個(gè)性化的出錯(cuò)提示頁(yè)面。

 8、所有頁(yè)面必須均需經(jīng)過瀏覽器兼容測(cè)試，通常須支持主流瀏覽器IE、Firefox。

2005年8月18日－風(fēng)言瘋語