《網(wǎng)站建設目錄規(guī)范試行》（以下簡稱《規(guī)范》）目的是從整體上規(guī)范網(wǎng)站建設過程中的統(tǒng)一性和可擴展性，方便于團隊中更好的協(xié)作及設計者以后的維護。請注意《規(guī)范》中的用詞，以確定哪些是“必須”哪些是“參考”。

 

此《規(guī)范》為試行版，內容在不斷完善更新中。如果你有什么意見和建議，或發(fā)現(xiàn)內容有什么錯誤請積極指正，我們將及時改進修正。

 

網(wǎng)站建設標準,網(wǎng)站制作,網(wǎng)頁設計,網(wǎng)站建設公司

網(wǎng)站建設標準,網(wǎng)站制作,網(wǎng)頁設計,網(wǎng)站建設公司

 

二、網(wǎng)站建設基本流程規(guī)范

 

網(wǎng)站建設（或者升級改版）應包含下列基本流程：

1、制定網(wǎng)站規(guī)劃方案：包括網(wǎng)站預期目標、行業(yè)競爭狀況分析、網(wǎng)站欄目結構、用戶行為分析及內容規(guī)劃、網(wǎng)頁模版設計、網(wǎng)站服務器技術選型、網(wǎng)站運營維護規(guī)范等基本內容；

2、網(wǎng)站技術開發(fā)、網(wǎng)站模板制作；

3、網(wǎng)站測試；

4、網(wǎng)站內容發(fā)布；

5、網(wǎng)站維護及管理。

 

三、網(wǎng)站優(yōu)化規(guī)范

 

網(wǎng)站優(yōu)化的最終目的是為用戶獲取有價值信息提供方便，網(wǎng)站優(yōu)化包括三個方面：對用戶獲取信息優(yōu)化、搜索引擎優(yōu)化、網(wǎng)站維護優(yōu)化。

1、網(wǎng)站欄目結構合理，欄目設置不要過于復雜；

2、網(wǎng)站導航清晰且全站統(tǒng)一，通過任何一個網(wǎng)頁可以逐級返回上一級欄目直到首頁；

3、網(wǎng)頁布局設計合理，網(wǎng)站設計符合用戶瀏覽習慣；

4、重要文字信息盡可能出現(xiàn)在網(wǎng)頁靠前位置；

5、字體清晰，CSS風格協(xié)調一致；

6、最多3次點擊可到達產品詳細內容頁面；

7、通過網(wǎng)站任何一個網(wǎng)頁不超過3次點擊可達到站內其他任何一個網(wǎng)頁；

8、遵照搜索引擎為管理員提供的網(wǎng)站優(yōu)化指南，通過網(wǎng)站結構和內容等基本要素的優(yōu)化為搜索引擎檢索信息提供方便，不采用任何被搜索引擎視為垃圾信息的方法和欺騙搜索引擎的方式（如堆積關鍵詞、用戶不可見文本、頁面跳轉、復制網(wǎng)頁等等）；

9、網(wǎng)站首頁、欄目首頁及產品內容頁面均有一定的文字信息量；

10、每個網(wǎng)頁有獨立的、可概括說明該網(wǎng)頁核心內容的網(wǎng)頁標題（而不是全站或者一個欄目共用一個網(wǎng)頁標題）；

11、每個網(wǎng)頁有獨立的、與該網(wǎng)頁內容相關的META標簽設計（包括description和keywords）；

12、每個網(wǎng)頁有獨立的URL；

13、產品內容頁面URL盡可能簡短且體現(xiàn)出產品屬性；

14、產品/企業(yè)新聞詳細內容頁面是獨立網(wǎng)頁不是彈出窗口；

15、對于產品品種多的企業(yè)網(wǎng)站，要有合理的產品分頁方式；

16、網(wǎng)站內容保持適當?shù)母轮芷凇?/span>

 

四、網(wǎng)站建設實施規(guī)范

 

A、網(wǎng)站建設尺寸規(guī)范

 

1、頁面標準按800*600分辨率全屏制作，每個頁面的寬度為778象素；頁面標準按1024*768分辨率全屏制作，每個頁面的寬度為1004象素； 1024*768分辨率，建議寬度使用960像素。

