數(shù)字媒體技術(shù)系網(wǎng)站前端設(shè)計(jì)與開發(fā)畢業(yè)論文-畢業(yè)設(shè)計(jì)

1、本科畢業(yè)設(shè)計(jì)論文題 目: 數(shù)字媒體技術(shù)系網(wǎng)站前端設(shè)計(jì)與開發(fā) 學(xué) 院： 專業(yè)班級(jí)： 姓 名： 學(xué) 號(hào)：指導(dǎo)教師： 系 主 任： 學(xué)院院長(zhǎng)： 二O一三年月日畢業(yè)設(shè)計(jì) (論文)誠(chéng)信聲明我謹(jǐn)在此保證：本人所寫的畢業(yè)設(shè)計(jì)(論文)，凡引用他人的研究成果均已在參考文獻(xiàn)或注釋中列出。設(shè)計(jì)(論文)主體均由本人獨(dú)立完成，沒有抄襲、剽竊他人已經(jīng)發(fā)表或未發(fā)表的研究成果行為。如出現(xiàn)以上違反知識(shí)產(chǎn)權(quán)的情況，本人愿意承當(dāng)相應(yīng)的責(zé)任。聲明人(簽名)：年 月 日摘 要 21世紀(jì)是信息高速興旺的時(shí)代，網(wǎng)絡(luò)作為當(dāng)今最流行最方便快捷的媒介也越來(lái)越被人們接受，并且融入我們的生活。隨著高校信息化建設(shè)的不斷推進(jìn)，網(wǎng)站的作用超越了傳統(tǒng)的信息

2、獲取，交流它更能表達(dá)組織機(jī)構(gòu)的風(fēng)采，性質(zhì)。所以高校院系建立本院系美觀，專業(yè)，易于維護(hù)管理的網(wǎng)站已經(jīng)勢(shì)在必行。本論文主要圍繞數(shù)字媒體技術(shù)專業(yè)的門戶網(wǎng)站為開發(fā)主題，最根本也是最必須的三個(gè)技能。前端的開發(fā)中，在頁(yè)面的布局時(shí)， HTML將元素進(jìn)行定義，CSS對(duì)展示的元素進(jìn)行定位，再通過JavaScript實(shí)現(xiàn)相應(yīng)的效果和交互。雖然外表看起來(lái)這些很簡(jiǎn)單，但這里面需要掌握的東西絕對(duì)不會(huì)少。在進(jìn)行開發(fā)前，需要對(duì)這些概念弄清楚，弄明白，這樣在開發(fā)的過程中才會(huì)得心應(yīng)手。分析并解決實(shí)現(xiàn)中的假設(shè)干技術(shù)問題；介紹了個(gè)性化頁(yè)面的背景及jsp + javascript + mysql系統(tǒng)的一般原理；闡述整個(gè)個(gè)性化頁(yè)面生成

3、系統(tǒng)的系統(tǒng)結(jié)構(gòu)及工作原理；分析了系統(tǒng)實(shí)現(xiàn)中的特殊性，難點(diǎn)和重點(diǎn)；設(shè)計(jì)實(shí)現(xiàn)用戶注冊(cè)，用戶登錄，用戶管理等jsp頁(yè)面。分析并解決實(shí)現(xiàn)中的假設(shè)干技術(shù)問題；建立完整的校園網(wǎng)站，進(jìn)行測(cè)試并分析結(jié)果。該網(wǎng)站有效地實(shí)現(xiàn)用戶通過JSP頁(yè)面訪問來(lái)進(jìn)行用戶注冊(cè)，登陸，并對(duì)網(wǎng)站內(nèi)容進(jìn)行有效的管理，提升了后期添加和刪除信息的有效性，具有一定的應(yīng)用價(jià)值關(guān)鍵字：JSP；用戶登錄；javascript；網(wǎng)站美化；交互設(shè)計(jì)。ABSTRACTThe twenty-first Century is the rapid development of information age, network as the worlds mo

4、st popular and most convenient media are increasingly accepted by people. Along with the information development, website functions beyond the traditional information acquisition, communication which can better reflect the organization style， properties. So universities establish the departments, pr

5、ofessional appearance, easy maintenance and management of the site has been imperative.This thesis mainly focuses on digital media technology major portal for the development of the theme, the three most basic and necessary skills. Development of the front, in the layout of the page, HTML will defin

6、e the elements, positioning CSS to display elements, and then through the JavaScript to achieve the corresponding effect and interaction. Although the surface looks like these are very simple, but it needs to grasp things never. In the development, the need for these concepts clear, understand, so i

7、n the development process will be handy.The main work done in this article is as follows:(1) Introduces the background and general principle of JSP + Javascript + MySQL system personalized pages;(2) Introduces the structure and working principle of the entire personalization page production system;

8、analysis of the particularity, the difficulty and key system;(3) The design and implementation of user registration, user login, user management and other JSP page.(4) Analyze and solve some technical problems in implementation;(5) The establishment of a complete campus site, testing and analysis;Th

9、e site effectively achieve the user through the JSP page access to user registration, login, and carry on effective management to the website content, enhance the effectiveness of the late addition and deletion of information, has a certain application value.Keywords：JSP ; User login; JavaScript; We

10、bsite Landscaping; Interaction Design目 錄 TOC o 1-3 h z u HYPERLINK l _Toc356337274 摘 要 HYPERLINK l _Toc356337275 ABSTRACT HYPERLINK l _Toc356337276 第1章緒論 PAGEREF _Toc356337276 h 1 HYPERLINK l _Toc356337277 選題背景及意義 PAGEREF _Toc356337277 h 1 HYPERLINK l _Toc356337278 國(guó)內(nèi)外高校網(wǎng)站建設(shè)狀況 PAGEREF _Toc356337278

11、h 3 HYPERLINK l _Toc356337279 研究?jī)?nèi)容和擬解決的問題 PAGEREF _Toc356337279 h 5 HYPERLINK l _Toc356337280 本章小結(jié) PAGEREF _Toc356337280 h 6 HYPERLINK l _Toc356337281 第2章前端開發(fā)工具及相關(guān)技術(shù) PAGEREF _Toc356337281 h 7 HYPERLINK l _Toc356337282 前端開發(fā)環(huán)境 PAGEREF _Toc356337282 h 7 HYPERLINK l _Toc356337283 前端開發(fā)工具 PAGEREF _Toc3563

12、37283 h 7 HYPERLINK l _Toc356337284 前端開發(fā)相關(guān)技術(shù) PAGEREF _Toc356337284 h 8 HYPERLINK l _Toc356337285 2.3.1 Java script 簡(jiǎn)介 PAGEREF _Toc356337285 h 8 HYPERLINK l _Toc356337286 2.3.2 Java script 根本特點(diǎn) PAGEREF _Toc356337286 h 8 HYPERLINK l _Toc356337287 2.3.3 CSS 簡(jiǎn)介 PAGEREF _Toc356337287 h 9 HYPERLINK l _Toc

13、356337288 2.3.4 JQuery PAGEREF _Toc356337288 h 9 HYPERLINK l _Toc356337289 本章小結(jié) PAGEREF _Toc356337289 h 11 HYPERLINK l _Toc356337290 第3章前端布局分析與設(shè)計(jì) PAGEREF _Toc356337290 h 12 HYPERLINK l _Toc356337291 前端總體開發(fā)流程及設(shè)計(jì) PAGEREF _Toc356337291 h 12 HYPERLINK l _Toc356337292 分層開發(fā) PAGEREF _Toc356337292 h 12 HYPE

