純靜態(tài)網(wǎng)頁設(shè)計(jì)畢業(yè)論文

職業(yè)學(xué)院畢業(yè)設(shè)計(jì)PAGE1目錄第一章前言 11．1課題來源 11．2 網(wǎng)站開發(fā)項(xiàng)目需求分析 1第二章網(wǎng)頁制作概述 22.1網(wǎng)頁的類型 22.1.1靜態(tài)頁面 22.1.2動(dòng)態(tài)頁面 22.2網(wǎng)頁開發(fā)技術(shù) 32.3網(wǎng)頁布局 32.3.1網(wǎng)頁布局的基本概念 42.3.2網(wǎng)頁布局方法 52.3.2網(wǎng)頁布局技術(shù) 72.4網(wǎng)頁配色 82.5網(wǎng)頁設(shè)計(jì)流程 8第三章涉及軟件 93.1DreamWeaVercs3介紹 93.2DreamWeaVercs3操作界面 9第四章建立網(wǎng)頁鏈接 104.1文字鏈接 104.2圖像鏈接 114.3在HTML語言中建立網(wǎng)頁鏈接 12第五章結(jié)論 14致謝 15參考文獻(xiàn) 16第一章前言1．1課題來源隨著二十一世紀(jì)新興科技的飛速發(fā)展，如今的信息產(chǎn)業(yè)正在經(jīng)受著一個(gè)巨大的挑戰(zhàn)，同時(shí)也面臨著一個(gè)重大的機(jī)遇。就目前的科技發(fā)展水平而言，信息產(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)來宣傳已經(jīng)是必不可少的工具，城市發(fā)展也需要互聯(lián)網(wǎng)的宣傳來帶動(dòng)自身的發(fā)展。1.2網(wǎng)站開發(fā)項(xiàng)目需求分析一個(gè)網(wǎng)站項(xiàng)目的確立是建立在各種各樣的需求上面的，這種需求往往網(wǎng)站建設(shè)在Internet應(yīng)用上的地位顯的格外重要，它已成為政府、企事業(yè)單位信息化建設(shè)中的重要組成部分來自于客戶的實(shí)際需求或者是出于自身發(fā)展的需要。在Internet飛速發(fā)展的今天，互聯(lián)網(wǎng)已成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，正以一種前所未有的沖擊力影響著人類的活動(dòng)。它在人們政治、經(jīng)濟(jì)、生活等各個(gè)方面發(fā)揮著重要的作用。因此網(wǎng)站建設(shè)在Internet應(yīng)用上的地位顯的格外重要，它已成為政府、企事業(yè)單位信息化建設(shè)中的重要組成部分。淄博職業(yè)學(xué)院畢業(yè)設(shè)計(jì)PAGE13第二章網(wǎng)頁制作概述2.1網(wǎng)頁的類型網(wǎng)頁有多種分類,我們籠統(tǒng)意義上的分類是動(dòng)態(tài)和靜態(tài)的頁面,原則上講靜態(tài)頁面多通過網(wǎng)站設(shè)計(jì)軟件來進(jìn)行重新設(shè)計(jì)和更改,相對(duì)的比較滯后，當(dāng)然現(xiàn)在有網(wǎng)站管理系統(tǒng)，也可以生成靜態(tài)頁面~我們稱這種靜態(tài)頁面為偽靜態(tài)。動(dòng)態(tài)頁面通過網(wǎng)頁腳本與語言自動(dòng)處理自動(dòng)更新的頁面。2.1.1靜態(tài)頁面靜態(tài)頁面是網(wǎng)頁的代碼都在頁面中，不需要執(zhí)行asp,php,jsp,.net等程序生成客戶端網(wǎng)頁代碼的網(wǎng)頁。靜態(tài)頁面不能自主管理發(fā)布更新的頁面,如果想更新網(wǎng)頁內(nèi)容,要通過FTP軟件把文件DOWN下來用網(wǎng)頁制作軟件修改（通過fso等技術(shù)例外）。但是靜態(tài)頁面最大的好處是下載速度快，因?yàn)椴恍枰绦蜻\(yùn)算和數(shù)據(jù)庫連接。常見的靜態(tài)頁面以.html、.htm為擴(kuò)展名的。并非網(wǎng)站上沒有動(dòng)畫的就是靜態(tài)頁面[3]。2.1.2動(dòng)態(tài)頁面動(dòng)態(tài)頁面是通過執(zhí)行asp、php、jsp、.net等程序生成客戶端網(wǎng)頁代碼的網(wǎng)頁。動(dòng)態(tài)頁面通?？梢酝ㄟ^網(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)站的一些功能，也是我們常見的。動(dòng)態(tài)網(wǎng)頁是需要語言環(huán)境支持的，動(dòng)態(tài)頁面常見的擴(kuò)展名有：.asp、.php、.jsp、.cgi等。動(dòng)態(tài)頁面的“動(dòng)態(tài)”是網(wǎng)站與客戶端用戶互動(dòng)的意思，而非網(wǎng)頁上有動(dòng)畫的就是動(dòng)態(tài)頁面[4]。動(dòng)態(tài)網(wǎng)頁是最常用的網(wǎng)站建設(shè)的一種表達(dá)形式，其優(yōu)點(diǎn)在于可以根據(jù)先前所制定好的程序界面，根據(jù)用戶的不同請(qǐng)求返回相應(yīng)的數(shù)據(jù)?？梢哉f是一對(duì)多的關(guān)系。從而達(dá)到資源的最大利用和節(jié)省服務(wù)器上的物理資源。如果今后需要改變站點(diǎn)風(fēng)格，只需要重新制作前臺(tái)所訪問的數(shù)據(jù)即可。只要數(shù)據(jù)庫結(jié)構(gòu)不變，可以很快的進(jìn)行改版的。2.2網(wǎng)頁開發(fā)技術(shù)動(dòng)態(tài)網(wǎng)頁開發(fā)技術(shù)介紹——HTML、ASP、JSP、CGI、PHP。HTML（HyperTextMark-upLanguage）即超文本標(biāo)記語言，是WWW的描述語言。嚴(yán)格的來講，HTML不能算做一門編程語言，因?yàn)樗鼪]有自己的數(shù)據(jù)類型，也沒有分支、循環(huán)等控制結(jié)構(gòu)。它的設(shè)計(jì)簡(jiǎn)單，結(jié)構(gòu)靈活，允許在Web瀏覽器及其它兼容的應(yīng)用程序中顯示文本和圖像，并且文檔的某些部分可以成為超鏈接。完成后把這些文檔保存為*.html文件，然后用瀏覽器打開。

