DreamweaverCS5網(wǎng)頁(yè)制作高級(jí)案例教程項(xiàng)目一

1、項(xiàng)目一 創(chuàng)建“夕照臺(tái)”房產(chǎn)網(wǎng)站 網(wǎng)頁(yè)制作基礎(chǔ)一、學(xué)習(xí)目標(biāo)二、理論指導(dǎo)三、任務(wù)實(shí)踐一、學(xué)習(xí)習(xí)目標(biāo)了解網(wǎng)頁(yè)頁(yè)的構(gòu)成成元素，網(wǎng)頁(yè)的的本質(zhì)，以及動(dòng)動(dòng)態(tài)網(wǎng)頁(yè)頁(yè)和靜態(tài)態(tài)網(wǎng)頁(yè)的的區(qū)別。了解IP地址、域域名和網(wǎng)網(wǎng)址的概概念，以以及網(wǎng)站站管理與與網(wǎng)頁(yè)制制作相關(guān)關(guān)軟件，XHTML語(yǔ)言和網(wǎng)網(wǎng)站建設(shè)設(shè)流程。認(rèn)識(shí)DreamweaverCS5的界面元元素。掌握規(guī)劃劃網(wǎng)站結(jié)結(jié)構(gòu)以及及在Dreamweaver中定義和和管理站站點(diǎn)的方方法。掌握網(wǎng)頁(yè)頁(yè)文檔和和文件夾夾的命名名規(guī)則，以及在在Dreamweaver中新建、打開、保存和和預(yù)覽網(wǎng)網(wǎng)頁(yè)的方方法，另另外還要要學(xué)會(huì)使使用“文文件”面面板管理理站點(diǎn)文文件和文文件夾。二、理論論指

2、導(dǎo)（一）認(rèn)認(rèn)識(shí)網(wǎng)站站和網(wǎng)頁(yè)頁(yè)網(wǎng)頁(yè)就是是我們上上網(wǎng)時(shí)在在瀏覽器器中打開開的一個(gè)個(gè)個(gè)畫面面，網(wǎng)站站則是一一組相關(guān)關(guān)網(wǎng)頁(yè)的的集合。一個(gè)小小型網(wǎng)站站可能只只包含幾幾個(gè)網(wǎng)頁(yè)頁(yè)，而一一個(gè)大型型網(wǎng)站則則可能包包含成千千上萬(wàn)個(gè)個(gè)網(wǎng)頁(yè)。打開某個(gè)個(gè)網(wǎng)站時(shí)時(shí)顯示的的第一個(gè)個(gè)網(wǎng)頁(yè)被被稱為網(wǎng)網(wǎng)站的主主頁(yè)（或或首頁(yè)）。1網(wǎng)頁(yè)的的構(gòu)成元元素我們可以以將網(wǎng)頁(yè)頁(yè)中的元元素按功功能分為為站標(biāo)、導(dǎo)航條條、廣告告條、標(biāo)標(biāo)題欄和和按鈕等等，如圖圖1-1所示。站標(biāo)導(dǎo)航條廣告條按鈕標(biāo)題欄（1）站標(biāo)站標(biāo)也叫叫Logo，是網(wǎng)站站的標(biāo)志志，其作作用是使使人看見見它就能能夠聯(lián)想想到企業(yè)業(yè)。因此此，網(wǎng)站站Logo通常采用用企業(yè)的的Logo。Logo

