教學(xué)課件-網(wǎng)站建設(shè)項(xiàng)目二

項(xiàng)目二創(chuàng)建房地產(chǎn)網(wǎng)站創(chuàng)建本地站點(diǎn)創(chuàng)建網(wǎng)站首頁(yè)創(chuàng)建網(wǎng)站子頁(yè)延伸閱讀項(xiàng)目二創(chuàng)建房地產(chǎn)網(wǎng)站創(chuàng)建本地站點(diǎn)1模塊一創(chuàng)建本地站點(diǎn)一、啟動(dòng)Dreamweaver8第一次啟動(dòng)Dreamweaver8，可單擊“開(kāi)始”按鈕，選擇“所有程序”>“Macromedia”>“MacromediaDreamweaver8”。

稍等片刻，顯示Dreamweaver8起始頁(yè)。單擊可打開(kāi)文檔單擊可創(chuàng)建相應(yīng)類(lèi)型的文檔模塊一創(chuàng)建本地站點(diǎn)一、啟動(dòng)Dreamweaver82二、認(rèn)識(shí)Dreamweaver8操作界面在起始頁(yè)的“創(chuàng)建新項(xiàng)目”列中單擊第一項(xiàng)“HTML”后，將會(huì)創(chuàng)建一個(gè)“.html”格式的新文檔，并進(jìn)入Dreamweaver8操作界面。二、認(rèn)識(shí)Dreamweaver8操作界面在起始頁(yè)的“3教學(xué)課件-網(wǎng)站建設(shè)項(xiàng)目二41．標(biāo)題欄和菜單欄標(biāo)題欄上顯示軟件名稱(chēng)、文檔標(biāo)題和程序窗口控制按鈕（最小化、最大化和關(guān)閉窗口）?！安藛螜凇敝袔缀跫辛薉reamweaver８的全部操作命令，利用這些命令可以編輯網(wǎng)頁(yè)、管理站點(diǎn)以及設(shè)置操作界面等。要打開(kāi)某項(xiàng)主菜單，只需用鼠標(biāo)單擊該菜單項(xiàng)即可。1．標(biāo)題欄和菜單欄標(biāo)題欄上顯示軟件名稱(chēng)、文檔標(biāo)題和程序窗口52．插入欄插入欄包含各種類(lèi)型的對(duì)象按鈕（如圖像、表格和層等），通過(guò)單擊這些按鈕，可將相應(yīng)的對(duì)象插入到文檔中。在不同的插入欄之間切換單擊小三角符號(hào)打開(kāi)同位按鈕組2．插入欄插入欄包含各種類(lèi)型的對(duì)象按鈕（如圖像、表格和63．文檔標(biāo)簽文檔標(biāo)簽顯示了當(dāng)前打開(kāi)的所有網(wǎng)頁(yè)文檔的名稱(chēng)。當(dāng)用戶(hù)打開(kāi)多個(gè)網(wǎng)頁(yè)時(shí)，通過(guò)單擊文檔標(biāo)簽可在各網(wǎng)頁(yè)之間切換。如果文檔名后帶有“*”號(hào)，表示網(wǎng)頁(yè)已修改但未保存。3．文檔標(biāo)簽文檔標(biāo)簽顯示了當(dāng)前打開(kāi)的所有網(wǎng)頁(yè)文檔的名稱(chēng)74．文檔工具欄文檔工具欄中包括可對(duì)文檔進(jìn)行操作的按鈕。4．文檔工具欄文檔工具欄中包括可對(duì)文檔進(jìn)行操作的按鈕。85．狀態(tài)欄狀態(tài)欄位于文檔窗口底部，它提供了與當(dāng)前文檔相關(guān)的一些信息。5．狀態(tài)欄狀態(tài)欄位于文檔窗口底部，它提供了與當(dāng)前文檔相96．浮動(dòng)面板在Dreamweaver中，大多數(shù)操作都是通過(guò)面板實(shí)現(xiàn)的。屬性面板位于文檔窗口的下方，主要用于查看或編輯所選對(duì)象的屬性。除屬性面板外，Dreamweaver8還為用戶(hù)提供了眾多面板，如“文件”面板、“歷史記錄”面板等。為便于管理，Dreamweaver8將這些面板歸入到不同的面板組中。6．浮動(dòng)面板在Dreamweaver中，大多數(shù)操作都是10三、創(chuàng)建站點(diǎn)“house”除文本外，網(wǎng)頁(yè)中還可以包含圖像、動(dòng)畫(huà)、音樂(lè)和視頻文件等，Dreamweaver8是通過(guò)插入或鏈接這些文件來(lái)完成網(wǎng)頁(yè)制作的。將網(wǎng)頁(yè)中用到的這些文件保存到指定的文件夾中（我們稱(chēng)該文件夾為站點(diǎn)文件夾），然后在Dreamweaver8中將該文件夾指定為本地站點(diǎn)，則管理操作將變得非常方便。本節(jié)講述站點(diǎn)的創(chuàng)建（具體操作見(jiàn)視頻2-1）。三、創(chuàng)建站點(diǎn)“house”除文本外，網(wǎng)頁(yè)中還可以包含圖11模塊二創(chuàng)建網(wǎng)站首頁(yè)一、利用文件面板新建文檔Dreamweaver中的文檔也就是網(wǎng)頁(yè)，可以使用菜單新建文檔，也可以在“文件”面板中新建文檔，本節(jié)以在“文件”面板中創(chuàng)建網(wǎng)頁(yè)為例來(lái)說(shuō)明新建文檔的方法（具體操作見(jiàn)視頻2-2）。模塊二創(chuàng)建網(wǎng)站首頁(yè)一、利用文件面板新建文檔Dream12二、設(shè)置基本頁(yè)面屬性新建文檔后，一般要先設(shè)置網(wǎng)頁(yè)的頁(yè)面屬性，然后再進(jìn)行其他操作。頁(yè)面屬性主要包括網(wǎng)頁(yè)標(biāo)題、邊距、背景顏色和文本顏色等（具體操作見(jiàn)視頻2-3）。二、設(shè)置基本頁(yè)面屬性新建文檔后，一般要先設(shè)置網(wǎng)頁(yè)的頁(yè)面13三、在網(wǎng)頁(yè)中插入圖片目前，網(wǎng)頁(yè)中常用的圖像文件有JPEG、GIF和PNG三種格式。在Dreamweaver中插入圖像的方法非常簡(jiǎn)單，在確定圖像插入點(diǎn)后，單擊“常用”插入面板中的“圖像”按鈕，然后在打開(kāi)的對(duì)話框中選擇要插入的圖像就可以了（具體操作見(jiàn)視頻2-4）。三、在網(wǎng)頁(yè)中插入圖片目前，網(wǎng)頁(yè)中常用的圖像文件有JPE14模塊三創(chuàng)建網(wǎng)站子頁(yè)一、用菜單新建并保存文檔與在“文件”面板中創(chuàng)建文檔所不同的是，使用菜單創(chuàng)建的文檔必須先保存到站點(diǎn)中，才能進(jìn)行編輯（具體操作見(jiàn)視頻2-5）。模塊三創(chuàng)建網(wǎng)站子頁(yè)一、用菜單新建并保存文檔與在“文件15二、設(shè)置文本、圖像等網(wǎng)頁(yè)內(nèi)容在Dreamweaver中可以通過(guò)設(shè)置文本的字體、字號(hào)、顏色、字符間距與行距等屬性來(lái)區(qū)別不同的文本。輸入文本的方法非常簡(jiǎn)單，只要將光標(biāo)定位在網(wǎng)頁(yè)的某個(gè)位置，然后輸入文字就可以了（具體操作見(jiàn)視頻2-6）。二、設(shè)置文本、圖像等網(wǎng)頁(yè)內(nèi)容在Dreamweaver中16三、設(shè)置鏈接“鏈接”是網(wǎng)站中最重要的組成部分，它指向的是我們要訪問(wèn)的目標(biāo)文檔或其他元素，從而使我們可以從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面，或執(zhí)行其他操作。在Dreamweaver中可以為文本和圖片設(shè)置鏈接。本節(jié)通過(guò)為一張圖片設(shè)置多個(gè)鏈接，來(lái)講述熱點(diǎn)的應(yīng)用（具體操作見(jiàn)視頻2-7）。三、設(shè)置鏈接“鏈接”是網(wǎng)站中最重要的組成部分，它指向的17延伸閱讀一、設(shè)置站點(diǎn)遠(yuǎn)程信息在申請(qǐng)?zhí)摂M空間時(shí)，服務(wù)商會(huì)為我們提供登陸虛擬空間使用的IP地址、登錄帳戶(hù)名稱(chēng)和密碼。我們必須把這些信息設(shè)置到Dreamweaver對(duì)應(yīng)的站點(diǎn)中，才能與服務(wù)器建立連接（設(shè)置的具體操作見(jiàn)視頻2-8）。延伸閱讀一、設(shè)置站點(diǎn)遠(yuǎn)程信息在申請(qǐng)?zhí)摂M空間時(shí)，服務(wù)商會(huì)為18二、網(wǎng)頁(yè)文件命名規(guī)則最好不要使用中文命名文件。文件名中不要使用大寫(xiě)英文字母。運(yùn)算符符號(hào)不能用在文件名的開(kāi)頭。比較長(zhǎng)的文件名可以使用下劃線“_”來(lái)隔開(kāi)多個(gè)單詞或關(guān)鍵字。在大型網(wǎng)站中，分支頁(yè)面的文件應(yīng)存放在單獨(dú)的文件夾中。在動(dòng)態(tài)網(wǎng)站中，存放數(shù)據(jù)庫(kù)的文件夾一般命名為“data”或者“database”。二、網(wǎng)頁(yè)文件命名規(guī)則最好不要使用中文命名文件。19三、網(wǎng)頁(yè)中的圖片不顯示一般情況下，網(wǎng)頁(yè)中的圖像不可見(jiàn)，是因?yàn)槁窂皆O(shè)定有誤或圖像文件名稱(chēng)輸入有誤。如要確認(rèn)圖像文件的路徑，可在選定圖像后，在屬性面板中查看顯示圖像文件路徑的“源文件”文本框。要確認(rèn)該文本框中顯示的路徑同圖像文件的實(shí)際路徑相同。另外，實(shí)際的圖像文件名稱(chēng)與路徑中的圖像文件名稱(chēng)也必須相同，因此要仔細(xì)查看是否正確輸入了大小寫(xiě)字母。三、網(wǎng)頁(yè)中的圖片不顯示一般情況下，網(wǎng)頁(yè)中的圖像不可見(jiàn)，20四、其他鏈接類(lèi)型1．外部鏈接外部鏈接是可以跳轉(zhuǎn)到其他網(wǎng)站的鏈接，此類(lèi)鏈接的設(shè)置方法一般只有一種。首先選中要設(shè)置鏈接的對(duì)象，然后在屬性面板的“鏈接”文本框中輸入要鏈接到的網(wǎng)址。四、其他鏈接類(lèi)型1．外部鏈接外部鏈接是可以跳轉(zhuǎn)到其他網(wǎng)站的212．圖片鏈接和下載鏈接我們?cè)谏暇W(wǎng)時(shí)經(jīng)常會(huì)碰到圖片鏈接和下載鏈接，設(shè)置這類(lèi)鏈接的方法非常簡(jiǎn)單，選中要設(shè)置為鏈接的文字或圖片后，只要在屬性面板的“鏈接”編輯框中將鏈接目標(biāo)設(shè)置為圖像文件或壓縮文件就可以了。2．圖片鏈接和下載鏈接我們?cè)谏暇W(wǎng)時(shí)經(jīng)常會(huì)碰到圖片鏈接和223．電子郵件鏈接有些網(wǎng)站上留有電子郵件地址，單擊該地址可打開(kāi)“OutlookExpress”的“新郵件”窗口。這是一種特殊類(lèi)型的鏈接，又叫電子郵件鏈接。選中文本或圖片后，在屬性面板上“鏈接”文本框中輸入“mailto:電子郵件地址”即可。3．電子郵件鏈接有些網(wǎng)站上留有電子郵件地址，單擊該地址23項(xiàng)目二創(chuàng)建房地產(chǎn)網(wǎng)站創(chuàng)建本地站點(diǎn)創(chuàng)建網(wǎng)站首頁(yè)創(chuàng)建網(wǎng)站子頁(yè)延伸閱讀項(xiàng)目二創(chuàng)建房地產(chǎn)網(wǎng)站創(chuàng)建本地站點(diǎn)24模塊一創(chuàng)建本地站點(diǎn)一、啟動(dòng)Dreamweaver8第一次啟動(dòng)Dreamweaver8，可單擊“開(kāi)始”按鈕，選擇“所有程序”>“Macromedia”>“MacromediaDreamweaver8”。

