317.個人網(wǎng)站的設(shè)計與實現(xiàn)

1、 畢業(yè)設(shè)計（論文）題目： 個人網(wǎng)頁的設(shè)計與實現(xiàn) 系 別 信息工程系 專業(yè)名稱 計算機(jī)科學(xué)與技術(shù) 班級學(xué)號 學(xué)生姓名 指導(dǎo)教師 二o一o 年 五 月 畢業(yè)設(shè)計（論文）任務(wù)書i、畢業(yè)設(shè)計(論文)題目：個人網(wǎng)站的設(shè)計與實現(xiàn)ii、畢 業(yè)設(shè)計(論文)使用的原始資料(數(shù)據(jù))及設(shè)計技術(shù)要求：1、確定網(wǎng)站主題和網(wǎng)站風(fēng)格2、掌握建網(wǎng)工具3、有創(chuàng)意的內(nèi)容選擇iii、畢 業(yè)設(shè)計(論文)工作內(nèi)容及完成時間： 工作安排如下： 1、查閱文獻(xiàn)，翻譯英文資料，書寫開題報告 第1-4周 2、相關(guān)資料的獲取和必要知識的學(xué)習(xí) 第5-9周 3、設(shè)計系統(tǒng)的硬件和軟件模塊并調(diào)試 第10-14周 4、撰寫論文 第15-17周 5、總結(jié)，準(zhǔn)

2、備答辯 第18周 、主 要參考資料： 1姜楠 完美網(wǎng)頁設(shè)計與制作 中國青年出版社 2004年5月 2歐陽峰，陳朝榮 電子商務(wù)技術(shù) 中國財政經(jīng)濟(jì)出版社 2001年8月14-16 3中國it培訓(xùn)工程編委會 flash mx實例教程 珠海出版社 2003年1月 4趙子江 多媒體技術(shù)應(yīng)用教程（4）版 機(jī)械工業(yè)出版社 2004年8月第4版 5李東博 杜學(xué)智李增輝 精彩網(wǎng)頁制作三劍客 西安電子科技大學(xué)出版社 2003年10月 6賀凱 焦超 flash mx 2004動畫制作典型范例 中國出版社 2005年2月 信息工程 系 計算機(jī)科學(xué)與技術(shù) 專業(yè)類 班學(xué)生（簽名）： 填寫日期： 2010 年 4 月 1

3、日指導(dǎo)教師（簽名）： 助理指導(dǎo)教師(并指出所負(fù)責(zé)的部分)： 信息工程 系主任（簽名）： 學(xué)士學(xué)位論文原創(chuàng)性聲明本人聲明，所呈交的論文是本人在導(dǎo)師的指導(dǎo)下獨立完成的研究成果。除了文中特別加以標(biāo)注引用的內(nèi)容外，本論文不包含法律意義上已屬于他人的任何形式的研究成果,也不包含本人已用于其他學(xué)位申請的論文或成果。對本文的研究作出重要貢獻(xiàn)的個人和集體，均已在文中以明確方式表明。本人完全意識到本聲明的法律后果由本人承擔(dān)。作者簽名： 日期：2010年5月12日學(xué)位論文版權(quán)使用授權(quán)書本學(xué)位論文作者完全了解學(xué)校有關(guān)保留、使用學(xué)位論文的規(guī)定，同意學(xué)校保留并向國家有關(guān)部門或機(jī)構(gòu)送交論文的復(fù)印件和電子版，允許論文被查閱

4、和借閱。本人授權(quán)南昌航空大學(xué)科技學(xué)院可以將本論文的全部或部分內(nèi)容編入有關(guān)數(shù)據(jù)庫進(jìn)行檢索，可以采用影印、縮印或掃描等復(fù)制手段保存和匯編本學(xué)位論文。 作者簽名： 日期：導(dǎo)師簽名： 日期：個人網(wǎng)站的設(shè)計與實現(xiàn) 前言隨著國際互聯(lián)網(wǎng)的普及，很多人已經(jīng)不滿足僅僅在internet上的瀏覽信息，而是希望更深入的參與其中，擁有自己的web網(wǎng)站，這似乎已經(jīng)成為一種潮流。如果說個人建立網(wǎng)站是為了追求時尚，那么企業(yè)建立網(wǎng)站就是必然的選擇了。無論是專業(yè)的，還是業(yè)余的，很多人對網(wǎng)頁制作頗感興趣。事實上制作一個簡單的網(wǎng)頁并不困難，會使用word的人都可以勝任。但想做出超凡脫俗的網(wǎng)頁就不那么容易了，而dreamweaver

5、卻可以滿足你的愿望，它是macromedia公司開發(fā)的集網(wǎng)頁制作和網(wǎng)站管理于一身的所見即所得的網(wǎng)頁編輯器。同樣出自macromedia公司的flash,fireworks在制作網(wǎng)站的過程中起到了錦上添花的作用，是個人網(wǎng)站實現(xiàn)的好幫手，在制作網(wǎng)站的時候經(jīng)常會用到這些軟件。本文有五章，我來由淺到深介紹個人網(wǎng)站的設(shè)計與實現(xiàn)。摘 要：在互聯(lián)網(wǎng)走進(jìn)我們的生活之前，沒有人敢夢想擁有自己的報紙、雜志、電臺、電視臺。除了政策上的制約外，一個人也根本沒有操作一份傳播媒體的能力。現(xiàn)在不同了，互聯(lián)網(wǎng)給我們提供了一個“表達(dá)自我”的自由天地,你可以擁有自己的新聞郵件，你可以建立自己的個人網(wǎng)站。只要你辦得成功也可以吸引成

6、千上萬的訂戶、讀者,并建立自己在眾多參與者中的權(quán)威地位。建立個人網(wǎng)站的基本過程可以分為以下七個環(huán)節(jié) :1 了解中國網(wǎng)絡(luò)個人主頁研究背景與發(fā)展現(xiàn)狀2 系統(tǒng)需求分析與總體設(shè)計3 熟悉網(wǎng)站開發(fā)模式、工具及環(huán)境4把自己的作品和想要展示的內(nèi)容制作成網(wǎng)頁。5使用動態(tài)網(wǎng)頁技術(shù)(asp) ，實現(xiàn)動態(tài)內(nèi)容更新。6 認(rèn)真地選取測試用例，進(jìn)行交叉測試7 網(wǎng)站的后期完善、宣傳及發(fā)展方向其中 ,xml 實現(xiàn)網(wǎng)頁內(nèi)容更新是本網(wǎng)站開發(fā)的核心內(nèi)容。關(guān)鍵詞：網(wǎng)頁、制作、訪問、鏈接personal website design and realization abstract：enters before our life in