14、RLINK l _Toc356337293 代碼編寫 PAGEREF _Toc356337293 h 12 HYPERLINK l _Toc356337294 內(nèi)部測(cè)試與后續(xù)優(yōu)化 PAGEREF _Toc356337294 h 13 HYPERLINK l _Toc356337295 前端UI設(shè)計(jì) PAGEREF _Toc356337295 h 14 HYPERLINK l _Toc356337296 模塊分布 PAGEREF _Toc356337296 h 14 HYPERLINK l _Toc356337297 顏色配置 PAGEREF _Toc356337297 h 15 HYPERLI

15、NK l _Toc356337298 3.2.3 CSS元素 PAGEREF _Toc356337298 h 16 HYPERLINK l _Toc356337299 交互設(shè)計(jì)與UI PAGEREF _Toc356337299 h 18 HYPERLINK l _Toc356337300 點(diǎn)，線，面的運(yùn)用 PAGEREF _Toc356337300 h 18 HYPERLINK l _Toc356337301 點(diǎn)的運(yùn)用 PAGEREF _Toc356337301 h 19 HYPERLINK l _Toc356337302 線的運(yùn)用 PAGEREF _Toc356337302 h 19 HYP

16、ERLINK l _Toc356337303 網(wǎng)站結(jié)構(gòu)布局及設(shè)計(jì) PAGEREF _Toc356337303 h 20 HYPERLINK l _Toc356337304 網(wǎng)站首頁(yè)結(jié)構(gòu) PAGEREF _Toc356337304 h 20 HYPERLINK l _Toc356337305 主題鮮明，富有特色 PAGEREF _Toc356337305 h 21 HYPERLINK l _Toc356337306 版式編排布局合理性 PAGEREF _Toc356337306 h 21 HYPERLINK l _Toc356337307 網(wǎng)站前臺(tái)頁(yè)面設(shè)計(jì) PAGEREF _Toc3563373

17、07 h 23 HYPERLINK l _Toc356337308 首頁(yè) PAGEREF _Toc356337308 h 23 HYPERLINK l _Toc356337309 系內(nèi)概況 PAGEREF _Toc356337309 h 23 HYPERLINK l _Toc356337310 系內(nèi)新聞 PAGEREF _Toc356337310 h 24 HYPERLINK l _Toc356337311 本章小結(jié) PAGEREF _Toc356337311 h 24 HYPERLINK l _Toc356337312 第4章主要功能的實(shí)現(xiàn) PAGEREF _Toc356337312 h 2

18、5 HYPERLINK l _Toc356337313 界面設(shè)計(jì) PAGEREF _Toc356337313 h 25 HYPERLINK l _Toc356337314 具體設(shè)計(jì)文檔 PAGEREF _Toc356337314 h 25 HYPERLINK l _Toc356337315 前臺(tái)新聞文摘顯示 PAGEREF _Toc356337315 h 25 HYPERLINK l _Toc356337316 網(wǎng)站裝飾風(fēng)格 PAGEREF _Toc356337316 h 26 HYPERLINK l _Toc356337317 網(wǎng)站的鏈接結(jié)構(gòu) PAGEREF _Toc356337317 h

19、26 HYPERLINK l _Toc356337318 可視化設(shè)計(jì) PAGEREF _Toc356337318 h 26 HYPERLINK l _Toc356337319 具體實(shí)現(xiàn)技術(shù) PAGEREF _Toc356337319 h 26 HYPERLINK l _Toc356337320 CSS在數(shù)字媒體技術(shù)系網(wǎng)站中的應(yīng)用實(shí)例 PAGEREF _Toc356337320 h 26 HYPERLINK l _Toc356337321 應(yīng)用JavaScript設(shè)計(jì)網(wǎng)頁(yè) PAGEREF _Toc356337321 h 27 HYPERLINK l _Toc356337322 本章小結(jié) PAGE

20、REF _Toc356337322 h 29 HYPERLINK l _Toc356337323 第5章 總結(jié) PAGEREF _Toc356337323 h 30 HYPERLINK l _Toc356337326 參考文獻(xiàn) PAGEREF _Toc356337326 h 31 HYPERLINK l _Toc356337326 致謝32 緒論選題背景及意義如今的互聯(lián)網(wǎng)已經(jīng)滲透到我們生活的每一個(gè)層面，網(wǎng)站的內(nèi)容越來(lái)越豐富全面，以此來(lái)滿足了各種不同需求的瀏覽者。網(wǎng)站的作用眾所周知人們通過網(wǎng)站快速獲取，發(fā)布和傳遞信息。 目前很多高校建立起了自己的網(wǎng)站這些網(wǎng)站的建立使得學(xué)校可以突破傳統(tǒng)的媒體的限制

21、在網(wǎng)絡(luò)上開辟的屬于自己的新天地。網(wǎng)絡(luò)具有超時(shí)空性。網(wǎng)絡(luò)超時(shí)空性是一種“一人對(duì)一人，一人對(duì)多人，多人對(duì)一人，多人對(duì)多人的傳播方式1 李燕.25(2): 911。超時(shí)空性的形成正式由于在網(wǎng)絡(luò)在時(shí)間層面，空間層面上的開放性帶來(lái)的。網(wǎng)絡(luò)的超時(shí)空性使得高校網(wǎng)站對(duì)學(xué)校本身和外界社會(huì)表現(xiàn)特定的功能，表現(xiàn)在網(wǎng)站有助于改變教育資源的分散性和分布不均衡性，有效的將教育資源進(jìn)行整合，從而使得教育資源使用意義上的無(wú)限增長(zhǎng)。網(wǎng)絡(luò)具有的海量存儲(chǔ)特性，網(wǎng)絡(luò)能形成一個(gè)巨大無(wú)比的數(shù)據(jù)庫(kù)，世界上任何時(shí)間任何地點(diǎn)的任何一件事都能成為網(wǎng)絡(luò)的信息被廣泛傳播。高校網(wǎng)站的海量存儲(chǔ)特性可以從橫向和縱向兩方面分析：橫向看高校網(wǎng)站往往設(shè)置多個(gè)板

22、塊，分別放置相關(guān)內(nèi)容。不同板塊的信息相互獨(dú)立，共同構(gòu)成網(wǎng)站的內(nèi)容。 縱向看，同一個(gè)板塊的內(nèi)部，內(nèi)容并不是固定不變的，而是不斷添加連續(xù)更新的。大量的信息使得高校網(wǎng)站成為一個(gè)巨大的數(shù)據(jù)庫(kù)。交互性表達(dá)在高校網(wǎng)站通過設(shè)置留言板，論壇，發(fā)揮網(wǎng)絡(luò)交互的功能，在老師和學(xué)生之間建立起了交流渠道。高校網(wǎng)站正是以這些特點(diǎn)為根底，發(fā)揮了自己本身的資源整合，信息傳播，多方交流互動(dòng)等方面的獨(dú)特功能，成為一座溝通橋梁。很多高校網(wǎng)站內(nèi)容多姿多彩，板塊，內(nèi)容爭(zhēng)妍斗艷。但不外乎以一下幾局部：學(xué)校介紹，新聞發(fā)布，招生信息，就業(yè)信息，師資力量，科研成果，機(jī)構(gòu)設(shè)置，教學(xué)素材等。高校網(wǎng)站的建立和維護(hù)需要大量的物力和人力，為何要投入去建

