畢業(yè)論文網(wǎng)頁設(shè)計論文+HTML.doc

網(wǎng)頁設(shè)計論文 專業(yè)：計算機科學(xué)與技術(shù)班級： 05本（1） 姓名： 學(xué)號： 指導(dǎo)老師： 摘 要隨著Internet在中國的迅速發(fā)展,人們?nèi)粘Ｉ钪性絹碓蕉嗟厥褂眠@項新的技術(shù)來為自己的工作和學(xué)習(xí)服務(wù).由于WEB頁面能把文本、圖像、聲音、動畫、視像等多種媒體信息集于一體，不但使信息的顯示更加生動，而且使信息的瀏覽更為方便,同時WEB頁能實現(xiàn)網(wǎng)上交易平臺、客戶信息反饋，方便了企業(yè)與客戶之間信息交流，因此許多企業(yè)紛紛建設(shè)網(wǎng)站以增強企業(yè)知名度.魔法樂園網(wǎng)站是一個綜合性的個人網(wǎng)站，集娛樂、科技、休閑、時尚美圖及超酷動畫于一體，絕對讓你在瀏覽網(wǎng)站的過程中既能學(xué)到知識，也能娛樂身心，每個網(wǎng)頁內(nèi)容都相當(dāng)豐富。網(wǎng)站設(shè)計風(fēng)格新穎：雖然看似普通，但又獨居一格，別有一番風(fēng)味。關(guān)鍵字：相冊、散文、笑話、花草、科技、趣聞、計算機Abstract：With the rapid development of Internet technique in China ,more and more people use the new tech as a tool severing their life and study . Because WEB page can collect text, image, sound, animation, video together.and the hypertext property of homepage can not only make the display of information pages lively, but also make the browse of information more convenient.So,Many enterprises also make their publications online . Magic Kingdom site is a comprehensive personal website, of entertainment, science and technology, leisure, fashion and cool animation Meitu integrated definitely let you visit the Web site can learn the process of knowledge can also entertainment each Web content is very rich. Web site design style novel: Although seemingly ordinary, but a single grid, do not have a flavor.Keyword: Photos, essays, jokes, plants, science and technology, anecdote, computer第一章 緒 論1.1設(shè)計思想通過網(wǎng)站，全面宣傳信息，使人們達到綜合娛樂的目的。有這么一句俗語：良好的開端是成功的一半。在網(wǎng)站設(shè)計上也是如此，首頁的設(shè)計是一個網(wǎng)站成功與否的關(guān)鍵。人們往往看到第一頁就已經(jīng)對你的站點有一個整體的感覺。是不是能夠促使瀏覽者繼續(xù)點擊進入，是否能夠吸引瀏覽者留在站點上，全憑首頁設(shè)計的功力了。所以，首頁的設(shè)計和制作是絕對要重視和花心思的。 所以魔法樂園網(wǎng)對網(wǎng)頁的首頁特別設(shè)計，更強的吸引了觀眾的眼光。1.2 開發(fā)工具的選用及介紹Dreamweaver的優(yōu)勢：Macromedia Dreamweaver 8 是建立 Web 站點和應(yīng)用程序的專業(yè)工具。它將可視布局工具、應(yīng)用程序開發(fā)功能和代碼編輯支持組合在一起，其功能強大，使得各個層次的開發(fā)人員和設(shè)計人員都能夠快速創(chuàng)建界面吸引人的基于標(biāo)準的網(wǎng)站和應(yīng)用程序。從對基于 CSS 的設(shè)計的領(lǐng)先支持到手工編碼功能，Dreamweaver 提供了專業(yè)人員在一個集成、高效的環(huán)境中所需的工具。開發(fā)人員可以使用 Dreamweaver 及所選擇的服務(wù)器技術(shù)來創(chuàng)建功能強大的 Internet 應(yīng)用程序，從而使用戶能連接到數(shù)據(jù)庫、Web 服務(wù)和舊式系統(tǒng)。Macromedia Dreamweaver 8 是構(gòu)建網(wǎng)站和應(yīng)用程序的專業(yè)選擇。它提供可視布局工具、應(yīng)用程序開發(fā)功能、代碼編輯支持的強大組合，使各個技術(shù)級別的開發(fā)者和設(shè)計者都能夠快速創(chuàng)建可視化、吸引人的基于標(biāo)準的站點和應(yīng)用程序。從基于 CSS 設(shè)計的領(lǐng)先支持到手工編寫的代碼功能，Dreamweaver 提供在集成的、無縫的環(huán)境中所需的專業(yè)工具。開發(fā)者可以選擇將 Dreamweaver 與服務(wù)器技術(shù)結(jié)合使用，構(gòu)建強大的 Internet 應(yīng)用程序，該應(yīng)用程序?qū)⒂脩暨B接到數(shù)據(jù)庫、實時數(shù)據(jù)服務(wù)和原有系統(tǒng)。Dreamweaver的特點：最佳的制作效率：Dreamweaver可以用最快速的方式將Fireworks，F(xiàn)reeHand，或Photoshop等檔案移至網(wǎng)頁上。使用檢色吸管工具選擇螢?zāi)簧系念伾稍O(shè)定最接近的網(wǎng)頁安全色。對於選單，快捷鍵與格式控制，都只要一個簡單步驟便可完成。Dremweaver能與您喜愛的設(shè)計工具，如Playback Flash，Shockwave和外掛模組等搭配，不需離開Dremweaver便可完成，整體運用流程自然順暢。除此之外，只要單擊便可使Dreamweaver自動開啟Firework或Photoshop來進行編輯與設(shè)定圖檔的最佳化。網(wǎng)站管理：使用網(wǎng)站地圖可以快速制作網(wǎng)站雛形，設(shè)計，更新和重組網(wǎng)頁。改變網(wǎng)頁位置或檔案名稱，Dreamweaver會自動更新所有連結(jié)。使用支援文字，HTML碼，HTML屬性標(biāo)簽和一般語法的搜尋及置換功能使得復(fù)雜的網(wǎng)站更新變得迅速又簡單。無可比擬的控制能力：Dreamweaver是唯一提供Roundtrip HTML、視覺化編輯與原始碼編輯同步的設(shè)計工具。它包含HomeSite和BBEdit等主流文字編輯器。幀(frames)和表格的制作速度快的令您無法想像。進階表格編輯功能使您簡單的選擇單格、行、欄或作未連續(xù)之選取。甚至可以排序或格式化表格群組，Dreamweaver支援精準定位，利用可輕易轉(zhuǎn)換成表格的圖層以拖拉置放的方式進行版面配置。所見即所得：Dreamweaver成功整合動態(tài)式出版視覺編輯及電子商務(wù)功能，提供超強的支援能力給Third-party廠商，包含ASP， Apache，BroadVision， Cold Fusion，iCAT， Tango與自行發(fā)展的應(yīng)用軟體。當(dāng)您正使用Dreamweaver在設(shè)計動態(tài)網(wǎng)頁時，所見即所得的功能，讓您不需要透過瀏覽器就能預(yù)覽網(wǎng)頁。夢幻樣版和XML：Dreamweaver將內(nèi)容與設(shè)計分開，應(yīng)用於快速網(wǎng)頁更新和團隊合作網(wǎng)頁編輯。建立網(wǎng)頁外觀的樣版，指定可編輯或不可編輯的部份，內(nèi)容提供者可直接編輯以樣式為主的內(nèi)容卻不會不小心改變既定之樣式。您也可以使用樣版正確地匯入或輸出XML內(nèi)容。全方位的呈現(xiàn)：利用Dreamweaver設(shè)計的網(wǎng)頁，可以全方位的呈現(xiàn)在任何平臺的熱門瀏覽器上。對于cascading style sheets的動態(tài)HTML支援和鼠標(biāo)換圖效果，聲音和動畫的DHTML效果資料庫可在Netscape和Microsoft瀏覽器上執(zhí)行。使用不同瀏覽器檢示功能，Dreamweaver可以告知您在不同瀏覽器上執(zhí)行的成效如何。當(dāng)有新的瀏覽器上市時，只要從Dreamweaver的網(wǎng)站在下載它的描述檔，便可得知詳盡的成效報告。第二章 網(wǎng)站總體分析與設(shè)計2.1 網(wǎng)站系統(tǒng)分析根據(jù)前面的設(shè)計思想進行分析，按照系統(tǒng)開發(fā)的基本觀點對網(wǎng)站進行分解，從內(nèi)容上可對網(wǎng)站作如下劃分：個性主頁：將個人的珍藏公布出來與大家分享，將自己成長過程中的心得體會作為經(jīng)驗展現(xiàn)出來，希望能給迷途的人指引方向。相冊貼貼圖：內(nèi)容豐富，羅列了各類的圖片，可謂之大圖庫。散文天地：整合了各散文大家的精粹，讓熱愛文學(xué)的朋友觀而止步。娛樂笑話王國：搞笑短信、爆笑網(wǎng)文、笑話大全、星座運程，絕對讓你開懷大笑。奇花異草：見所未見、聞所未聞的花草科技趣聞：具體介紹了各種電腦故障及其相關(guān)的解決方案。2.2 主頁設(shè)計網(wǎng)站主頁采用靜、動相結(jié)合的方式，即靜態(tài)的主畫面和動態(tài)的flash各滾動字幕相結(jié)合，體現(xiàn)個人主頁獨特的風(fēng)格。炫麗的flash、超具魅力的導(dǎo)航和另人賞心悅目的頁面布局是本頁的亮點。主頁截圖如下：主要程序代碼如下：魔法樂園 第三章 詳細設(shè)計3.1 功能首頁布局簡單明了，精華部分盡在鏈接中。要想了解對應(yīng)專題的相關(guān)內(nèi)容，需點擊鏈接。3.2 組成構(gòu)造頁頭是由圖片、文本和flash構(gòu)成的，動中有靜。Flash制作成品如下圖所示：導(dǎo)航的制作過程截圖如下：其代碼如下： 魔法樂園 歡迎訪問舒義凡的個人網(wǎng)站  網(wǎng)頁中導(dǎo)航對應(yīng)的有6個鏈接。鏈接一：個人主頁。這個網(wǎng)頁由靜態(tài)和動態(tài)圖片及動態(tài)Flash組成。圖片主要起點綴作用。Flash特效使讀者賞心悅目。部分代碼為： 個人資料 座右銘 佳句收藏 心情故事 留言板 今日推薦 鏈接二：相冊貼貼圖。這個網(wǎng)頁主要是展示了各類的圖片，給人以視覺的美感。網(wǎng)頁由動靜兩部分組成，圖片顯示了自然的生機，藍色的背景加上多姿的圖片，讓人流連忘返。部分代碼為： 自我寫真 手繪美女 美女明星 動漫卡通 風(fēng)景圖片 可愛小圖 電子相冊 鏈接三：散文天地。散文素有“美文”之稱，它除了有精神的見解、優(yōu)美的意境外，還有清新雋永、質(zhì)樸無華的文采。經(jīng)常讀一些好的散文，不僅可以豐富知識、開闊眼界，培養(yǎng)高尚的思想情操，還可以從中學(xué)習(xí)選材立意、謀篇布局和遣詞造句的技巧，提高自己的語言表達能力。部分代碼為： 百味人生 中國文化 詠物篇 感懷篇 情愛篇 人生篇 人物篇 茶文化 酒文化 門文化 當(dāng)代禮儀 鏈接四：娛樂笑話王國。笑話來源于生活,是學(xué)來的.笑話是一種經(jīng)過藝術(shù)加工的語言形式,是藝術(shù)化的語言.笑話是一種藝術(shù)方法,用這種方法造成以笑為藝術(shù)手段的文學(xué)藝術(shù)作品.部分代碼為： 爆笑網(wǎng)文 搞笑短信 笑話大全 星座血型與性格 鏈接五：奇花異草。稀奇少見的花草。部分代碼為： 花之物語 花草趣聞 蘭花 梅花 桂花 茉 莉 荷花 插花藝術(shù) 四季海棠 茶花 鏈接六：科技趣聞。電腦的普及已經(jīng)讓更多的家庭使用上了電腦，但是電腦并不象電視、VCD一樣，它具有一定的交互性，操作系統(tǒng)的組件相對復(fù)雜。在使用過程中，我們會人為或者其他方式的去改變電腦的內(nèi)部設(shè)置等，所以電腦就會出現(xiàn)很多讓人頭疼的毛病。很多問題有時候需要專業(yè)人員來解決，但是我們也可以借鑒別人積累的經(jīng)驗來處理電腦故障。部分代碼為： 電腦故障維修大全 常見系統(tǒng)故障 linux故障 死機故障 啟動故障 主板故障 局域網(wǎng)故障 CPU故障 網(wǎng)卡故障 第四章 本網(wǎng)頁設(shè)計制作規(guī)范基本要求：1. 在網(wǎng)站根目錄中開設(shè)images swf_music html 三個子目錄，根據(jù)需要再開temp 子目錄，images目錄中放不同欄目的頁面都要用到的公共圖片，例如背景圖、裝飾圖、banner 條、菜單、按鈕等等；html子目錄中放大部分非主頁網(wǎng)頁文件；swf_music 子目錄中放flash, mp3 等多媒體文件 。2. 在根目錄中原則上應(yīng)該按照首頁的欄目結(jié)構(gòu)，給每一個欄目開設(shè)一個目錄，根據(jù)需要在每一個欄目的目錄中開設(shè)一個images 和swf_music 的子目錄用以放置此欄目專有的圖片和多媒體文件，如果這個欄目的內(nèi)容特別多，又分出很多下級欄目，可以相應(yīng)的再開設(shè)其他目錄。3. temp 目錄中的文件往往會比較多，建議以時間為名稱開設(shè)目錄，將客戶陸續(xù)提供的資料歸類整理。4. 除非有特殊情況，目錄、文件的名稱全部用小寫英文字母、數(shù)字、下劃線的組合，其中不得包含漢字、空格和特殊字符；目錄的命名請盡量以英文為指導(dǎo)，不到萬不得已不要以拼音作為目錄名稱。補充：1.保證網(wǎng)站能夠與下一代的web 語言xml 標(biāo)準兼容，所有的HTML 標(biāo)簽的屬性都要用單引號或者雙引號括起，即我們應(yīng)該寫 而不 是 .2.允許全文檢索的頁面，為了使Internet 上的搜索引擎能夠有效檢索，在頻道的首頁的html的之間應(yīng)該加入Keywords 和Description 元標(biāo)記。3. CSS 文件的格式樣例代碼 ： 這里尤其要注意的是a:link a:visited a:hover a:actived 的排列順序一定要嚴格照上面的樣例代碼，否則或多或少會出問題。另外我們規(guī)定重定義的最先，偽類其次，自定義最后，便于自己和他人閱讀！ 為了保證不同瀏覽器上字號保持一致，字號建議用點數(shù)pt和像素px來定義，pt一般使用中文宋體的9pt和11pt，px一般使用中文宋體12px 和14.7px 這是經(jīng)過優(yōu)化的字號，黑體字或者宋體字加粗時，一般選用11pt和14.7px 的字號比較合適。 在寫 互相嵌套時，嚴格按照的規(guī)范，對于單獨的一個來說，對齊， 縮進兩個半角空格， 中如果還有嵌套的表格，也縮進兩個半角空格，如果中沒有任何嵌套的表格， 結(jié)束標(biāo)記應(yīng)該與 處于同一行，不要換行， 如我們注意在源代碼中不應(yīng)有這樣的代碼： 而應(yīng)該是這樣的： 這是因為瀏覽器認為換行相當(dāng)于一個半角空格，以上不規(guī)范的寫法相當(dāng)于無意中增加一個半角空格，如果確實有必要增加一個半角空格，也應(yīng)該這樣寫： 屬于同一個級別 的 一定是左首對齊的，另外不允許沒有任何內(nèi)容的空的單元格存在，高度大于等于12px 的單元格應(yīng)該 在 和 之間寫一 個 如果高度小于12px, 則應(yīng)該 在 和 之間插入一個1*1 大小的透明的gif 圖片，這是因為某些瀏覽器認為空單元格非法而不會予以解釋。如果代碼順序較亂，在DW3中可以通過command-apply souce formatting進行重新整理！5. Width 和height 的寫法也有統(tǒng)一的規(guī)范，一般情況下只有一列的表格，width 寫在 的標(biāo)簽內(nèi)，只有一行的表格，height 寫在 的標(biāo)簽內(nèi)，多行多列的表格，width 和height 寫在第一行或者第一列的 標(biāo)簽內(nèi)?？傊裱粭l原則：不出現(xiàn)多于一個的控制同一個單元格大小的height 和width, 保證任何一個width 和height 都是有效的，也就是你改動代碼中任何一個width 和height 的數(shù)值，都應(yīng)該在瀏覽器中看到變化。做到這一條不容易，需要較長時間的練習(xí)和思考。一般原則：1. 在排布表格之前，請大家一定要好好思考一個最佳的方案，表格的嵌套盡量控制在三層以內(nèi)，并且應(yīng)該盡量避免 兩個標(biāo)記，經(jīng)驗表明，這兩個標(biāo)記會帶來許多麻煩。 2. 一個網(wǎng)頁要盡量避免用整個一張大表格，所有的內(nèi)容都嵌套在這個大表格之內(nèi)，因為瀏覽器在解釋頁面的元素時，是以表格為單位逐一顯示，如果一張網(wǎng)頁是嵌套在一個大表格之內(nèi)，那么很可能造成的后果就是，當(dāng)瀏覽者敲入網(wǎng)址，他要先面對一片空白很長時間，然后所有的網(wǎng)頁內(nèi)容同時出現(xiàn)。如果必須這樣做，請使用 標(biāo)記，以便能夠使這個大表格分塊顯示。 3. 排版中我們經(jīng)常會遇到需要進行首行縮進的處理，不要使用 或者全角空格來達到效果，規(guī)范的做法是在樣式表中定義 p text-indent: 2em; 然后給每一段加上 標(biāo)記，注意，一般情況下，請不要省略 結(jié)束標(biāo)記 。 4. 原則上，我們禁止用 來人為干預(yù)圖片顯示的尺寸，而且建議 標(biāo)簽中不要帶上width 和height 兩個屬性，這是因為制作過程中，圖片往往需要反復(fù)的修改，這樣可以避免人為干預(yù)圖片顯示的尺寸，盡可能的發(fā)揮瀏覽器自身的功能；但是這樣的一個副作用是當(dāng)網(wǎng)頁還未加載圖片時，不會留出圖片的站位大小，可能會造成網(wǎng)頁在加載過程中抖動（如果圖片是插在一個固定大小的表格里的，不會有這個現(xiàn)象），尤其是當(dāng)圖片的尺寸較大時，這種現(xiàn)象會很明顯，所以當(dāng)預(yù)料到這種會明顯導(dǎo)致網(wǎng)頁抖動的情況會發(fā)生時，請大家務(wù)必在最后給 附上 width 和 height 屬性。 5. 為了最大程度的發(fā)揮瀏覽器自動排版的功能，在一段完整的文字中請盡量不要使用 來人工干預(yù)分段。 6. 不同語種的文字之間應(yīng)該有一個半角空格，但避頭的符號之前和避尾的符號之后除外漢字之間的標(biāo)點要用全角標(biāo)點，英文字母和數(shù)字周圍的括號應(yīng)該使用半角括號。 7. 所有的字號都應(yīng)該用樣式表來實現(xiàn)，禁止在頁面中出現(xiàn) 標(biāo)記。 8. 請不要在網(wǎng)頁中連續(xù)出現(xiàn)多于一個 的 也盡量少使用全角空格（英文字符集下，全角空格會變成亂碼），空白應(yīng)該盡量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 圖片來實現(xiàn)。 9. 中英文混排時，我們盡可能的將英文和數(shù)字定義為verdana 和arial 兩種字體。 10. 行距建議用百分比來定義，常用的兩個行距的值是line-height:120%/150%. 11. 網(wǎng)站中的路徑全部采用相對路徑，一般鏈接到某一目錄下的缺省文件的鏈接路徑不必寫全名，如我們不必這樣： 而應(yīng)該這樣： 12、嵌入圖形文本的使用較大的字體，建議不要在圖形中包括文本。 13、“網(wǎng)頁大小”定義為網(wǎng)頁的所有文件大小的總和，包括HTML文件和所有的嵌入的對象。用戶喜歡快的而不是新奇的站點。對于解調(diào)器用戶，網(wǎng)頁大小保持在34K以下為合適。 文件命名原則：1. 每一個目錄中應(yīng)該包含一個缺省的html 文件，文件名統(tǒng)一用index.htm 2文件名稱統(tǒng)一用小寫的英文字母、數(shù)字和下劃線的組合。 3. 命名原則的指導(dǎo)思想一是使得你自己和工作組的每一個成員能夠方便的理解每一個文件的意義，二是當(dāng)我們在文件夾中使用“按名稱排例”的命令時，同一種大類的文件能夠排列在一起，以便我們查找、修改、替換、計算負載量等等操作