3、一般采用用蘊(yùn)含企企業(yè)文化化和特色色的圖案案，或是是與企業(yè)業(yè)名稱相相關(guān)的字字符或符符號(hào)及其其變形，當(dāng)然也也有很多多是圖文文組合，如下圖圖所示。（2）導(dǎo)航條條導(dǎo)航條是是一組鏈鏈接到網(wǎng)網(wǎng)站內(nèi)主主要頁(yè)面面的超鏈鏈接組合合，通過(guò)過(guò)單擊這這些超鏈鏈接，瀏瀏覽者可可以輕松松找到網(wǎng)網(wǎng)站中的的各個(gè)頁(yè)頁(yè)面。設(shè)設(shè)計(jì)導(dǎo)航航條時(shí)，應(yīng)遵循循以下原原則：對(duì)于一般般的企業(yè)業(yè)網(wǎng)站，如果網(wǎng)網(wǎng)站內(nèi)容容不多，可根據(jù)據(jù)網(wǎng)站風(fēng)風(fēng)格靈活活擺放導(dǎo)導(dǎo)航條，也可以以使用圖圖片或Flash動(dòng)畫等顯顯示導(dǎo)航航條，如如下圖所所示。對(duì)于像搜搜狐、網(wǎng)網(wǎng)易等大大型門戶戶類網(wǎng)站站，網(wǎng)站站欄目都都很多，一般將將導(dǎo)航條條分為多多排放置置在Logo的下方或或右側(cè)。

4、為便于于查看，可為各各排設(shè)置置不同的的底色，如下圖圖所示。（3）廣告條條廣告條又又稱Banner，其功能能是宣傳傳網(wǎng)站或或?yàn)槠渌唐纷鲎鰪V告。Banner的尺寸可可以根據(jù)據(jù)內(nèi)容或或版面需需要來(lái)安安排。在制作Banner時(shí)，有以以下幾點(diǎn)點(diǎn)需要注注意。Banner可以是靜靜態(tài)的，也可以以是動(dòng)態(tài)態(tài)的。Banner的體積不不宜過(guò)大大，盡量量使用GIF格式圖片片與動(dòng)畫畫或Flash動(dòng)畫。Banner中的文字字不要太太多。Banner中圖片的的顏色不不要太多多，尤其其是GIF格式的圖圖片或動(dòng)動(dòng)畫，要要避免出出現(xiàn)顏色色的漸變變和光暈暈效果。（4）標(biāo)題欄欄此處的標(biāo)標(biāo)題欄不不是指整整個(gè)網(wǎng)頁(yè)頁(yè)的標(biāo)題題欄，而而是

5、網(wǎng)頁(yè)頁(yè)上各版版塊的標(biāo)標(biāo)題欄，是各版版塊內(nèi)容容的概括括。它使使得網(wǎng)頁(yè)頁(yè)內(nèi)容的的分類更更清晰、明了，大大地地方便了了瀏覽者者。標(biāo)題欄可可以是文文字加不不同顏色色的背景景，也可可以是圖圖片，這這由網(wǎng)站站的整體體風(fēng)格決決定。（5）按鈕按鈕通常常是啟動(dòng)動(dòng)某些裝裝置或機(jī)機(jī)關(guān)的開開關(guān)。網(wǎng)網(wǎng)頁(yè)中的的按鈕也也不例外外，單擊擊它，網(wǎng)網(wǎng)頁(yè)會(huì)實(shí)實(shí)現(xiàn)相應(yīng)應(yīng)的操作作，比如如跳轉(zhuǎn)到到其他頁(yè)頁(yè)面，或或提交數(shù)數(shù)據(jù)等。2網(wǎng)頁(yè)的的本質(zhì)在瀏覽器器中選擇擇“文件件”“另存為”菜單，將網(wǎng)頁(yè)頁(yè)保存到到磁盤中中，便可可看到網(wǎng)網(wǎng)頁(yè)的組組成文件件。3動(dòng)態(tài)態(tài)網(wǎng)頁(yè)和和靜態(tài)網(wǎng)網(wǎng)頁(yè)從制作技技術(shù)的角角度來(lái)講講，網(wǎng)頁(yè)頁(yè)可分為為靜態(tài)網(wǎng)網(wǎng)頁(yè)和動(dòng)動(dòng)態(tài)網(wǎng)頁(yè)頁(yè)。完全

