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

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

2、站則是一組相關(guān)網(wǎng)頁(yè)的集合。一個(gè)小型網(wǎng)站可能只包含幾個(gè)網(wǎng)頁(yè)，而一個(gè)大型網(wǎng)站則可能包含成千上萬(wàn)個(gè)網(wǎng)頁(yè)。 打開某個(gè)網(wǎng)站時(shí)顯示的第一個(gè)網(wǎng)頁(yè)被稱為網(wǎng)站的主頁(yè)（或首頁(yè)）。,1網(wǎng)頁(yè)的構(gòu)成元素,我們可以將網(wǎng)頁(yè)中的元素按功能分為站標(biāo)、導(dǎo)航條、廣告條、標(biāo)題欄和按鈕等，如圖1-1所示。,站標(biāo),導(dǎo)航條,廣告條,按鈕,標(biāo)題欄,（1）站標(biāo),站標(biāo)也叫Logo，是網(wǎng)站的標(biāo)志，其作用是使人看見(jiàn)它就能夠聯(lián)想到企業(yè)。因此，網(wǎng)站Logo通常采用企業(yè)的Logo。 Logo一般采用蘊(yùn)含企業(yè)文化和特色的圖案，或是與企業(yè)名稱相關(guān)的字符或符號(hào)及其變形，當(dāng)然也有很多是圖文組合，如下圖所示。,（2）導(dǎo)航條,導(dǎo)航條是一組鏈接到網(wǎng)站內(nèi)主要頁(yè)面的超鏈接

3、組合，通過(guò)單擊這些超鏈接，瀏覽者可以輕松找到網(wǎng)站中的各個(gè)頁(yè)面。設(shè)計(jì)導(dǎo)航條時(shí)，應(yīng)遵循以下原則：,對(duì)于一般的企業(yè)網(wǎng)站，如果網(wǎng)站內(nèi)容不多，可根據(jù)網(wǎng)站風(fēng)格靈活擺放導(dǎo)航條，也可以使用圖片或Flash動(dòng)畫等顯示導(dǎo)航條，如下圖所示。,對(duì)于像搜狐、網(wǎng)易等大型門戶類網(wǎng)站，網(wǎng)站欄目都很多，一般將導(dǎo)航條分為多排放置在Logo的下方或右側(cè)。為便于查看，可為各排設(shè)置不同的底色，如下圖所示。,（3）廣告條,廣告條又稱Banner，其功能是宣傳網(wǎng)站或?yàn)槠渌唐纷鰪V告。Banner的尺寸可以根據(jù)內(nèi)容或版面需要來(lái)安排。 在制作Banner時(shí)，有以下幾點(diǎn)需要注意。,Banner可以是靜態(tài)的，也可以是動(dòng)態(tài)的。 Banner的體積不

4、宜過(guò)大，盡量使用GIF格式圖片與動(dòng)畫或Flash動(dòng)畫。 Banner中的文字不要太多。 Banner中圖片的顏色不要太多，尤其是GIF格式的圖片或動(dòng)畫，要避免出現(xiàn)顏色的漸變和光暈效果。,（4）標(biāo)題欄,此處的標(biāo)題欄不是指整個(gè)網(wǎng)頁(yè)的標(biāo)題欄，而是網(wǎng)頁(yè)上各版塊的標(biāo)題欄，是各版塊內(nèi)容的概括。它使得網(wǎng)頁(yè)內(nèi)容的分類更清晰、明了，大大地方便了瀏覽者。 標(biāo)題欄可以是文字加不同顏色的背景，也可以是圖片，這由網(wǎng)站的整體風(fēng)格決定。,（5）按鈕,按鈕通常是啟動(dòng)某些裝置或機(jī)關(guān)的開關(guān)。網(wǎng)頁(yè)中的按鈕也不例外，單擊它，網(wǎng)頁(yè)會(huì)實(shí)現(xiàn)相應(yīng)的操作，比如跳轉(zhuǎn)到其他頁(yè)面，或提交數(shù)據(jù)等。,2網(wǎng)頁(yè)的本質(zhì),在瀏覽器中選擇“文件”“另存為”菜單，

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