23、網(wǎng)站上？是因?yàn)槿缟纤龅母咝＞W(wǎng)站有的獨(dú)特特性使得建設(shè)高校網(wǎng)站勢(shì)在必行。這些都促進(jìn)了各個(gè)機(jī)構(gòu)組織的信息化建設(shè)，隨著高校信息化建設(shè)的不斷推進(jìn)，網(wǎng)站的作用超越了傳統(tǒng)的信息獲取，交流它更能表達(dá)組織機(jī)構(gòu)的風(fēng)采，性質(zhì)。所以高校院系建立本院系美觀，專業(yè)，易于維護(hù)管理的網(wǎng)站。我們要?jiǎng)?chuàng)立我們本專業(yè)的網(wǎng)站數(shù)字媒體技術(shù)系的專業(yè)網(wǎng)站，網(wǎng)站前端設(shè)計(jì)最根本的三個(gè)技能：HTML，CSS，JavaScript，PS 矢量圖像編輯技術(shù)。這個(gè)是前端開發(fā)中最根本也是最 必須的三個(gè)技能。前端的開發(fā)中，在頁(yè)面的布局時(shí)， HTML將元素進(jìn)行定義，CSS對(duì)展示的元素進(jìn)行定位，再通過JavaScript實(shí)現(xiàn)相應(yīng)的效果和交互。雖然外表看起來(lái)這

24、些很簡(jiǎn)單，但這里面需要掌握的東西絕對(duì)不會(huì)少。在進(jìn)行開發(fā)前，需要對(duì)這些概念弄清楚，弄明白，這樣在開發(fā)的過程中才會(huì)得心應(yīng)手。建立本系網(wǎng)站發(fā)揮的作用如下：(1) 數(shù)字媒體技術(shù)系網(wǎng)站是數(shù)字媒體專業(yè)的“商標(biāo)。在這個(gè)高度信息化的社會(huì)里，建立數(shù)字媒體技術(shù)系自己的網(wǎng)站是最直接的宣傳手端。網(wǎng)站的超時(shí)空特性，不僅能讓本地區(qū)的人們了解學(xué)院，更可讓世界了解本專業(yè)。(2) 數(shù)字媒體技術(shù)系網(wǎng)站巨大的教育資源，網(wǎng)站是實(shí)現(xiàn)教育資源分配的橋梁，它使每一位教師和學(xué)生都能均等的得到培訓(xùn)和受教育的時(shí)機(jī)，能極大的提高教學(xué)效率。 (3) 數(shù)字媒體技術(shù)系網(wǎng)站能提供教學(xué)互動(dòng)的全新方式，網(wǎng)站使得教師與教師，教師與學(xué)生，學(xué)生與學(xué)生之間的交流有了

25、全新的方式，它不再受到傳統(tǒng)課堂的制約。它可以使不同的學(xué)院同處一室，共同討論，共同提高。地理上的界限在這里模糊和消失了，數(shù)字媒體技術(shù)系網(wǎng)站是真正沒有圍墻的系網(wǎng)站。(4) 數(shù)字媒體技術(shù)系網(wǎng)站能夠提供個(gè)性化的學(xué)習(xí)平臺(tái)，不同的學(xué)生理解世界的方式各不相同，認(rèn)知世界有諸多方式。網(wǎng)絡(luò)提供的豐富資源可以使學(xué)生尋覓不同的教育方式，各取所需。數(shù)字媒體技術(shù)系網(wǎng)站允許不同的學(xué)生沿著自己的途徑，按自己的速度接受教育與學(xué)習(xí)，學(xué)生將有時(shí)機(jī)享受最正確的教育時(shí)機(jī)，充分開掘自己的內(nèi)在潛力，培植獨(dú)特的個(gè)性和人格。 (5) 數(shù)字媒體技術(shù)系網(wǎng)站是最正確的教學(xué)研究室，數(shù)字媒體技術(shù)系網(wǎng)站與教育類專門網(wǎng)站的有效鏈接，給本系教學(xué)研究帶來(lái)了一片

26、新天地，各種優(yōu)秀教案，專家論壇，網(wǎng)絡(luò)觀摩課，各科素材，多媒體課件制作等內(nèi)容為教師教研提供了極佳的平臺(tái)。有效地降低教研本錢，提高效率。國(guó)內(nèi)外高校網(wǎng)站建設(shè)狀況國(guó)外的專題院校網(wǎng)站的學(xué)習(xí)資源比擬豐富，交互性和學(xué)習(xí)支持效勞做得都比擬好，但是活動(dòng)組織形式比擬單一。英國(guó)的學(xué)習(xí)網(wǎng)站建設(shè)得比擬完備，無(wú)論從資源建設(shè)方面，還是從學(xué)習(xí)支持效勞等方面都做得較好，商業(yè)性比擬強(qiáng)。加拿大學(xué)習(xí)網(wǎng)站的網(wǎng)絡(luò)學(xué)習(xí)導(dǎo)航做得比擬形象，趣味性較強(qiáng)，分類明確，專題資源集中。高校門戶網(wǎng)站的訪問量，一定程度上反映了各高校的信息化程度和水平。關(guān)于高校門戶網(wǎng)站訪問排名，有不少網(wǎng)站提供相關(guān)的效勞。總體來(lái)說，國(guó)內(nèi)的各排名口碑評(píng)價(jià)不一，而“訪問流量監(jiān)控類

27、的排名也會(huì)受到諸多因素干擾，不容易作為客觀評(píng)價(jià)網(wǎng)站的依據(jù)。具體如下表1-1所示13 Jonathan Anderson, John McRee, Robb Wilson .The EffectiveUI TeamJ . Effective UI OReilly Media, Inc. 2021：表1 SEQ 表 * ARABIC s 1 1中國(guó)高校網(wǎng)站綜合排名表排 名中文名稱世界排名 網(wǎng)站信息量世界排名信息影響力世界排名 數(shù)字資料檔案數(shù)量世界排名學(xué)術(shù)文章發(fā)表情況世界排名1清華大學(xué)77439104162552上海交通大學(xué)101412822381263北京大學(xué)122385105591764浙大18

28、2202287649925復(fù)旦大學(xué)2568682346081876山東大學(xué)2642533286563127哈工大29270610217972398武漢大學(xué)35027220319153359中科大35787358160518410吉林大學(xué)363455706437309國(guó)外的高校網(wǎng)站局部國(guó)際知名大學(xué)如哈佛大學(xué) :/排名第一，PRESENCE 網(wǎng)站信息量世界排名第6，IMPACT 網(wǎng)站信息影響力世界排名第1，OPENNESS 數(shù)字資料檔案數(shù)量世界排名第34，EXCELLENCE 學(xué)術(shù)文章發(fā)表情況世界排名第1；./排名第2，PRESENCE 網(wǎng)站信息量世界排名第8，IMPACT 網(wǎng)站信息影響力世界排名

