DreamweaverMX的使用和管理

1、教學(xué)目的與要求： 通過本章學(xué)習(xí)，使學(xué)生能熟練使用網(wǎng)頁專業(yè)制作軟件Dreamweaver制作圖文并茂、生動形象的網(wǎng)頁教學(xué)重點與難點：重點：Dreamweaver工作環(huán)境、基本網(wǎng)頁制作難點：圖層概念及運用、站點規(guī)劃和管理DreamweaverMX的使用和管理Dreamweaver MX的使用 1、Dreamweaver MX基礎(chǔ)知識一、概述 Macromedia Dreamweaver MX 是一款專業(yè)的 HTML 編輯器，用于對 Web 站點、Web 頁和 Web 應(yīng)用程序進行設(shè)計、編碼和開發(fā)。無論是手工編寫 HTML 代碼或在可視化編輯環(huán)境中工作，Dreamweaver 是非常有用的工具。Dr

2、eamweaverMX的使用和管理 Dreamweaver MX基礎(chǔ)知識二、Dreamweaver MX的啟動與刪除 (一)啟動 1、標準的啟動方式 “開始” “程序/Macromedia/ Macromedia Dreamweaver MX或通過桌面快捷方式 3、直接載入需要編輯的文檔 選中要編輯的文件圖標 單擊鼠標右鍵 選擇“使用Dreamweaver MX編輯” DreamweaverMX的使用和管理 Dreamweaver MX基礎(chǔ)知識二、Dreamweaver MX的啟動與刪除 （二）刪除 “開始” “設(shè)置/控制面板” “添加/刪除程序” 選擇Macromedia Dreamweav

3、er MX 單擊“更改/刪除”按鈕 DreamweaverMX的使用和管理 Dreamweaver MX基礎(chǔ)知識三、Dreamweaver MX工作區(qū)1、工作區(qū)布局（軟件演示）2、Dreamweaver MX工作區(qū)元素及調(diào)整起始頁:“編輯”“首選參數(shù)”“插入”面板:“窗口”“插入”文檔工具欄:“右鍵”“文檔”“標準”工具欄: “右鍵”“標準”DreamweaverMX的使用和管理 Dreamweaver MX基礎(chǔ)知識二、Dreamweaver MX工作區(qū)標簽選擇器、面板組“文件”面板 : 管理站點文件 菜單“窗口”“站點文件”或按 F8鍵屬性檢查器:“窗口”“屬性”或“修改”“屬性”Dream

4、weaverMX的使用和管理Dreamweaver MX基礎(chǔ)知識3、文檔窗口視圖模式： “設(shè)計”視圖：用于可視化頁面布局、可視化編輯和快速應(yīng)用程序開發(fā)的設(shè)計環(huán)境“代碼”視圖：用于編寫和編輯 HTML、JavaScript等手工編寫環(huán)境 “代碼和設(shè)計”視圖：在單個窗口中同時看到同一文檔的“代碼”視圖和“設(shè)計”視圖。二、Dreamweaver MX工作區(qū)DreamweaverMX的使用和管理 2、一般網(wǎng)頁的設(shè)計與制作一、站點的管理（一）定義 1、“站點” “新建站點”：采用向?qū)Х绞蕉x本地站點 2、定義站點名稱 3、要求用戶指定站點文件存放位置 4、完成本地站點的定義DreamweaverMX的使

5、用和管理 一般網(wǎng)頁的設(shè)計與制作一、站點的管理（二）打開 “站點” “站點文件” （三）修改 “站點” “編輯站點” 選擇要編輯的站點名稱 單擊“編輯” 在對話框中對站點進行編輯 “確定” “完成”DreamweaverMX的使用和管理 一般網(wǎng)頁的設(shè)計與制作二、一般網(wǎng)頁概念 所謂一般網(wǎng)頁是指沒有采用定位技術(shù)、HTML高級技術(shù)、Javascript等修飾的網(wǎng)頁。 （演示示例網(wǎng)頁）一、站點的管理 （四）刪除 “站點” “編輯站點” 選擇要編輯的站點名稱 單擊“刪除” “是” “完成”DreamweaverMX的使用和管理 一般網(wǎng)頁的設(shè)計與制作三、一般網(wǎng)頁的設(shè)計與制作1、新建/打開頁面 方法：“文件”

