第八章Dreamweaver的操作第八章Dreamweaver的操作12022/11/5本章學習重點 了解Dreamweaver的特點 掌握Dreamweaver中插入多種媒體的方法，包 括文字、圖像、聲音、flash等等 掌握超級鏈接的設置 掌握Dreamweaver中表格的基本操作 掌握Dreamweaver中布局表格的使用技巧 掌握Dreamweaver中框架的操作 掌握Dreamweaver的層、行為、時間軸的概念 了解網站發布的基本方法2022/11/2本章學習重點 了解Dreamweaver的22022/11/58.1Dreamweaver簡介Dreamweaver是美國MACROMEDIA公司（因Adobe和Macromedia合而為一，即新的Adobe公司）開發的集網頁制作和管理網站于一身的所見即所得網頁編輯器，2022/11/28.1Dreamweaver簡介Dream3第7章_Dreamweaver的操作多媒體CAI課件制作技術與應用(第2版)4第7章_Dreamweaver的操作多媒體CAI課件制作技術與應用(第2版)52022/11/5 8.1.3Dreamweaver界面簡介 1．工作區布局選擇可以使用【首選參數】對話框切換到一種不同的工作區。2022/11/2 8.1.3Dreamweaver界面62022/11/5兩種工作區的主要特點是設計人員工作區是一個使用MDI（多文檔界面）的集成工作區，其中全部【文檔】窗口和面板被集成在一個更大的應用程序窗口中，并將面板組停靠在右側。本章的界面都使用此類工作區。編碼人員工作區是同樣的集成工作區，但是將面板組停靠在左側，布局類似于MacromediaHomeSite和MacromediaColdFusionStudio所用的布局，而且【文檔】窗口在默認情況下顯示【代碼】視圖。建議HomeSite或ColdFusionStudio用戶以及其他需要使用熟悉的工作區布局的手工編碼人員使用這種布局。2022/11/2兩種工作區的主要特點是72022/11/5 3．起始頁項目2022/11/2 3．起始頁項目82022/11/5 4．工作區文件面板面板組文檔窗口文檔工具欄2022/11/2 4．工作區文件面板面板組文檔窗口文檔工92022/11/58.1.4站點的應用與管理在Dreamweaver中包括兩種站點：遠程站點：服務器上組成Web站點的文件，用于個使用者進行網上瀏覽。本地站點：與遠程站點上的文件對應的本地磁盤上的文件。在最常見的Dreamweaver工作流程中，用戶在本地磁盤上編輯文件，然后將它們上傳到遠程站點。2022/11/28.1.4站點的應用與管理在Dream102022/11/5 1．創建站點2022/11/2 1．創建站點112022/11/5 2．站點布局網站設計初始需要設計人員對網站的主題進行規劃，網站必須主題鮮明，有層次感。一般的網站中的網頁設計不多于三層，這樣，用戶可以方便地從主頁中快速的找到連接網站中的其他網頁的途徑。 （1）設置主頁 （2）查看站點地圖2022/11/2 2．站點布局網站設計初始需要設計人員對網128.2Dreamweaver基本操作

8.2.1新建并保存網頁1．新建網頁2．打開網頁3．保存網頁2022/11/58.2Dreamweaver基本操作

