基于dreamweaver的網(wǎng)頁(yè)設(shè)計(jì)畢業(yè)論文

1、<p>　　基于Dreamweaver的網(wǎng)頁(yè)設(shè)計(jì)</p><p>　　學(xué) 號(hào): 121404218 </p><p>　　姓 名: *** </p><p>　　專(zhuān) 業(yè): 軟件技術(shù) </p><p>　　年 級(jí): 12級(jí) </p><p>　　企業(yè)指

2、導(dǎo)老師: </p><p><b>　　二〇一五年三月</b></p><p>　　題 目 基于Dreamweaver的網(wǎng)頁(yè)設(shè)計(jì) </p><p><b>　　企業(yè)指導(dǎo)教師</b>

3、;</p><p>　　評(píng) 語(yǔ) </p><p>　　指導(dǎo)教師 (簽章)</p><p>　　年 月 日 </p><p><b>　　摘

4、要</b></p><p>　　人性化設(shè)計(jì)要求圍繞人為中心展開(kāi)設(shè)計(jì)。網(wǎng)頁(yè)作為一種傳遞信息的媒體，又受到時(shí)間、空間和使用環(huán)境的限制。 在網(wǎng)頁(yè)設(shè)計(jì)時(shí)，需要設(shè)計(jì)者充分考慮用戶(hù)的需要，通過(guò)各種設(shè)計(jì)手段，調(diào)動(dòng)各種設(shè)計(jì)元素，在方便用戶(hù)使用的前提下， 體現(xiàn)良好的美感，同時(shí)在這個(gè)過(guò)程中，在網(wǎng)站和用戶(hù)之間建立起情感聯(lián)系。</p><p>　　關(guān)鍵詞： 網(wǎng)頁(yè)設(shè)計(jì)； 人性化； 交互性</p&g

5、t;<p><b>　　目 錄</b></p><p>　　第一章 前言………………………………………………………………… 1</p><p>　　1.1 課題來(lái)源…………………………………………………………………1</p><p>　　1.2 網(wǎng)站開(kāi)發(fā)項(xiàng)目需求分析…………………………………………………1</p>

6、<p>　　第二章 網(wǎng)頁(yè)制作概述…………………………………………………………2</p><p>　　2.1 網(wǎng)頁(yè)的類(lèi)型………………………………………………………………2</p><p>　　2.2 網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)……………………………………………………………3</p><p>　　2.3 網(wǎng)頁(yè)布局…………………………………………………………………5&l

7、t;/p><p>　　2.4 網(wǎng)頁(yè)配色…………………………………………………………………6</p><p>　　2.5 網(wǎng)頁(yè)設(shè)計(jì)流程……………………………………………………………6</p><p>　　第三章 涉及軟件………………………………………………………………7</p><p>　　3.1 DreamWeaVer cs3介紹…………………

8、………………………………7</p><p>　　3.2 DreamWeaVer cs3操作界面……………………………………………7</p><p>　　第四章 建立網(wǎng)頁(yè)鏈接……………………………………………………… 8</p><p>　　4.1 文字鏈接…………………………………………………………………8</p><p>　　4.2 圖像

9、鏈接…………………………………………………………………9</p><p>　　4.3 在HTML語(yǔ)言中建立網(wǎng)頁(yè)鏈接……………………………………………9</p><p>　　結(jié) 論……………………………………………………………………………11</p><p>　　致 謝……………………………………………………………………………12</p><p&g

10、t;　　參考文獻(xiàn)…………………………………………………………………………13</p><p><b>　　第一章 前言</b></p><p><b>　　課題來(lái)源</b></p><p>　　隨著二十一世紀(jì)新興科技的飛速發(fā)展，如今的信息產(chǎn)業(yè)正在經(jīng)受著一個(gè)巨大的挑戰(zhàn)，同時(shí)也面臨著一個(gè)重大的機(jī)遇。就目前的科技發(fā)展水平而言，

11、信息產(chǎn)業(yè)的發(fā)展已經(jīng)不能夠滿足社會(huì)化大生產(chǎn)的要求，因此，各個(gè)國(guó)家集中人力、財(cái)力加大對(duì)信息技術(shù)產(chǎn)業(yè)的投入，以適應(yīng)目前需要?？上驳氖窃谶@幾十年的發(fā)展中我們有了互聯(lián)網(wǎng)?；ヂ?lián)網(wǎng)加大了我們了解世界的眼界，縮緊了人與人之間的距離，這就更容易的使我們走上信息化的道路。 互聯(lián)網(wǎng)拉近了各個(gè)領(lǐng)域之間的距離，如今利用互聯(lián)網(wǎng)來(lái)宣傳已經(jīng)是必不可少的工具，城市發(fā)展也需要互聯(lián)網(wǎng)的宣傳來(lái)帶動(dòng)自身的發(fā)展。 </p><p>　　網(wǎng)站開(kāi)發(fā)項(xiàng)目需求分