2、全尺寸Banner統(tǒng)一規(guī)格為470×70px，半尺寸banner為234*60px，小banner為88*31px ；部分banner可根椐實際情況設置尺寸； 

3、Logo統(tǒng)一為160*70px； 

4、每個非首頁靜態(tài)頁面含圖片字節(jié)不超過80K，全尺寸banner不超過20K ；（點擊了解更多：響應式網(wǎng)站建設深受歡迎的根本原因是更符合用戶要求）

 

B、網(wǎng)站建設目錄規(guī)范

 

遵從原則：以最少的層次提供最清晰簡便的訪問結構；以最少的字母達到最容易理解的意義。

 

1、 目錄以代表此目錄文件內容含義的英文單詞命名，目錄名若為單個單詞，均須小寫，目錄名若大于等于兩個單詞，從第二個單詞起的每個單詞的首字母大寫，其余字母小寫。

2、 網(wǎng)站根目錄：只允許存放網(wǎng)站缺省命名文件索引文件（如default.shtml）一個，以及其它必備的文件（如golas.asa, Web.config）。

3、 網(wǎng)站根目錄下開設images子目錄，用以存放不同欄目的頁面都要用到的公共圖片，例如網(wǎng)站標識、導航欄圖片、按鈕等。每個目錄下私有圖片存放于各自獨立images目錄。

4、 在網(wǎng)站根目錄下開設Templates目錄，用以存放各欄目的模板文件；Templates 中另建與網(wǎng)站根目錄下對應的欄目目錄，存放不同欄目對應的模板文件，每個目錄中默認文件：content.htm , list.htm 分別是內容頁的模板、列表頁的模板，其他需要用到的模板根據(jù)實際用處按規(guī)定命名，在文件命名規(guī)則中詳細闡述。

5、 在網(wǎng)站根目錄下開設styles、scripts目錄，分別存放樣式表文件與客戶端腳本文件。

6、 在網(wǎng)站根目錄下開設upload子目錄，用以存放網(wǎng)站后臺上傳的文件；

根據(jù)實際需要建立download目錄，用以存放提供給瀏覽者下載的文件。

7、 在網(wǎng)站根目錄下開設include目錄，存放公用的包含文件（如top.htm、head.htm、foot.htm）。

8、在網(wǎng)站根目錄下開設plus目錄，存放所有網(wǎng)站建設中用到的服務器端的程序文件（如 search.asp、function.asp）。

9、每個語言版本存放于獨立的目錄。已有版本語言設置為：

簡體中文 gb

繁體中文 ig5

英 語 en

韓 語 kr

日 語 jp

俄 語 u

10、在網(wǎng)站根目錄下按照欄目結構，為每個主要功能(主菜單)建立一個相應的獨立目錄。目錄名為此欄目的英文翻譯（例如：關于我們 boutus信息反饋 eedback產 品 product），根據(jù)需要在每一個欄目目錄中開設images子目錄，用以放置此欄目專用圖片。(例如：boutusimages； productimages)。

總結：

所有的js文件存放在根目錄下下的scripts目錄；

所有的CSS文件存放在根目錄下的styles目錄；

所有的程序存放在根目錄下的plus目錄；

所有公用的包含文件存放在根目錄下的include目錄；

所有的模板文件存放在根目錄下的Templates目錄；

所有的公用的圖片文件存放在根目錄下的images目錄；

所有的上傳文件存放在根目錄下的upload目錄；

所有的提供給瀏覽者下在的文件存放在根目錄下的download目錄；

如果建設中的網(wǎng)站為多語言版本的，根據(jù)其語言版本存放于獨立的目錄， 

目錄命名規(guī)則以國家英文簡碼為準；

 

C、網(wǎng)站建設文字，標點規(guī)范

 

1、非正文頁面每頁內容盡量在1000字以內網(wǎng)頁的文字必須采用樣式定義，以避免由于顯示器的差異造成頁面差異；

2 、文章正文內容，CSS樣式設置應該有交互性，可以讓訪問者自已調整文字的大小及行距等；（以適應不同訪問者訪問，增加網(wǎng)站的友好性。）默認為：字號用點數(shù)pt和像素px來定義，pt一般使用中文宋體的9pt和11pt，px一般使用中文宋體12px 和14，黑體字或者宋體字加粗時，一般選用11pt和14.7px；行距建議用百分比來定義，常用的兩個行距的值是line-height:120%/150%. 

