網(wǎng)頁設(shè)計前端頁面規(guī)范要求和注意事項

本文格式為Word版，下載可任意編輯——網(wǎng)頁設(shè)計前端頁面規(guī)范要求和注意事項網(wǎng)頁設(shè)計前端頁面模范要求和留神事項

引導(dǎo)語：網(wǎng)頁前端的設(shè)計是直接面向用戶的，是用戶所看得見的效果，以下是我整理的網(wǎng)頁設(shè)計前端頁面模范要求和留神事項，接待參考閱讀!

1．盡量把頁面的背景圖及小圖標整合到一張圖片，用CSS定位方法。這樣以裁減http苦求，從而降底網(wǎng)站的下載的速度。

2．尊從內(nèi)容與頁面樣式的脫離，如需要，同樣也要做到布局與COLOR的脫離。什么樣的圖片屬于內(nèi)容：從數(shù)據(jù)庫里取出來的圖片。只要不屬于內(nèi)容的圖片請都用背景。

1）頁面代碼，做到精簡，規(guī)律性領(lǐng)會；公用部位可以引入進來，譬如頭部，腳部。

2）CSS規(guī)律清析，精簡?？稍诓蛔兏δ艿那疤醿?nèi)，做到能更換頁面布局及換色。

CSS樣式每個頁面引入不超過兩個文件，一個是COMMON：它包含整個站點都需用到的公用片面，如整體布局，頭部，腳部，框，按扭等。另一個是當前頁的CSS。CSS文件引入在2個之內(nèi)，裁減http苦求制止CSS的表達式。

3．將腳本放在底部。

這樣頁面就可以逐步呈現(xiàn)，而且頁面中的可視組件可以盡早下裁。

合作程序開發(fā)人員我們需要留神的（xhtml）：

1．了解用戶可編輯上傳修改的.“圖片”，“文字”區(qū)域的需求。根據(jù)需求來定位操縱，以保證頁面的穩(wěn)定顯示。如圖片，需了解：

1）寬度是否是固定大小，

2）寬度最大限度，

3）大小不一樣時的居中顯示

如文字，需了解：

1文字的最大長度。及加“…”省略號區(qū)域,

2在測試中經(jīng)常也會碰見英文無空格處境，得用overflow:hidden的方法暗藏溢出片面。

2．每個頁面加上正確顯示的TITLE。

3．在頁面中盡量完成每步交互效果，包括既時響應(yīng)的。

4．提交程序員的DEMO務(wù)必是連貫的，交互效里齊全，而且經(jīng)過自已在IE6.0，IE7.0，F(xiàn)IREFOX一次以上的整體測試。

設(shè)計師需要留神的幾點：

1.盡量考慮為元素命名其本身的作用或”用意”，達成語義化。不要使用外觀形式的命名。如:red/left/big等。

2.組合命名規(guī)矩:

[元素類型]-[元素作用/內(nèi)容]如:探尋按鈕:btn-search

登錄表單:form-login

新聞列表:list-news

3.涉及到交互行為的元素命名:

凡涉及交互行為的元素通常會有正常、懸停、點擊和已欣賞等不同樣式，命名可參考以下規(guī)矩:

鼠標懸停:：hover點擊：click已欣賞：visited

如:探尋按鈕:btn-search、btn-search-hover、btn-search-visited

4.用戶體驗方面需要留神的：

1）．每個連接，按鈕要做上鼠標hover時的一個變化效果。假設(shè)hover時是換一張背景圖片，請把這兩張圖片整合在一張圖片中，以防止在hover時，頁面還在download變化的那張圖片，這樣會展現(xiàn)那個按鈕無圖的間隔；

2）．INPU