南通科迅教育培訓(xùn)中心
網(wǎng)頁(yè)設(shè)計(jì)前端頁(yè)面制作的規(guī)范要求和注意事項(xiàng)
1．盡量把頁(yè)面的背景圖及小圖標(biāo)整合到一張圖片，用CSS定位方法。這樣以減少http請(qǐng)求，從而降底網(wǎng)站的下載速度。
2．尊從內(nèi)容與頁(yè)面樣式的脫離，如需要，同樣也要做到布局與COLOR的脫離。什么樣的圖片屬于內(nèi)容：從數(shù)據(jù)庫(kù)里取出來(lái)的圖片。 凡是不屬于內(nèi)容的圖片請(qǐng)都用背景。
1）頁(yè)面代碼，做到精簡(jiǎn)，邏輯性清楚；公用部位可以引入進(jìn)來(lái)，比如頭部，腳部。
2）CSS邏輯清析，精簡(jiǎn)?？稍诓桓淖児δ艿那疤醿?nèi)，做到能更換頁(yè)面布局及換色。CSS樣式每個(gè)頁(yè)面引入不超過(guò)兩個(gè)文 件，一個(gè) 是COMMON：它包含整個(gè)站點(diǎn)都需用到的公用部分，如整體布局，頭部，腳部，框，按扭等。另一個(gè)是當(dāng)前頁(yè)CSS。CSS文件 引入在2個(gè)之內(nèi)，減少http請(qǐng)求避免CSS的表達(dá)式。
3． 將腳本放在底部。這樣頁(yè)面就可以逐步呈現(xiàn)，而且頁(yè)面中的可視組件可以盡早下裁。配合程序開(kāi)發(fā)人員我們需要注意的（xhtml）：
1．了解用戶(hù)可編輯上傳修改的“圖片”，“文字”區(qū)域的需求。根據(jù)需求來(lái)定位控制，以保證頁(yè)面的穩(wěn)定顯示。如圖片，需了解：
1）寬度是否是固定大小，
2）寬度*限度，
3）大小不一樣時(shí)的居中顯示
1. 如文字，需了解：
1) 文字的*長(zhǎng)度。及加“…”省略號(hào)區(qū)域,
2) 在測(cè)試中經(jīng)常也會(huì)碰到英文無(wú)空格情況，得用overflow: hidden的方法隱藏溢出部分。
2．每個(gè)頁(yè)面加上正確顯示的TITLE。
3．在頁(yè)面中盡量完成每步交互效果，包括既時(shí)響應(yīng)的。
4．提交程序員的DEMO必須是連貫的，交互效里齊全，而且經(jīng)過(guò)自已在IE6.0，IE7.0，F(xiàn)IREFOX一次以上的整體測(cè)試。
設(shè)計(jì)師需要注意的幾點(diǎn)：
1. 盡量考慮為元素命名其本身的作用或盡量考慮為元素命名其本身的作用或盡量考慮為元素命名其本身的作用或盡量考慮為 元素 命名其本身的作用或”用意用意用意用意”，，，，達(dá)到語(yǔ)義化達(dá)到語(yǔ)義化達(dá)到語(yǔ)義化達(dá)到語(yǔ)義化。不要使用表面形式 的命 名。如:red/left/big等。
2. 組合命名規(guī)則組合命名規(guī)則組合命名規(guī)則組合命名規(guī)則:
[元素類(lèi)型]-[元素作用/內(nèi)容]
如:搜索按鈕: btn-search 登錄表 單:form-login 新聞列表:list-news
3. 涉及到交互行為的元素命名涉及到交互行為的元素命名涉及到交互行為的元素命名涉及到交互行為的元素命名: 凡涉及交 互行為的元素通常會(huì)有正常、懸停、點(diǎn)擊和已瀏覽等不同樣式，命名可參考以下規(guī)則:
鼠標(biāo)懸停:：hover 點(diǎn)擊：click 已瀏覽：visited
如:搜索按鈕: btn-search、btn-search-hover、btn-search-visited
4.用戶(hù)體驗(yàn)方面需要注意的用戶(hù)體驗(yàn)方面需要注意的用戶(hù)體驗(yàn)方面需要注意的用戶(hù)體驗(yàn)方面需要注意的：
1）每個(gè)連接，按鈕要做上鼠標(biāo)hover時(shí)的一個(gè)變化效果。如果hover時(shí)是換一張背景圖片，請(qǐng)把這兩張圖片整合在一張圖片中，以防止在hover時(shí)，頁(yè)面還在download變化的那張圖片，這樣會(huì)出現(xiàn)那個(gè)按鈕無(wú)圖的間隔；
2）input有個(gè)label，可以讓用戶(hù)在點(diǎn)擊字時(shí)，光標(biāo)自動(dòng)跳入相應(yīng)input中；
3）圖片應(yīng)該有alt屬性，以備圖片阻止時(shí)，文字的替換
