畢業(yè)設(shè)計（論文）個人網(wǎng)站的設(shè)計與實現(xiàn)

1、二七屆學(xué)生畢業(yè)論文（設(shè)計）畢業(yè)設(shè)計(論文)論文題目 個人網(wǎng)站的設(shè)計與實現(xiàn)英文 personal webside design and accomplish學(xué) 院 數(shù)學(xué)與計算機(jī)學(xué)院專 業(yè) 計算機(jī)網(wǎng)絡(luò)技術(shù)系姓 名 學(xué) 號 指導(dǎo)教師 個人網(wǎng)站的設(shè)計與實現(xiàn)摘  要 在互聯(lián)網(wǎng)走進(jìn)我們的生活之前，沒有人敢夢想擁有自己的報紙、雜志、電臺、電視臺。除了政策上的制約外，一個人也根本沒有操作一份傳播媒體的能力?，F(xiàn)在不同了，互聯(lián)網(wǎng)給我們提供了一個“表達(dá)自我”的自由天地,你可以擁有自己的新聞郵件，你可以建立自己的個人網(wǎng)站。只要你辦得成功也可以吸引成千上萬的訂戶、讀者,并建立自己在眾多參與者中的權(quán)威地位。建立

2、個人網(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ā)展方向其中 ,網(wǎng)頁制作和使用動態(tài)網(wǎng)頁技術(shù)(asp) 實現(xiàn)動態(tài)內(nèi)容更新是網(wǎng)站開發(fā)的核心內(nèi)容。關(guān)鍵詞：網(wǎng)頁、制作、訪問、鏈接abstractenters before our life in the internet, nobody dares to vainly hope for has o

3、wn 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 expression" free world,you may have own news mail

4、, 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 participant's authoritative status. establishes individual website the unit process to be poss

5、ible to divide into following seven links：1. understands the chinese network individual main page research background and the development present situation2. systems demands analysis and system design3. familiar websites developments pattern, tool and environment4. and wants own work the content whi

6、ch demonstrated to manufacture the homepage5. uses dynamic homepages technology (asp), realization dynamic content renewal6. earnestly selects measured the test example, carries on the overlapping test7. websites later periods consummate, the propaganda and the development directionamong them,the ho

7、mepage 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前   言 隨著國際互聯(lián)網(wǎng)的普及，很多人已經(jīng)不滿足僅僅在internet上的瀏覽信息，而是希望更深入的參與其中，擁有自己的web網(wǎng)站，這似乎已經(jīng)成為一種潮流。如果說個人建立網(wǎng)站是為了追求時尚，那么企業(yè)建立網(wǎng)站

8、就是必然的選擇了。 無論是專業(yè)的，還是業(yè)余的，很多人對網(wǎng)頁制作頗感興趣。事實上制作一個簡單的網(wǎng)頁并不困難，會使用word的人都可以勝任。但想做出超凡脫俗的網(wǎng)頁就不那么容易了，而dreamweaver卻可以滿足你的愿望，它是macromedia公司開發(fā)的集網(wǎng)頁制作和網(wǎng)站管理于一身的所見即所得的網(wǎng)頁編輯器。 同樣出自macromedia公司的flash,fireworks在制作網(wǎng)站的過程中起到了錦上添花的作用，是個人網(wǎng)站實現(xiàn)的好幫手，在制作網(wǎng)站的時候經(jīng)常會用到這些軟件。目 錄摘要-1前言-1第一章：緒論-31.1 我國網(wǎng)絡(luò)發(fā)展現(xiàn)狀-31.2 個人網(wǎng)站的目的-3第二章：個人網(wǎng)站的開發(fā)環(huán)境-42.1

9、dreamweaver簡述-42.2 dreamweaver的操作環(huán)境-42.3 asp技術(shù)-5第三章：需求分析-73.1 概述-73.2個人網(wǎng)站的問題定義與可行性分析-73.3 個人網(wǎng)站整體要求-8第四章：網(wǎng)站制作-94.1站點(diǎn)-94.2首頁-94.3創(chuàng)建其它網(wǎng)頁-11第五章：網(wǎng)頁鏈接的建立-125.1 鏈接的概念-125.2 創(chuàng)立連接-125.3文字鏈接-155.4影像鏈-165.5 email鏈接-185.6文件下載鏈接-215.7在html語言中建立網(wǎng)頁鏈接-22第六章：總 結(jié)-25致謝-26參考文獻(xiàn)-27第一章 緒論1.1 我國網(wǎng)絡(luò)發(fā)展現(xiàn)狀 2010年1月15日，中國互聯(lián)網(wǎng)絡(luò)信息中心

10、（cnnic）發(fā)布了第25次中國互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計報告（以下簡稱報告）。報告數(shù)據(jù)顯示，截至2009年12月，我國網(wǎng)民規(guī)模已達(dá)3.84億，互聯(lián)網(wǎng)普及率進(jìn)一步提升，達(dá)到28.9%。隨著我國互聯(lián)網(wǎng)普及率的逐年提高，互聯(lián)網(wǎng)正在走進(jìn)人們的工作與生活。cnnic報告調(diào)查顯示，在家和單位上網(wǎng)的網(wǎng)民比例在2009年有了明顯的提高，有83.2%的網(wǎng)民選擇在家上網(wǎng)，另有30.2%的網(wǎng)民選擇在單位上網(wǎng)，互聯(lián)網(wǎng)作為人們?nèi)粘９ぞ叩膬r值正在日益提升。1.2 個人網(wǎng)站的目的個人網(wǎng)站最開始的動機(jī)可能是出于興趣或一種愛好，但時間一長，這些興趣或愛好便為自己積累了許多資源，比如數(shù)量可觀的訪問量。當(dāng)這些資源積累到一定程度的時候，

