畢業(yè)論文靜態(tài)網(wǎng)頁設計與制作

1、畢業(yè)論文靜態(tài)網(wǎng)頁設計與制作 xinyu college畢業(yè)設計論文題 目 靜態(tài)網(wǎng)頁設計與制作 學 號 0808031003 姓 名 陳 凱 所 屬 系 計算機信息與工程系 專 業(yè) 計算機網(wǎng)絡技術(shù) 班 級 08計網(wǎng)1班 指導教師 陳巖巖老師 新余學院教務處制題目靜態(tài)網(wǎng)頁設計與制作主要內(nèi)容1網(wǎng)頁設計語言概述2網(wǎng)頁制作要用的軟件3內(nèi)部對象系統(tǒng)的使用4 web頁面信息的交互窗體與框架5結(jié)論指導老師評語成績指導老師目 錄摘 要0第1章 緒論111 internet的歷史和發(fā)展112 網(wǎng)頁概述1第2章 開發(fā)軟件簡介621 dreamweaver簡介622 6html語言的簡介723 flash 簡介 8

2、24 photoshop 簡介 923 本章小結(jié)14第3章 網(wǎng)站需求分析1531相關術(shù)語及解釋1532個人網(wǎng)站的由來與發(fā)展1533我的個人網(wǎng)頁的設計與規(guī)劃18 com 我的個人網(wǎng)頁的概貌 19 com 個人網(wǎng)頁的設計理念 2034 本章小結(jié)19第4章 結(jié)論20致 謝21參考文獻22靜態(tài)網(wǎng)頁的設計與制作摘 要本文就網(wǎng)站的設計與制作以軟件工程的方法對全過程進行了分析與研究本文的主要工作集中在1對web頁進行概述主要是對internet的歷史和發(fā)展作了回顧并對web頁的定義和特性進行闡述并對網(wǎng)站設計過程中使用的工具和技術(shù)簡單的介紹2對網(wǎng)站建設中提及的術(shù)語進行簡單解釋并對網(wǎng)站的由來和發(fā)展進行討論3對自

3、己設計的網(wǎng)站從設計理念到制作的過程進行詳細分析4使用dreamweaverflashphotoshop 等軟件的設計方式進行解析5就網(wǎng)站的設計與制作提出自己的觀點以及建議關鍵詞網(wǎng)站 設計工具 設計方案 創(chuàng)意 風格 static web design and productionabstract this website design and production with the method of software engineering to process the analysis and research this paper main work concentrates in1 th

4、e paper to web page is mainly to the internets history and development and a review of the definition and characteristics of web pages is expounded and the website design process using the tools and techniques of simple introduction2 the website construction mentioned in terms of website and simple

5、explanation of the origin and development are discussed3 for the design of your own website from design concept to making process were analyzed4 use flash dreamweaver photoshop software design methods are analyzed5 just website design and facture put forward its own views and suggestions第1章 緒論隨著21世紀

6、的到來人們更深切地感受到計算機在生活和工作中的作用越來越重要越來越多的職業(yè)需要具有計算機應用技能型人才掌握計算機是職業(yè)的需要更是事業(yè)發(fā)展的需要網(wǎng)頁設計與制作是計算機能力的具體表現(xiàn)本章主要介紹網(wǎng)頁設計的相關知識11internet的歷史與發(fā)展internet最早來源于美國國防部高級研究計劃局darpa defense advanced research projects agency 的前身arpa建立的arpanet該網(wǎng)于1969年投入使用從60年代開始arpa就開始向美國國內(nèi)大學的計算機系和一些私人有限公司提供經(jīng)費 以促進基于分組交換技術(shù)的計算機網(wǎng)絡的研究1968年arpa為arpanet網(wǎng)

7、絡項目立項這個項目基于這樣一種主導思想網(wǎng)絡必須能夠經(jīng)受住故障 的考驗而維持正常工作一旦發(fā)生戰(zhàn)爭當網(wǎng)絡的某一部分因遭受攻擊而失去工作能力時網(wǎng)絡的其它部分應當能夠維持正常通信最初arpanet主要用于 軍事研究目的它有五大特點 支持資源共享 采用分布式控制技術(shù) 采用分組交換技術(shù) 使用通信控制處理機 采用分層的網(wǎng)絡通信協(xié)議1972年arpanet在首屆計算機后臺通信國際會議上首次與公眾見面并驗證了分組交換技術(shù)的可行性由此arpanet成為現(xiàn)代計算機網(wǎng)絡誕生的標志 arpanet在技術(shù)上的另一個重大貢獻是tcpip協(xié)議簇的開發(fā)和使用 1980年arpa投資把tcpip加進unix bsd41版本 的內(nèi)

