毛片在线视频观看,一级日韩免费大片,在线网站黄色,澳门在线高清一级毛片

薈聚奇文、博采眾長、見賢思齊
當前位置:公文素材庫 > 公文素材 > 范文素材 > 前端頁面設計

前端頁面設計

網(wǎng)站:公文素材庫 | 時間:2019-05-29 15:23:35 | 移動端:前端頁面設計

前端頁面設計

網(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)系我們及時刪除。


前端頁面設計》由互聯(lián)網(wǎng)用戶整理提供,轉(zhuǎn)載分享請保留原作者信息,謝謝!
鏈接地址:http://m.seogis.com/gongwen/713204.html
相關文章