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

1、<p>　　畢 業(yè) 論 文（設計）</p><p>　　關于Dreamweaver的網(wǎng)頁設計</p><p>　　———————————————————</p><p><b>　　摘 要</b></p><p>　　在Internet飛速發(fā)展的今天，互聯(lián)網(wǎng)已成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，正以一種

2、前所未有的沖擊力影響著人類的活動。它在人們政治、經(jīng)濟、生活等各個方面發(fā)揮著重要的作用。因此網(wǎng)站建設在Internet應用上的地位顯的格外重要，它已成為政府、企事業(yè)單位信息化建設中的重要組成部分。</p><p>　　現(xiàn)今的社會，人們已經(jīng)離不開了網(wǎng)絡，網(wǎng)絡已經(jīng)成為人與人之間交流的一種形式，它能夠把事情的復雜化轉為簡單化，擺脫了時間和空間的限制。網(wǎng)站為很多人提供了一個網(wǎng)絡生活空間，通過其網(wǎng)頁展示了企業(yè)介紹、城市文化、

3、校園文化介紹、招商信息、加盟程序、留言等一系列內容的介紹。為了更好的宣傳和服務于經(jīng)濟發(fā)展，我通過制作一個網(wǎng)站來介紹宣傳一下我的家鄉(xiāng)。本文比較系統(tǒng)的闡述了有關網(wǎng)站建設方面的相關理論知識及該網(wǎng)站開發(fā)設計，充分體現(xiàn)了計算機技術服務于經(jīng)濟建設的重要思想。</p><p>　　關鍵詞: 網(wǎng)站建設，Internet，城市發(fā)展</p><p><b>　　Abstract</b>&

4、lt;/p><p>　　In the Internet rapid development today, the Internet has become a people quickly get, release and transmit information, is an important channel in an unprecedented wallop affect human activities. I

5、t in people politics, economy, life aspects played an important role. Therefore website construction in the Internet application status of especially important to show, and it has become the government, enterprises, an i

6、mportant part of informatization construction. </p><p>　　Today's society, people have without the Internet, network has become between a form of communication, it can make things complicated to simplicit

7、y, get rid of the time and space restrictions. Web site for many people provides a network life space, through its web demonstrate the enterprise introduces, urban culture and campus culture introduction, investment prom

8、otion information, join procedure, introduced a series of content of the message. In order to better propaganda and in the service of </p><p>　　Keywords: "website construction" "Internet"

9、 "urban development" </p><p><b>　　目錄</b></p><p><b>　　第一章 前言4</b></p><p><b>　　1．1課題來源4</b></p><p>　　1．2網(wǎng)站開發(fā)項目需求分析4<

10、/p><p>　　第二章 網(wǎng)頁制作概述6</p><p>　　2.1 網(wǎng)頁的類型6</p><p>　　2.1.1 靜態(tài)頁面6</p><p>　　2.1.2 動態(tài)頁面6</p><p>　　2.2 網(wǎng)頁開發(fā)技術7</p><p>　　2.3 網(wǎng)頁布局7</p><p

11、>　　2.3.1 網(wǎng)頁布局的基本概念8</p><p>　　2.3.2網(wǎng)頁布局方法9</p><p>　　2.3.2 網(wǎng)頁布局技術10</p><p>　　2.4網(wǎng)頁配色11</p><p>　　2.5 網(wǎng)頁設計流程11</p><p>　　第三章 涉及軟件13</p><p&g

12、t;　　3.1 DreamWeaVer cs3介紹13</p><p>　　3.2 DreamWeaVer cs3操作界面13</p><p>　　第四章 建立網(wǎng)頁鏈接錯誤!未定義書簽。</p><p>　　4.1 文字鏈接14</p><p>　　4.2 圖像鏈接15</p><p>　　4.3在HTML

13、語言中建立網(wǎng)頁鏈接15</p><p>　　第五章 結論18</p><p><b>　　致 謝19</b></p><p><b>　　第一章 前言</b></p><p><b>　　1．1課題來源</b></p><p>　　隨著二

14、十一世紀新興科技的飛速發(fā)展，如今的信息產(chǎn)業(yè)正在經(jīng)受著一個巨大的挑戰(zhàn)，同時也面臨著一個重大的機遇。就目前的科技發(fā)展水平而言，信息產(chǎn)業(yè)的發(fā)展已經(jīng)不能夠滿足社會化大生產(chǎn)的要求，因此，各個國家集中人力、財力加大對信息技術產(chǎn)業(yè)的投入，以適應目前需要?？上驳氖窃谶@幾十年的發(fā)展中我們有了互聯(lián)網(wǎng)?；ヂ?lián)網(wǎng)加大了我們了解世界的眼界，縮緊了人與人之間的距離，這就更容易的使我們走上信息化的道路。</p><p>　　互聯(lián)網(wǎng)拉近了各個領域