29、第1，OPENNESS 數(shù)字資料檔案數(shù)量世界排名第14，EXCELLENCE 學(xué)術(shù)文章發(fā)表情況世界排名第10；./排名第16，PRESENCE 網(wǎng)站信息量世界排名第27，IMPACT 網(wǎng)站信息影響力世界排名第16，OPENNESS 數(shù)字資料檔案數(shù)量世界排名第246，EXCELLENCE 學(xué)術(shù)文章發(fā)表情況世界排名第22；.cam.ac.uk/排名第20，PRESENCE 網(wǎng)站信息量世界排名第43，IMPACT 網(wǎng)站信息影響力世界排名第35，OPENNESS 數(shù)字資料檔案數(shù)量世界排名第94，EXCELLENCE 學(xué)術(shù)文章發(fā)表情況世界排名第12；.ox.ac.uk/排名第25，PRESENCE 網(wǎng)站

30、信息量世界排名第109，IMPACT 網(wǎng)站信息影響力世界排名第37，OPENNESS 數(shù)字資料檔案數(shù)量世界排名第64，EXCELLENCE 學(xué)術(shù)文章發(fā)表情況世界排名第13；.u-tokyo.ac.jp/排名第42，PRESENCE 網(wǎng)站信息量世界排名第96，IMPACT 網(wǎng)站信息影響力世界排名第103，OPENNESS 數(shù)字資料檔案數(shù)量世界排名第52，EXCELLENCE 學(xué)術(shù)文章發(fā)表情況世界排名第20；從網(wǎng)站建設(shè)情況來(lái)看，國(guó)內(nèi)關(guān)于校園網(wǎng)站建設(shè)較多，雖然起步較國(guó)外晚，但是開展的速度很快， 我國(guó)高校網(wǎng)站的建設(shè)還有很多不盡如人意的地方，其主要在于網(wǎng)站互動(dòng)性的缺失，內(nèi)容方面沒有國(guó)外院校網(wǎng)站那么多，是

31、因?yàn)閲?guó)內(nèi)采取的形式較國(guó)外的不同。在創(chuàng)新方面比擬欠缺，交互性的形式少。問題主要表達(dá)在這幾個(gè)方面：(1) 缺乏組織協(xié)調(diào)，各部門各自為政。由于網(wǎng)絡(luò)內(nèi)容建設(shè)工作幾乎全部下放到各部門，長(zhǎng)期以來(lái)根本上一直處于一種各自為政的狀態(tài)。各部門的網(wǎng)頁(yè)風(fēng)格迥異，都有各自不同的做法，不能做到統(tǒng)一。這樣做出來(lái)的網(wǎng)頁(yè)形形色色，拼湊成一個(gè)個(gè)學(xué)院，處室網(wǎng)站，顯得很不協(xié)調(diào)。有必要加強(qiáng)組織協(xié)調(diào)工作，詳細(xì)規(guī)劃，明確分工，制定出相應(yīng)的標(biāo)準(zhǔn)，徹底摒棄網(wǎng)站建設(shè)中的隨意性。 (2) 內(nèi)容薄弱，更新滯后。內(nèi)容薄弱可以說是很大的硬傷。各部門名義上都有了自己的網(wǎng)站，但大多數(shù)部門網(wǎng)站能夠提供瀏覽的內(nèi)容非常有限，特別是深層次的內(nèi)容嚴(yán)重缺乏。另外，網(wǎng)上

32、內(nèi)容嚴(yán)重滯后，更新速度慢。有些部門的網(wǎng)站，時(shí)隔一年半載，其網(wǎng)頁(yè)界面和內(nèi)容仍是老樣子。 (3) 重點(diǎn)失衡:重行政管理，輕教學(xué)科研。校園網(wǎng)最主要的功能應(yīng)該是要為教學(xué)，科研效勞。但有些校園網(wǎng)上的內(nèi)容有關(guān)行政管理的偏多，而有關(guān)教學(xué)和科研的內(nèi)容那么相對(duì)較少。作為一個(gè)高校網(wǎng)站，這不能不說是重點(diǎn)失衡，本末倒置。 (4) 整個(gè)網(wǎng)站結(jié)構(gòu)，層次不夠清晰，使用不便。目前某些校園網(wǎng)首頁(yè)的欄目設(shè)計(jì)太過粗略，有些內(nèi)容欠缺，局部欄目名稱及內(nèi)容歸類不夠準(zhǔn)確，整個(gè)結(jié)構(gòu)顯得有些混亂，結(jié)構(gòu)層次偏深，用戶需經(jīng)過屢次點(diǎn)擊才能看到想要的內(nèi)容。 (5) 局部網(wǎng)頁(yè)制作粗糙，缺乏美感。高校網(wǎng)站，其頁(yè)面應(yīng)簡(jiǎn)潔明了，一方面不要過于呆板，另一方面也

33、要防止過于花哨，做到實(shí)用與美觀的有機(jī)結(jié)合。(6) 缺乏檢索途徑。傳播學(xué)領(lǐng)域“互動(dòng)性研究的理論，為檢視當(dāng)前我國(guó)高校網(wǎng)站之開展提供了一個(gè)可操作化的設(shè)計(jì)架構(gòu)?！盎?dòng)性的內(nèi)涵做進(jìn)一步分析，對(duì)我國(guó)高校網(wǎng)站的建設(shè)做一淺探，以增強(qiáng)人們關(guān)于互聯(lián)網(wǎng)傳播機(jī)制的認(rèn)知和理解，并推進(jìn)我國(guó)高校網(wǎng)站的在“交互性方面的建設(shè)。研究?jī)?nèi)容和擬解決的問題有多種方法會(huì)讓一個(gè)網(wǎng)站的外觀令人驚嘆的。在創(chuàng)立時(shí)也有不同的設(shè)計(jì)趨勢(shì)。由于網(wǎng)站是由他們的業(yè)務(wù)與其他很多人用來(lái)獲取信息的途徑，所以很重要的設(shè)計(jì)是很有吸引力的。長(zhǎng)期面對(duì)一個(gè)設(shè)計(jì)不當(dāng)?shù)木W(wǎng)站是一件比擬痛苦的事情。一旦我們擁有了一個(gè)網(wǎng)站之后，我們會(huì)一定會(huì)看到它擁有專業(yè)的設(shè)計(jì)，它可以實(shí)現(xiàn)我們的目的

34、。(1) 排版創(chuàng)造性使用排版已被廣泛的應(yīng)用于網(wǎng)頁(yè)設(shè)計(jì)排版中。這些好的設(shè)計(jì)不只是使用的標(biāo)準(zhǔn)字體，而加上其使用自定義的字體。它使網(wǎng)站更具有可讀性和吸引力。創(chuàng)造性地使用這種類型的方式確實(shí)可以有效的使用戶可以立即得到該網(wǎng)站的新消息，特別是使用的字體是獨(dú)一無(wú)二的，顏色是比擬突出的。(2) 圖片的切換效果研究大圖的使用也是一種趨勢(shì)。這些圖像是網(wǎng)站增加吸引力的網(wǎng)。雖然，已被使用過，但是現(xiàn)今它仍然在使用，使用它更具有現(xiàn)代感。使用這種設(shè)計(jì)的，設(shè)計(jì)出的網(wǎng)站也是比擬搶眼的，特別是如果你有一個(gè)好的圖片選擇，不只是圖像的形式，它應(yīng)該與其網(wǎng)站更好的搭配。(3) 單頁(yè)布局的設(shè)計(jì)可防止不必要的網(wǎng)頁(yè)，通過一個(gè)比擬單一的頁(yè)面布局