6、全采用HTML技術(shù)制作作的網(wǎng)頁(yè)頁(yè)稱為靜靜態(tài)網(wǎng)頁(yè)頁(yè)；使用用HTML、編程語(yǔ)語(yǔ)言和數(shù)數(shù)據(jù)庫(kù)共共同完成成，需要要與數(shù)據(jù)據(jù)庫(kù)實(shí)時(shí)時(shí)交互的的網(wǎng)頁(yè)稱稱為動(dòng)態(tài)態(tài)網(wǎng)頁(yè)。（二）網(wǎng)網(wǎng)站開發(fā)發(fā)基礎(chǔ)1IP地址、域域名和網(wǎng)網(wǎng)址（1）IP地址互聯(lián)網(wǎng)是是全世界界范圍內(nèi)內(nèi)的計(jì)算算機(jī)聯(lián)為為一體而而構(gòu)成的的通信網(wǎng)網(wǎng)絡(luò)?；セヂ?lián)網(wǎng)上上連接了了不計(jì)其其數(shù)的服服務(wù)器和和客戶機(jī)機(jī)，每一一個(gè)主機(jī)機(jī)在互聯(lián)聯(lián)網(wǎng)上都都有一個(gè)個(gè)唯一的的地址，我們稱稱這個(gè)地地址為IP地址（InternetProtocolAddress）。IP地址由4個(gè)小于256的數(shù)字組組成，數(shù)數(shù)字之間間用點(diǎn)間間隔。例例如，“61.135.150.126”就是一個(gè)個(gè)IP地址。（2）域

7、名（3）網(wǎng)址網(wǎng)址又叫叫URL，英文全全稱是“Uniform Resource Locator”，即統(tǒng)一一資源定定位符。它是網(wǎng)網(wǎng)絡(luò)上通通用的一一種地址址格式，用于標(biāo)標(biāo)識(shí)網(wǎng)頁(yè)頁(yè)文件在在網(wǎng)絡(luò)中中的位置置。一個(gè)完整整的網(wǎng)址址由通信信協(xié)議名名稱、域域名或IP地址、網(wǎng)網(wǎng)頁(yè)在服服務(wù)器中中的路徑徑和文件件名4部分組成成。2網(wǎng)站管管理與網(wǎng)網(wǎng)頁(yè)制作作相關(guān)軟軟件Dreamweaver是目前最最常用的的網(wǎng)站管管理和網(wǎng)網(wǎng)頁(yè)制作作軟件，其功能能全面、操作靈靈活、專專業(yè)性強(qiáng)強(qiáng)。另外外，它還還可以作作為動(dòng)態(tài)態(tài)網(wǎng)站的的開發(fā)環(huán)環(huán)境。在制作網(wǎng)網(wǎng)頁(yè)時(shí)，除Dreamweaver外還需要要用到Fireworks、Flash、Photos

8、hop等輔助軟軟件。3網(wǎng)頁(yè)頁(yè)制作基基礎(chǔ)XHTML語(yǔ)語(yǔ)言XHTML是Extensible HyperTextMarkupLanguage(可擴(kuò)展展超文本本標(biāo)記語(yǔ)語(yǔ)言)的的英文縮縮寫，它它的前身身是HTML。由于HTML代碼煩煩瑣，結(jié)結(jié)構(gòu)松散散，所以以推出了了XHTML。也可以以說(shuō)，XHTML是HTML的一個(gè)個(gè)升級(jí)版版本。XHTML語(yǔ)言的核核心是標(biāo)標(biāo)簽（或或者稱為為標(biāo)記）。也就就是說(shuō)，我們?cè)谠跒g覽網(wǎng)網(wǎng)頁(yè)時(shí)看看到的文文字、圖圖像、動(dòng)動(dòng)畫等在在XHTML文檔中都都是用標(biāo)標(biāo)簽來(lái)描描述的。4網(wǎng)站站建設(shè)流流程網(wǎng)站建設(shè)設(shè)流程是是指從企企業(yè)計(jì)劃劃建設(shè)網(wǎng)網(wǎng)站到網(wǎng)網(wǎng)站建設(shè)設(shè)完成的的一套規(guī)規(guī)范化運(yùn)運(yùn)作過(guò)程程。（三）初