11、商業(yè)意識比較敏感的個人網(wǎng)站站長便開始尋求開展電子商務(wù)，將自己手中的資源進(jìn)行商業(yè)操作，從而，個人網(wǎng)站開始賺錢。當(dāng)然，目前比較流行的個人網(wǎng)站賺錢方式可能更多的還是依賴于廣告，但從目前個人網(wǎng)站的廣告收入來看，它已經(jīng)陷入了一個低谷。所以，如果個人網(wǎng)站想要得到長足的發(fā)展，或者希望自己的網(wǎng)站能夠賺錢，那么必須主動出擊！事在人為，作為一個個人網(wǎng)站，我們可以擁有自己的產(chǎn)品，并把它們賣掉，依靠自己來賺錢！一、個人網(wǎng)站自主經(jīng)營的可行性 網(wǎng)民正在不斷地快速增長。另有調(diào)查表明，網(wǎng)民的平均收入水平提高了，也就是說網(wǎng)民的消費(fèi)水平也提高了。我們個人網(wǎng)站為什么要依靠做廣告來賺錢？我們難道不可以轉(zhuǎn)變一下思路嗎？打個比方，你的網(wǎng)

12、站日訪問量有1000左右(也就是說每天有1000個人左右進(jìn)入你的“商店”)，做廣告相當(dāng)于代理別人的產(chǎn)品，就算賣出去了也只能返回給你一部分的利潤。但是如果你的“商店”賣自己的產(chǎn)品，那么大部分利潤就掌握在自己手中。廣告賺錢只是做網(wǎng)站的“副產(chǎn)品”，真正的產(chǎn)品是你自己的網(wǎng)站。記?。耗愕木W(wǎng)站是一座金礦，可能你只是開采了“瀏覽量”這一層礦產(chǎn)，更深層次的礦產(chǎn)你可能還尚未開發(fā)出來！你完全可以將你自己網(wǎng)站的產(chǎn)品進(jìn)行出售，比如將你網(wǎng)站的精品內(nèi)容印成一本書，然后在網(wǎng)上賣你自己的書。還有更多的經(jīng)營方法，關(guān)鍵是你要去不斷探索！下面我就結(jié)合我對互聯(lián)網(wǎng)的觀察與自己的實踐經(jīng)驗告訴大家如何經(jīng)營自己的產(chǎn)品。對于網(wǎng)絡(luò)經(jīng)商，起初一定

13、要抱平和的心態(tài)！因為中國的網(wǎng)民畢竟不是很多，大家不要過分期望網(wǎng)絡(luò)經(jīng)商會給你帶來很大的效益。要把網(wǎng)絡(luò)經(jīng)商作為一種鍛煉，說句現(xiàn)實的話：“現(xiàn)在賺小錢，以后賺大錢”。這是我對網(wǎng)絡(luò)經(jīng)商的一種“長期作戰(zhàn)”的戰(zhàn)略觀點(diǎn)。第二章 個人網(wǎng)站的開發(fā)環(huán)境2.1 dreamweaver簡述dreamweaver是美國macromedia公司開發(fā)的集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁編輯器，它是第一套針對專業(yè)網(wǎng)頁設(shè)計師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具，利用 它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網(wǎng)頁。dreamweaver是在網(wǎng)頁設(shè)計與制作領(lǐng)域中用戶最多、應(yīng)用最廣、功能最強(qiáng)大的軟件，隨著drea

14、mweaver 8的發(fā)布，更堅定dreamweaver在該領(lǐng)域的地位。它集網(wǎng)頁設(shè)計、網(wǎng)站開發(fā)和站點(diǎn)管理功能于一身，具有可視化、支持多平臺和跨瀏覽器的特性，是目前網(wǎng)站設(shè)計、開發(fā)、制作的首選工具。dreamweaver8.0的特點(diǎn)如下。1、靈活的編寫方式dreamweaver具有靈活編寫網(wǎng)頁的特點(diǎn)，不但將世界一流水平的“設(shè)計”和“代碼”編輯器合二為一，而且在設(shè)計窗口中還精化了源代碼，能幫助用戶按工作需要定制自己的用戶界面。2、可視化編輯界面dreamweaver是一種所見即所得的html編輯器，可實現(xiàn)頁面元素的插入和生成?；蛞暬庉嫮h(huán)境大量減少了代碼的編寫，同時亦保證了其專業(yè)性和兼容性，并且可以對

