網頁設計,是根據企業希望向瀏覽者傳遞的資訊(包括產品、服務、理念、文化),進行網站功能策劃,然後進行的頁面設計美化工作。下面就來和小編一起看看網頁設計前端頁面製作的規範要求和注意事項吧。
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屬性,以備圖片阻止時,文字的替換。