前端頁面設(shè)計(jì)

網(wǎng)站設(shè)計(jì)模式：MVC（modeviewcontroller）MVC模式的目的就是實(shí)現(xiàn)Web系統(tǒng)的職能分工Model層實(shí)現(xiàn)系統(tǒng)中的業(yè)務(wù)邏輯View層用于與用戶的交互

Controller層是Model與View之間溝通的橋梁，它可以分派用戶的請(qǐng)求并選擇恰當(dāng)?shù)囊晥D以用于顯示，同時(shí)它也可以解釋用戶的輸入并將它們映射為模型層可執(zhí)行的操作。

前端實(shí)現(xiàn)網(wǎng)站的view層：

涉及技術(shù)：html,css,ps,js等。

工作內(nèi)容：把設(shè)計(jì)好的網(wǎng)頁UI圖片切成html頁面

技術(shù)要點(diǎn)：1.div+css

DIV+CSS是網(wǎng)站標(biāo)準(zhǔn)（或稱“WEB標(biāo)準(zhǔn)”）中常用術(shù)語之一，div+css是一種網(wǎng)頁的布局方法，這一種網(wǎng)頁布局方法有別于傳統(tǒng)的HTML網(wǎng)頁設(shè)計(jì)語言中的表格（table）定位方式，真正地達(dá)到了w3c內(nèi)容與表現(xiàn)相分離。HTML語言自HTML4.01以來，不再發(fā)布新版本，原因就在于HTML語言正變得越來越復(fù)雜化、專用化。XHTML語言是一種可以將HTML語言標(biāo)準(zhǔn)化，用XHTML語言重寫后的HTML頁面可以應(yīng)用許多XML應(yīng)用技術(shù)。使得網(wǎng)頁更加容易擴(kuò)展，適合自動(dòng)數(shù)據(jù)交換，并且更加規(guī)整。在XHTML網(wǎng)站設(shè)計(jì)標(biāo)準(zhǔn)中，不再使用表格定位技術(shù)，而是采用DIV+CSS的方式實(shí)現(xiàn)各種定位。

教程網(wǎng)址：了解如何用div+css設(shè)計(jì)一個(gè)網(wǎng)頁1.切圖：PS

利用PS可以把一整張網(wǎng)頁圖片切成我們想要的素材（如：背景圖片等）和了解網(wǎng)頁尺寸（如：頁面寬度）。2.CSS+JS:

CSS+JS可以實(shí)現(xiàn)頁面的各種排版樣式，使頁面更加美觀。資料：可以上網(wǎng)找一些css和js手冊(cè)。

教程：學(xué)習(xí)js和css

平時(shí)練習(xí)：可以閱讀網(wǎng)站網(wǎng)頁源碼或網(wǎng)上找一些網(wǎng)頁圖片模板來嘗試進(jìn)行設(shè)計(jì)。

擴(kuò)展閱讀：前端交互頁面設(shè)計(jì)要求

項(xiàng)目名稱任我游門戶項(xiàng)目型號(hào)

任我游門戶前端交互頁面設(shè)計(jì)要求

文檔編號(hào)：文檔版本：1.0

擬制部門_____軟件技術(shù)部______

擬制_____李祖玉_201*_年_2_月1_日

審核_________________年____月日

標(biāo)準(zhǔn)化審查_年月日

批準(zhǔn)年月日

上海易羅信息科技有限公司

任我游門戶前端交互頁面設(shè)計(jì)要求

文件更改記錄

版本號(hào)1.0創(chuàng)建更改內(nèi)容方式創(chuàng)建更改人李祖玉更改日期201*-2-12/任我游門戶前端交互頁面設(shè)計(jì)要求

3/任我游門戶前端交互頁面設(shè)計(jì)要求

4/任我游門戶前端交互頁面設(shè)計(jì)要求

目錄

1.2.3.4.

規(guī)范說明.............................................................6編碼方式.............................................................6注釋.................................................................6頁面結(jié)構(gòu)布局.........................................................64.1.4.2.5.

使用HTML5標(biāo)準(zhǔn)...................................................7采用DIV布局.....................................................7

樣式設(shè)計(jì)要求.........................................................75.1.5.2.5.3.5.4.