8.2.1新建并保138.2.2設置頁標題設置標題、背景顏色、文本顏色2022/11/58.2.2設置頁標題設置標題、背景顏色、文本顏色2022148.2.3添加文字及格式設置1．添加文字2．文字顏色設置2022/11/58.2.3添加文字及格式設置1．添加文字2022/11/153．設置或更改字體：2022/11/53．設置或更改字體：2022/11/2168.2.4添加圖像Web頁中通常使用的只有三種，即GIF、JPEG和PNG。2022/11/58.2.4添加圖像Web頁中通常使用的只有三種，即GI17三種文件的特點GIF（圖形交換格式）文件最多使用256種顏色，最適合顯示色調不連續或具有大面積單一顏色的圖像，例如導航條、按鈕、圖標、徽標或其它具有統一色彩和色調的圖像。JPEG（聯合圖像專家組標準）文件格式是用于攝影或連續色調圖像的高級格式，這是因為JPEG文件可以包含數百萬種顏色。隨著JPEG文件品質的提高，文件的大小和下載時間也會隨之增加。通常可以通過壓縮JPEG文件在圖像品質和文件大小之間達到良好的平衡。PNG（可移植網絡圖形）文件格式是一種替代GIF格式的無專利權限制的格式，它包括對索引色、灰度、真彩色圖像以及alpha通道透明的支持。PNG是MacromediaFireworks固有的文件格式。PNG文件可保留所有原始層、矢量、顏色和效果信息（例如陰影），并且在任何時候所有元素都是可以完全編輯的。文件必須具有.png文件擴展名才能被Dreamweaver識別為PNG文件。2022/11/5三種文件的特點GIF（圖形交換格式）文件最多使用256種181．插入圖像占位符將光標定在需要插入圖形的地方；選擇：插入圖像占位符按鈕即出現圖像占位符對話框2、替換占位符，插入圖像2022/11/51．插入圖像占位符2022/11/2193．直接插入圖像用戶可以從工具欄中選擇按鈕【圖像】，在彈出的如圖8-17所示的插入圖像對話框中選擇圖像的文件并插入圖像。2022/11/53．直接插入圖像用戶可以從工具欄中選擇按鈕【圖像】，在彈出204．調整圖像⑴裁剪⑵亮度/對比度⑶銳化2022/11/54．調整圖像⑴裁剪2022/11/2218.2.5設置超級鏈接1．創建鏈接（1）鏈接到其它文檔或文件（如圖形、影片、PDF或聲音文件）的鏈接。（2）命名錨記鏈接，此類鏈接跳轉至文檔內的特定位置（3）電子郵件鏈接（4）空鏈接和腳本鏈接2022/11/58.2.5設置超級鏈接1．創建鏈接2022/11/2222．鏈接的字體顯示2022/11/52．鏈接的字體顯示2022/11/2233．為圖片設置超級鏈接圖像地圖指已被分為多個區域（或稱【熱點】）的圖像；當用戶單擊某個熱點時，會發生某種操作（例如，打開一個新文件）。2022/11/53．為圖片設置超級鏈接圖像地圖指已被分為多個區域（或稱【熱248.2.6插入flashFlash文件的文件類型（1）Flash文件(.fla)（2）FlashSWF文件(.swf)（3）Flash模板(.swt)（4）Flash元素(.swc)2022/11/58.2.6插入flashFlash文件的文件類型2022/1251．創建和插入Flash按鈕2022/11/51．創建和插入Flash按鈕2022/11/2262．插入Flash文本對象2022/11/52．插入Flash文本對象2022/11/2273．插入Flash影片插入SWF文件的步驟如下：（1）在【文檔】窗口的【設計】視圖中，將插入點放置在需要插入影片的地方。（2）在【插入】欄的【常用】類別中，選擇【媒體】，然后單擊【插入Flash】圖標。或者選擇【插入】→【媒體】→【Flash】。（3）在顯示的對話框中，選擇需要加入的Flash文件(.swf)。Flash占位符隨即出現在【文檔】窗口中。（4）在【文檔】窗口中，單擊Flash占位符以選擇要預覽的Flash影片。2022/11/53．插入Flash影片插入SWF文件的步驟如下：20284．插入Flash元素使用Dreamweaver，設計者可以在文檔中插入Flash元素。Flash元素使設計者可以快速、方便地使用預置元素構建豐富的Internet應用程序。2022/11/54．插入Flash元素使用Dreamweaver，設計298.2.7表格的應用1．插入表格2．設置表格屬性3．拆分和合并單元格2022/11/58.2.7表格的應用1．插入表格2022/11/2304．布局模式（1）切換到【布局】模式（2）繪制布局表格（3）繪制布局單元格2022/11/54．布局模式（1）切換到【布局】模式2022/11/2318.2.8框架在網頁上的應用1．創建框架設計框架集2022/11/58.2.8框架在網頁上的應用1．創建框架2022/11/322．控制具有鏈接的框架內容要在一個框架中使用鏈接以打開另一個框架中的文檔，必須設置鏈接目標。鏈接的target屬性指定在其中打開鏈接的內容的框架或窗口。在目標的下拉列表框中有以下四個固有選項，其含義是：_blank在新的瀏覽器窗口中打開鏈接的文檔，同時保持當前窗口不變。_parent在顯示鏈接的框架的父框架集中打開鏈接的文檔，同時替換整個框架集。_self在當前框架中打開鏈接，同時替換該框架中的內容。_top在當前瀏覽器窗口中打開鏈接的文檔，同時替換所有框架。2022/11/52．控制具有鏈接的框架內容要在一個框架中使用鏈接以打開另一338.2.9表單的使用典型例子:2022/11/58.2.9表單的使用典型例子:2022/11/2342.插入表單對象（1）表單區域（2）文本字段（3）單選按鈕（4）按鈕（5）插入圖像按鈕（6）復選框2022/11/52.插入表單對象（1）表單區域2022/11/2358.2.9層的概念1．插入層2022/11/58.2.9層的概念1．插入層2022/11/2368.2.10利用行為制作動態效果1．播放聲音2．打開瀏覽器窗口3．彈出消息框圖8-47

