【導(dǎo)讀】究成果均已在參考文獻(xiàn)或注釋中列出。設(shè)計(jì)(論文)主體均由本人獨(dú)。立完成，沒有抄襲、剽竊他人已經(jīng)發(fā)表或未發(fā)表的研究成果行為。如出現(xiàn)以上違反知識(shí)產(chǎn)權(quán)的情況，本人愿意承擔(dān)相應(yīng)的責(zé)任。越被人們接受，并且融入我們的生活。隨著高校信息化建設(shè)的不斷推進(jìn)，網(wǎng)站的作。用超越了傳統(tǒng)的信息獲取，交流它更能體現(xiàn)組織機(jī)構(gòu)的風(fēng)采，性質(zhì)。建立本院系美觀，專業(yè)，易于維護(hù)管理的網(wǎng)站已經(jīng)勢(shì)在必行。前端的開發(fā)中，在頁面的布局時(shí)，HTML將元素進(jìn)行定義，CSS對(duì)。展示的元素進(jìn)行定位，再通過JavaScript實(shí)現(xiàn)相應(yīng)的效果和交互。這些很簡(jiǎn)單，但這里面需要掌握的東西絕對(duì)不會(huì)少。在進(jìn)行開發(fā)前，需要對(duì)這些概。念弄清楚，弄明白，這樣在開發(fā)的過程中才會(huì)得心應(yīng)手。+mysql系統(tǒng)的一般原理；闡述整個(gè)個(gè)性化頁面生成系統(tǒng)的系統(tǒng)結(jié)構(gòu)及工作原理；分析并解決實(shí)現(xiàn)中的若干技術(shù)問題；建立完整的校園網(wǎng)站，進(jìn)行測(cè)

　　