15、之間的距離，如今利用互聯(lián)網(wǎng)來宣傳已經(jīng)是必不可少的工具，城市發(fā)展也需要互聯(lián)網(wǎng)的宣傳來帶動自身的發(fā)展。</p><p>　　1.2網(wǎng)站開發(fā)項目需求分析</p><p>　　一個網(wǎng)站項目的確立是建立在各種各樣的需求上面的，這種需求往往網(wǎng)站建設在Internet應用上的地位顯的格外重要，它已成為政府、企事業(yè)單位信息化建設中的重要組成部分來自于客戶的實際需求或者是出于自身發(fā)展的需要。在Interne

16、t飛速發(fā)展的今天，互聯(lián)網(wǎng)已成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，正以一種前所未有的沖擊力影響著人類的活動。它在人們政治、經(jīng)濟、生活等各個方面發(fā)揮著重要的作用。因此網(wǎng)站建設在Internet應用上的地位顯的格外重要，它已成為政府、企事業(yè)單位信息化建設中的重要組成部分。</p><p>　　第二章 網(wǎng)頁制作概述</p><p><b>　　2.1 網(wǎng)頁的類型</b>

17、</p><p>　　網(wǎng)頁有多種分類,我們籠統(tǒng)意義上的分類是動態(tài)和靜態(tài)的頁面,原則上講靜態(tài)頁面多通過網(wǎng)站設計軟件來進行重新設計和更改,相對的比較滯后，當然現(xiàn)在有網(wǎng)站管理系統(tǒng)，也可以生成靜態(tài)頁面~我們稱這種靜態(tài)頁面為偽靜態(tài)。動態(tài)頁面通過網(wǎng)頁腳本與語言自動處理自動更新的頁面。</p><p>　　2.1.1 靜態(tài)頁面</p><p>　　靜態(tài)頁面是網(wǎng)頁的代碼都在頁面中，

18、不需要執(zhí)行asp,php,jsp,.net等程序生成客戶端網(wǎng)頁代碼的網(wǎng)頁。靜態(tài)頁面不能自主管理發(fā)布更新的頁面,如果想更新網(wǎng)頁內容,要通過FTP軟件把文件DOWN下來用網(wǎng)頁制作軟件修改（通過fso等技術例外）。但是靜態(tài)頁面最大的好處是下載速度快，因為不需要程序運算和數(shù)據(jù)庫連接。常見的靜態(tài)頁面以.html、.htm為擴展名的。并非網(wǎng)站上沒有動畫的就是靜態(tài)頁面[3]。</p><p>　　2.1.2 動態(tài)頁面</

19、p><p>　　動態(tài)頁面是通過執(zhí)行asp、php、jsp、.net等程序生成客戶端網(wǎng)頁代碼的網(wǎng)頁。動態(tài)頁面通?？梢酝ㄟ^網(wǎng)站后臺管理系統(tǒng)對網(wǎng)站的內容進行更新管理。發(fā)布新聞，發(fā)布公司產(chǎn)品，交流互動，博客，網(wǎng)上調查等，這都是動態(tài)網(wǎng)站的一些功能，也是我們常見的。動態(tài)網(wǎng)頁是需要語言環(huán)境支持的，動態(tài)頁面常見的擴展名有：.asp、 .php、 .jsp 、.cgi 等。動態(tài)頁面的“動態(tài)”是網(wǎng)站與客戶端用戶互動的意思，而非網(wǎng)頁上有動

20、畫的就是動態(tài)頁面[4]。</p><p>　　動態(tài)網(wǎng)頁是最常用的網(wǎng)站建設的一種表達形式，其優(yōu)點在于可以根據(jù)先前所制定好的程序界面，根據(jù)用戶的不同請求返回相應的數(shù)據(jù)?？梢哉f是一對多的關系。從而達到資源的最大利用和節(jié)省服務器上的物理資源。如果今后需要改變站點風格，只需要重新制作前臺所訪問的數(shù)據(jù)即可。只要數(shù)據(jù)庫結構不變，可以很快的進行改版的。</p><p>　　2.2 網(wǎng)頁開發(fā)技術</p

21、><p>　　動態(tài)網(wǎng)頁開發(fā)技術介紹——HTML、ASP、JSP、CGI、PHP。 </p><p>　　HTML（HyperTextMark-upLanguage）即超文本標記語言，是WWW的描述語言。嚴格的來講，HTML不能算做一門編程語言，因為它沒有自己的數(shù)據(jù)類型，也沒有分支、循環(huán)等控制結構。它的設計簡單，結構靈活，允許在Web瀏覽器及其它兼容的應用程序中顯示文本和圖像，并且文檔的某些部分

