網(wǎng)站制作中，前端頁面設(shè)計(jì)有哪些要求和注意事項(xiàng)呢,？下面為大家分析,。
1,、尊從內(nèi)容與頁面樣式的脫離,，如需要，同樣也要做到布局與COLOR的脫離,。什么樣的圖片屬于內(nèi)容：從數(shù)據(jù)庫里取出來的圖片,。凡是不屬于內(nèi)容的圖片請都用背景。
1) 頁面代碼,，做到精簡,，邏輯性清楚;公用部位可以引入進(jìn)來，比如頭部,，腳部,。
2) CSS邏輯清析，精簡,?？稍诓桓淖児δ艿那疤醿?nèi)，做到能更換頁面布局及換色,。
CSS樣式每個(gè)頁面引入不超過兩個(gè)文件,，一個(gè)是COMMON：它包含整個(gè)站點(diǎn)都需用到的公用部分,，如整體布局，頭部,，腳部,，框，按扭等,。另一個(gè)是當(dāng)前頁的CSS,。CSS文件引入在2個(gè)之內(nèi)，減少http請求避免CSS的表達(dá)式,。
2,、盡量把頁面的背景圖及小圖標(biāo)整合到一張圖片，用CSS定位方法,。這樣以減少http請求,，從而降底網(wǎng)站的下載速度。
3,、 將腳本放在底部,。
這樣頁面就可以逐步呈現(xiàn)，而且頁面中的可視組件可以盡早下裁,。

設(shè)計(jì)師需要注意的幾點(diǎn)：
1,、盡量考慮為元素命名其本身的作用或”用意”，達(dá)到語義化,。不要使用表面形式的命名,。如:red/left/big等。
2,、組合命名規(guī)則:
[元素類型]-[元素作用/內(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.用戶體驗(yàn)方面需要注意的：
1),、 每個(gè)連接，按鈕要做上鼠標(biāo)hover時(shí)的一個(gè)變化效果,。如果hover時(shí)是換一張背景圖片,，請把這兩張圖片整合在一張圖片中，以防止在hover時(shí),，頁面還在download變化的那張圖片,，這樣會(huì)出現(xiàn)那個(gè)按鈕無圖的間隔；
2),、 INPUT有個(gè)label,，可以讓用戶在點(diǎn)擊字時(shí),，光標(biāo)自動(dòng)跳入相應(yīng)input中；
3),、圖片應(yīng)該有alt屬性,，以備圖片阻止時(shí)，文字的替換,。

配合程序開發(fā)人員我們需要注意的(xhtml)：
1,、了解用戶可編輯上傳修改的“圖片”，“文字”區(qū)域的需求,。根據(jù)需求來定位控制,，以**頁面的穩(wěn)定顯示。如圖片,，需了解：
1) 寬度是否是固定大?。?br /> 2) 寬度**限度,；
3) 大小不一樣時(shí)的居中顯示,；
如文字，需了解：
1) 文字的**長度,。及加“…”省略號區(qū)域,。
2) 在測試中經(jīng)常也會(huì)碰到英文無空格情況，得用overflow: hidden的方法隱藏溢出部分,。
2,、每個(gè)頁面加上正確顯示的TITLE。
3,、在頁面中盡量完成每步交互效果,，包括既時(shí)響應(yīng)的。
4,、提交程序員的DEMO必須是連貫的,，交互效里齊全,，而且經(jīng)過自已在IE6.0,，IE7.0，F(xiàn)IREFOX一次以上的整體測試,。

該文章由上海集錦科技網(wǎng)站建設(shè)http://www.shwzzz.cn原創(chuàng)編寫,，轉(zhuǎn)載請保留此地址！