數(shù)字多媒體與網絡工程-畢業(yè)論文

1、<p><b>　　目 錄</b></p><p>　　引言——————————————————-—-—————-—3</p><p>　　關鍵字—————————————————————-————３</p><p>　　一、網站目的———————————————————————４</p><p>　　二

2、、網站功能———————————————————————４</p><p>　　三、網站結構描述—————————————————————5</p><p>　　四、網站欄目介紹—————————————————————6</p><p>　　五、網站形象設計—————————————————————9</p><p>　　六、網站版面策

3、劃—————————————————————10</p><p>　　七、網站布局技術—————————————————————10</p><p>　　八、網站中一些特效代碼說明————————————————12</p><p>　　九、網站制作使用工具介紹—————————————————12</p><p>　　十、設計小結—————

4、——————————————————13</p><p><b>　　附 錄</b></p><p>　　十一、參考文獻——————————————————————13</p><p>　　十二、謝辭————————————————————————13</p><p>　　引言

5、 </p><p>　　互聯(lián)網對當今世界的影響毋庸質疑。隨著網絡的高速發(fā)展和“所見即所得”網頁編輯工具的出現(xiàn)，網頁設計已發(fā)展為一門新興的學科。網站設計不單純是計算機技術的運用，也是平面設計在網絡世界的延伸。</p><p>　　學校網站建設是學校教育信息化建設的重要方面，是適應現(xiàn)代教育技術和信息技術的發(fā)展，加大學校對外交流與

6、宣傳力度，提高教學、科研、管理效率的重要途徑；學校網站是學校對外宣傳的窗口，也是展示全校師生才能，加強對校外聯(lián)系，互相學習，共同發(fā)展的陣地，學校網站建設的目的是促進師生與學校共同發(fā)展，因此，需要本系師生共同參與，同心合力把本系網站建設好.</p><p>　　試論本系網站在本系管理中的作用</p><p>　　一．利用本系網站促進本系管理</p><p>　　我校數(shù)

7、字媒體與網絡工程系是經國家教育部批準設立“數(shù)字媒體藝術”專業(yè)的七個高校院系之一，也是全國首家被國家高等教育自學考試指導委員會批準開考“數(shù)字媒體藝術”專業(yè)的主考單位。現(xiàn)有“數(shù)字媒體藝術”本科專業(yè)，“數(shù)字媒體藝術”專升本專業(yè)、“計算機圖像圖形技術”專科專業(yè)、“數(shù)字媒體藝術”自考?？茖I(yè)等,現(xiàn)有在校生500多名。2005年數(shù)字媒體與網絡工程系學生新建了網站（http://www.fdszmt.com）。 網站的建立標志著本系建設上了一個新臺階

8、，本系新聞、招生信息、學科建設、課程設置、作品展示、關于數(shù)媒、技術交流、友情鏈接、設計資訊、數(shù)媒論壇……十多個欄目能做到每日更新，時時更新，交互性更強了。利用網站我們可以：通知、信息交流、教育交流、參與論壇、網絡留言等，使本系管理透明度更高，更高效快捷，系還可發(fā)布對教師的祝賀，對教師的每日提醒，對教師意見的第一時間反饋，人性化、民主化的管理方式在網絡的參與下如虎添翼了……</p><p>　　二．利用本系網站促進

9、教師專業(yè)成長</p><p>　　“國家的希望在教育，教育的希望在教師”，教師在教育教學改革中的關鍵作用得到了人們更廣泛的認同。教師專業(yè)化、教師的專業(yè)發(fā)展，無論在理論上還是實踐上都成為世界教師教育關注的焦點。 </p><p>　　我們認為，教師專業(yè)發(fā)展需要一種氛圍。而網絡交流給我們提供了很好的空間。校園網絡開通以來，對于教師專業(yè)成長的影響是巨大的。上網與反思，已經逐步成為教師們的至愛。

10、他們對教育的認識，就在這樣的追尋中有了深刻的變化。因為教師的成長除了獨立奮斗之外，還需要合作，還需要與外界廣泛的交流，在碰撞與融合中發(fā)展，在寫作或參與各種討論的時候，激起了強烈的專業(yè)意識，從觀念到思想，從精神到行動，都進入了一種專業(yè)的狀態(tài)。</p><p>　　利用Internet克服了傳統(tǒng)教育的局限性，它將形成一種主動的、協(xié)作的、開放的學習模式，并充分考慮雙向學習環(huán)境，采取有提問、有反饋、有交流的方法，既保留了