9、初識(shí)Dreamweaver CS51啟動(dòng)DreamweaverCS5安裝DreamweaverCS5后，單擊擊桌面左左下角的的“開始始”按鈕鈕 ，選選擇“所所有程序序”“Adobe Dreamweaver CS5”，就可以以啟動(dòng)DreamweaverCS5了。2Dreamweaver CS5界面面元素簡(jiǎn)簡(jiǎn)介DreamweaverCS5的工作界界面由應(yīng)應(yīng)用程序序欄、文文檔標(biāo)簽簽、文檔檔工具欄欄、文檔檔窗口、標(biāo)簽選選擇器、狀態(tài)欄欄、屬性性檢查器器和面板板組等組組成。（1）應(yīng)用程程序欄應(yīng)用程序序欄位于于工作區(qū)區(qū)頂部，左側(cè)顯顯示菜單單欄，右右側(cè)包含含工作區(qū)區(qū)切換器器、“CSLive”按鈕和程程序窗口口

10、控制按按鈕。（2）文檔標(biāo)標(biāo)簽欄文檔標(biāo)簽簽欄位于于應(yīng)用程程序欄下下方，左左側(cè)顯示示當(dāng)前打打開的所所有網(wǎng)頁(yè)頁(yè)文檔的的名稱及及其關(guān)閉閉按鈕（標(biāo)簽）；右側(cè)側(cè)顯示當(dāng)當(dāng)前文檔檔在本地地磁盤中中的保存存路徑以以及向下下還原按按鈕；下下方顯示示當(dāng)前文文檔中的的包含文文檔以及及鏈接文文檔。當(dāng)當(dāng)用戶打打開多個(gè)個(gè)網(wǎng)頁(yè)時(shí)時(shí)，通過(guò)過(guò)單擊文文檔標(biāo)簽簽可在各各網(wǎng)頁(yè)之之間切換換。另外外，單擊擊下方的的包含文文檔或鏈鏈接文檔檔，可打打開相應(yīng)應(yīng)文檔。（3）文檔工工具欄文檔工具具欄位于于文檔標(biāo)標(biāo)簽下方方，包括括各種可可對(duì)文檔檔進(jìn)行操操作的按按鈕。（4）狀態(tài)欄欄狀態(tài)欄位位于文檔檔窗口底底部，它它提供了了與當(dāng)前前文檔相相關(guān)的一一些信息

11、息。（5）屬性檢檢查器使用“屬屬性檢查查器”可可以檢查查和設(shè)置置當(dāng)前選選定頁(yè)面面元素（如文本本和插入入對(duì)象）的最常常用屬性性?！皩賹傩詸z查查器”中中的內(nèi)容容會(huì)根據(jù)據(jù)選定元元素的變變化而變變化。（6）面板組組默認(rèn)狀態(tài)態(tài)下，面面板組位位于文檔檔窗口右右側(cè)。面面板組中中包含各各種類型型的面板板，Dreamweaver中的大部部分操作作都需要要利用面面板來(lái)實(shí)實(shí)現(xiàn)。其其中最常常用的有有“插入入”面板板、“文文件”面面板和“CSS樣式”面面板，后后面將陸陸續(xù)用到到。（四）在在Dreamweaver中定義和和管理網(wǎng)網(wǎng)站1定義網(wǎng)網(wǎng)站定義網(wǎng)站站的目的的是把本本地磁盤盤中的站站點(diǎn)文件件夾同Dreamweaver建

