網(wǎng)站設(shè)計(jì)規(guī)范參考

./設(shè)計(jì)規(guī)參考一、設(shè)計(jì)風(fēng)格1、依照的定位確定整體的設(shè)計(jì)風(fēng)格。2、主體框架頁(yè)面、容頁(yè)盡量采用方型結(jié)構(gòu)。禁用長(zhǎng)距離的斜線及弧線結(jié)構(gòu),可允許小圍的斜線及弧線。封面頁(yè)、專題頁(yè)可不受此限制。3、設(shè)計(jì)時(shí)盡量在方塊區(qū)邊緣、按鈕、標(biāo)題裝飾塊上體現(xiàn)設(shè)計(jì)技巧,拐角可以有曲線變化。拐角塊最大不得超過(guò)18像素。同一頁(yè)面弧度盡量保持一致。4、各主要欄目之間要求使用一致的布局,包括一致的頁(yè)面元素；一致的導(dǎo)航形式,使用相同的銨鈕,相同的順序?？筛醉?yè)有變化。5、首頁(yè)及各級(jí)頁(yè)面都必須帶有的LOGO,并到首頁(yè)。6、設(shè)計(jì)要兼容分辨率,就目前顯示器分辨率的覆蓋率,可以采用1024*768分辨率,建議頁(yè)面使用寬度為1000px、980px或者950px設(shè)計(jì)等,對(duì)于容偏少的或者專題,也可采用800*600分辨率,建議使用寬度為778px或者760px。7、頁(yè)面長(zhǎng)度建議1屏半到2屏。原則上長(zhǎng)度不超過(guò)3屏,寬度不超過(guò)1屏。根據(jù)用戶習(xí)慣和需要,國(guó)中文綜合類、門戶類<包括垂直門戶>可設(shè)計(jì)超過(guò)3屏。8、每個(gè)標(biāo)準(zhǔn)頁(yè)面為A4幅面大小,即8.5*11英寸二、名稱約定<一>文件命名的原則：以最少的字母達(dá)到最容易理解的意義路徑/文件名設(shè)定1>每一個(gè)目錄中應(yīng)該包含一個(gè)缺省的html文件,文件名統(tǒng)一用index.htm2>路徑/文件命名時(shí)一律采用小寫(xiě)英文字母、數(shù)字、下劃線的組合,其中不得包含漢字、空格和特殊字符；目錄的命名請(qǐng)盡量以英文翻譯為優(yōu)先,盡量避免使用拼音作為目錄名稱3>多個(gè)同類型文件使用英文字母加數(shù)字命名,字母和數(shù)字之間用_分隔。例如：news_01.htm。注意,數(shù)字位數(shù)與文件個(gè)數(shù)成正比,不夠的用0補(bǔ)齊。例如共有200條新聞,其中第18條命名為news_018.htm2、路徑/文件名稱需與欄目菜單名稱具有相關(guān)性3、各路徑下的開(kāi)始文件,命名為index.*靜態(tài)文件為index.html,動(dòng)態(tài)文件為index.asp,index.aspx,index.php,index.jsp4、文件名中用"_"下劃線作為連接符。5、如頁(yè)面文件過(guò)長(zhǎng)需要拆分,建議多個(gè)文件按順序依次命名為filename01.*、filename02.*……6、容不同但屬于同類的,且需定期更新的頁(yè)面文件或文本采用：名稱縮寫(xiě)＋<年份>＋月份＋日期＋序號(hào),如=news081508.*7、大流量的首頁(yè)和各欄目首頁(yè)盡量使用以html為文件后綴名的靜態(tài)頁(yè)面。其他經(jīng)常訪問(wèn)的動(dòng)態(tài)頁(yè)面也建議模擬為靜態(tài)頁(yè)面。<二>圖片的命名規(guī)：名稱分為頭尾兩兩部分,用下劃線隔開(kāi)1、頭部分表示此圖片的大類性質(zhì)。例如：放置在頁(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依照此原則類推2、尾部分用來(lái)表示圖片的具體含義,用英文字母表示。例如：banner_sohu.gifbanner_sina.gifmenu_aboutus.gifmenu_job.giftitle_news.giflogo_police.giflogo_national.gifpic_people.jpgpic_hill.jpg3、有onmouse效果的圖片,兩分別在原有文件名后加"_on"和"_off"命名<三>其它文件命名規(guī)js的命名原則以功能的英語(yǔ)單詞為名。例如：廣告條的js文件名為:ad.js

所有的CGI文件后綴為cgi。所有CGI程序的配置文件為config.cgi三、目錄結(jié)構(gòu)規(guī)目錄建立的原則：以最少的層次提供最清晰簡(jiǎn)便的訪問(wèn)結(jié)構(gòu)。1、目錄命名的規(guī)〔參照名稱約定2、根目錄一般只存放index.html以及其他必須的系統(tǒng)文件3、每個(gè)主要欄目建立一個(gè)相應(yīng)的獨(dú)立目錄4、根目錄下的images用于存放各頁(yè)面都要使用的公共圖片,子目錄下的images目錄存放本欄目頁(yè)面使用的私有圖片5、所有JS、ASP、PHP等腳本存放在根目錄下的scripts目錄或includes目錄6、所有CSS文件存放在根目錄下style目錄7、所有CGI程序存放在根目錄下的cgi-bin目錄8、每個(gè)語(yǔ)言版本存放于獨(dú)立的目錄。例如：簡(jiǎn)體中文gb,英文en9、所有flash,avi,ram,quicktime等多媒體文件建議存放在根目錄下的media目錄,如果屬于各欄目下面的媒體文件,分別在該欄目目錄下建立media目錄10、廣告、交換、banner等圖片保存到adv目錄11、頁(yè)面下載、解釋時(shí)間在56k速度下不能超過(guò)40秒〔欄目首頁(yè)、表單頁(yè)或20秒〔一般頁(yè)面。四、圖形設(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)尺寸,logo一般控制在150×54以,客戶要求或特殊廣告圖片可另定尺寸。建議首頁(yè)存儲(chǔ)大小不得超過(guò)150K<包括圖片>,其它頁(yè)面經(jīng)壓縮后尺寸不得超過(guò)70K。2、圖片的分類及命名規(guī)則1>名稱分為頭尾兩兩部分,用下劃線隔開(kāi)。2>頭部分表示此圖片的大類性質(zhì),例如廣告、標(biāo)志、菜單、按鈕等等。一般來(lái)說(shuō):放置在頁(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依照此原則類推。3>尾部分用來(lái)表示圖片的具體含義,如果有類似圖片就用數(shù)字區(qū)別。3、Banner制作要求1>大Banner<468×60Pixel>容量盡量限制在15K,格式盡量選用GIF及動(dòng)態(tài)格式。2>幀切換時(shí)盡量半靜半動(dòng)。少用滿底256色以上的圖像。閃切變化主要體現(xiàn)在文字上。3>廣告條的border設(shè)為0,并要求加上alt說(shuō)明。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、PNG或JPEG格式,原則上色調(diào)單一的圖片存成GIF格式,色彩復(fù)雜、層次豐富的存在PNG或JPEG格式。4>設(shè)計(jì)時(shí)不得用15K以上的圖片,如圖片過(guò)大可以考慮采用圖片分割的辦法。5>容圖片、導(dǎo)航圖片的border設(shè)為0,并要求加上alt說(shuō)明。6>普通圖片不必加alt說(shuō)明,但如果有要把border設(shè)為0。7>公用圖片或有可能更換的圖片不要8>指定圖片的尺寸大小〔width,height9>標(biāo)準(zhǔn)網(wǎng)頁(yè)廣告尺寸規(guī)格一、120*120,這種廣告規(guī)格適用于產(chǎn)品或新聞?wù)掌故?。a、120*60,首頁(yè)右上,這種廣告規(guī)格主要用于做LOGO使用。b、120*90,主要應(yīng)用于產(chǎn)品演示或大型LOGO。c、125*125,這種規(guī)格適于表現(xiàn)照片效果的圖像廣告。d、150*60,頁(yè)左上e、234*60,這種規(guī)格適用于框架或左右形式主頁(yè)的廣告。f、392*72,主要用于有較多圖片展示的廣告條,用于頁(yè)眉或頁(yè)腳。g、468*60,首頁(yè)頂部通欄,頁(yè)頂部通欄,應(yīng)用最為廣泛的廣告條尺寸。h、80*80或100*100,左漂浮i、88*31,主要用于網(wǎng)頁(yè),或小型LOGO。j、560*60或468*60,下載地址頁(yè)面k、580*60,首頁(yè)中部通欄l、760*60,首頁(yè)頂部通欄,頁(yè)頂部通欄,頁(yè)底部通欄五、規(guī)1、新聞、信息類通常用新開(kāi)窗口方式打開(kāi)。2、頂部導(dǎo)航、底部導(dǎo)航通常采取在本頁(yè)打開(kāi),特殊欄目和功能可新開(kāi)窗口。3、帶下劃線為通常的默認(rèn)風(fēng)格,頂部導(dǎo)航或特殊位置為了觀賞性可用樣式表取消下劃線。4、的顏色可配合主題顏色風(fēng)格改變,通常為藍(lán)色、暗藍(lán)色、黑色,但激活后的顏色、鼠標(biāo)移動(dòng)其上時(shí)的顏色要同本身顏色進(jìn)行區(qū)分。六、頁(yè)面制作規(guī)色彩規(guī)色彩相關(guān)聯(lián)想紅色：熱情、奔放、喜悅、莊嚴(yán)

黃色：高貴、富有、燦爛、活潑黑色：嚴(yán)肅、夜晚、沉著白色：純潔、簡(jiǎn)單、潔凈藍(lán)色：天空、清爽、科技綠色：植物、生命、生機(jī)灰色：莊重、沉穩(wěn)紫色：浪漫、富貴棕色：、厚樸1>應(yīng)該有自己的標(biāo)準(zhǔn)色〔主體色,標(biāo)準(zhǔn)色原則上不超過(guò)兩種,如果有兩種,其中一種為標(biāo)準(zhǔn)色,另一種為標(biāo)準(zhǔn)輔助色；標(biāo)準(zhǔn)色應(yīng)盡量采用216種web安全色之的色彩,必須提供標(biāo)準(zhǔn)色確切的RGB和CYMK數(shù)值2>根據(jù)性質(zhì),避免在一個(gè)頁(yè)面上有太多的色彩,活潑但不失穩(wěn)重,顏色柔和但不亂3>文字的色彩要與頁(yè)面協(xié)調(diào)。4>即使頁(yè)面有背景圖片,也應(yīng)該設(shè)置背景色,通常默認(rèn)設(shè)置背景色為白色2、表格1>定義表格寬度時(shí)使用絕對(duì)值〔指定像素。2>嵌最大表格寬度為775pix,align=left〔前提在設(shè)定為778pix的框架3>頁(yè)面中從上至下盡量拆分成多個(gè)層疊的表格,盡量用TBODY這個(gè)標(biāo)簽可以控制表格分行下載,當(dāng)表格容很大時(shí)比較實(shí)用,在需要分行下載處加上<tbody>和</tbody>4>表格必須指定〔border,cellspacing,cellpadding,圖文混排時(shí)推薦使用vspace=5hspace=5。5>為加快網(wǎng)頁(yè)下載速度,最好使用CSS定義類表格樣式。3、字體1>為了保證不同瀏覽器上字號(hào)保持一致,字號(hào)建議用點(diǎn)數(shù)pt和像素px來(lái)定義,pt一般使用中文宋體的9pt和11pt,px一般使用中文宋體12px和14.7px這是經(jīng)過(guò)優(yōu)化的字號(hào),黑體字或者宋體字加粗時(shí),一般選用11pt和14.7px的字號(hào)比較合適。2>大小為9pt時(shí),行距為120%；信息類最終頁(yè)面采用彈出方式,標(biāo)題及正文字體規(guī)定為11pt,行距為140%。所有頁(yè)面字體大小建議不要超過(guò)11pt。3>考慮字體大小的兼容性,避免使用size=2的方式定義,盡量使用pt或px并用css定義4>文字顏色與頁(yè)面配色協(xié)調(diào),不使用與背景色相近的顏色。5>非圖像設(shè)計(jì)的字體一律采用windows標(biāo)準(zhǔn)宋體?！踩绻鎏厥庑Ч枳龀蓤D要加粗文字用Bold,不要用Strong。6>頁(yè)面文本不使用下劃線方式,也盡量少采用粗體顯示。4、CSS書(shū)寫(xiě)規(guī)1>所有的CSS的盡量采用外部調(diào)用<LINKhref="/style/style.css"rel="stylesheet"type="text/css">2>代碼較長(zhǎng)的首頁(yè)和重要欄目首頁(yè)可直接嵌CSS,避免調(diào)用時(shí)間太長(zhǎng),使頁(yè)面未及時(shí)調(diào)用CSS風(fēng)格而顯得凌亂。3>書(shū)寫(xiě)時(shí)重定義的最先,偽類其次,自定義最后〔其中a:linka:visiteda:hovera:actived要按照順序?qū)懕阌谧约汉退碎喿x。5、JS調(diào)用規(guī)所有的javascript腳本盡量采取外部調(diào)用<SCRIPTLANGUAGE="JavaScript"src="/script/xxxxx.js"></SCRIPT>6、首頁(yè)head區(qū)代碼規(guī)head區(qū)是指首頁(yè)HTML代碼的<head>和</head>之間的容。head區(qū)必須加入的標(biāo)識(shí)1>公司注釋<!Thesiteisdesignedbyyourcompany,Inc07/2005>2>網(wǎng)頁(yè)顯示字符集例如：簡(jiǎn)體中文：<METAHTTP-EQUIV="Content-Type"CONTENT="text/html;charset=gb2312">繁體中文：<METAHTTP-EQUIV="Content-Type"CONTENT="text/html;charset=BIG5">英語(yǔ)：<METAHTTP-EQUIV="Content-Type"CONTENT="text/html;charset=iso-8859-1">3>簡(jiǎn)介<METANAME="DESCRIPTION"CONTENT="的簡(jiǎn)介">4>搜索關(guān)鍵字<METANAME="keywords"CONTENT="關(guān)鍵字1,關(guān)鍵字2...">5>網(wǎng)頁(yè)的css規(guī)<LINKhref="/style/style.css"rel="stylesheet"type="text/css">網(wǎng)頁(yè)標(biāo)題<title>這里是你的網(wǎng)頁(yè)標(biāo)題</title>收藏夾圖標(biāo)<linkrel="ShortcutIcon"href="favicon.ico">7、body標(biāo)識(shí)