35、，這是更有效的一個(gè)網(wǎng)站，因?yàn)闉g覽者可以更專注于其內(nèi)容。(4) 交互性做一個(gè)完整的網(wǎng)站有幾樣任務(wù)要完成比方復(fù)雜的交互功能，網(wǎng)頁(yè)動(dòng)畫特效，網(wǎng)頁(yè)UI設(shè)計(jì)，后期維護(hù)，可擴(kuò)展性等。網(wǎng)站交互設(shè)計(jì)的用戶的目的是增加網(wǎng)站的友好度，可用性和易用性，從而使用戶能夠簡(jiǎn)單，快速和有效地完成網(wǎng)站賦予或用戶自身需要的效勞，功能和目標(biāo)。交互設(shè)計(jì)包含的內(nèi)容：界面設(shè)計(jì)，界面不僅設(shè)計(jì)美術(shù)方面，還涉及提供應(yīng)用戶某些事的能力。導(dǎo)航設(shè)計(jì)，導(dǎo)航設(shè)計(jì)是提供應(yīng)用戶去某個(gè)地方的能力，是用戶能看到的網(wǎng)站結(jié)構(gòu)。信息設(shè)計(jì)，信息設(shè)計(jì)就是通過網(wǎng)站傳達(dá)給用戶某些信息，用戶可通過這些信息了解自己正在進(jìn)行的某些事和應(yīng)該如何進(jìn)行某些事。本章小結(jié)本章闡述了開發(fā)數(shù)

36、字媒體技術(shù)系網(wǎng)站的研究背景和意義。介紹了國(guó)外高校網(wǎng)站的開展現(xiàn)狀比照了目前國(guó)內(nèi)高校網(wǎng)站的現(xiàn)況了說明了建設(shè)數(shù)字媒體技術(shù)系網(wǎng)站建設(shè)的總體規(guī)劃思想。最后對(duì)于本文課題的研究?jī)?nèi)容和擬定解決的幾個(gè)關(guān)鍵問題進(jìn)行了探討。 前端開發(fā)工具及相關(guān)技術(shù) 前端開發(fā)環(huán)境網(wǎng)站前端開發(fā)，即網(wǎng)頁(yè)架構(gòu)設(shè)計(jì)。主要是由與交互設(shè)計(jì)，視覺設(shè)計(jì)的配合，根據(jù)效果圖來(lái)規(guī)劃頁(yè)面布局，合理部署頁(yè)面代碼層次，挖掘用戶體驗(yàn)效果。用Dreamweare，CSS，JS等布局網(wǎng)頁(yè)內(nèi)容，制作靜態(tài)頁(yè)面，這些頁(yè)面要兼容各主流瀏覽器，并配合程序完成靜態(tài)頁(yè)面與后臺(tái)程序的整合工作。另外，要對(duì)網(wǎng)站做一些相應(yīng)的更新，維護(hù)及優(yōu)化。整個(gè)網(wǎng)站開發(fā)的流程在后面有具體介紹。前端開發(fā)在

37、整個(gè)過程中占據(jù)著不可替代的地位，其它幾個(gè)環(huán)節(jié)主要給予相關(guān)的配合3 李寶敏. 動(dòng)態(tài)網(wǎng)站設(shè)計(jì)與開發(fā)應(yīng)用教程M . 清華大學(xué)出版社. ,28(4): 9194。 前端開發(fā)工具(1) MyEclipse簡(jiǎn)介MyEclipse企業(yè)級(jí)工作平臺(tái)MyEclipse Enterprise Workbench ，簡(jiǎn)稱MyEclipse是對(duì)EclipseIDE的擴(kuò)展，利用它我們可以在數(shù)據(jù)庫(kù)和JavaEE的開發(fā)，發(fā)布以及應(yīng)用程序效勞器的整合方面極大的提高工作效率。它是功能豐富的JavaEE集成開發(fā)環(huán)境，包括了完備的編碼，調(diào)試，測(cè)試和發(fā)布功能，完整支持HTML，Struts，JSP，CSS，JavaScript，Spr

38、ing，SQL，Hibernate。MyEclipse4 孫更新, HYPERLINK :/book.zjutil.5read /search?channel=search&sw=%B1%F6%EA%C9&Field=2 t _blank 賓晟, 宮生文. Java程序開發(fā)大全M 基于MyEclipse平臺(tái)主流框架開發(fā). 中國(guó)鐵道出版社 結(jié)構(gòu)上的這種模塊化，可以讓我們?cè)诓挥绊懫渌K的情況下，對(duì)任一模塊進(jìn)行單獨(dú)的擴(kuò)展和升級(jí)。簡(jiǎn)單而言，MyEclipse是Eclipse的插件，也是一款功能強(qiáng)大的JavaEE集成開發(fā)環(huán)境，支持代碼編寫，配置，測(cè)試以及除錯(cuò)，MyEclipse6。0以前版本需先安裝E

39、clipse。MyEclipse6。0以后版本安裝時(shí)不需安裝Eclipse。(2) DreamweareDreamweare是美國(guó)MACROMEDIA公司開發(fā)的集網(wǎng)頁(yè)制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁(yè)編輯器，它是第一套針對(duì)專業(yè)網(wǎng)頁(yè)設(shè)計(jì)師特別開展的視覺化網(wǎng)頁(yè)開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺(tái)限制和跨越瀏覽器限制的充滿動(dòng)感的網(wǎng)頁(yè)5 黃軍寶. 網(wǎng)站設(shè)計(jì)透過Dreamwear CS3學(xué)習(xí)HTML-DIV-CSSJ . 科學(xué)出版社. 2021, 35(9): 8197。使用網(wǎng)站地圖可以快速制作網(wǎng)站雛形，設(shè)計(jì)，更新和重組網(wǎng)頁(yè)。改變網(wǎng)頁(yè)位置或檔案名稱，Dreamweare 會(huì)自動(dòng)更新所有鏈接。使

40、用支援文字，HTML碼，HTML屬性標(biāo)簽和一般語(yǔ)法的搜尋及置換功能使得復(fù)雜的網(wǎng)站更新變得迅速又簡(jiǎn)單。(3) Photoshop Adobe Photoshop，簡(jiǎn)稱“PS，是一個(gè)由Adobe Systems開發(fā)和發(fā)行的圖像處理軟件。Photoshop主要處理以像素所構(gòu)成的數(shù)字圖像。使用其眾多的編修與繪圖工具，可以更有效的進(jìn)行圖片編輯工作。在網(wǎng)站前端開發(fā)過程中需要把圖片用Photoshop處理成加載到網(wǎng)站頁(yè)面的圖片，用Photoshop 制作矢量圖形用作網(wǎng)站頁(yè)面的修飾按鈕。 前端開發(fā)相關(guān)技術(shù) Java script 簡(jiǎn)介Java script6 賈素玲,王強(qiáng). Javasqript 程序設(shè)計(jì)M.

