前端頁面設計
網(wǎng)站設計模式:MVC(modeviewcontroller)MVC模式的目的就是實現(xiàn)Web系統(tǒng)的職能分工Model層實現(xiàn)系統(tǒng)中的業(yè)務邏輯View層用于與用戶的交互
Controller層是Model與View之間溝通的橋梁,它可以分派用戶的請求并選擇恰當?shù)囊晥D以用于顯示,同時它也可以解釋用戶的輸入并將它們映射為模型層可執(zhí)行的操作。
前端實現(xiàn)網(wǎng)站的view層:
涉及技術:html,css,ps,js等。
工作內(nèi)容:把設計好的網(wǎng)頁UI圖片切成html頁面
技術要點:1.div+css
DIV+CSS是網(wǎng)站標準(或稱“WEB標準”)中常用術語之一,div+css是一種網(wǎng)頁的布局方法,這一種網(wǎng)頁布局方法有別于傳統(tǒng)的HTML網(wǎng)頁設計語言中的表格(table)定位方式,真正地達到了w3c內(nèi)容與表現(xiàn)相分離。HTML語言自HTML4.01以來,不再發(fā)布新版本,原因就在于HTML語言正變得越來越復雜化、專用化。XHTML語言是一種可以將HTML語言標準化,用XHTML語言重寫后的HTML頁面可以應用許多XML應用技術。使得網(wǎng)頁更加容易擴展,適合自動數(shù)據(jù)交換,并且更加規(guī)整。在XHTML網(wǎng)站設計標準中,不再使用表格定位技術,而是采用DIV+CSS的方式實現(xiàn)各種定位。
教程網(wǎng)址:了解如何用div+css設計一個網(wǎng)頁1.切圖:PS
利用PS可以把一整張網(wǎng)頁圖片切成我們想要的素材(如:背景圖片等)和了解網(wǎng)頁尺寸(如:頁面寬度)。2.CSS+JS:
CSS+JS可以實現(xiàn)頁面的各種排版樣式,使頁面更加美觀。資料:可以上網(wǎng)找一些css和js手冊。
教程:學習js和css
平時練習:可以閱讀網(wǎng)站網(wǎng)頁源碼或網(wǎng)上找一些網(wǎng)頁圖片模板來嘗試進行設計。
擴展閱讀:前端交互頁面設計要求
項目名稱任我游門戶項目型號
任我游門戶前端交互頁面設計要求
文檔編號:文檔版本:1.0
擬制部門_____軟件技術部______
擬制_____李祖玉_201*_年_2_月1_日
審核_________________年____月日
標準化審查_年月日
批準年月日
上海易羅信息科技有限公司
任我游門戶前端交互頁面設計要求
文件更改記錄
版本號1.0創(chuàng)建更改內(nèi)容方式創(chuàng)建更改人李祖玉更改日期201*-2-12/任我游門戶前端交互頁面設計要求
3/任我游門戶前端交互頁面設計要求
4/任我游門戶前端交互頁面設計要求
目錄
1.2.3.4.
規(guī)范說明.............................................................6編碼方式.............................................................6注釋.................................................................6頁面結(jié)構布局.........................................................64.1.4.2.5.
使用HTML5標準...................................................7采用DIV布局.....................................................7
樣式設計要求.........................................................75.1.5.2.5.3.5.4.
避免使用CSSexpressions.........................................7合并樣式中圖片...................................................7盡量引用外部的CSS...............................................7CSS引用放在頂部.................................................7
6.JS設計要求..........................................................86.1.6.2.
統(tǒng)一使用Jquery框架..............................................8JS盡量放在頁面底部..............................................8
7.8.9.
MyGou靜態(tài)文件目錄結(jié)構...............................................8版本控制.............................................................9前端頁面進度安排.....................................................9
5/9
任我游門戶前端交互頁面設計要求
1.規(guī)范說明
為規(guī)范管理前端頁面設計,提高頁面加載速度,改善用戶體驗,便于項目的維護、更新和升級,特制定此標準。
2.編碼方式
統(tǒng)一使用UTF-8編碼
3.注釋
HTML、CSS、JS文件都要寫上注釋。
HTML注釋:結(jié)構體比較大時,分別在開始標簽和結(jié)束標簽寫上注釋(如:…);每個單獨完整的結(jié)構體可以在開始和結(jié)束標簽寫上功能名稱(如:…)。
CSS注釋:在css的文件的頭部寫上創(chuàng)建日期、修改內(nèi)容等注釋信息;每段HTML結(jié)構樣式寫上區(qū)塊名稱(如:/******toolbarstart******/…/******toolbarend******/)。
JS注釋:在js的頭部寫上創(chuàng)建日期、修改內(nèi)容等注釋信息;在每個function寫上注釋說明;功能復雜的functon在內(nèi)部注釋說明。
4.頁面結(jié)構布局
合理的結(jié)構布局可以提高頁面的加載速度,使瀏覽器兼容性更強,可讀性更好,有利于html元素結(jié)構的重用和封裝。
6/任我游門戶前端交互頁面設計要求
4.1.使用HTML5標準
HTML5標準是目前web的發(fā)展方向,雖然HTML5中的元素目前并不為所有瀏覽器所支持,但HTML5文檔結(jié)構定義各瀏覽器都可以在標準模式下解析頁面,而不需要指定某個類型的DTD。
4.2.采用DIV布局
頁面統(tǒng)一使用DIV布局結(jié)構,謹慎使用表格(盡量不用),最少化iframe數(shù)量。
5.樣式設計要求
5.1.避免使用CSSexpressions
表達式計算開銷很大,影響web加載性能;暴露了一個腳本執(zhí)行環(huán)境,CSS表達式就構成了一個可能的腳本注入攻擊方向;IE8的標準模式不再支持CSS表達式。
5.2.合并樣式中圖片
為了減少頁面http的請求數(shù)量,加快web頁面請求速度,特別是樣式中使用的圖片比較多,給頁面加載帶來了負擔。把樣式中使用的圖片歸類并合并在一起,使用時用位置點來控制顯示區(qū)域。
5.3.盡量引用外部的CSS
外部引用css文件有可能被瀏覽器緩存起來,不用每次都去服務器請求。內(nèi)部引用css文件,有可能包含在動態(tài)的html文檔結(jié)構中,每次都要從服務請求下載,影響了web加載速度。
5.4.CSS引用放在頂部
css放在頁面要頂部,可以加快頁面渲染速度,改善用戶體驗。
7/任我游門戶前端交互頁面設計要求
6.JS設計要求
6.1.統(tǒng)一使用Jquery框架
Jquery是繼prototype之后又一個優(yōu)秀的Javascrīpt框架。它是輕量級的js庫(壓縮后只有21k),它兼容CSS3,還兼容各種瀏覽器(IE6.0+,FF1.5+,Safari2.0+,Opera9.0+)。jQuery使用戶能更方便地處理HTMLdocuments、events、實現(xiàn)動畫效果,并且方便地為網(wǎng)站提供AJAX交互。jQuery還有一個比較大的優(yōu)勢是,它的文檔說明很全,而且各種應用也說得很詳細,同時還有許多成熟的插件可供選擇。jQuery能夠使用戶的html頁保持代碼和html內(nèi)容分離,也就是說,不用再在html里面插入一堆js來調(diào)用命令了,只需定義id即可。
6.2.JS盡量放在頁面底部
JS會阻塞頁面加載,由于html文檔是從上而下來渲染頁面,JS放在底部,不會影響頁面渲染,改善用戶體驗。
7.MyGou靜態(tài)文件目錄結(jié)構
MyGou靜態(tài)文件目錄結(jié)構
為了規(guī)范和管理靜態(tài)文件,頁面中所有的靜態(tài)文件以模塊的方式存放在不同的文件夾中,便于日后的管理和維護。
文件目錄結(jié)構如下:
目錄結(jié)構static/mygou/(js|css|image|html|falsh)/commonstatic/mygou/(js|css|image|html|falsh)/account公共文件夾帳號模塊(用戶注冊、用戶登錄、忘記密碼等)8/9
說明任我游門戶前端交互頁面設計要求
static/mygou/(js|css|image|html|falsh)/user用戶模塊(添加好友,刪除好友,管理好友列表,管理好友分組,添加分組,刪除分組,移動分組等)static/mygou/(js|css|image|html|falsh)/equip設備模塊(添加設備,刪除設備,設備升級提醒等)static/mygou/(js|css|image|html|falsh)/notice消息模塊(管理消息列表,回復消息,刪除消息等)static/mygou/(js|css|image|html|falsh)/waypoint航點模塊(添加航點,刪除航點,管理航點列表,航點分組,航點分組管理,管理航點分組列表等)
8.版本控制
每次提交的版本,必須帶有版本號,對每次提交的內(nèi)容有較好的版本控制。
9.前端頁面進度安排
日期201*-02-06201*-02-08201*-02-27進度完成首頁和一張內(nèi)頁設計稿網(wǎng)站整體風格確認說明供評審使用通過評審確認網(wǎng)站設計風格整個網(wǎng)站重構頁面完成,可交開發(fā)使用重構頁面從登錄注冊頁面開始,再到各模塊,具體安排與開發(fā)溝通。201*-03-06與開發(fā)一起調(diào)試、BUG修復完成修復各瀏覽兼容性問題,js腳本報錯,局部樣式調(diào)整等
9/9
友情提示:本文中關于《前端頁面設計》給出的范例僅供您參考拓展思維使用,前端頁面設計:該篇文章建議您自主創(chuàng)作。
來源:網(wǎng)絡整理 免責聲明:本文僅限學習分享,如產(chǎn)生版權問題,請聯(lián)系我們及時刪除。