8、核中在bsd42版本以后tcpip協(xié)議即成為unix操作系統(tǒng)的標準通信模塊 1982年internet由arpanetmilnet等幾個計算機網(wǎng)絡合并而成作為internet的早期骨干網(wǎng)arpanet試驗并奠定了internet存在和發(fā)展的基礎較好地解決了異種機網(wǎng)絡互聯(lián)的一系列理論和技術(shù)問題 1983年arpanet分裂為兩部分arpanet和純軍事用的milnet該年1 月arpa把tcpip協(xié)議作為arpanet的標準協(xié)議其后人們稱呼這個以arpanet為主干網(wǎng)的網(wǎng)際互聯(lián)網(wǎng)為internettcp ip協(xié)議簇便在internet中進行研究試驗并改進成為使用方便效率極好的協(xié)議簇與此同時局域網(wǎng)

9、和其它廣域網(wǎng)的產(chǎn)生和蓬勃發(fā)展對 internet的進一步發(fā)展起了重要的作用其中最為引人注目的就是美國國家科學基金會nsf national science foundation 建立的美國國家科學基金網(wǎng)nsfnet 1986年nsf建立起了六大超級計算機中心為了使全國的科學家工程師能 夠共享這些超級計算機設施nsf建立了自己的基于tcpip協(xié)議簇的計算機網(wǎng)絡nsfnetnsf在全國建立了按地區(qū)劃分的計算機廣域網(wǎng)并將這些 地區(qū)網(wǎng)絡和超級計算中心相聯(lián)最后將各超級計算中心互聯(lián)起來地區(qū)網(wǎng)的構(gòu)成一般是由一批在地理上局限于某一地域在管理上隸屬于某一機構(gòu)或在經(jīng)濟上有共同 利益的用戶的計算機互聯(lián)而成連接各地區(qū)

10、網(wǎng)上主通信結(jié)點計算機的高速數(shù)據(jù)專線構(gòu)成了nsfnet的主干網(wǎng)這樣當一個用戶的計算機與某一地區(qū)相聯(lián)以后 它除了可以使用任一超級計算中心的設施可以同網(wǎng)上任一用戶通信還可以獲得網(wǎng)絡提供的大量信息和數(shù)據(jù)這一成功使得nsfnet于1990年6月徹底取 代了arpanet而成為internet的主干網(wǎng) 網(wǎng)頁是網(wǎng)站中的一頁通常是html格式文件comcomjsp等網(wǎng)頁通常用圖像檔來提供圖畫網(wǎng)頁要透過網(wǎng)頁瀏覽器來閱讀 網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素是承載各種網(wǎng)站應用的平臺通俗的說您的網(wǎng)站就是由網(wǎng)頁組成的如果您只有和虛擬主機而沒有制作任何網(wǎng)頁的話您的客戶仍舊無法訪問您的網(wǎng)站 所謂網(wǎng)站 website 就是指在網(wǎng)際網(wǎng)路

11、因特網(wǎng)上根據(jù)一定的規(guī)則使用html等工具制作的用於展示特定內(nèi)容的相關網(wǎng)頁的集合簡單地說網(wǎng)站是一種通訊工具就像布告欄一樣人們可以通過網(wǎng)站來發(fā)布自己想要公開的資訊信息或者利用網(wǎng)站來提供相關的網(wǎng)路服務網(wǎng)絡服務人們可以通過網(wǎng)頁瀏覽器來訪問網(wǎng)站獲取自己需要的資訊信息或者享受網(wǎng)路服 dreamweaver 簡介 dreamweaver是美國macromedia公司開發(fā)的集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁編輯器它是第一套針對專業(yè)網(wǎng)頁設計師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網(wǎng)頁1最佳的制作效率 dreamweaver可以用最快速的方式將fir

12、eworksfreehand或photoshop等檔案移至網(wǎng)頁上使用檢色吸管工具選擇熒幕上的顏色可設定最接近的網(wǎng)頁安全色對于選單快捷鍵與格式控制都只要一個簡單步驟便可完成dremweaver能與您喜愛的設計工具如playback flashshockwave和外掛模組等搭配不需離開dreamweaver便可完成整體運用流程自然順暢除此之外只要單擊便可使dreamweaver自動開啟firework或photoshop來進行編輯與設定圖檔的最佳化 2網(wǎng)站管理 使用網(wǎng)站地圖可以快速制作網(wǎng)站雛形設計更新和重組網(wǎng)頁改變網(wǎng)頁位置或檔案名稱dreamweaver 會自動更新所有連結(jié)使用支援文字html碼h