7、the internet, nobody dares to vainly hope for has own newspaper, the magazine, the broadcasting station, the television station. besides the policy in restriction, a person simply has not also operated dissemination media the ability. now has been different, internet has provided to us the expressio

8、n free world, you may have own news mail, you may establish own individual website. so long as you also manage the success to be possible to attract the tens of thousands of subscribers, the reader, and establishes oneself in the multitudinous participants authoritative status. establishes individua

9、l website the unit process to be possible to divide into following seven links:1 understands the chinese network individual main page research background and the development present situation.2 systems demands analysis and system design.3 familiar websites developments pattern, tool and environment.

10、4 and wants own work the content which demonstrated to manufacture the homepage.5 uses dynamic homepages technology (asp), realization dynamic content renewal.6 earnestly selects measured the test example, carries on the overlapping test.7 websites later periods consummate, the propaganda and the de

11、velopment direction among them,the homepage manufacture and the use dynamic homepage technology (asp) realizes the dynamic content renewal is the website development core content.key word: homepage, manufacture, visit, link目 錄第一章引言1.1什么是xml1.2xml有哪些功能1.3www簡介1.4網(wǎng)頁基本構(gòu)成元素1.5軟件的安裝與啟動1.5.1軟件的安裝1.5.2軟件的啟

12、動1.5.3創(chuàng)建快捷方式1.6 制作網(wǎng)頁前的準(zhǔn)備1.7 dreamweaver的操作環(huán)境1.7.1 標(biāo)題欄1.7.2 菜單欄1.7.3 快捷工具欄1.7.4 屬性面板第二章分析與總體設(shè)計2.1 網(wǎng)站結(jié)構(gòu)框圖2.2 主要模塊功能2.3 涉及的一些主要技術(shù)第三章 網(wǎng)站制作實戰(zhàn)3.1站點3.1.1 創(chuàng)建站點3.1.2 創(chuàng)建站點內(nèi)容 3.2 首頁3.2.1 設(shè)置首頁布局3.2.2 設(shè)置首頁的頁面屬性3.2.3 查看和編輯頭內(nèi)容3.2.4 插入圖像3.2.5 插入多媒體3.2.6 插入文本3.3 創(chuàng)建其它網(wǎng)頁第四章建立網(wǎng)頁鏈接4.1 文字鏈接4.2 圖像鏈接4.3 e-mail鏈接4.4 文件下載鏈接4

13、.5 在html語言中建立網(wǎng)頁鏈接4.5.1 文字鏈接4.5.2 圖像鏈接4.5.3 e-mail鏈接4.6.4 文件下載鏈接第五章結(jié)論致 謝參考文獻(xiàn) 第一章 預(yù)備知識1.1 什么是xmlxml 代表extensible markup language（extensible markup language的縮寫，意為可擴(kuò)展的標(biāo)記語言）。xml是一套定義語義標(biāo)記的規(guī)則，這些標(biāo)記將文檔分成許多部件并對這些部件加以標(biāo)識。它也是元標(biāo)記語言，即定義了用于定義其他與特定領(lǐng)域有關(guān)的、語義的、結(jié)構(gòu)化的標(biāo)記語言的句法語言。xml是元標(biāo)記語言關(guān)于xml要理解的第一件事是，它不只是像超文本標(biāo)記語言（hypertex