3 、中文版中正文默認使用宋體； 

4 、英文版中正文默認使用Arial字體； 

5 、中文段首要空2個漢字的位置，西文段首不空； 

6 、西文中一定要用西文半角標點符號，西文中不得使用全角符號（請注意空格）； 

7 、外文版內不能出現(xiàn)別國語言字符，必需出現(xiàn)的，應把內容做成圖片。（點擊了解更多：網(wǎng)站建設改版時應避免網(wǎng)站結構布局的大規(guī)模顛覆性調整）

 

D、網(wǎng)站建設導航規(guī)范

 

1、每一個頁面都因該出現(xiàn)的固定信息：

內容包括：主頁，網(wǎng)站介紹，站點視圖，聯(lián)系方式，反饋，搜索工具，常見問題解答，實際內容欄目(包括相關站點鏈接、新聞頁)； 

2、每頁必須有導航條，格式例：首頁->頻道名稱->欄目名稱->文章標題；菜單名稱要統(tǒng)一：標題欄目前后一致； 

3、欄目如果采用圖標, 圖片的ALT屬性要寫本圖片或按鈕的名稱，以避免圖像表達不清或圖像無法下載。 

4、無任何鏈接內容的不做成按鈕的形式。 

5、每個頁面底端都需要加注《版權聲明》，要根據(jù)不同的語言版本調用。標注方法：中文版—中英文；英文版—中英文；法文版—中法文；日文版—中日文；韓文版—中韓文；（標注內容需用圖片，防止訪問者字符編碼不全顯示不正常）； 

6、網(wǎng)站文字鏈接的顏色在點擊前和點擊后要有區(qū)別。讓訪問者知道哪些內容是看過的，哪些內容還未訪問；

 

E、網(wǎng)站建設文件命名規(guī)范

 

遵從原則：以最少的字母達到最容易理解的意義。

文件的名稱全部用小寫英文字母、數(shù)字、下劃線的組合，其中不得包含漢字、空格和特殊字符；命名原則的指導思想：一是使得你自己和工作組的每一個成員能夠方便的理解每一個文件的意義;二是當我們在文件夾中使用按名稱排序時能夠排列在一起，以便查找、修改、替換、計算負載量等等操作；

1、網(wǎng)站主頁，各欄目主頁的名稱一定要用“default.擴展名”命名；

2、文件以代表此文件內容含義的英文單詞命名，文件名為單個單詞，均須小寫，文件名大于等于兩個單詞，從第二個單詞起的每個單詞的首字母大寫，其余字母小寫。如aboutLeftMenu.htm

3、圖片的命名原則遵循以下幾條規(guī)范：

1) 圖片名稱為首、尾兩部分，尾部分*個字母大寫以作區(qū)分。

2) 首部分表示圖片大類性質。如廣告（banner）、標志（logo）、菜單（menu）、按鈕（button）、標題圖片（title）等。有onmouse效果的圖片，兩張分別在原有文件名后加"_on"和"_off"命名。(可進一步完善此規(guī)范，并把一系列命名規(guī)則整理成條款列出) 

3) 尾部分表示圖片的具體含義。

4) 圖片文件命名舉例如下：menuAboutUs.gif、menuNews.gif、logo.gif、bannerYahoo.gif、bannerSina.gif、buttonSearch.gif

 

F、網(wǎng)站建設文件格式規(guī)范

 

1、圖片的使用以JPG及GIF為主，顏色較豐富變化較多的圖片使用JPG文件，其他則建議使用GIF文件；

2、靜態(tài)網(wǎng)頁及被調用和包含的網(wǎng)頁文件均以.htm為擴展名

 

G、網(wǎng)站建設文件存放規(guī)范

 

這部分內容與網(wǎng)站目錄規(guī)范基本相同，

1、如果建設中的網(wǎng)站為多語言版本的，文版主文件夾必須用英文簡碼命名。如：韓文版的所有內容都必須放到kr文件夾中。其他的子文件夾或文件要和中文版的名字一一對應；

