DreamweaverCS網(wǎng)制作項(xiàng)目一

中文版DreamweaverCS5

網(wǎng)頁(yè)制作案例教程全國(guó)計(jì)算機(jī)“十二五”精品圖書(shū)項(xiàng)目一網(wǎng)頁(yè)制作基礎(chǔ)任務(wù)一認(rèn)識(shí)網(wǎng)站和網(wǎng)頁(yè)任務(wù)二網(wǎng)站開(kāi)發(fā)基礎(chǔ)任務(wù)三初識(shí)DreamweaverCS5任務(wù)四站點(diǎn)基本操作任務(wù)五網(wǎng)頁(yè)文檔基本操作任務(wù)一認(rèn)識(shí)網(wǎng)站和網(wǎng)頁(yè)任務(wù)說(shuō)明本任務(wù)中，我們將簡(jiǎn)單了解網(wǎng)頁(yè)和網(wǎng)站、網(wǎng)頁(yè)的構(gòu)成元素以及網(wǎng)頁(yè)的本質(zhì)。預(yù)備知識(shí)一、網(wǎng)頁(yè)和網(wǎng)站網(wǎng)頁(yè)就是我們上網(wǎng)時(shí)在瀏覽器中打開(kāi)的一個(gè)個(gè)畫(huà)面，網(wǎng)站則是一組相關(guān)網(wǎng)頁(yè)的集合。一個(gè)小型網(wǎng)站可能只包含幾個(gè)網(wǎng)頁(yè)，而一個(gè)大型網(wǎng)站則可能包含成千上萬(wàn)個(gè)網(wǎng)頁(yè)。另外，打開(kāi)某個(gè)網(wǎng)站時(shí)顯示的第一個(gè)網(wǎng)頁(yè)被稱為網(wǎng)站的主頁(yè)（或首頁(yè)）。二、網(wǎng)頁(yè)的構(gòu)成元素我們可以將網(wǎng)頁(yè)中的元素按功能分為站標(biāo)、導(dǎo)航條、廣告條、標(biāo)題欄和按鈕等。站標(biāo)導(dǎo)航條廣告條標(biāo)題欄按鈕三、網(wǎng)頁(yè)的本質(zhì)一般情況下，網(wǎng)頁(yè)中除了包含網(wǎng)頁(yè)文件（擴(kuò)展名為.html、.asp等）外，還有圖像文件（擴(kuò)展名為.jpg、.gif等）、Flash動(dòng)畫(huà)文件（擴(kuò)展名為.swf）、腳本文件（擴(kuò)展名為.js）、樣式文件（擴(kuò)展名為.css）以及視頻文件（擴(kuò)展名為.avi、.flv等）等。任務(wù)實(shí)施——指出新浪網(wǎng)主頁(yè)的構(gòu)成元素在了解了網(wǎng)頁(yè)的構(gòu)成元素后，接下來(lái)通過(guò)辨識(shí)“新浪網(wǎng)”網(wǎng)站首頁(yè)的構(gòu)成元素，來(lái)進(jìn)一步加強(qiáng)和鞏固前面的學(xué)習(xí)。站標(biāo)導(dǎo)航條廣告條標(biāo)題欄按鈕任務(wù)二網(wǎng)站開(kāi)發(fā)基礎(chǔ)任務(wù)說(shuō)明在學(xué)習(xí)制作網(wǎng)頁(yè)之前首先了解一下與網(wǎng)站開(kāi)發(fā)相關(guān)的基礎(chǔ)知識(shí)，并從整體上認(rèn)識(shí)一下其制作流程，對(duì)后面的學(xué)習(xí)將是非常有利的。下面就來(lái)了解一下與網(wǎng)站開(kāi)發(fā)密切相關(guān)的基礎(chǔ)知識(shí)。預(yù)備知識(shí)一、網(wǎng)站管理與網(wǎng)頁(yè)制作相關(guān)軟件Dreamweaver是目前最常用的網(wǎng)站管理和網(wǎng)頁(yè)制作軟件，其功能全面、操作靈活、專業(yè)性強(qiáng)。在制作網(wǎng)頁(yè)時(shí)，除Dreamweaver外還需要用到Fireworks、Flash、Photoshop等輔助軟件。二、網(wǎng)頁(yè)制作基礎(chǔ)——XHTML語(yǔ)言XHTML是ExtensibleHyperTextMarkupLanguage(可擴(kuò)展超文本標(biāo)記語(yǔ)言)的英文縮寫，它的前身是HTML。由于HTML代碼繁瑣，結(jié)構(gòu)松散，所以推出了XHTML。也可以說(shuō)，XHTML是HTML的一個(gè)升級(jí)版本。三、IP地址、域域名和網(wǎng)網(wǎng)址（1）IP地址互聯(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）域名（3）網(wǎng)址網(wǎng)址又叫叫URL，英文文全稱是是“UniformResourceLocator”，，即統(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)頁(yè)頁(yè)在服務(wù)務(wù)器中的的路徑和和文件名名4部分分組成。。任務(wù)實(shí)施施——網(wǎng)站建設(shè)設(shè)基本流流程網(wǎng)站建設(shè)設(shè)流程是是從企業(yè)業(yè)計(jì)劃建建設(shè)網(wǎng)站站到網(wǎng)站站建設(shè)完完成的一一套規(guī)范范化運(yùn)作作。收集網(wǎng)站站建設(shè)需需求及素素材。制作網(wǎng)站站策劃書(shū)書(shū)。網(wǎng)頁(yè)美術(shù)術(shù)設(shè)計(jì)。。美術(shù)與程程序整合合。測(cè)試和發(fā)發(fā)布網(wǎng)站站。推廣和維維護(hù)網(wǎng)站站。任務(wù)三初初識(shí)識(shí)DreamweaverCS5任務(wù)說(shuō)明明DreamweaverCS5是一款集集網(wǎng)頁(yè)制制作和網(wǎng)網(wǎng)站管理理于一身身，所見(jiàn)見(jiàn)即所得得的網(wǎng)頁(yè)頁(yè)編輯軟軟件。下下面我們們首先啟啟動(dòng)該軟軟件，然然后熟悉悉一下其其工作界界面上的的各組成成元素，，最后在在任務(wù)實(shí)實(shí)施中學(xué)學(xué)習(xí)調(diào)整整DreamweaverCS5工作界面面的基本本操作。。預(yù)備知識(shí)識(shí)一、啟動(dòng)動(dòng)DreamweaverCS5安裝DreamweaverCS5后，單擊擊桌面左左下角的的“開(kāi)始始”按鈕鈕，，選選擇“所所有程序序”>“AdobeDreamweaverCS5”，就可以以啟動(dòng)DreamweaverCS5了。二、DreamweaverCS5界面元素素簡(jiǎn)介DreamweaverCS5的的工作界界面由應(yīng)應(yīng)用程序序欄、文文檔標(biāo)簽簽欄、文文檔工具具欄、文文檔窗口口、標(biāo)簽簽選擇器器、狀態(tài)態(tài)欄、屬屬性檢查查器和面面板組等等組成。。1．應(yīng)用程程序欄應(yīng)用程序序欄位于于工作區(qū)區(qū)頂部，，左側(cè)顯顯示菜單單欄，右右側(cè)包含含工作區(qū)區(qū)切換器器（可在在其下拉拉列表中中選擇不不同的工工作區(qū)模模式）、、“CSLive””按鈕和和程序窗窗口控制制按鈕。2．文檔檔標(biāo)簽欄欄文檔標(biāo)簽簽欄位于于應(yīng)用程程序欄下下方，左左側(cè)顯示示當(dāng)前打打開(kāi)的所所有網(wǎng)頁(yè)頁(yè)文檔的的標(biāo)簽（（標(biāo)簽上上顯示相相應(yīng)網(wǎng)頁(yè)頁(yè)文檔的的名稱））及其關(guān)關(guān)閉按鈕鈕；右側(cè)側(cè)顯示當(dāng)當(dāng)前文檔檔在本地地磁盤中中的保存存路徑以以及向下下還原按按鈕；下方顯顯示當(dāng)前前文檔中中包含的的文檔以以及鏈接接文檔。。3．文檔檔工具欄欄文檔工具具欄位于于文檔標(biāo)標(biāo)簽欄的的下方，，包括各各種可對(duì)對(duì)文檔進(jìn)進(jìn)行操作作的按鈕鈕。4．狀態(tài)態(tài)欄狀態(tài)欄位位于文檔檔窗口底底部，它它提供了了與當(dāng)前前文檔相相關(guān)的一一些信息息。5．屬性性檢查器器使用“屬屬性檢查查器”可可以檢查查和設(shè)置置當(dāng)前選選定頁(yè)面面元素（（如文本本和插入入對(duì)象））的最常常用屬性性?！皩賹傩詸z查查器”中中的內(nèi)容容會(huì)根據(jù)據(jù)選定元元素的不不同而變變化。6．面板板組默認(rèn)狀態(tài)態(tài)下，面面板組位位于文檔檔窗口右右側(cè)。面面板組中中包含各各種類型型的面板板，Dreamweaver中的大大部分操操作都需需要在面面板中實(shí)實(shí)現(xiàn)。其其中最常常用的有有“插入入”面板板、“文文件”面面板和““CSS樣式””面板。。任務(wù)實(shí)施施——調(diào)調(diào)整DreamweaverCS5工作作界面使用Dreamweaver制作或或編輯網(wǎng)網(wǎng)頁(yè)時(shí)，，經(jīng)常需需要打開(kāi)開(kāi)、關(guān)閉閉某個(gè)面面板，或或?qū)ζ涔すぷ鹘缑婷孢M(jìn)行各各種調(diào)整整。本節(jié)我們就來(lái)來(lái)學(xué)習(xí)一一下調(diào)整整DreamweaverCS5工作界界面的基基本操作作（具體操操作見(jiàn)視視頻1-3）。任務(wù)四站站點(diǎn)點(diǎn)基本操操作任務(wù)說(shuō)明明一般在Dreamweaver中制作網(wǎng)網(wǎng)頁(yè)之前前，最好好先定義義站點(diǎn)，，然后在在站點(diǎn)中中創(chuàng)建網(wǎng)網(wǎng)頁(yè)。本本任務(wù)主主要學(xué)習(xí)習(xí)在DreamweaverCS5中定義和和管理站站點(diǎn)的方方法。預(yù)備知識(shí)識(shí)一、在DreamweaverCS5中定義站站點(diǎn)在Dreamweaver中中定義站站點(diǎn)的目目的是把把本地磁磁盤中的的站點(diǎn)文文件夾同同Dreamweaver建建立一定定的關(guān)聯(lián)聯(lián)，從而而方便用用戶使用用Dreamweaver管管理站點(diǎn)點(diǎn)和編輯輯站點(diǎn)中中的網(wǎng)頁(yè)頁(yè)文檔，，以及上上傳或下下載站點(diǎn)點(diǎn)內(nèi)容等等。二、在DreamweaverCS5中中管理站站點(diǎn)定義站點(diǎn)點(diǎn)后，如如果需要要修改站站點(diǎn)屬性性、復(fù)制制或刪除除站點(diǎn)等等，可執(zhí)執(zhí)行管理站點(diǎn)點(diǎn)的操作。。任務(wù)實(shí)施施—在DreamweaverCS5中定定義站點(diǎn)點(diǎn)“歐妮妮雅”在本書(shū)的的大部分分“任務(wù)務(wù)實(shí)施””中，我我們都將將制作““歐妮雅雅”化妝妝品網(wǎng)站站的相關(guān)關(guān)頁(yè)面，，下面我我們先從從定義該該站點(diǎn)開(kāi)開(kāi)始（具體操操作見(jiàn)視視頻1-4）。任務(wù)五網(wǎng)網(wǎng)頁(yè)頁(yè)文檔基基本操作作任務(wù)說(shuō)明明定義好站站點(diǎn)后，，便可以以在站點(diǎn)點(diǎn)中創(chuàng)建建網(wǎng)頁(yè)了了。本任任務(wù)首先先學(xué)習(xí)網(wǎng)網(wǎng)頁(yè)文檔檔和文件件夾的命命名規(guī)則則，然后后依次學(xué)學(xué)習(xí)新建建、保存存、打開(kāi)開(kāi)、預(yù)覽覽和關(guān)閉閉網(wǎng)頁(yè)文文檔的方方法，最最后學(xué)習(xí)習(xí)利用““文件””面板管管理站點(diǎn)點(diǎn)中網(wǎng)頁(yè)頁(yè)文檔和和文件夾夾的方法法。預(yù)備知識(shí)識(shí)一、網(wǎng)頁(yè)頁(yè)文檔和和文件夾夾命名規(guī)規(guī)則首頁(yè)文檔檔一般命命名為index.html、index.asp或者者index.php。不要用中中文命名名網(wǎng)頁(yè)文文檔和文文件夾。。網(wǎng)頁(yè)文檔檔名中不不要使用用大寫英英文字母母，最好好全部使使用小寫寫英文字字母。運(yùn)算符符符號(hào)不能能用在文文件名的的開(kāi)頭。。比較長(zhǎng)的的網(wǎng)頁(yè)文文檔名可可以使用用下劃線線“_””來(lái)隔開(kāi)開(kāi)多個(gè)單單詞或關(guān)關(guān)鍵字。。在大型網(wǎng)網(wǎng)站中，，分支頁(yè)頁(yè)面的文文件應(yīng)存存放在單單獨(dú)的文文件夾中中，每個(gè)個(gè)分支中中的圖像像也應(yīng)該該存放在在各自單單獨(dú)的文文件夾中中，存放放網(wǎng)頁(yè)圖圖像的文文件夾一一般命名名為“images””或者““img”。在動(dòng)態(tài)網(wǎng)網(wǎng)站中，，用來(lái)存存放數(shù)據(jù)據(jù)庫(kù)的文文件夾一一般命名名為“data”或者者“database”。二、新建建和保存存網(wǎng)頁(yè)文文檔在DreamweaverCS5中可以以創(chuàng)建兩兩種類型型的網(wǎng)頁(yè)頁(yè)文檔，，一種是是直接創(chuàng)創(chuàng)建的空空白網(wǎng)頁(yè)頁(yè)文檔，，另一種種是通過(guò)過(guò)DreamweaverCS5內(nèi)置的的模板創(chuàng)創(chuàng)建具有有一定內(nèi)內(nèi)容和樣樣式的網(wǎng)網(wǎng)頁(yè)文檔檔。三、打開(kāi)開(kāi)、預(yù)覽覽和關(guān)閉閉網(wǎng)頁(yè)文文檔若要對(duì)已已有的文文檔進(jìn)行行編輯，，就需要要在Dreamweaver中打開(kāi)開(kāi)該文檔檔。另外外，在Dreamweaver中打打開(kāi)網(wǎng)頁(yè)頁(yè)文檔并并執(zhí)行相相應(yīng)操作作后，如如果想查查看它在在瀏覽器器中的效效果，可可執(zhí)行預(yù)預(yù)覽操作作。四、利用用“文件件”面板板管理站站點(diǎn)文件件和文件件夾一