14、t markup language，html）或是格式化的程序。這些語言定義了一套固定的標(biāo)記，用來描述一定數(shù)目的元素。如果標(biāo)記語言中沒有所需的標(biāo)記，用戶也就沒有辦法了。這時只好等待標(biāo)記語言的下一個版本，希望在新版本中能夠包括所需的標(biāo)記，但是這樣一來就得依賴于軟件開發(fā)商的選擇了。但是xml是一種元標(biāo)記語言。用戶可以定義自己需要的標(biāo)記。這些標(biāo)記必須根據(jù)某些通用的原理來創(chuàng)建，但是在標(biāo)記的意義上，也具有相當(dāng)?shù)撵`活性。例如，假如用戶正在處理與家譜有關(guān)的事情，需要描述人的出生、死亡、埋葬地、家庭、結(jié)婚、離婚等，這就必須創(chuàng)建用于每項的標(biāo)記。新創(chuàng)建的標(biāo)記可在文檔類型定義（document type defin

15、ition，在以后的篇幅中常簡稱為dtd）中加以描述。在本書的第二部分中將會學(xué)到有關(guān)dtd的更多的知識。現(xiàn)在，只需把dtd看作是一本詞匯表和某類文檔的句法。例如，在peter murray-rust的chemical markup language （化學(xué)標(biāo)記語言，簡寫為cml）中的mol.dtd文件中描述了詞匯表和分子科學(xué)的句法：其中包括chemistry（化學(xué)）、 crystallography（結(jié)晶學(xué)）、solid state physics（固體物理）等詞匯。它包括用于atoms（原子）、molecules（分子）、bonds（化學(xué)鍵）、spectra（光譜）等的標(biāo)記。這個dtd可與分

16、子科學(xué)領(lǐng)域中的許多不同的人共享。對于其他領(lǐng)域也有其他的dtd，用戶還可以創(chuàng)建自己的dtd。xml定義了一套元句法，與特定領(lǐng)域有關(guān)的標(biāo)記語言（如musicml、mathml和cml）都必須遵守。如果一個應(yīng)用程序可以理解這一元句法，那么它也就自動地能夠理解所有的由此元語言建立起來的語言。瀏覽器不必事先了解多種不同的標(biāo)記語言使用的每個標(biāo)記。事實是，瀏覽器在讀入文檔或是它的dtd時才了解了給定文檔使用的標(biāo)記。關(guān)于如何顯示這些標(biāo)記的內(nèi)容的詳細(xì)指令是附加在文檔上的另外的樣式單提供的。例如，考慮薛定格（schrodinger）方程：科學(xué)論文中充滿了這一類方程，但是科學(xué)家還必須等待多年，才能讓瀏覽器的開發(fā)商支

17、持書寫最基本的數(shù)學(xué)公式所需的標(biāo)記。音樂家也有同樣的局限性，因為netscape navigator和internet explorer還都不支持樂譜。有了xml就意味著不必等待瀏覽器的開發(fā)商來滿足用戶的需要了。用戶可以創(chuàng)建自己需要的標(biāo)記，當(dāng)需要時，告訴瀏覽器如何顯示這些標(biāo)記就可以了。xml描述的是結(jié)構(gòu)和語義，而不是格式化 關(guān)于xml要了解的第二件事是，xml標(biāo)記描述的是文檔的結(jié)構(gòu)和意義。它不描述頁面元素的格式化?？捎脴邮絾螢槲臋n增加格式化信息。文檔本身只說明文檔包括什么標(biāo)記，而不是說明文檔看起來是什么樣的。 作為對照，html文檔包括了格式化、結(jié)構(gòu)和語義的標(biāo)記。就是一種格式化標(biāo)記，它使其中的內(nèi)

18、容變?yōu)榇煮w。是一種語義標(biāo)記，意味著其中的內(nèi)容特別重要。是結(jié)構(gòu)標(biāo)記，指明內(nèi)容是表中的一個單元。事實上，某些標(biāo)記可能具有所有這三種意義。標(biāo)記可同時表示20磅的helvetica字體的粗體、第一級標(biāo)題和頁面標(biāo)題。 例如，在html中，一首歌可能是用定義標(biāo)題、定義數(shù)據(jù)、無序的列表和列表項來描述的。但是事實上這些項目沒有一件是與音樂有關(guān)的。用html定義的歌曲可能如下：hot cop by jacques morali henri belolo and victor willisproducer: jacques moralipublisher: polygram recordslength: 6:20

19、written: 978artist: village people而在xml中，同樣的數(shù)據(jù)可能標(biāo)記為： hot cop jacques morali henri belolo victor willis jacques morali polygram records 6:20 978 village people在這個清單中沒有使用通用的標(biāo)記如和，而是使用了具有意義的標(biāo)記，如、和等。這種用法具有許多優(yōu)點，包括源碼易于被人閱讀，使人能夠看出作者的含義。xml標(biāo)記還使非人類的自動機(jī)器人易于找出文檔中的所有歌曲。在html中，機(jī)器人只能告訴我們這個元素是dt。機(jī)器人不能決定dt到底代表一首歌的題目

20、還是定義，抑或只是一些設(shè)計者喜愛的縮進(jìn)文本格式。事實上，單一文檔中可以很好地包括帶有三種意義的各種dt元素。可以選擇xml的元素名稱，以便使其在附加的上下文中具有額外的意義。例如，元素名稱可以是數(shù)據(jù)庫的域名。xml比html更為靈活而且適用于各種應(yīng)用，因為有限數(shù)目的標(biāo)記不必用于許多不同的目的。 1.2 xml有那些功能在xml發(fā)布之前，國際互聯(lián)網(wǎng)的發(fā)展受到html如下幾個問題的束縛： 1） html無法描述數(shù)據(jù)內(nèi)容，而這一點恰恰是數(shù)據(jù)檢索、電子商務(wù)所必須的。 2） html對數(shù)據(jù)表現(xiàn)的描述能力是十分不夠的，如html還不能描述矢量圖形、科學(xué)符號等對象，目前只能通過圖象來表現(xiàn)這些對象。 3） h

21、tml實例置標(biāo)語言的地位，完全不能適應(yīng)對新標(biāo)記需求的發(fā)展需要。 xml的出現(xiàn)，使上述問題都得到很好的解決。 xml帶來的好處（1）更有意義的搜索 數(shù)據(jù)可被xml唯一的標(biāo)識。沒有xml，搜索軟件必須了解每個數(shù)據(jù)庫是如何構(gòu)建的。這實際上是不可能的，因為每個數(shù)據(jù)庫描述數(shù)據(jù)都是不同的。有了xml，書就可以很容易以標(biāo)準(zhǔn)的方式按照作者、標(biāo)題、isbn序號或其他的標(biāo)準(zhǔn)分類。搜索書就變得十分方便。 （2）開發(fā)靈活的web應(yīng)用軟件 數(shù)據(jù)一旦建立，xml能被發(fā)送到其他應(yīng)用軟件、對象或者中間層服務(wù)器做進(jìn)一步地處理?；蛘咚梢园l(fā)送到桌面用瀏覽器瀏覽。xml和html、腳本、公共對象模式一起為靈活的三層web應(yīng)用軟件的

22、開發(fā)提供了所需的技術(shù)。 （4）不同來源數(shù)據(jù)的集成 現(xiàn)在搜索多樣的不兼容的數(shù)據(jù)庫實際上是不可能的。xml能夠使不同來源的結(jié)構(gòu)化的數(shù)據(jù)很容易的結(jié)合在一起。軟件代理商可以在中間層的服務(wù)器上對從后端數(shù)據(jù)庫和其他應(yīng)用處來的數(shù)據(jù)進(jìn)行集成。然后，數(shù)據(jù)就能被發(fā)送到客戶或其他服務(wù)器做進(jìn)一步的集合、處理和分發(fā)。 （5）多種應(yīng)用得到的數(shù)據(jù) xml的擴(kuò)展性和靈活性允許它描述不同種類應(yīng)用軟件中的數(shù)據(jù)，從描述搜集的web頁到數(shù)據(jù)記錄。同時，由于基于xml的數(shù)據(jù)是自我描述的，數(shù)據(jù)不需要有內(nèi)部描述就能被交換和處理。 （6）本地計算和處理 xml格式的數(shù)據(jù)發(fā)送給客戶后，客戶可以用應(yīng)用軟件解析數(shù)據(jù)并對數(shù)據(jù)進(jìn)行編輯和處理。使用者可

23、以用不同的方法處理數(shù)據(jù)，而不僅僅是顯示它。xml文檔對象模式(dom)允許用腳本或其他編程語言處理數(shù)據(jù)。數(shù)據(jù)計算不需要回到服務(wù)器就能進(jìn)行。分離使用者觀看數(shù)據(jù)的界面，使用簡單靈活開放的格式，可以給web創(chuàng)建功能強(qiáng)大的應(yīng)用軟件，這些軟件原來只能建立在高端數(shù)據(jù)庫上。 （7）數(shù)據(jù)的多樣顯示 數(shù)據(jù)發(fā)到桌面后，能夠用多種方式顯示。通過以簡單開放擴(kuò)展的方式描述結(jié)果化的數(shù)據(jù)，xml補(bǔ)充了html，被廣泛的用來描述使用者界面。html描述數(shù)據(jù)的外觀，而xml描述數(shù)據(jù)本身。由于數(shù)據(jù)顯示與內(nèi)容分開，xml定義的數(shù)據(jù)允許指定不同的顯示方式，使數(shù)據(jù)更合理地表現(xiàn)出來。本地的數(shù)據(jù)能夠以客戶配置、使用者選擇或其他標(biāo)準(zhǔn)決定的方

24、式動態(tài)地表現(xiàn)出來。css和xsl為數(shù)據(jù)的顯示提供了公布的機(jī)制。 （8）粒狀的更新 通過xml，數(shù)據(jù)可以粒狀的更新。每當(dāng)一部分?jǐn)?shù)據(jù)變化后，不需要重發(fā)整個結(jié)構(gòu)化的數(shù)據(jù)。變化的元素必須從服務(wù)器發(fā)送給客戶，變化的數(shù)據(jù)不需要刷新整個使用者的界面就能夠顯示出來。目前，只要一條數(shù)據(jù)變化了，整一頁都必須重建。這嚴(yán)重限制了服務(wù)器的升級性能。xml也允許加進(jìn)其他數(shù)據(jù)，比如預(yù)測的溫度。加入的信息能夠流入存在的頁面，不需要瀏覽器發(fā)一個新的頁面。 （9）在web上發(fā)布數(shù)據(jù) 由于xml是一個開放的基于文本的格式，它可以和html一樣使用http進(jìn)行傳送，不需要對現(xiàn)存的網(wǎng)絡(luò)進(jìn)行變化。 （10）升級性 由于xml徹底把標(biāo)識的

25、概念同顯示分開，處理者能夠在結(jié)構(gòu)化的數(shù)據(jù)中嵌套程序化的描述以表明如何顯示數(shù)據(jù)。這是令人難以相信的強(qiáng)大的機(jī)制，使得客戶計算機(jī)同使用者間的交互作用盡可能的減少了，同時減少了服務(wù)器的數(shù)據(jù)交換量和瀏覽器的響應(yīng)時間。另外，xml使個人的數(shù)據(jù)只能通過更新的布告發(fā)生變化，減少了服務(wù)器的工作量，大大增強(qiáng)了服務(wù)器的升級性能。 （11）壓縮性 xml壓縮性能很好，因為用于描述數(shù)據(jù)結(jié)構(gòu)的標(biāo)簽可以重復(fù)使用。xml數(shù)據(jù)是否要壓縮要根據(jù)應(yīng)用來定，還取決于服務(wù)器與客戶間數(shù)據(jù)的傳遞量。xml能夠使用http1.1中的壓縮標(biāo)準(zhǔn)。 （12）開放的標(biāo)準(zhǔn) xml基于的標(biāo)準(zhǔn)是為web進(jìn)行過優(yōu)化的。微軟和其他一些公司以及w3c中的工作組

26、正致力于確保xml的 1.3 www的簡介www的全稱為world wide web，含義是“環(huán)球網(wǎng)”，又稱“萬維網(wǎng)”、3w、web。 www是一個基于超文本（hypertext）方式的信息檢索服務(wù)工具。我們上網(wǎng)瀏覽到的網(wǎng)頁就是這樣的超文本，也就是html(hypertext mark-up language,超文本標(biāo)記語言)文件，這些網(wǎng)頁文件被放置到www服務(wù)器上，并且都有一定的地址。當(dāng)我們想瀏覽某個網(wǎng)站時，首先要在電腦上安裝瀏覽器，如internet explorer或netscape，然后在瀏覽器中輸入網(wǎng)站的地址（網(wǎng)址），就可以進(jìn)入網(wǎng)站進(jìn)行瀏覽。在這些網(wǎng)頁中，都有超連接，當(dāng)將鼠標(biāo)指針移動

27、到某個地方（如文本或圖象）時，鼠標(biāo)指針就會變成一個小手形形狀，單擊它就可以連接到另個網(wǎng)頁中，從而使得瀏覽者能在不同的信息之間跳轉(zhuǎn)，我們之所以能在internet的海洋中穿梭自如，正是超連接的功勞。www 為我們帶來的是世界范圍的超級文本服務(wù)：只須操縱鼠標(biāo)，就可以通過internet從世界各地調(diào)來你所希望的文本、圖像、動畫和聲音等信息。通過使用www，一個不熟悉網(wǎng)絡(luò)使用的人也可以成為internet的行家。1.4網(wǎng)頁基本構(gòu)成元素要學(xué)會制作網(wǎng)頁，首先需要了解網(wǎng)頁都是由什么元素構(gòu)成的。文字：文本是構(gòu)成網(wǎng)頁的基本元素。一個最簡單的網(wǎng)頁可以只有幾行文本。圖片：正是有個各種美麗的圖片，網(wǎng)頁才變得多姿多彩。

28、動畫：如今，網(wǎng)頁上的動畫越來越多，最常用的有g(shù)if動畫、flash動畫等。超連接：如上所述，超連接幾乎是必不可少的。一個沒有超連接的網(wǎng)頁，就如同汪洋大海中的一座孤島，失去了與外界的一切聯(lián)系。其它元素：還可以在網(wǎng)頁中添加聲音、視頻等元素。1.5軟件的安裝與啟動要使用網(wǎng)站設(shè)計軟件，自然先要將這些軟件安裝到自己的電腦中。安裝完畢，還需要如何啟動，如何創(chuàng)建快捷方式。下面就讓我們來詳細(xì)地看一看具體的操作步驟。1.5.1軟件的安裝安裝之前，需要先了解軟件對系統(tǒng)的要求。以windows為例，系統(tǒng)要求如下：intel pentium ii處理器或等效處理器，主頻300mhz或更高。windows 98wind

29、ows 2000windows nt(具有service pack 3 或更高版本)、windows me或windows xp.netscape navigator 4.0版或更高版本或microsoft internet explorer.96mb的可用內(nèi)存（ram），建議采用128mb內(nèi)存。分辨率可達(dá) 800600像素的256色顯示器（建議顏色為百萬顏色，分辨率達(dá)到1024768像素）。cd-rom 驅(qū)動器。檢查一下您的計算機(jī)，看是否具備了以上條件。如果具備，將“macromedia studio mx”程序會自動運行。如果不能自動運行，可以找到光盤放入光驅(qū)，安裝程序會自動運行。可以找到

30、光盤中的“install macromedia studio mx”程序或“autorun”程序并雙擊運行。dreamweaver的安裝比較容易，幾乎可以自動完成。下面簡要說明一下安裝步驟。操作步驟：1、將安裝光盤放入光驅(qū)，安裝程序自動運行，并出現(xiàn)安裝界面。如果單擊安裝界面上的“macromedia studio mx安裝”，那么將會安裝其下方所列出的軟件。所有的安裝會自動完成。2、單擊dreamweaver mx,開始安裝過裝過程.先是出現(xiàn)解壓縮文件窗口,等待一會兒,便會出現(xiàn)安裝向?qū)υ捒颉螕簟跋乱徊健卑粹o，繼續(xù)安裝過程。3、出現(xiàn)“選擇目的地位置”對話框，默認(rèn)的盤是c盤，如果想安裝到不同的

31、位置，可以單擊目的文件夾右邊的“瀏覽”按鈕，并在彈出的“選擇文件夾”對話框選擇不同的文件，如要安裝在d盤則可直接將路徑中的“c：”改為“d:”。也可以在下面的“目錄”中選擇其它的文件夾，設(shè)置完后，單擊“確定”，回到“選擇目的地址”對話框，單擊“下一步”繼續(xù)。4、而后會出現(xiàn)“默認(rèn)編輯器”的對話框，默認(rèn)為全選。如果希望讓dreamweaver mx成為下面所列文件類型的默認(rèn)編輯器，那么可以在這里做選擇。選擇完畢，單擊“下一步”按鈕。5、出現(xiàn)“開始復(fù)制文件”對話框，單擊“下一步”安裝程序開始復(fù)制文件，過幾分鐘后，安裝結(jié)束，單擊“結(jié)束”按鈕，結(jié)束安裝。1.5.2 軟件啟動 軟件安裝完畢后，我們就可以使

32、用它了。安裝程序已經(jīng)自動在“開始”菜單中加入了快捷方式。 單擊“開始”菜單，將鼠標(biāo)指針依次指向“程序”|“macromedia”|“macromedia mx”,并在上面單擊鼠標(biāo)左鍵。1.5.3 創(chuàng)建快捷方式使用“開始”菜單啟動程序的過程比較煩瑣。可以在windows桌面或快速啟動欄上創(chuàng)建快捷方式，這樣可以快速的啟動程序。具體實現(xiàn)方法是：在“開始”菜單中找到相應(yīng)程序的快捷方式，不過這是不要用鼠標(biāo)左鍵單擊，而是用右鍵按住向桌面拖動，然后松開右鍵，會出現(xiàn)一個快捷菜單，在其中可以選擇不同的命令，比如選擇“在當(dāng)前位置創(chuàng)建快捷方式”或“復(fù)制到當(dāng)前位置”。這樣以后在運行程序時，就方便快捷的多了。1.6 制

33、作網(wǎng)頁前的準(zhǔn)備電腦必備：電腦速度夠快，最好能夠上網(wǎng)。操作系統(tǒng)：windows 98/nt/me/2000/xp.軟件可選：其它軟件：看圖軟件acdsee、圖像處理軟件photoshop、上傳工具cuteftp、fireworks、動畫軟件flash等。1.7 dreamweaver mx的操作環(huán)境 我們將工作界面分成了“標(biāo)題欄”、“菜單欄”、“快捷工具欄”、“屬性面板”、“浮動控制面板”5個部分來分別介紹。 1.7.1 標(biāo)題欄 dreamweaver mx的“標(biāo)題欄”中將顯示文字“macromedia dreamweaver mx”如果打開網(wǎng)頁的話，在后面還會顯示該網(wǎng)頁的一些信息，如網(wǎng)頁標(biāo)題、

34、所在位置及網(wǎng)頁名稱，右邊有三個鈕，分別對應(yīng)dreamweaver mx的最大化最小化和關(guān)閉的操作。1.7.2 菜單欄 “標(biāo)題欄”下面就是“菜單欄”，欄中提供了“文件”、“編輯”、“查看”、“插入”、“修改”、“文本”、“站點”、“窗口”、“幫助”10項菜單。單擊其中任意一項菜單，隨即就會出現(xiàn)一個下拉式指令菜單。有些指令的右邊會有鍵盤的代碼，這是該指令的快捷鍵，熟練使用快捷鍵將會有助于提高工作效率。有些指令的右邊會有一個小黑三角的標(biāo)記，它代表該指令還包含下一級的指令，鼠標(biāo)停留片刻即可顯示。1.7.3 快捷工具欄 “快捷工具欄”指的是“菜單欄”下邊的3排按鈕，選擇菜單“查看/工具欄”，勾選里面的“

35、插入”、“文檔”和“標(biāo)準(zhǔn)”3項，完整的快捷工具欄就顯現(xiàn)出來了。1.7.4 屬性面板在網(wǎng)頁編輯窗口的下面還有一個面板，它是有名的“屬性面板”，它在這個軟件中起到舉足輕重的作用。屬性面板顧名思義，就是顯示，調(diào)整屬性的面板，根據(jù)鼠標(biāo)所選中對象的不同，“屬性面板”在界面上也會有所差異，用戶可以分別對不同的對象進(jìn)行調(diào)整。第二章2.1 網(wǎng)站結(jié)構(gòu)框圖首頁心情日記照片匣子網(wǎng)絡(luò)素材我的作品關(guān)于自己左鄰右舍聯(lián)絡(luò)方式友情鏈接2.2 主要模塊功能心情日記每日心情日記，連結(jié)進(jìn)去便可曉得架站者的日常生活大小事，樂于分享，與他人互動。照片集許多照片集結(jié)而成，一方面使網(wǎng)站不單只是文字，更具有真實影像的存在感。個人資料介紹架站

36、者的身分背景，使瀏覽者可以更為清楚這是一個什么樣的人所架設(shè)的，讓大家更了解關(guān)于作者的資料。友情鏈接連結(jié)連去哪 不同連結(jié)，主要在于提供各式各樣的網(wǎng)站以供其他人瀏覽，基本上是架站者所喜好的網(wǎng)站，以及常用連結(jié)。聯(lián)絡(luò)方式透過 e-mail或qq 與作者聯(lián)系。 2.3涉及的一些主要技術(shù)這次的項目（個人網(wǎng)頁的設(shè)計與實現(xiàn)）我主要是使用html編寫的。網(wǎng)頁的排版我大多使用標(biāo)簽布局，通過標(biāo)簽的border屬性來設(shè)置零邊框以及其他的一些屬性對table框架定位，并使用了標(biāo)簽對table框架內(nèi)的圖片或文字進(jìn)行方位控制。在附件a的代碼中可以清楚的看到一段代碼：本段代碼主要的通過使用標(biāo)簽的對網(wǎng)頁實現(xiàn)嵌入另一網(wǎng)頁，其嵌入

37、的網(wǎng)頁是通過src來定位的。在網(wǎng)頁的設(shè)計個過程中我使用的大量的圖標(biāo)來美化，使用標(biāo)簽中的子標(biāo)簽都圖片布局，再在指定標(biāo)簽通過標(biāo)簽把事先設(shè)計好的圖片引入，大大的提高了網(wǎng)頁的欣賞價值。并使用了標(biāo)簽對網(wǎng)站的各個網(wǎng)頁超鏈接，讓讀者直接或間接的瀏覽網(wǎng)站的所有網(wǎng)頁。而且為了提高網(wǎng)站的互動性好點擊率我使用了標(biāo)簽對一些知名網(wǎng)站進(jìn)行超鏈接。在站的設(shè)計后期我還使用了xml來存儲一些網(wǎng)站的信息，比如我的一些日記等，并使用js來解析xml文件。第三章 網(wǎng)站制作實戰(zhàn)3.1 站點3.1.1 創(chuàng)建站點要制作一個網(wǎng)站，第一步操作都是一樣的，就是要創(chuàng)造一個“站點”，這樣可以使整個網(wǎng)站的脈絡(luò)結(jié)構(gòu)清晰地展現(xiàn)在面前，避免了以后再進(jìn)行紛雜

38、的管理。從菜單中選擇“站點/管理站點”在彈出的對話框中選擇“新建”，之后再選擇其中的“站點”，再次彈出一個對話框，在文本框中輸入自己已經(jīng)企化好的網(wǎng)站名稱“追夢人”。填好后，單擊“下一步”，進(jìn)入下一個步驟。由于我要做的是一個靜態(tài)的網(wǎng)頁，所以選擇上面的一項“否，我不想使用服務(wù)器技術(shù)?！眴螕簟跋乱徊健保M(jìn)入下一個步驟。在此選項中有兩個選擇，選擇推薦的“編輯我的計算機(jī)上的本地副本，完成后再上傳到服務(wù)器”。底下的文本框允許在本地磁盤上指定一個文件夾，dreamweaver將在其中儲存站點文件的本地副本。單擊該文本框后面的文件夾圖標(biāo)，新建并指定一個空的文件夾“e:/ding”。之后單擊“下一步“，進(jìn)入下一

39、個步驟。這一步是如何設(shè)置連接到遠(yuǎn)程服務(wù)器，彈出式菜單中有6中選擇，這里選擇“無”。而后“下一步”再“完成”，即可。3.1.2 創(chuàng)建站點內(nèi)容站點創(chuàng)建完成后，就可以創(chuàng)建web頁來填充站點了。在“右側(cè)浮動面板組”中選擇“文件/文件”面板，此時整個網(wǎng)站中沒有任何內(nèi)容。用鼠標(biāo)右擊面板中的本地根目錄文件夾。在彈出的菜單中選擇“新建文件”，新建一個文件后將其命名為“index.htm(或index.html),它就是未來的首頁。 由于“追夢人”網(wǎng)站分為“平面設(shè)計”、“動畫制作”、“網(wǎng)文精品”、“經(jīng)典回顧”、“個人說明“這五個大欄目，所以繼續(xù)用鼠標(biāo)右擊右側(cè)，在彈出的菜單中選擇第二項“new folder（新建

40、文件夾）”。執(zhí)行五次操作，新建五個文件夾，并把它們重命名為graph、anim、books、music、letter，分別對應(yīng)上面的五個大欄目。存放它們各自的內(nèi)容。之后再次新建1個文件夾，命名為images,用來存放“所有的圖象文件”的內(nèi)容。之后在個欄目的文件夾里還要建立想相應(yīng)的欄目網(wǎng)頁。3.2 首頁3.2.1 設(shè)置首頁布局每個網(wǎng)站都會有一個首頁，就功能上而言，它代表著一個網(wǎng)站的風(fēng)格與特色，就網(wǎng)站架構(gòu)上而言，它代表了網(wǎng)站的第一層架構(gòu)，至于網(wǎng)站上其他web頁，原則上都必須通過首頁來連接散播出去，可見首頁是多么的重要。首頁是打開網(wǎng)站后在瀏覽器中顯示的第一個頁面。它是起什么名字通常要視server端

41、的設(shè)置，一般的有index.htm,default.htm或home.htm等，目前主要以index.htm的居多。當(dāng)然，后綴名為html也是正確的。具體設(shè)置方法是：右健單擊“文件”浮動面板中的index.htm,在彈出的菜單中選擇“設(shè)成首頁”。首頁的布局有很多方法，在這里我所用到的是表格的“布局模式”。“布局”模式中的表格稱為布局表格，單元格稱為布局單元格。在繪制布局表格和布局單元格時，必須從“標(biāo)準(zhǔn)”模式切換到“布局”模式。直接單擊“布局”按鈕即可。操作步驟：1、在“插入快捷欄”的“布局”分類中，單擊“布局表格”按紐。2、將變成“+”形狀的鼠標(biāo)光標(biāo)放到編輯中網(wǎng)頁上，在要繪制的地方進(jìn)行拖動就可

42、以進(jìn)行創(chuàng)建了。（如果繪制的是第一個表格必須從網(wǎng)頁的最左上角開始繪制）。3、在這里要繪制多個表格，可以再次單擊“布局表格”按紐進(jìn)行繪制，也可以按住ctrl鍵繪制多個表格。追夢人”網(wǎng)站首頁的布局如圖所示：3.2.2設(shè)置首頁的頁面屬性首先雙擊“文件”浮動面板中的index.htm,進(jìn)入頁面的編輯窗口。右健單擊空白區(qū)域，在菜單中選擇“頁面屬性”，之后彈出“頁面屬性”對話框，若選擇主菜單“修改/頁面屬性”項，也可以把打開該對話框。在“頁面屬性”對話框中，左側(cè)窗口顯示“分類”，其中包括了“外觀”、“鏈接”、“標(biāo)題”、“標(biāo)題/編碼”、“跟蹤圖像”5項，右側(cè)區(qū)域則顯示各類中可以設(shè)置的項目。“追夢人”首頁設(shè)置的

43、屬性如下圖所示：3.2.3查看和編輯頭內(nèi)容一個網(wǎng)頁文件結(jié)構(gòu)上實際是由兩部分組成，頭（head）內(nèi)容和主體（body）內(nèi)容主體內(nèi)容（body）是文檔的主要部分，也是包含文本和圖像等的可見部分。頭內(nèi)容（head）是除文檔標(biāo)題外的不可見部分，包含有文檔類型、語言編碼、搜索引擎的關(guān)鍵的關(guān)鍵字和內(nèi)容指示器以及樣式定義等重要信息，這些元器并不是每個頁面都需要的，例如，可以僅為主頁提供關(guān)鍵字。下面就以首頁為例，說明怎樣插入較常用的頭（ head）內(nèi)容。單擊“菜單攔”下面“插入快捷”的下拉列表，選擇其中的html類，此時右側(cè)將會顯示該類中可以插入的對象快捷按鈕，再次單擊第2個按鈕“文件頭”旁邊的下拉箭頭，會彈

44、出菜單，該項列出的便是即將插入的頭內(nèi)容。3.2.4 插入圖像圖像是網(wǎng)頁中不可或缺的組成成份，恰當(dāng)?shù)厥褂脠D像，可以使網(wǎng)站充滿生活生命力與說服力，吸引更多的瀏覽者，加深他們欣賞你網(wǎng)站的意愿。另一方面，網(wǎng)頁的容量大小是網(wǎng)站成功與否的一大關(guān)鍵因素。由于網(wǎng)絡(luò)在傳輸上的限制，導(dǎo)致了下載的速度不可能太快，因此，網(wǎng)頁的大小就不能太大，其中關(guān)鍵就在于圖像的大小了，否則瀏覽者會失去等待的耐心，無論你的網(wǎng)站多么精彩也無濟(jì)于事了。所以，在網(wǎng)面容量大小的問題上一定要重視。下面就來詳細(xì)介紹對網(wǎng)頁圖像進(jìn)行處理的操作步驟，以使得它們在保持圖形美麗與網(wǎng)站風(fēng)格搭配的基礎(chǔ)上，圖片文件能夠變的更小。1、 首先將光標(biāo)停留在要插入圖像的

45、位置，然后單擊“菜單欄”下面“插入快健欄”的下拉表，選擇其中的“常用”類，則右側(cè)將會顯示該類中可以插入的對象快鍵按鈕。左起第5個即為“圖像：圖像”按鈕，單擊它右側(cè)的下拉列表，選擇第1項“圖像”。2、隨即彈出“選擇圖像源文件”對話框。從計算機(jī)磁盤中選擇想要插入的圖像文件，或在url編輯框中輸入圖像的路徑和名稱。下面的“相對于”下拉表框中，可選擇文件url地址的類型，如果選擇“文檔”選項，表示圖像地址相對于當(dāng)前文檔；如果選擇“站點根目錄”選項，表示地址相對于根目錄。在這里我要插入的是網(wǎng)站標(biāo)志logo，插入logo圖象.最后單擊“確定”按鈕，即可完成插入圖像的操作。3.2.5插入多媒體在dreamw

46、eaver mx2004中，除了之前講到的可以插入“圖像”外，還可插入動畫、聲音、視頻等媒體元素，如flash,shockwave,applets,actiex及格midi聲音文件等，并且還可以在dreamweaver自身內(nèi)插入macromedia flash mx2004按鈕和文本對象，以及進(jìn)行相關(guān)的后期處理和添加設(shè)計備注等操作。在dreamweaver mx 2004文檔中，可以插入媒體文件包括flash shockwave影片、quicktime 、avi java、 applet active x控件以及各種格式的音頻文件。要在瀏覽器中播放放flash 動畫，必須在瀏覽器中集成“fla

47、sh 播放器 （flash player）”。其中，internet explorer通過activex控制來實現(xiàn)，netscape navigator則是通過相應(yīng)的插件來實現(xiàn)的。在最新的netscape navigator和internet explorer瀏覽器中，均已集成了 flash動畫播放功能。操場作步驟：步驟1 將光標(biāo)停留在要插入flash的位置，然后單擊菜單欄下面“插入快捷欄”的下拉列表，選擇其中的“常用”分類，右側(cè)將會顯示該類中可以插入的對象快捷按鈕。左起第6個即為“媒體”按鈕，單擊它右側(cè)的下拉列表，選擇第1項flash圖標(biāo)。步驟2 在彈出的對話框中選擇擴(kuò)展名為swf 的fla

48、sh文件，即可將其插入到dreamwe aver的“網(wǎng)頁編輯窗口”中，可以看到，在這個窗口中flash文件的大小。在 這里我的主頁插入的一個動畫。3.2.6插入文本文字是人類語言最基本的表達(dá)方式，在網(wǎng)頁中，文本內(nèi)容也可以說是重要的組成部分，一個網(wǎng)站成功與否，它是最關(guān)鍵的因素。在這最關(guān)鍵的因素?？韶S富網(wǎng)站的文字內(nèi)容，并以最最美觀、最整齊的方式放入到網(wǎng)頁中。插入文本的兩種方式網(wǎng)頁中需要大量的文本，我們或以通過以下兩種方式插入它們。一種是在網(wǎng)頁編輯窗口中直接用鍵盤敲入文本。這可以算是最基本的輸入方式了，和一些文本編輯軟件（如microsoft word）的使用方法一樣，選擇好習(xí)慣的輸入法，就可以運指

49、如飛了。另一種是復(fù)制文本的方式。有些讀者可能不喜歡使用dreamweaver mx2004來進(jìn)行打字的工作，而更習(xí)慣在專門的文本編輯軟件中快速打字，如microsoft word和 windows自帶的記事本等，又或者讀者已經(jīng)準(zhǔn)備好了要放入網(wǎng)頁的文本的電子版本，那么我們就可以直接使用dreamweaver的文本復(fù)制功能，將大段的文本內(nèi)容拷貝到網(wǎng)頁的編輯窗口來進(jìn)行排版的工作，具體步驟如下。打開文本編輯軟件（如microsoft word），選中要復(fù)制的文本，它們將反白顯示，執(zhí)行菜單“編輯/復(fù)制”命令或直接用快捷鍵ctrl+c，之后切換回dreamweaver,將光標(biāo)停留在插入文本的位置，執(zhí)行主菜

50、單“編輯/粘貼”命令或直接使用快捷鍵ctrl+v,即可將大段的文本快速粘貼到網(wǎng)頁中。這在我的“網(wǎng)文精品”中用到很多，全部是在word軟件中排好ctrl+c,然后點擊要粘貼的位置，crtl+v到dreamweaver即可。3.3創(chuàng)建其它網(wǎng)頁還有其它的幾個網(wǎng)站與主頁的制作相同，一個網(wǎng)頁是圖象和文字的組合。 “平面設(shè)計”中的圖象插入和前面的介紹相似，并可以在屬性攔中調(diào)節(jié)圖象的大小。 在dreamwerver中常常會用到firework、flash，它們是相輔相成，在主頁中的主體部分就是用firework,如圖所示：在“個人說明”中也用到這點，首先定好需要尺寸，在屬性中設(shè)好背景，顏色等等，插入圖象，輸

51、入文字，也word里的操作雷同。第四章 建立網(wǎng)頁鏈接網(wǎng)站實際上是由很多網(wǎng)頁組成的，那么網(wǎng)頁之間是如何聯(lián)系的呢？這就是本章要講的內(nèi)容-網(wǎng)頁的“鏈接”?！版溄印?，又稱“超鏈接（hyperlink）,它作為網(wǎng)頁的橋梁，起著相當(dāng)重要的作用。網(wǎng)頁中的很多對象都可以加入“鏈接”屬性。在dreamweaver mx2004中，如果以“鏈接”的媒介來劃分的話，則“鏈接”可以分為“文字鏈接”、“圖像鏈接”、“圖像地圖鏈接”、“內(nèi)部鏈接和外部鏈接”、“e-mail鏈接”、“命名錨記鏈接”、“文件下載鏈接”和“跳轉(zhuǎn)菜單”，共8種。其中部分內(nèi)容在之前的章節(jié)中可能接觸過，這里將對其進(jìn)行更深入的講解。4.1文字鏈接“文字

52、鏈接”即以文字作為媒介的鏈接，它是網(wǎng)頁中最常被使用的鏈接方式，具有“文件小、制作簡單和便于維護(hù)”的特點。接下來結(jié)合我的個人網(wǎng)站為實例，來講解如何為文字建立“鏈接”。具體操作步驟如下所述。操作步驟步驟1 準(zhǔn)備好已經(jīng)制作完成的首頁的各個欄目頁面（假設(shè)除了“鏈接”，其他內(nèi)容都已經(jīng)制作完成了），該網(wǎng)站包含6個欄目，這里的5個欄目-“平面設(shè)計”、“動畫制作”和“網(wǎng)文精品”、“經(jīng)典回顧”、“個人說明”為例來進(jìn)行講解。步驟2 在dreamweaver 中打開首頁，之后反白選取作為“鏈接”的文字。實例中要做到單擊不同的欄目的網(wǎng)頁。因此為第1個欄目“平面設(shè)計”設(shè)置鏈接，首先要反白選中“平面設(shè)計”4個文字。步驟3

53、 觀察“屬性面板”，其中包括一個“鏈接”文本框。步驟4 接下來需要把鏈接的地址加入到文本框中，方法有3種。這里我用到的是直接點擊文件夾圖標(biāo)，在文件夾中找到要鏈接的對象graph.htm。這樣就建立了超鏈接。不過有點很重要，由于大多數(shù)服務(wù)器都不支持中文文件名，而且對大小寫敏感，因此采用英文文件名并統(tǒng)一大小寫。如圖所示：步驟5 在“鏈接”文本框下面還有一個“目標(biāo)”下拉列表，從中可以選擇鏈接網(wǎng)頁顯示的窗口方式，共有4種。如圖：實例中沒有選擇任何選項，保持空白，表示在原窗口中打開鏈接網(wǎng)頁。步驟6 還可以設(shè)置一些“鏈接”的屬性，這是前面講過的內(nèi)容。單擊“屬性面板”中的“頁面屬性”，選擇其中的“鏈接”分類，可以進(jìn)行的設(shè)置有“鏈接字體”、“大小”、“鏈接顏色”、“變換圖像鏈接”顏色、