【消息】文本框2022/11/58.2.10利用行為制作動態效果1．播放聲音2022/137控制Shockwave或Flash2022/11/5控制Shockwave或Flash2022/11/2388.2.11使用時間軸制作DHTML圖層漂浮路線2022/11/58.2.11使用時間軸制作DHTML2022/11/2398.2.12使用樣式表CSS1．創建新的CSS樣式表2．使用CSS改變超級鏈接的顯示效果2022/11/58.2.12使用樣式表CSS1．創建新的CSS樣式表2408.3創建自己的站點1．確認安裝IIS2022/11/58.3創建自己的站點1．確認安裝IIS2022/11/2412．設置Web服務器2022/11/52．設置Web服務器2022/11/2423．設置站點并瀏覽2022/11/53．設置站點并瀏覽2022/11/243測試（2）靜態網頁測試（3）動態網頁測試2022/11/5<html><body><%response.write("HelloWorld!")%></body></html>測試（2）靜態網頁測試2022/11/2<html>448.3.2將網頁上傳發布2022/11/58.3.2將網頁上傳發布2022/11/2458.4創建用戶登錄動態網頁動態網頁一般以數據庫技術為基礎，當用戶請求時，服務器從數據庫中獲取信息并返回一個完整的網頁。采用動態網頁技術的網站可以實現更多的功能，如用戶注冊、用戶登錄、在線調查、用戶管理、訂單管理等等。2022/11/58.4創建用戶登錄動態網頁動態網頁一般以數據庫技術為基礎，當46說明本節將以常見的用戶注冊為例介紹動態網頁的設計方法。服務器的架設方法在8.3節中已有詳細描述，將繼續采用IIS配置服務器端程序，并使用ASP技術設計動態網頁，用Access2000設計后臺數據庫。在這個用戶注冊網站中包括四個網頁，index.asp頁面用于用戶登錄輸入用戶名和密碼；login.asp用戶用戶注冊信息的輸入；welcome.asp用于成功登錄和成功注冊的跳轉信息顯示；error.asp頁面用于用戶密碼錯誤時的信息顯示。2022/11/5說明本節將以常見的用戶注冊為例介紹動態網頁的設計方法。服務器478.4.1創建站點2022/11/58.4.1創建站點2022/11/2488.4.2創建數據庫yhxx.mdb2022/11/58.4.2創建數據庫yhxx.mdb2022/11/2498.4.3登錄表單網頁設計1.登錄表單的頁面設計2.連接數據庫2022/11/58.4.3登錄表單網頁設計1.登錄表單的頁面設計2022/503.登錄用戶設定2022/11/53.登錄用戶設定2022/11/2518.4.4注冊表單網頁設計2022/11/58.4.4注冊表單網頁設計2022/11/252本章小節本章介紹了使用Dreamweaver的基本操作方法，包括安裝，網站的創建，網頁元素的添加，并以用戶注冊為例簡單介紹了動態網頁設計的主要元素的設置。希望通過本章的學習能夠使讀者對Dreamweaver的使用有一定的了解，并能夠自行設計并實現網站的創建工作。2022/11/5本章小節本章介紹了使用Dreamweaver的基本操作方法，53謝謝謝謝54第八章Dreamweaver的操作第八章Dreamweaver的操作552022/11/5本章學習重點 了解Dreamweaver的特點 掌握Dreamweaver中插入多種媒體的方法，包 括文字、圖像、聲音、flash等等 掌握超級鏈接的設置 掌握Dreamweaver中表格的基本操作 掌握Dreamweaver中布局表格的使用技巧 掌握Dreamweaver中框架的操作 掌握Dreamweaver的層、行為、時間軸的概念 了解網站發布的基本方法2022/11/2本章學習重點 了解Dreamweaver的562022/11/58.1Dreamweaver簡介Dreamweaver是美國MACROMEDIA公司（因Adobe和Macromedia合而為一，即新的Adobe公司）開發的集網頁制作和管理網站于一身的所見即所得網頁編輯器，2022/11/28.1Dreamweaver簡介Dream57第7章_Dreamweaver的操作多媒體CAI課件制作技術與應用(第2版)58第7章_Dreamweaver的操作多媒體CAI課件制作技術與應用(第2版)592022/11/5 8.1.3Dreamweaver界面簡介 1．工作區布局選擇可以使用【首選參數】對話框切換到一種不同的工作區。2022/11/2 8.1.3Dreamweaver界面602022/11/5兩種工作區的主要特點是設計人員工作區是一個使用MDI（多文檔界面）的集成工作區，其中全部【文檔】窗口和面板被集成在一個更大的應用程序窗口中，并將面板組停靠在右側。本章的界面都使用此類工作區。編碼人員工作區是同樣的集成工作區，但是將面板組停靠在左側，布局類似于MacromediaHomeSite和MacromediaColdFusionStudio所用的布局，而且【文檔】窗口在默認情況下顯示【代碼】視圖。建議HomeSite或ColdFusionStudio用戶以及其他需要使用熟悉的工作區布局的手工編碼人員使用這種布局。2022/11/2兩種工作區的主要特點是612022/11/5 3．起始頁項目2022/11/2 3．起始頁項目622022/11/5 4．工作區文件面板面板組文檔窗口文檔工具欄2022/11/2 4．工作區文件面板面板組文檔窗口文檔工632022/11/58.1.4站點的應用與管理在Dreamweaver中包括兩種站點：遠程站點：服務器上組成Web站點的文件，用于個使用者進行網上瀏覽。本地站點：與遠程站點上的文件對應的本地磁盤上的文件。在最常見的Dreamweaver工作流程中，用戶在本地磁盤上編輯文件，然后將它們上傳到遠程站點。2022/11/28.1.4站點的應用與管理在Dream642022/11/5 1．創建站點2022/11/2 1．創建站點652022/11/5 2．站點布局網站設計初始需要設計人員對網站的主題進行規劃，網站必須主題鮮明，有層次感。一般的網站中的網頁設計不多于三層，這樣，用戶可以方便地從主頁中快速的找到連接網站中的其他網頁的途徑。 （1）設置主頁 （2）查看站點地圖2022/11/2 2．站點布局網站設計初始需要設計人員對網668.2Dreamweaver基本操作