HTML是網(wǎng)絡(luò)的通用語言,一種簡(jiǎn)單、通用的全置標(biāo)記語言。它允許網(wǎng)頁制作人建立文本與圖片相結(jié)合的復(fù)雜頁面，這些頁面可以被網(wǎng)上任何其他人瀏覽到，無論使用的是什么類型的電腦或?yàn)g覽器[5]。在早期，動(dòng)態(tài)網(wǎng)頁技術(shù)主要采用CGI技術(shù)，即CommonGatewayInterface(公用網(wǎng)關(guān)接口)。在早期，你可以使用不同的程序編寫合適的CGI程序，如VisualBasic,Delphi或C/C++等。雖然CGI技術(shù)成熟而且功能強(qiáng)大，但由于編程困難，效率低下，修改復(fù)雜等缺陷，所以有逐漸被新技術(shù)取代的趨勢(shì)。ASP全名ActiveServerPages，是一個(gè)WEB服務(wù)器端的開發(fā)環(huán)境，利用它可以產(chǎn)生和運(yùn)行動(dòng)態(tài)的、交互的、高性能的WEB服務(wù)應(yīng)用程序。ASP采用腳本語言VBScript（Javascript）作為自己的開發(fā)語言。ASP更精確的說是一個(gè)中間件，這個(gè)中間件將Web上的請(qǐng)求轉(zhuǎn)入到一個(gè)解釋器中，在這個(gè)解釋器中將所有的ASP的Script進(jìn)行分析，再進(jìn)行執(zhí)行，而這時(shí)可以在這個(gè)中間件中去創(chuàng)建一個(gè)*.html文件（靜態(tài)網(wǎng)頁）。PHP是一種跨平臺(tái)的服務(wù)器端的嵌入式腳本語言.它大量地借用C,Java和Perl語言的語法,并耦合PHP自己的特性,使WEB開發(fā)者能夠快速地寫出動(dòng)態(tài)生成頁面.它支持目前絕大多數(shù)數(shù)據(jù)庫。還有一點(diǎn)，PHP是完全免費(fèi)的[6]。JSP是Sun公司推出的新一代站點(diǎn)開發(fā)語言，他完全解決了目前ASP,PHP的一個(gè)通?。_本級(jí)執(zhí)行（據(jù)說PHP4也已經(jīng)在Zend的支持下，實(shí)現(xiàn)編譯運(yùn)行）。Sun公司借助自己在Java上的不凡造詣，將Java從Java應(yīng)用程序和JavaApplet之外，又有新的碩果，就是Jsp－－JavaServerPage。Jsp可以在Serverlet和JavaBean的支持下，完成功能強(qiáng)大的站點(diǎn)程序。2.3網(wǎng)頁布局 網(wǎng)站主頁就好象是宣傳欄或者店面——對(duì)訪問者產(chǎn)生第一印象，都希望盡量給人留下好的印象。一般來說，好的網(wǎng)站應(yīng)該給人有這樣的感覺：干凈整潔；條理清楚；

