數字媒體技術系網站前端設計與開發(fā)-畢業(yè)論文

數字媒體技術系網站前端設計與開發(fā)畢業(yè)論文

本科畢業(yè)設計（論文）題目:數字媒體技術系網站前端設計與開發(fā)學院：專業(yè)班級：姓名：學號：指導教師：系主任：學院院長：二O一三年月日畢業(yè)設計(論文)誠信聲明我謹在此保證：本人所寫的畢業(yè)設計(論文)，凡引用他人的研究成果均已在參考文獻或注釋中列出。設計(論文)主體均由本人獨立完成，沒有抄襲、剽竊他人已經發(fā)表或未發(fā)表的研究成果行為。如出現以上違反知識產權的情況，本人愿意承擔相應的責任。聲明人(簽名)：年月日摘要21世紀是信息高速發(fā)達的時代，網絡作為當今最流行最方便快捷的媒介也越來越被人們接受，并且融入我們的生活。隨著高校信息化建設的不斷推進，網站的作用超越了傳統的信息獲取，交流它更能體現組織機構的風采，性質。所以高校院系建立本院系美觀，專業(yè)，易于維護管理的網站已經勢在必行。本論文主要圍繞數字媒體技術專業(yè)的門戶網站為開發(fā)主題，最基本也是最必須的三個技能。前端的開發(fā)中，在頁面的布局時，HTML將元素進行定義，CSS對展示的元素進行定位，再通過JavaScript實現相應的效果和交互。雖然表面看起來這些很簡單，但這里面需要掌握的東西絕對不會少。在進行開發(fā)前，需要對這些概念弄清楚，弄明白，這樣在開發(fā)的過程中才會得心應手。分析并解決實現中的若干技術問題；介紹了個性化頁面的背景及jsp+javascript+mysql系統的一般原理；闡述整個個性化頁面生成系統的系統結構及工作原理；分析了系統實現中的特殊性，難點和重點；設計實現用戶注冊，用戶登錄，用戶管理等jsp頁面。分析并解決實現中的若干技術問題；建立完整的校園網站，進行測試并分析結果。該網站有效地實現用戶通過JSP頁面訪問來進行用戶注冊，登陸，并對網站內容進行有效的管理，提升了后期添加和刪除信息的有效性，具有一定的應用價值關鍵字：JSP；用戶登錄；javascript；網站美化；交互設計。ABSTRACTThetwenty-firstCenturyistherapiddevelopmentofinformationage,networkastheworld'smostpopularandmostconvenientmediaareincreasinglyacceptedbypeople.Alongwiththeinformationdevelopment,websitefunctionsbeyondthetraditionalinformationacquisition,communicationwhichcanbetterreflecttheorganizationstyle，properties.Souniversitiesestablishthedepartments,professionalappearance,easymaintenanceandmanagementofthesitehasbeenimperative.Thisthesismainlyfocusesondigitalmediatechnologymajorportalforthedevelopmentofthetheme,thethreemostbasicandnecessaryskills.Developmentofthefront,inthelayoutofthepage,HTMLwilldefinetheelements,positioningCSStodisplayelements,andthenthroughtheJavaScripttoachievethecorrespondingeffectandinteraction.Althoughthesurfacelooksliketheseareverysimple,butitneedstograspthingsnever.Inthedevelopment,theneedfortheseconceptsclear,understand,sointhedevelopmentprocesswillbehandy.Themainworkdoneinthisarticleisasfollows:(1)IntroducesthebackgroundandgeneralprincipleofJSP+Javascript+MySQLsystempersonalizedpages;(2)Introducesthestructureandworkingprincipleoftheentirepersonalizationpageproductionsystem;analysisoftheparticularity,thedifficultyandkeysystem;(3)Thedesignandimplementationofuserregistration,userlogin,usermanagementandotherJSPpage.(4)Analyzeandsolvesometechnicalproblemsinimplementation;(5)Theestablishmentofacompletecampussite,testingandanalysis;ThesiteeffectivelyachievetheuserthroughtheJSPpageaccesstouserregistration,login,andcarryoneffectivemanagementtothewebsitecontent,enhancetheeffectivenessofthelateadditionanddeletionofinformation,hasacertainapplicationvalue.Keywords：JSP;Userlogin;JavaScript;WebsiteLandscaping;InteractionDesign目錄摘要ABSTRACT第1章緒論(1)1.1選題背景及意義(1)1.2國內外高校網站建設狀況(3)1.3研究內容和擬解決的問題(5)1.4本章小結(6)第2章前端開發(fā)工具及相關技術(7)2.1前端開發(fā)環(huán)境(7)2.2前端開發(fā)工具(7)2.3前端開發(fā)相關技術(8)2.3.1Javascript簡介(8)2.3.2Javascript基本特點(8)2.3.3CSS簡介(9)2.3.4JQuery(9)2.4本章小結(11)第3章前端布局分析與設計(12)3.1前端總體開發(fā)流程及設計(12)3.1.1分層開發(fā)(12)3.1.2代碼編寫(12)3.1.3內部測試與后續(xù)優(yōu)化(13)3.2前端UI設計(14)3.2.1模塊分布(14)3.2.2顏色配置(15)3.2.3CSS元素(16)3.3交互設計與UI(17)3.4點，線，面的運用(18)3.4.1點的運用(18)3.4.2線的運用(19)3.5網站結構布局及設計(19)3.5.1網站首頁結構(19)3.5.2主題鮮明，富有特色(20)3.5.3版式編排布局合理性(21)3.6網站前臺頁面設計(22)3.6.1首頁(22)3.6.2系內概況(23)3.6.3系內新聞(23)3.7本章小結(23)第4章主要功能的實現(23)4.1界面設計(23)4.2具體設計文檔(24)4.3前臺新聞文摘顯示(24)4.3.1網站裝飾風格(24)4.3.2網站的鏈接結構(25)4.4可視化設計(25)4.5具體實現技術(25)4.5.1CSS在"數字媒體技術系網站"中的應用實例(25)4.5.2應用JavaScript設計網頁(26)4.6本章小結(28)第5章總結(29)參考文獻(1)致謝(32)第1章緒論1.1選題背景及意義如今的互聯網已經滲透到我們生活的每一個層面，網站的內容越來越豐富全面，以此來滿足了各種不同需求的瀏覽者。網站的作用眾所周知人們通過網站快速獲取，發(fā)布和傳遞信息。目前很多高校建立起了自己的網站這些網站的建立使得學?？梢酝黄苽鹘y的媒體的限制在網絡上開辟的屬于自己的新天地。網絡具有超時空性。網絡超時空性是一種“一人對一人，一人對多人，多人對一人，多人對多人”的傳播方式[1]。超時空性的形成正式由于在網絡在時間層面，空間層面上的開放性帶來的。網絡的超時空性使得高校網站對學校本身和外界社會表現特定的功能，表現在網站有助于改變教育資源的分散性和分布不均衡性，有效的將教育資源進行整合，從而使得教育資源使用意義上的無限增長。網絡具有的海量存儲特性，網絡能形成一個巨大無比的數據庫，世界上任何時間任何地點的任何一件事都能成為網絡的信息被廣泛傳播。高校網站的海量存儲特性可以從橫向和縱向兩方面分析：橫向看高校網站往往設置多個板塊，分別放置相關內容。不同板塊的信息相互獨立，共同構成網站的內容?？v向看，同一個板塊的內部，內容并不是固定不變的，而是不斷添加連續(xù)更新的。大量的信息使得高校網站成為一個巨大的數據庫。交互性體現在高校網站通過設置留言板，論壇，發(fā)揮網絡交互的功能，在老師和學生之間建立起了交流渠道。高校網站正是以這些特點為基礎，發(fā)揮了自己本身的資源整合，信息傳播，多方交流互動等方面的獨特功能，成為一座溝通橋梁。很多高校網站內容多姿多彩，板塊，內容爭妍斗艷。但不外乎以一下幾部分：學校介紹，新聞發(fā)布，招生信息，就業(yè)信息，師資力量，科研成果，機構設置，教學素材等。高校網站的建立和維護需要大量的物力和人力，為何要投入去建網站上？是因為如上所述的高校網站有的獨特特性使得建設高校網站勢在必行。這些都促進了各個機構組織的信息化建設，隨著高校信息化建設的不斷推進，網站的作用超越了傳統的信息獲取，交流它更能體現組織機構的風采，性質。所以高校院系建立本院系美觀，專業(yè)，易于維護管理的網站。我們要創(chuàng)建我們本專業(yè)的網站數字媒體技術系的專業(yè)網站，網站前端設計最基本的三個技能：HTML，CSS，JavaScript，PS矢量圖像編輯技術。這個是前端開發(fā)中最基本也是最必須的三個技能。前端的開發(fā)中，在頁面的布局時，HTML將元素進行定義，CSS對展示的元素進行定位，再通過JavaScript實現相應的效果和交互。雖然表面看起來這些很簡單，但這里面需要掌握的東西絕對不會少。在進行開發(fā)前，需要對這些概念弄清楚，弄明白，這樣在開發(fā)的過程中才會得心應手。建立本系網站發(fā)揮的作用如下：(1)數字媒體技術系網站是數字媒體專業(yè)的“商標”。在這個高度信息化的社會里，建立數字媒體技術系自己的網站是最直接的宣傳手端。網站的超時空特性，不僅能讓本地區(qū)的人們了解學院，更可讓世界了解本專業(yè)。(2)數字媒體技術系網站巨大的教育資源，網站是實現教育資源分配的橋梁，它使每一位教師和學生都能均等的得到培訓和受教育的機會，能極大的提高教學效率。(3)數字媒體技術系網站能提供教學互動的全新方式，網站使得教師與教師，教師與學生，學生與學生之間的交流有了全新的方式，它不再受到傳統課堂的制約。它可以使不同的學院同處一室，共同討論，共同提高。地理上的界限在這里模糊和消失了，數字媒體技術系網站是真正沒有圍墻的系網站。(4)數字媒體技術系網站能夠提供個性化的學習平臺，不同的學生理解世界的方式各不相同，認知世界有諸多方式。網絡提供的豐富資源可以使學生尋覓不同的教育方式，各取所需。數字媒體技術系網站允許不同的學生沿著自己的途徑，按自己的速度接受教育與學習，學生將有機會享受最佳的教育機會，充分發(fā)掘自己的內在潛力，培植獨特的個性和人格。(5)數字媒體技術系網站是最佳的教學研究室，數字媒體技術系網站與教育類專門網站的有效鏈接，給本系教學研究帶來了一片新天地，各種優(yōu)秀教案，專家論壇，網絡觀摩課，各科素材，多媒體課件制作等內容為教師教研提供了極佳的平臺。有效地降低教研成本，提高效率。1.2國內外高校網站建設狀況國外的專題院校網站的學習資源比較豐富，交互性和學習支持服務做得都比較好，但是活動組織形式比較單一。英國的學習網站建設得比較完備，無論從資源建設方面，還是從學習支持服務等方面都做得較好，商業(yè)性比較強。加拿大學習網站的網絡學習導航做得比較形象，趣味性較強，分類明確，專題資源集中。高校門戶網站的訪問量，一定程度上反映了各高校的信息化程度和水平。關于高校門戶網站訪問排名，有不少網站提供相關的服務?？傮w來說，國內的各排名口碑評價不一，而“訪問流量監(jiān)控”類的排名也會受到諸多因素干擾，不容易作為客觀評價網站的依據。具體如下表1-1所示[2]：表1-1中國高校網站綜合排名表排名中文名稱世界排名網站信息量世界排名信息影響力世界排名數字資料檔案數量世界排名學術文章發(fā)表情況世界排名1清華大學77439104162552上海交通大學101412822381263北京大學122385105591764浙大182202287649925復旦大學2568682346081876山東大學2642533286563127哈工大29270610217972398武漢大學35027220319153359中科大35787358160518410吉林大學363455706437309國外的高校網站部分國際知名大學如哈佛大學（/）排名第一，PRESENCE網站信息量世界排名第6，IMPACT網站信息影響力世界排名第1，OPENNESS數字資料檔案數量世界排名第34，EXCELLENCE學術文章發(fā)表情況世界排名第1；麻省理工學院（/doc/4c9e8a33b5daa58da0116c175f0e7cd18425188b.html/）排名第2，PRESENCE網站信息量世界排名第8，IMPACT網站信息影響力世界排名第1，OPENNESS數字資料檔案數量世界排名第14，EXCELLENCE學術文章發(fā)表情況世界排名第10；耶魯大學（/doc/4c9e8a33b5daa58da0116c175f0e7cd18425188b.html/）排名第16，PRESENCE網站信息量世界排名第27，IMPACT網站信息影響力世界排名第16，OPENNESS數字資料檔案數量世界排名第246，EXCELLENCE學術文章發(fā)表情況世界排名第22；劍橋大學（/doc/4c9e8a33b5daa58da0116c175f0e7cd18425188b.html/）排名第20，PRESENCE網站信息量世界排名第43，IMPACT網站信息影響力世界排名第35，OPENNESS數字資料檔案數量世界排名第94，EXCELLENCE學術文章發(fā)表情況世界排名第12；牛津大學（/doc/4c9e8a33b5daa58da0116c175f0e7cd18425188b.html/）排名第25，PRESENCE網站信息量世界排名第109，IMPACT網站信息影響力世界排名第37，OPENNESS數字資料檔案數量世界排名第64，EXCELLENCE學術文章發(fā)表情況世界排名第13；東京大學（http://www.u-tokyo.ac.jp/）排名第42，PRESENCE網站信息量世界排名第96，IMPACT網站信息影響力世界排名第103，OPENNESS數字資料檔案數量世界排名第52，EXCELLENCE學術文章發(fā)表情況世界排名第20；從網站建設情況來看，國內關于校園網站建設較多，雖然起步較國外晚，但是發(fā)展的速度很快，我國高校網站的建設還有很多不盡如人意的地方，其主要在于網站互動性的缺失，內容方面沒有國外院校網站那么多，是因為國內采取的形式較國外的不同。在創(chuàng)新方面比較欠缺，交互性的形式少。問題主要體現在這幾個方面：(1)缺乏組織協調，各部門各自為政。由于網絡內容建設工作幾乎全部下放到各部門，長期以來基本上一直處于一種各自為政的狀態(tài)。各部門的網頁風格迥異，都有各自不同的做法，不能做到統一。這樣做出來的網頁形形色色，拼湊成一個個學院，處室網站，顯得很不協調。有必要加強組織協調工作，詳細規(guī)劃，明確分工，制定出相應的標準，徹底摒棄網站建設中的隨意性。(2)內容單薄，更新滯后。內容單薄可以說是很大的硬傷。各部門名義上都有了自己的網站，但大多數部門網站能夠提供瀏覽的內容非常有限，特別是深層次的內容嚴重缺乏。另外，網上內容嚴重滯后，更新速度慢。有些部門的網站，時隔一年半載，其網頁界面和內容仍是老樣子。(3)重點失衡:重行政管理，輕教學科研。校園網最主要的功能應該是要為教學，科研服務。但有些校園網上的內容有關行政管理的偏多，而有關教學和科研的內容則相對