41、 清華大學(xué)出版社.2007, 15(4): 9194的出現(xiàn)，它可以使得信息和用戶之間不僅只是一種顯示和瀏覽的關(guān)系，而是實(shí)現(xiàn)了一種實(shí)時(shí)的，動(dòng)態(tài)的，可交互式的表達(dá)能力。從而基于CGI靜態(tài)的HTML頁(yè)面將被可提供動(dòng)態(tài)實(shí)時(shí)信息，并對(duì)客戶操作進(jìn)行反響的Web頁(yè)面的取代。Java script腳本正是滿足這種需求而產(chǎn)生的語(yǔ)言。它深受廣泛用戶的喜愛和歡送。它是眾多腳本語(yǔ)言中較為優(yōu)秀的一種，它與WWW的結(jié)合有效地實(shí)現(xiàn)了網(wǎng)絡(luò)計(jì)算和網(wǎng)絡(luò)計(jì)算機(jī)的藍(lán)圖。無(wú)疑Java家族將占領(lǐng)Internet網(wǎng)絡(luò)的主導(dǎo)地位。因此，盡快掌握java script腳本語(yǔ)言編程方法是我國(guó)廣闊用戶日益關(guān)心的問題。 Java script 根本

42、特點(diǎn)(1) 基于對(duì)象的語(yǔ)言 java script是一種基于對(duì)象的語(yǔ)言，同時(shí)也可以看作一種面向?qū)ο蟮?。這意味著它能運(yùn)用自己已經(jīng)創(chuàng)立的對(duì)象。因此，許多功能可以來(lái)自于腳本環(huán)境中對(duì)象的方法與腳本的相互作用7 費(fèi)東東. 挑戰(zhàn)Java script&Ajax應(yīng)用開發(fā)J . 機(jī)械工業(yè)出版社.2021, 7(5): 3536。(2) 簡(jiǎn)單性 java script的簡(jiǎn)單性主要表達(dá)在：首先它是一種基于Java根本語(yǔ)句和控制流之上的簡(jiǎn)單而緊湊的設(shè)計(jì)， 從而對(duì)于學(xué)習(xí)Java是一種非常好的過渡。其次它的變量類型是采用弱類型，并未使用嚴(yán)格的數(shù)據(jù)類型。(3) 平安性 java script是一種平安性語(yǔ)言，它不允許訪問

43、本地的硬盤，并不能將數(shù)據(jù)存入到效勞器上，不允許對(duì)網(wǎng)絡(luò)文檔進(jìn)行修改和刪除，只能通過瀏覽器實(shí)現(xiàn)信息瀏覽或動(dòng)態(tài)交互。從而有效地防止數(shù)據(jù)的喪失。(4) 動(dòng)態(tài)性 java script是動(dòng)態(tài)的，它可以直接對(duì)用戶或客戶輸入做出響應(yīng)，無(wú)須經(jīng)過Web效勞程序。它對(duì)用戶的反映響應(yīng)，是采用以事件驅(qū)動(dòng)的方式進(jìn)行的。所謂事件驅(qū)動(dòng)，就是指在主頁(yè)(Home Page)中執(zhí)行了某種操作所產(chǎn)生的動(dòng)作，就稱為“事件(Event)。比方按下鼠標(biāo)，移動(dòng)窗口，選擇菜單等都可以視為事件。當(dāng)事件發(fā)生后，可能會(huì)引起相應(yīng)的事件響應(yīng)。 CSS簡(jiǎn)介CSS8 林小 . CSS那些事 掌握網(wǎng)絡(luò)樣式CSS樣式布局J . 電子工業(yè)出版社.2021, 4

44、(5): 1114 (層疊樣式表)是用來(lái)進(jìn)行網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)的，它簡(jiǎn)化并擴(kuò)展了HTML中的各種標(biāo)記，使得各個(gè)標(biāo)記的屬性更具有一般性和通用性，大大提高了HTML開發(fā)的效率。在制作網(wǎng)頁(yè)時(shí)采用CSS技術(shù)，可以有效地對(duì)頁(yè)面的布局，字體，顏色，背景和其他效果實(shí)現(xiàn)更加精確的控制，只要對(duì)相應(yīng)的代碼作一些簡(jiǎn)單的修改，就可以改變同一頁(yè)面的不同局部，或者頁(yè)數(shù)不同的網(wǎng)頁(yè)的外觀和格式。什么是CSS？CSS中，Cascading是“層疊的意思，也就是說在同一個(gè)Web文檔中可以有多個(gè)樣式表存在，這些樣式表根據(jù)所在的位置，擁有不同的優(yōu)先級(jí)，優(yōu)先級(jí)越高，就會(huì)在最后顯示時(shí)被采用。從樣式表插入的形式看可以分為3種。(1)內(nèi)聯(lián)式樣式表

45、；(2)嵌入式樣式表；(3)外部式樣式表；CSS的特點(diǎn) CSS是用來(lái)擴(kuò)展HTML的，而不是用來(lái)替換HTML的，也就是說CSS不能脫離HTML，它只是一項(xiàng)輔助工具。除了可擴(kuò)展HTML的樣式設(shè)定外，CSS使得網(wǎng)頁(yè)的設(shè)計(jì)與維護(hù)更加高效，這主要表現(xiàn)在以下幾個(gè)方面：減少圖形文件的使用，集中管理樣式信息，設(shè)定共享樣式，將樣式分類使用。 JQuery JQuery9 單東飛, 張曉菲, 魏然. 鋒利的JQueryM . 人民郵電出版社.2021 ,28(5): 9194是繼prototype之后又一個(gè)優(yōu)秀的Javascript框架。其宗旨是WRITE LESS，DO MORE，寫更少的代碼，做更多的事情。它

46、是輕量級(jí)的js庫(kù)(壓縮后只有21k) ，這是其它的js庫(kù)所不及的，它兼容CSS3，還兼容各種瀏覽器 IE 6。0+， FF 1。5+， Safari 2。0+， Opera 9。0+。JQuery是一個(gè)快速的，簡(jiǎn)潔的JavaScript庫(kù)，使用戶能更方便地處理HTML documents，events，實(shí)現(xiàn)動(dòng)畫效果。jQuery其模塊化的使用方式使開發(fā)者可以很輕松的開發(fā)出功能強(qiáng)大的網(wǎng)頁(yè)特效。本文主要論述了如何在Web開發(fā)中使用jQuery技術(shù)，豐富網(wǎng)站的交互性和用戶體驗(yàn)性8 林小 . CSS那些事 掌握網(wǎng)絡(luò)樣式CSS樣式布局J . 電子工業(yè)出版社.2021, 4(5): 1114 。jQuer

47、y是一套Javascrip腳本庫(kù)。Javascript輕量級(jí)腳本庫(kù)系列文章。 Javascript腳本庫(kù)類似于。NET的類庫(kù)， 這些工具方法或?qū)ο蠓椒ǚ庋b在類庫(kù)中，方便用戶使用。注意jQuery是腳本庫(kù)， 而不是腳本框架。庫(kù)不等于框架， 比方System程序集是類庫(kù)，而ASP .NET MVC是框架。 jQuery并不能幫助我們解決腳本的引用管理和功能管理，這些都是腳本框架要做的事。腳本庫(kù)能夠幫助完成編碼邏輯，實(shí)現(xiàn)業(yè)務(wù)功能。使用jQuery將極大的提高編寫javascript代碼的效率，讓寫出來(lái)的代碼更加優(yōu)雅，更加健壯。jQuery有如下特點(diǎn)：(1) 提供了強(qiáng)大的功能函數(shù)使用這些功能函數(shù)，能夠