8.2.1新建并保存網頁1．新建網頁2．打開網頁3．保存網頁2022/11/58.2Dreamweaver基本操作

8.2.1新建并保678.2.2設置頁標題設置標題、背景顏色、文本顏色2022/11/58.2.2設置頁標題設置標題、背景顏色、文本顏色2022688.2.3添加文字及格式設置1．添加文字2．文字顏色設置2022/11/58.2.3添加文字及格式設置1．添加文字2022/11/693．設置或更改字體：2022/11/53．設置或更改字體：2022/11/2708.2.4添加圖像Web頁中通常使用的只有三種，即GIF、JPEG和PNG。2022/11/58.2.4添加圖像Web頁中通常使用的只有三種，即GI71三種文件的特點GIF（圖形交換格式）文件最多使用256種顏色，最適合顯示色調不連續或具有大面積單一顏色的圖像，例如導航條、按鈕、圖標、徽標或其它具有統一色彩和色調的圖像。JPEG（聯合圖像專家組標準）文件格式是用于攝影或連續色調圖像的高級格式，這是因為JPEG文件可以包含數百萬種顏色。隨著JPEG文件品質的提高，文件的大小和下載時間也會隨之增加。通常可以通過壓縮JPEG文件在圖像品質和文件大小之間達到良好的平衡。PNG（可移植網絡圖形）文件格式是一種替代GIF格式的無專利權限制的格式，它包括對索引色、灰度、真彩色圖像以及alpha通道透明的支持。PNG是MacromediaFireworks固有的文件格式。PNG文件可保留所有原始層、矢量、顏色和效果信息（例如陰影），并且在任何時候所有元素都是可以完全編輯的。文件必須具有.png文件擴展名才能被Dreamweaver識別為PNG文件。2022/11/5三種文件的特點GIF（圖形交換格式）文件最多使用256種721．插入圖像占位符將光標定在需要插入圖形的地方；選擇：插入圖像占位符按鈕即出現圖像占位符對話框2、替換占位符，插入圖像2022/11/51．插入圖像占位符2022/11/2733．直接插入圖像用戶可以從工具欄中選擇按鈕【圖像】，在彈出的如圖8-17所示的插入圖像對話框中選擇圖像的文件并插入圖像。2022/11/53．直接插入圖像用戶可以從工具欄中選擇按鈕【圖像】，在彈出744．調整圖像⑴裁剪⑵亮度/對比度⑶銳化2022/11/54．調整圖像⑴裁剪2022/11/2758.2.5設置超級鏈接1．創建鏈接（1）鏈接到其它文檔或文件（如圖形、影片、PDF或聲音文件）的鏈接。（2）命名錨記鏈接，此類鏈接跳轉至文檔內的特定位置（3）電子郵件鏈接（4）空鏈接和腳本鏈接2022/11/58.2.5設置超級鏈接1．創建鏈接2022/11/2762．鏈接的字體顯示2022/11/52．鏈接的字體顯示2022/11/2773．為圖片設置超級鏈接圖像地圖指已被分為多個區域（或稱【熱點】）的圖像；當用戶單擊某個熱點時，會發生某種操作（例如，打開一個新文件）。2022/11/53．為圖片設置超級鏈接圖像地圖指已被分為多個區域（或稱【熱788.2.6插入flashFlash文件的文件類型（1）Flash文件(.fla)（2）FlashSWF文件(.swf)（3）Flash模板(.swt)（4）Flash元素(.swc)2022/11/58.2.6插入flashFlash文件的文件類型2022/1791．創建和插入Flash按鈕2022/11/51．創建和插入Flash按鈕2022/11/2802．插入Flash文本對象2022/11/52．插入Flash文本對象2022/11/2813．插入Flash影片插入SWF文件的步驟如下：（1）在【文檔】窗口的【設計】視圖中，將插入點放置在需要插入影片的地方。（2）在【插入】欄的【常用】類別中，選擇【媒體】，然后單擊【插入Flash】圖標。或者選擇【插入】→【媒體】→【Flash】。（3）在顯示的對話框中，選擇需要加入的Flash文件(.swf)。Flash占位符隨即出現在【文檔】窗口中。（4）在【文檔】窗口中，單擊Flash占位符以選擇要預覽的Flash影片。2022/11/53．插入Flash影片插入SWF文件的步驟如下：20824．插入Flash元素使用Dreamweaver，設計者可以在文檔中插入Flash元素。Flash元素使設計者可以快速、方便地使用預置元素構建豐富的Internet應用程序。2022/11/54．插入Flash元素使用Dreamweaver，設計838.2.7表格的應用1．插入表格2．設置表格屬性3．拆分和合并單元格2022/11/58.2.7表格的應用1．插入表格2022/11/2844．布局模式（1）切換到【布局】模式（2）繪制布局表格（3）繪制布局單元格2022/11/54．布局模式（1）切換到【布局】模式2022/11/2858.2.8框架在網頁上的應用1．創建框架設計框架集2022/11/58.2.8框架在網頁上的應用1．創建框架2022/11/862．控制具有鏈接的框架內容要在一個框架中使用鏈接以打開另一個框架中的文檔，必須設置鏈接目標。鏈接的target屬性指定在其中打開鏈接的內容的框架或窗口。在目標的下拉列表框中有以下四個固有選項，其含義是：_blank在新的瀏覽器窗口中打開鏈接的文檔，同時保持當前窗口不變。_parent在顯示鏈接的框架的父框架集中打開鏈接的文檔，同時替換整個框架集。_self在當前框架中打開鏈接，同時替換該框架中的內容。_top在當前瀏覽器窗口中打開鏈接的文檔，同時替換所有框架。2022/11/52．控制具有鏈接的框架內容要在一個框架中使用鏈接以打開另一878.2.9表單的使用典型例子:2022/11/58.2.9表單的使用典型例子:2022/11/2882.插入表單對象（1）表單區域（2）文本字段（3）單選按鈕（4）按鈕（5）插入圖像按鈕（6）復選框2022/11/52.插入表單對象（1）表單區域2022/11/2898.2.9層的概念1．插入層2022/11/58.2.9層的概念1．插入層2022/11/2908.2.10利用行為制作動態效果1．播放聲音2．打開瀏覽器窗口3．彈出消息框圖8-47

【消息】文本框2022/11/58.2.10利用行為制作動態效果1．播放聲音2022/191控制Shockwave或Flash2022/11/5控制Shockwave或Flash2022/11/2928.2.11使用時間軸制作DHTML圖層漂浮路線2022/11/58.2.11使用時間軸制作DHTML2022/11/2938.2.12使用樣式表CSS1．創建新的CSS樣式表2．使用CSS改變超級鏈接的顯示效果2022/11/58.2.12使用樣式表CSS1．創建新的CSS樣式表2948.3創建自己的站點1．確認安裝IIS2022/11/58.3