網(wǎng)站建設(shè)要按照特定行業(yè)和客戶(hù)的定制需求來(lái)做，是一項(xiàng)嚴(yán)謹(jǐn)?shù)墓こ?，我們?cè)谶M(jìn)行網(wǎng)站建設(shè)制作的時(shí)候有些規(guī)范需要了解。下面天水網(wǎng)站建設(shè)小士就來(lái)談?wù)勥@方面應(yīng)該注意的事項(xiàng)。

　　一、網(wǎng)頁(yè)尺寸與布局

　　制作網(wǎng)頁(yè)時(shí)，我們選用的分辨率是72像素/英寸，使用的畫(huà)布尺寸1920px*1080px。但是并不代表我們可以在整個(gè)畫(huà)布上作圖。

　　網(wǎng)頁(yè)的布局主要有兩種，左右型布局和居中型布局。布局的不一致，使得可設(shè)計(jì)的空間也不相同。

　　1、左右布局，靈活性強(qiáng)， UI的限制小;

　　左邊通欄為導(dǎo)航欄，寬度沒(méi)有具體的限制，可根據(jù)實(shí)際情況調(diào)整;右側(cè)為內(nèi)容版塊范圍，是網(wǎng)站內(nèi)容的展示區(qū)域。

　　2、居中布局，中間的藍(lán)色部分為有效的顯示局域，用于網(wǎng)站內(nèi)容的展示;換句話說(shuō)，兩邊均為留白，沒(méi)有實(shí)際用途，只是為了適配而存在。

　　一般網(wǎng)站內(nèi)容顯示的區(qū)域?yàn)?200px;以前國(guó)內(nèi)網(wǎng)站大部分還是以1000個(gè)像素為界限，因超過(guò)1000像素適合在大屏幕上瀏覽，小屏幕會(huì)顯得擁擠。目前由于用戶(hù)電腦顯示器分辨率的提高，現(xiàn)在的的界限以1200px標(biāo)準(zhǔn)，所以網(wǎng)站寬度在1200像素以?xún)?nèi)可以保證大部分用戶(hù)舒適的瀏覽網(wǎng)頁(yè)。

　　二、網(wǎng)頁(yè)字體設(shè)置標(biāo)準(zhǔn)

　　字體設(shè)計(jì)的總原則是：可辨識(shí)性和易讀性。

　　網(wǎng)頁(yè)的文字設(shè)計(jì)是系統(tǒng)默認(rèn)的字體：宋體、微軟黑體、蘋(píng)果系統(tǒng)黑體，英文則建議使用arial無(wú)襯線字體

　　常用的字號(hào)大小有以下幾種：

　　12px是應(yīng)用于網(wǎng)頁(yè)的最小字體，適用于非突出性的日期，版權(quán)等注釋性?xún)?nèi)容。

　　14px 則適用于非突出性的普通正文內(nèi)容。

　　16px、18px或者20px 適用于突出性的標(biāo)題內(nèi)容。

　　相鄰兩個(gè)文字的間距，其實(shí)不需要太過(guò)介意，除了特殊的需求之外，都可以使用默認(rèn)數(shù)值的間距。

　　行間距，推薦以 字體大小的1.5—2倍 作為參考;段間距，推薦以 字體大小的2—2.5倍 作為參考。即，當(dāng)選用14px 的字體時(shí)，行間距：21—28px;段間距：28px—35px。

　　主文字顏色，建議使用 公司品牌的VI顏色，可提高公司網(wǎng)站與公司VI之間的關(guān)聯(lián)，增加可辨識(shí)性和記憶性。

　　正文字體顏色，保險(xiǎn)起見(jiàn)，選用易讀性的深灰色，建議選用 #333333到#666666 之間的顏色。

　　輔助性的，注釋類(lèi)的文字，則可以選用#999999之類(lèi)的比較淺的顏色。

　　如果，你對(duì)顏色駕馭能力比較強(qiáng)，你也可以選用 偏公司VI顏色的深色，作為正文字體顏色或者輔助性文字顏色。

　　例如公司的品牌色是藍(lán)色，那么，正文字體就可以選用偏藍(lán)的深色。這樣處理之后，文字就帶有了環(huán)境色，網(wǎng)站整體色調(diào)將更加和諧。

　　三、響應(yīng)式布局設(shè)計(jì)

　　響應(yīng)式設(shè)計(jì)指的是不同設(shè)備、屏幕、分辨率、操作方式(鼠標(biāo)、鍵盤(pán)、觸摸)，保證信息在不同環(huán)境下表現(xiàn)一致，保證可交互可操作。

　　由于頁(yè)面的寬度發(fā)生了變化，進(jìn)而信息展現(xiàn)也改變了就是響應(yīng)式設(shè)計(jì)。直到最后在手機(jī)屏幕上的顯示圖片信息變成了一列。