13、tml屬性標簽和一般語法的搜尋及置換功能使得復雜的網(wǎng)站更新變得迅速又簡單 3無可比擬的控制能力 dreamweaver是唯一提供roundtrip html視覺化編輯與原始碼編輯同步的設計工具它包含homesite和bbedit等主流文字編輯器幀 frames 和表格的制作速度快的令您無法想像進階表格編輯功能使您簡單的選擇單格行欄或作未連續(xù)之選取甚至可以排序或格式化表格群組dreamweaver 支援精準定位利用可輕易轉(zhuǎn)換成表格的圖層以拖拉置放的方式進行版面配置所見即所得 dreamweaver成功整合動態(tài)式出版視覺編輯及電子商務功能提供超強的支援能力給third-party廠商包含asp a

14、pachebroadvision cold fusionicat tango與自行發(fā)展的應用軟體當您正使用dreamweaver在設計動態(tài)網(wǎng)頁時所見即所得的功能讓您不需要透過瀏覽器就能預覽網(wǎng)頁夢幻樣版和xml dreamweaver將內(nèi)容與設計分開應用于快速網(wǎng)頁更新和團隊合作網(wǎng)頁編輯建立網(wǎng)頁外觀的樣版指定可編輯或不可編輯的部份內(nèi)容提供者可直接編輯以樣式為主的內(nèi)容卻不會不小心改變既定之樣式您也可以使用樣版正確地輸入或輸出xml內(nèi)容 dreamweaver還集成了程序開發(fā)語言對aspnetphpjs的基本語言和連接操作數(shù)據(jù)庫都是完全支持的htmlhypertext mark-up language

15、即超文本標記語言或超文本鏈接標示語言是目前網(wǎng)絡上應用最為廣泛的語言也是構(gòu)成網(wǎng)頁文檔的主要語言html文本是由html命令組成的描述性文本html命令可以說明文字圖形動畫聲音表格鏈接等html的結(jié)構(gòu)包括頭部head主體body兩大部分其中頭部描述瀏覽器所需的信息而主體則包含所要說明的具體內(nèi)容html文檔制作不是很復雜且功能強大支持不同數(shù)據(jù)格式的文件鑲?cè)脒@也是盛行的原因之一其主要特點如下 1 簡易性html版本升級采用超集方式從而更加靈活方便 2 可擴展性html語言的廣泛應用帶來了加強功能增加標識符等要求html采取子類元素的方式為系統(tǒng)擴展帶來保證 3 平臺無關性雖然pc機大行其道但使用mac等

16、其他機器的大有人在html可以使用在廣泛的平臺上這也是盛行的另一個原因 用什么可以編輯html html其實是文本它需要瀏覽器的解釋html的編輯器大體可以分為三種 1 基本編輯軟件使用windows自帶的記事本或?qū)懽职娑伎梢跃帉懏斎蝗绻阌脀ps來編寫也可以不過存盤com作為擴展名這樣瀏覽器就可以解釋執(zhí)行了 2 半所見即所得軟件這種軟件能大大提高開發(fā)效率它可以使你在很短的時間內(nèi)做出homepage且可以學習html這種類型的軟件主要有hotdog還有國產(chǎn)的軟件網(wǎng)頁作坊 3 所見即所得軟件使用最廣泛的編輯器完全可以一點不懂html的知識就可以做出網(wǎng)頁這類軟件主要有frontpage98drea

17、mweaver 更先進難懂的技術(shù)xhtml xhtml中的x是可擴展的意思xhtml就是可擴展的超文本標記語言它比html有更嚴格的要求如果說html是漢語那么xhtml就是標準普通話對于現(xiàn)在才剛剛開始學習網(wǎng)頁設計的朋友直接學習xhtml是最佳的選擇事實上它也屬于html家族并且它是基于xml的對比以前各個版本的html它具有更嚴格的書寫標準更好的跨平臺能力由于某些需要xhtml將以前版本的html能夠?qū)崿F(xiàn)的一些功能交給了css這意味著你將需要學習兩種技術(shù)但是這確實是web未來發(fā)展的潮流flash的前身是future wave公司的future splash是世界上第一個商用的二維矢量動畫軟件

18、用于設計和編輯flash文檔1996年11月美國macromedia公司收購了future wave并將其改名為flash在出到flash 8以后macromedia又被adobe公司收購最新版本為adobe flash cs5flash通常也指macromediflash player現(xiàn)adobe flash player用于播放flash文件flash的特性1flash被大量應用于互聯(lián)網(wǎng)網(wǎng)頁的矢量動畫設計 因為使用向量運算（vector graphics）的方式產(chǎn)生出來的影片占用存儲空間較小 2使用flash創(chuàng)作出的影片有自己的特殊檔案格式（swf） 該公司聲稱全世界97的網(wǎng)絡瀏覽器都內(nèi)建