15、內(nèi)部的html編輯器和任何第三方的html編輯器進(jìn)行實時的訪問。無論用戶習(xí)慣手工輸入html源代碼還是使用可視化的編輯界面，dreamweaver都能提供便捷的方式使用戶設(shè)計網(wǎng)頁和管理網(wǎng)站變得更容易。3、功能更多的css支持css可視化設(shè)計、css檢查工具4、動態(tài)跨瀏覽器驗證當(dāng)保存時系統(tǒng)自動檢查當(dāng)前文檔的跨瀏覽器有效性，可以指定何種瀏覽器為測試用瀏覽器，同時系統(tǒng)自動檢驗以確定頁面有沒有目標(biāo)瀏覽器不支持的tags或css結(jié)構(gòu)。動態(tài)跨瀏覽器有效性檢查功能可以自動核對tags和css規(guī)則是否適應(yīng)目前的主瀏覽器。5、強(qiáng)大的web站點(diǎn)管理功能6、內(nèi)建的圖形編輯引擎7、dreamweaver的集成特性dr

16、eamweaver 8繼承了fireworks、flash和shockwave的集成特性，可以在這些web創(chuàng)作工具之間自由地切換，輕松地創(chuàng)建美觀實用的網(wǎng)頁。8、豐富的媒體支持能力 可以方便地加入java、flash、shockwave、activex以及其他媒體。dreamweaver具有強(qiáng)大的多媒體處理功能，在設(shè)計dhtml和css方面表現(xiàn)得極為出色，它利用javascript和dhtml語言代碼輕松地實現(xiàn)網(wǎng)頁元素的動作和交互操作。dreamweaver還提供行為和時間線兩種控件來產(chǎn)生交互式響應(yīng)和進(jìn)行動畫處理。2.2 dreamweaver的操作環(huán)境我們將工作界面分成了“標(biāo)題欄”、“菜單欄”

17、、“快捷工具欄”、“屬性面板”、“浮動控制面板”5個部分來分別介紹。 2.2 .1 標(biāo)題欄  dreamweaver mx的“標(biāo)題欄”中將顯示文字“macromedia dreamweaver mx”如果打開網(wǎng)頁的話，在后面還會顯示該網(wǎng)頁的一些信息，如網(wǎng)頁標(biāo)題、所在位置及網(wǎng)頁名稱，右邊有三個鈕，分別對應(yīng)dreamweaver mx的最大化最小化和關(guān)閉的操作。2.2 .2菜單欄“標(biāo)題欄”下面就是“菜單欄”，欄中提供了“文件”、“編輯”、“查看”、“插入”、“修改”、“文本”、“站點(diǎn)”、“窗口”、“幫助”10項菜單。單擊其中任意一項菜單，隨即就會出現(xiàn)一個下拉式指令菜單。有些指令的右邊會有

18、鍵盤的代碼，這是該指令的快捷鍵，熟練使用快捷鍵將會有助于提高工作效率。有些指令的右邊會有一個小黑三角的標(biāo)記，它代表該指令還包含下一級的指令，鼠標(biāo)停留片刻即可顯示。2.2 .3快捷工具欄“快捷工具欄”指的是“菜單欄”下邊的3排按鈕，選擇菜單“查看/工具欄”，勾選里面的“插入”、“文檔”和“標(biāo)準(zhǔn)”3項，完整的快捷工具欄就顯現(xiàn)出來了。2.2 .4屬性面板在網(wǎng)頁編輯窗口的下面還有一個面板，它是有名的“屬性面板”，它在這個軟件中起到舉足輕重的作用。屬性面板顧名思義，就是顯示，調(diào)整屬性的面板，根據(jù)鼠標(biāo)所選中對象的不同，“屬性面板”在界面上也會有所差異，用戶可以分別對不同的對象進(jìn)行調(diào)整。2.3 asp技術(shù)a

19、ctive server pages：“動態(tài)服務(wù)器網(wǎng)頁”，一般簡稱為“asp”，asp之所以能受到大家的重視與使用的原因，主要在于所產(chǎn)生的執(zhí)行結(jié)果都是標(biāo)準(zhǔn)的html格式，而且這些程序是在網(wǎng)絡(luò)服務(wù)端中執(zhí)行，使用一般的瀏覽器（如ie 或netscape）都可以正確地獲得asp的“執(zhí)行”結(jié)果，并且將這asp執(zhí)行的結(jié)果直接在瀏覽器中“瀏覽”，不像vbscript或 javascript是在客戶端（client）的瀏覽器上執(zhí)行，若使用vbscript來設(shè)計程序，客戶端（client）在瀏覽器中可以顯示程序執(zhí)行的結(jié)果，可是，客戶端（client）若使用netscape瀏覽器就無法顯示vbscript的執(zhí)行

20、結(jié)果。asp的特點(diǎn)如下：1、任何開發(fā)工具皆可發(fā)展asp只要使用一般的文書編輯程序，如windows記事本，就可以編輯。當(dāng)然，其他網(wǎng)頁發(fā)展工具，例如，frontpage express、 frontpage等也都可以；不過還是建議你用記事本來寫，既省錢又方便，若是使用那些所見即所得的網(wǎng)頁編輯來寫，可能會發(fā)生一些意想不到的離奇狀態(tài)。通過各家瀏覽由于asp程序是在網(wǎng)絡(luò)服務(wù)器端中執(zhí)行，執(zhí)行結(jié)果所產(chǎn)生的html文件適用于不同的瀏覽器。2、語言相容性高asp與所有的activex script語言都相容，除了可結(jié)合html，vbscript、java script active x服務(wù)器組件來設(shè)計外，并可

