【正文】 Ajax 應(yīng)用開(kāi)發(fā) [J] . 機(jī)械工業(yè)出版社 .2020, 7(5): 35~36 [8] 林小 . CSS 那些事 掌握網(wǎng)絡(luò)樣式 CSS 樣式布局 [J] . 電子工業(yè)出版社 .2020, 4(5): 11~14 [9] 單東飛 , 張曉菲 , 魏然 . 鋒利的 JQuery[M] . 人民郵電出版社 .2020 ,28(5): 91~94 [8] 林小 . CSS 那些事 掌握網(wǎng)絡(luò)樣式 CSS 樣式布局 [J] . 電子工業(yè)出版社 .2020, 4(5): 11~14 [11] Graffam, J. D. CSS for Print Desig。 30 參考文獻(xiàn) [1] 李燕 . 高校校園網(wǎng)站功能探討 [J]. 齊齊哈爾師范高等?？茖W(xué)校校報(bào) .2020 年 01 期 25(2): 9~11 [13] Jonathan Anderson, John McRee, Robb Wilson .The EffectiveUI Team[J] . Effective UI O39。 網(wǎng)站中還存在一些不足之處，如網(wǎng)站的留言系統(tǒng)沒(méi)建立等等。以信息網(wǎng)站為核心的 Web信息系統(tǒng)建設(shè) 方興未艾，運(yùn)用新技術(shù)進(jìn)行創(chuàng)新的應(yīng)用開(kāi)發(fā)，提高網(wǎng)絡(luò)系統(tǒng)應(yīng)用成效將是一個(gè)不竭的課題。 JSP 雖然提供了功能強(qiáng)大的 Web 應(yīng)用程序開(kāi)發(fā)環(huán)境 ,但和其它技術(shù)一樣 ,它也存在著某些缺點(diǎn)。 本網(wǎng)站的建立的作用具有超時(shí)空特性，不僅能讓本地區(qū)的人們了解學(xué)院，更可讓世界了解本專業(yè)。 29 第 5章 總結(jié) 總結(jié) 創(chuàng)建的數(shù)字媒體技術(shù)系的專業(yè)網(wǎng)站，網(wǎng)站前端設(shè)計(jì)最基本的三個(gè)技能： HTML，CSS， JavaScript， PS 矢量圖像編輯技術(shù)。說(shuō)明了在頁(yè)面設(shè)計(jì)過(guò)程的具體實(shí)現(xiàn)，說(shuō)明了網(wǎng)站修飾風(fēng)格，可視化的重要概念。照片動(dòng)態(tài)切換效果，可以直接涉及到網(wǎng)站是否有活力，也是整個(gè)網(wǎng)站集聚吸引力的地方，所以在使用 JS 調(diào)用的時(shí)候一般不在同一時(shí)間使用多次，以減輕服務(wù)器和數(shù)據(jù)庫(kù)讀寫的負(fù)擔(dān)。 })。text_fade39。999 solid 2px39。FFF39。370s39。35039。202039。Mosaic,Wipe_from_horizontal_blind,Wipe_from_vertical_blind, Wipe_from_vertical_center,Wipe_from_horizontal_center,Wipe_to_horizontal_center, Wipe_to_vertical_center,Wipe_from_bottom_to_top,Wipe_from_top_to_bottom, Wipe_from_right_to_left39。 } } // close layer when clickout = mclose。 } // cancel close timer function mcancelclosetime() { if(closetimer) { (closetimer)。hidden39。visible39。 // get new layer and show it ddmenuitem = (id)。 // close old layer if(ddmenuitem) = 39。它是眾多腳本語(yǔ)言中較為優(yōu)秀的一種 ，與 WWW 的結(jié)合有效地實(shí)現(xiàn)了網(wǎng)絡(luò)計(jì)算和網(wǎng)絡(luò)計(jì)算機(jī)的藍(lán)圖。JavaScript 腳本正是滿足這種需求而產(chǎn)生的語(yǔ)言。 JavaScript 的出現(xiàn)使得信息 和用戶之間不僅只是一種顯示和瀏覽的關(guān)系，而是實(shí)現(xiàn)了一種實(shí)時(shí)的，動(dòng)態(tài)的，可交式的表達(dá)能力 [18]。它是通過(guò)嵌入或調(diào)入在標(biāo)準(zhǔn)的 HTML 語(yǔ)言中實(shí)現(xiàn)的。 26 應(yīng)用 JavaScript 設(shè)計(jì)網(wǎng)頁(yè) JavaScript 是一種基于對(duì)象 (Object)和事件驅(qū)動(dòng) (Event Driven)并具有安全性能的腳本語(yǔ)言。 backgroundrepeat: norepeat。 backgroundcolor: green。 數(shù)字媒體技術(shù)系 網(wǎng)站中 CSS 樣式表使用 的部分代碼 ： top { width: 100%。然后設(shè)計(jì)網(wǎng)頁(yè)的表現(xiàn)框架，建立頁(yè)面模型。 可視化設(shè)計(jì) 網(wǎng)站可視化設(shè)計(jì)的主要目的是提供給用戶一個(gè)關(guān)于網(wǎng)站的信息展示方案，一個(gè)良好有效的網(wǎng)站可視化設(shè)計(jì)能給用戶留下深刻的印象，使得用戶能夠自然，友好的瀏覽 Web 站點(diǎn)所提供的信息，也是網(wǎng)站設(shè)計(jì)中重要的一環(huán)。 網(wǎng)站裝飾風(fēng)格 采用了灰白色為主導(dǎo)航顏色，首頁(yè)中運(yùn)用最新更新圖片，以 及文字交錯(cuò)排版，使整個(gè)網(wǎng)站看上去符合跳動(dòng)的風(fēng)格。例如： 一級(jí)欄目列表，二級(jí)欄目列表，欄目導(dǎo)航列表， 欄目的最新新聞 (文章 )顯示條數(shù)，某一欄目的熱門文章可任意調(diào)整。如顯示欄目導(dǎo)航，顯示某欄目的最新 N 條新聞等。先明確這個(gè)校園網(wǎng)站 提供的主要功能： (1) 管理員登錄系統(tǒng) ： 管理網(wǎng)站內(nèi)容，新聞動(dòng)態(tài)等 (2) 網(wǎng)上教學(xué)系統(tǒng) ： 提供給學(xué)生一些必要的電子書(shū)供下載 (3) 教學(xué)科研專區(qū) ： 提供 學(xué)院教師在個(gè)方面的成果及新聞的功能 (4) 新聞公告專區(qū) ： 提供 有關(guān)學(xué)院的公告通知，計(jì)算機(jī)方面的最新資訊 。 網(wǎng)站底部：網(wǎng)站 /版面制作；版權(quán)信息。 網(wǎng)站上中部：網(wǎng)站圖片結(jié)合；位置導(dǎo)航。網(wǎng)站的整體顏色：灰白色為導(dǎo)航顏色；主體顏色：黑色色；字體：宋體；行距： 150%。 第 4章 主要功能的實(shí)現(xiàn) 界面設(shè)計(jì) 設(shè)置公開(kāi)地聯(lián)系方式 ；設(shè)置網(wǎng)站整體信息與用戶為一體 ；設(shè)置完善地個(gè)性化 24 地會(huì)員管理與交互系統(tǒng)。 本章小結(jié) 本章主要介紹了數(shù)字媒體技術(shù)系網(wǎng)站的具體布局， 具體結(jié)構(gòu)?？墒沁B接不同的數(shù)據(jù)表。 系內(nèi)新聞 系內(nèi)新聞分成 3 個(gè) 2 級(jí)菜單，行業(yè)資訊，院系動(dòng)態(tài)，系內(nèi)新聞。實(shí)驗(yàn)室介紹當(dāng)中點(diǎn)擊實(shí)驗(yàn)室介紹會(huì)進(jìn)入實(shí)驗(yàn)室介紹頁(yè)面。并以最新動(dòng)態(tài)的形式展現(xiàn)出來(lái)。 23 系內(nèi)概況 圖 317 系內(nèi)概況 系內(nèi)概況又分為 3 個(gè) 2 級(jí)菜單，本系概況，實(shí)驗(yàn)室介紹，師資介紹等。主頁(yè)包括的內(nèi)容主要有：網(wǎng)站的域名，導(dǎo)航條， LOGO，版權(quán) 。制作過(guò)程如下 ： 首頁(yè) 網(wǎng)站制作過(guò)程 ：首先利用 Photoshop 制作了網(wǎng)站的首頁(yè)效果圖，大小為900px*1004px。讓網(wǎng)站設(shè)計(jì)的更加完美。 H 區(qū)域 成果展示 J 區(qū)域 底部 logo 整個(gè)網(wǎng)站的底端。插入中間的圖片就好比中間挖了一條河一樣既能解決網(wǎng)站過(guò)于枯燥，也提升網(wǎng)站的美觀度。讓讀者看起來(lái)無(wú)從下手的感覺(jué)。 最近在系發(fā)生的最新鮮的新聞，消息等內(nèi)容都在這里按時(shí)間循序顯示。 D 區(qū)域是教務(wù)信息區(qū)。使用全景 22 圖給人一種舒服的視覺(jué)感受。 C 區(qū)域 是首頁(yè)中的大圖片，是浙江理工大學(xué)的全景圖片，圖片清晰拍攝角度廣，色彩調(diào)整完美。導(dǎo)航欄中每個(gè)導(dǎo)航按鈕的設(shè)計(jì)也是符合美觀要求。 B 區(qū)域是網(wǎng)站的導(dǎo)航欄，導(dǎo)航的顏色基本上是青白色，能展現(xiàn)網(wǎng)站的大體內(nèi)容。 站點(diǎn)設(shè)計(jì)簡(jiǎn)單有序，主次關(guān)系分明，將零亂頁(yè)面的組織過(guò)程 ， 混雜的內(nèi)容 ， 依整體 的 布局的需要進(jìn)行分組歸納，經(jīng)過(guò)進(jìn)行具有內(nèi)在聯(lián)系的組織排列， 反復(fù)推敲文字，圖形與空間的關(guān)系，使瀏覽者有一個(gè)流暢的視覺(jué)體驗(yàn) ，如圖 316 所示： 圖中的 A 區(qū)域是數(shù)字媒體技術(shù)系網(wǎng)站的大 logo 以及網(wǎng)站名稱，能展現(xiàn)網(wǎng)站的主題。對(duì)于一些 LOGO[16]標(biāo)志應(yīng)充分加以利用。對(duì)網(wǎng)站的整體風(fēng)格和特色 做 出定位，規(guī)劃網(wǎng)站的組織結(jié)構(gòu) 。 由上面的分析，網(wǎng)站前端的結(jié)構(gòu)設(shè)計(jì)成。各個(gè)子頁(yè)面都可正常返回主頁(yè)以及正確連接到各個(gè)子頁(yè)面。 制作前臺(tái)頁(yè)面模塊，包括主頁(yè)及各個(gè)子頁(yè)面， 建立各個(gè)頁(yè)面與數(shù)據(jù)庫(kù)中相關(guān)數(shù)據(jù)鏈接，實(shí)現(xiàn)前臺(tái)通過(guò)調(diào)用數(shù)據(jù)庫(kù)把后臺(tái)數(shù)據(jù)在前臺(tái)顯示和更新 。 作為一個(gè)網(wǎng)站，應(yīng)該由一些相關(guān)及相對(duì)獨(dú)立的模塊整合而成。為了提高網(wǎng)頁(yè)的可讀性，標(biāo)題區(qū) ，標(biāo)題行和正文區(qū)使用 了 不同大小的 20 字體 ，正文 使 用 的是 靜止的文字，且字體足夠大， 以 便于閱讀 [15]。 點(diǎn)的運(yùn)用 在內(nèi)容繁雜的網(wǎng)頁(yè)上為了可以讓瀏覽者更輕松的找到自己想要的信息 ，點(diǎn)的引導(dǎo)作用必不可少 如圖 312 所示： 19 圖 312 點(diǎn)的應(yīng)用 線的運(yùn)用 線不但起到了頁(yè)面的分割作用 ，很好的運(yùn)用線條還使網(wǎng)頁(yè)錦上添花 如圖 313： 圖 313 線的應(yīng)用 網(wǎng)站結(jié)構(gòu)布局及設(shè)計(jì) 網(wǎng)站首頁(yè)結(jié)構(gòu) 實(shí)際內(nèi)容占據(jù)網(wǎng)頁(yè)的大部分空間， 為 50%～ 80% ，導(dǎo)航部分不超過(guò) 20%。 根據(jù)網(wǎng)站前端模塊化的不同開(kāi)發(fā)思想 ，詳細(xì)分析了目前常見(jiàn)的三種模塊化開(kāi)發(fā)策略，闡 述了每種開(kāi)發(fā)策略的具體實(shí)現(xiàn)方法 ， 常見(jiàn)的框架與工具存在的問(wèn)題及優(yōu)缺點(diǎn)，并提出了完善前端模塊化開(kāi)發(fā)策略的一些方法 ?！睙o(wú)標(biāo)題文檔 /div/div 這個(gè)屬性是無(wú)法居中的 ，如圖所示 39 所示： 圖 39 元素邊框調(diào)整 交互設(shè)計(jì)與 UI 由于視覺(jué)設(shè)計(jì)本身是一種比較主觀的創(chuàng)作性工作 ，那些已經(jīng)被制定好的視覺(jué)結(jié)構(gòu)常常因設(shè)計(jì)師的“審美需要”而被剝離，切割 [13] 。 textalign:center。 當(dāng)然 一 定 要 固 定 寬 度 。 margin 支持負(fù)值，在頁(yè)面布局中，應(yīng)該大膽的用，可以解決很多問(wèn)題。 padding:0 20px。 上右左下 padding:10px 15px。 padding:10px 5px 15px 20px。但對(duì)于這個(gè)屬性不是所有瀏覽器都識(shí)別。 CSS 內(nèi)聯(lián)元素 (inline)和其它元素都在一行上；高度，行高以及頂，底邊距不可改變； 常用的有： a strong font img input span small label 等等 [11]如圖 38 所示： Display: inlineblock 將對(duì)象呈遞為內(nèi)聯(lián)對(duì)象，但是對(duì)象的內(nèi)容作為塊對(duì)象呈遞。 不同的文字顏色會(huì)產(chǎn)生不同的效果， 這能給瀏覽者一種層次感，方便與閱讀 。 首頁(yè)的頂端使用灰色標(biāo)題圖片下面用全景圖這兩個(gè)部分過(guò)度的很自然 。我們網(wǎng)站上用的色彩系是屬于灰白色系這個(gè)選擇符合網(wǎng)站的整體風(fēng)格 ，不可能把網(wǎng)站設(shè)計(jì)成五顏六色，因?yàn)槭菍W(xué)院網(wǎng)站所以要體現(xiàn)一種 淡雅，自然的色彩風(fēng)格。所謂鄰近色，就是在色帶上相 鄰近的顏色，例如綠色和藍(lán)色，紅色和黃色就互為鄰近色。 前端 UI 設(shè)計(jì) 模塊分布 UI 設(shè)計(jì)這是設(shè)計(jì)中最重要的一點(diǎn)，也可以發(fā)揮出更多創(chuàng)意的設(shè)計(jì)想法 ；其中體現(xiàn)出層次感設(shè)計(jì)的就是從屬關(guān)系，點(diǎn)構(gòu)成線，線構(gòu)成面， 主次清晰明了。 雖然不是很完美，但是很適合我們現(xiàn)在開(kāi)發(fā)的需要，好處也是顯而易見(jiàn)的， 遵循并使用它對(duì)我們的發(fā)開(kāi)有很大的幫助，能更好的應(yīng)對(duì)高強(qiáng)度，高質(zhì) 量的開(kāi)發(fā)需要。測(cè)試不僅能提高內(nèi)測(cè)的質(zhì)量，還能更早的發(fā)現(xiàn)問(wèn)題并及時(shí)的修改，否則當(dāng)頁(yè)面提交開(kāi)發(fā)以后再做修改是一件很麻煩的事情。而模塊化，是敏捷開(kāi)發(fā)所必需的，重要性在這里也不做過(guò)多的描述。如圖 32 所示： 圖 32 編寫代碼流程圖 代碼編寫過(guò)程中讓前端提前進(jìn)入開(kāi)發(fā)流程中來(lái) ，在 樣式屬性 后就進(jìn)行 HTML 結(jié)構(gòu)的編寫，頁(yè)面設(shè)計(jì)完成后，在進(jìn)行樣式表的開(kāi)發(fā) ，這樣不僅能節(jié)省很多的開(kāi)發(fā)時(shí)間，提高開(kāi)發(fā)效率， 能在 前端對(duì)全局頁(yè)面的把控 。 前端 設(shè)計(jì) 樣式確定以 后，就進(jìn)行通用模塊樣式的設(shè)計(jì)（包括按鈕，分頁(yè)，默認(rèn)字體顏色，連接顏色等），完成后并提交給前端，統(tǒng)一的搭建。 確定了流程后還需要對(duì)產(chǎn)品原型進(jìn)行分析，拆分，把復(fù)用性高的部分找出來(lái)制作成代碼模塊，方便以后的套用 。 代碼編寫 前期工作準(zhǔn)備好后，就開(kāi)始進(jìn)入代碼編寫階端 ，我們采用 LSM 方式進(jìn)行，大致流程為 總規(guī)劃和設(shè)計(jì)草稿完成 后，就進(jìn)行前期的前端開(kāi)發(fā)（搭建大致的 HTML 結(jié)構(gòu)），然后設(shè)計(jì)出完設(shè)計(jì)稿后再進(jìn)行頁(yè)面樣式的完善 ，最后完成正式的頁(yè)面后交給開(kāi)發(fā)，嵌套程序。如圖 31 所示： 圖 31 分層開(kāi)發(fā)圖 這樣做的好處是能根據(jù)項(xiàng)目的不同 ，劃分出不同的功能模塊，合理的 安排時(shí)間 ，在有限的時(shí)間內(nèi)做出很多模塊和功能 。 分層開(kāi)發(fā) 在數(shù)字媒體技術(shù)系網(wǎng)站概要確定后就需要進(jìn)行分層開(kāi)發(fā)的劃分， 根據(jù)項(xiàng)目?jī)?nèi)容的不同，劃分工作。以便以后的開(kāi)發(fā)過(guò)程中能夠?qū)@些開(kāi)發(fā)工具盒技術(shù)有深刻的理解。比如 在頁(yè)面中編寫加載時(shí)即 執(zhí)行的操作 DOM 的語(yǔ)句 ，當(dāng)頁(yè)面代碼很小用戶加載很快時(shí)沒(méi)有問(wèn)題，當(dāng)頁(yè)面加載稍慢時(shí)就會(huì)出現(xiàn)瀏覽器 終止操作 的錯(cuò)誤。比如在頁(yè)面中編寫加載時(shí)即執(zhí)行的操作 DOM 的語(yǔ)句，在 HTML元素或者 document 對(duì)象上直接添加 onclick屬性，不知道 onclick 其實(shí)是一個(gè)匿名函數(shù)等等。 如今使用 jQuery 就可以幫助我們快速 11 完成此類應(yīng)用。單以漸變效果為例，從前我自己寫了一個(gè)可以兼容 IE 和 ff 的漸變動(dòng)畫(huà)，使用大量 javascript 代碼實(shí)現(xiàn)，費(fèi)心費(fèi)力不說(shuō)，寫完后沒(méi)有太多幫助過(guò)一端時(shí)間就忘記了。 target獲取事件對(duì)象。target。 針對(duì)不同的瀏覽器編寫不同的腳本是一件痛苦的事情。 jQuery 有如下特點(diǎn)： (1) 提供了強(qiáng)大的功能函數(shù) 使用這些功能函數(shù) ，能夠幫助我們快速完成各種功能，而且會(huì)讓我們的代碼