48、幫助我們快速完成各種功能，而且會(huì)讓我們的代碼異常簡(jiǎn)潔。(2) 解決瀏覽器兼容性問題javascript腳本在不同瀏覽器的兼容性一直是Web開發(fā)人員的噩夢(mèng)，常常一個(gè)頁(yè)面在IE9，F(xiàn)irefox下運(yùn)行正常，在IE6下就出現(xiàn)莫名其妙的問題。 針對(duì)不同的瀏覽器編寫不同的腳本是一件痛苦的事情。有了jQuery我們將從這個(gè)噩夢(mèng)中醒來(lái)， 比方在jQuery中的Event事件對(duì)象已經(jīng)被格式化成所有瀏覽器通用的，從前要根據(jù)event獲取事件觸發(fā)者，在IE下是event.srcElements 而ff等標(biāo)準(zhǔn)瀏覽器下下是event。target。 jQuery那么通過統(tǒng)一event對(duì)象，讓我們可以在所有瀏覽器中使用

49、event。target獲取事件對(duì)象。(3) 實(shí)現(xiàn)豐富的UIjQuery可以實(shí)現(xiàn)比方漸變彈出，圖層移動(dòng)等動(dòng)畫效果，讓我們獲得更好的用戶體驗(yàn)。單以漸變效果為例，從前我自己寫了一個(gè)可以兼容IE和ff的漸變動(dòng)畫，使用大量javascript代碼實(shí)現(xiàn)，費(fèi)心費(fèi)力不說，寫完后沒有太多幫助過一端時(shí)間就忘記了。 再開發(fā)類似的功能還要再次費(fèi)心費(fèi)力。 如今使用jQuery就可以幫助我們快速完成此類應(yīng)用。(4) 糾正錯(cuò)誤的腳本知識(shí)大局部開發(fā)人員對(duì)于javascript存在錯(cuò)誤的認(rèn)識(shí)。比方在頁(yè)面中編寫加載時(shí)即執(zhí)行的操作DOM的語(yǔ)句，在HTML元素或者document對(duì)象上直接添加onclick屬性，不知道onclic

50、k其實(shí)是一個(gè)匿名函數(shù)等等。擁有這些錯(cuò)誤腳本知識(shí)的技術(shù)人員也能完成所有的開發(fā)工作，但是這樣的程序是不健壯的。比方在頁(yè)面中編寫加載時(shí)即執(zhí)行的操作DOM的語(yǔ)句，當(dāng)頁(yè)面代碼很小用戶加載很快時(shí)沒有問題，當(dāng)頁(yè)面加載稍慢時(shí)就會(huì)出現(xiàn)瀏覽器終止操作的錯(cuò)誤。jQuery提供了很多簡(jiǎn)便的方法幫助我們解決這些問題， 一旦使用jQuery你就將糾正這些錯(cuò)誤的知識(shí)-因?yàn)槲覀兌际怯脴?biāo)準(zhǔn)的正確的jQuery腳本編寫方法!本章小結(jié)本章介紹了開發(fā)數(shù)字媒體技術(shù)系網(wǎng)站前端所需要的開發(fā)工具和他們的運(yùn)行環(huán)境，同時(shí)講述了相關(guān)的前端開發(fā)技術(shù)比方：Java script ，CSS ，jqurey等。以便以后的開發(fā)過程中能夠?qū)@些開發(fā)工具盒技術(shù)

51、有深刻的理解。 前端布局分析與設(shè)計(jì)前端總體開發(fā)流程及設(shè)計(jì)前端設(shè)計(jì)Web前端開發(fā)技術(shù)是一個(gè)先易后難的過程，主要包括三個(gè)要素：HTML，CSS和JavaScript，這就要求前端開發(fā)工程師不僅要掌握根本的Web前端開發(fā)技術(shù)，網(wǎng)站性能優(yōu)化，SEO和效勞器端的根底知識(shí)，而且要學(xué)會(huì)運(yùn)用各種工具進(jìn)行輔助開發(fā)以及理論層面的知識(shí)，包括代碼的可維護(hù)性，組件的易用性，分層語(yǔ)義模板和瀏覽器分級(jí)支持等。 分層開發(fā)在數(shù)字媒體技術(shù)系網(wǎng)站概要確定后就需要進(jìn)行分層開發(fā)的劃分，根據(jù)工程內(nèi)容的不同，劃分工作。大致分為，總體結(jié)構(gòu)搭建，模塊制作，頁(yè)面制作，底層JS搭建，JS交互效果，內(nèi)部測(cè)試，代碼優(yōu)化。如圖3-1所示：圖3 SEQ

52、圖 * ARABIC s 1 1分層開發(fā)圖這樣做的好處是能根據(jù)工程的不同，劃分出不同的功能模塊，合理的安排時(shí)間，在有限的時(shí)間內(nèi)做出很多模塊和功能。降低開發(fā)本錢，提高開發(fā)效率。 代碼編寫前期工作準(zhǔn)備好后，就開始進(jìn)入代碼編寫階端，我們采用LSM方式進(jìn)行，大致流程為總規(guī)劃和設(shè)計(jì)草稿完成后，就進(jìn)行前期的前端開發(fā)搭建大致的HTML結(jié)構(gòu)，然后設(shè)計(jì)出完設(shè)計(jì)稿后再進(jìn)行頁(yè)面樣式的完善，最后完成正式的頁(yè)面后交給開發(fā)，嵌套程序。這樣做的好處不僅能有效的提高開發(fā)效率，實(shí)現(xiàn)逐層開發(fā)，讓前端提前介入，減少整體消耗的時(shí)間，確保產(chǎn)品有更多的時(shí)間修改和完善。確定了流程后還需要對(duì)產(chǎn)品原型進(jìn)行分析，拆分，把復(fù)用性高的局部找出來(lái)制作

53、成代碼模塊，方便以后的套用。確認(rèn)二，三級(jí)頁(yè)面的風(fēng)格搭建統(tǒng)一框架。前端設(shè)計(jì)樣式確定以后，就進(jìn)行通用模塊樣式的設(shè)計(jì)包括按鈕，分頁(yè)，默認(rèn)字體顏色，連接顏色等，完成后并提交給前端，統(tǒng)一的搭建。在代碼的編寫過程中，最重要的是標(biāo)準(zhǔn)和標(biāo)準(zhǔn)的執(zhí)行遵守，在編寫HTML時(shí)候充分發(fā)揮想象盡可能的滿足后期樣式表現(xiàn)的需要 。如圖3-2所示：圖 3- SEQ 圖 * ARABIC s 1 2 編寫代碼流程圖代碼編寫過程中讓前端提前進(jìn)入開發(fā)流程中來(lái)，在樣式屬性后就進(jìn)行HTML結(jié)構(gòu)的編寫，頁(yè)面設(shè)計(jì)完成后，在進(jìn)行樣式表的開發(fā)，這樣不僅能節(jié)省很多的開發(fā)時(shí)間，提高開發(fā)效率，能在前端對(duì)全局頁(yè)面的把控。在此同時(shí)也強(qiáng)調(diào)標(biāo)準(zhǔn)和模塊化的重要