22、可以成為超鏈接。完成后把這些文檔保存為*.html文件，然后用瀏覽器打開。    HTML是網(wǎng)絡的通用語言,一種簡單、通用的全置標記語言。它允許網(wǎng)頁制作人建立文本與圖片相結合的復雜頁面，這些頁面可以被網(wǎng)上任何其他人瀏覽到，無論使用的是什么類型的電腦或瀏覽器[5]。</p><p>　　在早期，動態(tài)網(wǎng)頁技術主要采用CGI技術，即Common Gateway Interface(公用網(wǎng)關接口)。

23、在早期，你可以使用不同的程序編寫合適的CGI程序，如Visual Basic,Delphi或C/C++等。雖然CGI技術成熟而且功能強大，但由于編程困難，效率低下，修改復雜等缺陷，所以有逐漸被新技術取代的趨勢。</p><p>　　ASP全名Active Server Pages，是一個WEB服務器端的開發(fā)環(huán)境，利用它可以產(chǎn)生和運行動態(tài)的、交互的、高性能的WEB服務應用程序。ASP采用腳本語言VB Script（

24、Java script）作為自己的開發(fā)語言。 ASP更精確的說是一個中間件，這個中間件將Web上的請求轉入到一個解釋器中，在這個解釋器中將所有的ASP的Script進行分析，再進行執(zhí)行，而這時可以在這個中間件中去創(chuàng)建一個*.html文件（靜態(tài)網(wǎng)頁）。 PHP是一種跨平臺的服務器端的嵌入式腳本語言. 它大量地借用C,Java和Perl語言的語法, 并耦合PHP自己的特性,使WEB開發(fā)者能夠快速地寫出動態(tài)生成頁面.它支持目前絕大多數(shù)數(shù)

25、據(jù)庫。還有一點，PHP是完全免費的[6]。</p><p>　　JSP 是Sun公司推出的新一代站點開發(fā)語言，他完全解決了目前ASP,PHP的一個通?。_本級執(zhí)行（據(jù)說PHP4 也已經(jīng)在Zend 的支持下，實現(xiàn)編譯運行）。Sun 公司借助自己在Java 上的不凡造詣，將Java 從Java 應用程序 和 Java Applet 之外，又有新的碩果，就是Jsp－－Java Server Page。Jsp 可以在S

26、erverlet和JavaBean的支持下，完成功能強大的站點程序。</p><p><b>　　2.3 網(wǎng)頁布局</b></p><p>　　網(wǎng)站主頁就好象是宣傳欄或者店面——對訪問者產(chǎn)生第一印象，都希望盡量給人留下好的印象。 </p><p>　　一般來說，好的網(wǎng)站應該給人有這樣的感覺： </p><p><

27、b>　　干凈整潔； </b></p><p><b>　　條理清楚； </b></p><p><b>　　專業(yè)水準； </b></p><p><b>　　引人入勝。 </b></p><p>　　網(wǎng)頁應該力求抓住而不是淹沒瀏覽者的注意力，過多的閃爍、色彩、

28、下拉菜單框、圖片等會讓訪問者無所適從——離開是最好的選擇，就象一些商店，播放震耳欲聾的發(fā)燒音樂，你要做的唯一決定就是離開那里，越快越好。</p><p>　　2.3.1 網(wǎng)頁布局的基本概念</p><p>　　最開始，網(wǎng)頁呈現(xiàn)在你面前的時侯，它就好像一張白紙，它需要你任意揮灑你的設計才思，可以創(chuàng)造出自己的設計方案。，雖然你能控制一切你所能控制的東西，但假如你知道什么是一種約定俗成的標準或者

29、說大多數(shù)訪問者的瀏覽習慣，那么你可以在此基礎上加上自己的東西，這樣你創(chuàng)造出來的網(wǎng)頁才能更好的被別人接受?！?lt;/p><p><b>　?。?） 頁面尺寸</b></p><p>　　由于頁面尺寸和顯示器大小及分辨率有關系，網(wǎng)頁的局限性就在于你無法突破顯示器的范圍，而且因為瀏覽器也將占去不少空間，留下給你的頁面范圍變得越來越小。一般分辨率在800x600的情況下，頁面的

30、顯示尺寸為：780x428個象素；分辨率在640x480的情況下，頁面的顯示尺寸為:620X311個象素；分辨率在1024X768的情況下，頁面的顯示尺寸為：1007x600。從以上數(shù)據(jù)可以看出，分辨率越高頁面尺寸越大。</p><p>　　瀏覽器的工具欄也是影響頁面尺寸的原因。一般目前的瀏覽器的工具欄都可以取消或者增加，那么當你顯示全部的工具欄時，和關閉全部工具欄時，頁面的尺寸是不一樣的。</p>

