流程網(wǎng)站前臺(tái)頁(yè)面顯示技術(shù),網(wǎng)站設(shè)計(jì)論文

流程網(wǎng)站前臺(tái)頁(yè)面顯示技術(shù),網(wǎng)站設(shè)計(jì)論文【題目】【第一章】【2.1-2.3】【2.4】【第三章】流程網(wǎng)站前臺(tái)頁(yè)面顯示技術(shù)【第四章】【5.1】【5.25.3】【5.4-5.7】【總結(jié)/以下為參考文獻(xiàn)】第3章流程網(wǎng)站前臺(tái)頁(yè)面顯示技術(shù)3.1使用框架構(gòu)建前臺(tái)頁(yè)面。為了能以美觀、簡(jiǎn)潔、方便的界面展如今用戶面前，此流程網(wǎng)站前臺(tái)界面采用Bootstrap框架。使用該框架開發(fā)出來的頁(yè)面會(huì)給人一種全新簡(jiǎn)潔的頁(yè)面。來自Twitter的Bootstrap是當(dāng)前最受歡迎的前端框架之一。基于、CSS、JAVASCRIPT的Bootstrap即簡(jiǎn)潔又靈敏，使得網(wǎng)頁(yè)的開發(fā)愈加迅速。Bootstrap是Twitter的設(shè)計(jì)師JacobThornton與MarkOtto一起合作開發(fā)，它是一個(gè)前臺(tái)頁(yè)面樣式框架。Bootstrap推出后遭到大量的追捧，在國(guó)外Bootstrap是GitHub上的熱門開源項(xiàng)目，包括微軟，美國(guó)宇航局都在使用該框架。它提供了簡(jiǎn)潔的規(guī)范和CSS規(guī)范，且由當(dāng)下流行的動(dòng)態(tài)CSS語(yǔ)言Less編寫而成[26].Bootstrap是基于5和CSS3開發(fā)出來的，它以jQuery為基礎(chǔ)，進(jìn)行了更為人性化和個(gè)性化的完善設(shè)計(jì)，構(gòu)成了一套具有自個(gè)特殊風(fēng)格的網(wǎng)站，且大多數(shù)的jQuery插件都能夠被兼容應(yīng)用。Bootstrap的出現(xiàn)讓前端應(yīng)用開發(fā)更簡(jiǎn)單、更快速。任何程序開發(fā)人員都能夠快速上手熟悉，且能夠適配所有設(shè)備，能夠使用于所有項(xiàng)目。Bootstrap中有著大量的Web小組件，只要你具有一定的編程基礎(chǔ)，通過學(xué)習(xí)它的幾個(gè)教程文檔即可快速把握這些組件基本用法，能夠快速開發(fā)出一個(gè)界面簡(jiǎn)潔、美觀且功能齊全的網(wǎng)站，不會(huì)花費(fèi)你多久的時(shí)間。在Bootstrap里常用的一些組件包括：模態(tài)框、媒體對(duì)象、警告對(duì)話框、導(dǎo)航、按鈕組、手風(fēng)琴控件、面包屑、縮略圖、導(dǎo)航條、輪播控件、分頁(yè)控件、排版、下拉菜單、按鈕下拉菜單、進(jìn)度條等。Bootstrap還包含了不少jQuery插件，像彈出框、標(biāo)簽頁(yè)、形式對(duì)話框、滾動(dòng)條等。這些jQuery插件讓頁(yè)面的動(dòng)畫效果變得愈加華美。但是在開發(fā)經(jīng)過中發(fā)現(xiàn)使用Bootstrap對(duì)頁(yè)面的代碼量有所增加。造成網(wǎng)頁(yè)代碼過長(zhǎng)，分析容易出錯(cuò)等不便缺點(diǎn)。所以使用Bootsrap開發(fā)頁(yè)面一定要保持代碼整潔，不然很容易造成由于疏忽而使某些功能失效。編譯后的文件能夠被快速應(yīng)用于其他web項(xiàng)目，Bootstrap既提供了編譯版的CSS文件和JS文件，即bootstrap.*;同時(shí)也提供了編譯且壓縮后的CSS文件和JS文件，即bootstrap.min.*.并且Bootstrap還提供了大量簡(jiǎn)潔美觀的組件，如按鈕組、按鈕下拉菜單、導(dǎo)航的標(biāo)簽、pill、列表、警告對(duì)話框、進(jìn)度條、模態(tài)對(duì)話框〔Modals〕等。能夠講沒有Bootstrap的幫助，這個(gè)網(wǎng)站很難做到如此簡(jiǎn)潔美觀。由于采用了一套響應(yīng)式和移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)，在屏幕或視口〔viewport〕尺寸增加的經(jīng)過中，系統(tǒng)能夠自動(dòng)分為最多12列。這樣對(duì)不同的顯示設(shè)備，Bootstrap會(huì)自適應(yīng)網(wǎng)頁(yè)界面。流程網(wǎng)站前臺(tái)頁(yè)面采用Bootstrap構(gòu)架不僅由于，它的美觀、簡(jiǎn)潔、方便，設(shè)計(jì)時(shí)主要考慮到它技術(shù)文檔資料豐富，容易查找。3.2使用Jquery快速開發(fā)前臺(tái)頁(yè)面腳本。流程網(wǎng)站前臺(tái)中大量使用jQuery技術(shù)為簡(jiǎn)化Javascript代碼的使用并加快網(wǎng)頁(yè)加載速度。jQuery是輕量級(jí)的Javascript庫(kù)。它是繼prototype之后又一個(gè)優(yōu)秀的產(chǎn)品，jQuery兼容CSS3,還兼容包括IE,火狐，Safari,Opera等知名閱讀器，可惜jQuery2.0及后續(xù)版本將不再支持IE6/7/8閱讀器。jQuery使用戶能更方便地處理網(wǎng)頁(yè)、事件實(shí)現(xiàn)動(dòng)畫效果，且能夠方便地實(shí)現(xiàn)網(wǎng)站的AJAX功能。當(dāng)下，jQuery的講明文件非常完善，文檔中對(duì)于各種應(yīng)用解釋的非常具體，并且它的一大優(yōu)勢(shì)就是提供很多美觀的、完善的插件給用戶使用[27].jQuery還能夠使用戶頁(yè)面保持代碼和網(wǎng)頁(yè)內(nèi)容的分離，換句話講，你能夠再也不用在網(wǎng)頁(yè)代碼里面編寫一堆javascript來調(diào)用函數(shù)，而是只要定義頁(yè)面中元素id即可。jQuery核心思想就是寫得更少，做得更多，并且它是一個(gè)能夠兼容多閱讀器的javascript庫(kù)。jQuery最早于2006年1月在紐約的barcamp發(fā)布。jQuery發(fā)布之后，來自世界各地的諸多JavaScript高手紛紛參加開發(fā)隊(duì)伍中，華而不實(shí)以DaveMethvin團(tuán)隊(duì)為典型代表。jQuery當(dāng)下已經(jīng)發(fā)展成為在業(yè)界最為流行應(yīng)用的javascript庫(kù)，且有研究表示清楚，在互聯(lián)網(wǎng)上排名前一萬(wàn)個(gè)訪問量最多的網(wǎng)站中，應(yīng)用jQuery技術(shù)的網(wǎng)站占大部分。jQuery另一特點(diǎn)是開源免費(fèi)的。其獨(dú)特的語(yǔ)法設(shè)計(jì)能夠讓開發(fā)人員愈加簡(jiǎn)潔和快速地進(jìn)行開發(fā)工作。借助jQuery,開發(fā)人員還能夠操作文檔對(duì)象、選擇DOM元素、制作動(dòng)畫效果、事件處理及使用Ajax等其它功能。與此同時(shí)，jQuery還提供API接口，開發(fā)者借此能夠進(jìn)行插件編寫。借助jQuery模塊化的功能，開發(fā)者能夠輕松地制作功能強(qiáng)大的靜態(tài)或者動(dòng)態(tài)Web頁(yè)面應(yīng)用程序。jQuery,顧名思議，也就是JavaScript和查詢，即是輔助JavaScript開發(fā)的庫(kù)。當(dāng)下jQuery有兩個(gè)版本可供下載，華而不實(shí)已經(jīng)被精簡(jiǎn)和壓縮的Productionversion主要用于實(shí)際的網(wǎng)站運(yùn)用，而未精簡(jiǎn)和壓縮的Developmentversion則主要用于測(cè)試及開發(fā)。這里以jquery-1.8.0.js為例未壓縮前的大小為254KB,壓縮后的jquery-1.8.0.min.js大小是91KB.可見壓縮后大小變化還是非常明顯的，所以一般網(wǎng)站運(yùn)行都采用壓縮后的jquery版本，也能夠在多個(gè)公共服務(wù)器中選擇引用。通常情況下，將jQuery存儲(chǔ)到CDN公共庫(kù)上能夠有效加快網(wǎng)站的載入速度和訪問體驗(yàn)。CDN公共庫(kù)即是將常用的JS庫(kù)存放在CDN節(jié)點(diǎn)上，廣大開發(fā)者能夠方便地直接調(diào)用。相比于將JS庫(kù)存放在服務(wù)器單機(jī)上，設(shè)立CDN公共庫(kù)的形式愈加穩(wěn)定和快速。當(dāng)下，Google、Microsoft等多家國(guó)際性的公司給jQuery提供CDN服務(wù)，我們國(guó)家的新浪云計(jì)算〔SAE〕和百度云〔BAE〕等也提供相關(guān)服務(wù)。本流程網(wǎng)站采用的是的js文件，這樣的好處在于，假如一個(gè)用戶要訪問網(wǎng)站頁(yè)面，服務(wù)器會(huì)把改頁(yè)面的jquery.js文件傳給用戶，一個(gè)jquery.min.js文件大小為92KB.假如幾十個(gè)用戶同時(shí)訪問該頁(yè)面，這樣服務(wù)器要重復(fù)上傳好幾十個(gè)jquery.min.js文件到用戶那里，這樣勢(shì)必造成服務(wù)器短時(shí)間內(nèi)網(wǎng)絡(luò)非常緩慢。而且公司服務(wù)器和網(wǎng)絡(luò)資源非常有限。為解決這問題，采用把下載jquery.min.js文件的網(wǎng)絡(luò)負(fù)擔(dān)，讓給提供下載jquery文件的網(wǎng)站?？紤]到網(wǎng)頁(yè)的兼容性，流程網(wǎng)站前臺(tái)頁(yè)面中使用了不同版本的jQuery,來實(shí)現(xiàn)不同網(wǎng)頁(yè)上的一些功能特效。3.3運(yùn)用AJAX技術(shù)實(shí)現(xiàn)前臺(tái)數(shù)據(jù)的異步更新。AJAX是AsynchronousJavascriptAndXML的簡(jiǎn)稱，即JavaScript和XML.AJAX是一種用于開創(chuàng)建立交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開發(fā)技術(shù)，能夠用于開創(chuàng)建立快速動(dòng)態(tài)網(wǎng)頁(yè)。AJAX借助后臺(tái)和服務(wù)器之間進(jìn)行少量的數(shù)據(jù)交換，能夠使網(wǎng)頁(yè)實(shí)現(xiàn)數(shù)據(jù)的異步更新和同步交互，即能夠不需要重新加載整個(gè)網(wǎng)頁(yè)的情況下，對(duì)網(wǎng)頁(yè)中的某些數(shù)據(jù)和信息進(jìn)行更新。[6]相比于傳統(tǒng)的網(wǎng)頁(yè)設(shè)計(jì)，傳統(tǒng)的網(wǎng)頁(yè)假如需要進(jìn)行更新內(nèi)容，需要重新加載整個(gè)網(wǎng)頁(yè)并刷新頁(yè)面。AJAX并非縮寫詞，是JesseJamesGaiiett創(chuàng)造的名詞。從原則上來講，AJAX不能算得上是一種全新的編程語(yǔ)言，從其本質(zhì)上來講是多種編程技術(shù)結(jié)合的產(chǎn)物。AJAX是一種能夠用于開創(chuàng)建立更快、更好、交互性更強(qiáng)的Web應(yīng)用程序的的編程技術(shù)。AJAX通過在客戶端的閱讀器進(jìn)而網(wǎng)站服務(wù)器之間進(jìn)行異步數(shù)據(jù)傳輸請(qǐng)求，使得前臺(tái)網(wǎng)頁(yè)能夠從后臺(tái)服務(wù)器請(qǐng)求更新少量的信息，而不用更新整個(gè)頁(yè)面信息。首先前臺(tái)使用Javascript向服務(wù)器提出請(qǐng)求，并處理用戶操作數(shù)據(jù)，不影響用戶體驗(yàn)。借助核心對(duì)象XMLHTTPRequest,前臺(tái)的JavaScript能夠在不重新加載整個(gè)網(wǎng)頁(yè)的同時(shí)完成和后臺(tái)服務(wù)器的數(shù)據(jù)交換。通過這一經(jīng)過，可使復(fù)雜的網(wǎng)絡(luò)應(yīng)用程序變成一個(gè)個(gè)簡(jiǎn)單，方便的小程序來處理[28].AJAX是一種獨(dú)立于Web服務(wù)器的Web應(yīng)用程序開發(fā)技術(shù)，其基于Web標(biāo)準(zhǔn)主要包括JavaScript、XML、、CSS等，當(dāng)下主流的閱讀器也全部支持相關(guān)標(biāo)準(zhǔn)。AJAX具有應(yīng)用程序獨(dú)立于閱讀器和平臺(tái)的特點(diǎn)。能夠講假如沒有AJAX這項(xiàng)技術(shù)，就沒有今天那么多華美使用的動(dòng)態(tài)網(wǎng)頁(yè)。在網(wǎng)站前臺(tái)頁(yè)面中大部分使用的是Jquery的jQuery.post函數(shù)來實(shí)現(xiàn)AJAX技術(shù)的。下面對(duì)該方式方法的參數(shù)及使用做些簡(jiǎn)單介紹：例：jQuery.post〔url,data,success〔data,textStatus,jqXHR〕，datatype〕url:必需項(xiàng)，指定將請(qǐng)求發(fā)送到詳細(xì)URL,這里我們要根據(jù)ZendFramework規(guī)則。Data:可選項(xiàng)，用于進(jìn)行規(guī)定連同請(qǐng)求一起發(fā)送到服務(wù)器的數(shù)據(jù)、映射或字符串值。Success〔data,textStatus,jqXHR〕：可選項(xiàng)，用于在請(qǐng)求成功之后需要執(zhí)行的回調(diào)函數(shù)。dataType:可選項(xiàng)，設(shè)定預(yù)期服務(wù)器所響應(yīng)的數(shù)據(jù)類型，默認(rèn)情況下執(zhí)行智能判定〔xml、json、script或〕，系統(tǒng)中大量采用json數(shù)據(jù)類型。在流程網(wǎng)站中應(yīng)用范圍包括：動(dòng)態(tài)模糊查詢底層