54、性，正所謂無(wú)規(guī)矩不成方圓，這樣能便于后期維護(hù)，減少維護(hù)本錢。而模塊化，是敏捷開發(fā)所必需的，重要性在這里也不做過多的描述。 內(nèi)部測(cè)試與后續(xù)優(yōu)化前端的內(nèi)部測(cè)試，指出頁(yè)面與設(shè)計(jì)稿不匹配的地方，優(yōu)化局部細(xì)節(jié)頁(yè)面樣式。測(cè)試不僅能提高內(nèi)測(cè)的質(zhì)量，還能更早的發(fā)現(xiàn)問題并及時(shí)的修改，否那么當(dāng)頁(yè)面提交開發(fā)以后再做修改是一件很麻煩的事情。當(dāng)所有細(xì)節(jié)修改完畢后，就需要進(jìn)行制作文件的優(yōu)化以確保代碼的最優(yōu)化，盡可能地壓縮圖片和減少外部 請(qǐng)求如圖3-3所示：圖 3-3 內(nèi)部測(cè)試流程圖圖 34 前端開發(fā)流程圖這套流程制定出來(lái)就一直要求所有前端設(shè)計(jì)必須嚴(yán)格按照流程執(zhí)行，也經(jīng)過了很長(zhǎng)時(shí)間的磨合跟改良。雖然不是很完美，但是很適合我

55、們現(xiàn)在開發(fā)的需要，好處也是顯而易見的，遵循并使用它對(duì)我們的發(fā)開有很大的幫助，能更好的應(yīng)對(duì)高強(qiáng)度，高質(zhì)量的開發(fā)需要。代碼更可控，開發(fā)效率更高。 前端UI設(shè)計(jì) 模塊分布UI設(shè)計(jì)這是設(shè)計(jì)中最重要的一點(diǎn)，也可以發(fā)揮出更多創(chuàng)意的設(shè)計(jì)想法；其中表達(dá)出層次感設(shè)計(jì)的就是附屬關(guān)系，點(diǎn)構(gòu)成線，線構(gòu)成面，主次清晰明了。下面是以任由設(shè)計(jì)師發(fā)揮，不是這樣死板，要運(yùn)用層次感的原理去設(shè)計(jì)如圖3-5,3-6所示： 正確的層次布局 錯(cuò)誤的布局圖 35 布局比照?qǐng)D在數(shù)字媒體技術(shù)系網(wǎng)站中UI層次感的表達(dá)圖 36 數(shù)字媒體技術(shù)系頁(yè)面布局圖 顏色配置產(chǎn)生豐富色彩的三原色是紅，綠，藍(lán)，也就是RGB，十六進(jìn)制是00 00 00，例如經(jīng)常寫

56、的red，color:#FF0000； 縮寫color:#F00；color:gray(#808080)；是比擬深的灰色。所謂鄰近色，就是在色帶上相鄰近的顏色，例如綠色和藍(lán)色，紅色和黃色就互為鄰近色。采用鄰近色設(shè)計(jì)網(wǎng)頁(yè)可以使網(wǎng)頁(yè)防止色彩雜亂，易于到達(dá)頁(yè)面的和諧統(tǒng)一。我們網(wǎng)站上用的色彩系是屬于灰白色系這個(gè)選擇符合網(wǎng)站的整體風(fēng)格，不可能把網(wǎng)站設(shè)計(jì)成五顏六色，因?yàn)槭菍W(xué)院網(wǎng)站所以要表達(dá)一種淡雅，自然的色彩風(fēng)格。背景色一般采用素淡清雅的色彩，防止采用花紋復(fù)雜的圖片和純度很高的色彩作為背景色，同時(shí)背景色要與文字的色彩比照強(qiáng)烈一些。首頁(yè)的頂端使用灰色標(biāo)題圖片下面用全景圖這兩個(gè)局部過度的很自然。在文字局部用黑

57、色文字當(dāng)鼠標(biāo)移動(dòng)到相關(guān)文字上面時(shí)文字顏色變成紅色。不同的文字顏色會(huì)產(chǎn)生不同的效果，這能給瀏覽者一種層次感，方便與閱讀。違紀(jì)一點(diǎn)禁止大面積使用白色文字，特別是較深的背景下，禁止大面積使用加粗文字如圖3-7所示：圖 37 字體顏色變換 CSS元素CSS塊元素(block) 總是另起一行開始；高度，行高以及頂，底邊距都可控制常用的有：div p table h1 ul dl 等等。 CSS內(nèi)聯(lián)元素(inline)和其它元素都在一行上；高度，行高以及頂，底邊距不可改變；常用的有：a strong font img input span small label等等 11 Graffam, J. D. C

58、SS for Print DesignersM .NEW RIDERS PUBL . 202118(3):233254如圖3-8所示：Display: inline-block將對(duì)象呈遞為內(nèi)聯(lián)對(duì)象，但是對(duì)象的內(nèi)容作為塊對(duì)象呈遞。旁邊的內(nèi)聯(lián)對(duì)象會(huì)被呈遞在同一行內(nèi)，允許空格。但對(duì)于這個(gè)屬性不是所有瀏覽器都識(shí)別。圖 38 CSS浮動(dòng)CSS間距 12 William Harrel. HTML, CSS, and JavaScript Mobile Development For DummiesJ . John Wiley .2021相應(yīng)的設(shè)置大小，行高，首行縮進(jìn)，間距padding，margin內(nèi)邊距

59、padding：元素的內(nèi)邊距在邊框和內(nèi)容區(qū)之間。padding:10px 5px 15px 20px;上 10px右 5px下 15px左 20pxpadding:10px 5px 15px; 上右左下padding:10px 15px;上右下左 無(wú)標(biāo)題文檔這個(gè)的寬度實(shí)質(zhì)已經(jīng)增加了40px外邊距margin：圍繞在元素邊框的空白區(qū)域是外邊距。margin支持負(fù)值，在頁(yè)面布局中，應(yīng)該大膽的用，可以解決很多問題。最常用的就是div居中:margin:0 auto;當(dāng)然一定要固定寬度。無(wú)標(biāo)題文檔這個(gè)屬性是無(wú)法居中的，如下圖3-9所示： 圖 39 元素邊框調(diào)整 交互設(shè)計(jì)與UI由于視覺設(shè)計(jì)本身是一種比擬

60、主觀的創(chuàng)作性工作，那些已經(jīng)被制定好的視覺結(jié)構(gòu)常常因設(shè)計(jì)師的“審美需要而被剝離，切割13 Jonathan Anderson, John McRee, Robb Wilson .The EffectiveUI TeamJ . Effective UI OReilly Media, Inc. 2021。 這種情況下，交互設(shè)計(jì)尤為重要，既不能失去UI設(shè)計(jì)的特性，又要確保UI設(shè)計(jì)師利用其專業(yè)知識(shí)在視覺結(jié)構(gòu)內(nèi)進(jìn)行充分發(fā)揮，這是一種藝術(shù)如圖3-10，3-11所示：圖 310 導(dǎo)航欄圖 311 咨詢中心點(diǎn)，線，面的運(yùn)用先進(jìn)開發(fā)思想和良好設(shè)計(jì)模式的前端模塊化技術(shù)正逐漸成熟14 張曉紅. 網(wǎng)站前端模塊化開發(fā)策略