為了保證瀏覽器的兼容性,必須設(shè)置頁(yè)面背景<bodybgcolor="#FFFFFF">8、錯(cuò)誤頁(yè)面規(guī)所有程序出錯(cuò)頁(yè)面、找不到的頁(yè)面不要使用默認(rèn)的出錯(cuò)提示,要設(shè)計(jì)為帶標(biāo)識(shí)和說(shuō)明的個(gè)性化的出錯(cuò)提示頁(yè)面。9、所有頁(yè)面必須均需經(jīng)過(guò)瀏覽器兼容測(cè)試,通常須支持主流瀏覽器IE、Firefox。七、容編輯規(guī)容必須遵守我國(guó)《計(jì)算機(jī)信息網(wǎng)絡(luò)國(guó)際聯(lián)網(wǎng)安全保護(hù)管理辦法》的規(guī)定任何單位和個(gè)人不得利用國(guó)際聯(lián)網(wǎng)制作、復(fù)制、查閱和傳播下列信息：

<一>煽動(dòng)抗拒、破壞憲法和法律、行政法規(guī)實(shí)施的；

<二>煽動(dòng)顛覆國(guó)家政權(quán),推翻社會(huì)主義制度的；

<三>煽動(dòng)分裂國(guó)家、破壞國(guó)家統(tǒng)一的；