　　對(duì)頁(yè)面進(jìn)行響應(yīng)式的設(shè)計(jì)實(shí)現(xiàn)，需要對(duì)相同內(nèi)容進(jìn)行不同寬度的布局設(shè)計(jì)，有兩種方式：桌面優(yōu)先(從桌面端開(kāi)始向下設(shè)計(jì));移動(dòng)優(yōu)先(從移動(dòng)端向上設(shè)計(jì));

　　無(wú)論基于哪種模式的設(shè)計(jì)，要兼容所有設(shè)備，布局響應(yīng)時(shí)不可避免地需要對(duì)模塊布局做一些變化(當(dāng)頁(yè)面寬度發(fā)生變化的尺寸范圍就是臨界點(diǎn)的概念。所以做響應(yīng)式設(shè)計(jì)時(shí)我們需要知道每一個(gè)尺寸的寬度范圍在多少時(shí)我們就可以制定出相對(duì)應(yīng)清晰的一個(gè)臨界點(diǎn)，制定了臨界點(diǎn)之后就知道，當(dāng)屏幕的寬度范圍位于哪一個(gè)點(diǎn)的時(shí)候，我們的頁(yè)面信息該如何展示。)

　　我們通過(guò)JS獲取設(shè)備的屏幕寬度，來(lái)改變網(wǎng)頁(yè)的布局，這一過(guò)程我們可以稱(chēng)之為布局響應(yīng)屏幕。

　　另外，在不同設(shè)備上采用相似的設(shè)計(jì),用戶(hù)可以通過(guò)不同類(lèi)型的設(shè)備訪問(wèn)你的網(wǎng)站，這些設(shè)備包括：電腦、平板、手機(jī)、音樂(lè)播放器、甚至是智能手表等。無(wú)論用戶(hù)使用什么設(shè)備訪問(wèn)你的網(wǎng)頁(yè)，確保他們具有類(lèi)似的體驗(yàn)，這是用戶(hù)體驗(yàn)設(shè)計(jì)中的一條重要標(biāo)準(zhǔn)。

　　四、文件命名規(guī)則與目錄結(jié)構(gòu)規(guī)則

　　首頁(yè)面必須以“index.html、index.htm、index.php index.jsp、index.aspx等命名的文件。

　　HTML文件擴(kuò)展文件名一律用 .htm或.html

　　在根目錄中原則上應(yīng)該按照首頁(yè)的欄目結(jié)構(gòu)，給每一個(gè)欄目開(kāi)設(shè)一個(gè)目錄，根據(jù)需要在每一個(gè)欄目的目錄中開(kāi)設(shè)一個(gè)image 的子目錄用以放置此欄目專(zhuān)有的圖片和多媒體文件，如果這個(gè)欄目的內(nèi)容特別多，又分出很多下級(jí)欄目，可以相應(yīng)的再開(kāi)設(shè)其他目錄。

　　除非有特殊情況，目錄、文件的名稱(chēng)全部用小寫(xiě)英文字母、數(shù)字、下劃線的組合，其中不得包含漢字、空格和特殊字符;目錄名應(yīng)以英文、拼音為主。盡量用一些大家都能看懂的詞匯。使得你自己和工作組的每一個(gè)成員能夠方便的理解每一個(gè)文件的意義。

　　共用的模板文件應(yīng)放在根目錄的Templates文件夾下(此為dreamweaver的默認(rèn)路徑，如用其它軟件開(kāi)發(fā)者也需遵守此規(guī)則)。

　　五、導(dǎo)航的設(shè)計(jì)要求

　　導(dǎo)航設(shè)計(jì)是網(wǎng)頁(yè)可用性的基石。記住，如果用戶(hù)在你的網(wǎng)站里找不到導(dǎo)航，那么無(wú)論你的網(wǎng)站有多少都沒(méi)用用。這也是導(dǎo)航設(shè)計(jì)要遵循以下原則的原因：

　　簡(jiǎn)單。每個(gè)網(wǎng)站都應(yīng)該有盡可能簡(jiǎn)單的結(jié)構(gòu)。

　　清晰。導(dǎo)航的每項(xiàng)對(duì)用戶(hù)而言，都應(yīng)該是清楚的。

　　一致。系統(tǒng)的導(dǎo)航頁(yè)在每一頁(yè)中都應(yīng)該是相同的。

　　用戶(hù)以最少的點(diǎn)擊次數(shù)，最快地到達(dá)他們想要瀏覽的網(wǎng)頁(yè)。這才是導(dǎo)航設(shè)計(jì)的目的。

　　按照以上的基本規(guī)范來(lái)建設(shè)網(wǎng)站是網(wǎng)站建設(shè)取得成功的重要保障。不管你設(shè)計(jì)什么類(lèi)型的網(wǎng)站，企業(yè)營(yíng)銷(xiāo)型網(wǎng)站也好，高端品牌網(wǎng)站建設(shè)也好，都不能脫離以上的基本規(guī)范。同時(shí)也要照顧到客戶(hù)的個(gè)性需求，使你制作的網(wǎng)站既符合行業(yè)規(guī)范標(biāo)準(zhǔn)，又能突出自己個(gè)性。