網(wǎng)頁的設計與實現(xiàn)設計-畢設論文

安徽中澳科技職業(yè)學院計算機系畢業(yè)論文（設計）論文題目：網(wǎng)站的設計與實現(xiàn)摘要隨著計算機網(wǎng)絡通信技術和Interne的飛速發(fā)展，基于因特網(wǎng)的計算機網(wǎng)上遠程教學已經(jīng)開始成為一種全新的教學手段，并且越來越受到人們的關注。由于網(wǎng)上教學具有時效性、共享性、交互性和個別化等諸多特點，因此它有著傳統(tǒng)教學模式無法比擬的優(yōu)點，它創(chuàng)造了一種全新的教學模式，打破了傳統(tǒng)教學模式在時間、空間上的限制，采用了先進的教學手段和教學方法，可以大大提高教學效率和教學效果，使教學活動上了一個新臺階。蓬勃興起的網(wǎng)上教育以其全新的高科技教學手段為解決我國當前資源嚴重短缺而教育需求日益擴大的矛盾提供了一種投資少、見效快、優(yōu)質高效的解決方案，它必將成為我國未來教育發(fā)展的重要方向。本文依據(jù)設計出來的計算機組成原理教學網(wǎng)站，做了全面系統(tǒng)的介紹。全文共六章，按照前期的開發(fā)順序，從系統(tǒng)分析與研究開始，逐一對開發(fā)過程做了全面的介紹。在詳細設計這一章中的系統(tǒng)實現(xiàn)部分省去了煩瑣的程序代碼，用比較直觀易讀的流程圖來表示，增強了文章的可讀性。關鍵字：信息系統(tǒng)，B/S，計算機組成原理

AbstractWiththecomputernetworkcommunicationtechnologyandtherapiddevelopmentofInternetandInternet-basedcomputeronlinedistancelearninghasstartedtobecomeanewteachingmethods,andmoreandmorepeople'sattention.Asonlineteachingistime-sensitive,sharing,interactiveandindividual,andmanyotherfeatures,ithasatraditionalteachingmodeincomparableadvantages,ithascreatedanewteachingmodel,breakingthetraditionalteachingmodelintermsoftime,Spaceconstraintsontheuseofadvancedteachingmethodsandteachingmethods,cangreatlyimproveteachingefficiencyandeffectivenessofteaching,sothatteachingandlearningactivitiesonanewlevel.Theriseofonlineeducationflourishinginitsnewhigh-techteachingmethodstosolvethecurrentseriousshortageofresourcesandeducationalneedsofthegrowingcontradictionsprovidesasmallinvestment,quick,qualityandefficientsolutions,itwillbecomeChina'sfutureeducationTheimportantdirectionofdevelopment.Thispaperdesignedbasedontheprincipleofteachingcomputersite,anddoneacomprehensiveandsystematicintroduction.Thefulltextofatotalofsixchapters,inaccordancewiththedevelopmentofpre-order,startingfromsystemanalysisandresearch,onebyoneofthedevelopmentprocesstodoacomprehensiveintroduction.Inthischapter,thedetaileddesignofthesystemtoachievesomeofeliminatingthecumbersomeprocedurecode,amoreintuitiveaccessibilitytotheflowchartthatenhancethereadabilityofthearticle.Keyword：InformationSystems,B/S,computercomponentsPrinciple