31、<p>　　在網(wǎng)頁設計過程中，向下拖動頁面是惟一給網(wǎng)頁增加更多內容(尺寸)的方法。除非你能肯定站點的內容能吸引大家拖動，否則不要讓訪問者拖動頁面超過三屏。如果需要在同一頁面顯示超過三屏的內容，那么你最好能在上面做上頁面內部連接，方便訪問者瀏覽。</p><p><b>　?。?）整體造型</b></p><p>　　造型就是創(chuàng)造出來的物體形象，這里是指頁面

32、的整體形象。這種形象應該是一個整體，圖形與文本的接合應該是層疊有序。雖然，顯示器和瀏覽器都是矩形，但對于頁面的造型，你可以充分運用自然界中的其它形狀以及它們的組合：矩形，圓形，三角形，菱形等。</p><p>　　對于不同的形狀，它們所代表的意義是不同的。比如矩形代表著正式，規(guī)則，</p><p>　　你注意到很多ICP和政府網(wǎng)頁都是以矩形為整體造型；圓形帶表著柔和，團結，溫暖，安全等，許

33、多時尚站點喜歡以圓形為頁面整體造型；三角形代表著力量，權威，牢固，侵略等，許多大型的商業(yè)站點為顯示它的權威性常以三角形為頁面整體造型；菱形代表著平衡，協(xié)調，公平，一些交友站點常運用菱形作為頁面整體造型。雖然不同形狀帶表著不同意義，但目前的網(wǎng)頁制作多數(shù)是接合多個圖形加以設計，在這其中某種圖形的構圖比例可能占的多一些。</p><p><b>　　（3）頁頭</b></p><

34、;p>　　頁頭又可稱之為頁眉，頁眉的作用是定義頁面的主題。比如一個站點的名字多數(shù)都顯示在頁眉里。這樣，訪問者能很快知道這個站點是什么內容。頁頭是整個頁面設計的關鍵，它將牽涉到下面的更多設計和整個頁面的協(xié)調性。頁頭常放置站點名字的圖片和公司標志以及旗幟廣告。</p><p><b>　?。?）文本</b></p><p>　　文本在頁面中出現(xiàn)都數(shù)以行或者塊(段落)

35、出現(xiàn)，它們的擺放位置決定者整個頁面布局的可視性。在過去因為頁面制作技術的局限，文本放置的位置的靈活性非常小，而隨著DHTML的興起，文本已經(jīng)可以按照自己的要求放置到頁面的任何位置。</p><p><b>　?。?）頁腳</b></p><p>　　頁腳和頁頭相呼應。頁頭是放置站點主題的地方，而頁腳是放置制作者或者公司信息的地方。你能看到，許多制作信息都是放置在頁腳的

36、。</p><p><b>　?。?）圖片</b></p><p>　　圖片和文本是網(wǎng)頁的兩大構成元素，卻一不可。如何處理好圖片和文本的位置成了整個頁面布局的關鍵。而你的布局思維也將體現(xiàn)在這里。</p><p><b>　?。?）多媒體</b></p><p>　　除了文本和圖片，還有聲音，動畫，視

37、頻等等其它媒體。雖然它們不是經(jīng)常能被利用到，但隨著動態(tài)網(wǎng)頁的興起，它們在網(wǎng)頁布局上也將變得更重要。</p><p>　　2.3.2網(wǎng)頁布局方法</p><p>　　網(wǎng)頁布局的方法有兩種，第一種為紙上布局；第二種為軟件布局。下面分別加以介紹。</p><p><b>　　（1）紙上布局法</b></p><p>　　許多網(wǎng)

38、頁制作者不喜歡先畫出頁面布局的草圖，而是直接在網(wǎng)頁設計器里邊設計布局邊加內容。這種不打草稿的方法不能讓你設計出優(yōu)秀的網(wǎng)頁來。所以在開始制作網(wǎng)頁時，要先在紙上畫出你頁面的布局草圖來。</p><p>　　首先，尺寸的選擇。目前一般800X600的分辨率為約定俗成的瀏覽模式。所以為了照顧大多數(shù)訪問者，你頁面的尺寸以800X600的分辨率為準。</p><p>　　其次，造型的選擇。先在白紙上畫