12、立一定定的關(guān)聯(lián)聯(lián)，從而而方便用用戶使用用Dreamweaver管理站點(diǎn)點(diǎn)和編輯輯站點(diǎn)中中的網(wǎng)頁(yè)頁(yè)文檔，以及上上傳或下下載站點(diǎn)點(diǎn)內(nèi)容等等。2管理網(wǎng)網(wǎng)站定義站點(diǎn)點(diǎn)后，如如果需要要修改站站點(diǎn)屬性性、復(fù)制制或刪除除站點(diǎn)等等，可執(zhí)執(zhí)行下面面的操作作。（五）網(wǎng)網(wǎng)頁(yè)文檔檔基本操操作1網(wǎng)頁(yè)文文檔和文文件夾命命名規(guī)則則靜態(tài)的首首頁(yè)文件件一般命命名為“index.html”。不要使用用中文命命名網(wǎng)站站中的文文件和文文件夾。文件名中中不要使使用大寫寫英文字字母。運(yùn)算符符符號(hào)不能能用在文文件名的的開頭。比較長(zhǎng)的的文件名名可以使使用下劃劃線“_”來(lái)隔開多多個(gè)單詞詞或關(guān)鍵鍵字。在大型網(wǎng)網(wǎng)站中，分支頁(yè)頁(yè)面的文文件應(yīng)存存放在

13、單單獨(dú)的文文件夾中中。在動(dòng)態(tài)網(wǎng)網(wǎng)站中，用來(lái)存存放數(shù)據(jù)據(jù)庫(kù)的文文件夾一一般命名名為“data”或者“database”。2新建和和保存網(wǎng)網(wǎng)頁(yè)文檔檔在DreamweaverCS5中可以創(chuàng)創(chuàng)建兩種種格式的的網(wǎng)頁(yè)文文檔，一一種是直直接創(chuàng)建建空白網(wǎng)網(wǎng)頁(yè)文檔檔，另一一種是通通過(guò)DreamweaverCS5內(nèi)置的模模板文檔檔創(chuàng)建具具有一定定內(nèi)容和和樣式的的網(wǎng)頁(yè)文文檔。3打開、預(yù)覽和和關(guān)閉網(wǎng)網(wǎng)頁(yè)文檔檔若要對(duì)已已有的文文檔進(jìn)行行編輯，就需要要在Dreamweaver中打開該該文檔。另外，在Dreamweaver中打開網(wǎng)網(wǎng)頁(yè)文檔檔并執(zhí)行行相應(yīng)操操作后，如果想想查看它它在瀏覽覽器中的的效果，可執(zhí)行行預(yù)覽操操作。4、利用“文件”面板管管理站點(diǎn)點(diǎn)文件和和文件夾夾一般在定定義站點(diǎn)點(diǎn)后，都都會(huì)利用用“文件件”面板板來(lái)創(chuàng)建建、重命命名或打打開站點(diǎn)點(diǎn)中的網(wǎng)網(wǎng)頁(yè)文檔檔和文件件夾。三、任務(wù)務(wù)實(shí)踐任務(wù)一夕夕照照臺(tái)網(wǎng)站站的建設(shè)設(shè)流程本任務(wù)中中，我們們將以夕夕照臺(tái)房房產(chǎn)網(wǎng)站站為例，學(xué)習(xí)一一般網(wǎng)站站的建設(shè)設(shè)流程。收集網(wǎng)站站建設(shè)需需求及素素材。制作網(wǎng)站站策劃書書。網(wǎng)頁(yè)美術(shù)術(shù)設(shè)計(jì)。美術(shù)與程程序整合合。測(cè)試和發(fā)發(fā)布網(wǎng)站站。推廣和維維護(hù)網(wǎng)站站。任務(wù)二調(diào)調(diào)整整DreamweaverCS5工作界面面使用Dreamweaver制作或編編輯網(wǎng)頁(yè)頁(yè)時(shí)，經(jīng)經(jīng)常需要要打開、關(guān)閉某某個(gè)面板板，或?qū)?duì)其工作作界面進(jìn)進(jìn)行各種種調(diào)整。為方便便后期的的學(xué)習(xí)