12、析 </p><p>　　一個(gè)網(wǎng)站項(xiàng)目的確立是建立在各種各樣的需求上面的，這種需求往往網(wǎng)站建設(shè)在Internet應(yīng)用上的地位顯的格外重要，它已成為政府、企事業(yè)單位信息化建設(shè)中的重要組成部分來(lái)自于客戶(hù)的實(shí)際需求或者是出于自身發(fā)展的需要。在Internet飛速發(fā)展的今天，互聯(lián)網(wǎng)已成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，正以一種前所未有的沖擊力影響著人類(lèi)的活動(dòng)。它在人們政治、經(jīng)濟(jì)、生活等各個(gè)方面發(fā)揮著重要的作用。因

13、此網(wǎng)站建設(shè)在Internet應(yīng)用上的地位顯的格外重要，它已成為政府、企事業(yè)單位信息化建設(shè)中的重要組成部分 。</p><p><b>　　網(wǎng)頁(yè)制作概述</b></p><p><b>　　2.1 網(wǎng)頁(yè)的類(lèi)型</b></p><p>　　網(wǎng)頁(yè)有多種分類(lèi),我們籠統(tǒng)意義上的分類(lèi)是動(dòng)態(tài)和靜態(tài)的頁(yè)面,原則上講靜態(tài)頁(yè)面多通過(guò)網(wǎng)站設(shè)計(jì)軟

14、件來(lái)進(jìn)行重新設(shè)計(jì)和更改,相對(duì)的比較滯后，當(dāng)然現(xiàn)在有網(wǎng)站管理系統(tǒng)，也可以生成靜態(tài)頁(yè)面~我們稱(chēng)這種靜態(tài)頁(yè)面為偽靜態(tài)。動(dòng)態(tài)頁(yè)面通過(guò)網(wǎng)頁(yè)腳本與語(yǔ)言自動(dòng)處理自動(dòng)更新的頁(yè)面。</p><p>　　2.1.1 靜態(tài)頁(yè)面 </p><p>　　靜態(tài)頁(yè)面是網(wǎng)頁(yè)的代碼都在頁(yè)面中，不需要執(zhí)行asp,php,jsp,.net等程序生成客戶(hù)端網(wǎng)頁(yè)代碼的網(wǎng)頁(yè)。靜態(tài)頁(yè)面不能自主管理發(fā)布更新的頁(yè)面,如果想更新網(wǎng)頁(yè)內(nèi)容,要

15、通過(guò)FTP軟件把文件DOWN下來(lái)用網(wǎng)頁(yè)制作軟件修改（通過(guò)fso等技術(shù)例外）。但是靜態(tài)頁(yè)面最大的好處是下載速度快，因?yàn)椴恍枰绦蜻\(yùn)算和數(shù)據(jù)庫(kù)連接。常見(jiàn)的靜態(tài)頁(yè)面以.html、.htm為擴(kuò)展名的。并非網(wǎng)站上沒(méi)有動(dòng)畫(huà)的就是靜態(tài)頁(yè)面。</p><p>　　2.1.2 動(dòng)態(tài)頁(yè)面</p><p>　　動(dòng)態(tài)頁(yè)面是通過(guò)執(zhí)行asp、php、jsp、.net等程序生成客戶(hù)端網(wǎng)頁(yè)代碼的網(wǎng)頁(yè)。動(dòng)態(tài)頁(yè)面通?？梢酝ㄟ^(guò)

16、網(wǎng)站后臺(tái)管理系統(tǒng)對(duì)網(wǎng)站的內(nèi)容進(jìn)行更新管理。發(fā)布新聞，發(fā)布公司產(chǎn)品，交流互動(dòng)，博客，網(wǎng)上調(diào)查等，這都是動(dòng)態(tài)網(wǎng)站的一些功能，也是我們常見(jiàn)的。動(dòng)態(tài)網(wǎng)頁(yè)是需要語(yǔ)言環(huán)境支持的，動(dòng)態(tài)頁(yè)面常見(jiàn)的擴(kuò)展名有：.asp、 .php、 .jsp 、.cgi 等。動(dòng)態(tài)頁(yè)面的“動(dòng)態(tài)”是網(wǎng)站與客戶(hù)端用戶(hù)互動(dòng)的意思，而非網(wǎng)頁(yè)上有動(dòng)畫(huà)的就是動(dòng)態(tài)頁(yè)面。 </p><p>　　動(dòng)態(tài)網(wǎng)頁(yè)是最常用的網(wǎng)站建設(shè)的一種表達(dá)形式，其優(yōu)點(diǎn)在于可以根據(jù)先前所制定

17、好的程序界面，根據(jù)用戶(hù)的不同請(qǐng)求返回相應(yīng)的數(shù)據(jù)。可以說(shuō)是一對(duì)多的關(guān)系。從而達(dá)到資源的最大利用和節(jié)省服務(wù)器上的物理資源。如果今后需要改變站點(diǎn)風(fēng)格，只需要重新制作前臺(tái)所訪問(wèn)的數(shù)據(jù)即可。只要數(shù)據(jù)庫(kù)結(jié)構(gòu)不變，可以很快的進(jìn)行改版的。 </p><p>　　2.2 網(wǎng)頁(yè)開(kāi)發(fā)技術(shù) </p><p>　　動(dòng)態(tài)網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)介紹——HTML、ASP、JSP、CGI、PHP。 HTML（HyperTextM