39、出象征瀏覽器窗口的矩形，這個矩形就是你布局的范圍了。選擇一個形狀作為整個頁面的主題造型，我們選擇圓形，因為它代表者柔和，和時尚流行比較相稱，然后在矩形框架里隨意畫出來，你可以試者在增加一些圓形或者其它形狀。這樣畫下來，你會發(fā)現(xiàn)很亂。其實，如果你一開始就想設計出一個完美的布局來是比較困難的，而你要在這看似很亂的圖形中找出隱藏在其中的特別的造型出來。還要注意一點，你不要擔心你設計的布局是否能夠實現(xiàn)。事實上，只要你能想到的布局都能靠現(xiàn)今的HT

40、ML技術實現(xiàn)。</p><p>　　考慮到左邊向左凹的弧線，為了取得平衡我們在頁面右邊增加了一個矩形，(也可以是一條線段) </p><p>　　然后，增加頁頭。一般頁頭都是位于頁面頂部，所以我們增加了一個頁頭，為了和左邊的弧線和右邊的矩形取得平衡，我們增加了一個矩形頁頭并讓頁頭相交與左邊的弧線，</p><p>　　然后，增加文本。頁面的空白部分加別加入文本和圖形

41、。因為在頁面右邊有矩形作為陪襯，所以文本放置在空白部分不會因為左邊的弧線而顯得不協(xié)調，</p><p>　　最后，增加圖片。圖片是美化頁面和說明內容必須的媒體。在這里把圖片加入到適當?shù)牡胤剑?lt;/p><p>　　經(jīng)過以上的幾個步驟，一個時尚頁面的大概布局就出現(xiàn)了。當然，它不是最后的結果，而是你以后制作時的重要參考依據(jù)。</p><p><b>　?。?）軟

42、件布局法</b></p><p>　　除了紙上布局，還可以利用軟件來完成這些工作。如利用Photoshop。Photoshop所具有的對圖像的編輯功能用到設計網(wǎng)頁布局上更顯得心應手。利用Photoshop可以方便的使用顏色，使用圖形，并且可以利用層的功能設計出用紙張無法實現(xiàn)的布局意念。</p><p>　　2.3.2 網(wǎng)頁布局技術</p><p>　　（

43、1）層疊樣式表的應用</p><p>　　在新的HTML4.0標準中，CSS(層疊樣式表)被提出來，它能完全精確的定位文本和圖片。CSS有點復雜，但它的確是一個好的布局方法[7]。曾經(jīng)無法實現(xiàn)的想法利用CSS都能實現(xiàn)。目前在許多站點上，層疊樣式表的運用是一個站點優(yōu)秀的體現(xiàn)。比如一些企業(yè)網(wǎng)站。</p><p><b>　?。?）表格布局</b></p>&

44、lt;p>　　表格布局被廣泛使用，已經(jīng)成為一個潛在的標準。隨便瀏覽一個站點，它們一定是用表格布局的。表格布局的優(yōu)勢在于它能對不同對象加以處理，而又不用擔心不同對象之間的影響。而且表格在定位圖片和文本上比起用CSS更加方便。表格布局唯一的缺點是，當你用了過多表格時，頁面下載速度受到影響[8]。對于</p><p>　　表格布局，打開一個站點的首頁，然后保存為HTML文件，利用網(wǎng)頁編輯工具打開它(要所見即所得的

45、軟件)，會可以看到這個頁面是如何利用表格的。</p><p><b>　?。?）框架布局</b></p><p>　　由于它的兼容性，框架布局并沒有被所有人接受。但從布局上考慮，框架結構不失為一個好的布局方法。它如同表格布局一樣，把不同對象放置到不同頁面加以處理，因為框架可以取消邊框，所以一般來說不影響整體美觀。</p><p><b&g

46、t;　　2.4網(wǎng)頁配色</b></p><p>　　網(wǎng)站充斥著枯燥的設計，惠普、IBM、戴爾、微軟，以及其他數(shù)不盡的網(wǎng)站（相似的布局，相似的配色）。這樣一種標準化的界面可以使瀏覽更方便，但同時帶給用戶一種很世俗的體驗，并不能與訪客產(chǎn)生一種積極的聯(lián)系。</p><p>　　面對這種單調的設計，有一種解決方法，就是使用顏色?？赡軟]有其他設計元素能像顏色一樣能影響人們對世界感受。顏色

47、可以瞬間改變我們的情緒和意見。顏色會讓我們感覺到舒適、敬畏，或者激動[9]。在界面設計中，顏色組合對設計非常有用?？梢詤^(qū)分設計讓用戶更加難忘、引導用戶使用戶專注于交互、吸引用戶使頁面布局更舒適，更有魅力。</p><p>　　一旦有機會可以讓網(wǎng)站更獨特，就不能放棄。如果你的網(wǎng)站做的很醒目，那么用戶可能會花更多時間瀏覽并且想是從哪里訪問過來的，他們有可能記住這個網(wǎng)站并且下次再訪問?？赡軟]有比顏色更好的元素可以達到這