2、各頁面所用的圖片要放到相應的images文件夾中；子欄目頁面用到的圖片放到欄目目錄的images文件夾中； 

3、站點中所使用到的JavaScript文件都存放在根目錄下的scripts目錄中；

4、站點中所使用的樣式表文件都放到根目錄下的styles目錄中，原則上是每個欄目都要有自己的樣式表文件，并有一個公用的樣式表文件，但在具體使用中可以根據(jù)站點規(guī)模的大小靈活操作；

5、所有的程序及應用文件都放在站點根目錄下的plus目錄中；

6、所有公用的包含文件和被調用的文件都放在include目錄中，每個欄目私有的包含及調用文件可放各自的欄目目錄中；

7、站點中使用的模板文件都放在站點根目錄下的Templates目錄中，并按照其所屬欄目分別放在對應的目錄中，Templates目錄中的目錄結構應該與站點中的主欄目結構一致，保證目錄的對應；

8、通過網(wǎng)站后臺上傳的文件均放在站點根目錄的upload目錄中，并設置目錄權限為不可執(zhí)行腳本；

9、所有提供給瀏覽者下載的文件存放在根目錄下的download目錄中，如果這個目錄中的文件可以通過后臺上傳，要設置目錄權限為不可執(zhí)行腳本；

 

H、網(wǎng)站鏈接結構規(guī)范

 

遵從原則：用最少的鏈接，使瀏覽最有效率

1、首頁與一級頁面間，使用星狀鏈接結構

2、一級頁面與二級頁面間，使用樹狀鏈接結構

4、 超過三級頁面，在頁面顯眼位置，設置導航，回到首頁或相關欄目。

 

I、HTML書寫規(guī)范

 

 head區(qū)代碼規(guī)范

1、 版權注釋

<!--- The site is designed by ---> 

2、 網(wǎng)頁顯示字符集 

簡體中文：

<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、 制作者信息 

<META name="author" content="mail@mail.com"> 

4、 網(wǎng)站簡介 

<META NAME="DESCRIPTION" CONTENT="當前頁的介紹"> 

5、 搜索關鍵字 

<META NAME="keywords" CONTENT="關鍵字,關鍵字1,關鍵字2,關鍵字3"> 

6、網(wǎng)頁的css規(guī)范 

<LINK href="xxx/xxx.css" rel="stylesheet" type="text/css"> 

7、 內容頁標題

<title>內容標題 - 欄目名稱 - 網(wǎng)站名稱</title>

列表欄目頁標題

<title>欄目名稱 - 網(wǎng)站名稱</title>

8、所有的javascript調用盡量采取外部調用

<SCRIPT LANGUAGE="JavaScript" SRC="xxx/xxxxx.js"></SCRIPT>

可選加入標簽

1、 設定網(wǎng)頁的到期時間。一旦網(wǎng)頁過期，必須到服務器上重新調閱。 

<META HTTP-EQUIV="expires" CONTENT="Wed, 18 Feb 2004 08:21:57 GMT"> 

2、 禁止瀏覽器從本地機的緩存中調閱頁面內容。 

<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> 

3、防止其它網(wǎng)站在框架里調用本站頁面。 

<META HTTP-EQUIV="Window-target" CONTENT="_top"> 

4、自動跳轉。<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.****. **"> 

5、網(wǎng)頁搜索機器人向導，告訴搜索機器人哪些頁面需要索引，哪些頁面不需要索引。用以保護需點數(shù)才能瀏覽的頁面。 

<META NAME="robots" CONTENT="none"> 

CONTENT的參數(shù)有all,none,index,noindex,follow,nofollow。默認是all。 

6、 收藏夾圖標 <link rel = "Shortcut Icon" href="***.ico">

 

內容的代碼書寫規(guī)范

 

html中javascript的書寫：

<head> 

….. 

<script type="text/javascript"> 

<!— 

….. 

--> 

</script> 

</head> 

 

html中元素的書寫： 

 

1、 元素屬性值必須包含在雙引號中；

<font color=”#000000” size=”3” face=”Arial”> 

2、 form 中必須加action屬性，并且不能為空。

<form action=”/r/add.cgi” method=”post”> 

如果不需要使用action屬性，也必須定義： 