網(wǎng)頁專業(yè)水準(zhǔn)；引人入勝。網(wǎng)頁應(yīng)該力求抓住而不是淹沒瀏覽者的注意力，過多的閃爍、色彩、下拉菜單框、圖片等會(huì)讓訪問者無所適從——離開是最好的選擇，就象一些商店，播放震耳欲聾的發(fā)燒音樂，你要做的唯一決定就是離開那里，越快越好。2.3.1網(wǎng)頁布局的基本概念最開始，網(wǎng)頁呈現(xiàn)在你面前的時(shí)侯，它就好像一張白紙，它需要你任意揮灑你的設(shè)計(jì)才思，可以創(chuàng)造出自己的設(shè)計(jì)方案。，雖然你能控制一切你所能控制的東西，但假如你知道什么是一種約定俗成的標(biāo)準(zhǔn)或者說大多數(shù)訪問者的瀏覽習(xí)慣，那么你可以在此基礎(chǔ)上加上自己的東西，這樣你創(chuàng)造出來的網(wǎng)頁才能更好的被別人接受。（1）頁面尺寸由于頁面尺寸和顯示器大小及分辨率有關(guān)系，網(wǎng)頁的局限性就在于你無法突破顯示器的范圍，而且因?yàn)闉g覽器也將占去不少空間，留下給你的頁面范圍變得越來越小。一般分辨率在800x600的情況下，頁面的顯示尺寸為：780x428個(gè)象素；分辨率在640x480的情況下，頁面的顯示尺寸為:620X311個(gè)象素；分辨率在1024X768的情況下，頁面的顯示尺寸為：1007x600。從以上數(shù)據(jù)可以看出，分辨率越高頁面尺寸越大。瀏覽器的工具欄也是影響頁面尺寸的原因。一般目前的瀏覽器的工具欄都可以取消或者增加，那么當(dāng)你顯示全部的工具欄時(shí)，和關(guān)閉全部工具欄時(shí)，頁面的尺寸是不一樣的。在網(wǎng)頁設(shè)計(jì)過程中，向下拖動(dòng)頁面是惟一給網(wǎng)頁增加更多內(nèi)容(尺寸)的方法。除非你能肯定站點(diǎn)的內(nèi)容能吸引大家拖動(dòng)，否則不要讓訪問者拖動(dòng)頁面超過三屏。如果需要在同一頁面顯示超過三屏的內(nèi)容，那么你最好能在上面做上頁面內(nèi)部連接，方便訪問者瀏覽。（2）整體造型造型就是創(chuàng)造出來的物體形象，這里是指頁面的整體形象。這種形象應(yīng)該是一個(gè)整體，圖形與文本的接合應(yīng)該是層疊有序。雖然，顯示器和瀏覽器都是矩形，但對(duì)于頁面的造型，你可以充分運(yùn)用自然界中的其它形狀以及它們的組合：矩形，圓形，三角形，菱形等。對(duì)于不同的形狀，它們所代表的意義是不同的。比如矩形代表著正式，規(guī)則，你注意到很多ICP和政府網(wǎng)頁都是以矩形為整體造型；圓形帶表著柔和，團(tuán)結(jié)，溫暖，安全等，許多時(shí)尚站點(diǎn)喜歡以圓形為頁面整體造型；三角形代表著力量，權(quán)威，牢固，侵略等，許多大型的商業(yè)站點(diǎn)為顯示它的權(quán)威性常以三角形為頁面整體造型；菱形代表著平衡，協(xié)調(diào)，公平，一些交友站點(diǎn)常運(yùn)用菱形作為頁面整體造型。雖然不同形狀帶表著不同意義，但目前的網(wǎng)頁制作多數(shù)是接合多個(gè)圖形加以設(shè)計(jì)，在這其中某種圖形的構(gòu)圖比例可能占的多一些。（3）頁頭頁頭又可稱之為頁眉，頁眉的作用是定義頁面的主題。比如一個(gè)站點(diǎn)的名字多數(shù)都顯示在頁眉里。這樣，訪問者能很快知道這個(gè)站點(diǎn)是什么內(nèi)容。頁頭是整個(gè)頁面設(shè)計(jì)的關(guān)鍵，它將牽涉到下面的更多設(shè)計(jì)和整個(gè)頁面的協(xié)調(diào)性。頁頭常放置站點(diǎn)名字的圖片和公司標(biāo)志以及旗幟廣告。（4）文本文本在頁面中出現(xiàn)都數(shù)以行或者塊(段落)出現(xiàn)，它們的擺放位置決定者整個(gè)頁面布局的可視性。在過去因?yàn)轫撁嬷谱骷夹g(shù)的局限，文本放置的位置的靈活性非常小，而隨著DHTML的興起，文本已經(jīng)可以按照自己的要求放置到頁面的任何位置。（5）頁腳頁腳和頁頭相呼應(yīng)。頁頭是放置站點(diǎn)主題的地方，而頁腳是放置制作者或者公司信息的地方。你能看到，許多制作信息都是放置在頁腳的。（6）圖片圖片和文本是網(wǎng)頁的兩大構(gòu)成元素，卻一不可。如何處理好圖片和文本的位置成了整個(gè)頁面布局的關(guān)鍵。而你的布局思維也將體現(xiàn)在這里。（7）多媒體除了文本和圖片，還有聲音，動(dòng)畫，視頻等等其它媒體。雖然它們不是經(jīng)常能被利用到，但隨著動(dòng)態(tài)網(wǎng)頁的興起，它們?cè)诰W(wǎng)頁布局上也將變得更重要。2.3.2網(wǎng)頁布局方法網(wǎng)頁布局的方法有兩種，第一種為紙上布局；第二種為軟件布局。下面分別加以介紹。（1）紙上布局法許多網(wǎng)頁制作者不喜歡先畫出頁面布局的草圖，而是直接在網(wǎng)頁設(shè)計(jì)器里邊設(shè)計(jì)布局邊加內(nèi)容。這種不打草稿的方法不能讓你設(shè)計(jì)出優(yōu)秀的網(wǎng)頁來。所以在開始制作網(wǎng)頁時(shí)，要先在紙上畫出你頁面的布局草圖來。首先，尺寸的選擇。目前一般800X600的分辨率為約定俗成的瀏覽模式。所以為了照顧大多數(shù)訪問者，你頁面的尺寸以800X600的分辨率為準(zhǔn)。其次，造型的選擇。先在白紙上畫出象征瀏覽器窗口的矩形，這個(gè)矩形就是你布局的范圍了。選擇一個(gè)形狀作為整個(gè)頁面的主題造型，我們選擇圓形，因?yàn)樗碚呷岷?，和時(shí)尚流行比較相稱，然后在矩形框架里隨意畫出來，你可以試者在增加一些圓形或者其它形狀。這樣畫下來，你會(huì)發(fā)現(xiàn)很亂。其實(shí)，如果你一開始就想設(shè)計(jì)出一個(gè)完美的布局來是比較困難的，而你要在這看似很亂的圖形中找出隱藏在其中的特別的造型出來。還要注意一點(diǎn)，你不要擔(dān)心你設(shè)計(jì)的布局是否能夠?qū)崿F(xiàn)。事實(shí)上，只要你能想到的布局都能靠現(xiàn)今的HTML技術(shù)實(shí)現(xiàn)。如圖2-1和圖2-2圖2-1手繪布局圖圖2-2布局圖考慮到左邊向左凹的弧線，為了取得平衡我們?cè)陧撁嬗疫呍黾恿艘粋€(gè)矩形，(也可以是一條線段)如圖2-3。圖2-3布局圖的改善然后，增加頁頭。一般頁頭都是位于頁面頂部，所以我們?yōu)閳D3增加了一個(gè)頁頭，為了和左邊的弧線和右邊的矩形取得平衡，我們?cè)黾恿艘粋€(gè)矩形頁頭并讓頁頭相交與左邊的弧線，如圖2-4。圖2-4頁頭的圖示然后，增加文本。頁面的空白部分加別加入文本和圖形。因?yàn)樵陧撁嬗疫呌芯匦巫鳛榕阋r，所以文本放置在空白部分不會(huì)因?yàn)樽筮叺幕【€而顯得不協(xié)調(diào)，如圖2-5。圖2-5文本的圖示最后，增加圖片。圖片是美化頁面和說明內(nèi)容必須的媒體。在這里把圖片加入到適當(dāng)?shù)牡胤剑鐖D2-6。圖2-6圖片的圖示經(jīng)過以上的幾個(gè)步驟，一個(gè)時(shí)尚頁面的大概布局就出現(xiàn)了。當(dāng)然，它不是最后的結(jié)果，而是你以后制作時(shí)的重要參考依據(jù)。（2）軟件布局法除了紙上布局，還可以利用軟件來完成這些工作。如利用Photoshop。Photoshop所具有的對(duì)圖像的編輯功能用到設(shè)計(jì)網(wǎng)頁布局上更顯得心應(yīng)手。利用Photoshop可以方便的使用顏色，使用圖形，并且可以利用層的功能設(shè)計(jì)出用紙張無法實(shí)現(xiàn)的布局意念。2.3.2網(wǎng)頁布局技術(shù)（1）層疊樣式表的應(yīng)用在新的HTML4.0標(biāo)準(zhǔn)中，CSS(層疊樣式表)被提出來，它能完全精確的定位文本和圖片。CSS有點(diǎn)復(fù)雜，但它的確是一個(gè)好的布局方法[7]。曾經(jīng)無法實(shí)現(xiàn)的想法利用CSS都能實(shí)現(xiàn)。目前在許多站點(diǎn)上，層疊樣式表的運(yùn)用是一個(gè)站點(diǎn)優(yōu)秀的體現(xiàn)。比如一些企業(yè)網(wǎng)站。（2）表格布局表格布局被廣泛使用，已經(jīng)成為一個(gè)潛在的標(biāo)準(zhǔn)。隨便瀏覽一個(gè)站點(diǎn)，它們一定是用表格布局的。表格布局的優(yōu)勢(shì)在于它能對(duì)不同對(duì)象加以處理，而又不用擔(dān)心不同對(duì)象之間的影響。而且表格在定位圖片和文本上比起用CSS更加方便。表格布局唯一的缺點(diǎn)是，當(dāng)你用了過多表格時(shí)，頁面下載速度受到影響[8]。對(duì)于表格布局，打開一個(gè)站點(diǎn)的首頁，然后保存為HTML文件，利用網(wǎng)頁編輯工具打開它(要所見即所得的軟件)，會(huì)可以看到這個(gè)頁面是如何利用表格的。（3）框架布局由于它的兼容性，框架布局并沒有被所有人接受。但從布局上考慮，框架結(jié)構(gòu)不失為一個(gè)好的布局方法。它如同表格布局一樣，把不同對(duì)象放置到不同頁面加以處理，因?yàn)榭蚣芸梢匀∠吙颍砸话銇碚f不影響整體美觀。2.4網(wǎng)頁配色網(wǎng)站充斥著枯燥的設(shè)計(jì)，惠普、IBM、戴爾、微軟，以及其他數(shù)不盡的網(wǎng)站（相似的布局，相似的配色）。這樣一種標(biāo)準(zhǔn)化的界面可以使瀏覽更方便，但同時(shí)帶給用戶一種很世俗的體驗(yàn)，并不能與訪客產(chǎn)生一種積極的聯(lián)系。面對(duì)這種單調(diào)的設(shè)計(jì)，有一種解決方法，就是使用顏色?？赡軟]有其他設(shè)計(jì)元素能像顏色一樣能影響人們對(duì)世界感受。顏色可以瞬間改變我們的情緒和意見。顏色會(huì)讓我們感覺到舒適、敬畏，或者激動(dòng)[9]。在界面設(shè)計(jì)中，顏色組合對(duì)設(shè)計(jì)非常有用?？梢詤^(qū)分設(shè)計(jì)讓用戶更加難忘、引導(dǎo)用戶使用戶專注于交互、吸引用戶使頁面布局更舒適，更有魅力。一旦有機(jī)會(huì)可以讓網(wǎng)站更獨(dú)特，就不能放棄。如果你的網(wǎng)站做的很醒目，那么用戶可能會(huì)花更多時(shí)間瀏覽并且想是從哪里訪問過來的，他們有可能記住這個(gè)網(wǎng)站并且下次再訪問?？赡軟]有比顏色更好的元素可以達(dá)到這樣的效果了。人們會(huì)馬上對(duì)顏色產(chǎn)生感覺：激動(dòng)、高興或者枯燥乏味。當(dāng)你試圖在一個(gè)充滿飽和色調(diào)的頁面上瀏覽信息時(shí)，你的眼睛會(huì)不斷地返回那些亮的顏色。最強(qiáng)的視覺元素是最重要的。我們趨向于忘記那些深藍(lán)、黃色和灰色，因?yàn)槊刻於伎吹?。在那些用戶需要長(zhǎng)時(shí)間在線使用的Web應(yīng)用程序中，注意這一點(diǎn)尤為重要。不是很強(qiáng)烈的配色可以使用戶專注于工作和接收重要信息。當(dāng)然完美的Web體驗(yàn)不能僅僅依靠顏色，結(jié)構(gòu)、交互、布局等方面也必須協(xié)同工作，來創(chuàng)建可用、易用的網(wǎng)站和應(yīng)用程序。但是顏色是平衡中的重要部分，不能忽略。2.5網(wǎng)頁設(shè)計(jì)流程網(wǎng)頁設(shè)計(jì)是一個(gè)互動(dòng)的過程，不僅是設(shè)計(jì)師構(gòu)思設(shè)計(jì)就可以完成的。從客戶提出需求到最終發(fā)布，期間需要客戶與設(shè)計(jì)人員共同參與協(xié)商才可以，具體流程如下：首先，獲取客戶需求和資料。在設(shè)計(jì)網(wǎng)站頁面之前，設(shè)計(jì)師需要知道客戶的需求，從而確定客戶建立網(wǎng)站的目的?？蛻籼岢鼍W(wǎng)站需求是非常重要的一個(gè)環(huán)節(jié)。沒有詳細(xì)的需求，設(shè)計(jì)人員無法憑空進(jìn)行設(shè)計(jì)制作。在這個(gè)步驟中，雙方的溝通與交流是非常重要的。其次，確定網(wǎng)站內(nèi)容。設(shè)計(jì)人員選擇適合自己的圖像編輯軟件、動(dòng)畫制作軟件和網(wǎng)頁制作軟件進(jìn)行網(wǎng)頁的初步設(shè)計(jì)，這中間可能還需要和客戶進(jìn)行多次溝通才能達(dá)到客戶滿意的效果。在具體設(shè)計(jì)時(shí)，設(shè)計(jì)人員應(yīng)該為網(wǎng)站定位一個(gè)主題，從而保證所有網(wǎng)頁都圍繞這個(gè)主題進(jìn)行設(shè)計(jì)制作，保證風(fēng)格的和諧統(tǒng)一。然后，申請(qǐng)域名和空間。使用該方法能夠有效同步管理文件。還可以通過FTP軟件連接到服務(wù)器空間上，然后上傳發(fā)布文件。最后，后期維護(hù)。一般靜態(tài)網(wǎng)站上傳后，如果客戶方?jīng)]有專業(yè)人員維護(hù)，這樣就需要設(shè)計(jì)人員從客戶方獲取新資料進(jìn)行定期或不定期的更新。如果是動(dòng)態(tài)網(wǎng)站，設(shè)計(jì)人員需要負(fù)責(zé)培訓(xùn)客戶方如何使用后臺(tái)管理，這樣客戶就可以自己通過后臺(tái)管理添加信息，設(shè)計(jì)人員只要及時(shí)更正動(dòng)態(tài)網(wǎng)站的錯(cuò)誤即可。第三章涉及軟件3.1DreamWeaVercs3介紹DreamweaverCS3是Adobe(奧多比)公司收購Macromedia公司后最新推出的CreativeSuite3設(shè)計(jì)套裝中用于網(wǎng)頁設(shè)計(jì)與制作的組件。作為全球最流行，最優(yōu)秀的所見即所得的網(wǎng)頁編輯器，Dreamweaver可以輕而易舉地制作出跨操作系統(tǒng)平臺(tái)，跨瀏覽器的充滿動(dòng)感的網(wǎng)頁，是目前制作Web頁站點(diǎn),Web頁和Web應(yīng)用程序開發(fā)的理想工具。Dreamweaver，F(xiàn)ireworks，F(xiàn)lash被稱為網(wǎng)頁制作的“三劍客”，這三款工具相輔相承，是制作網(wǎng)頁的最佳拍檔3.2DreamWeaVercs3操作界面DreamWeaVercs3界面設(shè)計(jì)友好，空間廣闊，操作精微細(xì)致,是一種所見即所得的網(wǎng)頁編輯器，既有效的減少了代碼編寫的工作量，也確保所設(shè)計(jì)文檔的專業(yè)性和兼容性。，如圖3.1所示。圖3.1DreamWeaVercs3操作界面第四章建立網(wǎng)頁鏈接網(wǎng)站實(shí)際上是由很多網(wǎng)頁組成的，那么網(wǎng)頁之間是如何聯(lián)系的呢？這就是本章要講的內(nèi)容網(wǎng)頁的“鏈接”。“鏈接”，又稱“超鏈接"（Hyperlink）,它作為網(wǎng)頁的橋梁。網(wǎng)頁中的很多對(duì)象都可以加入“鏈接”屬性。在Dreamweaver8中，如果以“鏈接”的媒介來劃分的話，則“鏈接”可以分為“文字鏈接”、“圖像鏈接”、“圖像地圖鏈接”、“內(nèi)部鏈接和外部鏈接”、“E-mail鏈接”、“命名錨記鏈接”、“文件下載鏈接”和“跳轉(zhuǎn)菜單”，共8種。4.1文字鏈接“文字鏈接”即以文字作為媒介的鏈接，它是網(wǎng)頁中最常被使用的鏈接方式，具有“文件小、制作簡(jiǎn)單和便于維護(hù)”的特點(diǎn)。接下來結(jié)合我的個(gè)人網(wǎng)站為實(shí)例，來講解如何為文字建立“鏈接”。操作步驟：步驟1

