Dreamweaver cs5 網頁制作教程ppt全冊

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

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

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

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

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

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

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

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

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

10、工作區(qū)布局方法：單擊工作區(qū)切換按鈕，選擇一種布局方式。或者：“窗口”“工作區(qū)布局”2022年3月6日星期日教育學院19網站建設網站建設第1章 Dreamweaver CS5 概述三、改變界面顯示三、改變界面顯示1 1、顯示與隱藏所有面板、顯示與隱藏所有面板在“窗口”或者“查看”菜單中選擇“顯示/隱藏面板”。或者按下按下“F4F4”。2 2、顯示與隱藏單個面板、顯示與隱藏單個面板在“窗口”菜單中單擊欲顯示或隱藏的面板名稱。3 3、整體隱藏或顯示右側面板組、整體隱藏或顯示右側面板組單擊面板組標題欄上的雙箭頭。另外，也可以將各面板拖出原來所處的位置。2022年3月6日星期日教育學院20網站建設網站建

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