21、經(jīng)由plug-in（外掛組件模組）的方式，使用其他廠商（third party）所提供的語言。3、隱密安全性高如果我們在瀏覽器中直接查看網(wǎng)頁的原始代碼，就只能看到文件，原始的asp程序代碼是看不到的！這是因杰程序先于網(wǎng)站服務(wù)（web server）端執(zhí)行后，將結(jié)果轉(zhuǎn)換成標(biāo)準(zhǔn)html文件，再傳送到客戶端（client）的瀏覽器上，因此，我們所辛苦撰寫的asp程序并不會輕易地被看見進(jìn)而被盜用。4、易于操控數(shù)據(jù)庫asp可以輕易地通過odbc(open database connectivity)驅(qū)動程序連接各種不同的數(shù)據(jù)庫，例如：access fox pro、dbase、oracle等等，另外，亦可

22、將“文本文件”或是“excel” 文件當(dāng)成數(shù)據(jù)庫用。5、面向?qū)ο髮W(xué)習(xí)容易具備有面向?qū)ο螅╫bject-oriented）功能，學(xué)習(xí)容易，提供了五種方便能力強(qiáng)大的內(nèi)建對象：request、response、sever、application以及session，同時，若使用內(nèi)建的“application”對象或“session”對象所撰寫出來的程序可以在多個網(wǎng)頁之間暫時保存必要的信息。6、asp的六大內(nèi)部對象對象名稱 功能描述request response server session application object context 從客戶端取得信息將信息送給客戶端提供一些web服務(wù)器工具

23、儲存在一個session內(nèi)的用戶信息，該信息僅可被該用戶訪問在一個asp-application中讓不同的客戶端共享信息可以用來配合microsoft transaction 服務(wù)器進(jìn)行分布式事務(wù)處理所以我選擇了asp結(jié)合dreamweaver架構(gòu)個人站點(diǎn)。第三章 需求分析3.1 概述 需求分析最根本的任務(wù)是確定“為了滿足客戶的需要，系統(tǒng)必須做什么”。具體的說，應(yīng)該確定系統(tǒng)必須具有的功能和性能，系統(tǒng)要求的運(yùn)行環(huán)境，并且預(yù)測系統(tǒng)發(fā)展的前景。必須仔細(xì)分析系統(tǒng)中的資料，既要分析系統(tǒng)中的數(shù)據(jù)流，又要分析長期使用的資料儲存。該階段不是確定系統(tǒng)怎樣完成它的工作，而僅僅是確定系統(tǒng)必須完成哪些工作，也就是對目

24、標(biāo)系統(tǒng)提出完整、準(zhǔn)確、清晰、具體的要求。3.2個人網(wǎng)站的問題定義與可行性分析一、明確架設(shè)網(wǎng)站的目的及客戶要求 通常情況下，架設(shè)個人網(wǎng)站主要是為了通過互聯(lián)網(wǎng)表達(dá)個人在商業(yè)、科技、交際、生活等方面的信息需求或者進(jìn)行信息的交流，具有較強(qiáng)的目的性，我的個人網(wǎng)站一般體現(xiàn)在：為了展示自己的風(fēng)采，讓大家和我一起分享我的心得與經(jīng)驗，讓和我有共同愛好的朋友有一個傾訴的地方。二、我的個人網(wǎng)站概貌因為是個人網(wǎng)站，所以只是選擇了自己擅長和喜愛的內(nèi)容，在突出自己的風(fēng)格和特點(diǎn)的同時，還應(yīng)用了現(xiàn)在流行的網(wǎng)站設(shè)計技術(shù)和數(shù)據(jù)庫技術(shù)。因此將網(wǎng)站設(shè)計分為前臺頁面展示平臺和后臺在線管理平臺。三、功能劃分網(wǎng)站設(shè)計有新聞更新，瀏覽者可以

25、在首頁瀏覽自己喜歡的新聞，并且可以在留言板和大家交流，在后臺管理頁面中，通過身份認(rèn)證，管理員我，可以對網(wǎng)站信息進(jìn)行管理。站內(nèi)的其它頁面均是我自己的精心收藏，與大家一起分享3.2.1 功能定義（1）管理員權(quán)限：修改所有頁面內(nèi)容、增刪改文章、管理評論、修改公告、修改管理員自身信息、編輯各頁面欄目、添加刪除圖片、添加刪除音樂、修改版權(quán)信息等。（2）瀏覽者權(quán)限：閱讀所有頁面內(nèi)容、添加評論、添加留言、瀏覽文章、瀏覽圖片、瀏覽音樂等。3.2.2 可行性分析系統(tǒng)可行性分析主要從經(jīng)濟(jì)可行性、技術(shù)可行性和操作可行性三方面去分析。（1）經(jīng)濟(jì)可行性分析 從系統(tǒng)的開發(fā)和效益關(guān)系上講，采用asp這個可以開發(fā)出交互、高性