稍等片刻，顯示Dreamweaver8起始頁(yè)。單擊可打開(kāi)文檔單擊可創(chuàng)建相應(yīng)類(lèi)型的文檔模塊一創(chuàng)建本地站點(diǎn)一、啟動(dòng)Dreamweaver825二、認(rèn)識(shí)Dreamweaver8操作界面在起始頁(yè)的“創(chuàng)建新項(xiàng)目”列中單擊第一項(xiàng)“HTML”后，將會(huì)創(chuàng)建一個(gè)“.html”格式的新文檔，并進(jìn)入Dreamweaver8操作界面。二、認(rèn)識(shí)Dreamweaver8操作界面在起始頁(yè)的“26教學(xué)課件-網(wǎng)站建設(shè)項(xiàng)目二271．標(biāo)題欄和菜單欄標(biāo)題欄上顯示軟件名稱(chēng)、文檔標(biāo)題和程序窗口控制按鈕（最小化、最大化和關(guān)閉窗口）。“菜單欄”中幾乎集中了Dreamweaver８的全部操作命令，利用這些命令可以編輯網(wǎng)頁(yè)、管理站點(diǎn)以及設(shè)置操作界面等。要打開(kāi)某項(xiàng)主菜單，只需用鼠標(biāo)單擊該菜單項(xiàng)即可。1．標(biāo)題欄和菜單欄標(biāo)題欄上顯示軟件名稱(chēng)、文檔標(biāo)題和程序窗口282．插入欄插入欄包含各種類(lèi)型的對(duì)象按鈕（如圖像、表格和層等），通過(guò)單擊這些按鈕，可將相應(yīng)的對(duì)象插入到文檔中。在不同的插入欄之間切換單擊小三角符號(hào)打開(kāi)同位按鈕組2．插入欄插入欄包含各種類(lèi)型的對(duì)象按鈕（如圖像、表格和293．文檔標(biāo)簽文檔標(biāo)簽顯示了當(dāng)前打開(kāi)的所有網(wǎng)頁(yè)文檔的名稱(chēng)。當(dāng)用戶(hù)打開(kāi)多個(gè)網(wǎng)頁(yè)時(shí)，通過(guò)單擊文檔標(biāo)簽可在各網(wǎng)頁(yè)之間切換。如果文檔名后帶有“*”號(hào)，表示網(wǎng)頁(yè)已修改但未保存。3．文檔標(biāo)簽文檔標(biāo)簽顯示了當(dāng)前打開(kāi)的所有網(wǎng)頁(yè)文檔的名稱(chēng)304．文檔工具欄文檔工具欄中包括可對(duì)文檔進(jìn)行操作的按鈕。4．文檔工具欄文檔工具欄中包括可對(duì)文檔進(jìn)行操作的按鈕。315．狀態(tài)欄狀態(tài)欄位于文檔窗口底部，它提供了與當(dāng)前文檔相關(guān)的一些信息。5．狀態(tài)欄狀態(tài)欄位于文檔窗口底部，它提供了與當(dāng)前文檔相326．浮動(dòng)面板在Dreamweaver中，大多數(shù)操作都是通過(guò)面板實(shí)現(xiàn)的。屬性面板位于文檔窗口的下方，主要用于查看或編輯所選對(duì)象的屬性。除屬性面板外，Dreamweaver8還為用戶(hù)提供了眾多面板，如“文件”面板、“歷史記錄”面板等。為便于管理，Dreamweaver8將這些面板歸入到不同的面板組中。6．浮動(dòng)面板在Dreamweaver中，大多數(shù)操作都是33三、創(chuàng)建站點(diǎn)“house”除文本外，網(wǎng)頁(yè)中還可以包含圖像、動(dòng)畫(huà)、音樂(lè)和視頻文件等，Dreamweaver8是通過(guò)插入或鏈接這些文件來(lái)完成網(wǎng)頁(yè)制作的。將網(wǎng)頁(yè)中用到的這些文件保存到指定的文件夾中（我們稱(chēng)該文件夾為站點(diǎn)文件夾），然后在Dreamweaver8中將該文件夾指定為本地站點(diǎn)，則管理操作將變得非常方便。本節(jié)講述站點(diǎn)的創(chuàng)建（具體操作見(jiàn)視頻2-1）。三、創(chuàng)建站點(diǎn)“house”除文本外，網(wǎng)頁(yè)中還可以包含圖34模塊二創(chuàng)建網(wǎng)站首頁(yè)一、利用文件面板新建文檔Dreamweaver中的文檔也就是網(wǎng)頁(yè)，可以使用菜單新建文檔，也可以在“文件”面板中新建文檔，本節(jié)以在“文件”面板中創(chuàng)建網(wǎng)頁(yè)為例來(lái)說(shuō)明新建文檔的方法（具體操作見(jiàn)視頻2-2）。模塊二創(chuàng)建網(wǎng)站首頁(yè)一、利用文件面板新建文檔Dream35二、設(shè)置基本頁(yè)面屬性新建文檔后，一般要先設(shè)置網(wǎng)頁(yè)的頁(yè)面屬性，然后再進(jìn)行其他操作。頁(yè)面屬性主要包括網(wǎng)頁(yè)標(biāo)題、邊距、背景顏色和文本顏色等（具體操作見(jiàn)視頻2-3）。二、設(shè)置基本頁(yè)面屬性新建文檔后，一般要先設(shè)置網(wǎng)頁(yè)的頁(yè)面36三、在網(wǎng)頁(yè)中插入圖片目前，網(wǎng)頁(yè)中常用的圖像文件有JPEG、GIF和PNG三種格式。在Dreamweaver中插入圖像的方法非常簡(jiǎn)單，在確定圖像插入點(diǎn)后，單擊“常用”插入面板中的“圖像”按鈕，然后在打開(kāi)的對(duì)話框中選擇要插入的圖像就可以了（具體操作見(jiàn)視頻2-4）。三、在網(wǎng)頁(yè)中插入圖片目前，網(wǎng)頁(yè)中常用的圖像文件有JPE37模塊三創(chuàng)建網(wǎng)站子頁(yè)一、用菜單新建并保存文檔與在“文件”面板中創(chuàng)建文檔所不同的是，使用菜單創(chuàng)建的文檔必須先保存到站點(diǎn)中，才能進(jìn)行編輯（具體操作見(jiàn)視頻2-5）。模塊三創(chuàng)建網(wǎng)站子頁(yè)一、用菜單新建并保存文檔與在“文件38二、設(shè)置文本、圖像等網(wǎng)頁(yè)內(nèi)容在Dreamweaver中可以通過(guò)設(shè)置文本的字體、字號(hào)、顏色、字符間距與行距等屬性來(lái)區(qū)別不同的文本。輸入文本的方法非常簡(jiǎn)單，只要將光標(biāo)定位在網(wǎng)頁(yè)的某個(gè)位置，然后輸入文字就可以了（具體操作見(jiàn)視頻2-6）。二、設(shè)置文本、圖像等網(wǎng)頁(yè)內(nèi)容在Dreamweaver中39三、設(shè)置鏈接“鏈接”是網(wǎng)站中最重要的組成部分，它指向的是我們要訪問(wèn)的目標(biāo)文檔或其他元素，從而使我們可以從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面，或執(zhí)行其他操作。在Dreamweaver中可以為文本和圖片設(shè)置鏈接。本節(jié)通過(guò)為一張圖片設(shè)置多個(gè)鏈接，來(lái)講述熱點(diǎn)的應(yīng)用（具體操作見(jiàn)視頻2-7）。三、設(shè)置鏈接“鏈接”是網(wǎng)站中最重要的組成部分，它指向的40延伸閱讀一、設(shè)置站點(diǎn)遠(yuǎn)程信息在申請(qǐng)?zhí)摂M空間時(shí)，服務(wù)商會(huì)為我們提供登陸虛擬空間使用的IP地址、登錄帳戶(hù)名稱(chēng)和密碼。我們必須把這些信息設(shè)置到Dreamweaver對(duì)應(yīng)的站點(diǎn)中，才能與服務(wù)器建立連接（設(shè)置的具體操作見(jiàn)視頻2-8）。延伸閱讀一、設(shè)置站點(diǎn)遠(yuǎn)程信息在申請(qǐng)?zhí)摂M空間時(shí)，服務(wù)商會(huì)為41二、網(wǎng)頁(yè)文件命名規(guī)則最好不要使用中文命名文件。文件名中不要使用大寫(xiě)英文字母。運(yùn)算符符號(hào)不能用在文件名的開(kāi)頭。比較長(zhǎng)的文件名可以使用下劃線“_”來(lái)隔開(kāi)多個(gè)單詞或關(guān)鍵字。在大型網(wǎng)站中，分支頁(yè)面的文件應(yīng)存放在單獨(dú)的文件夾中。在動(dòng)態(tài)網(wǎng)站中，存放數(shù)據(jù)庫(kù)的文件夾一般命名為“data”或者“database”。二、網(wǎng)頁(yè)文件