推薦網頁製作規範

01 命名規範

文件命名的原則:以最少的字母達到最容易理解的意義。 
一般文件及目錄命名規範:
每一個目錄中應該包含一個缺省的html 文件,文件名統一用index.htm 
文件名稱統一用小寫的英文字母、數字和下劃線的組合 
儘量按單詞的英語翻譯爲名稱。例如:feedback(信息反饋),aboutus(關於我們) 
多個同類型文件使用英文字母加數字命名,字母和數字之間用_分隔。例如:news_01.htm。注意,數字位數與文件個數成正比,不夠的用0補齊。例如共有200條新聞,其中第18條命名爲news_018.htm

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

尾部分用來表示圖片的具體含義,用英文字母表示。例如:banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic_people.jpg pic_hill.jpg. 
有onmouse效果的圖片,兩張分別在原有文件名後加"_on"和"_off"命名。

其它文件命名規範
js的命名原則以功能的英語單詞爲名。例如:廣告條的js文件名爲:ad.js 
所有的CGI文件後綴爲cgi。所有CGI程序的配置文件爲config.cgi

02 目錄結構規範

目錄建立的原則:以最少的層次提供最清晰簡便的訪問結構。 
目錄的命名以小寫英文字母,下劃線組成。(參照命名規範) 
根目錄一般只存放index.htm以及其他必須的系統文件 
每個主要欄目開設一個相應的獨立目錄 
根目錄下的images用於存放各頁面都要使用的公用圖片,子目錄下的images目錄存放本欄目頁面使用的私有圖片 
所有JS,ASP,PHP等腳本存放在根目錄下的scripts目錄 
所有CGI程序存放在根目錄下的cgi-bin目錄 
所有CSS文件存放在根目錄下style目錄 
每個語言版本存放於獨立的目錄。例如:簡體中文gb 
所有flash, avi, ram, quicktime 等多媒體文件存放在根目錄下的media目錄


03 尺寸規範

尺寸規範請根據您的實際情況調整: 
頁面標準按800*600分辨率製作,推薦尺寸爲766*430px
頁面長度原則上不超過3屏,寬度不超過1屏  
每個標準頁面爲A4幅面大小,即8.5X11英寸  
全尺寸banner爲468*60px,半尺寸banner爲234*60px,小banner爲88*31px,另外120*90,120*60也是小圖標的標準尺寸  
每個非首頁靜態頁面含圖片字節不超過60K,全尺寸banner不超過14K

 
04 首頁代碼規範

首頁的代碼關鍵在head區,head區是指首頁HTML代碼的<head>和</head>之間的內容。  
head區必須加入的標識 
公司版權註釋 <!--- The site is designed by yourcompany,Inc 03/2001 --->  
網頁顯示字符集 例如:
簡體中文:<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">


原始製作者信息 <META name="author" content="[email protected]"> 
網站簡介 <META NAME="DESCRIPTION" CONTENT="這裏填您網站的簡介"> 
搜索關鍵字 <META NAME="keywords" CONTENT="關鍵字1,關鍵字2,關鍵字3,...">  
網頁的css規範 <LINK href="style/style.css" rel="stylesheet" type="text/css"> 
網頁標題 <title>這裏是你的網頁標題</title>

head區可以選擇加入的標識 
設定網頁的到期時間。一旦網頁過期,必須到服務器上重新調閱。
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT"> 
禁止瀏覽器從本地機的緩存中調閱頁面內容。
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">  
用來防止別人在框架裏調用你的頁面。
<META HTTP-EQUIV="Window-target" CONTENT="_top"> 
自動跳轉。
<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.68design.net">
5指時間停留5秒。

網頁搜索機器人嚮導.用來告訴搜索機器人哪些頁面需要索引,哪些頁面不需要索引。
<META NAME="robots" CONTENT="none">
CONTENT的參數有all,none,index,noindex,follow,nofollow。默認是all。 
收藏夾圖標
<link rel = "Shortcut Icon" href="favicon.ico"> 
JS調用規範
所有的javascript腳本儘量採取外部調用
<SCRIPT LANGUAGE="JavaScript" SRC="script/xxxxx.js"></SCRIPT>

CSS書寫規範
所有的CSS的儘量採用外部調用
<LINK href="style/style.css" rel="stylesheet" type="text/css"> 書寫時重定義的最先,僞類其次,自定義最後(其中a:link a:visited a:hover a:actived 要按照順序寫)便於自己和他人閱讀。