48、樣的效果了。人們會馬上對顏色產(chǎn)生感覺：激動、高興或者枯燥乏味。</p><p>　　當你試圖在一個充滿飽和色調的頁面上瀏覽信息時，你的眼睛會不斷地返回那些亮的顏色。最強的視覺元素是最重要的。我們趨向于忘記那些深藍、黃色和灰色，因為每天都看到。在那些用戶需要長時間在線使用的 Web 應用程序中，注意這一點尤為重要。不是很強烈的配色可以使用戶專注于工作和接收重要信息。當然完美的 Web 體驗不能僅僅依靠顏色，結構、交

49、互、布局等方面也必須協(xié)同工作，來創(chuàng)建可用、易用的網(wǎng)站和應用程序。但是顏色是平衡中的重要部分，不能忽略。</p><p>　　2.5 網(wǎng)頁設計流程</p><p>　　網(wǎng)頁設計是一個互動的過程，不僅是設計師構思設計就可以完成的。從客戶提出需求到最終發(fā)布，期間需要客戶與設計人員共同參與協(xié)商才可以，具體流程如下：</p><p>　　首先，獲取客戶需求和資料。在設計網(wǎng)站頁

50、面之前，設計師需要知道客戶的需求，從而確定客戶建立網(wǎng)站的目的。客戶提出網(wǎng)站需求是非常重要的一個環(huán)節(jié)。沒有詳細的需求，設計人員無法憑空進行設計制作。在這個步驟中，雙方的溝通與交流是非常重要的。</p><p>　　其次，確定網(wǎng)站內容。設計人員選擇適合自己的圖像編輯軟件、動畫制作軟件和網(wǎng)頁制作軟件進行網(wǎng)頁的初步設計，這中間可能還需要和客戶進行多次溝通才能達到客戶滿意的效果。在具體設計時，設計人員應該為網(wǎng)站定位一個主題

51、，從而保證所有網(wǎng)頁都圍繞這個主題進行設計制作，保證風格的和諧統(tǒng)一。</p><p>　　然后，申請域名和空間。使用該方法能夠有效同步管理文件。還可以通過FTP軟件連接到服務器空間上，然后上傳發(fā)布文件。</p><p>　　最后，后期維護。一般靜態(tài)網(wǎng)站上傳后，如果客戶方?jīng)]有專業(yè)人員維護，這樣就需要設計人員從客戶方獲取新資料進行定期或不定期的更新。如果是動態(tài)網(wǎng)站，設計人員需要負責培訓客戶方如何

52、使用后臺管理，這樣客戶就可以自己通過后臺管理添加信息，設計人員只要及時更正動態(tài)網(wǎng)站的錯誤即可。</p><p><b>　　第三章 涉及軟件</b></p><p>　　3.1 DreamWeaVer 8介紹</p><p>　　Dreamweaver 8是Adobe(奧多比)公司收購Macromedia公司后最新推出的Creative Su

53、ite 3 設計套裝中用于網(wǎng)頁設計與制作的組件。作為全球最流行，最優(yōu)秀的所見即所得的網(wǎng)頁編輯器，Dreamweaver可以輕而易舉地制作出跨操作系統(tǒng)平臺，跨瀏覽器的充滿動感的網(wǎng)頁，是目前制作Web頁站點,Web頁和Web應用程序開發(fā)的理想工具。Dreamweaver，F(xiàn)ireworks，F(xiàn)lash被稱為網(wǎng)頁制作的“三劍客”，這三款工具相輔相承，是制作網(wǎng)頁的最佳拍檔</p><p>　　3.2 DreamWeaVe

54、r 8操作界面</p><p>　　DreamWeaVer 8界面設計友好，空間廣闊，操作精微細致,是一種所見即所得的網(wǎng)頁編輯器，既有效的減少了代碼編寫的工作量，也確保所設計文檔的專業(yè)性和兼容性。，如圖3.1所示。</p><p>　　圖3.1 DreamWeaVer 8 操作界面</p><p>　　第四章 建立網(wǎng)頁鏈接</p><p>

55、　　網(wǎng)站實際上是由很多網(wǎng)頁組成的，那么網(wǎng)頁之間是如何聯(lián)系的呢？這就是本章要講的內容----網(wǎng)頁的“鏈接”。“鏈接”，又稱“超鏈接"（Hyperlink）,它作為網(wǎng)頁的橋梁。網(wǎng)頁中的很多對象都可以加入“鏈接”屬性。在Dreamweaver 8中，如果以“鏈接”的媒介來劃分的話，則“鏈接”可以分為“文字鏈接”、“圖像鏈接”、“圖像地圖鏈接”、“內部鏈接和外部鏈接”、“E-mail鏈接”、“命名錨記鏈接”、“文件下載鏈接”和“跳轉菜

