《網(wǎng)頁(yè)設(shè)計(jì)與制作（第2版）》第2章 Dreamweaver基礎(chǔ)

現(xiàn)在互聯(lián)網(wǎng)上各種類型的網(wǎng)站應(yīng)有盡有，掌握一門(mén)網(wǎng)站建設(shè)和網(wǎng)頁(yè)制作工具，對(duì)網(wǎng)頁(yè)制作愛(ài)好者來(lái)說(shuō)是非常必要的。本章將介紹DreamweaverCS6的基礎(chǔ)知識(shí)，為后續(xù)DreamweaverCS6的深入學(xué)習(xí)打下堅(jiān)實(shí)基礎(chǔ)。第2章Dreamweaver基礎(chǔ)學(xué)習(xí)目標(biāo)了解DreamweaverCS6的工作界面。掌握設(shè)置DreamweaverCS6首選參數(shù)的方法。掌握在DreamweaverCS6中創(chuàng)建和管理站點(diǎn)的方法。掌握在站點(diǎn)中創(chuàng)建文件夾和文件的方法。掌握在網(wǎng)頁(yè)中使用常見(jiàn)文件頭標(biāo)簽的方法。2.1

認(rèn)識(shí)工作界面2.1.1歡迎屏幕2.1.2

文檔窗口2.1.3工作區(qū)布局2.1.4

常用工具欄2.1.5常用面板2.1.1歡迎屏幕當(dāng)啟動(dòng)DreamweaverCS6后通常會(huì)顯示歡迎屏幕，如果希望以后啟動(dòng)DreamweaverCS6時(shí)不再顯示歡迎屏幕，勾選底部的【不再顯示】復(fù)選框即可。

2.1.2

文檔窗口文檔窗口主要是用來(lái)顯示和編輯當(dāng)前的文檔頁(yè)面，通常有【代碼】、【拆分】、【設(shè)計(jì)】和【實(shí)時(shí)視圖】4種視圖模式。2.1.2

文檔窗口【拆分】視圖可以將文檔窗口拆分為【代碼】視圖和【設(shè)計(jì)】視圖兩種模式，讀者既可以可視化操作，又可以隨時(shí)查看源代碼。2.1.3工作區(qū)布局

DreamweaverCS6的文檔窗口有多種布局模式，可以通過(guò)選擇【窗口】/【工作區(qū)布局】中的相應(yīng)菜單命令來(lái)更換DreamweaverCS6的工作區(qū)布局。

2.1.4

常用工具欄一、【文檔】工具欄2.1.4

常用工具欄2.1.4

常用工具欄二、【標(biāo)準(zhǔn)】工具欄在默認(rèn)情況下，【標(biāo)準(zhǔn)】工具欄是不顯示的，可以選擇菜單命令【查看】／【工具欄】／【標(biāo)準(zhǔn)】來(lái)顯示。2.1.5

常用面板一、面板組2.1.5

常用面板二、【文件】面板通過(guò)【文件】面板可以在站點(diǎn)中創(chuàng)建、打開(kāi)、重命名或刪除文件夾和文件，也可以上傳和下載文件?？梢哉f(shuō)，【文件】面板是站點(diǎn)管理器的縮略圖。2.1.5

常用面板二、【屬性】面板通過(guò)【屬性】面板可以設(shè)置和修改所選對(duì)象的屬性。選擇的對(duì)象不同，【屬性】面板顯示的參數(shù)也不同。文本【屬性】面板還提供了【HTML】和【CSS】?jī)煞N類型的屬性設(shè)置。2.1.5

常用面板二、【插入】面板插入】面板中的按鈕分為常用、布局、表單、數(shù)據(jù)等類別，單擊相應(yīng)的類別名，將在面板中顯示相應(yīng)類別的對(duì)象按鈕。2.2設(shè)置首選參數(shù)2.2.1【常規(guī)】分類

2.2.2【不可見(jiàn)元素】分類

2.2.3【復(fù)制/粘貼】分類

2.2.4

【新建文檔】分類

