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

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

2、eamweaver CS5，“開始開始”頁頁會出現(xiàn)在工作環(huán)境中?！伴_始”頁使用戶可以快速訪問Dreamweaver 教程、最近的打開過的文件、創(chuàng)建新項目或定義新網(wǎng)站。若要禁用“開始”頁，可在“開始”頁打開時選中“不再顯示”復(fù)選框。 網(wǎng)站建設(shè)網(wǎng)站建設(shè)第1章 Dreamweaver CS5 概述2022年3月6日星期日教育學(xué)院5創(chuàng)建新的文件或者Dreamweaver站點前往ADOBE功能介紹網(wǎng)站官方的重要信息教學(xué)網(wǎ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 個 菜 單 ， 基 本 上 能 夠 實 現(xiàn)Dreamweaver的所有功能。應(yīng)用程序欄應(yīng)用程序欄：包含相應(yīng)的管理按鈕。文檔窗口文檔窗口：顯示當(dāng)前創(chuàng)建和編輯的網(wǎng)頁文檔，是用戶在Dreamweaver設(shè)計網(wǎng)頁的主要工作區(qū)。在該工作區(qū)中可以進行輸入文字、插入圖片等多媒體資源、設(shè)置超鏈接等工作，也可以對整個頁面進行處理。網(wǎng)站建設(shè)網(wǎng)站建設(shè)第1章 Dreamweaver CS5 概述文檔工具欄文檔工具欄

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

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

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

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

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

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

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

11、設(shè)第1章 Dreamweaver CS5 概述4 4、面板顯示方式的轉(zhuǎn)換、面板顯示方式的轉(zhuǎn)換面板有兩種顯示方式： 面板組顯示方式、浮動面板顯示方式面板組顯示方式、浮動面板顯示方式方法：在面板標(biāo)題欄上按下鼠標(biāo)左鍵拖動，即可將方法：在面板標(biāo)題欄上按下鼠標(biāo)左鍵拖動，即可將面板從面板組中拖動出來成為浮動面板，也可將浮動面板從面板組中拖動出來成為浮動面板，也可將浮動面板拖動回面板組中。面板拖動回面板組中。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ù)”，打開“首選參數(shù)”對話框，對20個項目進行設(shè)置，使其最符合個人操作習(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