避免使用CSSexpressions.........................................7合并樣式中圖片...................................................7盡量引用外部的CSS...............................................7CSS引用放在頂部.................................................7

6.JS設(shè)計(jì)要求..........................................................86.1.6.2.

統(tǒng)一使用Jquery框架..............................................8JS盡量放在頁面底部..............................................8

7.8.9.

MyGou靜態(tài)文件目錄結(jié)構(gòu)...............................................8版本控制.............................................................9前端頁面進(jìn)度安排.....................................................9

5/9

任我游門戶前端交互頁面設(shè)計(jì)要求

1.規(guī)范說明

為規(guī)范管理前端頁面設(shè)計(jì)，提高頁面加載速度，改善用戶體驗(yàn)，便于項(xiàng)目的維護(hù)、更新和升級(jí)，特制定此標(biāo)準(zhǔn)。

2.編碼方式

統(tǒng)一使用UTF-8編碼

3.注釋

HTML、CSS、JS文件都要寫上注釋。

HTML注釋：結(jié)構(gòu)體比較大時(shí)，分別在開始標(biāo)簽和結(jié)束標(biāo)簽寫上注釋(如：…)；每個(gè)單獨(dú)完整的結(jié)構(gòu)體可以在開始和結(jié)束標(biāo)簽寫上功能名稱(如：…)。

CSS注釋：在css的文件的頭部寫上創(chuàng)建日期、修改內(nèi)容等注釋信息；每段HTML結(jié)構(gòu)樣式寫上區(qū)塊名稱（如：/******toolbarstart******/…/******toolbarend******/）。

JS注釋：在js的頭部寫上創(chuàng)建日期、修改內(nèi)容等注釋信息；在每個(gè)function寫上注釋說明；功能復(fù)雜的functon在內(nèi)部注釋說明。

4.頁面結(jié)構(gòu)布局

合理的結(jié)構(gòu)布局可以提高頁面的加載速度，使瀏覽器兼容性更強(qiáng)，可讀性更好，有利于html元素結(jié)構(gòu)的重用和封裝。

6/任我游門戶前端交互頁面設(shè)計(jì)要求

4.1.使用HTML5標(biāo)準(zhǔn)

HTML5標(biāo)準(zhǔn)是目前web的發(fā)展方向，雖然HTML5中的元素目前并不為所有瀏覽器所支持，但HTML5文檔結(jié)構(gòu)定義各瀏覽器都可以在標(biāo)準(zhǔn)模式下解析頁面，而不需要指定某個(gè)類型的DTD。

4.2.采用DIV布局

頁面統(tǒng)一使用DIV布局結(jié)構(gòu)，謹(jǐn)慎使用表格（盡量不用），最少化iframe數(shù)量。

5.樣式設(shè)計(jì)要求

5.1.避免使用CSSexpressions

表達(dá)式計(jì)算開銷很大，影響web加載性能；暴露了一個(gè)腳本執(zhí)行環(huán)境，CSS表達(dá)式就構(gòu)成了一個(gè)可能的腳本注入攻擊方向；IE8的標(biāo)準(zhǔn)模式不再支持CSS表達(dá)式。

5.2.合并樣式中圖片

為了減少頁面http的請(qǐng)求數(shù)量，加快web頁面請(qǐng)求速度，特別是樣式中使用的圖片比較多，給頁面加載帶來了負(fù)擔(dān)。把樣式中使用的圖片歸類并合并在一起，使用時(shí)用位置點(diǎn)來控制顯示區(qū)域。

5.3.盡量引用外部的CSS

外部引用css文件有可能被瀏覽器緩存起來，不用每次都去服務(wù)器請(qǐng)求。內(nèi)部引用css文件，有可能包含在動(dòng)態(tài)的html文檔結(jié)構(gòu)中，每次都要從服務(wù)請(qǐng)求下載，影響了web加載速度。

5.4.CSS引用放在頂部

css放在頁面要頂部，可以加快頁面渲染速度，改善用戶體驗(yàn)。

7/任我游門戶前端交互頁面設(shè)計(jì)要求

6.JS設(shè)計(jì)要求

6.1.統(tǒng)一使用Jquery框架