2.2.1【常規(guī)】分類在【首選參數(shù)】對(duì)話框的【常規(guī)】分類中可以定義【文檔選項(xiàng)】和【編輯選項(xiàng)】?jī)刹糠謨?nèi)容。2.2.2【不可見(jiàn)元素】分類在【不可見(jiàn)元素】分類中可以定義不可見(jiàn)元素是否顯示，在選擇【不可見(jiàn)元素】分類后，還要確認(rèn)菜單欄中的【查看】/【可視化助理】/【不可見(jiàn)元素】命令已經(jīng)選擇。2.2.3【復(fù)制/粘貼】分類在【復(fù)制/粘貼】分類中，可以定義粘貼到文檔中的文本格式。2.2.4【新建文檔】分類在【不可見(jiàn)元素】分類中可以定義不可見(jiàn)元素是否顯示，在選擇【不可見(jiàn)元素】分類后，還要確認(rèn)菜單欄中的【查看】/【可視化助理】/【不可見(jiàn)元素】命令已經(jīng)選擇。2.3

創(chuàng)建站點(diǎn)2.3.1教學(xué)案例━━創(chuàng)建站點(diǎn)“夢(mèng)想”2.3.2定義Dreamweaver站點(diǎn)2.3.3創(chuàng)建文件夾和文件2.3.1

教學(xué)案例━━創(chuàng)建站點(diǎn)“夢(mèng)想”創(chuàng)建一個(gè)本地站點(diǎn)，站點(diǎn)名稱為“夢(mèng)想”，指向本地文件夾“D:\mengxiang”，然后在站點(diǎn)中創(chuàng)建文件夾“images”，在根文件夾下創(chuàng)建網(wǎng)頁(yè)文件，并保存為“index.htm”。2.3.2

定義Dreamweaver站點(diǎn)在DreamweaverCS6中，新建Dreamweaver站點(diǎn)的方法是：選擇菜單命令【站點(diǎn)】/【新建站點(diǎn)】，在打開(kāi)的對(duì)話框中，輸入站點(diǎn)名稱，并設(shè)置好本地站點(diǎn)文件夾即可。如果現(xiàn)在不需要?jiǎng)?chuàng)建動(dòng)態(tài)網(wǎng)頁(yè)文件或不需要將網(wǎng)頁(yè)文件發(fā)布到遠(yuǎn)程站點(diǎn)上，可以暫時(shí)不設(shè)置【服務(wù)器】選項(xiàng)，在需要時(shí)再行設(shè)置即可。2.3.3

創(chuàng)建文件夾和文件在【文件】面板中創(chuàng)建文件夾和文件最簡(jiǎn)便的方法是：用鼠標(biāo)右鍵單擊根文件夾或其他文件夾，在彈出的快捷菜單中選擇【新建文件夾】或【新建文件】命令，然后輸入新的文件夾或文件名稱即可。也可單擊【文件】面板組標(biāo)題欄右側(cè)的按鈕，在彈出的菜單中選擇【文件】/【新建文件夾】或【新建文件】命令。2.4

管理站點(diǎn)2.4.1

編輯站點(diǎn)2.4.2

復(fù)制站點(diǎn)2.4.3

刪除站點(diǎn)2.4.4導(dǎo)出站點(diǎn)2.4.5導(dǎo)入站點(diǎn)2.4.6新建站點(diǎn)2.4.1編輯站點(diǎn)編輯站點(diǎn)是指對(duì)DreamweaverCS6中已經(jīng)存在的站點(diǎn)重新進(jìn)行設(shè)置。編輯站點(diǎn)的方法是，在菜單欄中選擇【站點(diǎn)】/【管理站點(diǎn)】命令，打開(kāi)【管理站點(diǎn)】對(duì)話框進(jìn)行設(shè)置即可。2.4.2