6、“新建”2、頁面屬性的設(shè)置 方法：在頁面空白處點擊右鍵“頁面屬性”3、文本的錄入直接錄入從已有的文檔中復(fù)制修改已有的網(wǎng)頁DreamweaverMX的使用和管理一般網(wǎng)頁的設(shè)計與制作三、一般網(wǎng)頁的設(shè)計與制作 插入“不換行空格” 按ctrl+shift+space組合鍵 “插入” “特殊符號” “不換行空格” “插入”面板“字符”選項卡單擊不換行空格按鈕 “編輯” “參數(shù)選擇”，在“分類”列表里選擇“常規(guī)”，選中“允許多個連續(xù)的空格”選項 DreamweaverMX的使用和管理一般網(wǎng)頁的設(shè)計與制作三、一般網(wǎng)頁的設(shè)計與制作4、水平線的插入 方法：菜單“插入”“HTML”水平線”工具欄“HTML”水平線

7、”圖標注:dreamweaver中修改水平線的顏色 使用屬性欄中的快速屬性編輯器DreamweaverMX的使用和管理5、插入版權(quán)和日期 方法：工具欄“常用”“日期”圖標 一般網(wǎng)頁的設(shè)計與制作三、一般網(wǎng)頁的設(shè)計與制作6、圖象插入及圖文混編 圖片格式：JPG、GIF、PNG、BMP、SWF DreamweaverMX的使用和管理 一般網(wǎng)頁的設(shè)計與制作三、一般網(wǎng)頁的設(shè)計與制作7、圖象熱點的制作 方法：選中圖象圖片屬性工具欄熱點圖標 工具欄“常用”“圖象”按紐熱點選項6、圖象插入及圖文混編 方法： 定位圖象插入點工具欄圖象圖標 菜單“插入”“圖象” 快捷鍵:Ctrl+Alt+IDreamweaver

8、MX的使用和管理 一般網(wǎng)頁的設(shè)計與制作三、一般網(wǎng)頁的設(shè)計與制作8、錨點的插入方法 菜單“插入”“不可見標簽”“命名錨點”工具欄“常用”“命名錨點”快捷鍵:Ctrl+Alt+A建立命令錨點9、導(dǎo)航欄翻轉(zhuǎn)圖象 方法：工具欄“常用”“圖象”按紐導(dǎo)航條選項DreamweaverMX的使用和管理 一般網(wǎng)頁的設(shè)計與制作三、一般網(wǎng)頁的設(shè)計與制作10、翻轉(zhuǎn)圖象制作方法 定位圖象插入點工具箱常用“鼠標經(jīng)過圖象”11、超級鏈接制作熱點鏈接方法 :選擇熱點右鍵“鏈接”或點擊熱點屬性工具條上“指向文件”圖標DreamweaverMX的使用和管理 一般網(wǎng)頁的設(shè)計與制作三、一般網(wǎng)頁的設(shè)計與制作11、超級鏈接制作網(wǎng)頁間錨點

9、鏈接 鏈接地址格式：文件名（包括后綴名）+ 錨點名網(wǎng)頁間鏈接DreamweaverMX的使用和管理作業(yè)題：1、針對課堂內(nèi)容，自選主題使用Dreamweaver MX建立一個簡單的站點。 2、練習(xí)在Dreamweaver MX中進行網(wǎng)頁的布局。 DreamweaverMX的使用和管理 3、Dreamweaver MX的網(wǎng)頁定位技術(shù)一、概述 網(wǎng)頁布局是指網(wǎng)頁中各個對象在網(wǎng)頁中的相對位置。在Dreamweaver MX中,可以用表格、層表格、層和框架進行定位布局。DreamweaverMX的使用和管理 Dreamweaver MX的網(wǎng)頁定位技術(shù)二、利用表格進行頁面布局1、插入表格 工具箱/插入表格圖