18、ark-upLanguage）即超文本標(biāo)記語(yǔ)言，是WWW的描述語(yǔ)言。嚴(yán)格的來(lái)講，HTML不能算做一門(mén)編程語(yǔ)言，因?yàn)樗鼪](méi)有自己的數(shù)據(jù)類(lèi)型，也沒(méi)有分支、循環(huán)等控制結(jié)構(gòu)。它的設(shè)計(jì)簡(jiǎn)單，結(jié)構(gòu)靈活，允許在Web瀏覽器及其它兼容的應(yīng)用程序中顯示文本和圖像，并且文檔的某些部分可以成為超鏈接。完成后把這些文檔保存為*.html文件，然后用瀏覽器打開(kāi)。 </p><p>　　HTML是網(wǎng)絡(luò)的通用語(yǔ)言,一種簡(jiǎn)單、通用的全置

19、標(biāo)記語(yǔ)言。它允許網(wǎng)頁(yè)制作人建立文本與圖片相結(jié)合的復(fù)雜頁(yè)面，這些頁(yè)面可以被網(wǎng)上任何其他人瀏覽到，無(wú)論使用的是什么類(lèi)型的電腦或?yàn)g覽器。 </p><p>　　在早期，動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)主要采用CGI技術(shù)，即Common Gateway Interface(公用網(wǎng)關(guān)接口)。在早期，你可以使用不同的程序編寫(xiě)合適的CGI程序，如Visual Basic,Delphi或C/C++等。雖然CGI技術(shù)成熟而且功能強(qiáng)大，但由于編程困難

20、，效率低下，修改復(fù)雜等缺陷，所以有逐漸被新技術(shù)取代的趨勢(shì)。 ASP全名Active Server Pages，是一個(gè)WEB服務(wù)器端的開(kāi)發(fā)環(huán)境，利用它可以產(chǎn)生和運(yùn)行動(dòng)態(tài)的、交互的、高性能的WEB服務(wù)應(yīng)用程序。ASP采用腳本語(yǔ)言VB Script（Java script）作為自己的開(kāi)發(fā)語(yǔ)言。 ASP更精確的說(shuō)是一個(gè)中間件，這個(gè)中間件將Web上的請(qǐng)求轉(zhuǎn)入到一個(gè)解釋器中，在這個(gè)解釋器中將所有的ASP的Script進(jìn)行分析，再進(jìn)行執(zhí)行，而這時(shí)可

21、以在這個(gè)中間件中去創(chuàng)建一個(gè)*.html文件（靜態(tài)網(wǎng)頁(yè)）。</p><p>　　PHP是一種跨平臺(tái)的服務(wù)器端的嵌入式腳本語(yǔ)言. 它大量地借用C,Java和Perl語(yǔ)言的語(yǔ)法, 并耦合PHP自己的特性,使WEB開(kāi)發(fā)者能夠快速地寫(xiě)出動(dòng)態(tài)生成頁(yè)面.它支持目前絕大多數(shù)數(shù)據(jù)庫(kù)。還有一點(diǎn)，PHP是完全免費(fèi)的。 </p><p>　　JSP 是Sun公司推出的新一代站點(diǎn)開(kāi)發(fā)語(yǔ)言，他完全解決了目前ASP,

22、PHP的一個(gè)通?。_本級(jí)執(zhí)行（據(jù)說(shuō)PHP4 也已經(jīng)在Zend 的支持下，實(shí)現(xiàn)編譯運(yùn)行）。Sun 公司借助自己在Java 上的不凡造詣，將Java 從Java 應(yīng)用程序 和 Java Applet 之外，又有新的碩果，就是Jsp－－Java Server Page。Jsp 可以在Serverlet和JavaBean的支持下，完成功能強(qiáng)大的站點(diǎn)程序。</p><p><b>　　2.3 網(wǎng)頁(yè)布局 <

23、/b></p><p>　　網(wǎng)站主頁(yè)就好象是宣傳欄或者店面——對(duì)訪問(wèn)者產(chǎn)生第一印象，都希望盡量給人留下好的印象。 </p><p>　　一般來(lái)說(shuō)，好的網(wǎng)站應(yīng)該給人有這樣的感覺(jué)： </p><p><b>　　干凈整潔； </b></p><p><b>　　條理清楚； </b&g

24、t;</p><p><b>　　專(zhuān)業(yè)水準(zhǔn)； </b></p><p>　　引人入勝。 </p><p>　　網(wǎng)頁(yè)應(yīng)該力求抓住而不是淹沒(méi)瀏覽者的注意力，過(guò)多的閃爍、色彩、下拉菜單框、圖片等會(huì)讓訪問(wèn)者無(wú)所適從——離開(kāi)是最好的選擇，就象一些商店，播放震耳欲聾的發(fā)燒音樂(lè)，你要做的唯一決定就是離開(kāi)那里，越快越好。</p>&

