Dreamweaver cs5 網(wǎng)頁(yè)制作教程ppt全冊(cè)

1、主講：主講：韓維良韓維良2022年年3月月網(wǎng)站建設(shè)網(wǎng)站建設(shè)第1章 Dreamweaver CS5 概述第一節(jié)第一節(jié) 認(rèn)識(shí)認(rèn)識(shí)Dreamweaver Dreamweaver Dreamweaver是由Macromedia公司推出的一款網(wǎng)頁(yè)制作軟件，它，用戶不必編寫(xiě)復(fù)雜的HTML源代碼就可以生成跨平臺(tái)、跨瀏覽器的網(wǎng)頁(yè)，不僅適合于專(zhuān)業(yè)網(wǎng)頁(yè)編輯人員的需要，同時(shí)也容易被業(yè)余網(wǎng)友們所掌握。 （安裝說(shuō)明）（安裝說(shuō)明）2022年3月6日星期日教育學(xué)院3網(wǎng)站建設(shè)網(wǎng)站建設(shè)第1章 Dreamweaver CS5 概述第二節(jié)第二節(jié) 熟悉熟悉DreamweaverCS5DreamweaverCS5主界面主界面當(dāng)啟動(dòng)Dr

2、eamweaver CS5，“開(kāi)始開(kāi)始”頁(yè)頁(yè)會(huì)出現(xiàn)在工作環(huán)境中。“開(kāi)始”頁(yè)使用戶可以快速訪問(wèn)Dreamweaver 教程、最近的打開(kāi)過(guò)的文件、創(chuàng)建新項(xiàng)目或定義新網(wǎng)站。若要禁用“開(kāi)始”頁(yè)，可在“開(kāi)始”頁(yè)打開(kāi)時(shí)選中“不再顯示”復(fù)選框。 網(wǎng)站建設(shè)網(wǎng)站建設(shè)第1章 Dreamweaver CS5 概述2022年3月6日星期日教育學(xué)院5創(chuàng)建新的文件或者Dreamweaver站點(diǎn)前往ADOBE功能介紹網(wǎng)站官方的重要信息教學(xué)網(wǎng)站與資源連接打開(kāi)最近編輯的文件是否禁用開(kāi)始項(xiàng)網(wǎng)站建設(shè)網(wǎng)站建設(shè)第1章 Dreamweaver CS5 概述2022年3月6日星期日教育學(xué)院6文檔工具欄文檔工具欄文檔窗口文檔窗口狀態(tài)欄狀態(tài)欄

3、屬性面板屬性面板菜單欄菜單欄應(yīng)用程序欄應(yīng)用程序欄工作區(qū)切換器工作區(qū)切換器插入面板插入面板文件面板文件面板網(wǎng)站建設(shè)網(wǎng)站建設(shè)第1章 Dreamweaver CS5 概述菜 單 欄菜 單 欄 ： 包 括 1 0 個(gè) 菜 單 ， 基 本 上 能 夠 實(shí) 現(xiàn)Dreamweaver的所有功能。應(yīng)用程序欄應(yīng)用程序欄：包含相應(yīng)的管理按鈕。文檔窗口文檔窗口：顯示當(dāng)前創(chuàng)建和編輯的網(wǎng)頁(yè)文檔，是用戶在Dreamweaver設(shè)計(jì)網(wǎng)頁(yè)的主要工作區(qū)。在該工作區(qū)中可以進(jìn)行輸入文字、插入圖片等多媒體資源、設(shè)置超鏈接等工作，也可以對(duì)整個(gè)頁(yè)面進(jìn)行處理。網(wǎng)站建設(shè)網(wǎng)站建設(shè)第1章 Dreamweaver CS5 概述文檔工具欄文檔工具欄

4、：包含3種文檔窗口視圖按鈕、各種查看選項(xiàng)和一些常用的操作。通過(guò)單擊這些按鈕可在文檔的不同視圖間進(jìn)行快速切換。代碼視圖代碼視圖代碼和設(shè)計(jì)視圖代碼和設(shè)計(jì)視圖設(shè)計(jì)視圖，可視設(shè)計(jì)視圖，可視化視圖化視圖文檔標(biāo)題文檔標(biāo)題刷新刷新選項(xiàng)選項(xiàng)可視化助理可視化助理檢查檢查預(yù)覽預(yù)覽文件管理文件管理網(wǎng)站建設(shè)網(wǎng)站建設(shè)第1章 Dreamweaver CS5 概述文檔代碼、拆分、設(shè)計(jì)視圖模式間的快速切換。文檔代碼、拆分、設(shè)計(jì)視圖模式間的快速切換。設(shè)計(jì)視圖設(shè)計(jì)視圖：一個(gè)用于可視化頁(yè)面布局、可視化編輯和快速應(yīng)用程序開(kāi)發(fā)的設(shè)計(jì)環(huán)境，類(lèi)似于在瀏覽器中查看頁(yè)面時(shí)看到的內(nèi)容?！八?jiàn)即所得”代碼視圖代碼視圖：一個(gè)用于編寫(xiě)和編輯HTML、