11、傳統(tǒng)遠教中的生動形象性和不受空間限制等優(yōu)點，又有相互訪問，雙向交流，學習資源、學習內容廣泛等優(yōu)良特性。</p><p>　　實踐證明，計算機，創(chuàng)造了一個美麗的神話；多媒體，展示了一個多彩的世界；互聯(lián)網，連接了一份夢想與光榮；如果我們“網住”了今天；那么明天我們就能做得更好！</p><p>　　關鍵詞：福州大學、數(shù)字媒體、老師、學生、網頁</p><p><b

12、>　　正文</b></p><p><b>　　網站目的</b></p><p><b>　　1.1學生方面：</b></p><p>　　加強學生之間課余學習交流、溝通感情、促進學生各方面知識全面發(fā)展；</p><p><b>　　1.2老師方面：</b>&

13、lt;/p><p>　　方便老師教學，達到課堂與網絡教學相結合；</p><p><b>　　1.3公眾方面：</b></p><p>　　樹立一個良好形象，增加一個公眾了解數(shù)字媒體與網絡工程系的窗口；</p><p><b>　　1.4學校方面：</b></p><p>　　提

14、高數(shù)字媒體與網絡工程系知名度、及學校內各部門效率；</p><p><b>　　網站功能</b></p><p><b>　　2.1師生：</b></p><p>　　為師生互動、學生之間交流提供一個平臺、方便“教”與“學”；</p><p><b>　　2.2公眾：</b>&

15、lt;/p><p>　　了解數(shù)字媒體各方面信息；</p><p><b>　　2.3學校：</b></p><p>　　在對外宣傳上發(fā)布更新信息、對內管理上加強各部門協(xié)調溝通；</p><p><b>　　三、網站結構描述</b></p><p><b>　　四、網站欄

16、目介紹</b></p><p><b>　　4.0首頁</b></p><p>　　作用：提高學校各部門效率，使公眾了解學校最新動態(tài)，促進學校發(fā)展；</p><p>　　功能：發(fā)布本系最新新聞；</p><p>　　包含子欄目：關于數(shù)媒、學科建設、教學教務、作品展示、招生信息、會員登錄、站內搜索、課程設置、友

17、情鏈接、聯(lián)系我們、留言板等功能模塊和軟件系統(tǒng)；（“作品展示”發(fā)布學生作品；“關于數(shù)媒”介紹數(shù)字媒體專業(yè)的信息；“學科建設”介紹各學科的信息；“招生信息”發(fā)布招生的最新信息；“友情鏈接”鏈接一些教育和設計方面網站；）</p><p><b>　　4.1關于數(shù)媒</b></p><p>　　作用：使公眾了解學本系概況，達到宣傳數(shù)字媒體與網絡工程系的目的；</p>

18、;<p>　　功能：發(fā)布本校信息及使用的教學設備；</p><p>　　包含子欄目：本系數(shù)媒、數(shù)字設備（“本系數(shù)媒” 介紹數(shù)字媒體專業(yè)相關的的信息；“數(shù)字設備”介紹本系所擁有的教學設備和實驗室等；）</p><p><b>　　4.2學科建設</b></p><p>　　作用：使公眾了解本系專業(yè)設置，方便師生“教”與“學”；<

19、;/p><p>　　功能：發(fā)布系、專業(yè)信息，提供在線教學；</p><p>　　包含子欄目：數(shù)字媒體藝術本科方向、數(shù)字媒體藝術專升本方向、圖形圖象制作專科方向、數(shù)字媒體藝術?？品较颍唬ū究瓢ǜ鞅究葡祫e及系內各專業(yè)詳細介紹；?？瓢ǜ鲗？葡祫e及系內各專業(yè)詳細介紹；）</p><p><b>　　4.3教學教務</b></p><

20、p>　　作用：了解數(shù)字媒體與網絡工程系領導以及教師的基本信息，如教師專業(yè)，成績、特長、4.4招生信息</p><p>　　作用： 給群眾提供招生介紹，并介紹數(shù)字媒體與網絡工程系的主辦專業(yè)和推進的方向；</p><p>　　功能：發(fā)布招生相關信息、本系專業(yè)設置；</p><p><b>　　職責范圍等；</b></p><