25、lt;p>　　2.3.1 網(wǎng)頁(yè)布局的基本概念 </p><p>　　最開(kāi)始，網(wǎng)頁(yè)呈現(xiàn)在你面前的時(shí)侯，它就好像一張白紙，它需要你任意揮灑你的設(shè)計(jì)才思，可以創(chuàng)造出自己的設(shè)計(jì)方案。，雖然你能控制一切你所能控制的東西，但假如你知道什么是一種約定俗成的標(biāo)準(zhǔn)或者說(shuō)大多數(shù)訪問(wèn)者的瀏覽習(xí)慣，那么你可以在此基礎(chǔ)上加上自己的東西，這樣你創(chuàng)造出來(lái)的網(wǎng)頁(yè)才能更好的被別人接受。 </p><p>　?。?

26、） 頁(yè)面尺寸 由于頁(yè)面尺寸和顯示器大小及分辨率有關(guān)系，網(wǎng)頁(yè)的局限性就在于你無(wú)法突破顯示器的范圍，而且因?yàn)闉g覽器也將占去不少空間，留下給你的頁(yè)面范圍變得越來(lái)越小。一般分辨率在800x600的情況下，頁(yè)面的顯示尺寸為：780x428個(gè)象素；分辨率在640x480的情況下，頁(yè)面的顯示尺寸為:620X311個(gè)象素；分辨率在1024X768的情況下，頁(yè)面的顯示尺寸為：1007x600。從以上數(shù)據(jù)可以看出，分辨率越高頁(yè)面尺寸越大。 </p

27、><p>　　瀏覽器的工具欄也是影響頁(yè)面尺寸的原因。一般目前的瀏覽器的工具欄都可以取消或者增加，那么當(dāng)你顯示全部的工具欄時(shí)，和關(guān)閉全部工具欄時(shí)，頁(yè)面的尺寸是不一樣的。 在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中，向下拖動(dòng)頁(yè)面是惟一給網(wǎng)頁(yè)增加更多內(nèi)容(尺寸)的方法。除非你能肯定站點(diǎn)的內(nèi)容能吸引大家拖動(dòng)，否則不要讓訪問(wèn)者拖動(dòng)頁(yè)面超過(guò)三屏。如果需要在同一頁(yè)面顯示超過(guò)三屏的內(nèi)容，那么你最好能在上面做上頁(yè)面內(nèi)部連接，方便訪問(wèn)者瀏覽。 </p&

28、gt;<p>　?。?）整體造型 造型就是創(chuàng)造出來(lái)的物體形象，這里是指頁(yè)面的整體形象。這種形象應(yīng)該是一個(gè)整體，圖形與文本的接合應(yīng)該是層疊有序。雖然，顯示器和瀏覽器都是矩形，但對(duì)于頁(yè)面的造型，你可以充分運(yùn)用自然界中的其它形狀以及它們的組合：矩形，圓形，三角形，菱形等。 對(duì)于不同的形狀，它們所代表的意義是不同的。比如矩形代表著正式，規(guī)則。</p><p>　　首先，尺寸的選擇。目前一般800X600

29、的分辨率為約定俗成的瀏覽模式。所以為了照顧大多數(shù)訪問(wèn)者，你頁(yè)面的尺寸以800X600的分辨率為準(zhǔn)。 其次，造型的選擇。先在白紙上畫(huà)出象征瀏覽器窗口的矩形，這個(gè)矩形就是你布局的范圍了。選擇一個(gè)形狀作為整個(gè)頁(yè)面的主題造型，我們選擇圓形，因?yàn)樗碚呷岷?，和時(shí)尚流行比較相稱(chēng)，然后在矩形框架里隨意畫(huà)出來(lái)，你可以試者在增加一些圓形或者其它形狀。這樣畫(huà)下來(lái)，你會(huì)發(fā)現(xiàn)很亂。其實(shí)，如果你一開(kāi)始就想設(shè)計(jì)出一個(gè)完美的布局來(lái)是比較困難的，而你要在這看似很亂

30、的圖形中找出隱藏在其中的特別的造型出來(lái)。還要注意一點(diǎn)，你不要擔(dān)心你設(shè)計(jì)的布局是否能夠?qū)崿F(xiàn)。事實(shí)上，只要你能想到的布局都能靠現(xiàn)今的HTML技術(shù)實(shí)現(xiàn)。 考慮到左邊向左凹的弧線，為了取得平衡我們?cè)陧?yè)面右邊增加了一個(gè)矩形，(也可以是一條線段)然后，增加頁(yè)頭。一般頁(yè)頭都是位于頁(yè)面頂部，所以我們?cè)黾恿艘粋€(gè)頁(yè)頭，為了和左邊的弧線和右邊的矩形取得平衡，我們?cè)黾恿艘粋€(gè)矩形頁(yè)頭并讓頁(yè)頭相交與左邊的弧線， 然后，增加文本。頁(yè)面的空白部分加別加入文本和圖形

31、。因?yàn)樵陧?yè)面右邊有矩形作為陪襯，所以文本放置在空白部分不會(huì)因?yàn)樽筮叺幕【€而顯得不</p><p>　　2.3.2 網(wǎng)頁(yè)布局技術(shù)</p><p>　　層疊樣式表的應(yīng)用 在新的HTML4.0標(biāo)準(zhǔn)中，CSS(層疊樣式表)被提出來(lái)，它能完全精確的定位文本和圖片。CSS有點(diǎn)復(fù)雜，但它的確是一個(gè)好的布局方法 。曾經(jīng)無(wú)法實(shí)現(xiàn)的想法利用CSS都能實(shí)現(xiàn)。目前在許多站點(diǎn)上，層疊樣式表的運(yùn)用是一個(gè)站點(diǎn)優(yōu)秀的體