26、能web數(shù)據(jù)庫應(yīng)用的技術(shù)進(jìn)行開發(fā)，效率較高。該系統(tǒng)的開發(fā)不需要花費(fèi)太多的經(jīng)費(fèi)，只需在域名和服務(wù)器空間租用上有開銷，因為個人網(wǎng)站不涉及超大容量的文件存儲和龐大的訪問量，因此對于服務(wù)器來講，要求不會太高，開銷不會很大。因此，從經(jīng)濟(jì)性分析是可行的。（2）技術(shù)可行性分析根據(jù)現(xiàn)有的技術(shù)設(shè)備條件，在技術(shù)上實現(xiàn)也是可行的。在設(shè)備方面，前期系統(tǒng)開發(fā)在本地端制作完成，只需通過ftp軟件上傳至服務(wù)器端即可，而軟件開發(fā)所需條件相對較低，對于系統(tǒng)開發(fā)及運(yùn)行環(huán)境均不造成任何困難。對于系統(tǒng)開發(fā)人員基本具備了計算機(jī)專業(yè)知識，有一定的編程基礎(chǔ)，熟悉和掌握數(shù)據(jù)庫及網(wǎng)絡(luò)相關(guān)知識，具備開發(fā)條件。（3）操作可行性 該系統(tǒng)操作上非常簡

27、單，對于用戶來說，只要具備ie瀏覽器5.5版本以上即可通過域名搜索即可登錄本站。3.3 個人網(wǎng)站整體要求3.3.1 功能要求（1）頁面風(fēng)格簡潔明快，給人以較好的視覺印象。（2）用戶瀏覽、操作均便捷，迅速。（3）用戶權(quán)限、功能的設(shè)置要準(zhǔn)確無誤。3.3.2 系統(tǒng)性能要求在目前硬件設(shè)備條件下，要求處理程序的速度相對較快。因此，在程序設(shè)計階段，優(yōu)化代碼，降低處理時間是需要考慮的問題。3.3.3關(guān)于未來需求由于系統(tǒng)開發(fā)時間較短，可能不是很完善，在運(yùn)行過程中還會遇到一些問題，所以應(yīng)在系統(tǒng)設(shè)計過程中對未來可能需要的擴(kuò)充和修改做好準(zhǔn)備，以便及時變更第四章 網(wǎng)站制作4.1 站點(diǎn)4.1.1 創(chuàng)建站點(diǎn)要制作一個網(wǎng)站

28、，第一步操作都是一樣的，就是要創(chuàng)造一個“站點(diǎn)”，這樣可以使整個網(wǎng)站的脈絡(luò)結(jié)構(gòu)清晰地展現(xiàn)在面前，避免了以后再進(jìn)行紛雜的管理。從菜單中選擇“站點(diǎn)/管理站點(diǎn)”在彈出的對話框中選擇“新建”，之后再選擇其中的“站點(diǎn)”，再次彈出一個對話框，在文本框中輸入自己已經(jīng)企化好的網(wǎng)站名稱“追夢人”。填好后，單擊“下一步”，進(jìn)入下一個步驟。由于我要做的是一個靜態(tài)的網(wǎng)頁，所以選擇上面的一項“否，我不想使用服務(wù)器技術(shù)?！?單擊“下一步”，進(jìn)入下一個步驟。在此選項中有兩個選擇，選擇推薦的“編輯我的計算機(jī)上的本地副本，完成后再上傳到服務(wù)器”。底下的文本框允許在本地磁盤上指定一個文件夾，dreamweaver將在其中儲存站點(diǎn)文

29、件的本地副本。單擊該文本框后面的文件夾圖標(biāo)，新建并指定一個空的文件夾“e:/ding”。之后單擊“下一步“，進(jìn)入下一個步驟。這一步是如何設(shè)置連接到遠(yuǎn)程服務(wù)器，彈出式菜單中有6中選擇，這里選擇“無”。而后“下一步”再“完成”，即可。4.1.2 創(chuàng)建站點(diǎn)內(nèi)容站點(diǎn)創(chuàng)建完成后，就可以創(chuàng)建web頁來填充站點(diǎn)了。在“右側(cè)浮動面板組”中選擇“文件/文件”面板，此時整個網(wǎng)站中沒有任何內(nèi)容。用鼠標(biāo)右擊面板中的本地根目錄文件夾。在彈出的菜單中選擇“新建文件”，新建一個文件后將其命名為“index.htm(或index.html),它就是未來的首頁。網(wǎng)站分為“平面設(shè)計”、“動畫制作”、“網(wǎng)文精品”、“經(jīng)典回顧”、“

30、個人說明“這五個大欄目，所以繼續(xù)用鼠標(biāo)右擊右側(cè)，在彈出的菜單中選擇第二項“new folder（新建文件夾）”。執(zhí)行五次操作，新建五個文件夾，并把它們重命名為graph、anim、books、music、letter，分別對應(yīng)上面的五個大欄目。存放它們各自的內(nèi)容。之后再次新建1個文件夾，命名為images,用來存放“所有的圖象文件”的內(nèi)容。之后在個欄目的文件夾里還要建立想相應(yīng)的欄目網(wǎng)頁。4.2首頁4.2.1 設(shè)置首頁布局首頁是打開網(wǎng)站后在瀏覽器中顯示的第一個頁面。它是起什么名字通常要視server端的設(shè)置，一般的有index.htm,default.htm或home.htm等，目前主要以ind