<四>煽動(dòng)民族仇恨、民族歧視,破壞民族團(tuán)結(jié)的；

<五>捏造或者歪曲事實(shí),散布謠言,擾亂社會(huì)秩序的；

<六>宣揚(yáng)封建迷信、淫穢、、賭博、暴力、兇殺、恐怖,犯罪的；

<七>公然侮辱他人或者捏造事實(shí)誹謗他人的；

<八>損害國(guó)家機(jī)關(guān)信譽(yù)的；

<九>其他違反憲法和法律、行政法規(guī)的。

必須找到原出處,經(jīng)聯(lián)系后使用標(biāo)題：力求簡(jiǎn)短、醒目、新穎、吸引人。正文：文章的段首空兩格,與傳統(tǒng)格式保持一致段與段之間空一行可以使文章更清晰易看杜絕錯(cuò)字、別字和自造字簡(jiǎn)體版中不得夾雜繁體字譯名要按我國(guó)規(guī)。例如：singapore統(tǒng)一翻譯"新加坡"不能用"星加坡"全角數(shù)字符號(hào)〔不含標(biāo)點(diǎn)應(yīng)改為半角八、新技術(shù)使用規(guī)使用新技術(shù)原則是：兼容瀏覽器,保證下載速度,照顧最多數(shù)的用戶。

cookie用于識(shí)別、跟蹤和支持訪問(wèn)者,通過(guò)cookie你可以了解用戶的訪問(wèn)路徑,收集和存儲(chǔ)用戶的喜好,但要考慮到用戶關(guān)閉cookie的情況處理,非要用cookie,應(yīng)提供全面的解決辦法。Java是一種跨平臺(tái)的面向?qū)ο蟮木幊陶Z(yǔ)言,它在Web中的應(yīng)用主要是JavaApplet,但是JavaApplet的下載速度較慢,謹(jǐn)慎使用