32、現(xiàn)。比如一些企業(yè)網(wǎng)站。 </p><p>　　表格布局 表格布局被廣泛使用，已經(jīng)成為一個(gè)潛在的標(biāo)準(zhǔn)。隨便瀏覽一個(gè)站點(diǎn)，它們一定是用表格布局的。表格布局的優(yōu)勢(shì)在于它能對(duì)不同對(duì)象加以處理，而又不用擔(dān)心不同對(duì)象之間的影響。而且表格在定位圖片和文本上比起用CSS更加方便。表格布局唯一的缺點(diǎn)是，當(dāng)你用了過(guò)多表格時(shí)，頁(yè)面下載速度受到影響。對(duì)于表格布局，打開(kāi)一個(gè)站點(diǎn)的首頁(yè)，然后保存為HTML文件，利用網(wǎng)頁(yè)編輯工具打開(kāi)它(要所

33、見(jiàn)即所得的軟件)，會(huì)可以看到這個(gè)頁(yè)面是如何利用表格的。 </p><p>　　（3）框架布局 由于它的兼容性，框架布局并沒(méi)有被所有人接受。但從布局上考慮，框架結(jié)構(gòu)不失為一個(gè)好的布局方法。它如同表格布局一樣，把不同對(duì)象放置到不同頁(yè)面加以處理，因?yàn)榭蚣芸梢匀∠吙?，所以一般?lái)說(shuō)不影響整體美觀。 </p><p><b>　　2.4 網(wǎng)頁(yè)配色</b></p>

34、;<p>　　網(wǎng)站充斥著枯燥的設(shè)計(jì)，惠普、IBM、戴爾、微軟，以及其他數(shù)不盡的網(wǎng)站（相似的布局，相似的配色）。這樣一種標(biāo)準(zhǔn)化的界面可以使瀏覽更方便，但同時(shí)帶給用戶(hù)一種很世俗的體驗(yàn)，并不能與訪客產(chǎn)生一種積極的聯(lián)系。 面對(duì)這種單調(diào)的設(shè)計(jì)，有一種解決方法，就是使用顏色?？赡軟](méi)有其他設(shè)計(jì)元素能像顏色一樣能影響人們對(duì)世界感受。顏色可以瞬間改變我們的情緒和意見(jiàn)。顏色會(huì)讓我們感覺(jué)到舒適、敬畏，或者激動(dòng)。</p><

35、p>　　在界面設(shè)計(jì)中，顏色組合對(duì)設(shè)計(jì)非常有用?？梢詤^(qū)分設(shè)計(jì)讓用戶(hù)更加難忘、引導(dǎo)用戶(hù)使用戶(hù)專(zhuān)注于交互、吸引用戶(hù)使頁(yè)面布局更舒適，更有魅力。 一旦有機(jī)會(huì)可以讓網(wǎng)站更獨(dú)特，就不能放棄。如果你的網(wǎng)站做的很醒目，那么用戶(hù)可能會(huì)花更多時(shí)間瀏覽并且想是從哪里訪問(wèn)過(guò)來(lái)的，他們有可能記住這個(gè)網(wǎng)站并且下次再訪問(wèn)?？赡軟](méi)有比顏色更好的元素可以達(dá)到這樣的效果了。人們會(huì)馬上對(duì)顏色產(chǎn)生感覺(jué)：激動(dòng)、高興或者枯燥乏味。 當(dāng)你試圖在一個(gè)充滿飽和色調(diào)的頁(yè)面上瀏覽

36、信息時(shí)，你的眼睛會(huì)不斷地返回那些亮的顏色。最強(qiáng)的視覺(jué)元素是最重要的。我們趨向于忘記那些深藍(lán)、黃色和灰色，因?yàn)槊刻於伎吹?。在那些用?hù)需要長(zhǎng)時(shí)間在線使用的 Web 應(yīng)用程序中，注意這一點(diǎn)尤為重要。不是很強(qiáng)烈的配色可以使用戶(hù)專(zhuān)注于工作和接收重要信息。當(dāng)然完美的 Web 體驗(yàn)不能僅僅依靠顏色，結(jié)構(gòu)、交互、布局等方面也必須協(xié)同工作，來(lái)創(chuàng)建可用、易用的網(wǎng)站和應(yīng)用程序。但是顏色是平衡中的重要部分，不能忽略。 </p><p>

37、;　　2.5 網(wǎng)頁(yè)設(shè)計(jì)流程</p><p>　　網(wǎng)頁(yè)設(shè)計(jì)是一個(gè)互動(dòng)的過(guò)程，不僅是設(shè)計(jì)師構(gòu)思設(shè)計(jì)就可以完成的。從客戶(hù)提出需求到最終發(fā)布，期間需要客戶(hù)與設(shè)計(jì)人員共同參與協(xié)商才可以，具體流程如下： 首先，獲取客戶(hù)需求和資料。在設(shè)計(jì)網(wǎng)站頁(yè)面之前，設(shè)計(jì)師需要知道客戶(hù)的需求，從而確定客戶(hù)建立網(wǎng)站的目的。客戶(hù)提出網(wǎng)站需求是非常重要的一個(gè)環(huán)節(jié)。沒(méi)有詳細(xì)的需求，設(shè)計(jì)人員無(wú)法憑空進(jìn)行設(shè)計(jì)制作。在這個(gè)步驟中，雙方的溝通與交流是非

