數(shù)字多媒體與網(wǎng)絡(luò)工程-畢業(yè)論文.doc

更多論文/fanteral目 錄引言-3關(guān)鍵字-一、網(wǎng)站目的二、網(wǎng)站功能三、網(wǎng)站結(jié)構(gòu)描述5四、網(wǎng)站欄目介紹6五、網(wǎng)站形象設(shè)計(jì)9六、網(wǎng)站版面策劃10七、網(wǎng)站布局技術(shù)10八、網(wǎng)站中一些特效代碼說(shuō)明12九、網(wǎng)站制作使用工具介紹12十、設(shè)計(jì)小結(jié)13附 錄十一、參考文獻(xiàn)13十二、謝辭13引言 互聯(lián)網(wǎng)對(duì)當(dāng)今世界的影響毋庸質(zhì)疑。隨著網(wǎng)絡(luò)的高速發(fā)展和“所見即所得”網(wǎng)頁(yè)編輯工具的出現(xiàn)，網(wǎng)頁(yè)設(shè)計(jì)已發(fā)展為一門新興的學(xué)科。網(wǎng)站設(shè)計(jì)不單純是計(jì)算機(jī)技術(shù)的運(yùn)用，也是平面設(shè)計(jì)在網(wǎng)絡(luò)世界的延伸。學(xué)校網(wǎng)站建設(shè)是學(xué)校教育信息化建設(shè)的重要方面，是適應(yīng)現(xiàn)代教育技術(shù)和信息技術(shù)的發(fā)展，加大學(xué)校對(duì)外交流與宣傳力度，提高教學(xué)、科研、管理效率的重要途徑；學(xué)校網(wǎng)站是學(xué)校對(duì)外宣傳的窗口，也是展示全校師生才能，加強(qiáng)對(duì)校外聯(lián)系，互相學(xué)習(xí)，共同發(fā)展的陣地，學(xué)校網(wǎng)站建設(shè)的目的是促進(jìn)師生與學(xué)校共同發(fā)展，因此，需要本系師生共同參與，同心合力把本系網(wǎng)站建設(shè)好.試論本系網(wǎng)站在本系管理中的作用一利用本系網(wǎng)站促進(jìn)本系管理我校數(shù)字媒體與網(wǎng)絡(luò)工程系是經(jīng)國(guó)家教育部批準(zhǔn)設(shè)立“數(shù)字媒體藝術(shù)”專業(yè)的七個(gè)高校院系之一，也是全國(guó)首家被國(guó)家高等教育自學(xué)考試指導(dǎo)委員會(huì)批準(zhǔn)開考“數(shù)字媒體藝術(shù)”專業(yè)的主考單位。現(xiàn)有“數(shù)字媒體藝術(shù)”本科專業(yè)，“數(shù)字媒體藝術(shù)”專升本專業(yè)、“計(jì)算機(jī)圖像圖形技術(shù)”?？茖I(yè)、“數(shù)字媒體藝術(shù)”自考專科專業(yè)等,現(xiàn)有在校生500多名。2005年數(shù)字媒體與網(wǎng)絡(luò)工程系學(xué)生新建了網(wǎng)站（）。 網(wǎng)站的建立標(biāo)志著本系建設(shè)上了一個(gè)新臺(tái)階，本系新聞、招生信息、學(xué)科建設(shè)、課程設(shè)置、作品展示、關(guān)于數(shù)媒、技術(shù)交流、友情鏈接、設(shè)計(jì)資訊、數(shù)媒論壇十多個(gè)欄目能做到每日更新，時(shí)時(shí)更新，交互性更強(qiáng)了。利用網(wǎng)站我們可以：通知、信息交流、教育交流、參與論壇、網(wǎng)絡(luò)留言等，使本系管理透明度更高，更高效快捷，系還可發(fā)布對(duì)教師的祝賀，對(duì)教師的每日提醒，對(duì)教師意見的第一時(shí)間反饋，人性化、民主化的管理方式在網(wǎng)絡(luò)的參與下如虎添翼了二利用本系網(wǎng)站促進(jìn)教師專業(yè)成長(zhǎng) “國(guó)家的希望在教育，教育的希望在教師”，教師在教育教學(xué)改革中的關(guān)鍵作用得到了人們更廣泛的認(rèn)同。教師專業(yè)化、教師的專業(yè)發(fā)展，無(wú)論在理論上還是實(shí)踐上都成為世界教師教育關(guān)注的焦點(diǎn)。 我們認(rèn)為，教師專業(yè)發(fā)展需要一種氛圍。而網(wǎng)絡(luò)交流給我們提供了很好的空間。校園網(wǎng)絡(luò)開通以來(lái)，對(duì)于教師專業(yè)成長(zhǎng)的影響是巨大的。上網(wǎng)與反思，已經(jīng)逐步成為教師們的至愛(ài)。他們對(duì)教育的認(rèn)識(shí)，就在這樣的追尋中有了深刻的變化。因?yàn)榻處煹某砷L(zhǎng)除了獨(dú)立奮斗之外，還需要合作，還需要與外界廣泛的交流，在碰撞與融合中發(fā)展，在寫作或參與各種討論的時(shí)候，激起了強(qiáng)烈的專業(yè)意識(shí)，從觀念到思想，從精神到行動(dòng)，都進(jìn)入了一種專業(yè)的狀態(tài)。利用internet克服了傳統(tǒng)教育的局限性，它將形成一種主動(dòng)的、協(xié)作的、開放的學(xué)習(xí)模式，并充分考慮雙向?qū)W習(xí)環(huán)境，采取有提問(wèn)、有反饋、有交流的方法，既保留了傳統(tǒng)遠(yuǎn)教中的生動(dòng)形象性和不受空間限制等優(yōu)點(diǎn)，又有相互訪問(wèn)，雙向交流，學(xué)習(xí)資源、學(xué)習(xí)內(nèi)容廣泛等優(yōu)良特性。實(shí)踐證明，計(jì)算機(jī)，創(chuàng)造了一個(gè)美麗的神話；多媒體，展示了一個(gè)多彩的世界；互聯(lián)網(wǎng)，連接了一份夢(mèng)想與光榮；如果我們“網(wǎng)住”了今天；那么明天我們就能做得更好！關(guān)鍵詞：福州大學(xué)、數(shù)字媒體、老師、學(xué)生、網(wǎng)頁(yè)正文一、 網(wǎng)站目的1.1學(xué)生方面：加強(qiáng)學(xué)生之間課余學(xué)習(xí)交流、溝通感情、促進(jìn)學(xué)生各方面知識(shí)全面發(fā)展；1.2老師方面：方便老師教學(xué)，達(dá)到課堂與網(wǎng)絡(luò)教學(xué)相結(jié)合；1.3公眾方面：樹立一個(gè)良好形象，增加一個(gè)公眾了解數(shù)字媒體與網(wǎng)絡(luò)工程系的窗口；1.4學(xué)校方面：提高數(shù)字媒體與網(wǎng)絡(luò)工程系知名度、及學(xué)校內(nèi)各部門效率；二、 網(wǎng)站功能2.1師生：為師生互動(dòng)、學(xué)生之間交流提供一個(gè)平臺(tái)、方便“教”與“學(xué)”；2.2公眾：了解數(shù)字媒體各方面信息；2.3學(xué)校：在對(duì)外宣傳上發(fā)布更新信息、對(duì)內(nèi)管理上加強(qiáng)各部門協(xié)調(diào)溝通；三、網(wǎng)站結(jié)構(gòu)描述數(shù)字媒體與網(wǎng)絡(luò)工程系首 頁(yè)關(guān)于數(shù)媒學(xué)科建設(shè)教學(xué)教務(wù)作品展示聯(lián)系我們技術(shù)交流數(shù)字設(shè)備本系數(shù)媒數(shù)媒論壇作品展示學(xué)科建設(shè)關(guān)于數(shù)媒本系新聞?dòng)亚殒溄訑?shù)字媒體藝術(shù)本科方向數(shù)字媒體藝術(shù)本升本方向數(shù)字媒體藝術(shù)專科方向圖形圖象制作?？品较蜃髌氛故井厴I(yè)設(shè)計(jì)展四、網(wǎng)站欄目介紹4.0首頁(yè)作用：提高學(xué)校各部門效率，使公眾了解學(xué)校最新動(dòng)態(tài)，促進(jìn)學(xué)校發(fā)展；功能：發(fā)布本系最新新聞；包含子欄目：關(guān)于數(shù)媒、學(xué)科建設(shè)、教學(xué)教務(wù)、作品展示、招生信息、會(huì)員登錄、站內(nèi)搜索、課程設(shè)置、友情鏈接、聯(lián)系我們、留言板等功能模塊和軟件系統(tǒng)；（“作品展示”發(fā)布學(xué)生作品；“關(guān)于數(shù)媒”介紹數(shù)字媒體專業(yè)的信息；“學(xué)科建設(shè)”介紹各學(xué)科的信息；“招生信息”發(fā)布招生的最新信息；“友情鏈接”鏈接一些教育和設(shè)計(jì)方面網(wǎng)站；）4.1關(guān)于數(shù)媒作用：使公眾了解學(xué)本系概況，達(dá)到宣傳數(shù)字媒體與網(wǎng)絡(luò)工程系的目的；功能：發(fā)布本校信息及使用的教學(xué)設(shè)備；包含子欄目：本系數(shù)媒、數(shù)字設(shè)備（“本系數(shù)媒” 介紹數(shù)字媒體專業(yè)相關(guān)的的信息；“數(shù)字設(shè)備”介紹本系所擁有的教學(xué)設(shè)備和實(shí)驗(yàn)室等；）4.2學(xué)科建設(shè)作用：使公眾了解本系專業(yè)設(shè)置，方便師生“教”與“學(xué)”；功能：發(fā)布系、專業(yè)信息，提供在線教學(xué)；包含子欄目：數(shù)字媒體藝術(shù)本科方向、數(shù)字媒體藝術(shù)專升本方向、圖形圖象制作?？品较颉?shù)字媒體藝術(shù)?？品较颍唬ū究瓢ǜ鞅究葡祫e及系內(nèi)各專業(yè)詳細(xì)介紹；?？瓢ǜ鲗？葡祫e及系內(nèi)各專業(yè)詳細(xì)介紹；）4.3教學(xué)教務(wù)作用：了解數(shù)字媒體與網(wǎng)絡(luò)工程系領(lǐng)導(dǎo)以及教師的基本信息，如教師專業(yè)，成績(jī)、特長(zhǎng)、4.4招生信息作用： 給群眾提供招生介紹，并介紹數(shù)字媒體與網(wǎng)絡(luò)工程系的主辦專業(yè)和推進(jìn)的方向；功能：發(fā)布招生相關(guān)信息、本系專業(yè)設(shè)置；職責(zé)范圍等；功能：數(shù)字媒體與網(wǎng)絡(luò)工程系領(lǐng)導(dǎo)及教師信息；4.5作品展示作用： 使學(xué)生在技術(shù)上進(jìn)一步提高；功能：發(fā)布最新作品展示；包含的子欄目：作品展示、畢業(yè)設(shè)計(jì)展（作品可放大觀看。）4.6聯(lián)系我們提供本系的聯(lián)系方式4.7數(shù)媒論壇作用：可以讓群眾提問(wèn)問(wèn)題，同時(shí)為了讓這網(wǎng)站更加完善，讓更多的人來(lái)參與建設(shè)； 功能：可以知道群眾的意見；五、 網(wǎng)站形象設(shè)計(jì)5.1標(biāo)志：白色字咖啡色描邊組成的“數(shù)字媒體與網(wǎng)絡(luò)工程系”為主體，與banner背景統(tǒng)一，（banner背景以數(shù)字01還有手拿鼠標(biāo)姿勢(shì)詮釋了數(shù)字媒體這一專業(yè)，并且有一道似曙光展現(xiàn)現(xiàn)在年輕人積極向上的精神），而子頁(yè)的“數(shù)字媒體與網(wǎng)絡(luò)工程系”則是藍(lán)色字投影，配上藍(lán)色不會(huì)顯得單調(diào)，視覺(jué)上清晰，明了5.2主色調(diào)與色彩：以“橙色”為主色調(diào)。橙色代表輝煌、激情、收獲，向上，而我們現(xiàn)在的大學(xué)生正需要這種激情、積極向上的精神，因此選用“橙色”為主色調(diào)；5.3標(biāo)準(zhǔn)字體：主頁(yè)導(dǎo)航欄背景顏色為橙色，字體為“黑體”白色12px；子頁(yè)導(dǎo)航欄背景為灰色，字體為“宋體”白色12px，正文字體為“宋體”12 px，顏色為#2f3e89；5.4裝飾圖案：網(wǎng)站采用部分學(xué)校風(fēng)景和設(shè)計(jì)圖片為裝飾圖案；5.5交互方式：靜態(tài)+asp網(wǎng)頁(yè)，方便交換；六、網(wǎng)站版面策劃：6.1首頁(yè)：首頁(yè)使用的是寬屏布局，打破了原來(lái)版本的國(guó)字型結(jié)構(gòu)布局，看起來(lái)大氣，成熟。最上面是網(wǎng)站的標(biāo)題+banner+主菜單,下半部分分為2個(gè)區(qū)域,下半部分的上半部分是主題內(nèi)容,最下面是網(wǎng)站的版權(quán)聲明。這種布局的優(yōu)點(diǎn)是能夠充分利用版面,信息量大;缺點(diǎn)是頁(yè)面擁擠，文字多,不夠靈活。6.2子頁(yè)：子頁(yè)的版面設(shè)計(jì)與主頁(yè)布局不同，多半是以類似國(guó)字型布局，又與國(guó)字型布局有些差異，因?yàn)橛心莻€(gè)flash按鈕，使得頁(yè)面看起來(lái)不會(huì)死板。主體內(nèi)容使用標(biāo)題正文型：這種類型即最上面是標(biāo)題或類似的一些東西，下面是正文；本站子頁(yè)大部分是這個(gè)結(jié)構(gòu)；6.3頁(yè)頭：頁(yè)頭又可稱之為頁(yè)眉，頁(yè)眉的作用是定義頁(yè)面的主題。比如一個(gè)站點(diǎn)的名字多數(shù)都顯示在頁(yè)眉里。這樣，訪問(wèn)者能很快知道這個(gè)站點(diǎn)是什么內(nèi)容。頁(yè)頭是整個(gè)頁(yè)面設(shè)計(jì)的關(guān)鍵，它將牽涉到下面的更多設(shè)計(jì)和整個(gè)頁(yè)面的協(xié)調(diào)性。頁(yè)頭常放置站點(diǎn)名字的圖片和公司標(biāo)志以及旗幟廣告。本站頁(yè)頭先是一個(gè)土黃色與橙色矩形組成，下方是digital media&network engineering，banner即是以980x151以數(shù)字01還有手拿鼠標(biāo)姿勢(shì)詮釋了數(shù)字媒體這一專業(yè)，并且有一道似曙光展現(xiàn)現(xiàn)在年輕人積極向上的精神的學(xué)校風(fēng)景圖為底片，白色字咖啡色描邊組成的“數(shù)字媒體與網(wǎng)絡(luò)工程系”上面帶有透明flash一起構(gòu)成。（“digital media&network engineering”為microsoft sans serif 14px,灰色；）6.4頁(yè)腳：頁(yè)腳和頁(yè)頭相呼應(yīng)。頁(yè)頭是放置站點(diǎn)主題的地方，而頁(yè)腳是放置制作者或者公司信息的地方。你能看到，許多制作信息都是放置在頁(yè)腳的。本站頁(yè)腳如下：copyright 2007 by 數(shù)字媒體與網(wǎng)絡(luò)工程系 power by 05 multimediacopyright(c)2002-2003 all rights reserved bestviewed by 800600 ie5.5+ （頁(yè)腳字體為宋體，顏色為黑色）七、網(wǎng)站布局技術(shù)本站主要使用表格布局布局。7.1 層疊樣式表由于層疊樣式表(css)用得不熟，因此做這個(gè)網(wǎng)站過(guò)程中還是沒(méi)用到多少。不過(guò)倒是對(duì)其有了一定的了解。如果使用了css,那么可以在設(shè)置文本之前,就指定整個(gè)文本的屬性,比如顏色、字體大小等等,這樣,我們就能獲得統(tǒng)一的文本外觀了。7.2 表格布局在制作這個(gè)網(wǎng)站的過(guò)程中使用得最多的就是表格布局了。表格布局好像已經(jīng)成為一個(gè)標(biāo)準(zhǔn)，隨便瀏覽一個(gè)站點(diǎn)，它們一定是用表格布局的。表格布局的優(yōu)勢(shì)在于它能對(duì)不同對(duì)象加以處理，而又不用擔(dān)心不同對(duì)象之間的影響。而且表格在定位圖片和文本上比起用css更加方便。表格布局唯一的缺點(diǎn)是，當(dāng)我們用了過(guò)多表格時(shí)，頁(yè)面下載速度受到影響。7.3 框架布局一開始看到有些欄目的內(nèi)容可以用框架布局，但還是因?yàn)榧夹g(shù)有限，處理起來(lái)效果并不理想，因此就取消。但是有一些內(nèi)容比較長(zhǎng)的就用代碼添加框架，有滾動(dòng)條的。不知道什么原故，框架結(jié)構(gòu)的頁(yè)面開始被許多人不喜歡，可能是因?yàn)樗募嫒菪?。但從布局上考慮，框架結(jié)構(gòu)不失為一個(gè)好的布局方法。它如同表格布局一樣，把不同對(duì)象放置到不同頁(yè)面加以處理，因?yàn)榭蚣芸梢匀∠吙颍砸话銇?lái)說(shuō)不影響整體美觀。7.4選擇表格布局原因本站主要使用表格布局布局。優(yōu)勢(shì)在于它可以對(duì)不同對(duì)象進(jìn)行處理，而不必?fù)?dān)心不同對(duì)象之間的互相影響，且在定位圖片和文本上比用css更方便，比框架布局更美觀，使用起來(lái)也會(huì)更順手。八、網(wǎng)站中使用的一些特效代碼說(shuō)明8.1框架添加方法 （其中621為框架的寬度，538為框架的高度，1.htm為框架內(nèi)顯示內(nèi)容的文件名）8.2透明flash的應(yīng)用主要應(yīng)用于網(wǎng)頁(yè)頂部，代碼如下：classid=clsid:d27cdb6e-ae6d-11cf-96b8-444553540000 codebase=/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0 width=773 height=112 （其中：“773”為flash的寬度，“112”為flash的高度，“images/banner%5b1%5d.swf”為flash的存在路徑，“”是對(duì)flash背景進(jìn)行透明化。）8.3字體向上滾動(dòng)效果 “實(shí)干闖未來(lái)”廣告創(chuàng)意設(shè)計(jì)大賽揭曉 (marquee文字移動(dòng)的代碼, direction=up表示滾動(dòng)的方向是上滾；onmouseout=this.start();表示鼠標(biāo)移開開始滾動(dòng)；onmouseover=this.stop()“表示鼠標(biāo)移開停止?jié)L動(dòng)）九、網(wǎng)站制作使用工具介紹9.1 dreamweaver mx 2004是macromedia公司最新推出的一款可視化的專業(yè)級(jí)html（超文本標(biāo)識(shí)語(yǔ)言）編輯器。它是一款構(gòu)建專業(yè)web站點(diǎn)和應(yīng)用程序的最佳選擇，它組合了功能強(qiáng)大的布局工具、應(yīng)用程序開發(fā)工具和代碼編輯支持。dreamweaver的設(shè)計(jì)和整合功能是以css為基礎(chǔ)的，強(qiáng)大而穩(wěn)定，可幫助設(shè)計(jì)人員和開發(fā)人員輕松創(chuàng)建和管理任何站點(diǎn).。9.2 photoshop是adobe公司推出的著名平面圖像設(shè)計(jì)和圖像處理軟件，它具有強(qiáng)大的圖像處理功能和操作易用性，受到廣大平面圖形設(shè)計(jì)人員及專業(yè)廣告設(shè)計(jì)師的青睞。它涉及圖像合成、色彩校正、圖層調(diào)板、通道使用、動(dòng)作調(diào)板、路徑工具、濾鏡等圖像處理功能?？芍谱魅绨粹o制作、文字特效、材質(zhì)紋理、三維物體、影像特效及廣告創(chuàng)意設(shè)計(jì)等多種用途。是一門值得深入學(xué)習(xí)的一種好軟件。9.3 flash是macromedia公司的一個(gè)的網(wǎng)頁(yè)交互動(dòng)畫制作工具。用flash制作出來(lái)的動(dòng)化是矢量的，不管怎樣放大、縮小，它還是清晰可見。 用flash制作的文件很小，這樣便于在互聯(lián)網(wǎng)上傳輸，而且它采用了數(shù)據(jù)流技術(shù)，只要下載一部分，就能欣賞動(dòng)畫，而且能一邊播放一邊傳輸數(shù)據(jù)。 交互性更是flash動(dòng)畫的迷人之處，可以通過(guò)點(diǎn)擊按鈕、選擇菜單來(lái)控制動(dòng)畫的播放。正是有了這些優(yōu)點(diǎn)，才使flash日益成為網(wǎng)絡(luò)多媒體的主流。十、設(shè)計(jì)小結(jié)畢業(yè)設(shè)計(jì)是大學(xué)生涯中最重要的一關(guān)，在大學(xué)中所學(xué)到的知識(shí)基本上會(huì)在這里體現(xiàn)出來(lái)。終于做完了畢業(yè)設(shè)計(jì)，感觸頗深，這其中的艱辛與歡樂(lè)只有自己最清楚。101收獲這次畢業(yè)設(shè)計(jì)的制作的過(guò)程中，無(wú)論是技術(shù)上的還是非技術(shù)上的，都是收獲頗多。首先，在做畢業(yè)設(shè)計(jì)之前對(duì)dreamweaver還算是比較生疏的，因?yàn)橹吧系恼n程不多，接觸的也不多。做了這個(gè)畢業(yè)設(shè)計(jì)過(guò)程中，遇到不懂的問(wèn)題就上網(wǎng)查資料、到圖書館借書，或者向同學(xué)、老師討教。技術(shù)上的東西學(xué)的還是挺多的。其次，由于我是和同學(xué)合作去制作這個(gè)網(wǎng)站的，因此在這過(guò)程中會(huì)想法思路不一樣，會(huì)產(chǎn)生一些分歧，所以我們倆就會(huì)把效果做出來(lái)，演示給同學(xué)看，讓她們提出看法，最后再?zèng)Q定用誰(shuí)的方案。因此，在這過(guò)程中我領(lǐng)悟到團(tuán)隊(duì)合作的重要性。102不足把做完的網(wǎng)頁(yè)從頭到尾瀏覽了幾遍，發(fā)現(xiàn)其中還存在很多的問(wèn)題。后臺(tái)程序很多都不懂，一開始很努力的研究，查找一大堆的資料，去做會(huì)員登錄系統(tǒng)。該設(shè)置的設(shè)置完了，access數(shù)據(jù)庫(kù)也建好了，就是在鏈接過(guò)程中不知道哪里出了問(wèn)題，一直沒(méi)做成功。到最后，所剩時(shí)間不多，只好套用了一個(gè)別人的