Dreamweaver基礎PPT學習教案

會計學1Dreamweaver基礎第2章Dreamweaver基礎Dreamweaver簡介Dreamweaver工作界面使用Dreamweaver建立和管理站點(重點)第1頁/共35頁Dreamweaver是Macromedia公司出品的一款集網頁制作和網站管理于一體的“所見即所得”的網頁制作軟件。2.1Dreamweaver簡介第2頁/共35頁Dreamweaver的主要特點及功能：1.將“設計”和“代碼”編輯器合二為一；2.使用內置的圖形編輯程序節(jié)省開發(fā)時間；3.提供操作方便、功能強大的用戶界面；4.提供完美的CSS支持；5.提供完整的集成開發(fā)環(huán)境；6.可與一些常見格式的外部文檔/代碼實現無縫結合；7.提供了較多的行為；8.通過布局視圖技術將表格和層這兩種排版工具結合起來；9.強大的網站管理功能；10.提供了跨瀏覽器兼容性檢查功能。第3頁/共35頁2.2Dreamweaver8的工作界面工作區(qū)布局的分類起始頁工作區(qū)布局第4頁/共35頁1、起始頁如果選中“不再顯示此對話框”選項，則以后啟動Dreamweaver時將不再自動顯示起始頁。第5頁/共35頁2、工作區(qū)布局當新建或打開一個Web頁后，Dreamweaver會顯示一個工作區(qū)窗口。窗口由主菜單、工具欄、文檔窗口、面板組、屬性面板等組成。第6頁/共35頁工作區(qū)窗口第7頁/共35頁1.主菜單文件：用于管理文件編輯：用于編輯操作查看：用于查看對象插入：用于插入頁面元素修改：用于對頁面元素的修改文本：用于對文本的操作命令：匯集了所有的附加命令項站點：用于創(chuàng)建和管理站點窗口：用于打開/關閉面板和窗口幫助：包含Dreamweaver的聯機幫助、技術支持等。第8頁/共35頁2.插入工具欄插入面板集成了所有可以在網頁應用的對象包括“插入”菜單中的選項。插入工具欄其實就是圖像化了的插入指令，通過一個個的按鈕，可以很容易的加入圖像、聲音、多媒體動畫、表格。圖層、框架、表單、Flash和ActiveX等網頁元素。第9頁/共35頁3.文檔窗口當打開或創(chuàng)建一個項目，進入文檔窗口，我們可以在文檔區(qū)域中進行輸入文字、插入表格和編輯圖片等操作。文檔窗口顯示當前編輯的Web頁文檔。Dreamweaver提供了文檔窗口的三種視圖：“設計”視圖：是一個用于可視化頁面布局、可視化編輯和快速應用程序開發(fā)的設計環(huán)境，類似于在瀏覽器中查看頁面時看到的內容?！按a”視圖：是一個用于編寫和編輯HTML、JavaScript、服務器語言代碼以及任何其他類型代碼的手工編碼環(huán)境。“拆分”視圖使您可以在單個窗口中同時看到同一文檔的“代碼”視圖和“設計”視圖。第10頁/共35頁（1）文檔工具欄“文檔”工具欄包含各種按鈕，它們提供各種“文檔”窗口視圖（如“設計”視圖和“代碼”視圖）的選項、各種查看選項和一些常用操作（如在瀏覽器中預覽）。第11頁/共35頁（2）文檔編輯區(qū)文檔編輯區(qū)即用戶用來編輯和修改文檔的區(qū)域。在“代碼”視圖中，可以輸入Web頁對應的HTML代碼或腳本代碼；在“設計”視圖中，可以通過拖動等操作，實現網頁元素的可視化添加和修改。第12頁/共35頁（3）狀態(tài)欄狀態(tài)欄在“文檔”窗口底部，提供當前文檔的有關信息。其包含的按鈕如下：第13頁/共35頁4.屬性面板又稱屬性檢查器，一般出現在文檔窗口的下方。屬性面板用于顯示所選中網頁元素的屬性，用戶可以利用它查看和編輯屬性值。第14頁/共35頁5.面板組在Dreamweaver窗口的右側是面板組，通常包含“CSS”、“應用程序”、“標簽檢查器”、“文件”等面板。在主菜單的“窗口”子菜單中包含了所有的面板名，通過勾選或取消勾選某個面板名，可以顯示或移去該面板。第15頁/共35頁6.其他工具欄選擇“查看”→“工具欄”命令，在“工具欄”子菜單中勾選或取消某個工具欄，可以在視圖中顯示或隱藏相應的工具欄。第16頁/共35頁2.3使用Dreamweaver建立和管理站點

當使用Dreamweaver制作一個網站時，首先應該建立站點，以方便對整個網站的結構進行規(guī)劃，并利用Dreamweaver的站點管理功能對整個網站資源進行管理。

Dreamweaver還有許多功能必須在建立站點后才能實現。第17頁/共35頁要制作一個能夠被大家瀏覽的網站，首先需要在本地磁盤上制作這個網站，然后把這個網站傳到互聯網的web服務器上。放置在本地磁盤上的網站被稱為本地站點。位于互聯網web服務器里的網站被稱為遠程站點。Dreamweaver8提供了對本地站點和遠程站點強大的管理功能。第18頁/共35頁規(guī)劃網站的整體結構(注意事項)1、文件及文件夾的命名要規(guī)范2、不要將所有文件存放在站點根目錄下3、建立子文件夾對文件進行分類存放第19頁/共35頁2.3使用Dreamweaver建立和管理站點1)站點概述

站點實質上就是一個文件夾。設計良好的網站通常是在站點文件夾下建立不同的子文件夾，將網頁文檔及其它資源分門別類地保存在相應的文件夾中以方便管理和維護。第20頁/共35頁2.3使用Dreamweaver建立和管理站點站點包括遠端站點和本地站點兩類。通常將存儲在Web服務器上的站點稱為遠端站點。在本地計算機上建立的站點就是本地站點。第21頁/共35頁2.3使用Dreamweaver建立和管理站點2)站點的建立和管理(1)本地站點的建立①為站點命名②選擇站點類型③設置本地站點文件夾④選擇連接遠程服務器的方式⑤完成站點的創(chuàng)建第22頁/共35頁①為站點命名如果新建站點時不知道該URL,可以暫時不填第23頁/共35頁②選擇站點類型創(chuàng)建靜態(tài)網站創(chuàng)建動態(tài)網站第24頁/共35頁③設置本地站點文件夾輸入存放站點的文件夾路徑第25頁/共35頁④選擇連接遠程服務器的方式初次建立站點時，可先選擇“無”，表示不與遠程服務器建立連接。第26頁/共35頁⑤完成站點的創(chuàng)建第27頁/共35頁2.3使用Dreamweaver建立和管理站點(2)站點管理(【站點】|【管理站點】)第28頁/共35頁2.3使用Dreamweaver建立和管理站點3)站點文件管理建立站點以后，可以通過文件面板對站點中的資源進行管理。文件面板有“文件”、“資源”、“代碼片斷”三個選項卡。第29頁/共35頁3)站點文件管理(1)“文件”選項卡主要用來對站點的文件進行管理，可以完成對文件和文件夾的新建、打開、復制、粘貼、重命名等操作。單擊鼠標左鍵選中需要管理的文件或文件夾，然后單擊鼠標右鍵，再彈出菜單中選“編輯”項，即可進行相關操作。第30頁/共35頁(1)“文件”選項卡第31頁/共35頁3)站點文件管理(2)“代碼片段”選項卡

Dreamweaver預定義了一些能實現特定功能的代碼片段，在制作網頁