10、標 2、表格屬性編輯 對齊方式、邊框線、背景等 注：在800600分辨率下寬度不超過 778高度不超過460DreamweaverMX的使用和管理 Dreamweaver MX的網(wǎng)頁定位技術(shù)二、利用表格進行頁面布局3、單元格屬性編輯4、合并/拆分單元格5、對象的插入 logo圖象、廣告條、欄目、水平線、欄目及項目、圖象f、文字、版權(quán)和日期等DreamweaverMX的使用和管理 Dreamweaver MX的網(wǎng)頁定位技術(shù)三、利用表格進行數(shù)據(jù)規(guī)則轉(zhuǎn)換 使用表格進行數(shù)據(jù)轉(zhuǎn)換要求數(shù)據(jù)要按一定的規(guī)律排列，比如數(shù)據(jù)間使用，Tab等符號排列 方法：點擊插入工具條“布局”“表格數(shù)據(jù)”DreamweaverM

11、X的使用和管理 Dreamweaver MX的網(wǎng)頁定位技術(shù)四、使用表格增加網(wǎng)頁的層次 表格可以增加網(wǎng)頁層次，表格有表格背景和單元格背景之分，這為增加表格的層次感提供可能。 文字、圖象、多媒體、表單等各種對象均可放到表格中進行網(wǎng)頁定位,且表格應(yīng)用不受瀏覽器的限制。DreamweaverMX的使用和管理 Dreamweaver MX的網(wǎng)頁定位技術(shù)五、框架的應(yīng)用1、框架的創(chuàng)建菜單“文件”“新建” 插入工具條“布局”“框架” 菜單“文件”“新建” “插入”“HTML”框架”DreamweaverMX的使用和管理 Dreamweaver MX的網(wǎng)頁定位技術(shù)五、框架的應(yīng)用 2、框架的修改大小、框架刪除、框

12、架的再分割 3、框架的保存框架網(wǎng)頁和內(nèi)容網(wǎng)頁DreamweaverMX的使用和管理 Dreamweaver MX的網(wǎng)頁定位技術(shù)六、層表格和層的使用 1、概述層表格利用層布局網(wǎng)頁，最后生成表格的HTML代碼;Layer是真正的層，是網(wǎng)頁定位技術(shù)中的高級技術(shù)。 2、插入層表格切換網(wǎng)頁到布局視圖下點擊工具條“布局”“布局表格”/“布 局單元格”DreamweaverMX的使用和管理 Dreamweaver MX的網(wǎng)頁定位技術(shù)六、層表格和層的使用注: 空文檔中繪制表格時，表格自動捕捉到頁面窗口的左上角。 層單元格回自動捕捉附近的單元格邊界，按住alt鍵可暫時消除該功能 布局表格中可嵌套布局表格和單元格

13、，布局單元格中無法嵌套DreamweaverMX的使用和管理 Dreamweaver MX的網(wǎng)頁定位技術(shù)六、層表格和層的使用3、分割層表格 點擊工具條“布局”“布局單元格”4、移動和調(diào)整布局表格和單元格5、為布局單元格添加內(nèi)容 6、格式化布局單元格和布局表格DreamweaverMX的使用和管理 Dreamweaver MX的網(wǎng)頁定位技術(shù)六、層表格和層的使用7、層（Layer） （1）插入層 插入工具欄“布局”“描繪層” （2）定位層邊框線網(wǎng)格 （3）內(nèi)容對象的輸入 （4）層與表格的轉(zhuǎn)化DreamweaverMX的使用和管理4、 Dreamweaver 樣式表一、樣式表概念 樣式表英文縮寫為C

14、SS（Cascading Style Shets 層疊樣式單）?？梢钥醋魇菍TML語言功能的一種擴展。二、樣式表示例1、九磅字2、固定背景3、活動的超級鏈接DreamweaverMX的使用和管理 Dreamweaver 樣式表三、樣式表類型 1、自定義樣式是生成一個新的樣式 制作完成后需要手工應(yīng)用。 2、定義HTML標簽，將現(xiàn)有的HTML標 簽賦上樣式，制作后不需手工應(yīng)用。 3、CSS選擇器用于針對超級鏈接進行設(shè)置，主要有以下幾種類型a:Active選中超級鏈接狀態(tài)a:Hover光標移上超級鏈接狀態(tài)a:Link超級鏈接的正常狀態(tài)，沒有任何動作的時候a:Visited訪問過的超級鏈接狀態(tài)Dre