31、ex.htm的居多。當(dāng)然，后綴名為html也是正確的。具體設(shè)置方法是：右健單擊“文件”浮動面板中的index.htm,在彈出的菜單中選擇“設(shè)成首頁”。首頁的布局有很多方法，在這里我所用到的是表格的“布局模式”?！安季帧蹦Ｊ街械谋砀穹Q為布局表格，單元格稱為布局單元格。在繪制布局表格和布局單元格時，必須從“標(biāo)準(zhǔn)”模式切換到“布局”模式。直接單擊“布局”按鈕即可。操作步驟：1、 在“插入快捷欄”的“布局”分類中，單擊“布局表格”按紐。2、 將變成“+”形狀的鼠標(biāo)光標(biāo)放到編輯中網(wǎng)頁上，在要繪制的地方進(jìn)行拖動就可以進(jìn)行創(chuàng)建了。（如果繪制的是第一個表格必須從網(wǎng)頁的最左上角開始繪制）。3、 3、 

32、       在這里要繪制多個表格，可以再次單擊“布局表格”按紐進(jìn)行繪制，也可以按住ctrl鍵繪制多個表格。4.2.2設(shè)置首頁的頁面屬性 首先雙擊“文件”浮動面板中的index.htm,進(jìn)入頁面的編輯窗口。右健單擊空白區(qū)域，在菜單中選擇“頁面屬性”，之后彈出“頁面屬性”對話框，若選擇主菜單“修改/頁面屬性”項，也可以把打開該對話框。 在“頁面屬性”對話框中，左側(cè)窗口顯示“分類”，其中包括了“外觀”、“鏈接”、“標(biāo)題”、“標(biāo)題/編碼”、“跟蹤圖像”5項，右側(cè)區(qū)域則顯示各類中可以設(shè)置的項目。4.2.3查看和編輯頭內(nèi)容一個網(wǎng)頁文件結(jié)構(gòu)上實際

33、是由兩部分組成，頭（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個按鈕“文件頭”旁邊的下拉箭頭，會彈出菜單，該項列出的便是即將插入的頭內(nèi)容。4.2.4 插入圖像 圖

34、像是網(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)停留在要插入圖像的位置，然后單擊“菜單欄”下面“插入快健欄”的下拉表，選擇其中

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

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

37、rer通過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 的flash文件，即可將其插入到dreamwe aver的“網(wǎng)頁

38、編輯窗口”中，可以看到，在這個窗口中flash文件的大小。在 這里我的主頁插入的一個動畫。4.2.6插入文本 在網(wǎng)頁中，文本內(nèi)容也可以說是重要的組成部分，一個網(wǎng)站成功與否，它是最關(guān)鍵的因素。在這最關(guān)鍵的因素?？韶S富網(wǎng)站的文字內(nèi)容，并以最最美觀、最整齊的方式放入到網(wǎng)頁中。插入文本的兩種方式一種是在網(wǎng)頁編輯窗口中直接用鍵盤敲入文本。這可以算是最基本的輸入方式了，和一些文本編輯軟件（如microsoft word）的使用方法一樣，選擇好習(xí)慣的輸入法，就可以運(yùn)指如飛了。另一種是復(fù)制文本的方式。有些讀者可能不喜歡使用dreamweaver來進(jìn)行打字的工作，而更習(xí)慣在專門的文本編輯軟件中快速打字，如mic

39、rosoft 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í)行主菜單“編輯/粘貼”命令或直接使用快捷鍵ctrl+v,即可將大段的文本快速粘貼到網(wǎng)頁中。這在我的“網(wǎng)文精品”中用到很多，全部是在word軟件中排好ctrl+c,

40、然后點(diǎn)擊要粘貼的位置，crtl+v到dreamweaver即可。4.3創(chuàng)建其它網(wǎng)頁 還有其它的幾個網(wǎng)站與主頁的制作相同，一個網(wǎng)頁是圖象和文字的組合?！捌矫嬖O(shè)計”中的圖象插入和前面的介紹相似，并可以在屬性攔中調(diào)節(jié)圖象的大小。 在dreamwerver中常常會用到firework、flash，它們是相輔相成，在主頁中的主體部分就是用firework在“個人說明”中也用到這點(diǎn)，首先定好需要尺寸，在屬性中設(shè)好背景，顏色等等，插入圖象，輸入文字，也word里的操作雷同。第五章 網(wǎng)頁鏈接的建立5.1 鏈接的概念 鏈接（或稱超鏈接）是網(wǎng)頁與網(wǎng)頁之間一種單向的連接關(guān)系。也是www的魅力所在。為了把intern

