網(wǎng)頁設(shè)計(jì)前端頁面制作要求

時間：2025-08-31 18:38:23 網(wǎng)頁設(shè)計(jì)

　　前端對于網(wǎng)站來說，通常是指網(wǎng)站的前臺部分，包括網(wǎng)站的表現(xiàn)層和結(jié)構(gòu)層。下面整理了一些網(wǎng)頁設(shè)計(jì)前端頁面制作的規(guī)范要求和注意事項(xiàng)，希望對大家有所幫助！

　　注意：

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

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

　　1)頁面代碼，做到精簡，邏輯性清楚;公用部位可以引入進(jìn)來，比如頭部，腳部。

　　2)CSS邏輯清析，精簡�？稍诓桓淖児δ艿那疤醿�(nèi)，做到能更換頁面布局及換色。

　　CSS樣式每個頁面引入不超過兩個文件，一個是COMMON：它包含整個站點(diǎn)都需用到的公用部分，如整體布局，頭部，腳部，框，按扭等。另一個是當(dāng)前頁的CSS。CSS文件引入在2個之內(nèi)，減少http請求避免CSS的表達(dá)式。

　　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必須是連貫的，交互效里齊全，而且經(jīng)過自已在IE6.0，IE7.0，F(xiàn)IREFOX一次以上的整體測試。

　　設(shè)計(jì)師需要注意的幾點(diǎn)：

　　1.盡量考慮為元素命名其本身的作用或”用意”，達(dá)到語義化。不要使用表面形式的命名。如:red/left/big等。

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

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

　　登錄表單:form-login

　　新聞列表:list-news

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

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

　　鼠標(biāo)懸停:：hover 點(diǎn)擊：click 已瀏覽：visited

　　如:搜索按鈕: btn-search、btn-search-hover、btn-search-visited

　　4.用戶體驗(yàn)方面需要注意的：

　　1). 每個連接，按鈕要做上鼠標(biāo)hover時的一個變化效果。如果hover時是換一張背景圖片，請把這兩張圖片整合在一張圖片中，以防止在hover時，頁面還在download變化的那張圖片，這樣會出現(xiàn)那個按鈕無圖的間隔;

　　2). INPUT有個label，可以讓用戶在點(diǎn)擊字時，光標(biāo)自動跳入相應(yīng)input中;

　　3). 圖片應(yīng)該有alt屬性，以備圖片阻止時，文字的替換。

【網(wǎng)頁設(shè)計(jì)前端頁面制作要求】相關(guān)文章：