網(wǎng)頁(yè)設(shè)計(jì)與制作相關(guān)規(guī)范—網(wǎng)站設(shè)計(jì)通用規(guī)范

1、網(wǎng)站設(shè)計(jì)規(guī)范（通用）一、設(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ì)技巧，拐角可以有曲線變化。拐角塊最大不得超過(guò)18像素。同一頁(yè)面弧度盡量保持一致。4、各主要欄目之間要求使用一致的布局，包括一致的頁(yè)面元素；一致的導(dǎo)航形式，使用相同的銨鈕，相同的順序?？筛醉?yè)有變化。5、首頁(yè)及各級(jí)頁(yè)面都必須帶有網(wǎng)站的LOGO(建議小于15054)，并鏈接到網(wǎng)站首頁(yè)。6、統(tǒng)一按兼容分辨率800*600設(shè)計(jì)。為了使顯示更友好，建議使用7

2、78或者760 px設(shè)計(jì)。7、網(wǎng)站頁(yè)面長(zhǎng)度建議1屏半到2屏。原則上長(zhǎng)度不超過(guò)3屏，寬度不超過(guò)1屏。根據(jù)用戶習(xí)慣和網(wǎng)站需要，國(guó)內(nèi)中文網(wǎng)站綜合類、門戶類(包括垂直門戶)網(wǎng)站可設(shè)計(jì)超過(guò)3屏。二、圖形設(shè)計(jì)規(guī)范1、圖片標(biāo)準(zhǔn)尺寸全尺寸banner為46860px，半尺寸banner為23460px，小logo為8831px另外15068、12090，12060也是標(biāo)準(zhǔn)尺寸，網(wǎng)站logo一般控制在15054以內(nèi)，客戶要求或特殊廣告圖片可另定尺寸。建議首頁(yè)存儲(chǔ)大小不得超過(guò)150K(包括圖片)，其它頁(yè)面經(jīng)壓縮后尺寸不得超過(guò)70K。2、圖片的分類及命名規(guī)則(1) 名稱分為頭尾兩兩部分，用下劃線隔開。(2) 頭部分

3、表示此圖片的大類性質(zhì)，例如廣告、標(biāo)志、菜單、按鈕等等。(3) 一般來(lái)說(shuō):n 放置在頁(yè)面頂部的廣告、裝飾圖案等長(zhǎng)方形的圖片我們?nèi)∶篵annern 標(biāo)志性的圖片我們?nèi)∶麨椋簂ogon 在頁(yè)面上位置不固定并且?guī)в墟溄拥男D片我們?nèi)∶麨閎uttonn 在頁(yè)面上某一個(gè)位置連續(xù)出現(xiàn)，性質(zhì)相同的鏈接欄目的圖片我們?nèi)∶簃enun 裝飾用的照片我們?nèi)∶簆icn 不帶鏈接表示標(biāo)題的圖片我們?nèi)∶簍itlen 依照此原則類推。(4) 尾部分用來(lái)表示圖片的具體含義，如果有類似圖片就用數(shù)字區(qū)別。(5) 下面是幾個(gè)樣例，大家應(yīng)該能夠一眼看明白圖片的意義：banner_sohu.gif banner_sina.gif

4、 menu_aboutus.gif menu_job.gif title_news.giflogo_police.gif,title_top01.gif, title_top02.gif(6) 小標(biāo)一定做成透明的。3、Banner制作要求1）大Banner(46860Pixel)容量盡量限制在15K內(nèi)，格式盡量選用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格式(除

5、個(gè)別情況外)，盡量采用16色、填充色或單色。3）圖片依情況存成GIF或JPEG格式，原則上色調(diào)單一的圖片存成GIF格式，色彩復(fù)雜、層次豐富的存在JPEG格式。4）設(shè)計(jì)時(shí)不得用15K以上的圖片，如圖片過(guò)大可以考慮采用圖片分割的辦法。5）內(nèi)容圖片、導(dǎo)航圖片的border設(shè)為0，并要求加上alt說(shuō)明。6）普通圖片不必加alt說(shuō)明，但如果有鏈接要把border設(shè)為0。7）公用圖片或有可能更換的圖片不要指定圖片的尺寸大小（width,height）。三、名稱約定1、路徑/文件名設(shè)定路徑/文件命名時(shí)一律采用小寫英文字母、數(shù)字、下劃線的組合，其中不得包含漢字、空格和特殊字符；目錄的命名請(qǐng)盡量以英文翻譯為優(yōu)先

6、，盡量避免使用拼音作為目錄名稱2、路徑/文件名稱需與欄目菜單名稱具有相關(guān)性3、各路徑下的開始文件，命名為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.*內(nèi)容不同但屬于同類的，且需定期更新的頁(yè)面文件或文本采用：名稱縮寫(年份)月份日期序號(hào) ，如= news081508.*6、大流量網(wǎng)站的首頁(yè)和各欄目首頁(yè)盡量使用以html為文件后綴名的靜態(tài)頁(yè)面。其他經(jīng)常訪問(wèn)的動(dòng)態(tài)頁(yè)面也建

7、議模擬為靜態(tài)頁(yè)面。四、目錄結(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腳本存放在根目錄下的scripts目錄或includes目錄6、所有CSS文件存放在根目錄下style目錄7、每個(gè)語(yǔ)言版本存放于獨(dú)立的目錄。例如：簡(jiǎn)體中文gb，英文en8、所有flash, avi, ram, quicktime 等多媒體文件建議存放在

8、根目錄下的media目錄，如果屬于各欄目下面的媒體文件，分別在該欄目目錄下建立media目錄9、廣告、交換鏈接、banner等圖片保存到adv目錄10、頁(yè)面下載、解釋時(shí)間在56k鏈接速度下不能超過(guò)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

9、、色彩規(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í)用，在需要分行下載處加上和4）表格必須指定（border，cellspacing，cellpadding），圖文混排時(shí)推薦使用vspace=5 hspace=5。

10、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)，不使用與背景色相近

11、的顏色。5）非圖像設(shè)計(jì)的字體一律采用windows標(biāo)準(zhǔn)宋體。（如果做特殊效果需做成圖）要加粗文字用Bold,不要用Strong。6）頁(yè)面文本不使用下劃線方式，也盡量少采用粗體顯示。4、CSS書寫規(guī)范1）所有的CSS的盡量采用外部調(diào)用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)用6、首頁(yè)head區(qū)代碼規(guī)范head區(qū)是指首頁(yè)HTML代碼的和之間的內(nèi)容。head區(qū)必須加入的標(biāo)識(shí)1）公司版權(quán)注釋2）