復(fù)制站點(diǎn)復(fù)制站點(diǎn)的方法是，在【管理站點(diǎn)】對(duì)話框中選中要復(fù)制的站點(diǎn)，然后單擊按鈕復(fù)制選定的站點(diǎn)，并顯示在【您的站點(diǎn)】列表框中，此時(shí)再對(duì)復(fù)制的站點(diǎn)進(jìn)行編輯即可。2.4.3 刪除站點(diǎn)在【管理站點(diǎn)】對(duì)話框中刪除站點(diǎn)僅僅是刪除了在DreamweaverCS6中定義的站點(diǎn)信息，存在磁盤(pán)上的相對(duì)應(yīng)的文件夾及其文件是仍然存在的。2.4.4 導(dǎo)出站點(diǎn)導(dǎo)出站點(diǎn)的方法是，在【管理站點(diǎn)】對(duì)話框中選中要導(dǎo)出的站點(diǎn)，然后單擊【導(dǎo)出站點(diǎn)】按鈕打開(kāi)【導(dǎo)出站點(diǎn)】對(duì)話框進(jìn)行設(shè)置即可。2.4.5 導(dǎo)入站點(diǎn)導(dǎo)入站點(diǎn)的方法是，在【管理站點(diǎn)】對(duì)話框中單擊【導(dǎo)入站點(diǎn)】按鈕，打開(kāi)【導(dǎo)入站點(diǎn)】對(duì)話框，選中要導(dǎo)入的站點(diǎn)文件，單擊【打開(kāi)】按鈕導(dǎo)入即可。2.4.6 新建站點(diǎn)在【管理站點(diǎn)】對(duì)話框中單擊】/【新建站點(diǎn)】按鈕可以打開(kāi)對(duì)話框新建站點(diǎn)，這與菜單命令【站點(diǎn)】/【新建站點(diǎn)】的作用是相同的。2.5

插入文件頭標(biāo)簽2.5.1

Meta2.5.2

關(guān)鍵字2.5.3說(shuō)明2.5.4刷新2.5.1MetaMeta標(biāo)簽用于提供網(wǎng)頁(yè)的說(shuō)明信息，例如字符編碼、作者、版權(quán)信息或關(guān)鍵字，也可以用來(lái)向服務(wù)器提供信息，例如頁(yè)面的失效日期、刷新間隔等。在文件頭部可包含多個(gè)Meta標(biāo)簽，書(shū)寫(xiě)順序可以任意。添加Meta標(biāo)簽的方法是，選擇菜單命令【插入】/【HTML】/【文件頭標(biāo)簽】/【Meta】，打開(kāi)【META】對(duì)話框，進(jìn)行相應(yīng)的參數(shù)設(shè)置即可。2.5.1Meta設(shè)置網(wǎng)頁(yè)的制作者信息設(shè)置網(wǎng)頁(yè)使用的字符集2.5.1Meta禁止瀏覽器從本地緩存中調(diào)閱頁(yè)面指定顯示頁(yè)面的瀏覽器窗口2.5.2 關(guān)鍵字設(shè)置網(wǎng)頁(yè)關(guān)鍵字的方法是：選擇菜單命令【插入】/【HTML】/【文件頭標(biāo)簽】/【關(guān)鍵字】，打開(kāi)【關(guān)鍵字】對(duì)話框，輸入關(guān)鍵字即可。2.5.3 說(shuō)明在Dreamweaver中，除了可以使用上面介紹的META對(duì)話框設(shè)置網(wǎng)頁(yè)的關(guān)鍵字外，還可以直接使用【插入】/【HTML】/【文件頭標(biāo)簽】/【說(shuō)明】命令，打開(kāi)【說(shuō)明】對(duì)話框輸入說(shuō)明性文本。2.5.4 刷新定時(shí)刷新網(wǎng)頁(yè)功能也是經(jīng)常用到的。設(shè)置方法是：選擇菜單命令【插入】/【HTML】/【文件頭標(biāo)簽】/【刷新】，打開(kāi)【刷新】對(duì)話框，進(jìn)行參數(shù)設(shè)置即可。2.6

編輯文件頭標(biāo)簽2.6.1

通過(guò)源代碼2.6.2通過(guò)【