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

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

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

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