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

畢業(yè)設(shè)計（論文）題目個人主頁設(shè)計培養(yǎng)部門傳媒與信息工程學(xué)院專業(yè)名稱 計算機(jī)應(yīng)用技術(shù)學(xué)生姓名**學(xué)號*x**x**x* *x**x**x**x**x**x**x**x*?學(xué)生姓名**學(xué)號*x**x**x* *x**x**x**x**x**x**x**x*?,T*?,T*?,T*?,T*?,T*?,T*?,T*?,T*?,T*?,T*?,T*導(dǎo)師姓名**職稱*x**x**x#*x#*x#*x#*x#*x#*x#*x#*Y**Y**y**Y**Y**y**Y**Y**y*隨著網(wǎng)絡(luò)信息的飛速發(fā)展，網(wǎng)絡(luò)傳媒以被越來越多的企業(yè)看好，而網(wǎng)頁就是傳媒很好的一種方式，目前有很多人都有自己個性的網(wǎng)頁，所以研究個人網(wǎng)頁是很有必要的。本次針對自己的平時喜愛結(jié)合個性而制作，每個網(wǎng)頁都必須牽涉到編碼，代碼的地位是非常重要的，本次代碼應(yīng)用雖然簡單，但是都是自己的，也已不可能重復(fù)，以最簡單的鏈接方式組織代碼的特點，對代碼的增、刪、改和檢索由自己進(jìn)行管理和控制。本次運用的Dreamweaver8,具有集網(wǎng)頁設(shè)計、網(wǎng)頁開發(fā)和頁面管理功能于一身,具有可視化、支持多平臺和跨瀏覽器的特性，是目前網(wǎng)頁設(shè)計、開發(fā)、制作的首選工具。并對其功能進(jìn)行了論述,實現(xiàn)了整個網(wǎng)頁功能的使用。通過對整個網(wǎng)頁的設(shè)計,說明了在制作過程中遇到常見問題的解決方法。關(guān)鍵詞：PS技術(shù)，Dreamweaver8AbstractWiththerapiddevelopmentofnetworkinformation,networkmediabymoreandmoreenterprises,andonewayisWebpagemediaisverygood,therearealotofpeoplehavetheirownpersonalityWebpage,sothestudyofpersonalWebpageisnecessary.Thetimefortheirfavoritecombinationofpersonalityandproduction,eachWebpagemustinvolvescode,codepositionisveryimportant,theapplicationcode,althoughsimple,butallareown,alsohasnotbeenpossibletorepeat,characteristicsoftissueinthemostsimplelinkcode,add,delete,modifyandretrievalofthecodebytheirownmanagementandcontrol.TheuseofDreamweaver8,issetdesign,developmentandWebpageWebpagepagemanagementfunctioninabody,hasthecharacteristicsofvisualization,supportmultiplatformandcrossbrowser,isthedesign,development,productionWebpagetoolofchoice.Anddiscussedthefunction,realizedthefunctionofuseWebpage.ThroughthedesignofthewholeWebpage,illustratesthesolutionstocommonproblemsintheproductionprocess.Keywords:PStechnology,Dreamweaver8目錄TOC\o"1-5"\h\z\o"CurrentDocument"第一章前言 11.1網(wǎng)頁制作的背景和意義 11.2相關(guān)術(shù)語的闡述 2\o"CurrentDocument"第二章DREAMWEAVERMX及PS簡介 3DREAMWEAVERMX簡介 3網(wǎng)頁圖像設(shè)計工具 Photoshop 4?網(wǎng)頁設(shè)計工具 DREAMWEAVER 52.4網(wǎng)頁設(shè)計的相關(guān)步驟 5\o"CurrentDocument"第三章 網(wǎng)頁需求分析 6可行性分析 63.2網(wǎng)頁需求分析 73.3網(wǎng)頁實現(xiàn)功能 7\o"CurrentDocument"第四章網(wǎng)頁的總體規(guī)劃 8制作網(wǎng)頁的一般步驟 84.2網(wǎng)頁包括的元素 84.3網(wǎng)頁層次結(jié)構(gòu) 104.4目錄的層次結(jié)構(gòu) 10\o"CurrentDocument"第五章 代碼和網(wǎng)頁測試 12代碼和具體內(nèi)容的意義 12頁測試 16網(wǎng)頁發(fā)布及網(wǎng)頁維護(hù) 16結(jié)論 17\o"CurrentDocument"參考文獻(xiàn) 18致謝 19第一章前言隨著互聯(lián)網(wǎng)的發(fā)展，每個人都有了在網(wǎng)絡(luò)上自由言論的權(quán)利，也有展示自己與眾不同的平臺，你可以有QQ,有博客，有微博，有論壇，貼吧各種，你可以在上面暢所欲言，但是這些，都只是你的一部分，如果你擁有個人網(wǎng)頁，把你所有的愛好，個性集合在一起。充分展示只屬于你自己的獨特性。用的Dreamweaver8，具有集網(wǎng)頁設(shè)計、網(wǎng)頁開發(fā)和頁面管理功能于一身，具有可視化、支持多平臺和跨瀏覽器的特性，是目前網(wǎng)頁設(shè)計、開發(fā)、制作的首選工具。并對其功能進(jìn)行了論述，實現(xiàn)了整個網(wǎng)頁功能的使用。通過對整個網(wǎng)頁的設(shè)計，說明了在制作過程中遇到常見問題的解決方法。面對日益加快的生活節(jié)奏和信息社會日新月異的變化，個人極需要一種快捷，便利的平臺來對外宣傳自我形象,介紹最新動態(tài)和及時信息更新服務(wù)。如何運用現(xiàn)代化信息技術(shù)完成這一目標(biāo)，建立“一座自我與別人之間暢通無阻的大橋”已成為自己應(yīng)該解決的重要課題之一，本網(wǎng)頁正是為這一目標(biāo)設(shè)計制作的1.1網(wǎng)頁制作的背景和意義我們讀書就是為了獲得知識，現(xiàn)在我們學(xué)習(xí)了Dreamweaver動態(tài)網(wǎng)頁設(shè)計，當(dāng)然就是要能做一個精美的網(wǎng)頁。在此次畢業(yè)設(shè)計中，我們要能更加的了解Dreameaver強(qiáng)大的功能和更好的使用它。通過此次設(shè)計我們還要能夠知道靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)也的區(qū)別。誠然，次此設(shè)計的個人網(wǎng)頁，一方面是為了完成畢業(yè)作業(yè)，但更重要的是把我們所學(xué)到的東西用在具體的實踐之中，所以，這次設(shè)計的目的也是要我們更好的掌握和使用好Dreamweaver的核心工具和技術(shù)，以便提高對網(wǎng)頁知識的更深層了解。第三點也是最要的一點是，把我們在書本上學(xué)到的知識充分運用到此次設(shè)計之中。使我們的在書上學(xué)到的東西不僅僅停留在表面上，把這些東西都用在所要做的網(wǎng)頁上面。以達(dá)到老師要求的效果和學(xué)以致用。我們發(fā)現(xiàn)這樣一個事實，一個用戶在訪問一個網(wǎng)頁時一般來講只對該網(wǎng)頁的部分內(nèi)容感性趣，而且這種興趣會持續(xù)一段時間。這點啟發(fā)了我們，如果能根據(jù)用戶的喜好為不同的用戶顯示其個性化的頁面，即著重顯示該用戶感興趣的內(nèi)容，將為用戶節(jié)約大量的檢索時間，而且這樣的網(wǎng)頁顯然是更具有吸引力的。一些頁面已經(jīng)在這方面作出了一定的嘗試，通常采用的方法是，在用戶登陸時為其提供一系列的選項，使用戶能夠?qū)撁孢M(jìn)行一些自主的設(shè)置。這樣做能夠使頁面呈現(xiàn)一定程度的個性化，但是對用戶來講，還是比較煩瑣，而且在用戶了解一個頁面前讓其對頁面進(jìn)行設(shè)置，其結(jié)果未免有些粗糙。于是我們構(gòu)想了這樣一種方案，對用戶登陸后的動作進(jìn)行跟蹤，分析，發(fā)掘用戶點擊的規(guī)律，即用戶先后點擊的關(guān)聯(lián)規(guī)則，這樣，在用戶點擊一個主題（鏈接）之后，系統(tǒng)能夠自動生成一頁面，其中包含了該主題下用戶經(jīng)常關(guān)注的內(nèi)容（若干鏈接），這樣便在無須用戶作出任何額外工作的情況下實現(xiàn)了為用戶量身訂做的個性化頁面。本文主要完成HTML服務(wù)器端的設(shè)計實現(xiàn)管理個人資料、照片上傳、網(wǎng)文撰寫、客戶留言、日志以及后臺管理等Dreamweaver頁面及整個實驗網(wǎng)頁的組織建立和測試工作。我通過個人網(wǎng)頁展示出自己的風(fēng)采。不同的人，其網(wǎng)頁上的展示方式或手法各有不同，千變?nèi)f化。在網(wǎng)頁策劃中，如何把把自己通過網(wǎng)頁展示出來，是我設(shè)計的重要內(nèi)容。1.2相關(guān)術(shù)語的闡述WWW是“WorldWideHTML〃的縮寫；HTML的意思則是“HypertextMarkupLanguage”,中文翻譯為“超文本標(biāo)記語言”?！俺谋尽本褪侵疙撁鎯?nèi)可以包含圖片、鏈接、甚至音樂，程序等非文字的元素。URLs是UniformResourceLocator的縮寫，統(tǒng)稱為統(tǒng)一資源定位器?？梢园阉胂蟪晌募木W(wǎng)絡(luò)擴(kuò)展。我們不但可以通過各種不同的方法指出在網(wǎng)絡(luò)的上哪一臺機(jī)器的目錄下的文件。這個文件可以通過各種不同的方法得到。在URL中還指定了訪問這一個文件的協(xié)議。在實際應(yīng)用中，URL經(jīng)常稱為“網(wǎng)址”或URL地址。TCP/IP協(xié)議（TransmissionControlProtocol/InternetProtocol傳輸控制協(xié)議/因特網(wǎng)協(xié)議）所謂協(xié)議，其實應(yīng)該叫他網(wǎng)絡(luò)協(xié)議，它是計算機(jī)與計算機(jī)之間，進(jìn)行信息傳輸?shù)恼Z言，只有兩臺計算機(jī)具有相同的協(xié)議方能進(jìn)行信息傳輸，常見協(xié)議有IPX協(xié)議、TCP/IP協(xié)議等。IPX現(xiàn)廣泛應(yīng)用于局域網(wǎng)中，大多數(shù)局域網(wǎng)游戲都使用IPX協(xié)議。TCP/IP協(xié)議可以說它是你接入因特網(wǎng)的必備條件，因為它是因特網(wǎng)上的通用協(xié)議。第二章DreamweaverMX及PS簡介2.1DreamweaverMX簡介MacromediaDreamweaverMX是創(chuàng)建專業(yè)網(wǎng)站的最佳途徑,同時也是構(gòu)建強(qiáng)大Internet應(yīng)用程序的最簡便的途徑。它是Macromedia公司推出的網(wǎng)頁設(shè)計、網(wǎng)站開發(fā)和動畫圖像處理等方面的綜合性工具，它具有強(qiáng)大的功能和友好的工作界面，已經(jīng)被越來越多的網(wǎng)頁設(shè)計者和網(wǎng)站開發(fā)人員所接受。隨著該軟件應(yīng)用范圍的擴(kuò)大，其版本得到快速地更新，功能也不斷增強(qiáng)。它集網(wǎng)頁設(shè)計、網(wǎng)站開發(fā)和站點管理功能于一身，具有可視化、跨瀏覽器和支持多平臺的特性。支持多種標(biāo)準(zhǔn)服務(wù)器終端交互技術(shù)，利用該軟件可開發(fā)功能強(qiáng)大、高效的動態(tài)交互式網(wǎng)站。什么是DreamweaverDreamweaver是在網(wǎng)頁設(shè)計與制作領(lǐng)域中用戶最多、應(yīng)用最廣、功能最強(qiáng)大的軟件，隨著Dreamweaver8的發(fā)布，更堅定Dreamweaver在該領(lǐng)域的地位。它集網(wǎng)頁設(shè)計、網(wǎng)站開發(fā)和站點管理功能于一身，具有可視化、支持多平臺和跨瀏覽器的特性，是目前網(wǎng)站設(shè)計、開發(fā)、制作的首選工具。Dreamweave的特點為：?靈活的編寫方式Dreamweaver具有靈活編寫網(wǎng)頁的特點，不但將世界一流水平的“設(shè)計”和“代碼”編輯器合二為一，而且在設(shè)計窗口中還精化了源代碼，能幫助用戶按工作需要定制自己的用戶界面。?可視化編輯界面Dreamweaver是一種所見即所得的HTML編輯器，可實現(xiàn)頁面元素的插入和生成?；蛞暬庉嫮h(huán)境大量減少了代碼的編寫，同時亦保證了其專業(yè)性和兼容性，并且可以對內(nèi)部的HTML編輯器和任何第三方的HTML編輯器進(jìn)行實時的訪問。無論用戶習(xí)慣手工輸入HTML源代碼還是使用可視化的編輯界面，Dreamweaver都能提供便捷的方式使用戶設(shè)計網(wǎng)頁和管理網(wǎng)站變得更容易。?功能更多的css支持——CSS可視化設(shè)計、CSS檢查工具?動態(tài)跨瀏覽器驗證當(dāng)保存時系統(tǒng)自動檢查當(dāng)前文檔的跨瀏覽器有效性，可以指定何種瀏覽器為測試用瀏覽器，同時系統(tǒng)自動檢驗以確定頁面有沒有目標(biāo)瀏覽器不支持的tags或CSS結(jié)構(gòu)。動態(tài)跨瀏覽器有效性檢查功能可以自動核對tags和CSS規(guī)則是否適應(yīng)目前的主瀏覽器。?強(qiáng)大的WEB站點管理功能?內(nèi)建的圖形編輯引擎?Dreamweaver的集成特性Dreamweaver8繼承了Fireworks、Flash和Shockwave的集成特性，可以在這些Web創(chuàng)作工具之間自由地切換，輕松地創(chuàng)建美觀實用的網(wǎng)頁。?豐富的媒體支持能力可以方便地加入Java、Flash、Shockwave、ActiveX以及其他媒體oDreamweaver具有強(qiáng)大的多媒體處理功能，在設(shè)計DHTML和CSS方面表現(xiàn)得極為出色，它利用JavaScript和DHTML語言代碼輕松地實現(xiàn)網(wǎng)頁元素的動作和交互操作。Dreamweaver還提供行為和時間線兩種控件來產(chǎn)生交互式響應(yīng)和進(jìn)行動畫處理。?超強(qiáng)的擴(kuò)展能力Dreamweaver還支持第三方插件，任何人都可以根據(jù)自己的需要擴(kuò)展Dreamweaver的功能，并且可以發(fā)布這些插件。2.2網(wǎng)頁圖像設(shè)計工具 PhotoshopAdobe學(xué)校開發(fā)，處理圖形圖像的專門設(shè)計軟件。DTP和圖像軟件的結(jié)合，使設(shè)計師可在電腦上直接完成文字的錄入、排版、圖像處理、形象創(chuàng)造和分色制板的全過程，開創(chuàng)了“電腦平面設(shè)計"時代。Photoshop的專長在于圖像處理，而不是圖形創(chuàng)作。有必要區(qū)分一下這兩個概念。圖像處理是對已有的位圖圖像進(jìn)行編輯加工處理以及運用一些特殊效果，其重點在于對圖像的處理加工；圖形創(chuàng)作軟件是按照自己的構(gòu)思創(chuàng)意，使用矢量圖形來設(shè)計圖形，這類軟件主要有Adobe學(xué)校的另一個著名軟件Illustrator和Micromedia學(xué)校的Freehand。Photoshop系列中使用最廣泛的有Photoshop5.0版本、Photoshop7.0。2.3.網(wǎng)頁設(shè)計工具 DreamweaverMacromedia學(xué)校的產(chǎn)品的另一款“所見即所得”的網(wǎng)頁編輯工具。與Frontpage不同，Deamweaver采用的是Mac機(jī)浮動面版的設(shè)計風(fēng)格，對于初學(xué)者來說可能會感到不適應(yīng)。但當(dāng)你習(xí)慣了其操作方式后，就會發(fā)現(xiàn)Dreamweaver的直觀性與高效性是Frontpage所無法比擬的。Dreamweaver對于DHTML的支持特別好，可以輕而易舉地做出很多眩目的頁面特效。插件式的程序設(shè)計使得其功能可以無限的擴(kuò)展。Dreamweaver與Flash、Firework并稱為Macromedia的網(wǎng)頁制作三劍客，由于是同一學(xué)校的產(chǎn)品，因而在功能上有著一個非常緊密的結(jié)合。而最新推出的DreamweaverUltraDev更支持Asp,Jsp。因此，說Dreamweaver是高級網(wǎng)頁制作的首選并不為過。常見的版本為Dreamweaver3、Dreamweaver4、DreamweaverMX、Dreamweaver8.0、DreamweaverCS.所以我本次設(shè)計主要選用Dreamweaver8.0結(jié)合Photoshop7.0處理圖片。2.4網(wǎng)頁設(shè)計的相關(guān)步驟做網(wǎng)頁用DW的基本步驟第一:建立一個文件夾onspark在onspark中新建一個些基本的文件夾如imgcssup_filesincdata等第二:建立一個站點要指向onspark第三：建立一個index.html放在onspark中也就是根目錄下第四:構(gòu)思一些你想要加入的內(nèi)容第三章網(wǎng)頁需求分析3.1可行性分析由于越來越多個人開始建立自己的網(wǎng)頁，網(wǎng)頁除了具有傳播信息的功能外，還往往代表個人的形象。網(wǎng)頁建設(shè)商業(yè)化和廣告化的趨勢，對網(wǎng)頁設(shè)計的藝術(shù)性提出了更高的要求。雖然HTML語言提供了對常用Windows標(biāo)準(zhǔn)控件的支持，但是,由于Windows標(biāo)準(zhǔn)控件的形狀和顏色十分單一，網(wǎng)頁的視覺效果可能會很差。例如：列表框和下拉列表框只能呈現(xiàn)凹陷邊框，而且下拉列表的箭頭的顏色不能改變，滾動條只能出現(xiàn)在窗口的下邊和右邊，當(dāng)網(wǎng)頁分成多個幀的時候，滾動條就不可避免的出現(xiàn)在網(wǎng)頁的中間，破壞網(wǎng)頁的整體性。若在網(wǎng)頁的設(shè)計中主動配合Windows標(biāo)準(zhǔn)控件的形狀和顏色，網(wǎng)頁的創(chuàng)作空間就會受到限制。因此，有必要實現(xiàn)網(wǎng)頁中的自定義控件，以滿足網(wǎng)頁設(shè)計藝術(shù)化的要求。.網(wǎng)頁界面構(gòu)成要素與傳統(tǒng)媒體不同，網(wǎng)頁除了文字和圖像以外，還包含聲音、視頻和動畫等新興多媒體元素，更借助由代碼語言編程所實現(xiàn)的各種交互式效果，增加了網(wǎng)頁界面的生動性和復(fù)雜性，也使得網(wǎng)頁設(shè)計者需要考慮更多頁面元素的排布、優(yōu)化。一般來說，網(wǎng)頁的界面主要由下面幾個因素構(gòu)成：（1） 文字：文字元素是信息傳達(dá)的主體部分。網(wǎng)頁中的文字主要包括標(biāo)題、信息、文字鏈接、幾種主要形式。標(biāo)題和傳統(tǒng)媒體中信息傳達(dá)的基本作用相同，是內(nèi)容的簡概說明一般比較醒目、優(yōu)先編排。文字作為占據(jù)頁面重要比率的元素，同時又是信息重要載體，它的字體、大小、顏色和排布對頁面整體設(shè)計影響極大。（2） 圖形：圖形在網(wǎng)頁界面中具有重要作用。合理的運用圖形?？梢陨鷦又庇^、形象地表現(xiàn)設(shè)計主題。網(wǎng)頁中常用的圖形格式包括jpg和gif,這兩種格式壓縮比高，得到了規(guī)范瀏覽器的支持，下載速度快，具有跨平臺。3.2網(wǎng)頁需求分析Internet是目前世界上最大的計算機(jī)互聯(lián)網(wǎng)絡(luò)，它遍布全球，將世界各地各種規(guī)模的網(wǎng)絡(luò)連接成一個整體。作為Internet上一種先進(jìn)的，易于被人們所接受的信息檢索手段，WorldWideHTML(簡稱WWW)發(fā)展十分迅速，成為目前世界上最大的信息資源寶庫。據(jù)估計，目前Internet上已有上千萬個HTML頁面，其內(nèi)容范圍跨越了教育科研、文化事業(yè)、金融、商業(yè)、新聞出版、娛樂、體育等各個領(lǐng)域，其用戶群十分龐大，因此，建設(shè)一個好的HTML頁面對于一個機(jī)構(gòu)的發(fā)展十分重要。近年來，隨著網(wǎng)絡(luò)用戶要求的不斷提高及計算機(jī)科學(xué)的迅速發(fā)展，特別是數(shù)據(jù)庫技術(shù)在Internet中的廣泛應(yīng)用,HTML頁面向用戶提供的服務(wù)將越來越豐富，越來越人性化。因此網(wǎng)頁建設(shè)在Internet應(yīng)用上的地位顯而易見，它已成為政府、企事業(yè)單位信息化建設(shè)中的重要組成部分，從而倍受人們的重視。提高學(xué)校知名度，擴(kuò)大學(xué)校規(guī)模，學(xué)校的領(lǐng)導(dǎo)決定建立自己的學(xué)校網(wǎng)頁。3.3網(wǎng)頁實現(xiàn)功能本網(wǎng)頁給除自己之外的人提供一個了解自己的平臺，別人可以與自己及時地交換意見，產(chǎn)生互動，自己也可以及時對網(wǎng)頁進(jìn)行更新維護(hù)。前臺客戶系統(tǒng)功能：用戶可以瀏覽自己的一些基本的信息。用戶可以瀏覽自己設(shè)置的圖片文字。用戶可以查看自己的聯(lián)系方式。用戶可以瀏覽自己的帖子。用戶可以隨時發(fā)表自己的言論。后臺管理系統(tǒng)功能：增加、修改、刪除自己的最新的動態(tài)。修改、刪除留言板帖子。瀏覽、刪除最新信息。第四章網(wǎng)頁的總體規(guī)劃4.1制作網(wǎng)頁的一般步驟首先，你應(yīng)該明確制作網(wǎng)頁是為了干什么。比如，你是學(xué)校的職員，想通過網(wǎng)頁來對學(xué)校進(jìn)行廣告宣傳；再假設(shè)你正在做一個項目，想和外地的工程師通過網(wǎng)頁討論該項目。如果你要制作個人網(wǎng)頁，那么你可能想通過個人網(wǎng)頁在網(wǎng)上進(jìn)行傳播，從而展示自己，并和網(wǎng)友交朋友。這就是你的目的。我這次做這個網(wǎng)頁就是為了讓同學(xué)們在自己的班級網(wǎng)頁里面更好的交流和聯(lián)系，及時發(fā)布一些班級新聞，為同學(xué)們建造一個網(wǎng)上家園。其次，組織好你的網(wǎng)頁內(nèi)容。試想，你把自己的照片和內(nèi)容都堆在一起，別人將無法明白你想干什么，說不準(zhǔn)，連你自己都糊涂了。如果組織得好，用戶從你的網(wǎng)頁中獲取信息就容易得多。對于那些很重要的信息，用戶只需要簡單的操作就能得到。一般來說，組織好網(wǎng)頁的關(guān)鍵是要對網(wǎng)頁建立層次分明、條理清楚的結(jié)構(gòu)圖。腦子里有了這樣一張結(jié)構(gòu)圖，就會對網(wǎng)頁很明白，并且有助于制作網(wǎng)頁。而后，要確定你的網(wǎng)頁所具有的外觀和特色，目的就是讓用戶被你的網(wǎng)頁所吸引。如果你只是要把很多漂亮的畫面堆在一起，而不管內(nèi)容，那將沒人看。應(yīng)該讓你的網(wǎng)頁不僅漂亮，更重要的是實用。怎么把自己的照片和內(nèi)容有機(jī)的結(jié)合到一起，這也正是你的網(wǎng)頁特色所在。然后，開始制作網(wǎng)頁。具體操作時，首先要創(chuàng)建個人頁面，再充分利用Dreamweaver的功能建立各個網(wǎng)頁。最后，等網(wǎng)頁做好了，就該發(fā)布頁面了。頁面發(fā)布后，為了保持頁面的吸引力，要經(jīng)常修改網(wǎng)頁的內(nèi)容（添加新的內(nèi)容，更換已過時的圖像等），就要更新和維護(hù)你的頁面了。4.2網(wǎng)頁包括的元素?zé)o論是初次領(lǐng)略Internet風(fēng)光的新手，還是經(jīng)常上網(wǎng)沖浪的老手，在初次設(shè)計網(wǎng)頁之前，都必須先認(rèn)識一下構(gòu)成網(wǎng)頁的基本元素。只有這樣，才能在真正的設(shè)計工作中得心應(yīng)手，根據(jù)需要合理的組織和安排網(wǎng)頁的內(nèi)容，從而達(dá)到期望的目標(biāo)。設(shè)計網(wǎng)頁的目的主要是發(fā)布信息，因此，作為信息載體的文本和圖像也就成了網(wǎng)頁的基本組成部分，超級鏈接是HTML的核心，使它將萬維網(wǎng)中無數(shù)的網(wǎng)頁鏈接在一起，如果沒有它，HTML就無從談起，此外，表格、動畫、音樂和交互表單等信息的組織、表現(xiàn)，以及交互元素在網(wǎng)頁中也具有舉足輕重的地位。(1)文本文本一直是人類最重要的信息載體和交流工具，網(wǎng)頁中的信息也以文本為主，與圖像相比，文字雖不如圖像那樣能夠很快的引起瀏覽者的主意，但卻能準(zhǔn)確的表達(dá)消息的內(nèi)容和含義，為了克服文字固有的缺點，人們賦予了網(wǎng)頁中文本更多的屬性，如文字、字號、顏色、底紋和邊框等，通過不同格式的區(qū)別，突出顯示重要的內(nèi)容，此外，用戶還可以在網(wǎng)頁中設(shè)計各種各樣的文字列表來清晰表達(dá)一系列項目，這些功能都給網(wǎng)頁中的文本賦予了新的生命力。(2)圖像圖像在網(wǎng)頁中具有提供信息，展示作品，裝飾網(wǎng)頁，表達(dá)個人情調(diào)和風(fēng)格的作用。用戶可以在網(wǎng)頁中使用GIF、JPEG、PNG3種圖像文件格式，其中使用最廣泛的是GIF和JPEG兩種格式。(3)超級鏈接超級鏈接技術(shù)可以說是萬維網(wǎng)流行起來的最主要的原因，它是從一個網(wǎng)頁指向另一個目的端的鏈接，例如指向另一個網(wǎng)頁或相同網(wǎng)頁上的不同位置，這個目的端通常是另一個網(wǎng)頁，但也可以是一幅圖片，一個電子郵件地址，一個文件，一個程序或本網(wǎng)頁中的其他位置，其載體通常是文本，圖片或圖片中的區(qū)域，也可以是一些不可見的程序腳本。當(dāng)瀏覽者單擊超級鏈接時，其目的端將顯示在HTML瀏覽器上，并根據(jù)目的端的類型以不同方式鏈接。例如，當(dāng)指向一個AVI文件的超級鏈接被單擊后，該文件將在媒體播放軟件中打開;如果是指向一個網(wǎng)頁的超級鏈接，則該網(wǎng)頁將顯示在HTML瀏覽器上。(4)表格