目錄第1章緒論 11．1設計思想 11．2課題來源及時代背景 11．3開發(fā)工具的選用及介紹 2第2章網(wǎng)站總體分析與設計 22.1網(wǎng)站系統(tǒng)分析 22.2網(wǎng)站需求分析 32.3網(wǎng)站建設的總體規(guī)劃及設計 32.3.1、確定網(wǎng)站建設的目的 32.3.2、確定客戶群體 42.3.3、細化目標，構架網(wǎng)站內(nèi)容綱要 42.3.4、整理網(wǎng)站結構圖 42.3.5、美工 42.3.6、個性化服務 52.4主頁設計 52.5色彩搭配 5第3章詳細設計 63.1網(wǎng)站設計的流程 63.3.1、設項目的主要工作內(nèi)容 63.3.2、網(wǎng)站建設方式 63.2網(wǎng)站框架介紹 63.3各模塊的設計 63.4網(wǎng)站的測評 93.4.1、網(wǎng)頁的測試 93.4.2．網(wǎng)站測評 9第4章網(wǎng)頁設計應注意的問題 114.1.網(wǎng)站的素材選取 11第5章主頁設計與實現(xiàn) 155.1主頁設計 15第6章總結 16致謝 16中小學網(wǎng)站建設第1頁安徽中澳科技職業(yè)學院PAGE16第1章緒論1．1設計思想校園網(wǎng)建設的目的是為教育服務，立足于本教育為創(chuàng)新教育，素質教育服務。通過網(wǎng)站的建設，宣傳展示學校風采、優(yōu)點與特色，發(fā)布學校的活動安排與招生政策等信息內(nèi)容，使學生及家長增加對學校的了解，增強學生、家長與學校之間的聯(lián)系，在Internet網(wǎng)上，讓學生及家長及時得到學校發(fā)布的重要信息，同時也幫助了學校完成部分事務，提高辦事效率,給學生、家長與學校最方便的聯(lián)系橋梁。在這里學生及家長也可以提出意見及想法，互通教學之間的意見想法，更加有效的辦好教學，和學生需要哪樣的教學方式能夠更好的吸收與接納，這些都能成為學校的參考，以便更好的提高學校的教學質量。校園網(wǎng)的建設一方面，有利于及時了解校園的信息，有助于提高學校的科研教學水平；另一方面，校園網(wǎng)的建立及以其為基礎的管理信息系統(tǒng)的開發(fā)，也有利于學校管理水平的提高。1．2課題來源及時代背景網(wǎng)絡背景下的創(chuàng)新性教學研究是當今世界課程改革的一種潮流,也是素質教育進一步深化的客觀要求。網(wǎng)絡教學一向被視為有效突破時空限制的教學通道。近年來,隨著信息技術的蓬勃發(fā)展,世界發(fā)達國家正如火如荼地致力于Internet在學校教育、社區(qū)教育、社會教育及在職訓練的應用與研究等,由于利用網(wǎng)絡媒體進行網(wǎng)絡教學與傳統(tǒng)媒體有極大的差異,因此許多研究單位在網(wǎng)絡教學方面投入相當多的時間與精力,試著設計一套能夠符合網(wǎng)絡媒體特性,并能提升教學成果的教學系統(tǒng)。然而,目前這種基于數(shù)字化、交互式、個別化、多媒體的現(xiàn)代遠程教育平臺的新型教學模式,其理論與實踐都不夠豐富。創(chuàng)新性教學是實施素質教育的核心內(nèi)涵。創(chuàng)新性的教學能激活、啟動學生自主學習的動力系統(tǒng),能培養(yǎng)學生的創(chuàng)新意識、創(chuàng)新思維、創(chuàng)新情感和創(chuàng)新能力。它能弘揚學生的主體意識,促進學生個性和諧發(fā)展。創(chuàng)新性教學體現(xiàn)了素質教育的本質和核心內(nèi)涵,是實施素質教育的基本途徑,并具有重要的推動作用。因此,借助網(wǎng)絡這一現(xiàn)代化的教育技術來構建創(chuàng)新性教學的理論和實踐模式,既是深化素質教育的迫切呼喚,也必將為提高我們?nèi)褡宓乃刭|作出積極的貢獻。目前，校園網(wǎng)的建設與應用被越來越多的中小學視為實現(xiàn)教學改革，提高教學質量以適應時代對人才培養(yǎng)需求的關鍵。中小學校園網(wǎng)絡作為一種在中小學應用的局域網(wǎng)，有其特定含義和應用范疇，我們可以將校園網(wǎng)定義為：一種為學校學習活動、教學活動、科研活動和管理活動服務的校園內(nèi)局域網(wǎng)絡環(huán)境，并且它是建構在多媒體技術和現(xiàn)代網(wǎng)絡技術之上并與因特網(wǎng)連接的。對于校園網(wǎng)建設來說，其應用是目的，網(wǎng)絡環(huán)境是基礎，網(wǎng)絡教學資源是核心，而人員培訓與網(wǎng)絡維護是保障。通過本網(wǎng)站的設計與建設,能夠實現(xiàn)計算機文化基礎教育的初步功能,本網(wǎng)站主要運用dreamweaver與photoshop整合的開發(fā)技術，實現(xiàn)了學校信息資源的共享。1．3開發(fā)工具的選用及介紹現(xiàn)在非常流行的Macromedia公司出品的Dreamweaverstudio8提供了更多功能強勁的可視化設計工具、應用開發(fā)環(huán)境以及代碼編輯支持，是開發(fā)人員和設計師能夠快捷的創(chuàng)建代碼規(guī)范的應用程序，集成程度非常高，開發(fā)環(huán)境精簡而高效，開發(fā)人員能夠運用Dreamweaver與他們的服務器技術構建功能強大的網(wǎng)絡應用程序連接到用戶的數(shù)據(jù)、網(wǎng)絡服務體系。網(wǎng)頁圖形設計軟件包括擅長平面圖形設計的photoshop與擅長網(wǎng)絡圖形設計的firework軟件。相比較而言，photoshop可以做出比較復雜的平面效果，但不適合于團隊開發(fā)，故目前普及面不是很廣。Firework是最好的通用網(wǎng)頁圖片編輯器，同時具有位圖和矢量圖的編輯能力，可以結合位圖效果豐富和矢量圖容易編輯的優(yōu)點，制作一些特殊效果簡單，易生成網(wǎng)頁效果模板，通過切片可導出生成網(wǎng)頁。此次設計中采用photoshop編輯圖片。網(wǎng)頁動畫設計軟件flash。Flash網(wǎng)頁動畫設計軟件可以制作網(wǎng)頁互動動畫，也可以將一個較大的互動動畫制作為一個完整的網(wǎng)頁，這是一個非常靈活的設計軟件。由于利用Flash可以設計強大的動畫效果，所以Flash動畫已發(fā)展成為一種獨特的藝術形式。至此Flash動畫被廣泛應用在網(wǎng)頁設計中，從logo到網(wǎng)頁橫幅、按鈕，甚至整個網(wǎng)頁或網(wǎng)站，都可以用Flash動畫來實現(xiàn)。為利用Flash動畫制作網(wǎng)頁導航條的效果尤佳。我主要在網(wǎng)頁設計中用了一個Flash來體現(xiàn)校園情況。第2章網(wǎng)站總體分析與設計2.1網(wǎng)站系統(tǒng)分析根據(jù)前面的設計思想進行分析，按照系統(tǒng)開發(fā)的基本觀點對網(wǎng)站進行分解，從內(nèi)容上可對網(wǎng)站作如下劃分：1、學校風采通過學校概括、教師風采、學生頻道及部分圖片等內(nèi)容來展現(xiàn)。2、優(yōu)點特色通過教育動態(tài)、家長中心、心理健康等欄目來展現(xiàn)。3、信息發(fā)布通過公告欄、校園新聞等欄目來實現(xiàn)，內(nèi)容有校園動態(tài)、活動安排等。2.2網(wǎng)站需求分析1、提供Internet服務，通過與Internet的連接，可以培養(yǎng)教師和學生使用網(wǎng)絡來獲取學校資源信息，這對學生的培養(yǎng)更為重要。2、資源共享：統(tǒng)一管理學校內(nèi)的各科目多媒體教學課件等教學和管理資料，使這些資源得到更為廣泛的應用。3、校內(nèi)電子郵件系統(tǒng)：通過網(wǎng)絡進行信息交換，隨時隨地地取得學校各教研室、各有關部門的資料，增進學校內(nèi)教師、學生以及各部門之間的溝通聯(lián)系。4、通過校園網(wǎng)絡，可以使學生能及時了解國內(nèi)外科技發(fā)展動態(tài)，促進教學、教研和科普工作的提高。5、以校園網(wǎng)絡為依托，建立各種課程的計算機輔助教學、多媒體教學課件演示。6、為學校的管理現(xiàn)代化及通信現(xiàn)代化提供重要的支撐環(huán)境，包括硬件和軟件兩個方面。2.3網(wǎng)站建設的總體規(guī)劃及設計2.3.1、確定網(wǎng)站建設的目的確定網(wǎng)站建設的目的，這是非常重要但又易于被人們忽略或輕視的一項工作。與網(wǎng)站單位人員溝通就尤其重要了。對于網(wǎng)站設計來說，這種溝通不僅應了解該網(wǎng)站要運行什么應用程序，需要如何連接單位現(xiàn)有系統(tǒng)等，還需知道這個網(wǎng)站希望達到什么樣的目的，即必須清楚網(wǎng)站的目標市場在那里。這將成為整個網(wǎng)站所有設計思想的基礎。無論網(wǎng)站采用何種形式，什么樣的外觀，提供什么的內(nèi)容，都要以網(wǎng)站的最終目的為出發(fā)點來考慮。另一方面，網(wǎng)站建設還應該收集客戶對這個網(wǎng)站的美術需求。網(wǎng)站設計人員就需要了解建站單位形象的突出點和單位標志的特點、意義等。本網(wǎng)站的建設主要是為了全面宣傳，展示學校風采、優(yōu)點與特色，發(fā)布學校的活動安排與招生政策等信息內(nèi)容，使學生及家長增加對學校的了解，增強學生、家長與學校之間的聯(lián)系，提高學校的教學質量，讓學校信息及時散布。2.3.2、確定客戶群體確定網(wǎng)站的客戶群體十分重要。只有清楚確認網(wǎng)站的客戶群體、客戶的需求、客戶的興趣，才可能在網(wǎng)站上提供客戶所需要的內(nèi)容和信息，留住目標客戶群體，網(wǎng)站才能獲得成功。校園網(wǎng)站的建設就是為了學生、家長和學校之間密切的溝通，讓家長及時關注自己的孩子，因此家長、學生便是校園網(wǎng)的的客戶群體只要能滿足家長、學生的需求就證明網(wǎng)站是成功的。2.3.3、細化目標，構架網(wǎng)站內(nèi)容綱要確定目標市場和客戶群體后，下一步工作目標將細化，構架網(wǎng)站內(nèi)容綱要，主要包括網(wǎng)站核心內(nèi)容、主要信息、服務項目等。然后，將網(wǎng)站內(nèi)容建設的基本架構交給有關業(yè)務人員審核批準，形成部門網(wǎng)站設計的總體報告。2.3.4、整理網(wǎng)站結構圖確定內(nèi)容后，就可以勾畫網(wǎng)站結構了。結構圖有很多，順序機構、網(wǎng)狀結構等，應依據(jù)自己網(wǎng)站的內(nèi)容反復討論后確定。多數(shù)復雜的網(wǎng)站會綜合應用到幾種不同的結構圖。畫出結構圖的目的，主要是便于有邏輯地組織網(wǎng)站和鏈接，同時，可以根據(jù)結構圖去分配工作和任務。2.3.5、美工有美術設計人員的幫助，對網(wǎng)站建設的成功也是至關重要的。他們能給你很多關于排版，色彩等方面的建議。網(wǎng)頁設計與其他出版設計最大的不同點在以下3個方面。(1)、傳播的媒介不同。許多用戶是用MODEM上網(wǎng)的，圖形一般不宜太大；通常每個圖應小于30KB，每個頁面圖形總量應小于50KB。(2)、最終的發(fā)布媒體不同。多數(shù)用戶是通過Windows上網(wǎng)的，而且當前通用的分辨率是低于800~600，因此，美工人員的發(fā)揮天地的14~15英寸顯示器所能展示的區(qū)域。(3)、所能采用的文件格式的限制。對通用瀏覽器來說，能識別的圖像格式僅為JPG和GIF，兩者又各有不同的特點和適用環(huán)境。我選擇了兩種格式的圖片。2.3.6、個性化服務對于任何一個成功的網(wǎng)站來講，資料收集都是至關重要的環(huán)節(jié)。有關訪問者和顧客行為的資料是分析投資收益的基礎。顧客的經(jīng)驗同時也會隨著資料的增加而增加。隨著時間的推移，收集的資料不斷增加，同時與網(wǎng)上業(yè)務相互影響也在不斷提高。這個過程促使不斷提高為網(wǎng)民提供的價值，并且優(yōu)化同每個顧客關系的收益。由于這個過程是漸進的，因此有時被稱為漸進的個性化服務。制定資料收集計劃時，不一定馬上就開始采用技術手段。應該先從明確目標入手，在收集到的信息的基礎上，確定網(wǎng)上業(yè)務服務特定客戶的策略。一旦策略適當，就能確定需要什么樣的技術達到確定的目標。2.4主頁設計網(wǎng)站主頁采用靜態(tài)的方式，即靜態(tài)的主畫面和靜態(tài)的圖片相結合，體現(xiàn)學校的勃勃生氣，靜態(tài)主頁方式介紹學校概況、校園新聞、心理健康、家長中心、學生頻道等信息。2.5色彩搭配網(wǎng)頁的色彩是樹立網(wǎng)站形象的關鍵之一，網(wǎng)頁的背景、文字、圖標、邊框、超鏈接等都要用到色彩。不同的色彩會使瀏覽者有不同的心理感受。合理的搭配色彩，會更好的表現(xiàn)主題，吸引用戶的注意力。網(wǎng)頁色彩涉及到藝術知識，讓美術教師參加網(wǎng)頁色彩設計，可能會出現(xiàn)比較理想的效果。在色彩搭配上要注意色彩的鮮明性、獨特性、合適性、聯(lián)想性。背景色和前景色對比要大，以突出主要內(nèi)容設計網(wǎng)站色彩。網(wǎng)站給人的第一印象來自視覺沖擊，不同的色彩搭配產(chǎn)生不同的效果，并可能影響到訪問者的情緒。“標準色彩”是指能體現(xiàn)網(wǎng)站形象和延伸內(nèi)涵的色彩，要用于網(wǎng)站的標志，標題，主菜單和主色塊。給人以整體統(tǒng)一的感覺。至于其它色彩也可以使用，但應當只是作為點綴和襯托，絕不能喧賓奪主。一般來說，一個網(wǎng)站的標準色彩不超過3種，太多則讓人眼花繚亂。適合于網(wǎng)頁標準色的顏色有：藍色，黃/橙色，黑/灰/白色三大系列色。第3章詳細設計3.1網(wǎng)站設計的流程3.3.1、設項目的主要工作內(nèi)容(1)、對校園網(wǎng)站的設計進行需求分析。(2)、收集整理需要的信息。(3)、制定網(wǎng)站開發(fā)的方案。(4)、對校園網(wǎng)站進行整體構架搭建。(5)、制作并發(fā)布單位所有主要網(wǎng)站建立的相對靜態(tài)信息。(6)、全面負責單位主網(wǎng)站的宣傳。3.3.2、網(wǎng)站建設方式(1)、軟件自動生成利用軟件生成站點，具有功能強、效率高、費用低等優(yōu)點，但存在使用不方便、站點模式有限、不能滿足校園的實際情況等缺點。(2)、傳統(tǒng)建站方式初期投入成本低，純粹做網(wǎng)頁，網(wǎng)站技術成分低，后期維護困難，靈活性差。3.2網(wǎng)站框架介紹本網(wǎng)站是一個比較小型的中小學網(wǎng)站,能夠實現(xiàn)網(wǎng)絡教育的初步功能。本課題主要運用dreamweaver與photoshop整合的開發(fā)技術，實現(xiàn)了學校的信息、學校概況、教學科研、心理健康、校園新聞、家長中心、學生頻道、注冊、留言等功能。最終以實現(xiàn)既能使用戶學到知識的同時,又提高用戶的學習興趣為目的。3.3各模塊的設計1、學校概況：對校園的簡單介紹，展現(xiàn)校園風采。設計圖如：2、校園網(wǎng)網(wǎng)站葉子;展現(xiàn)校園風采。如圖3-2校園網(wǎng)網(wǎng)站葉子模塊設計圖3、校園作品：散文精選。設計圖如：如圖3-3校園網(wǎng)作品集子模塊設計圖4、照片匣子：包括校園景色、概況以及活動等。設計圖如：如圖3-4校園網(wǎng)校園景色模塊設計圖5、留言本子：介紹學校的網(wǎng)站、地址、聯(lián)系方式等歡迎您的來訪。設計圖如：如圖3-5校園網(wǎng)留言本子模塊設計圖3.4網(wǎng)站的測評3.4.1、網(wǎng)頁的測試當你的主頁編制成功后，要以一個讀者的身份，利用瀏覽器測試文檔資料的正確性和可用性。(1)、瀏覽器兼容性測試。目前主要瀏覽器InternetExplorer，只要能在這種瀏覽器上瀏覽就可以了。一般我們做的網(wǎng)頁測試不存在兼容性的問題，在通用的這種瀏覽器上一般情況下都能正常的瀏覽。(2)、鏈接正確性的測試。我們做的網(wǎng)頁一般都用Dreamweaver檢查，我們做的靜態(tài)網(wǎng)頁鏈接的只是瀏覽頁面，圖片等，所以在Dreamweaver里指向鏈接屬性仔細檢查就可以了。在瀏覽器測試中頁面都能正常瀏覽，就是注冊信息、學生頻道、聯(lián)系我們等欄目的功能不能充分實現(xiàn)，只能是簡單的頁面瀏覽。3.4.2．網(wǎng)站測評網(wǎng)站建成之后，為了避免出現(xiàn)不必要的錯誤，需要對其進行測評。測評的內(nèi)容主要有以下幾個方面。(1)、鏈接有效性。靜態(tài)網(wǎng)頁只要確認每一個頁面能正常瀏覽，保證信息不缺失就可以了。(2)、網(wǎng)頁語言正確性。檢查網(wǎng)頁中英文拼寫與網(wǎng)頁HTML語法書寫是否正確。在靜態(tài)網(wǎng)頁中語言都是自動生成的所以語言的正確性一般情況下不會有太大的問題。(3)、網(wǎng)站便用性。檢查網(wǎng)站整體結構是否清晰以及網(wǎng)站頁面導航是否清晰。

第4章網(wǎng)頁設計應注意的問題當網(wǎng)站在進行具體的頁面設計過程中，還應注意以下事項，可幫助我們?nèi)〉檬掳牍Ρ兜男Ч?.1.網(wǎng)站的素材選取網(wǎng)頁制作之前要收集好相關的素材，對收集的素材進行分類管理，如可分為：文字素材、圖像素材、視頻素材、動畫素材等。并且對素材進行加工處理，以適合網(wǎng)站主題。如果沒有合適的素材，還要自己用相關軟件進行網(wǎng)頁素材制作。1在網(wǎng)站首頁部分為了切合主題選取了一些關于學校的一些圖片例如：圖片1圖片2圖片32在其他鏈接里面也選取相對應的一些切合主題的圖片例如：（1）在作品集子里面選取了一個關于散文請選的圖片：圖片4（2）在照片匣子里面插入一些關于學校的圖片如圖片5圖片6等：圖片5圖片63以切合主題為標準選取一系列素材，在不同鏈接選取一些對應的素材。4為了使圖片觀看效果更佳還對部分圖片進行了處