15、amweaverMX的使用和管理 Dreamweaver 樣式表四、樣式表沖突 顯示規(guī)則：1、兩種樣式同時應(yīng)用與同一文本時，顯示所有格式，除非格式發(fā)生沖突。2、當應(yīng)用與同一文本的樣式?jīng)_突時瀏覽器首先顯示內(nèi)部的樣式設(shè)置3、若有直接沖突DreamweaverMX的使用和管理 Dreamweaver 樣式表（一）概述 Filter是微軟對CSS的擴展，它可以用很簡單的方法對頁面中的文字特效作出特效處理，靜態(tài)如陰影、模糊的效果，動態(tài)如各種淡入淡出效果，它可以實現(xiàn)Javascript或Vbscript作為腳本語言等高級語言無法實現(xiàn)的功能 五、css濾鏡（Filter）的使用DreamweaverMX的使

16、用和管理 Dreamweaver 樣式表（二）例子演示 1、文字光暈效果 Glow 2、文字陰影效果 DropShow 3、文字動感效果 Blur五、css靜態(tài)濾鏡的使用DreamweaverMX的使用和管理 5、Dreamweaver 動態(tài)網(wǎng)頁設(shè)計一、表單的制作1、基本表單的建立2、表單數(shù)據(jù)的提交 提交方式： get:在地址攔能看到表單的數(shù)據(jù)，數(shù)據(jù)長度有限，速度快 post：在地址欄看不到，數(shù)據(jù)長度不限，速度相對慢DreamweaverMX的使用和管理 Dreamweaver 動態(tài)網(wǎng)頁設(shè)計二、行為控制例子演示：1、簡單鼠標行為動畫2、簡單菜單制作 鼠標行為的應(yīng)用 網(wǎng)頁特效代碼的應(yīng)用 onmo

17、useout=this.style.backgroundColor= onmouseover=this.style.backgroundColor=#ffddee DreamweaverMX的使用和管理 Dreamweaver 動態(tài)網(wǎng)頁設(shè)計二、行為控制3、層的隱藏與顯示4、菜單調(diào)出方法 視覺假象 使用鼠標移動事件5、層的拖動6、播放聲音 引發(fā)聲音行為的調(diào)整7、狀態(tài)欄的文本設(shè)置8、打開瀏覽器窗口DreamweaverMX的使用和管理 Dreamweaver 動態(tài)網(wǎng)頁設(shè)計三、網(wǎng)頁變換效果1、網(wǎng)頁過渡 “插入”“頭標記”“Meta” “插入”工具條“文件頭” 代碼： revealtrans(dura

18、tion=4 transtion=2) duration：延時 transtion：過渡效果DreamweaverMX的使用和管理 Dreamweaver 動態(tài)網(wǎng)頁設(shè)計三、網(wǎng)頁變換效果Transtion其他的部分效果取值：盒狀收縮 0 圓形收縮 2 向上擦除 4 垂直百頁窗 8 溶解 12 左右向中部收縮 13 隨機垂直線 22 隨機 23 DreamweaverMX的使用和管理 Dreamweaver 動態(tài)網(wǎng)頁設(shè)計四、交互式圖象的使用 方法：“插入”“交互式圖象” 1、Flash按紐的使用 2、Flash文本的使用 3、導(dǎo)航條的使用DreamweaverMX的使用和管理 Dreamweaver 動態(tài)網(wǎng)頁設(shè)計五、時間軸的使用（二）、時間軸面板 “窗口”其他”“時間軸”（一）、概述 層將網(wǎng)頁設(shè)計從二維空間延伸到三維空間，而時間軸則進一步將網(wǎng)頁設(shè)計延伸到思維空間。只有圖象和層可以使用時間軸，其他對象必需放置到層內(nèi)才能使用時間軸。DreamweaverMX的使用和管理 Dreamweaver 動態(tài)網(wǎng)頁設(shè)計五、時間軸的使用（三）、建立時間軸動畫 1、使用時間軸建立動畫主要是將層放置到時間軸中，用時間軸來改變每一幀屬性（包括層的位置、大小、可見度等） 2、將對象