、準(zhǔn)備好已經(jīng)制作完成的首頁的各個(gè)欄目頁面步驟2、在Dreamweaver中打開首頁，之后反白選取作為“鏈接”的文字。步驟3、觀察“屬性面板”，其中包括一個(gè)“鏈接”文本框。步驟4、接下來需要把鏈接的位址加入到文本框中。步驟5、在“鏈接”文本框下面還有一個(gè)“目標(biāo)”下拉列表，從中可以選擇鏈接網(wǎng)頁顯示的窗口方式，共有4種。如圖：步驟6、還可以設(shè)置一些“鏈接”的屬性，單擊“屬性面板”中的“頁面屬性”，選擇其中的“鏈接”分類，可以進(jìn)行的設(shè)置有“鏈接字體”、“大小”、“鏈接顏色”、“變換圖像鏈接”顏色、“已訪問鏈接”顏色、“活動(dòng)鏈接”顏色及“下劃線樣式”。步驟7、至此，第1個(gè)欄目的鏈接就制作完畢了，按下Ctrl+S保存網(wǎng)頁，再按下F12預(yù)覽，測(cè)試一下，當(dāng)鼠標(biāo)放在“放松心情”這4個(gè)文字上時(shí)將變成手形，并且瀏覽器窗口下面的狀態(tài)區(qū)中會(huì)顯示鏈接到的網(wǎng)頁的位址，單擊文字，頁面會(huì)立即跳轉(zhuǎn)到第1個(gè)欄目中，這表示鏈接已經(jīng)制作成功了。步驟8、同理，按照以上步驟，再為“閑情逸致”和“個(gè)人主頁”等其它欄制作指向?qū)?yīng)欄目的鏈接。至此，整個(gè)“文字鏈接”的實(shí)例就全就全部完成了。4.2圖像鏈接“圖像”也是常被使用的鏈接媒體，它和“文字鏈接”非常相似。為圖像加入鏈接，首先應(yīng)該在網(wǎng)頁中插入“圖像”，有關(guān)插入“圖像”或“導(dǎo)航條”按鈕的內(nèi)容，接下來以我的網(wǎng)站“myweb“為例，講解如何建立“圖像鏈接”。操作步驟：步驟1、首先仍然要準(zhǔn)備好已經(jīng)制作完成的首頁和各個(gè)欄目的頁面步驟2、在Dreamweaver中打開網(wǎng)站的首頁，之后選取要制作“鏈接”的圖像。步驟3、觀察“屬性面板”，在“鏈接”文本框中輸入鏈接的文字位址。步驟4、如果有需要，可以在“目標(biāo)”下拉列表中選擇“鏈接”網(wǎng)頁顯示的窗口方式，分別為-blank、-parent、-self或top。步驟5、至此，第1個(gè)欄目的圖像鏈接就制作完畢了，按下Ctrl+S保存網(wǎng)頁，再按下F12預(yù)覽，測(cè)試一下，將鼠標(biāo)放在“動(dòng)畫制作”4個(gè)文字上時(shí)將變成手形，同時(shí)瀏覽器窗口下面的狀態(tài)區(qū)中會(huì)顯示出鏈接到的網(wǎng)頁的地址，并且會(huì)顯示出“替代”文本“動(dòng)畫制作”，單擊文字，頁面會(huì)立即跳轉(zhuǎn)到第3個(gè)欄目中，這表示鏈接已經(jīng)制作成功了。步驟6、同理，按照以上步驟，再為其它幾幅圖像制作指向?qū)?yīng)欄目的鏈接。步驟7、在欄目頁面中制作“返回首頁”的鏈接，使得單擊后可以跳轉(zhuǎn)回首頁。至此，整個(gè)“圖像鏈像”的實(shí)例就全部完成了。4.3在HTML語言中建立網(wǎng)頁鏈接一、文字鏈接在HTML語言中用超鏈接標(biāo)記指向一個(gè)目標(biāo)。其基本格式為：<ahref=”URL”文本內(nèi)容</a>舉個(gè)簡(jiǎn)單的“文本鏈接”的實(shí)例，該實(shí)例相對(duì)應(yīng)的HTML代碼如下所示。<html><head><title>文字鏈接</title></head><body><p>ahref-“index2.html”target=”-blank”>平面設(shè)計(jì)</a>（新開窗口，-blank)</p><p><ahref=”index3.html>相冊(cè)</a>（原窗口，默認(rèn)為空）</p><p><ahref=”index4.html>留言</a></p></body></html>解釋

：?

href:是<a>標(biāo)記的一種屬性，該屬性中的URL等于鏈接目標(biāo)文件的地址。?

Target:也是<a>標(biāo)記的一種屬性，相當(dāng)于Dreamweaver“屬性面板”中的“目標(biāo)”，它的值等于-blank,效果是在新窗口中打開。除此之外還包括其它3種：-parent,-self和-top。這和Dreamweaver中“目標(biāo)”