爲了保證不同瀏覽器上字號保持一致,字號建議用點數pt和像素px來定義,pt一般使用中文宋體的9pt和11pt,px一般使用中文宋體12px 和14.7px 這是經過優化的字號,黑體字或者宋體字加粗時,一般選用11pt和14.7px 的字號比較合適。

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: #0000FF; text-decoration: none} 
a:visited { font-size: 9pt; color: #990099; 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: #FF9900; text-decoration: none} 
.blue { font-family: "宋體"; font-size: 10.5pt; line-height: 20px; color: #0099FF; letter-spacing: 5em} 
--> 
</style>

body標識
爲了保證瀏覽器的兼容性,必須設置頁面背景<body bgcolor="#FFFFFF"> 

05 形象設計規範

網站的CI整體形象包括下面幾個要素

標誌(logo)

網站必須有獨立的標誌

標誌可以以網站中英文名稱設計,也可以採用特別的圖案。原則是簡單易記。

標誌必須可以用黑白和彩色分別清晰表現

標誌圖片的名稱爲"logo_域名.gif",例如:logo_sina.gif

儘量提供標誌的矢量圖片

請儘可能在每個頁面上都使用標誌

標準色

網站應該有自己的標準色(主體色)

標準色原則上不超過兩種,如果有兩種,其中一種爲標準色,另一種爲標準輔助色

標準色應儘量採用216種web安全色之內的色彩

必須提供標準色確切的RGB和CYMK數值

請儘可能使用標準色

標準字體

網站應該定義一種標準字體(指logo上,圖片上使用的字體)

標準字體原則上定義兩種,一種中文字體,一種英文字體 (不包括文本內容字體)

必須提供標準字體的名稱和字庫

請儘可能使用標準字體

06 內容編輯規範

內容

必須遵守我國《計算機信息網絡國際 聯網安全保護管理辦法》的規定

任何單位和個人不得利用國際聯網製作、複製、查閱和傳播下列信息:
(一)煽動抗拒、破壞憲法和法律、行政法規實施的; 
(二)煽動顛覆國家政權,推翻社會主義制度的; 
(三)煽動分裂國家、破壞國家統一的; 
(四)煽動民族仇恨、民族歧視,破壞民族團結的; 
(五)捏造或者歪曲事實,散佈謠言,擾亂社會秩序的; 
(六)宣揚封建迷信、淫穢、色情、賭博、暴力、兇殺、 恐怖,教唆犯罪的; 
(七)公然侮辱他人或者捏造事實誹謗他人的; 
(八)損害國家機關信譽的; 
(九)其他違反憲法和法律、行政法規的。 

轉載必須找到原出處,經聯繫後使用

標題

力求簡短、醒目、新穎、吸引人。

正文

文章的段首空兩格,與傳統格式保持一致

段與段之間空一行可以使文章更清晰易看

杜絕錯字、別字和自造字

簡體版中不得夾雜繁體字

譯名要按我國規範。例如:singapore統一翻譯"新加坡"不能用"星加坡"

全角數字符號(不含標點)應改爲半角

 
07 新技術使用規範

使用新技術原則是:兼容瀏覽器,保證下載速度,照顧最多數的用戶。 

cookie用於識別、跟蹤和支持訪問者,通過cookie你可以瞭解用戶的訪問路徑,收集和存儲用戶的喜好,但要考慮到用戶關閉cookie的情況處理,非要用cookie,應提供全面的解決辦法。

Java是一種跨平臺的面向對象的編程語言,它在Web中的應用主要是Java Applet,但是Java Applet的下載速度較慢,謹慎使用。

在服務器端,最好打開SSI解析,但不要使用過多的SSI嵌套。不能使用SSI時,可以用include Library(包含庫文件)代替,效果要差一些

Flash已經是較普遍的技術,推薦使用。

新網頁製作建議採用XHTML規範,便於未來和XML接軌。

XML系列技術可以在服務器端使用,客戶端暫時不推薦使用

非特殊要求,不推薦在網頁上提供需要下載額外插件的多媒體技術

程序語言推薦使用PHP,JSP,Java等跨平臺語言,不推薦CGI,ASP技術


08 導航規範

導航要簡單、清晰,建議不超過3層的鏈接

用於導航的文字要簡明扼要,字數限制在一行以內

首頁,各欄目一級頁面之間互鏈,各欄目一級和本欄目二級頁面之間互鏈

超過三級頁面,在頁面頂部設置導航條,標明位置

突出最近更新的信息,可以加上更新時間或New標識

連續性頁面應加入上一頁,下一頁按鈕

超過一屏的內容,在底部應有go top按鈕

超過三屏的內容,應在頭部設提綱,直接鏈接到文內錨點

09 數據庫使用規範

服務器上有關數據庫的一切操作只能由服務器管理人員進行。

程序中訪問數據庫時使用統一的用戶、統一的連接文件訪問數據庫。 

原則上每一個欄目只能建一個庫,庫名與各欄目的英文名稱相一致,庫中再包含若干表。比較大的、重點的欄目可以考慮單獨建庫,庫名與欄目的英文名稱相一致。 

數據庫、表、字段、索引、視圖等一系列與數據庫相關的名稱必須全部使用與內容相關的英文單詞命名,對於一個單詞難以表達的,可以考慮用多個單詞加下劃線(_)連接(不能超過四個單詞)命名。 (參見命名規範)

不再使用的數據庫、表應刪除,在刪除之前必須備份(包括結構和內容)。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章