19、flash播放器（flash player） 3flash是macromedia提出的富因特網(wǎng)應用ria概念的實現(xiàn)平臺flash 是一種創(chuàng)作工具設計人員和開發(fā)人員可使用它來創(chuàng)建演示文稿應用程序和其它允許用戶交互的內(nèi)容flash 可以包含簡單的動畫視頻內(nèi)容復雜演示文稿和應用程序以及介于它們之間的任何內(nèi)容通常使用 flash 創(chuàng)作的各個內(nèi)容單元稱為應用程序即使它們可能只是很簡單的動畫您也可以通過添加圖片聲音視頻和特殊效果構(gòu)建包含豐富媒體的 flash 應用程序 flash 特別適用于創(chuàng)建通過 internet 提供的內(nèi)容因為它的文件非常小flash 是通過廣泛使用矢量圖形做到這一點的與位圖圖形相比

20、矢量圖形需要的內(nèi)存和存儲空間小很多因為它們是以數(shù)學公式而不是大型數(shù)據(jù)集來表示的位圖圖形之所以更大是因為圖像中的每個像素都需要一組單獨的數(shù)據(jù)來表示 要在 flash 中構(gòu)建應用程序可以使用 flash 繪圖工具創(chuàng)建圖形并將其它媒體元素導入 flash 文檔接下來定義如何以及何時使用各個元素來創(chuàng)建設想中的應用程序 在 flash 中創(chuàng)作內(nèi)容時需要在 flash 文檔文件中工作flash 文檔的為 fla fla flash 文檔有四個主要部分 舞臺是在回放過程中顯示圖形視頻按鈕等內(nèi)容的位置在flash 基礎中將對舞臺做詳細介紹 時間軸用來通知 flash 顯示圖形和其它項目元素的時間也可以使用時間

21、軸指定舞臺上各圖形的分層順序位于較高圖層中的圖形顯示在較低圖層中的圖形的上方 庫面板是 flash 顯示 flash 文檔中的媒體元素列表的位置 actionscript 代碼可用來向文檔中的媒體元素添加交互式內(nèi)容例如可以添加代碼以便用戶在單擊某按鈕時顯示一幅新圖像還可以使用 actionscript 向應用程序添加邏輯邏輯使應用程序能夠根據(jù)用戶的操作和其它情況采取不同的工作方式flash 包括兩個版本的 actionscript可滿足創(chuàng)作者的不同具體需要有關編寫 actionscript 的詳細信息請參閱幫助面板中的學習 flash 中的 actionscript 20 flash 包含了許

22、多種功能如預置的拖放用戶界面組件可以輕松地將 actionscript 添加到文檔的內(nèi)置行為以及可以添加到媒體對象的特殊效果這些功能使 flash 不僅功能強大而且易于使用 完成 flash 文檔的創(chuàng)作后可以使用文件 發(fā)布命令發(fā)布它這會創(chuàng)建文件的一個壓縮版本其擴展名為 swf swf 然后就可以使用 flash player 在 web中播放 swf 文件或者將其作為獨立的應用程序進行播放photoshop是adobe公司旗下最為出名的圖像處理軟件之一集圖像掃描編輯修改圖像制作廣告創(chuàng)意圖像輸入與輸出于一體的圖形圖像處理軟件深受廣大平面設計人員和電腦美術(shù)愛好者的喜愛從功能上看photoshop可

23、分為圖像編輯圖像合成校色調(diào)色及特效制作部分 圖像編輯是圖像處理的基礎可以對圖像做各種變換如放大縮小旋轉(zhuǎn)傾斜鏡象透視等也可進行復制去除斑點修補修飾圖像的殘損等這在婚紗攝影人像處理制作中有非常大的用場去除人像上不滿意的部分進行美化加工得到讓人非常滿意的效果 圖像合成則是將幾幅圖像通過圖層操作工具應用合成完整的傳達明確意義的圖像這是美術(shù)設計的必經(jīng)之路photoshop提供的繪圖工具讓外來圖像與創(chuàng)意很好地融合成為可能使圖像的合成天衣無縫 校色調(diào)色是photoshop中深具威力的功能之一可方便快捷地對圖像的顏色進行明暗色編的調(diào)整和校正也可在不同顏色進行切換以滿足圖像在不同領域如網(wǎng)頁設計印刷多媒體等方面應用 特效制作在photoshop中主要由濾鏡通道及工具綜合應用完成包括圖像的特效創(chuàng)意和特效字的制作如油畫浮雕石膏畫素描等常用的傳統(tǒng)美術(shù)技巧都可藉由photoshop特效完成而各種特效字的制作更是很多美術(shù)設計師熱衷于photoshop的研究的原因aspasp是active server pages 的英文縮寫即動態(tài)服務器