Jquery是繼prototype之后又一個(gè)優(yōu)秀的Javascrīpt框架。它是輕量級(jí)的js庫(壓縮后只有21k)，它兼容CSS3，還兼容各種瀏覽器（IE6.0+,FF1.5+,Safari2.0+,Opera9.0+）。jQuery使用戶能更方便地處理HTMLdocuments、events、實(shí)現(xiàn)動(dòng)畫效果，并且方便地為網(wǎng)站提供AJAX交互。jQuery還有一個(gè)比較大的優(yōu)勢(shì)是，它的文檔說明很全，而且各種應(yīng)用也說得很詳細(xì)，同時(shí)還有許多成熟的插件可供選擇。jQuery能夠使用戶的html頁保持代碼和html內(nèi)容分離，也就是說，不用再在html里面插入一堆js來調(diào)用命令了，只需定義id即可。

6.2.JS盡量放在頁面底部

JS會(huì)阻塞頁面加載，由于html文檔是從上而下來渲染頁面，JS放在底部，不會(huì)影響頁面渲染，改善用戶體驗(yàn)。

7.MyGou靜態(tài)文件目錄結(jié)構(gòu)

MyGou靜態(tài)文件目錄結(jié)構(gòu)

為了規(guī)范和管理靜態(tài)文件，頁面中所有的靜態(tài)文件以模塊的方式存放在不同的文件夾中，便于日后的管理和維護(hù)。

文件目錄結(jié)構(gòu)如下：

目錄結(jié)構(gòu)static/mygou/(js|css|image|html|falsh)/commonstatic/mygou/(js|css|image|html|falsh)/account公共文件夾帳號(hào)模塊（用戶注冊(cè)、用戶登錄、忘記密碼等）8/9

說明任我游門戶前端交互頁面設(shè)計(jì)要求

static/mygou/(js|css|image|html|falsh)/user用戶模塊（添加好友，刪除好友，管理好友列表，管理好友分組，添加分組，刪除分組，移動(dòng)分組等）static/mygou/(js|css|image|html|falsh)/equip設(shè)備模塊（添加設(shè)備，刪除設(shè)備，設(shè)備升級(jí)提醒等）static/mygou/(js|css|image|html|falsh)/notice消息模塊（管理消息列表，回復(fù)消息，刪除消息等）static/mygou/(js|css|image|html|falsh)/waypoint航點(diǎn)模塊（添加航點(diǎn)，刪除航點(diǎn)，管理航點(diǎn)列表，航點(diǎn)分組，航點(diǎn)分組管理，管理航點(diǎn)分組列表等）

8.版本控制

每次提交的版本，必須帶有版本號(hào)，對(duì)每次提交的內(nèi)容有較好的版本控制。

9.前端頁面進(jìn)度安排

日期201*-02-06201*-02-08201*-02-27進(jìn)度完成首頁和一張內(nèi)頁設(shè)計(jì)稿網(wǎng)站整體風(fēng)格確認(rèn)說明供評(píng)審使用通過評(píng)審確認(rèn)網(wǎng)站設(shè)計(jì)風(fēng)格整個(gè)網(wǎng)站重構(gòu)頁面完成，可交開發(fā)使用重構(gòu)頁面從登錄注冊(cè)頁面開始，再到各模塊，具體安排與開發(fā)溝通。201*-03-06與開發(fā)一起調(diào)試、BUG修復(fù)完成修復(fù)各瀏覽兼容性問題，js腳本報(bào)錯(cuò)，局部樣式調(diào)整等

9/9

友情提示：本文中關(guān)于《前端頁面設(shè)計(jì)》給出的范例僅供您參考拓展思維使用，前端頁面設(shè)計(jì)：該篇文章建議您自主創(chuàng)作。

來源：網(wǎng)絡(luò)整理 免責(zé)聲明：本文僅限學(xué)習(xí)分享，如產(chǎn)生版權(quán)問題，請(qǐng)聯(lián)系我們及時(shí)刪除。

《前端頁面設(shè)計(jì)》由互聯(lián)網(wǎng)用戶整理提供,轉(zhuǎn)載分享請(qǐng)保留原作者信息,謝謝!
鏈接地址：http://www.seogis.com/gongwen/713204.html

• 上一篇：網(wǎng)頁前端設(shè)計(jì)師崗位職責(zé)
• 下一篇：空乘服務(wù)與管理的課程有哪些