DreamweaverCS網(wǎng)制作高級案例教程項目一

項目一創(chuàng)建“夕照臺”房產(chǎn)網(wǎng)站

——網(wǎng)頁制作基礎(chǔ)一、學(xué)習(xí)目標(biāo)二、理論指導(dǎo)三、任務(wù)實踐一、學(xué)習(xí)目標(biāo)了解網(wǎng)頁的構(gòu)成元素，網(wǎng)頁的本質(zhì)，以及動態(tài)網(wǎng)頁和靜態(tài)網(wǎng)頁的區(qū)別。了解IP地址、域名和網(wǎng)址的概念，以及網(wǎng)站管理與網(wǎng)頁制作相關(guān)軟件，XHTML語言和網(wǎng)站建設(shè)流程。認識DreamweaverCS5的界面元素。掌握規(guī)劃網(wǎng)站結(jié)構(gòu)以及在Dreamweaver中定義和管理站點的方法。掌握網(wǎng)頁文檔和文件夾的命名規(guī)則，以及在Dreamweaver中新建、打開、保存和預(yù)覽網(wǎng)頁的方法，另外還要學(xué)會使用“文件”面板管理站點文件和文件夾。二、理論指導(dǎo)（一）認識網(wǎng)站和網(wǎng)頁網(wǎng)頁就是我們上網(wǎng)時在瀏覽器中打開的一個個畫面，網(wǎng)站則是一組相關(guān)網(wǎng)頁的集合。一個小型網(wǎng)站可能只包含幾個網(wǎng)頁，而一個大型網(wǎng)站則可能包含成千上萬個網(wǎng)頁。打開某個網(wǎng)站時顯示的第一個網(wǎng)頁被稱為網(wǎng)站的主頁（或首頁）。1．網(wǎng)頁的構(gòu)成元素我們可以將網(wǎng)頁中的元素按功能分為站標(biāo)、導(dǎo)航條、廣告條、標(biāo)題欄和按鈕等，如圖1-1所示。站標(biāo)導(dǎo)航條廣告條按鈕標(biāo)題欄（1）站標(biāo)站標(biāo)也叫Logo，是網(wǎng)站的標(biāo)志，其作用是使人看見它就能夠聯(lián)想到企業(yè)。因此，網(wǎng)站Logo通常采用企業(yè)的Logo。Logo一般采用蘊含企業(yè)文化和特色的圖案，或是與企業(yè)名稱相關(guān)的字符或符號及其變形，當(dāng)然也有很多是圖文組合，如下圖所示。（2）導(dǎo)航條導(dǎo)航條是一組鏈接到網(wǎng)站內(nèi)主要頁面的超鏈接組合，通過單擊這些超鏈接，瀏覽者可以輕松找到網(wǎng)站中的各個頁面。設(shè)計導(dǎo)航條時，應(yīng)遵循以下原則：對于一般的企業(yè)網(wǎng)站，如果網(wǎng)站內(nèi)容不多，可根據(jù)網(wǎng)站風(fēng)格靈活擺放導(dǎo)航條，也可以使用圖片或Flash動畫等顯示導(dǎo)航條，如下圖所示。對于像搜狐、網(wǎng)易等大型門戶類網(wǎng)站，網(wǎng)站欄目都很多，一般將導(dǎo)航條分為多排放置在Logo的下方或右側(cè)。為便于查看，可為各排設(shè)置不同的底色，如下圖所示。（3）廣告條廣告條又稱Banner，其功能是宣傳網(wǎng)站或為其他商品做廣告。Banner的尺寸可以根據(jù)內(nèi)容或版面需要來安排。在制作Banner時，有以下幾點需要注意。Banner可以是靜態(tài)的，也可以是動態(tài)的。Banner的體積不宜過大，盡量使用GIF格式圖片與動畫或Flash動畫。Banner中的文字不要太多。Banner中圖片的顏色不要太多，尤其是GIF格式的圖片或動畫，要避免出現(xiàn)顏色的漸變和光暈效果。（4）標(biāo)題欄此處的標(biāo)題欄不是指整個網(wǎng)頁的標(biāo)題欄，而是網(wǎng)頁上各版塊的標(biāo)題欄，是各版塊內(nèi)容的概括。它使得網(wǎng)頁內(nèi)容的分類更清晰、明了，大大地方便了瀏覽者。標(biāo)題欄可以是文字加不同顏色的背景，也可以是圖片，這由網(wǎng)站的整體風(fēng)格決定。（5）按鈕按鈕通常是啟動某些裝置或機關(guān)的開關(guān)。網(wǎng)頁中的按鈕也不例外，單擊它，網(wǎng)頁會實現(xiàn)相應(yīng)的操作，比如跳轉(zhuǎn)到其他頁面，或提交數(shù)據(jù)等。2．網(wǎng)頁的的本質(zhì)在瀏覽器器中選擇擇“文件件”>“另存為””菜單，，將網(wǎng)頁頁保存到到磁盤中中，便可可看到網(wǎng)網(wǎng)頁的組組成文件件。3．動態(tài)態(tài)網(wǎng)頁和和靜態(tài)網(wǎng)網(wǎng)頁從制作技技術(shù)的角角度來講講，網(wǎng)頁頁可分為為靜態(tài)網(wǎng)網(wǎng)頁和動動態(tài)網(wǎng)頁頁。完全全采用HTML技術(shù)制作作的網(wǎng)頁頁稱為靜靜態(tài)網(wǎng)頁頁；使用用HTML、編程語語言和數(shù)數(shù)據(jù)庫共共同完成成，需要要與數(shù)據(jù)據(jù)庫實時時交互的的網(wǎng)頁稱稱為動態(tài)態(tài)網(wǎng)頁。。（二）網(wǎng)網(wǎng)站開發(fā)發(fā)基礎(chǔ)1．IP地址、域域名和網(wǎng)網(wǎng)址（1）IP地址互聯(lián)網(wǎng)是是全世界界范圍內(nèi)內(nèi)的計算算機聯(lián)為為一體而而構(gòu)成的的通信網(wǎng)網(wǎng)絡(luò)?；セヂ?lián)網(wǎng)上上連接了了不計其其數(shù)的服服務(wù)器和和客戶機機，每一一個主機機在互聯(lián)聯(lián)網(wǎng)上都都有一個個唯一的的地址，，我們稱稱這個地地址為IP地址（InternetProtocolAddress）。IP地址由4個小于256的數(shù)字組組成，數(shù)數(shù)字之間間用點間間隔。例例如，““61.135.150.126”就是一個個IP地址。（2）域名（3）網(wǎng)址網(wǎng)址又叫叫URL，英文全全稱是““UniformResourceLocator””，即統(tǒng)一一資源定定位符。。它是網(wǎng)網(wǎng)絡(luò)上通通用的一一種地址址格式，，用于標(biāo)標(biāo)識網(wǎng)頁頁文件在在網(wǎng)絡(luò)中中的位置置。一個完整整的網(wǎng)址址由通信信協(xié)議名名稱、域域名或IP地址、網(wǎng)網(wǎng)頁在服服務(wù)器中中的路徑徑和文件件名4部分組成成。2．網(wǎng)站管管理與網(wǎng)網(wǎng)頁制作作相關(guān)軟軟件Dreamweaver是目前最最常用的的網(wǎng)站管管理和網(wǎng)網(wǎng)頁制作作軟件，，其功能能全面、、操作靈靈活、專專業(yè)性強強。另外外，它還還可以作作為動態(tài)態(tài)網(wǎng)站的的開發(fā)環(huán)環(huán)境。在制作網(wǎng)網(wǎng)頁時，，除Dreamweaver外還需要要用到Fireworks、Flash、Photoshop等輔助軟軟件。3．網(wǎng)頁頁制作基基礎(chǔ)———XHTML語語言XHTML是ExtensibleHyperTextMarkupLanguage(可擴展展超文本本標(biāo)記語語言)的的英文縮縮寫，它它的前身身是HTML。。由于HTML代碼煩煩瑣，結(jié)結(jié)構(gòu)松散散，所以以推出了了XHTML。。也可以以說，XHTML是HTML的一個個升級版版本。XHTML語言的核核心是標(biāo)標(biāo)簽（或或者稱為為標(biāo)記））。也就就是說，，我們在在瀏覽網(wǎng)網(wǎng)頁時看看到的文文字、圖圖像、動動畫等在在XHTML文檔中都都是用標(biāo)標(biāo)簽來描描述的。。4．網(wǎng)站站建設(shè)流流程網(wǎng)站建設(shè)設(shè)流程是是指從企企業(yè)計劃劃建設(shè)網(wǎng)網(wǎng)站到網(wǎng)網(wǎng)站建設(shè)設(shè)完成的的一套規(guī)規(guī)范化運運作過程程。（三）初初識DreamweaverCS51．啟動DreamweaverCS5安裝DreamweaverCS5后，單擊擊桌面左左下角的的“開始始”按鈕鈕，選選擇“所所有程序序”>“AdobeDreamweaverCS5”，就可以以啟動DreamweaverCS5了。2．DreamweaverCS5界面面元素簡簡介DreamweaverCS5的工作界界面由應(yīng)應(yīng)用程序序欄、文文檔標(biāo)簽簽、文檔檔工具欄欄、文檔檔窗口、、標(biāo)簽選選擇器、、狀態(tài)欄欄、屬性性檢查器器和面板板組等組組成。（1）應(yīng)用程程序欄應(yīng)用程序序欄位于于工作區(qū)區(qū)頂部，，左側(cè)顯顯示菜單單欄，右右側(cè)包含含工作區(qū)區(qū)切換器器、“CSLive”按鈕和程程序窗口口控制按按鈕。（2）文檔標(biāo)標(biāo)簽欄文檔標(biāo)簽簽欄位于于應(yīng)用程程序欄下下方，左左側(cè)顯示示當(dāng)前打打開的所所有網(wǎng)頁頁文檔的的名稱及及其關(guān)閉閉按鈕（（標(biāo)簽））；右側(cè)側(cè)顯示當(dāng)當(dāng)前文檔檔在本地地磁盤中中的保存存路徑以以及向下下還原按按鈕；下下方顯示示當(dāng)前文文檔中的的包含文文檔以及及鏈接文文檔。當(dāng)當(dāng)用戶打打開多個個網(wǎng)頁時時，通過過單擊文文檔標(biāo)簽簽可在各各網(wǎng)頁之之間切換換。另外外，單擊擊下方的的包含文文檔或鏈鏈接文檔檔，可打打開相應(yīng)應(yīng)文檔。。（3）文檔檔工具具欄文檔工工具欄欄位于于文檔檔標(biāo)簽簽下方方，包包括各各種可可對文文檔進進行操操作的的按鈕鈕。（4）狀態(tài)態(tài)欄狀態(tài)欄欄位于于文檔檔窗口口底部部，它它提供供了與與當(dāng)前前文檔檔相關(guān)關(guān)的一一些信信息。。（5）屬性性檢查查器使用““屬性性檢查查器””可以以檢查查和設(shè)設(shè)置當(dāng)當(dāng)前選選定頁頁面元元素（（如文文本和和插入入對象象）的的最常常用屬屬性。?！皩賹傩詸z檢查器器”中中的內(nèi)內(nèi)容會會根據(jù)據(jù)選定定元素素的變變化而而變化化。（6）面板板組默認狀狀態(tài)下下，面面板組組位于于文檔檔窗口口右側(cè)側(cè)。面面板組組中包包含各各種類類型的的面板板，Dreamweaver中的大大部分分操作作都需需要利利用面面板來來實現(xiàn)現(xiàn)。其其中最最常用用的有有“插插入””面板板、““文件件”面面板和和“CSS樣式””面板板，后后面將將陸續(xù)續(xù)用到到。（四））在Dreamweaver中定義義和管管理網(wǎng)網(wǎng)站1．定義義網(wǎng)站站定義網(wǎng)網(wǎng)站的的目的的是把把本地地磁盤盤中的的站點點文件件夾同同Dreamweaver建立一一定的的關(guān)聯(lián)聯(lián)，從從而方方便用用戶使使用Dreamweaver管理站站點和和編輯輯站點點中的的網(wǎng)頁頁文檔檔，以以及上上傳或或下載載站點點內(nèi)容容等。。2．管理理網(wǎng)站站定義站站點后后，如如果需需要修修改站站點屬屬性、、復(fù)制制或刪刪除站站點等等，可可執(zhí)行行下面面的操操作。。（五））網(wǎng)頁頁文檔檔基本本操作作1．網(wǎng)頁頁文檔檔和文文件夾夾命名名規(guī)則則靜態(tài)的的首頁頁文件件一般般命名名為““index.html””。不要使使用中中文命命名網(wǎng)網(wǎng)站中中的文文件和和文件件夾。。文件名名中不不要使使用大大寫英英文字字母。。運算符符符號號不能能用在在文件件名的的開頭頭。比較長長的文文件名名可以以使用用下劃劃線““_”來隔開開多個個單詞詞或關(guān)關(guān)鍵字字。在大型型網(wǎng)站站中，，分支支頁面面的文文件應(yīng)應(yīng)存放放在單單獨的的文件件夾中中。在動態(tài)態(tài)網(wǎng)站站中，，用來來存放放數(shù)據(jù)據(jù)庫的的文件件夾一一般命命名為為“data””或者““database””。2．新建建和保保存網(wǎng)網(wǎng)頁文文檔在DreamweaverCS5中可以以創(chuàng)建建兩種種格式式的網(wǎng)網(wǎng)頁文文檔，，一種種是直直接創(chuàng)創(chuàng)建空空白網(wǎng)網(wǎng)頁文文檔，，另一一種是是通過過DreamweaverCS5內(nèi)置的的模板板文檔檔創(chuàng)建建具有有一定定內(nèi)容容和樣樣式的的網(wǎng)頁頁文檔檔。3．打開開、預(yù)預(yù)覽和和關(guān)閉閉網(wǎng)頁頁文檔檔若要對對已有有的文文檔進進行編編輯，，就需需要在在Dreamweaver中打開開該文文檔。。另外外，在在Dreamweaver中打開開網(wǎng)頁頁文檔檔并執(zhí)執(zhí)行相相應(yīng)操操作后后，如如果想想查看看它在在瀏覽覽器中中的效效果，，可執(zhí)執(zhí)行預(yù)預(yù)覽操操作。。4、利用用“文文件””面板板管理理站點點文件件和文文件夾夾一般在在定義義站點點后，，都會會利用用“文文件””面板板來創(chuàng)創(chuàng)建、、重命命名或或打開開站點點中的的網(wǎng)頁頁文檔檔和文文件夾夾。三、任任務(wù)實實踐任務(wù)一一夕夕照照臺網(wǎng)網(wǎng)站的的建設(shè)設(shè)流程程本任務(wù)務(wù)中，，我們們將以以夕照照臺房房產(chǎn)網(wǎng)網(wǎng)站為為例，，學(xué)習(xí)習(xí)一般般網(wǎng)站站的建建設(shè)流流程。。收集網(wǎng)網(wǎng)站建建設(shè)需需求及及素材材。制作網(wǎng)網(wǎng)站策策劃書書。網(wǎng)頁美美術(shù)設(shè)設(shè)計。。美術(shù)與與程序序整合合。測