41、et上眾多的網(wǎng)站和網(wǎng)頁聯(lián)系起來，構(gòu)成一個有機(jī)的整體，就要在網(wǎng)頁上加入鏈接。通過點(diǎn)擊網(wǎng)面上的鏈接，瀏覽者才能在信息海洋中盡情遨游。網(wǎng)站實際上是由很多網(wǎng)頁組成的，那么網(wǎng)頁之間是如何聯(lián)系的呢？這就是本章要講的內(nèi)容-網(wǎng)頁的“鏈接”?！版溄印保址Q“超鏈接"（hyperlink）,它作為網(wǎng)頁的橋梁，起著相當(dāng)重要的作用。網(wǎng)頁中的很多對象都可以加入“鏈接”屬性。在dreamweaver mx2004中，如果以“鏈接”的媒介來劃分的話，則“鏈接”可以分為“文字鏈接”、“圖像鏈接”、“圖像地圖鏈接”、“內(nèi)部鏈接和外部鏈接”、“e-mail鏈接”、“命名錨記鏈接”、“文件下載鏈接”和“跳轉(zhuǎn)菜單”，共8種

42、。其中部分內(nèi)容在之前的章節(jié)中可能接觸過，這里將對其進(jìn)行更深入的講解。5.2 創(chuàng)立連接 5.2.1 創(chuàng)建超鏈接1. 使用屬性檢查器創(chuàng)建鏈接 這是最常用的一種方法。使用“屬性檢查器”可以把當(dāng)前文檔中的文本或圖像鏈接到另一個文檔。使用屬性檢查器創(chuàng)建鏈接的步驟如下：（1）選擇需要創(chuàng)建鏈接的文本或圖像，例如選擇文字“評審辦法”如圖所示（2）在“屬性檢查器”中的“鏈接”中輸入要鏈接到的文件名稱如圖所示。 （3）或單擊瀏覽文件圖標(biāo)打開“選擇文件”對話框，選擇要鏈接的文件“howtoselect.htm”，如圖所示（4）選擇鏈接文檔的載入方式。如圖所示選擇“_self”方式。注意：默認(rèn)情況鏈接的文檔在當(dāng)前窗口

43、或框架中打開“_self”方式，“_blank”是將被鏈接文檔載入到新的未命名瀏覽器窗口中，“_parent”是將被鏈接文檔載入到父框架集或包含該鏈接的框架窗口中，“_top”是將被鏈接文檔載入到整個瀏覽器窗口并刪除所有框架。 (5)設(shè)置完成，效果如圖所示。 2. 使用指向文件圖標(biāo)創(chuàng)建鏈接使用指向文件圖標(biāo)創(chuàng)建鏈接的步驟如下：(1)在文檔窗口選擇文檔或圖像。樣選擇“評審辦法”。(2)在“屬性檢查器”中，拖動鏈接域右邊的指向文件圖標(biāo)，按住鼠標(biāo)左鍵并拖動連向“站點(diǎn)面板”中的一個文檔，如“index.htm”。如圖所示。 (3)釋放鼠標(biāo)左鍵，鏈接被創(chuàng)建，在屬性面板的鏈接地址框中出現(xiàn)已鏈接的地址即可。

44、3. 直接為頁面元素創(chuàng)建鏈接（1）在文檔窗口選擇文本。（2） 按住shift鍵，在選定的文本上拖動鼠標(biāo)指針，拖動時指向文件圖標(biāo)出現(xiàn)，如圖所示：(3)指定鏈接到目標(biāo)，例如鏈接到“index.htm”，釋放鼠標(biāo)，鏈接被建立,這就樣鏈接就被建成。結(jié)果與上面的方法相同這里不在重復(fù)。注意：給圖像建立鏈接的方法與上相同。 5.3文字鏈接“文字鏈接”即以文字作為媒介的鏈接，它是網(wǎng)頁中最常被使用的鏈接方式，具有“文件小、制作簡單和便于維護(hù)”的特點(diǎn)。接下來結(jié)合我的個人網(wǎng)站為實例，來講解如何為文字建立“鏈接”。具體操作步驟如下所述。操作步驟步驟1  準(zhǔn)備好已經(jīng)制作完成的首頁的各個欄目頁面（假設(shè)除了“鏈接

45、”，其他內(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 觀察“屬性面板”，其中包括一個“鏈接”文本框。步驟4 接下來需要把鏈接的地址加入到文本框中，方法有3種。這里我用到的是直接點(diǎn)擊文件夾圖標(biāo)，在文件夾中找到要鏈接的對象graph.htm。這樣就建立了超鏈接。不過有點(diǎn)很重要，由于大多數(shù)服務(wù)器都不支持中文文件名

46、，而且對大小寫敏感，因此采用英文文件名并統(tǒng)一大小寫。步驟5 在“鏈接”文本框下面還有一個“目標(biāo)”下拉列表，從中可以選擇鏈接網(wǎng)頁顯示的窗口方式，共有4種。實例中沒有選擇任何選項，保持空白，表示在原窗口中打開鏈接網(wǎng)頁。步驟6 還可以設(shè)置一些“鏈接”的屬性，這是前面講過的內(nèi)容。單擊“屬性面板”中的“頁面屬性”，選擇其中的“鏈接”分類，可以進(jìn)行的設(shè)置有“鏈接字體”、“大小”、“鏈接顏色”、“變換圖像鏈接”顏色、“已訪問鏈接”顏色、“活動鏈接”顏色及“下劃線樣式”。步驟7 至此，第1個欄目的鏈接就制作完畢了，按下ctrl+s保存網(wǎng)頁，再按下f12預(yù)覽，測試一下，當(dāng)鼠標(biāo)放在“平面設(shè)計”這4個文字上時將變成

47、手形，并且瀏覽器窗口下面的狀態(tài)欄中會顯示鏈接到的網(wǎng)頁的地址，單擊文字，頁面會立即跳轉(zhuǎn)到第1個欄目中，這表示鏈接已經(jīng)制作成功了。步驟8 同理，按照以上步驟，再為“動畫制作”和“網(wǎng)文精品”“經(jīng)典回顧“等其它欄制作指向?qū)?yīng)欄目的鏈接。步驟9 通常在欄目頁面中還需要有“返回首頁”的鏈接，單擊其后可以跳轉(zhuǎn)回首頁，因此在各個欄目中還要插入“網(wǎng)站首頁”的文字，并且制作指向首頁index.html的鏈接，制作方法不變。至此，整個“文字鏈接”的實例就全就全部完成了。通過對這個實例的講解，讀者不僅應(yīng)該學(xué)會如何為文字制作鏈接，還應(yīng)用對“鏈接”有了更加深刻的理解，鏈接的目的何在？它到底能夠在網(wǎng)頁的網(wǎng)站中發(fā)揮什么樣的作