【正文】 信息區(qū)。 發(fā)表各種有關(guān)教務(wù)類的信息 E 區(qū)網(wǎng)站最新動(dòng)態(tài)區(qū)域。 最近在系發(fā)生的最新鮮的新聞，消息等內(nèi)容都在這里按時(shí)間循序顯示。 F 區(qū)域 中間區(qū)域的圖片，為什么在網(wǎng)頁中間放置圖片 呢？ 是因?yàn)槲覀兛紤]到如果一個(gè)網(wǎng)站文字內(nèi)容區(qū)域特別多，總體結(jié)構(gòu)看起來很亂沒有主次層次的體現(xiàn)。讓讀者看起來無從下手的感覺。而且文字內(nèi)容太多容易引起用戶的反感。插入中間的圖片就好比中間挖了一條河一樣既能解決網(wǎng)站過于枯燥，也提升網(wǎng)站的美觀度。 D 區(qū)域 師資力量介紹，介紹老師及附上圖片。 H 區(qū)域 成果展示 J 區(qū)域 底部 logo 整個(gè)網(wǎng)站的底端。能起到調(diào)節(jié)整個(gè)網(wǎng)站的內(nèi)容平衡。讓網(wǎng)站設(shè)計(jì)的更加完美。 網(wǎng)站前臺(tái)頁面設(shè)計(jì) 數(shù)字媒體技術(shù)系網(wǎng)站主要包括：系內(nèi)概況，系內(nèi)新聞，教務(wù)信息，專業(yè)介紹，選題系統(tǒng)，教學(xué)研究，科研創(chuàng)作等 7 個(gè)子頁面。制作過程如下 ： 首頁 網(wǎng)站制作過程 ：首先利用 Photoshop 制作了網(wǎng)站的首頁效果圖，大小為900px*1004px。在制作網(wǎng)頁的過程中首先是在 Dreamweaver 中用布局畫出整個(gè)網(wǎng)站的大體布局格式 ，主要是分了三欄，各個(gè)欄目有可以分多個(gè)小欄目， 并且通過 CSS樣式來調(diào)表格以及圖片，文字的位子 。主頁包括的內(nèi)容主要有：網(wǎng)站的域名，導(dǎo)航條， LOGO，版權(quán) 。導(dǎo)航條又包含系內(nèi)概況，系內(nèi)新聞，教務(wù)信息，專業(yè)介紹，選題系統(tǒng)，教學(xué)研究，科研創(chuàng)作 。 23 系內(nèi)概況 圖 317 系內(nèi)概況 系內(nèi)概況又分為 3 個(gè) 2 級(jí)菜單，本系概況，實(shí)驗(yàn)室介紹，師資介紹等。本系概況當(dāng)中介紹數(shù)字媒體技術(shù)系的近期情況 如圖 317 所示 。并以最新動(dòng)態(tài)的形式展現(xiàn)出來。師資介紹方面介紹任課老師的基本資料，還附上照片，并把這個(gè)模塊顯示在首頁的 G 區(qū)域。實(shí)驗(yàn)室介紹當(dāng)中點(diǎn)擊實(shí)驗(yàn)室介紹會(huì)進(jìn)入實(shí)驗(yàn)室介紹頁面。具體介紹實(shí)驗(yàn)設(shè)計(jì)建設(shè)狀況等。 系內(nèi)新聞 系內(nèi)新聞分成 3 個(gè) 2 級(jí)菜單，行業(yè)資訊，院系動(dòng)態(tài)，系內(nèi)新聞。制作過程中采用的制作方法和調(diào)用的模塊內(nèi)容跟上一個(gè)差不多?？墒沁B接不同的數(shù)據(jù)表。所體現(xiàn)的內(nèi)容不同。 本章小結(jié) 本章主要介紹了數(shù)字媒體技術(shù)系網(wǎng)站的具體布局， 具體結(jié)構(gòu)。也說明了設(shè)計(jì)前端的工作流程，還講述了界面 UI 設(shè)計(jì)，交互設(shè)計(jì)中的一些理理念設(shè)計(jì)思想，并用圖片的形式展現(xiàn)了設(shè)計(jì)以后的效果圖。 第 4章 主要功能的實(shí)現(xiàn) 界面設(shè)計(jì) 設(shè)置公開地聯(lián)系方式 ；設(shè)置網(wǎng)站整體信息與用戶為一體 ；設(shè)置完善地個(gè)性化 24 地會(huì)員管理與交互系統(tǒng)。 完善的網(wǎng)站內(nèi)容，網(wǎng)站內(nèi)容下載系統(tǒng)。網(wǎng)站的整體顏色：灰白色為導(dǎo)航顏色；主體顏色：黑色色；字體：宋體；行距： 150%。 網(wǎng)站統(tǒng)一頂部為導(dǎo)航條 站標(biāo)，系內(nèi)概況，系內(nèi)新聞，教務(wù)信息，專業(yè)介紹，選題系統(tǒng)，教學(xué)研究，科研創(chuàng)作 。 網(wǎng)站上中部：網(wǎng)站圖片結(jié)合；位置導(dǎo)航。 網(wǎng)站中部：網(wǎng)站信息；站點(diǎn)數(shù)據(jù)；網(wǎng)站導(dǎo)航條；圖文信息。 網(wǎng)站底部：網(wǎng)站 /版面制作；版權(quán)信息。 具體設(shè)計(jì)文檔 內(nèi)容和功能設(shè)計(jì) 這個(gè)校園網(wǎng)站 主要 實(shí)現(xiàn)新聞，信息等功能 ，目標(biāo)用戶主要是 Inter 的 在校學(xué)生。先明確這個(gè)校園網(wǎng)站 提供的主要功能： (1) 管理員登錄系統(tǒng) ： 管理網(wǎng)站內(nèi)容，新聞動(dòng)態(tài)等 (2) 網(wǎng)上教學(xué)系統(tǒng) ： 提供給學(xué)生一些必要的電子書供下載 (3) 教學(xué)科研專區(qū) ： 提供 學(xué)院教師在個(gè)方面的成果及新聞的功能 (4) 新聞公告專區(qū) ： 提供 有關(guān)學(xué)院的公告通知，計(jì)算機(jī)方面的最新資訊 。 前臺(tái)新聞 文摘 顯示 可以根據(jù)網(wǎng)站的需要，進(jìn)行各種方式的插入，自動(dòng)更新。如顯示欄目導(dǎo)航，顯示某欄目的最新 N 條新聞等。 使用管理系統(tǒng)制作動(dòng)態(tài)網(wǎng)頁時(shí)，可在需要的地方插入相應(yīng)的代碼，即可以多種形式顯示新聞 文章的欄目或內(nèi)容。例如： 一級(jí)欄目列表，二級(jí)欄目列表，欄目導(dǎo)航列表， 欄目的最新新聞 (文章 )顯示條數(shù)，某一欄目的熱門文章可任意調(diào)整。該系統(tǒng)也可經(jīng)后繼開發(fā)，使之生成 JS 代碼，在一個(gè)主機(jī)上維護(hù)新聞文章，在其他靜態(tài)網(wǎng)頁中插入代碼后顯示相應(yīng)的新聞文章。 網(wǎng)站裝飾風(fēng)格 采用了灰白色為主導(dǎo)航顏色，首頁中運(yùn)用最新更新圖片，以 及文字交錯(cuò)排版，使整個(gè)網(wǎng)站看上去符合跳動(dòng)的風(fēng)格。 25 網(wǎng)站的鏈接結(jié)構(gòu) 校園網(wǎng)站 的主要鏈接關(guān)系如下： 學(xué)院首頁，系內(nèi)概 況，系內(nèi)新聞，教務(wù)信息，專業(yè)介紹，選題系統(tǒng)，教學(xué)研究，科研創(chuàng)作， 管理員登陸頁面 等。 可視化設(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)。 可視化設(shè)計(jì)最重要的是確定網(wǎng)站的頁面布局。然后設(shè)計(jì)網(wǎng)頁的表現(xiàn)框架，建立頁面模型。 具體實(shí)現(xiàn)技術(shù) CSS 在 數(shù)字媒體技術(shù)系 網(wǎng)站 中的應(yīng)用實(shí)例 在 數(shù)字媒體技術(shù)系 網(wǎng)站中的頁面，增加了以下的定義，使頁面有特殊的顯示效果。 數(shù)字媒體技術(shù)系 網(wǎng)站中 CSS 樣式表使用 的部分代碼 ： top { width: 100%。 height: 103px。 backgroundcolor: green。 backgroundimage: url(Image/)。 backgroundrepeat: norepeat。 } 在 上面的 樣式表中定義了網(wǎng)頁 頭部的背景圖片和顏色 ，以避免因網(wǎng)頁瀏覽器的設(shè)置改變 而引起的網(wǎng)頁 頭部的背景圖片和顏色 變化，影響頁面瀏覽者的信息瀏覽； top 這部分是 對(duì)網(wǎng)頁背景顏色和背景圖片的設(shè)置 。 26 應(yīng)用 JavaScript 設(shè)計(jì)網(wǎng)頁 JavaScript 是一種基于對(duì)象 (Object)和事件驅(qū)動(dòng) (Event Driven)并具有安全性能的腳本語言。使用它的目的是與 HTML 超文本標(biāo)記語言 ， Java 腳本語言（ Java 小程序）一起實(shí)現(xiàn)在一個(gè) Web 頁面中鏈接多個(gè)對(duì)象，與 Web 客戶交互作用，從而可以開發(fā)客戶端的應(yīng)用程序等 。它是通過嵌入或調(diào)入在標(biāo)準(zhǔn)的 HTML 語言中實(shí)現(xiàn)的。它的出現(xiàn)彌補(bǔ)了 HTML 語 言的缺陷 [17]。 JavaScript 的出現(xiàn)使得信息 和用戶之間不僅只是一種顯示和瀏覽的關(guān)系，而是實(shí)現(xiàn)了一種實(shí)時(shí)的，動(dòng)態(tài)的，可交式的表達(dá)能力 [18]。 從而基于 CGI 靜態(tài)的 HTML頁面將被可提供動(dòng)態(tài)實(shí)時(shí)信息， 并對(duì)客戶操作進(jìn)行反應(yīng)的 Web 頁面的取代。JavaScript 腳本正是滿足這種需求而產(chǎn)生的語言。它深受廣泛用戶的喜愛。它是眾多腳本語言中較為優(yōu)秀的一種 ，與 WWW 的結(jié)合有效地實(shí)現(xiàn)了網(wǎng)絡(luò)計(jì)算和網(wǎng)絡(luò)計(jì)算機(jī)的藍(lán)圖。 在網(wǎng)站制作過程中使用了下面一段 JavaScript 照片切換特效代碼片段： // cancel close timer mcancelclosetime()。 // close old layer if(ddmenuitem) = 39。hidden39。 // get new layer and show it ddmenuitem = (id)。 = 39。visible39。 } // close showed layer function mclose() { if(ddmenuitem) = 39。hidden39。 } // go close timer function mclosetime() 27 { closetimer = (mclose， timeout)。 } // cancel close timer function mcancelclosetime() { if(closetimer) { (closetimer)。 closetimer = null。 } } // close layer when clickout = mclose。 // $(function() { $(webwidget_slideshow_html5_simple).webwidget_slideshow_html5_simple (slideshow_transition_effect:39。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。, slideshow_time_interval: 39。202039。, slideshow_window_width: 39。35039。, slideshow_window_height: 39。370s39。, slideshow_background_color: 39。FFF39。, slideshow_border: 39。999 solid 2px39。, text_effect: 39。text_fade39。 })。 })。 28 /script 此代碼主要是實(shí)現(xiàn)前段圖片動(dòng)態(tài)特效的 JS 代碼。照片動(dòng)態(tài)切換效果，可以直接涉及到網(wǎng)站是否有活力，也是整個(gè)網(wǎng)站集聚吸引力的地方，所以在使用 JS 調(diào)用的時(shí)候一般不在同一時(shí)間使用多次，以減輕服務(wù)器和數(shù)據(jù)庫讀寫的負(fù)擔(dān)。 本章小結(jié) 本章具體介紹了網(wǎng)站前端的實(shí)現(xiàn)，在動(dòng)畫效果的實(shí)現(xiàn)中給出了具體的代碼。說明了在頁面設(shè)計(jì)過程的具體實(shí)現(xiàn)，說明了網(wǎng)站修飾風(fēng)格，可視化的重要概念。 也是整個(gè)網(wǎng)站集聚吸引力的地方，所以在使用 JS 調(diào)用的時(shí)候一般不在同一時(shí)間使用多次，以提高服務(wù)器和數(shù)據(jù)庫讀寫的效率。 29 第 5章 總結(jié) 總結(jié) 創(chuàng)建的數(shù)字媒體技術(shù)系的專業(yè)網(wǎng)站，網(wǎng)站前端設(shè)計(jì)最基本的三個(gè)技能： HTML，CSS， JavaScript， PS 矢量圖像編輯技術(shù)。前端的開發(fā)中，在頁面的布局時(shí)， HTML將元素進(jìn)行定義， CSS 對(duì)展示的元素進(jìn)行定位，再通 過 JavaScript 實(shí)現(xiàn)相應(yīng)的效果和交互 [19]。 本網(wǎng)站的建立的作用具有超時(shí)空特性，不僅能讓本地區(qū)的人們了解學(xué)院，更可讓世界了解本專業(yè)。網(wǎng)站巨大的教育資源，網(wǎng)站是實(shí)現(xiàn)教育資源分配的橋梁，它使每一位教師和學(xué)生都能均等的得到培訓(xùn)和受教育的機(jī)會(huì)，能極大的提高教學(xué)效率。 JSP 雖然提供了功能強(qiáng)大的 Web 應(yīng)用程序開發(fā)環(huán)境 ,但和其它技術(shù)一樣 ,它也存在著某些缺點(diǎn)。但 JSP 畢竟是軟件霸主微軟精心設(shè)計(jì)的一個(gè)寵兒 ,人們不得不慢慢向它靠攏，現(xiàn)在越來越多的 Web 服務(wù)器大多數(shù)都用 JSP[20]。以信息網(wǎng)站為核心的 Web信息系統(tǒng)建設(shè) 方興未艾，運(yùn)用新技術(shù)進(jìn)行創(chuàng)新的應(yīng)用開發(fā)，提高網(wǎng)絡(luò)系統(tǒng)應(yīng)用成效將是一個(gè)不竭的課題。 本文中介紹了 JSP， JS,CSS,JQuery 以及前端布局的制作做法，詳細(xì)的說明了數(shù)字媒體技術(shù)系網(wǎng)站前端的全部制作流程，以及網(wǎng)站中的主要功能。 網(wǎng)站中還存在一些不足之處，如網(wǎng)站的留言系統(tǒng)沒建立等等。這些問題和功能有待于進(jìn)一步學(xué)習(xí)和添加。 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。Reilly Media, Inc. 2020 [3] 李寶敏 . 動(dòng)態(tài)網(wǎng)站設(shè)計(jì)與開發(fā)應(yīng)用教程 [M] . 清華大學(xué)出版社 . ,28(4): 91~94 [4] 孫更新 , 賓晟 , 宮生文 . Java 程序開發(fā)大全 [M] 基于 MyEclipse 平臺(tái)主流框架開發(fā) . 中國鐵道出版社 [5] 黃軍寶 . 網(wǎng)站設(shè)計(jì)透過 Dreamwear CS3 學(xué)習(xí) HTMLDIVCSS[J] . 科學(xué)出版社 . 2020, 35(9): 81~97 [6] 賈素玲 ,王強(qiáng) . Javasqript 程序設(shè)計(jì) [M]. 清華大學(xué)出版社 .2020, 15(4): 91~94 [7] 費(fèi)東東 . 挑戰(zhàn) Java scriptamp。Ajax 應(yīng)用開發(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 Desi