56、單”，共8種。</p><p><b>　　4.1 文字鏈接</b></p><p>　　“文字鏈接”即以文字作為媒介的鏈接，它是網(wǎng)頁中最常被使用的鏈接方式，具有“文件小、制作簡單和便于維護”的特點。接下來結合我的個人網(wǎng)站為實例，來講解如何為文字建立“鏈接”。操作步驟：</p><p>　　步驟1 、準備好已經(jīng)制作完成的首頁的各個欄目

57、頁面</p><p>　　步驟2、在Dreamweaver 中打開首頁，之后反白選取作為“鏈接”的文字。</p><p>　　步驟3、觀察“屬性面板”，其中包括一個“鏈接”文本框。</p><p>　　步驟4、接下來需要把鏈接的位址加入到文本框中。</p><p>　　步驟5、在“鏈接”文本框下面還有一個“目標”下拉列表，從中可以選擇鏈接網(wǎng)頁

58、顯示的窗口方式，共有4種。如圖：</p><p>　　步驟6、還可以設置一些“鏈接”的屬性，單擊“屬性面板”中的“頁面屬性”，選擇其中的“鏈接”分類，可以進行的設置有“鏈接字體”、“大小”、“鏈接顏色”、“變換圖像鏈接”顏色、“已訪問鏈接”顏色、“活動鏈接”顏色及“下劃線樣式”。</p><p>　　步驟7、至此，第1個欄目的鏈接就制作完畢了，按下Ctrl+S保存網(wǎng)頁，再按下F12預覽，測

59、試一下，當鼠標放在“放松心情”這4個文字上時將變成手</p><p>　　形，并且瀏覽器窗口下面的狀態(tài)區(qū)中會顯示鏈接到的網(wǎng)頁的位址，單擊文字，頁面會立即跳轉到第1個欄目中，這表示鏈接已經(jīng)制作成功了。</p><p>　　步驟8、同理，按照以上步驟，再為“閑情逸致”和“個人主頁”等其它欄制作指向對應欄目的鏈接。</p><p>　　至此，整個“文字鏈接”的實例就全就全

60、部完成了。</p><p><b>　　4.2 圖像鏈接</b></p><p>　　“圖像”也是常被使用的鏈接媒體，它和“文字鏈接”非常相似。為圖像加入鏈接，首先應該在網(wǎng)頁中插入“圖像”，有關插入“圖像”或“導航條”按鈕的內容，接下來以我的網(wǎng)站“my web“為例，講解如何建立“圖像鏈接”。操作步驟：</p><p>　　步驟1、首先仍然要準

61、備好已經(jīng)制作完成的首頁和各個欄目的頁面</p><p>　　步驟2、在Dreamweaver中打開網(wǎng)站的首頁，之后選取要制作“鏈接”的圖像。</p><p>　　步驟3、觀察“屬性面板”，在“鏈接”文本框中輸入鏈接的文字位址。</p><p>　　步驟4、如果有需要，可以在“目標”下拉列表中選擇“鏈接”網(wǎng)頁顯示的窗口方式，分別為-blank 、-parent 、-s

62、elf或 top。</p><p>　　步驟5、至此，第1個欄目的圖像鏈接就制作完畢了，按下Ctrl+S保存網(wǎng)頁，再按下F12預覽，測試一下，將鼠標放在“動畫制作”4個文字上時將變成手形，同時瀏覽器窗口下面的狀態(tài)區(qū)中會顯示出鏈接到的網(wǎng)頁的地址，并且會顯示出“替代”文本“動畫制作”，單擊文字，頁面會立即跳轉到第3個欄目中，這表示鏈接已經(jīng)制作成功了。</p><p>　　步驟6、同理，按照以上

63、步驟，再為其它幾幅圖像制作指向對應欄目的鏈接。</p><p>　　步驟7、在欄目頁面中制作“返回首頁”的鏈接，使得單擊后可以跳轉回首頁。</p><p>　　至此，整個“圖像鏈像”的實例就全部完成了。</p><p>　　4.3在HTML語言中建立網(wǎng)頁鏈接</p><p><b>　　一、文字鏈接</b></p&

64、gt;<p>　　在HTML語言中用超鏈接標記指向一個目標。其基本格式為：<a href=”URL”文本內容</a>舉個簡單的“文本鏈接”的實例，該實例相對應的HTML代碼如下</p><p><b>　　所示。</b></p><p>　　<html><head><title>文字鏈接</ti

65、tle></head><body><p>a href-“index2.html”target=”-blank”> 平面設計</a>（新開窗口，-blank)</p><p><a href=”index3.html>相冊</a>（原窗口，默認為空）</p><p><a href=”index4.html&g