48、用？怎樣才能更好地使用它？這些是網(wǎng)頁制作者更應(yīng)該思考的問題。下面繼續(xù)介紹其他類型的鏈接。5.4影像鏈接在圖像的影像地圖中創(chuàng)建鏈接的步驟如下：(1) 選擇圖像，如圖所示。 (2) 單擊“屬性檢查器”左下角的矩形熱點(diǎn)工具按鈕，在圖像上拖動創(chuàng)建影像，如圖所示。 (3) 為影像部分創(chuàng)建鏈接。到“aboutus.htm”，并且設(shè)定“目標(biāo)”為“_blank”，“替代”為“關(guān)于本次大賽”，如下圖所示。 、 （4）設(shè)置完成后用瀏覽器瀏覽的效果如上圖所示。 5.5 email鏈接在網(wǎng)頁上創(chuàng)建電子郵件鏈接，方便用戶意見反饋。當(dāng)瀏覽者單擊電子郵件鏈接時，可打開瀏覽器默認(rèn)的電子郵件處理程序，收件人郵件地址被電子郵件鏈

49、接中指定的地址自動更新，無須瀏覽者手工輸入。 使用插入郵件鏈接命令創(chuàng)建電子郵件鏈接的操作步驟如下：1. 使用菜單選項（1）選擇主菜單中的“插入”選項中的“電子郵件鏈接”如圖所示（2）出現(xiàn)電子郵件對話框如圖所示 （3）單擊“確定”安鈕即可完成。設(shè)置后的頁面顯示為圖2. 用“插入面板”中的“常用”中的“電子郵件鏈接”（1）選擇“插入面板”中的“常用”中的“電子郵件鏈接”如圖所示（2）單擊“電子郵件鏈接”按鈕。以后的操作與上一種方法相同這里不在重復(fù)。3. 使用“屬性檢查器”為對象加電子郵件鏈接。（1）選中所要鏈接的文本或圖像如圖所示。（2）在“鏈接”欄中輸入郵箱地址mailto:tjttumatch

50、_1如圖所示 （3）即對所選文本或圖像建立完鏈接。5.6文件下載鏈接“文件下載鏈接”的原理很簡單，只要鏈接文件屬于瀏覽無法識別的關(guān)型，便都會使用ie瀏覽器直接進(jìn)行下載，并保存到本地計算機(jī)中。瀏覽器無法識別的文件類型有很多，這里就介紹一個最常用的，以zip或rar為后綴名的壓縮格式文件，這種文件可以使用主流的壓縮軟件（如winzip、winrar）來制作。下面我們就業(yè)以實例來說明。在前面“插入多媒體”一章中，我們曾經(jīng)講過直接鏈接文件的方式來插入“視頻”，即直接在“鏈接”文本框中輸入“文件名+名后綴名”，如olympus.wmv。單日擊這個鏈接，經(jīng)過數(shù)據(jù)下載后，windows系統(tǒng)將啟動自帶的媒體播

51、放器windows media player 來播放該視頻。操作步驟步驟1 先將視頻文件olympus.wmv通壓縮成olympus.rar文件，放入站點(diǎn)的media文件夾下。步驟2 將文件路徑輸入至“鏈接”文本框中。步驟3 保存網(wǎng)頁，按下f12預(yù)覽，在瀏覽器中單擊“下載精彩廣告視頻”鏈接文本，會彈出“文本下載”選擇框，單擊其中的“保存”按鈕。步驟4 在“另存為”對框中選擇保存到本地計算機(jī)中的位置，實例中為“經(jīng)典回顧”文件夾。之后單擊“保存”按鈕，壓縮文件即保存到該位置中。至此，“文件下載鏈接”便制作完成了。讀者可以打開“我的文檔”文件夾，解壓縮olympus.rar文件，隨時欣賞下載影片。本設(shè)計中未用到此鏈接，在此只作簡單介紹。5.7在html語言中建立網(wǎng)頁鏈接5.7.1文字鏈接在html語言中用超鏈接標(biāo)記指向一個目標(biāo)。其基本格式為：<a hr