38、常重要的。 其次，確定網(wǎng)站內(nèi)容。設(shè)計(jì)人員選擇適合自己的圖像編輯軟件、動(dòng)畫(huà)制作軟件和網(wǎng)頁(yè)制作軟件進(jìn)行網(wǎng)頁(yè)的初步設(shè)計(jì)，這中間可能還需要和客戶(hù)進(jìn)行多次溝通才能達(dá)到客戶(hù)滿意的效果。在具體設(shè)計(jì)時(shí)，設(shè)計(jì)人員應(yīng)該為網(wǎng)站定位一個(gè)主題，從而保證所有網(wǎng)頁(yè)都圍繞這個(gè)主題進(jìn)行設(shè)計(jì)制作，保證風(fēng)格的和諧統(tǒng)一。 </p><p>　　然后，申請(qǐng)域名和空間。使用該方法能夠有效同步管理文件。還可以通過(guò)FTP軟件連接到服務(wù)器空間上，然后上傳發(fā)布

39、文件。 最后，后期維護(hù)。一般靜態(tài)網(wǎng)站上傳后，如果客戶(hù)方?jīng)]有專(zhuān)業(yè)人員維護(hù)，這樣就需要設(shè)計(jì)人員從客戶(hù)方獲取新資料進(jìn)行定期或不定期的更新。如果是動(dòng)態(tài)網(wǎng)站，設(shè)計(jì)人員需要負(fù)責(zé)培訓(xùn)客戶(hù)方如何使用后臺(tái)管理，這樣客戶(hù)就可以自己通過(guò)后臺(tái)管理添加信息，設(shè)計(jì)人員只要及時(shí)更正動(dòng)態(tài)網(wǎng)站的錯(cuò)誤即可。</p><p><b>　　涉及軟件</b></p><p>　　3.1 DreamWeaVe

40、r 8介紹 </p><p>　　Dreamweaver 8是Adobe(奧多比)公司收購(gòu)Macromedia公司后最新推出的Creative Suite 3 設(shè)計(jì)套裝中用于網(wǎng)頁(yè)設(shè)計(jì)與制作的組件。作為全球最流行，最優(yōu)秀的所見(jiàn)即所得的網(wǎng)頁(yè)編輯器，Dreamweaver可以輕而易舉地制作出跨操作系統(tǒng)平臺(tái)，跨瀏覽器的充滿動(dòng)感的網(wǎng)頁(yè)，是目前制作Web頁(yè)站點(diǎn),Web頁(yè)和Web應(yīng)用程序開(kāi)發(fā)的理想工具。Dreamweaver，

41、Fireworks，F(xiàn)lash被稱(chēng)為網(wǎng)頁(yè)制作的“三劍客”，這三款工具相輔相承，是制作網(wǎng)頁(yè)的最佳拍檔 </p><p>　　3.2 DreamWeaVer 8操作界面 </p><p>　　DreamWeaVer 8界面設(shè)計(jì)友好，空間廣闊，操作精微細(xì)致,是一種所見(jiàn)即所得的網(wǎng)頁(yè)編輯器，既有效的減少了代碼編寫(xiě)的工作量，也確保所設(shè)計(jì)文檔的專(zhuān)業(yè)性和兼容性。，如圖3.1所示。</p>

42、<p>　　圖3.1 DreamWeaVer 8 操作界面 </p><p><b>　　建立網(wǎng)頁(yè)鏈接</b></p><p>　　網(wǎng)站實(shí)際上是由很多網(wǎng)頁(yè)組成的，那么網(wǎng)頁(yè)之間是如何聯(lián)系的呢？這就是本章要講的內(nèi)容----網(wǎng)頁(yè)的“鏈接”?！版溄印?，又稱(chēng)“超鏈接"（Hyperlink）,它作為網(wǎng)頁(yè)的橋梁。網(wǎng)頁(yè)中的很多對(duì)象都可以加入“鏈接”屬

43、性。在Dreamweaver 8中，如果以“鏈接”的媒介來(lái)劃分的話，則“鏈接”可以分為“文字鏈接”、“圖像鏈接”、“圖像地圖鏈接”、“內(nèi)部鏈接和外部鏈接”、“E-mail鏈接”、“命名錨記鏈接”、“文件下載鏈接”和“跳轉(zhuǎn)菜單”，共8種。</p><p><b>　　4.1 文字鏈接 </b></p><p>　　“文字鏈接”即以文字作為媒介的鏈接，它是網(wǎng)頁(yè)中最常被使用