5、JavaScript、服務(wù)器語(yǔ)言（如PHP、ColdFusion標(biāo)記語(yǔ)言CFML)以及任何其他類(lèi)型語(yǔ)言的手工編碼環(huán)境。拆分視圖拆分視圖：又稱(chēng)代碼和設(shè)計(jì)視圖，可以在窗口中同時(shí)看到文檔的代碼視圖和設(shè)計(jì)視圖。網(wǎng)站建設(shè)網(wǎng)站建設(shè)第1章 Dreamweaver CS5 概述狀態(tài)欄狀態(tài)欄：位于文檔窗口底部，包括3個(gè)功能區(qū)：標(biāo)簽面板標(biāo)簽面板（又稱(chēng)為：標(biāo)簽選擇器，顯示和控制文檔當(dāng)前插入點(diǎn)位置的HTML源代碼標(biāo)簽，可查看網(wǎng)頁(yè)內(nèi)容的代碼標(biāo)簽，也可以單擊標(biāo)簽，選中該元素。）手形工具手形工具標(biāo)簽選擇器標(biāo)簽選擇器窗口大小窗口大小縮放工具縮放工具文檔大小和估計(jì)文檔大小和估計(jì)下載時(shí)間下載時(shí)間選取工具選取工具網(wǎng)站建設(shè)網(wǎng)站建設(shè)第

6、1章 Dreamweaver CS5 概述 標(biāo)簽標(biāo)簽選擇選擇器器用來(lái)顯示環(huán)繞當(dāng)前選定內(nèi)容的標(biāo)簽的層次結(jié)構(gòu)。若單擊該層次結(jié)構(gòu)中的任何標(biāo)簽，則選定該標(biāo)簽全部?jī)?nèi)容。如單擊狀態(tài)欄的標(biāo)簽，則選定文檔中整個(gè)正文。 選取工具選取工具用于啟動(dòng)和禁用手形工具。 手形工具手形工具用于在文檔窗口中單擊并拖動(dòng)文檔。網(wǎng)站建設(shè)網(wǎng)站建設(shè)第1章 Dreamweaver CS5 概述 縮放工具縮放工具單擊狀態(tài)欄中的【縮放工具】，單擊頁(yè)面上需要放大的位置，可以放大文檔頁(yè)面，且每單擊一次，文檔頁(yè)面會(huì)放大一次。也可按下鼠標(biāo)左鍵在屏幕上需要放大的區(qū)域上拖出一個(gè)框，松開(kāi)鼠標(biāo)即可放大選中區(qū)域配合Alt鍵，可以縮小當(dāng)前頁(yè)面顯示大小。且每單擊

7、一次，頁(yè)面會(huì)縮小一次。網(wǎng)站建設(shè)網(wǎng)站建設(shè)第1章 Dreamweaver CS5 概述窗口大小彈出菜單窗口大小彈出菜單（顯示頁(yè)面大小，允許將文檔窗口的大小調(diào)整到預(yù)定義或自定義的尺寸）下載指示器下載指示器（估計(jì)下載時(shí)間，查看傳輸時(shí)間）。注意：“8“8秒鐘原則秒鐘原則”：一般來(lái)說(shuō)，大多數(shù)用戶瀏覽網(wǎng)頁(yè)時(shí)等待一個(gè)頁(yè)面的時(shí)間不會(huì)超過(guò)8秒。所以要隨時(shí)注意網(wǎng)頁(yè)的大小 ，超過(guò)8秒，要及時(shí)優(yōu)化。Web頁(yè)下載時(shí)間和大小的設(shè)計(jì)應(yīng)遵從該原則。網(wǎng)站建設(shè)網(wǎng)站建設(shè)第1章 Dreamweaver CS5 概述“屬性屬性”面板面板：屬性檢查器屬性檢查器用于查看和更改所選對(duì)象或文本的各種屬性。每種對(duì)象都具有不同的屬性。 雙擊“屬性”

8、面板標(biāo)題欄，可將“屬性”面板折疊起來(lái)，再次雙擊，則可展開(kāi)“屬性”面板。面板控制菜單面板控制菜單網(wǎng)站建設(shè)網(wǎng)站建設(shè)第1章 Dreamweaver CS5 概述工作區(qū)切換器工作區(qū)切換器：?jiǎn)螕粼摪粹o右側(cè)的下拉箭頭，選擇相應(yīng)命令即可更改頁(yè)面的布局。網(wǎng)站建設(shè)網(wǎng)站建設(shè)第1章 Dreamweaver CS5 概述“插入插入”面板面板：包含將各種網(wǎng)頁(yè)元素（如圖像、超鏈接、多媒體和表格等）插入到網(wǎng)頁(yè)文檔的快捷按鈕。這些按鈕被分類(lèi)組織到各個(gè)選項(xiàng)卡中。顯示顯示“插入插入”面板面板：選擇“窗口”“插入”命令網(wǎng)站建設(shè)網(wǎng)站建設(shè)第1章 Dreamweaver CS5 概述2022年3月6日星期日教育學(xué)院17 改變插入面板的顯