21、;p>　　功能：數(shù)字媒體與網絡工程系領導及教師信息；</p><p><b>　　4.5作品展示</b></p><p>　　作用： 使學生在技術上進一步提高；</p><p>　　功能：發(fā)布最新作品展示；</p><p>　　包含的子欄目：作品展示、畢業(yè)設計展（作品可放大觀看。）</p><p

22、><b>　　4.6聯(lián)系我們</b></p><p><b>　　提供本系的聯(lián)系方式</b></p><p><b>　　4.7數(shù)媒論壇</b></p><p>　　作用：可以讓群眾提問問題，同時為了讓這網站更加完善，讓更多的人來參與建設； </p><p>　　功能：可

23、以知道群眾的意見；</p><p><b>　　網站形象設計</b></p><p>　　5.1標志：白色字咖啡色描邊組成的“數(shù)字媒體與網絡工程系”為主體，與banner背景統(tǒng)一，（Banner背景以數(shù)字01還有手拿鼠標姿勢詮釋了數(shù)字媒體這一專業(yè)，并且有一道似曙光展現(xiàn)現(xiàn)在年輕人積極向上的精神），而子頁的“數(shù)字媒體與網絡工程系”則是藍色字投影，配上藍色不會顯得單調，視覺

24、上清晰，明了</p><p>　　5.2主色調與色彩：以“橙色”為主色調。橙色代表輝煌、激情、收獲，向上，而我們現(xiàn)在的大學生正需要這種激情、積極向上的精神，因此選用“橙色”為主色調；</p><p>　　5.3標準字體：主頁導航欄背景顏色為橙色，字體為“黑體”白色12px；子頁導航欄背景為灰色，字體為“宋體”白色12px，正文字體為“宋體”12 px，顏色為#2F3E89；</p&g

25、t;<p>　　5.4裝飾圖案：網站采用部分學校風景和設計圖片為裝飾圖案；</p><p>　　5.5交互方式：靜態(tài)+ASP網頁，方便交換；</p><p><b>　　六、網站版面策劃：</b></p><p><b>　　6.1首頁：</b></p><p>　　首頁使用的是寬屏布

26、局，打破了原來版本的國字型結構布局，看起來大氣，成熟。最上面是網站的標題+BANNER+主菜單,下半部分分為2個區(qū)域,下半部分的上半部分是主題內容,最下面是網站的版權聲明。這種布局的優(yōu)點是能夠充分利用版面,信息量大;缺點是頁面擁擠，文字多,不夠靈活。</p><p><b>　　6.2子頁：</b></p><p>　　子頁的版面設計與主頁布局不同，多半是以類似國字型

27、布局，又與國字型布局有些差異，因為有那個FLASH按鈕，使得頁面看起來不會死板。主體內容使用標題正文型：這種類型即最上面是標題或類似的一些東西，下面是正文；本站子頁大部分是這個結構；</p><p><b>　　6.3頁頭：</b></p><p>　　頁頭又可稱之為頁眉，頁眉的作用是定義頁面的主題。比如一個站點的名字多數(shù)都顯示在頁眉里。這樣，訪問者能很快知道這個站點

28、是什么內容。頁頭是整個頁面設計的關鍵，它將牽涉到下面的更多設計和整個頁面的協(xié)調性。頁頭常放置站點名字的圖片和公司標志以及旗幟廣告。</p><p>　　本站頁頭先是一個土黃色與橙色矩形組成，下方是Digital Media&Network Engineering，BANNER即是以980X151以數(shù)字01還有手拿鼠標姿勢詮釋了數(shù)字媒體這一專業(yè)，并且有一道似曙光展現(xiàn)現(xiàn)在年輕人積極向上的精神的學校風景圖為底片

29、，白色字咖啡色描邊組成的“數(shù)字媒體與網絡工程系”上面帶有透明FLASH一起構成。（“Digital Media&Network Engineering”為Microsoft Sans serif 14PX,灰色；）</p><p><b>　　6.4頁腳：</b></p><p>　　頁腳和頁頭相呼應。頁頭是放置站點主題的地方，而頁腳是放置制作者或者公司信息

30、的地方。你能看到，許多制作信息都是放置在頁腳的。</p><p><b>　　本站頁腳如下：</b></p><p>　　Copyright © 2007 by 數(shù)字媒體與網絡工程系 Power by 05 MultimediaCopyright(C)2002-2003  All Rights Reserved Bestviewed by 800