在網(wǎng)頁中表格用來控制網(wǎng)頁中信息的布局方式。這包括兩方面：一是使用行和列的形式來布局文本和圖像以及其他的列表化數(shù)據(jù)；二是還可以使用表格來精4.3網(wǎng)頁層次結(jié)構(gòu)網(wǎng)頁層次結(jié)構(gòu)如圖4.1所示：4.4目錄的層次結(jié)構(gòu)目錄的層次結(jié)構(gòu)如圖4.2所示志趣發(fā)貼貼吧IHH —愛好集合明星粉絲微博— —世界趣事大學(xué)一天 心理故事壹心理IHHL心理放松匚QQ空間圖4.2個人網(wǎng)頁層次結(jié)構(gòu)說說相冊第五章代碼和網(wǎng)頁測試5.1代碼和具體內(nèi)容的意義具體代碼如下：<html><head><title>你不是，我</title><titel><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><styletype="text/css"><!--#Layer1{position:absolute;width:189px;height:29px;z-index:1;left:57px;top:112px;background-color:#0066CC;}.STYLE1{color:#FFFFFF}#Layer2{position:absolute;width:195px;height:45px;z-index:2;left:350px;top:130px;}.STYLE2{font-size:large;color:#333333;}.STYLE4{color:#FFFFFF;font-weight:bold;}body{background-image:url(../../../Pictures/PS%E5%A4%87%E7%94%A8/4-14/640.jpg);}.STYLE5{color:#000000}.STYLE9{color:#333333}.STYLE11{font-size:large}.STYLE14{font-size:xx-large;font-weight:bold;}.STYLE15{font-size:x-large}.STYLE16{color:#FFFFFF;font-weight:bold;font-size:x-large;font-family:"新宋體";}--></style>fontsize=10color二red><palign二"center"><br>你不是、我</font></title></head><bodybgcolor="#99FFCC""><oltype="壹"start二"1"><p><strongXspanclass二"STYLE5"><fontsize=6face二"新宋體"〉網(wǎng)頁導(dǎo)航</font></span>〈fontsize二"6"face="新宋體"〉</title></font></strong><tablewidth="959"height="56"border="1"><tr><tdwidth="177"height="50"bgcolor="#FF3366"><spanclass二"STYLE14"><fontface二"新宋體"><spanclass二"STYLE15"><ahref="/834572212/infocenter?ptsig=29nhHkyVbKmdal9kF9TkzArtNZul8R9knRkQ5EaRWbI_〃target=〃_blank〃class二〃STYLE1〃>QQ空間主頁</a></span></font>〈spanclass二"STYLE15"><fontcolor二"red"face二"新宋體〃><ahref="/834572212/infocenter?ptsig=29nhHkyVbKmda19kF9TkzArtNZu18R9knRkQ5EaRWbI_"target="_blank">〈/a>〈/font>〈fontcolor二"red"face="新宋體"><ahref="/834572212/infocenter?ptsig=29nhHkyVbKmda19kF9TkzArtNZu18R9knRkQ5EaRWbI_"target="_blank">〈/a>〈/font>〈/span>〈/span>〈/td>〈tdwidth="163"bgcolor="#FF9966">〈divalign="center"class="STYLE16">〈ahref=""target="_blank"class二〃STYLE4〃>壹心理網(wǎng)</a></div></td>〈tdwidth="156"bgcolor="#00CC33">〈divalign="center">〈ahref="/834572212/infocenter?ptsig=V6SgEkECvubsV8CTskEcLMyv-ntAjhwNhNo*BhiuzI8_"target二"_blank"class二"STYLE16">大學(xué)一天</a></div></td>〈tdwidth="136"bgcolor="#00CCCC">〈divalign="center">〈spanclass二"STYLE16">微博</span></div></td>?<tdwidth二"5"></td><tdwidth="137"bgcolor="#9966FF"><divalign="center"><ahref=/home/main?id=594278696f7361313134a325&fr=itb"target二"_blank"class二"STYLE16">貼吧〈/a>〈/div>〈/td>?〈tdwidth="12"></td></tr></table><p> </p><palign二"center"class二"STYLE2">〈fontsize二"6"face二"新宋體">你不是我，不知我走過的路，心中和樂與苦。</p></p><divalign="center"class="STYLE2"></div><palign二"center"class二"STYLE2"><fontface="新宋體"〉人生路，注定有一段荒涼。</font></p><palign二"center"class二"STYLE2"><fontface="新宋體"〉同行人，一定會走散掉。</font></p><palign二"center"class二"STYLE2"><fontface二"新宋體"〉矯情的想，離開的，都是多余的。</font></p><palign="center"class="STYLE9"><spanclass="STYLE11"><fontface="新宋體">直到無多余的多余，你就已夠富亮。</fontXfontface="新宋體"></font></span></p></p></ol><HRalign="left"size="2"width="100%"color="#00FF00"><i><span>    </span><fontsize=3color=black><br></font></i><HRalign="left"size="2"width="30%"color="#00FF00"><titel></body></heml>這些代碼包括了所有需要的鏈接，實現(xiàn)了網(wǎng)頁中插入網(wǎng)頁。一般都放在一個名稱為個人主頁的文件里面。網(wǎng)頁背景是一個小姑娘坐在秋千上吃西瓜，有一份童趣，也有一份收獲的喜悅，還有就是我喜歡吃西瓜。在頁面最上面是我自己寫的自己愛的一句話。下來是各網(wǎng)頁鏈接的導(dǎo)航再下來是自己愛的幾句話個人喜歡簡潔的感覺，也就完了主頁面5.2頁測試當(dāng)Dreamweaver安裝成功后，我們開始進(jìn)入，因為不是免費版本，所以只有使用期，但是我們一個網(wǎng)頁一般在創(chuàng)建到成功，用不了一個月，所以除非企業(yè)，我們都不用購買。在所建的網(wǎng)頁文件下，把所需鏈接和圖片保存好，在Dreamweaver里面也保存,你就可能打開后綴為.HTM的個人網(wǎng)頁。進(jìn)入之后可看到自己設(shè)置的背景，圖片，文字和歌曲。如果你聯(lián)網(wǎng)，還可打開你所設(shè)置的鏈接，進(jìn)入各個不同的自己的網(wǎng)頁。就算不聯(lián)網(wǎng)，你