<form action=”no” >

3、 img的alt屬性不可以缺少；

<img src="/q/img/btn_style.gif" border="0" alt="Select”> 

4、 head與</head>之間必須有title； 

<head> 

…… 

<title>your title </title> 

…… 

</head> 

 

5、 tr、td必須定義在table之間；

<table> 

<tr> 

<td>……</td> 

…. 

</tr> 

</table> 

 

6、 button按鈕必須定義在form之間，否則netscape不支持；

<form action=”……” method=”post”>

<input type=”button” name=”but” value=”back”>

</form> 

 

7、 在javascript中的字符串中出現(xiàn)的“/”前要用轉義符“”： 

<script type=”text/javascript”> 

<!— 

function check(str) { 

var str=”/r/add.cgi”; 

…… 

} 

--> 

</script> 

 

8、 onclick 屬性必須和 onkeypress 成對寫( onmousedown + onkeydown、onmouseup + onkeyup) 

<a href=”javascript:void[0]” onClick=”javascript:wopen(….);return false” onkeypress=”javascript:wopen(…);return false”>mm</a> 

 

9、 用URL傳值時直接寫&是不可以的，可用&替換： 

<a href=”/r/add.cgi?uid=sqz&sid=1&pid=1”></a> 

 

縮近規(guī)則： 

 

<table>中<td></td>,<tr></tr>等必須保持嚴格的縮近規(guī)則，以"Tab"鍵為準： 

<table> 

<tr> 

<td> 

<table> 

<tr> 

<td>…</td> 

… 

</tr> 

</table> 

 

</td> 

…. 

</tr> 

</table>

 

 

程序代碼規(guī)范

 

程序注釋規(guī)范

 

數(shù)據(jù)庫使用規(guī)范

 

 

附一、當網(wǎng)站注重百度優(yōu)化時，網(wǎng)站中的路徑盡量全部采用相對路徑。

因為在目前搜索引擎中百度對*路徑比較排斥。

 

附二、CSS樣式表命名規(guī)則

 

樣式命名

登錄條:loginBar

  標志:logo

  側欄:sideBar

  廣告:banner

  導航:nav

  子導航:subNav

  菜單:menu

  子菜單:subMenu

  搜索:search

  滾動:scroll

  頁面主體:main

  內容:content

  標簽頁:tab

  文章列表:list

  提示信息:msg

  小技巧:tips

  欄目標題:title

  友情鏈接:friendLink

  頁腳:footer

  加入:joinus

  指南:guild

  服務:service

  熱點:hot

  新聞:news

  下載:download

  注冊:regsiter

  狀態(tài):status

  按鈕:btn

  投票:vote

  合作伙伴:partner

  版權:copyRight

 

CSSID的命名

  外套:wrap

  主導航:mainNav

  子導航:subnav

  頁腳:footer

  整個頁面:content

  頁眉:header

  頁腳:footer

  商標:label

  標題:title

  主導航:mainNav(globalNav)

  頂導航:topnav

  邊導航:sidebar

  左導航:leftsideBar

  右導航:rightsideBar

  旗志:logo

  標語:banner

  菜單內容1:menu1Content

  菜單容量:menuContainer

  子菜單:submenu

  邊導航圖標:sidebarIcon

  注釋:note

  面包屑:breadCrumb(即頁面所處位置導航提示)

  容器:container

  內容:content

  搜索:search

  登陸:login

  功能區(qū):shop(如購物車，收銀臺)

  當前的current

 

樣式文件命名

  主要的:master.css

  布局版面:layout.css

  專欄:columns.css

  文字:font.css

  打印樣式:print.css

主題:themes.css

 

注釋的寫法 

   

/* Footer */ 

內容區(qū) 

/* End Footer */

 

推薦閱讀：

1.企業(yè)網(wǎng)站建設采用響應式技術有什么好處？

2.網(wǎng)站建設的價格因需求不同和設計制作類型有明顯差異

3.做公司網(wǎng)站建設方案時需注意什么細節(jié)

4.天津網(wǎng)站建設:使用CDN網(wǎng)絡加速器的好處有哪些

5.網(wǎng)站建設時如何溝通需求？網(wǎng)站設計風格有哪些