31、×600 IE5.5+ （頁腳字體為宋體，顏色為黑色）</p><p><b>　　七、網站布局技術</b></p><p>　　本站主要使用表格布局布局。</p><p><b>　　7.1 層疊樣式表</b></p><p>　　由于層疊樣式表(CSS)用得不熟，因此做這個網站過程中還

32、是沒用到多少。不過倒是對其有了一定的了解。如果使用了CSS,那么可以在設置文本之前,就指定整個文本的屬性,比如顏色、字體大小等等,這樣,我們就能獲得統(tǒng)一的文本外觀了。</p><p><b>　　7.2 表格布局</b></p><p>　　在制作這個網站的過程中使用得最多的就是表格布局了。表格布局好像已經成為一個標準，隨便瀏覽一個站點，它們一定是用表格布局的。表格布

33、局的優(yōu)勢在于它能對不同對象加以處理，而又不用擔心不同對象之間的影響。而且表格在定位圖片和文本上比起用CSS更加方便。表格布局唯一的缺點是，當我們用了過多表格時，頁面下載速度受到影響。</p><p><b>　　7.3 框架布局</b></p><p>　　一開始看到有些欄目的內容可以用框架布局，但還是因為技術有限，處理起來效果并不理想，因此就取消。但是有一些內容比較

34、長的就用代碼添加框架，有滾動條的。不知道什么原故，框架結構的頁面開始被許多人不喜歡，可能是因為它的兼容性。但從布局上考慮，框架結構不失為一個好的布局方法。它如同表格布局一樣，把不同對象放置到不同頁面加以處理，因為框架可以取消邊框，所以一般來說不影響整體美觀。</p><p>　　7.4選擇表格布局原因</p><p>　　本站主要使用表格布局布局。優(yōu)勢在于它可以對不同對象進行處理，而不必擔

35、心不同對象之間的互相影響，且在定位圖片和文本上比用CSS更方便，比框架布局更美觀，使用起來也會更順手。</p><p>　　八、網站中使用的一些特效代碼說明</p><p><b>　　8.1框架添加方法</b></p><p>　　<iframe width="621px" height="538px&qu

36、ot; marginwidth="0" scrolling="auto" marginheight="0" align="right" name="main" frameborder="0" src="1.htm"></p><p>　?。ㄆ渲?21為框架的寬度，538

37、為框架的高度，1.htm為框架內顯示內容的文件名）</p><p>　　8.2透明FLASH的應用</p><p>　　主要應用于網頁頂部，代碼如下：</p><p>　　classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macr

38、omedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="773" height="112"></p><p>　　<param name="movie" value="images/banner%5B1%5D.swf">

39、;</p><p>　　<param name="quality" value="high"></p><p>　　<param name="wmode" value="transparent"></p><p>　　<embed src="ima

40、ges/banner%5B1%5D.swf" </p><p>　　quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="773" height=

41、"112"></embed></p><p>　?。ㄆ渲校骸?73”為FLASH的寬度，“112”為FLASH的高度，“images/banner%5B1%5D.swf”為FLASH的存在路徑，“<param name="wmode" value="transparent">”是對FLASH背景進行透明化。）</p&g

42、t;<p>　　8.3字體向上滾動效果</p><p>　　<table width="96%" border="0" cellspacing="0" cellpadding="0"></p><p><b>　　<tr></b></p>

43、<p>　　<td height="70"></p><p>　　<marquee behavior="scroll" width="100%" height="80" direction="up" onMouseOut="this.start();"onMouse

44、Over="this.stop();"scrollamount="1" scrolldelay="60"></p><p>　　<p align="center"><span class="white gray6 gray3 gray3 STYLE2"></p><

45、p>　　<a href="http://www.fzu.edu.cn" target="_blank">“實干闖未來”廣告創(chuàng)意設計大賽揭曉</p><p><b>　　</a><br></b></p><p>　　</span></p></p>&l

46、t;p>　　</marquee></td></p><p><b>　　</tr></b></p><p><b>　　</table></b></p><p>　　(MARQUEE文字移動的代碼, direction=up表示滾動的方向是上滾；onMouseOut=&

47、quot;this.start();"表示鼠標移開開始滾動；onMouseOver="this.stop()“表示鼠標移開停止?jié)L動）</p><p>　　九、網站制作使用工具介紹</p><p>　　9.1 Dreamweaver MX 2004是Macromedia公司最新推出的一款可視化的專業(yè)級HTML（超文本標識語言）編輯器。它是一款構建專業(yè)Web站點和應用程序的