6、0.126”就是一個(gè)IP地址。,（2）域名,由于IP地址在使用過(guò)程中難于記憶和書寫，人們又發(fā)現(xiàn)了一種與IP地址對(duì)應(yīng)的字符來(lái)表示地址，這就是域名。每一個(gè)網(wǎng)站都有自己的域名，并且域名是獨(dú)一無(wú)二的。例如，我們只需要在瀏覽器地址欄中輸入搜狐網(wǎng)站的域名“”，然后按回車鍵就可以訪問(wèn)搜狐網(wǎng)站了。,（3）網(wǎng)址,網(wǎng)址又叫URL，英文全稱是“Uniform Resource Locator”，即統(tǒng)一資源定位符。它是網(wǎng)絡(luò)上通用的一種地址格式，用于標(biāo)識(shí)網(wǎng)頁(yè)文件在網(wǎng)絡(luò)中的位置。 一個(gè)完整的網(wǎng)址由通信協(xié)議名稱、域名或IP地址、網(wǎng)頁(yè)在服務(wù)器中的路徑和文件名4部分組成。,2網(wǎng)站管理與網(wǎng)頁(yè)制作相關(guān)軟件,Dreamweaver是

7、目前最常用的網(wǎng)站管理和網(wǎng)頁(yè)制作軟件，其功能全面、操作靈活、專業(yè)性強(qiáng)。另外，它還可以作為動(dòng)態(tài)網(wǎng)站的開發(fā)環(huán)境。 在制作網(wǎng)頁(yè)時(shí)，除Dreamweaver外還需要用到Fireworks、Flash、Photoshop等輔助軟件。,3網(wǎng)頁(yè)制作基礎(chǔ)XHTML語(yǔ)言,XHTML是Extensible HyperText Markup Language(可擴(kuò)展超文本標(biāo)記語(yǔ)言)的英文縮寫，它的前身是HTML。由于HTML代碼煩瑣，結(jié)構(gòu)松散，所以推出了XHTML。也可以說(shuō)，XHTML是HTML的一個(gè)升級(jí)版本。 XHTML語(yǔ)言的核心是標(biāo)簽（或者稱為標(biāo)記）。也就是說(shuō)，我們?cè)跒g覽網(wǎng)頁(yè)時(shí)看到的文字、圖像、動(dòng)畫等在XHTML

8、文檔中都是用標(biāo)簽來(lái)描述的。,4網(wǎng)站建設(shè)流程,網(wǎng)站建設(shè)流程是指從企業(yè)計(jì)劃建設(shè)網(wǎng)站到網(wǎng)站建設(shè)完成的一套規(guī)范化運(yùn)作過(guò)程。,（三）初識(shí)Dreamweaver CS5,1啟動(dòng)Dreamweaver CS5,安裝Dreamweaver CS5后，單擊桌面左下角的“開始”按鈕 ，選擇“所有程序”“Adobe Dreamweaver CS5”，就可以啟動(dòng)Dreamweaver CS5了。,2Dreamweaver CS5界面元素簡(jiǎn)介,Dreamweaver CS5的工作界面由應(yīng)用程序欄、文檔標(biāo)簽、文檔工具欄、文檔窗口、標(biāo)簽選擇器、狀態(tài)欄、屬性檢查器和面板組等組成。,（1）應(yīng)用程序欄,應(yīng)用程序欄位于工作區(qū)頂部，

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

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

11、性、復(fù)制或刪除站點(diǎn)等，可執(zhí)行下面的操作。,（五）網(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)站中，分支頁(yè)面的文件應(yīng)存放在單獨(dú)的文件夾中。 在動(dòng)態(tài)網(wǎng)站中，用來(lái)存放數(shù)據(jù)庫(kù)的文件夾一般命名為“data”或者“database” 。,2新建和保存網(wǎng)頁(yè)文檔,在Dreamweaver CS5中可以創(chuàng)建兩種格式的網(wǎng)頁(yè)文檔，一種是直接創(chuàng)建空白網(wǎng)頁(yè)文檔，另一種是通過(guò)Dreamweaver

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