9、示方式：改變插入面板的顯示方式：拖動(dòng)名稱(chēng)處至工具欄處即變?yōu)楣ぞ邫谛问?，拖?dòng)至面板組處即變?yōu)槊姘逍问?。模板模板?biāo)簽選擇器標(biāo)簽選擇器 超級(jí)鏈接超級(jí)鏈接 命名錨記命名錨記圖像圖像表格表格網(wǎng)站建設(shè)網(wǎng)站建設(shè)第1章 Dreamweaver CS5 概述2022年3月6日星期日教育學(xué)院18“文件文件”面板面板：用于管理文件和文件夾，無(wú)論它們是 Dreamweaver站點(diǎn)的一部分還是位于遠(yuǎn)程服務(wù)器上。通過(guò)“文件”面板可以訪問(wèn)本地磁盤(pán)上的全部文件，類(lèi)似于 Windows 資源管理器 網(wǎng)站建設(shè)網(wǎng)站建設(shè)第1章 Dreamweaver CS5 概述二、二、Dreamweaver的工作區(qū)的工作區(qū)1 1調(diào)整工作區(qū)布局調(diào)整

10、工作區(qū)布局方法：?jiǎn)螕艄ぷ鲄^(qū)切換按鈕，選擇一種布局方式。或者：“窗口”“工作區(qū)布局”2022年3月6日星期日教育學(xué)院19網(wǎng)站建設(shè)網(wǎng)站建設(shè)第1章 Dreamweaver CS5 概述三、改變界面顯示三、改變界面顯示1 1、顯示與隱藏所有面板、顯示與隱藏所有面板在“窗口”或者“查看”菜單中選擇“顯示/隱藏面板”?；蛘甙聪掳聪隆癋4F4”。2 2、顯示與隱藏單個(gè)面板、顯示與隱藏單個(gè)面板在“窗口”菜單中單擊欲顯示或隱藏的面板名稱(chēng)。3 3、整體隱藏或顯示右側(cè)面板組、整體隱藏或顯示右側(cè)面板組單擊面板組標(biāo)題欄上的雙箭頭。另外，也可以將各面板拖出原來(lái)所處的位置。2022年3月6日星期日教育學(xué)院20網(wǎng)站建設(shè)網(wǎng)站建

11、設(shè)第1章 Dreamweaver CS5 概述4 4、面板顯示方式的轉(zhuǎn)換、面板顯示方式的轉(zhuǎn)換面板有兩種顯示方式： 面板組顯示方式、浮動(dòng)面板顯示方式面板組顯示方式、浮動(dòng)面板顯示方式方法：在面板標(biāo)題欄上按下鼠標(biāo)左鍵拖動(dòng)，即可將方法：在面板標(biāo)題欄上按下鼠標(biāo)左鍵拖動(dòng)，即可將面板從面板組中拖動(dòng)出來(lái)成為浮動(dòng)面板，也可將浮動(dòng)面板從面板組中拖動(dòng)出來(lái)成為浮動(dòng)面板，也可將浮動(dòng)面板拖動(dòng)回面板組中。面板拖動(dòng)回面板組中。2022年3月6日星期日教育學(xué)院21網(wǎng)站建設(shè)網(wǎng)站建設(shè)第1章 Dreamweaver CS5 概述2022年3月6日星期日教育學(xué)院22四、設(shè)置便利的操作環(huán)境四、設(shè)置便利的操作環(huán)境 方法：“編輯”“首選參數(shù)”，打開(kāi)“首選參數(shù)”對(duì)話框，對(duì)20個(gè)項(xiàng)目進(jìn)行設(shè)置，使其最符合個(gè)人操作習(xí)慣。網(wǎng)站建設(shè)網(wǎng)站建設(shè)第1章 Dreamweaver CS5 概述第三節(jié)第三節(jié) 使用使用DreamweaverCS5DreamweaverCS5輔助工具輔助工具一、標(biāo)尺一、標(biāo)尺選擇“查看”菜單的“標(biāo)尺”中的“顯示”。網(wǎng)站建設(shè)網(wǎng)站建設(shè)第1章 Dreamweaver CS5 概述二、網(wǎng)格二、網(wǎng)格選擇“查看”菜單的“網(wǎng)格設(shè)置”中的“顯示網(wǎng)格”。網(wǎng)站建設(shè)網(wǎng)站建設(shè)第1章 Dreamweaver CS5