48、最佳選擇，它組合了功能強大的布局工具、應用程序開發(fā)工具和代碼編輯支持。Dreamweaver的設計和整合功能是以CSS為基礎的，強大而穩(wěn)定，可幫助設計人員和開發(fā)人員輕松創(chuàng)建和管理任何站點.....。</p><p>　　9.2 Photoshop是Adobe公司推出的著名平面圖像設計和圖像處理軟件，它具有強大的圖像處理功能和操作易用性，受到廣大平面圖形設計人員及專業(yè)廣告設計師的青睞。它涉及圖像合成、色彩校正、圖層

49、調板、通道使用、動作調板、路徑工具、濾鏡等圖像處理功能?？芍谱魅绨粹o制作、文字特效、材質紋理、三維物體、影像特效及廣告創(chuàng)意設計等多種用途。是一門值得深入學習的一種好軟件。</p><p>　　9.3 Flash是Macromedia公司的一個的網頁交互動畫制作工具。用flash制作出來的動化是矢量的，不管怎樣放大、縮小，它還是清晰可見。 用flash制作的文件很小，這樣便于在互聯(lián)網上傳輸，而且它采用了數(shù)據(jù)流技術，

50、只要下載一部分，就能欣賞動畫，而且能一邊播放一邊傳輸數(shù)據(jù)。 交互性更是flash動畫的迷人之處，可以通過點擊按鈕、選擇菜單來控制動畫的播放。正是有了這些優(yōu)點，才使flash日益成為網絡多媒體的主流。</p><p><b>　　十、設計小結</b></p><p>　　畢業(yè)設計是大學生涯中最重要的一關，在大學中所學到的知識基本上會在這里體現(xiàn)出來。終于做完了畢業(yè)設計，感

51、觸頗深，這其中的艱辛與歡樂只有自己最清楚。</p><p><b>　　10．1收獲</b></p><p>　　這次畢業(yè)設計的制作的過程中，無論是技術上的還是非技術上的，都是收獲頗多。首先，在做畢業(yè)設計之前對Dreamweaver還算是比較生疏的，因為之前上的課程不多，接觸的也不多。做了這個畢業(yè)設計過程中，遇到不懂的問題就上網查資料、到圖書館借書，或者向同學、老師討

52、教。技術上的東西學的還是挺多的。其次，由于我是和同學合作去制作這個網站的，因此在這過程中會想法思路不一樣，會產生一些分歧，所以我們倆就會把效果做出來，演示給同學看，讓她們提出看法，最后再決定用誰的方案。因此，在這過程中我領悟到團隊合作的重要性。</p><p><b>　　10．2不足</b></p><p>　　把做完的網頁從頭到尾瀏覽了幾遍，發(fā)現(xiàn)其中還存在很多的問

53、題。后臺程序很多都不懂，一開始很努力的研究，查找一大堆的資料，去做會員登錄系統(tǒng)。該設置的設置完了，Access數(shù)據(jù)庫也建好了，就是在鏈接過程中不知道哪里出了問題，一直沒做成功。到最后，所剩時間不多，只好套用了一個別人的模板。據(jù)說網站搜索還要做數(shù)據(jù)庫什么的，這個不了解，所以只好就做一個樣放在那，就是沒實現(xiàn)那個功能。還有就是留言板，到最后也是不夠時間不得已只好也套用了別人的模板。在子頁面中也有些瑕疵，有些線段脫節(jié)了一點點，看起來不夠美觀，這

54、個也弄了很久還是沒解決?？傊?，就是還有一些技術上的東西不夠到位。以后如果有時間肯定要把這些不會的都學好，希望以后自己可以做一個比較完整又美觀的網站。</p><p><b>　　附錄</b></p><p><b>　　十一、參考文獻</b></p><p>　　張貴明：《網頁藝術設計與應用》，高等教育出版社；2004-5

55、</p><p>　　解勇編：《網頁設計視覺形態(tài)書》，遼寧美術出版社；</p><p>　　李冰；李曉飛；潘海波《超炫網頁設計》，中國宇航出版社；北京希望電子出版社；2003-2</p><p><b>　　十二、謝辭</b></p><p>　　感謝xx老師和肖紅老師對我們的指導，他們嚴謹細致、一絲不茍的作風一直是我工