- 相關推薦
網頁設計前端頁面制作的規范要求和注意事項
網頁設計，是根據企業希望向瀏覽者傳遞的信息（包括產品、服務、理念、文化），進行網站功能策劃，然后進行的頁面設計美化工作。下面就來和小編一起看看網頁設計前端頁面制作的規范要求和注意事項吧。
1.盡量把頁面的背景圖及小圖標整合到一張圖片，用CSS定位方法。這樣以減少http請求，從而降底網站的下載 速度。
2.尊從內容與頁面樣式的脫離，如需要，同樣也要做到布局與COLOR的脫離。什么樣的圖片屬于內容：從數據庫里取出來的圖片。凡是不屬于內容的圖片請都用背景。
1)頁面代碼，做到精簡，邏輯性清楚;公用部位可以引入進來，比如頭部，腳部。
2)CSS邏輯清析，精簡。可在不改變功能的前提內，做到能更換頁面布局及換色。
CSS樣式每個頁面引入不超過兩個文件，一個是COMMON：它包含整個站點都需用到的公用部分，如整體布局，頭部，腳部，框，按扭等。另一個是當前頁的CSS。CSS文件引入在2個之內，減少http請求避免CSS的表達式。
3. 將腳本放在底部。
這樣頁面就可以逐步呈現，而且頁面中的可視組件可以盡早下裁。
配合程序開發人員我們需要注意的(xhtml)：
1.了解用戶可編輯上傳修改的“圖片”，“文字”區域的需求。根據需求來定位控制，以保證頁面的穩定顯示。如圖片，需了解：
1)寬度是否是固定大小，
2)寬度最大限度，
3)大小不一樣時的居中顯示
如文字，需了解：
1) 文字的最大長度。及加“…”省略號區域,
2) 在測試中經常也會碰到英文無空格情況，得用overflow: hidden的方法隱藏溢出部分。
2.每個頁面加上正確顯示的TITLE。
3.在頁面中盡量完成每步交互效果，包括既時響應的。
4.提交程序員的DEMO必須是連貫的，交互效里齊全，而且經過自已在IE6.0，IE7.0，FIREFOX一次以上的整體測試。
設計師需要注意的幾點：
盡量考慮為元素命名其本身的作用或”用意”，達到語義化。不要使用表面形式的命名。如:red/left/big等。
2.組合命名規則:
[元素類型]-[元素作用/內容] 如:搜索按鈕: btn-search
登錄表單:form-login
新聞列表:list-news
3.涉及到交互行為的元素命名:
凡涉及交互行為的元素通常會有正常、懸停、點擊和已瀏覽等不同樣式，命名可參考以下規則:
鼠標懸停:：hover 點擊：click 已瀏覽：visited
如:搜索按鈕: btn-search、btn-search-hover、btn-search-visited
4.用戶體驗方面需要注意的：
1). 每個連接，按鈕要做上鼠標hover時的一個變化效果。如果hover時是換一張背景圖片，請把這兩張圖片整合在一張圖片中，以防止在hover時，頁面還在download變化的那張圖片，這樣會出現那個按鈕無圖的間隔;
2). INPUT有個label，可以讓用戶在點擊字時，光標自動跳入相應input中;
3). 圖片應該有alt屬性，以備圖片阻止時，文字的替換。
【網頁設計前端頁面制作的規范要求和注意事項】相關文章：
網頁設計前端頁面規范要求和注意事項06-16
網頁設計中頁面尺寸標準06-17
網頁設計中的頁面尺寸標準參考10-19
網頁設計中防止頁面被撐開的方法06-16
網頁設計規范06-12
網頁設計頁面尺寸一般多大10-22
網頁設計的制作步驟06-30
網頁制作教學設計06-29
如何制作網頁設計09-17
PC網頁設計尺寸規范10-25