44、的鏈接方式，具有“文件小、制作簡(jiǎn)單和便于維護(hù)”的特點(diǎn)。接下來(lái)結(jié)合我的個(gè)人網(wǎng)站為實(shí)例，來(lái)講解如何為文字建立“鏈接”。操作步驟： </p><p>　　步驟1 、準(zhǔn)備好已經(jīng)制作完成的首頁(yè)的各個(gè)欄目頁(yè)面 </p><p>　　步驟2、在Dreamweaver 中打開(kāi)首頁(yè)，之后反白選取作為“鏈接”的文字。 </p><p>　　步驟3、觀察“屬性面板”，其中包括一個(gè)“鏈

45、接”文本框。 </p><p>　　步驟4、接下來(lái)需要把鏈接的位址加入到文本框中。 </p><p>　　步驟5、在“鏈接”文本框下面還有一個(gè)“目標(biāo)”下拉列表，從中可以選擇鏈接網(wǎng)頁(yè)顯示的窗口方式，共有4種。如圖：</p><p>　　步驟6、還可以設(shè)置一些“鏈接”的屬性，單擊“屬性面板”中的“頁(yè)面屬性”，選擇其中的“鏈接”分類(lèi)，可以進(jìn)行的設(shè)置有“鏈接字體”、“大小

46、”、“鏈接顏色”、“變換圖像鏈接”顏色、“已訪問(wèn)鏈接”顏色、“活動(dòng)鏈接”顏色及“下劃線樣式”。 </p><p>　　步驟7、至此，第1個(gè)欄目的鏈接就制作完畢了，按下Ctrl+S保存網(wǎng)頁(yè)，再按下F12預(yù)覽，測(cè)試一下，當(dāng)鼠標(biāo)放在“放松心情”這4個(gè)文字上時(shí)將變成手 形，并且瀏覽器窗口下面的狀態(tài)區(qū)中會(huì)顯示鏈接到的網(wǎng)頁(yè)的位址，單擊文字，頁(yè)面會(huì)立即跳轉(zhuǎn)到第1個(gè)欄目中，這表示鏈接已經(jīng)制作成功了。 步驟8、同理，按

47、照以上步驟，再為“閑情逸致”和“個(gè)人主頁(yè)”等其它欄制作指向?qū)?yīng)欄目的鏈接。 </p><p>　　至此，整個(gè)“文字鏈接”的實(shí)例就全就全部完成了。</p><p><b>　　4.2 圖像鏈接 </b></p><p>　　“圖像”也是常被使用的鏈接媒體，它和“文字鏈接”非常相似。為圖像加入鏈接，首先應(yīng)該在網(wǎng)頁(yè)中插入“圖像”，有關(guān)插入“圖像”或

48、“導(dǎo)航條”按鈕的內(nèi)容，接下來(lái)以我的網(wǎng)站“my web“為例，講解如何建立“圖像鏈接”。操作步驟： </p><p>　　步驟1、首先仍然要準(zhǔn)備好已經(jīng)制作完成的首頁(yè)和各個(gè)欄目的頁(yè)面 </p><p>　　步驟2、在Dreamweaver中打開(kāi)網(wǎng)站的首頁(yè)，之后選取要制作“鏈接”的圖像。</p><p>　　步驟3、觀察“屬性面板”，在“鏈接”文本框中輸入鏈接的文字位址

49、。 </p><p>　　步驟4、如果有需要，可以在“目標(biāo)”下拉列表中選擇“鏈接”網(wǎng)頁(yè)顯示的窗口方式，分別為-blank 、-parent 、-self或 top。 </p><p>　　步驟5、至此，第1個(gè)欄目的圖像鏈接就制作完畢了，按下Ctrl+S保存網(wǎng)頁(yè)，再按下F12預(yù)覽，測(cè)試一下，將鼠標(biāo)放在“動(dòng)畫(huà)制作”4個(gè)文字上時(shí)將變成手形，同時(shí)瀏覽器窗口下面的狀態(tài)區(qū)中會(huì)顯示出鏈接到的網(wǎng)頁(yè)的地址

50、，并且會(huì)顯示出“替代”文本“動(dòng)畫(huà)制作”，單擊文字，頁(yè)面會(huì)立即跳轉(zhuǎn)到第3個(gè)欄目中，這表示鏈接已經(jīng)制作成功了。 </p><p>　　步驟6、同理，按照以上步驟，再為其它幾幅圖像制作指向?qū)?yīng)欄目的鏈接。 </p><p>　　步驟7、在欄目頁(yè)面中制作“返回首頁(yè)”的鏈接，使得單擊后可以跳轉(zhuǎn)回首頁(yè)。 至此，整個(gè)“圖像鏈像”的實(shí)例就全部完成了。</p><p>　　4.3

51、 在HTML語(yǔ)言中建立網(wǎng)頁(yè)鏈接 </p><p>　　一、文字鏈接 在HTML語(yǔ)言中用超鏈接標(biāo)記指向一個(gè)目標(biāo)。其基本格式為：<a href=”URL”文本內(nèi)容</a>舉個(gè)簡(jiǎn)單的“文本鏈接”的實(shí)例，該實(shí)例相對(duì)應(yīng)的HTML代碼如下 所示。 <html><head><title>文字鏈接</title></head><body&g