66、t;留言</a></p></body></html></p><p>　　解釋 ：«   href:是<a>標記的一種屬性，該屬性中的URL等于鏈接目標文件的地址。«   Target:也是<a>標記的一種屬性，相當于Dreamweaver“屬性面板”中的“目標”，它的值等

67、于-blank,效果是在新窗口中打開。除此之外還包括其它3種：-parent,-self和-top。這和Dreamweaver中“目標”下拉列表中的內容是一模一樣的。«   文本內容：如代碼實例中的“平面設計”。這些文本將放在使用了鏈接屬性href和目標屬性target的 <a>與</a>標記之間，產(chǎn)生了鏈接的效果。</p><p><b>　　二、

68、圖像鏈接</b></p><p>　　舉個簡單的“圖像鏈接”的實例。該實例相對應的ＨＴＭＬ代碼所示。</p><p>　　<html><head><title>圖像鏈接</title></head><body><p><a href=”web/web-001.htm”target=”-bla

69、nk”><img src=”images/btn-001-out.gif”alt“平面設計”=width=”85”height=”18”border=”0”></a>（新開窗口，-blank）</p><p><a href=wallpaper/walpaper-001.htm”><img src=”images/btn-002-out.gif”alt=“原創(chuàng)壁紙”wi

70、dth=”85</p><p>　　height=”18”border=”0”></a>（原窗口，默認為空）</p><p>a href=”3d/3d-001.htm”><img src=”images/btn-003-out.gif”alt“三維作品”=width=”85”height=”18”border=”0”></a></p>

71、;</body></html></p><p>　　解釋：仔細觀察代碼可以發(fā)現(xiàn)，“圖像鏈接”與“文本鏈接”惟一的差別就在于<a>與<a/>之間的內容?！拔谋炬溄印敝?lt;a>與</a>之間的內容是文字內容，而“圖像鏈接”中就肯定是圖片內容了。之前講過，插入圖片使用“<img src=”圖像的ＵＲＬ“<”的標記，這里當然也不會例外。而是

72、還可以使用”<img 的屬性，如alt（替換文本）、width（寬）、height（高）、及border（邊框）等</p><p>　　三、Ｅ－Ｍail鏈接</p><p>　　該實例相對應的“ＨＴＭＬ”代碼如下所述。</p><p>　　<html><head><title>Email連接</title><

73、;/head><body><p><a href=”mailto:jiangnan@sohou.com?subject=網(wǎng)站的意見建議“　>給我寫信</a></p></body><html></p><p>　　解釋：只需使href 等于“mailto：郵件地址？subject=主題＂即可，其中subject為可選</p

74、><p>　　項，“？subject=主題”也可以不加。 本次設計用Macromedia公司開發(fā)的專業(yè)HTML編輯器Dreamweaver,對Wed站點、Web頁和Web應用程序進行設計、編碼和開發(fā)。利用Dreamweaver中的可視化編輯功能，用戶可以快速創(chuàng)建頁面而無須編寫任何代碼。并且。借助Dreamweaver，還可以使用服務器語言（例如：ASP,ASP.NET,ColdFusion標記語言（CFML

75、），JSP，PHP）。本設計的頁面不是很精美，這寫些不足之處還待后期的開發(fā)和改進。</p><p><b>　　第五章 結論</b></p><p>　　整個開發(fā)的過程對我來說是一次將理論應用于實踐的過程，是將以前所學知識充分利用的過程，是一次真正的實踐過程。</p><p>　　總體說來，在這學期的畢業(yè)設計中，學到了一些在課堂內所學不到

76、的知識，收獲很大。</p><p>　　網(wǎng)頁設計與制作畢業(yè)設計是在指導教師的悉心指導下獨立完成的。雖然整個整個內容還有很多不足，但是我的確能夠感到在我制作過程中技能的提高。在今后的學習生活中，我將不斷提高自己網(wǎng)頁設計與制作的能力和水平，從而彌補本次畢業(yè)設計中的不足。</p><p><b>　　致 謝</b></p><p>　　在論文完成之

77、際，我要特別感謝我的指導老師鄧老師的熱情關懷和悉心指導。在我撰寫論文的過程中，鄧老師傾注了大量的心血和汗水，無論是在論文的選題、構思和資料的收集方面，還是在論文的研究方法以及成文定稿方面，我都得到了鄧老師的悉心細致的教誨和無私的幫助，特別是他廣博的學識、深厚的學術素養(yǎng)、嚴謹?shù)闹螌W精神和一絲不茍的工作作風使我終生受益，在此表示真誠地感謝和深深的謝意。</p><p>　　在論文的寫作過程中，也得到了許多同學的寶貴建