52、t;<p>a href-“index2.html”target=”-blank”> 平面設(shè)計(jì)</a>（新開(kāi)窗口，-blank)</p><p><a href=”index3.html>相冊(cè)</a>（原窗口，默認(rèn)為空）</p><p><a href=”index4.html>留言</a></p></b

53、ody></html> 解釋 ：« href:是<a>標(biāo)記的一種屬性，該屬性中的URL等于鏈接目標(biāo)文件的地址。« Target:也是<a>標(biāo)記的一種屬性，相當(dāng)于Dreamweaver“屬性面板”中的“目標(biāo)”，它的值等于-blank,效果是在新窗口中打開(kāi)。除此之外還包括其它3種：-parent,-self和-top。這和Dreamweaver中“目標(biāo)”下拉列表中的內(nèi)容

54、是一模一樣的。« 文本內(nèi)容：如代碼實(shí)例中的“平面設(shè)</p><p>　　二、圖像鏈接 舉個(gè)簡(jiǎn)單的“圖像鏈接”的實(shí)例。該實(shí)例相對(duì)應(yīng)的ＨＴＭＬ代碼所示。 <html><head><title>圖像鏈接</title></head><body><p><a href=”web/web-001.htm”target=”

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

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

57、;/html> 解釋?zhuān)鹤屑?xì)觀察代碼可以發(fā)現(xiàn)，“圖像鏈</p><p>　　三、Ｅ－Ｍail鏈接 該實(shí)例相對(duì)應(yīng)的“ＨＴＭＬ”代碼如下所述。 <html><head><title>Email連接</title></head><body><p><a href=”mailto:jiangnan@sohou.com?sub

58、ject=網(wǎng)站的意見(jiàn)建議“ >給我寫(xiě)信</a></p></body><html> 解釋?zhuān)褐恍枋筯ref 等于“mailto：郵件地址？subject=主題＂即可，其中subject為可選 項(xiàng)，“？subject=主題”也可以不加。 本次設(shè)計(jì)用Macromedia公司開(kāi)發(fā)的專(zhuān)業(yè)HTML編輯器Dreamweaver,對(duì)Wed站點(diǎn)、Web頁(yè)和Web應(yīng)用程序進(jìn)行設(shè)計(jì)、編碼和開(kāi)發(fā)。利用Dr

59、eamweaver中的可視化編輯功能，用戶(hù)可以快速創(chuàng)建頁(yè)面而無(wú)須編寫(xiě)任何代碼。并且。借助Dreamweaver，還可以使用服務(wù)器語(yǔ)言（例如：ASP,ASP.NET,ColdFusion標(biāo)記語(yǔ)言（CFML），JSP，PHP）。本設(shè)計(jì)的頁(yè)面不是很精美，這寫(xiě)些不足之處還待后期的開(kāi)發(fā)和改進(jìn)。</p><p><b>　　結(jié) 論</b></p><p>　　整個(gè)開(kāi)發(fā)的過(guò)程對(duì)我來(lái)

60、說(shuō)是一次將理論應(yīng)用于實(shí)踐的過(guò)程，是將以前所學(xué)知識(shí)充分利用的過(guò)程，是一次真正的實(shí)踐過(guò)程。 </p><p>　　總體說(shuō)來(lái)，在這學(xué)期的畢業(yè)設(shè)計(jì)中，學(xué)到了一些在課堂內(nèi)所學(xué)不到的知識(shí)，收獲很大。 </p><p>　　網(wǎng)頁(yè)設(shè)計(jì)與制作畢業(yè)設(shè)計(jì)是在指導(dǎo)教師的悉心指導(dǎo)下獨(dú)立完成的。雖然整個(gè)整個(gè)內(nèi)容還有很多不足，但是我的確能夠感到在我制作過(guò)程中技能的提高。在今后的學(xué)習(xí)生活中，我將不斷提高自己網(wǎng)頁(yè)設(shè)計(jì)與

61、制作的能力和水平，從而彌補(bǔ)本次畢業(yè)設(shè)計(jì)中的不足。</p><p><b>　　致 謝</b></p><p>　　在論文完成之際，我要特別感謝我的指導(dǎo)老師的熱情關(guān)懷和悉心指導(dǎo)。在我撰寫(xiě)論文的過(guò)程中，老師傾注了大量的心血和汗水，無(wú)論是在論文的選題、構(gòu)思和資料的收集方面，還是在論文的研究方法以及成文定稿方面，我都得到了老師的悉心細(xì)致的教誨和無(wú)私的幫助，特別是他廣博的

62、學(xué)識(shí)、深厚的學(xué)術(shù)素養(yǎng)、嚴(yán)謹(jǐn)?shù)闹螌W(xué)精神和一絲不茍的工作作風(fēng)使我終生受益，在此表示真誠(chéng)地感謝和深深的謝意。 </p><p>　　在論文的寫(xiě)作過(guò)程中，也得到了許多同學(xué)的寶貴建議，同時(shí)還到許多在工作過(guò)程中許多同事的支持和幫助，在此一并致以誠(chéng)摯的謝意。感謝所有關(guān)心、支持、幫助過(guò)我的良師益友。感謝參考文獻(xiàn)中的各位作者。 </p><p><b>　　參考文獻(xiàn)</b><