DREAMWEAVER教案

1、第1章 初識(shí)Dreamweaver安裝、下載方法.一、教學(xué)目的：學(xué)習(xí)原DR的安裝、下載方法.二、教學(xué)重點(diǎn)：概述和安裝三、教學(xué)過(guò)程1.1 Dreamweaver MX概述1、直觀的新工作區(qū)2、更加強(qiáng)大的模板3、廣泛的代碼庫(kù)4、新服務(wù)器技術(shù)5、幫助初學(xué)者起步的示例內(nèi)容6、XML和WEB標(biāo)準(zhǔn)支持7、改進(jìn)的級(jí)聯(lián)樣式表（CSS）8、高性能的新編碼功能9、高性能的新編碼功能10、優(yōu)化COLDFUSIONMX開(kāi)發(fā)環(huán)境 1 / 115使用 Dreamweaver 工作區(qū)一、 教學(xué)目的：認(rèn)識(shí)DR的界面，了解各面板的組成，菜單的組成。二、 教學(xué)重點(diǎn)：各面板的組成。三、 教學(xué)過(guò)程：選擇工作區(qū)布局（僅適用于

2、 Windows） 在 Windows 中首次啟動(dòng) Dreamweaver 時(shí)，會(huì)出現(xiàn)一個(gè)對(duì)話(huà)框讓選擇一種工作區(qū)布局。如果以后改變了主意，可以使用“參數(shù)選擇”對(duì)話(huà)框切換到一種不同的工作區(qū)。選擇工作區(qū)布局： 選擇下列布局之一： Dreamweaver MX 工作區(qū)HomeSite/代碼編寫(xiě)者樣式的 Dreamweaver MX 工作區(qū)Dreamweaver 8 工作區(qū) 在選擇一種工作區(qū)后切換到另一種工作區(qū)： Dreamweaver MX 工作區(qū) 浮動(dòng)工作區(qū)布局（Windows 和 Macintosh） 狀態(tài)欄 “文檔”窗口底部的狀態(tài)欄提供與正創(chuàng)建的文檔有關(guān)的其他信息。調(diào)整“文檔”窗口的大小將“文

3、檔”窗口的大小調(diào)整為預(yù)定義的大?。?向“窗口大小”彈出式菜單中添加新的大小： 將“文檔”窗口最大化（僅適用于 Windows 集成工作區(qū)）： 使用快速啟動(dòng)條 快速啟動(dòng)條顯示在狀態(tài)欄中，包含用以打開(kāi)和關(guān)閉各種面板、檢查器和窗口的按鈕。 若要顯示快速啟動(dòng)條，請(qǐng)?jiān)凇懊姘濉眳?shù)選擇中啟用“在面板和啟動(dòng)器中顯示圖標(biāo)”選項(xiàng)?？梢灾付ㄔ诳焖賳?dòng)條中顯示哪些項(xiàng)目。使用文檔工具欄· “顯示代碼視圖· “顯示代碼視圖和設(shè)計(jì)視圖”· “顯示設(shè)計(jì)視圖 · “標(biāo)題” · “文件管理” · “在瀏覽器中預(yù)覽/調(diào)試”·“換行符”在插入點(diǎn)處插入一個(gè)換行符。

4、還可以按下 Shift+Enter (Windows) “不換行空格”在插入點(diǎn)處插入一個(gè)不換行的空格 ( )。 “左引號(hào)”、“右引號(hào)”和“破折線(xiàn)”在插入點(diǎn)處插入標(biāo)點(diǎn)符號(hào)。 “英鎊符號(hào)”、“歐元符號(hào)”和“日元符號(hào)”在插入點(diǎn)處插入貨幣符號(hào)。 “版權(quán)”、“注冊(cè)商標(biāo)”和“商標(biāo)”在插入點(diǎn)處插入相應(yīng)的符號(hào)。 “其它字符” 第二單元 文本的編輯與基本操作一、 教學(xué)目的：學(xué)習(xí)網(wǎng)頁(yè)的組成對(duì)象設(shè)計(jì)要素文本的字體大小顏色，段落的格式，基本的編輯命令。二、 學(xué)教重點(diǎn)：文本編輯的基本操作三、 教學(xué)過(guò)程：網(wǎng)頁(yè)的組成比報(bào)紙和雜志復(fù)雜的多，因?yàn)樗瑘D、聲、文、動(dòng)畫(huà)、控件等多媒體，另一大特點(diǎn)有超級(jí)鏈接。1、

5、 文字標(biāo)題：一般為圖形尺寸系統(tǒng)默認(rèn)大小樣式：一般少用下劃線(xiàn)字體：一般為系統(tǒng)默認(rèn)大小顏色：以顏色來(lái)強(qiáng)調(diào)文章的重點(diǎn)2、 圖形一般為GIF和JPG格式3、 超級(jí)鏈接站內(nèi)鏈接和站外鏈接網(wǎng)頁(yè)的設(shè)計(jì)要素不同瀏覽器的顯示效果網(wǎng)絡(luò)的傳輸速度屏幕的分辨率顏色的顯示網(wǎng)頁(yè)的基本操作創(chuàng)建網(wǎng)頁(yè)文件新建對(duì)話(huà)框打開(kāi)文件類(lèi)型HTMLSHTMSHTMLXML文件庫(kù)文件LBI模板文件DWT樣式表文件CSS微軟服務(wù)器端文件ASPJAVA服務(wù)器端文件PHP文件TXT文件CFM模板文件JSF fireworks文件LASSO打開(kāi)當(dāng)前站點(diǎn)文件從站點(diǎn)面板中打開(kāi)或通過(guò)菜單文件打開(kāi)命令打開(kāi)最近使用的文件文件菜單下列出的文件名從WORD中導(dǎo)入文

6、件先在WORD中將文件保存為HTML文件然后在DR中文件導(dǎo)入WORDHTML還可打開(kāi)后用命令清除保存網(wǎng)頁(yè)另存為模板輸入文本直接輸入使用剪貼板用ENTER相當(dāng)于插入<p> 用SHIFTENTER 相當(dāng)于插入<br>改變字體樣式改變字號(hào)要使字體不隨瀏覽器的字體設(shè)置而改變就要用到層疊樣式（CSS Style）文本的顏色選擇文字然后用下列兩種方式l 用文字屬性面板中調(diào)整l 單擊調(diào)色板中的右上角按鈕或菜單文本顏色l 要將字體改為默認(rèn)值點(diǎn)段 落 格 式創(chuàng)新新段落：ENTER分段落在段落格式下拉菜單選擇一種格式對(duì)齊段落：居中對(duì)齊左對(duì)齊右對(duì)齊縮進(jìn)段落或菜單或選擇段落后右擊彈出菜單取消縮

7、進(jìn)項(xiàng)目符號(hào)：每個(gè)段落前加一個(gè)項(xiàng)目符號(hào)用利用列表下拉選擇各種不同的情況插入分隔線(xiàn)修改分隔線(xiàn)的屬性、改變長(zhǎng)度改變高度、改變對(duì)齊方式、插入特殊字符和符號(hào) 、 菜單插入特殊字符彈出子菜單，進(jìn)行所需要的項(xiàng)目選擇其中包括：換行符SHIFTRETURN不換行空格CTRELSHIFTSPACE用于行首插入符號(hào)Email 地址鏈接插入電子郵件鏈接其效果將看到“歡迎聯(lián)系”字樣并帶下劃線(xiàn)可以發(fā)送郵件插入日期時(shí)間：插入注釋文字基本編輯命令撤銷(xiāo)和重復(fù)操作查找和替換移動(dòng)和復(fù)制直接用鼠標(biāo)拖動(dòng)使用CUTCOPYPASTE靈活使用HISTORY面板SHIFTF10表示當(dāng)前剛完成的操重放按鈕復(fù)制到剪帖板按鈕保存命令按鈕彈出菜單按

8、鈕可清除歷史記錄等操作第3單元網(wǎng)頁(yè)中的圖像鏈接教學(xué)目的：掌握網(wǎng)頁(yè)中插入圖像、修改屬性、插入交互圖像以及創(chuàng)建交互圖像的方法。教學(xué)重點(diǎn)：插入圖像、控制圖像創(chuàng)建鏈接、插入交互圖像的方法。插入圖像操作： 1. 在“文檔”窗口中，將插入點(diǎn)放置在您要顯示圖像的地方，然后執(zhí)行以下操作之一：o 在“插入”欄的“常用”類(lèi)別中，單擊“圖像”圖標(biāo)。o 在“插入”欄的“常用”類(lèi)別中，將“圖像”圖標(biāo)拖入“文檔”窗口中（或者，如果您正處理代碼，則拖入“代碼”視圖窗口中）。 o 選擇“插入”>“圖像”。 o 將圖像從“資源”面板（“窗口”>“資源”）拖到“文檔”窗口中的所需位置；然后跳到第 3 步。o 將圖像從

9、“站點(diǎn)”面板拖到“文檔”窗口中的所需位置；然后跳到第 3 步。o 將圖像從桌面拖到“文檔”窗口中的所需位置；然后跳到第 3 步。 2. 在出現(xiàn)的對(duì)話(huà)框中執(zhí)行下列操作之一：o 選擇“文件系統(tǒng)”以選擇一個(gè)圖形文件。o 選擇“數(shù)據(jù)源”以選擇一個(gè)動(dòng)態(tài)圖像源文件。3. 瀏覽以選擇您要插入的圖像或內(nèi)容源文件。如果您正在一個(gè)未保存的文檔中工作，則 Dreamweaver 生成一個(gè)對(duì)圖像文件的 file:/ 引用。將文檔保存到站點(diǎn)中的任何位置后，Dreamweaver 將該引用轉(zhuǎn)換為文檔相對(duì)路徑。 4. 在屬性檢查器（“窗口”>“屬性”）中，設(shè)置該圖像的屬性。設(shè)置圖像屬性 1. 設(shè)置以下任一選項(xiàng)：o 使

10、用縮略圖下面的文本域設(shè)置名稱(chēng)，以便在使用 Dreamweaver 行為（例如“交換圖像”）或腳本撰寫(xiě)語(yǔ)言（例如 JavaScript 或 VBScript）時(shí)可以引用該圖像。o “寬”和“高”以像素為單位指定圖像的寬度和高度。o “源文件”指定圖像的源文件。單擊文件夾圖標(biāo)以瀏覽到源文件，或者鍵入路徑。 “鏈接”指定圖像的超鏈接。將“指向文件”圖標(biāo)拖到“站點(diǎn)”面板中的某個(gè)文件，單擊文件夾圖標(biāo)瀏覽到站點(diǎn)上的某個(gè)文檔，或手動(dòng)鍵入 URL。 有關(guān)創(chuàng)建鏈接的信息， “對(duì)齊”對(duì)齊同一行上的圖像和文本?！疤娲敝付ㄖ伙@示文本的瀏覽器或已設(shè)置為手動(dòng)下載圖像的瀏覽器中代替圖像顯示的替代文本。對(duì)于使用語(yǔ)

11、音合成器（用于只顯示文本的瀏覽器）的有視覺(jué)障礙的用戶(hù)，將大聲讀出該文本。在某些瀏覽器中，當(dāng)鼠標(biāo)指針滑過(guò)圖像時(shí)也會(huì)顯示該文本。 “地圖名稱(chēng)”和“熱點(diǎn)工具”允許您標(biāo)注和創(chuàng)建客戶(hù)端圖像地圖。 “垂直邊距”和“水平邊距”沿圖像的邊緣添加邊距（以像素為單位）。 “垂直邊距”沿圖像的頂部和底部添加邊距?！八竭吘唷毖貓D像左側(cè)和右側(cè)添加邊距。 “目標(biāo)”指定鏈接的頁(yè)應(yīng)當(dāng)在其中載入的框架或窗口。 _blank，將鏈接的文件載入一個(gè)未命名的新瀏覽器窗口中。 _parent，將鏈接的文件載入含有該鏈接的框架的父框架集或父窗口中。如果含有該鏈接的框架不是嵌套的，則在瀏覽器全屏窗口中載入鏈接的文件。 _sel

12、f，將鏈接的文件載入該鏈接所在的同一框架或窗口中。此目標(biāo)為默認(rèn)值，因此通常不需要指定它。 _top，在整個(gè)瀏覽器窗口中載入所鏈接的文件，因而會(huì)刪除所有框架。  “邊框”是以像素為單位的圖像邊框的寬度。默認(rèn)為無(wú)邊框。 “編輯”啟動(dòng)您在“外部編輯器”參數(shù)選擇中指定的圖像編輯器并打開(kāi)選定的圖像。有關(guān)設(shè)置外部圖像編輯器的信息， “重設(shè)大小” Control+代字號(hào) () 第四單元表格設(shè)計(jì)教學(xué)目的：學(xué)習(xí)下列方法· 在“標(biāo)準(zhǔn)”視圖中創(chuàng)建和修改表格· 向表格添加顏色· 在“標(biāo)準(zhǔn)”視圖中設(shè)置相對(duì)寬度的表格教學(xué)重點(diǎn)：能進(jìn)行表格設(shè)計(jì)教學(xué)過(guò)程：在“標(biāo)準(zhǔn)”視圖中創(chuàng)建和修改表格

13、1. 在 Dreamweaver 中，選擇“文件”>“新建”。即出現(xiàn)“新建文檔”對(duì)話(huà)框。 2. 在“空文檔”列表中，選擇“HTML”，然后單擊“創(chuàng)建”以創(chuàng)建一個(gè)新的 HTML 文檔。3. 在“文檔”工具欄的“標(biāo)題”文本域中，輸入“表格設(shè)計(jì)”為文檔添加一個(gè)標(biāo)題。4. 選擇“文件”>“保存”將該文檔保存到本地站點(diǎn)文件夾中。將其命名為 tableModify.htm。 插入表格 現(xiàn)在就可以在文檔中插入表格了。 1. 在“文檔”窗口，將插入點(diǎn)放到文檔中，然后執(zhí)行下列操作之一： o 選擇“插入”>“表格”。o 在插入欄的“常用”類(lèi)別中，單擊“表格”圖標(biāo)。 出現(xiàn)“插入表格”對(duì)話(huà)

14、框。2. 在該對(duì)話(huà)框中，設(shè)置下列選項(xiàng)： o 在“行數(shù)”文本框中，鍵入 2。o 在“列數(shù)”文本框中，鍵入 2。o 在“寬度”文本框中鍵入 600，然后在“寬度”文本框右邊的彈出式菜單中選擇像素。將寬度設(shè)置為 600 像素將創(chuàng)建一個(gè)固定寬度的表格。稍后，我們將在本教程中更詳細(xì)地討論表格寬度。 o 在“邊框”文本框中，鍵入 1 將表格和表格單元格周?chē)倪吙驅(qū)挾仍O(shè)置為 1 個(gè)像素。3. 單擊“確定”。Dreamweaver 將該表格插入到文檔中。 4. 執(zhí)行下列操作之一來(lái)保存文檔：o 選擇“文件”>“保存”。o 按 Ctrl+S 組合鍵 修改表格 下一步，將修改表格的布局。將在表格中添加行和列，

15、并且學(xué)習(xí)如何合并和拆分單元格以創(chuàng)建所需的頁(yè)面布局。 1. 在左上方的單元格中單擊，然后向下拖動(dòng)直到最下面的行以選擇左邊的一列。2. 選擇“修改”>“表格”>“插入列”?，F(xiàn)在該表格包含三列。 3. 單擊左下方的單元格，然后選擇“修改”>“表格”>“插入行或列”。即出現(xiàn)“插入行或列”對(duì)話(huà)框。 提示： 如果想要插入特定數(shù)目的行或列，或者要選擇在表格中插入行或列的位置，請(qǐng)選擇“插入行或列”選項(xiàng)。4. 在該對(duì)話(huà)框中，設(shè)置下列選項(xiàng)：對(duì)于“插入”，選擇行。 在“行數(shù)”框中，鍵入 2。 對(duì)于“位置”，選擇 所選之上。 5. 單擊“確定”。表格即會(huì)更新?，F(xiàn)在的表格為四行三列。 6. 保存

16、所做的更改（“文件”>“保存”）。合并和拆分單元格 通過(guò)合并和拆分單元格，可以自定義表格的設(shè)計(jì)以符合布局需要。接下來(lái)，將看到如何使用菜單選項(xiàng)或?qū)傩詸z查器來(lái)合并或拆分表格單元格。 1. 在文檔中，將指針從左上方的單元格拖到它下面的一個(gè)單元格，以選擇表格左列的上面兩個(gè)單元格。2. 選擇“修改”>“表格”>“合并單元格”。 兩個(gè)單元格合并成一個(gè)單元格。3. 單擊第二列的第三行，然后向右向下拖動(dòng)以選擇第二列和第三列中的最后兩行單元格。 4. 在屬性檢查器中，單擊“合并”按鈕以合并單元格。選定的單元格合并為一個(gè)單元格?？梢圆鸱謫蝹€(gè)的單元格或列。 1. 單擊左上方的單元格。2. 在屬性檢

17、查器中，單擊“拆分單元格”按鈕?！安鸱謫卧瘛睂?duì)話(huà)框出現(xiàn)。3. 在該對(duì)話(huà)框中，設(shè)置下列選項(xiàng)：o 對(duì)于“把單元格拆分”，選擇列。o 在“列數(shù)”框中，輸入 2。4. 單擊“確定”。表格即被修改。更改行高和列寬 現(xiàn)在調(diào)整該表格的尺寸。將要增加表格的行間距，并且調(diào)整表格列間距。 1. 沿表格底部邊框移動(dòng)指針直到指針變成一個(gè)邊框選擇器，然后向下拖動(dòng)以調(diào)整表格大小。如果愿意，還可以使用此方法調(diào)整表格中的其他行高。 2. 沿一個(gè)列的邊框移動(dòng)指針直到指針變成一個(gè)邊框選擇器，然后向左或向右拖動(dòng)它以更改列寬。3. 調(diào)整完成后，保存文檔。向表格添加顏色 可以向表格的任何部分添加顏色。將首先向整個(gè)表格添加背景顏色，然

18、后對(duì)表格中的單元格應(yīng)用不同的背景顏色。最后，將更改邊框顏色。 1. 在文檔中，單擊表格的任何一個(gè)單元格，然后在位于文檔窗口左下方的標(biāo)簽選擇器中單擊 <table> 標(biāo)簽以選擇整個(gè)表格。2. 如果屬性檢查器尚未打開(kāi)，則打開(kāi)屬性檢查器（“窗口”>“屬性”）。屬性檢查器中出現(xiàn)所選表格的屬性。3. 在屬性檢查器中，執(zhí)行下列操作之一，在“背景顏色”文本框中選擇一種顏色：o 單擊顏色選擇器彈出式菜單，然后從顏色選擇器中選擇一種顏色。o 輸入一個(gè)十六進(jìn)制的顏色值，例如 #CC9933。o 輸入一個(gè)網(wǎng)頁(yè)安全色名稱(chēng)，如 goldenrod。將一種背景顏色應(yīng)用到表格。4. 用同樣的方法可以將一種

19、背景顏色應(yīng)用到表格的單元格中。在左上方的單元格中單擊，然后在屬性檢查器的“背景顏色”文本框中選擇一種不同的顏色。5. 如果需要，還可以向其他單元格中添加顏色。添加邊框顏色 現(xiàn)在，將設(shè)置表格邊框的顏色。邊框顏色同時(shí)應(yīng)用于表格的外邊框和內(nèi)邊框。 1. 在文檔窗口中，選擇表格。2. 在屬性檢查器的“邊框”文本框中，使用顏色選擇器為表格選擇一種邊框顏色。 3. 完成后，請(qǐng)保存文檔。4. 按 F12 鍵（僅限于 Windows）或者選擇“文件”>“在瀏覽器中預(yù)覽”，然后選擇一種瀏覽器以查看文檔。在“標(biāo)準(zhǔn)”視圖中設(shè)置相對(duì)寬度的表格 1. 在 Dreamweaver 中，選擇“文件”>“新建”。

20、2. 在“新建文檔”對(duì)話(huà)框中，已經(jīng)選定了“基本頁(yè)”類(lèi)別；在“基本頁(yè)”列表中，雙擊“HTML”創(chuàng)建一個(gè)新的 HTML 文檔。文檔在文檔窗口中打開(kāi)。 3. 將該文件保存到本地站點(diǎn)文件夾。將其命名為 tableWidth。4. 將插入點(diǎn)放置在文檔中。5. 在插入欄的“常用”選項(xiàng)卡中，單擊“表”按鈕。6. 在出現(xiàn)的對(duì)話(huà)框中，設(shè)置下列選項(xiàng)：在“行數(shù)”文本框中，鍵入 2。 在“列數(shù)”文本框中，鍵入 3。 在“寬度”文本框中，鍵入 90，并在“寬度”文本框右邊的彈出式菜單中選擇百分比。 在“邊框”文本框中，輸入 1 將表格和表格單元格周?chē)倪吙驅(qū)挾仍O(shè)置為 1 個(gè)像素。 7. 單擊“確定”。表格即出現(xiàn)在文檔中

21、。 8. 單擊中間列最上方的單元格并拖動(dòng)到最下方的單元格以選擇中間列。 9. 在屬性檢查器中，使用顏色選擇器將一種背景顏色應(yīng)用于該列。 創(chuàng)建其寬度基于像素的表格 現(xiàn)在將添加另外一個(gè)表格。其寬度基于像素的表格被設(shè)置為某個(gè)特定寬度，并且不會(huì)隨著瀏覽器窗口大小的改變而改變。 1. 在剛剛插入的表格后面插入一個(gè)段落回車(chē)。2. 在插入欄的“常用”選項(xiàng)卡中，單擊“表”按鈕。3. 在出現(xiàn)的對(duì)話(huà)框中，設(shè)置下列選項(xiàng)：在“行數(shù)”文本框中，鍵入 2。 在“列數(shù)”文本框中，鍵入 3。 在“寬度”文本框中，鍵入 600，然后在“寬度”文本框右邊的彈出式菜單中選擇像素。 在“邊框”文本框中，鍵入 1 將表格和表格單元格周

22、圍的邊框?qū)挾仍O(shè)置為 1 個(gè)像素。 4. 單擊“確定”。表格即出現(xiàn)在文檔中。 5. 單擊中間列的最上方單元格并向下拖動(dòng)到最下方的單元格以選擇中間列。  6. 在屬性檢查器中，使用顏色選擇器將一種背景顏色應(yīng)用于該列。 7. 按 F12 鍵（僅限于 Windows）或者選擇“文件”>“在瀏覽器中預(yù)覽”，然后選擇一種瀏覽器以查看文檔。調(diào)整瀏覽器窗口大小以查看在瀏覽器窗口改變時(shí)，這兩個(gè)表格是怎樣變化的。基于像素的表格保持大小不變，而基于百分比的表格則調(diào)整大小以符合瀏覽器大小。 8. 文檔查看完畢后，請(qǐng)關(guān)閉瀏覽器窗口。9. 保存文檔。創(chuàng)建和保存新文檔 1. 在 Dreamweaver 中，

23、選擇“文件”>“新建”。2. 在“新建文檔”對(duì)話(huà)框中，已經(jīng)選定“基本頁(yè)”類(lèi)別。在“基本頁(yè)”列表中選擇“HTML”，然后單擊“創(chuàng)建”創(chuàng)建一個(gè)新的 HTML 文檔。文檔在文檔窗口中打開(kāi)。 3. 將該文檔保存到的本地站點(diǎn)文件夾中，并將其命名為 tableLayout.htm。 第五單元版面設(shè)計(jì)1. 教學(xué)目的：能輕松地設(shè)計(jì)出合理的網(wǎng)頁(yè)設(shè)計(jì)2. 教學(xué)重點(diǎn)：創(chuàng)建、布局和調(diào)整布局表格3. 課堂講解：創(chuàng)建布局表格和布局單元格繪制布局表格： 如果要?jiǎng)?chuàng)建多個(gè)布局表格而又不想每次都單擊布局表格按鈕，按住CTRL再創(chuàng)建。創(chuàng)建布局表格時(shí)會(huì)靠近頁(yè)面邊界8個(gè)像時(shí)會(huì)自動(dòng)對(duì)齊。取消對(duì)齊功能用按ALT鍵繪制布局單元格：在頁(yè)

24、面上制作一個(gè)單元格以后，會(huì)自動(dòng)創(chuàng)建了一個(gè)包含這個(gè)布局單元格的布局表格，在一個(gè)布局表格里可以創(chuàng)建幾個(gè)單元格。組件繪制嵌套的布局表格：在一個(gè)表格里繪制另一個(gè)布局表格，稱(chēng)為布局表格的嵌套，在一個(gè)表格里可以創(chuàng)建多個(gè)嵌套布局表格使用輔助網(wǎng)格線(xiàn)：菜單中查看網(wǎng)格網(wǎng)格設(shè)置顯示網(wǎng)格CTRLALTG捕捉網(wǎng)格SHIFTALTCTRLG在布局單元格中添加內(nèi)容：添加文本、添加圖像、調(diào)整布局表格和布局單元格單擊單元格的邊框，或按住CTRL單擊單元格中的任何位置，在布局單元格中的邊框上會(huì)出現(xiàn)控制柄。拖動(dòng)控制柄就可以改變布局單元格的大小。移動(dòng)布局單元格：1是選定，2是拖動(dòng)或用方向鍵每按一次移動(dòng)一個(gè)像素。按住SHIFT鍵每按一

25、次可移動(dòng)10個(gè)像素。設(shè)置布局單元格：選定單元格在屬性面板中設(shè)置設(shè)置布局表格：選定后在屬性面板中設(shè)置設(shè)置自動(dòng)伸展寬度設(shè)置指定寬度使用間隔圖第六單元框架一、 教學(xué)目的：學(xué)習(xí)框架集，框架集中保存及關(guān)聯(lián)文件。二、 教學(xué)重點(diǎn)：框架集的基本概念和基本操作三、 課堂講解：1、框架的作用2、創(chuàng)建框架方法用菜單方法用拖動(dòng)框架任一角，或一邊。按ALT拖動(dòng)邊框架拖出另一邊合并4、 插入預(yù)定義框架集5、 嵌套的框架集保存框架集文件CTRLS只能保存當(dāng)前頁(yè)面。保存框架保存全部一定要搞清楚框架集和各框架的名字于其對(duì)應(yīng)的關(guān)系?？蚣芘c框架的屬性邊框?qū)傩钥蚣芗_定框架的大小設(shè)置框架集的邊框改變框架背景的顏色使用鏈接控制框架

26、的內(nèi)容空白上級(jí)自身頂部第7單元層的運(yùn)用一、教學(xué)目的：創(chuàng)建層，層的參數(shù)選擇和屬性設(shè)置，層的操作，改變層的堆棧順序，改變層的可見(jiàn)性，層與表格。二、教學(xué)重點(diǎn)：層的運(yùn)用三、課堂講解：打開(kāi)“層”面板，請(qǐng)選擇“窗口”>“其他”>“層”。F2創(chuàng)建層：設(shè)置層的可見(jiàn)性層的名稱(chēng)創(chuàng)建嵌套層：嵌套層是其代碼包含在另一個(gè)層中的層。嵌套通常用于將層組織在一起。嵌套層隨其父層一起移動(dòng)，并且可以設(shè)置為繼承其父級(jí)的可見(jiàn)性。 1. 層的屬性設(shè)置：設(shè)置以下任一選項(xiàng)：層 ID 用于指定一個(gè)名稱(chēng)，以便在“層”面板和 JavaScript 代碼中標(biāo)識(shí)該層。請(qǐng)輸入一個(gè)名稱(chēng)。只應(yīng)使用標(biāo)準(zhǔn)的字母數(shù)字字符，而不要使用空格、連字符、斜

27、杠或句號(hào)等特殊字符。每個(gè)層都必須有它自己的唯一名稱(chēng)。 左和上（左側(cè)和頂部）指定層的左上角相對(duì)于頁(yè)面（如果嵌套，則為父層）左上角的位置。 寬和高指定層的寬度和高度。 層的移動(dòng)與對(duì)齊：選擇層。 選擇“修改”>“對(duì)齊”，然后選擇一個(gè)對(duì)齊選項(xiàng)。調(diào)整層大?。寒?dāng)處理頁(yè)面布局時(shí)，可以對(duì)層進(jìn)行選擇、移動(dòng)、大小調(diào)整和對(duì)齊。在對(duì)一個(gè)層進(jìn)行移動(dòng)、大小調(diào)整或?qū)R之前，必須先選擇該層。 若要防止在對(duì)層進(jìn)行移動(dòng)和大小調(diào)整時(shí)使層相互重疊，請(qǐng)使用“防止重疊”選項(xiàng)層與網(wǎng)格對(duì)齊：設(shè)置網(wǎng)格顯示和對(duì)齊，拖動(dòng)層然后釋放即對(duì)齊改變層的順序：用鼠標(biāo)拖動(dòng)上下位置層與表格：可以轉(zhuǎn)變，菜單修改轉(zhuǎn)變層到表格表格到層要防止層的重疊第八單元使用

28、“時(shí)間軸”面板“時(shí)間軸”面板顯示層和圖像的屬性在一段時(shí)間內(nèi)如何更改。選擇“窗口”>“其他”>“時(shí)間軸”可打開(kāi)“時(shí)間軸”面板。 “時(shí)間軸”彈出式菜單指定當(dāng)前在“時(shí)間軸”面板中顯示文檔的哪些時(shí)間軸。 播放欄顯示當(dāng)前在文檔窗口中顯示時(shí)間軸的哪一幀。 幀編號(hào)指示幀的序號(hào)?！昂笸恕焙汀安シ拧卑粹o之間的數(shù)字是當(dāng)前幀編號(hào)。您可以通過(guò)設(shè)置幀的總數(shù)和每秒幀數(shù) (fps) 來(lái)控制動(dòng)畫(huà)的持續(xù)時(shí)間。每秒 15 幀這一默認(rèn)設(shè)置是比較適當(dāng)?shù)钠骄俾?，可用于在通常?Windows 和 Macintosh 系統(tǒng)上運(yùn)行的大多數(shù)瀏覽器。 備注： 較快的速率可能不會(huì)提高性能。瀏覽器始終會(huì)播放動(dòng)畫(huà)的每一幀，即使它們無(wú)法

29、達(dá)到指定的幀速率。如果幀速率超過(guò)瀏覽器可以支持的速率，則將被忽略。上下文菜單包含各種與時(shí)間軸相關(guān)的命令。 “行為”通道是應(yīng)該在時(shí)間軸中特定幀處執(zhí)行的行為的通道。 動(dòng)畫(huà)條顯示每個(gè)對(duì)象的動(dòng)畫(huà)的持續(xù)時(shí)間。一個(gè)行可以包含表示不同對(duì)象的多個(gè)條。不同的條無(wú)法控制同一幀中的同一對(duì)象。 關(guān)鍵幀是動(dòng)畫(huà)條中已經(jīng)為對(duì)象指定屬性（如位置）的幀。Dreamweaver會(huì)計(jì)算關(guān)鍵幀之間幀的中間值。小圓標(biāo)記表示關(guān)鍵幀。 “動(dòng)畫(huà)”通道顯示用于制作層和圖像動(dòng)畫(huà)的條。 重命名時(shí)間軸1. 選擇“修改”>“時(shí)間軸”>“重命名時(shí)間軸”。2. 在“重命名時(shí)間軸”對(duì)話(huà)框中輸入新的名稱(chēng)。時(shí)間軸制作層動(dòng)畫(huà)，請(qǐng)執(zhí)行以下操作： 1.

30、將層移至它在動(dòng)畫(huà)開(kāi)始時(shí)應(yīng)處于的位置。2. 選擇“窗口”>“其他”>“時(shí)間軸”。 3. 選擇您要制作動(dòng)畫(huà)的層。 4. 在層中單擊會(huì)將一個(gè)閃爍的插入點(diǎn)放入層中，但不會(huì)選定該層。 5. 選擇“修改”>“時(shí)間軸”>“在時(shí)間軸上添加對(duì)象”，或者簡(jiǎn)單地將選定層拖至“時(shí)間軸”面板中。6. 一個(gè)條將出現(xiàn)在時(shí)間軸的第一個(gè)通道中。層的名稱(chēng)將在該條中出現(xiàn)。 7. 單擊位于條末端的關(guān)鍵幀標(biāo)記。8. 在頁(yè)面上將層移至它在動(dòng)畫(huà)結(jié)束時(shí)應(yīng)處于的位置。 9. 將出現(xiàn)一條線(xiàn)，它顯示文檔窗口中動(dòng)畫(huà)的軌跡。 10. 如果要讓層沿曲線(xiàn)移動(dòng)，請(qǐng)選擇其動(dòng)畫(huà)條，然后按住 Ctrl 鍵并單擊 (Windows) 或按住

31、 Command 鍵并單擊 (Macintosh) 動(dòng)畫(huà)條中部的一個(gè)幀，從而在您單擊的幀處添加一個(gè)關(guān)鍵幀，或者單擊動(dòng)畫(huà)條中部的一個(gè)幀并從上下文菜單中選擇“添加關(guān)鍵幀”。11. 重復(fù)此步驟，定義其他關(guān)鍵幀。 12. 按住“播放”按鈕，預(yù)覽頁(yè)面上的動(dòng)畫(huà)。 · 顯示和隱藏層，而不是更改多圖像動(dòng)畫(huà)的源文件。由于新的圖像必須進(jìn)行下載，所以切換圖像的源文件會(huì)降低動(dòng)畫(huà)的速度。如果所有圖像都在動(dòng)畫(huà)運(yùn)行前在隱藏層中同時(shí)下載，將不會(huì)出現(xiàn)明顯的停頓，并且不會(huì)缺少圖像。· 擴(kuò)展動(dòng)畫(huà)條以創(chuàng)建更順暢的動(dòng)作。如果動(dòng)畫(huà)斷斷續(xù)續(xù)并且圖像在不同位置之間跳動(dòng)，請(qǐng)拖動(dòng)該層動(dòng)畫(huà)條的結(jié)束幀，使動(dòng)作延伸到更多的幀。通過(guò)

32、延長(zhǎng)動(dòng)畫(huà)條，可以在運(yùn)動(dòng)的開(kāi)始點(diǎn)和結(jié)束點(diǎn)之間創(chuàng)建更多的數(shù)據(jù)點(diǎn)，同時(shí)也會(huì)使對(duì)象更為緩慢地移動(dòng)。請(qǐng)嘗試增加每秒幀數(shù) (fps) 以提高速度，但應(yīng)注意在普通系統(tǒng)上運(yùn)行的大多數(shù)瀏覽器都不能支持超過(guò) 15 fps 的動(dòng)畫(huà)速度。請(qǐng)?jiān)诓煌南到y(tǒng)上用不同的瀏覽器對(duì)動(dòng)畫(huà)進(jìn)行測(cè)試，以找到最佳的設(shè)置。· 不要制作大型位圖的動(dòng)畫(huà)。制作大型圖像的動(dòng)畫(huà)會(huì)導(dǎo)致動(dòng)畫(huà)速度減慢。相反，應(yīng)創(chuàng)建合成圖像，并移動(dòng)圖像中較小的部分。例如，可以通過(guò)僅制作汽車(chē)輪胎的動(dòng)畫(huà)來(lái)顯示汽車(chē)的運(yùn)動(dòng)。· 創(chuàng)建簡(jiǎn)單的動(dòng)畫(huà)。不要?jiǎng)?chuàng)建對(duì)當(dāng)前瀏覽器要求過(guò)高的動(dòng)畫(huà)。即使在系統(tǒng)或 Internet 性能降低時(shí)，瀏覽器始終會(huì)播放時(shí)間軸動(dòng)畫(huà)中的每一幀。

33、多個(gè)時(shí)間軸： 1. 若要新建時(shí)間軸，請(qǐng)選擇“修改”>“時(shí)間軸”>“添加時(shí)間軸”。2. 若要?jiǎng)h除選定的時(shí)間軸，請(qǐng)選擇“修改”>“時(shí)間軸”>“刪除時(shí)間軸”。這將永久刪除選定時(shí)間軸中的所有動(dòng)畫(huà)。3. 若要重命名選定時(shí)間軸，請(qǐng)選擇“修改”>“時(shí)間軸”>“重命名時(shí)間軸”，或者在“時(shí)間軸”面板的“時(shí)間軸”彈出式菜單中輸入新的名稱(chēng)。4. 若要在“時(shí)間軸”面板中查看另一個(gè)時(shí)間軸，請(qǐng)從“時(shí)間軸”面板的“時(shí)間軸”彈出式菜單中選擇一個(gè)新的時(shí)間軸。拖動(dòng)軌跡來(lái)創(chuàng)建時(shí)間軸： 1. 選擇一個(gè)層。2. 將該層移至它在動(dòng)畫(huà)開(kāi)始時(shí)應(yīng)處于的位置。確保您已選定該層；如果插入點(diǎn)位于該層中，則說(shuō)明尚未

34、選定該層。若要選擇一個(gè)層，請(qǐng)單擊層標(biāo)記或?qū)拥倪x擇柄，或者使用“層”面板。 3. 選擇“修改”>“時(shí)間軸”>“記錄層的軌跡”。4. 在頁(yè)面上拖動(dòng)層以創(chuàng)建軌跡。5. 當(dāng)?shù)竭_(dá)動(dòng)畫(huà)應(yīng)停止的點(diǎn)時(shí)釋放該層。Dreamweaver在時(shí)間軸上添加一個(gè)動(dòng)畫(huà)條，其中包含適當(dāng)數(shù)量的關(guān)鍵幀。 6. 在“時(shí)間軸”面板中，單擊“倒帶”按鈕；然后按住“播放”按鈕預(yù)覽動(dòng)畫(huà)。第9單元行為1、 教學(xué)目的：行為概述，自帶的行為使用2、 教學(xué)重點(diǎn)：行為的使用3、 課堂教學(xué)行為基礎(chǔ)在網(wǎng)頁(yè)制作中，幾乎所有的特效都是通過(guò)編寫(xiě)腳本語(yǔ)言來(lái)實(shí)現(xiàn)的。通常應(yīng)用較多的腳本語(yǔ)言有兩種：VBScript和JavaScript。其中JavaSc

35、ript因?yàn)槠浜?jiǎn)單易用和眾多的支持者而在網(wǎng)頁(yè)制作者中最為廣泛流行。在我們?cè)O(shè)計(jì)網(wǎng)頁(yè)的時(shí)候，接受事件和響應(yīng)事件的對(duì)象一般就是我們?cè)谇懊嬲鹿?jié)中介紹的頁(yè)面元素或?yàn)g覽器本身。在HTML語(yǔ)言中，這些頁(yè)面元素是用“Tag”（HTML標(biāo)記）來(lái)表示的，下面列出了我們?cè)谶@一章中可能用到的HTML標(biāo)記：<body>定義文檔正文；<a>定義鏈接；<img>定義圖像；<form>定義表單；<table>定義表格；<tr>定義表格的一行；<td>定義表格的單元格(表格的具體數(shù)據(jù))；<frameset>定義框架集；<fra

36、me>定義框架；<div>定義塊元素；<p>定義段落 ；<ol>定義有序列表；<ul>定義無(wú)序列表；<li>定義列表元素；我們這一章可能用到的常見(jiàn)的事件有：onMouseOver：鼠標(biāo)指針移到目標(biāo)上時(shí)；onMouseUp：按下鼠標(biāo)再放開(kāi)左鍵時(shí)；onMouseOut：鼠標(biāo)指針從目標(biāo)移開(kāi)時(shí)；onMouseDown：按下鼠標(biāo)左鍵時(shí)（不需要放開(kāi)左鍵）；onClink：鼠標(biāo)左鍵單擊時(shí)；onDblClick：鼠標(biāo)左鍵雙擊時(shí)；onLoad：載入網(wǎng)頁(yè)時(shí)；onUnload：離開(kāi)頁(yè)面時(shí)；onResize：當(dāng)瀏覽者改變?yōu)g覽窗口的大小時(shí)；onScrol

37、l：當(dāng)瀏覽者拖動(dòng)滾動(dòng)條的時(shí)；行為面板依次單擊菜單欄【W(wǎng)indows/Behaviors】(窗口/行為) ，或按快捷鍵Shift+F3，或單擊“Show Behaviors”（顯示行為面板）按鈕，展開(kāi)“Design/Behaviors”（設(shè)計(jì)/行為）面板（如圖13-1）：圖13-1“”（添加行為按鈕）：?jiǎn)螕粼摪粹o添加行為（包括事件和動(dòng)作），常見(jiàn)的動(dòng)作如下：“Call JavaScript”（調(diào)用JavaScript）：?jiǎn)螕粼撨x項(xiàng)可以調(diào)用自己制作的JavaScript腳本或第三方開(kāi)發(fā)的JavaScript腳本；“Change Property”（改變屬性）：改變頁(yè)面元素的各項(xiàng)屬性；“Check B

38、rowser”（檢查瀏覽器）：同一個(gè)網(wǎng)頁(yè)，在不同的瀏覽器上的顯示可能大為不同；為了使我們的網(wǎng)頁(yè)在各種不同的瀏覽器中都完美無(wú)缺，我們可以分別針對(duì)不同的瀏覽器將同一網(wǎng)頁(yè)制作成幾個(gè)不同頁(yè)面，然后再調(diào)用Check Browser，根據(jù)訪(fǎng)問(wèn)者瀏覽器的不同自動(dòng)進(jìn)入相應(yīng)的頁(yè)面；“Check Plugin”（檢查插件）：比如你的網(wǎng)頁(yè)上有一個(gè)Flash動(dòng)畫(huà)，而訪(fǎng)問(wèn)者的瀏覽器沒(méi)有Flash播放插件時(shí)，利用此功能你可以按你的解決方案對(duì)訪(fǎng)問(wèn)者進(jìn)行提醒；“Control Shockwave or Flash”（控制Shockwave或Flash）：應(yīng)用此功能我們可以在網(wǎng)頁(yè)上做一些交互按鈕，使用戶(hù)可以控制動(dòng)畫(huà)的播放進(jìn)程；

39、“Drag Layer”（拖動(dòng)層）：用來(lái)制作隨鼠標(biāo)移動(dòng)而移動(dòng)的網(wǎng)頁(yè)特效；“Go to URL”（轉(zhuǎn)到URL）：應(yīng)用此項(xiàng)可以實(shí)現(xiàn)一些比較高級(jí)的跳轉(zhuǎn)；比如：?jiǎn)螕粢粋€(gè)鏈接可以同時(shí)打開(kāi)幾個(gè)頁(yè)面，打開(kāi)一個(gè)頁(yè)面后自動(dòng)跳轉(zhuǎn)到一個(gè)新的頁(yè)面等；“Hide Pop-Up Menu”（隱藏彈出菜單）：應(yīng)用此功能可以在制作下拉菜單時(shí)隱藏菜單；“Jump Menu”（跳轉(zhuǎn)菜單）：應(yīng)用此功能可以插入跳轉(zhuǎn)導(dǎo)航菜單；前面已經(jīng)講述；“Jump Menu Go”（跳轉(zhuǎn)菜單開(kāi)始）：應(yīng)用此功能為跳轉(zhuǎn)菜單增加一個(gè)“Go”按鈕；“Open Browser Window”（打開(kāi)瀏覽器窗口）：應(yīng)用此功能可以打開(kāi)瀏覽器窗口并設(shè)置新窗口的大小、

40、工具條顯示情況等屬性；“Play Sound”（播放聲音）：應(yīng)用此功能可以為網(wǎng)頁(yè)加入聲音；“Popup Message”（彈出信息）：應(yīng)用此功能可以彈出消息框來(lái)顯示預(yù)先設(shè)定好的文本；“Preload Images”（預(yù)先載入圖像）：應(yīng)用此功能可以在頁(yè)面載入時(shí)預(yù)先讀入某些特效的圖像，以避免事件發(fā)生時(shí)讀取延遲和保持效果的連續(xù)性；“Set Nav Bar Image”（設(shè)置導(dǎo)航條圖像）：應(yīng)用此功能可以制作有翻滾特效的導(dǎo)航條；“Set Text”（設(shè)置文字）：應(yīng)用此功能可以在特定的地方顯示文字，其中：“Set Text of Frame”（設(shè)置框架文字）：應(yīng)用此功能可以在框架內(nèi)顯示信息；“Set Te

41、xt of Layer”（設(shè)置層文字）：應(yīng)用此功能可以在層內(nèi)顯示信息；“Set Text of Status Message”（設(shè)置狀態(tài)欄文字）：應(yīng)用此功能可在狀態(tài)欄顯示信息；“Set Text of Text Field”（設(shè)置文本域文字）：應(yīng)用此功能可以在文本框顯示信息；“Show Pop-Up Menu”（顯示彈出菜單）：應(yīng)用此功能可以在制作下拉菜單時(shí)顯示菜單；“Show-Hide Layers”（顯示-隱藏圖層）：應(yīng)用此功能可以顯示或隱藏圖層；“Swap Image”（交換圖像）：應(yīng)用此功能不僅可以建立一對(duì)一的翻滾圖，還可以建立一對(duì)多等更為復(fù)雜的替換特效；“Swap Image Res

42、tore”（恢復(fù)交換圖像）：應(yīng)用此功能可以將已經(jīng)翻滾的圖像還原；“Timeline”（時(shí)間軸）：應(yīng)用此功能可以制作與時(shí)間軸有關(guān)的動(dòng)畫(huà)效果，其中：“Go to Timeline Frame”（轉(zhuǎn)到時(shí)間軸幀）：跳轉(zhuǎn)到指定幀；“Play Timeline”（播放時(shí)間軸）：播放動(dòng)畫(huà)；“Stop Timeline”（停止時(shí)間軸）：停止動(dòng)畫(huà)；“Validate Form”（檢查表單）：應(yīng)用此功能可驗(yàn)證用戶(hù)提交的表單內(nèi)容是否符合要求；“”（刪除行為按鈕）：選擇一個(gè)行為后，單擊該按鈕刪除所選行為（包括事件和動(dòng)作）；“/”：選擇一個(gè)行為后，單擊該按鈕可以將所選行為上移或下移一行；“Events”（事件）：顯示為

43、對(duì)象設(shè)置的事件；“Actions”（動(dòng)作）：顯示與左側(cè)事件對(duì)應(yīng)的動(dòng)作；行為操作在這一節(jié)中，我們將通過(guò)具體實(shí)例講述幾個(gè)我們?cè)诰W(wǎng)頁(yè)設(shè)計(jì)中應(yīng)用較多的交互效果。改變對(duì)象屬性在頁(yè)面上插入一個(gè)圖層，在圖層中輸入一段文本，名稱(chēng)采用默認(rèn)的“Layer1”，“Tag”（標(biāo)記）采用默認(rèn)的“DIV”，并保持該圖層被選中（如圖13-2）：圖13-2單擊“Behaviors”（行為）面板上的“”按鈕，在彈出對(duì)話(huà)框中選中“Change Properties”（改變屬性）（如圖13-3），彈出“Change Properties”（改變屬性）對(duì)話(huà)框（如圖13-4）。圖13-3圖13-4“Type of Object”（對(duì)象

44、類(lèi)型）：在右側(cè)的下拉選單中選擇標(biāo)記，如“DIV”（和“Properties”（屬性）面板中一致）；“Named Object”（已命名的對(duì)象）：從右側(cè)下拉選單中選中對(duì)象名稱(chēng)，如“Layer1”；“Property”（屬性）：設(shè)置對(duì)象的屬性，包括兩個(gè)選項(xiàng)：“Select”（選擇）：從下拉選單中選擇需要更改的屬性；從最右側(cè)的下拉選單中選中兼容的瀏覽器類(lèi)型；“Enter”（輸入）：自己輸入需要修改的屬性；本例中我們選中“Select”，并選中“style.backgroundColor”（背景顏色）；“New Value”（新值）：為所選的屬性值設(shè)置新值，如“green”（綠色）；完成上述設(shè)置后，單

45、擊“OK”按鈕保存并退出，這時(shí)我們可以發(fā)現(xiàn)“Behaviors”（行為）面板中已經(jīng)出現(xiàn)了我們所設(shè)的行為（如圖13-5）：圖13-5Dreamweaver MX默認(rèn)的事件為“onClick”（單擊），單擊“Events”（事件）列右側(cè)的三角形按鈕“”，在彈出菜單中選擇“onMouseOver”（如圖13-6，圖13-7）：圖13-6圖13-7如果找不到所要地事件，可以選擇最底部的“Show Events for”（顯示事件），在子菜單中選擇較高版本的瀏覽器（如圖13-8）：圖13-8按快捷鍵F12瀏覽，可以看到預(yù)料的效果（如圖13-9）：圖13-913.3.2 檢測(cè)瀏覽器為了使我們的網(wǎng)頁(yè)在各種瀏

46、覽器中的顯示完美無(wú)缺，我們必須為同一網(wǎng)頁(yè)制作幾個(gè)適合相應(yīng)類(lèi)型瀏覽器的文件。在本例中，我們假設(shè)已經(jīng)為某一頁(yè)面制作了三個(gè)網(wǎng)頁(yè)文件“ie.htm”、“netscape.htm”和“other.htm”，分別適用于IE、Netscape和其他類(lèi)型的瀏覽器。由于使用IE的用戶(hù)是大多數(shù)，我們將默認(rèn)的頁(yè)面設(shè)置為“ie.htm”，將檢測(cè)瀏覽器的事件設(shè)置在“ie.htm”上。也就是說(shuō)，默認(rèn)的是“ie.htm”，然后在“ie.htm”加載時(shí)（“onLoad”（加載）事件），激發(fā)檢測(cè)瀏覽器的動(dòng)作（若用戶(hù)瀏覽器為IE，則保持原來(lái)的頁(yè)面不變；若用戶(hù)瀏覽器為Netscape，則跳轉(zhuǎn)到“netscape.htm”；若用戶(hù)使

47、用的是其他瀏覽器，則跳轉(zhuǎn)到“other.htm”）。打開(kāi)網(wǎng)頁(yè)文件“ie.htm”，在狀態(tài)欄上單擊選中HTML標(biāo)記“<body>”（如圖13-10），使之變?yōu)榇煮w（如圖13-11）。圖13-10圖13-11在“Behaviors”（行為）面板中單擊“”（添加行為）按鈕，在彈出菜單中選中“Check Browser”（檢測(cè)瀏覽器）（如圖13-11），彈出“Check Browser”（檢測(cè)瀏覽器）對(duì)話(huà)框（如圖13-12）：“Check Browser”（檢測(cè)瀏覽器）對(duì)話(huà)是由一組條件語(yǔ)句組成的，根據(jù)判斷的結(jié)果做出選擇，在三個(gè)網(wǎng)頁(yè)當(dāng)中選其一。這個(gè)動(dòng)作可以明確判斷兩種瀏覽器：Netscape

48、 和IE，不是這兩種瀏覽器一概做“Other Browsers”（其他瀏覽器）處理。判斷每一種瀏覽器都會(huì)有三種選項(xiàng)：“Go to URL”（打開(kāi)一個(gè)指定文件），“Go to Alt URL”（打開(kāi)另一個(gè)指定文件），“Stay on this page”（停留在當(dāng)前頁(yè)面）?！癠RL”和“Alt URL”是定義“Go to URL”和“Go to Alt URL”所指向頁(yè)面的。由于我們當(dāng)前頁(yè)面就是“ie.htm”，我們?cè)谶@里將“URL”設(shè)為“netscape.htm”，將“Alt URL”設(shè)為“other.htm”。然后只需要將“Netscape Navigator”設(shè)為“Go To URL（ne

49、tscape.htm）”，將“Internet Explorer”設(shè)為“Stay on this Page（ie.htm）”，其他所有的都設(shè)為“Go To Alt URL（other.htm）”就可以了（如圖13-12）。圖13-12單擊“OK”按鈕保存并退出后，我們可以發(fā)現(xiàn)“Behaviors”（行為）面板中已經(jīng)添加了我們剛才設(shè)置的行為：“Events”（事件）為“onLoad”（載入）；“Actions”（動(dòng)作）為“Check Browser”（檢測(cè)瀏覽器）（如圖13-13）：圖13-13檢測(cè)插件Flash動(dòng)畫(huà)不僅體積小、制作簡(jiǎn)便，而且具有交互功能。所以，如果在我們的網(wǎng)頁(yè)上放上幾個(gè)小Fla

50、sh，將會(huì)使網(wǎng)頁(yè)增色不少。但遺憾的是，運(yùn)行Flash需要插件的支持，但并不是所有的用戶(hù)的瀏覽器都安裝了Flash插件。如果用戶(hù)打開(kāi)一個(gè)含有Flash的網(wǎng)頁(yè)卻顯示不出來(lái)，那我們豈不是弄巧成拙！怎么解決這個(gè)問(wèn)題呢？學(xué)過(guò)了上一節(jié)，讀者也許有一點(diǎn)思路了。對(duì)了，我們可以為包含F(xiàn)lash的頁(yè)面給出另外一個(gè)版本。當(dāng)加載頁(yè)面時(shí)（“onLoad”事件），執(zhí)行檢測(cè)Flash插件的動(dòng)作：若用戶(hù)安裝了Flash插件，保持頁(yè)面不變；否則跳轉(zhuǎn)到另一個(gè)頁(yè)面。在本例中，我們假設(shè)有一個(gè)含有Flash的頁(yè)面“flash.htm”，我們已經(jīng)給它另做了一個(gè)內(nèi)容相同不含F(xiàn)lash的文件“html.htm”。打開(kāi)“flash.htm”，

51、單擊選中任務(wù)欄上的“<body>”標(biāo)記，然后單擊“Behaviors”（行為）面板上的“”（添加行為）按鈕，在彈出對(duì)話(huà)框中選擇“Check Plugin”（檢測(cè)插件）（如圖13-14），彈出“Check Plugin”（檢測(cè)插件）對(duì)話(huà)框（如圖13-15）。圖13-14圖13-15“Plugin”（插件）：設(shè)置需要檢測(cè)的插件，其中：“Select”（選擇）：在右側(cè)的下拉菜單中選擇所要檢測(cè)的插件，如“Flash”；“Enter”（輸入）：直接輸入第一項(xiàng)沒(méi)有列出的插件，一般很少用；“If Found，Go To URL”（如果有，前往URL）：設(shè)置如果檢測(cè)時(shí)發(fā)現(xiàn)了目標(biāo)插件時(shí)所要打開(kāi)的頁(yè)面

52、；“Otherwise，Go To URL”（否則，前往URL）：設(shè)置當(dāng)檢測(cè)時(shí)沒(méi)有發(fā)現(xiàn)目標(biāo)插件時(shí)所要打開(kāi)的頁(yè)面；“Always go to first URL if detection is not possible”（如果無(wú)法偵測(cè)，永遠(yuǎn)前往第一個(gè)URL）：選中此項(xiàng)表示如果不能進(jìn)行插件檢查就進(jìn)入第一個(gè)頁(yè)面；一般不選；完成上述設(shè)置后，單擊“OK”按鈕保存并退出。我們可以發(fā)現(xiàn)“Behaviors”（行為）面板中已經(jīng)添加了我們剛才設(shè)置的行為：“Events”（事件）為“onLoad”（載入）；“Actions”（動(dòng)作）為“Check Plugin”（檢測(cè)瀏覽器）（如圖13-16）：圖13-16拖動(dòng)層

53、如果我們想在網(wǎng)頁(yè)上作一個(gè)像拼圖游戲、拖出菜單這類(lèi)可以隨用戶(hù)的鼠標(biāo)指針移動(dòng)的頁(yè)面元素，我們就需要應(yīng)用“Drag Layer”（拖動(dòng)層）行為了。插入一個(gè)圖層并將需要移動(dòng)的元素放入其中，選中該層（此時(shí)狀態(tài)欄的標(biāo)記“<div#Layer1>”變成粗體），單擊“Behaviors”（行為）面板中的“”按鈕并從中選擇“Drag Layer”（拖動(dòng)層）命令（如圖13-17），彈出“Drag Layer”（拖動(dòng)層）對(duì)話(huà)框，默認(rèn)為“Basic”（基本）選項(xiàng)卡（如圖13-18）。圖13-17圖13-18“Layer”（層）：從右側(cè)下拉選單中選擇需要被拖動(dòng)的層；“Movement”（移動(dòng)）：設(shè)置層可以拖

54、動(dòng)的范圍，有兩個(gè)選項(xiàng)：“Uncontrained”（不限制）：選中此項(xiàng)可以任意拖動(dòng)層；“Constrained”（限制）：選中此項(xiàng)只能在所設(shè)范圍內(nèi)拖動(dòng)層；在右側(cè)的“Up”（上）、“Down”（下）、“Left”（左）和“Right”（右）文本域中設(shè)置相對(duì)于圖層的起始位置的范圍；“Drag Target”（放下目標(biāo)）：在“Left”和“Top”文本域中設(shè)置放置目標(biāo)的位置；或單擊“Get Current Position”（取得目前位置）按鈕自動(dòng)將當(dāng)前圖層的所在位置輸入這兩個(gè)文本域中。（放置目標(biāo)指用戶(hù)所拖動(dòng)的層需放置的地方；當(dāng)層的左上角坐標(biāo)和我們?cè)O(shè)置的值相匹配時(shí)，即達(dá)到了放置目標(biāo)，該值是相對(duì)于瀏覽

55、器窗口的左上角而言）“Snap if Within”（靠齊距離）：在文本域中輸入值，指定圖層與放置目標(biāo)的靠近距離（即當(dāng)拖動(dòng)圖層與放置目標(biāo)的距離小于該值時(shí)，自動(dòng)將圖層與放置目標(biāo)對(duì)齊）；如果還要定義圖層的拖拽范圍，可以單擊“Advanced”（高級(jí)）標(biāo)簽，彈出“Advanced”（高級(jí)）選項(xiàng)卡（如圖13-19）：圖13-19“Drag Handle”（拖拽控制點(diǎn)）：設(shè)置圖層中用于拖動(dòng)圖層的區(qū)域，包括兩個(gè)選項(xiàng)：“Entire Layer”（整個(gè)層）；“Area Within Layer”（層內(nèi)區(qū)域）：在“Left”和“Top”文本域中設(shè)置拖拽區(qū)域左上角點(diǎn)的坐標(biāo)；在“Width”和“Height”文本框中輸入拖動(dòng)區(qū)域的寬度和高度值；“While Dragging”（拖拽時(shí)）：設(shè)置拖動(dòng)時(shí)層的狀態(tài)：“Bring Layer to Front”（將層移至最前）：選中此項(xiàng)表示在拖動(dòng)層時(shí)將層移動(dòng)到最頂層；“then”（然后）：設(shè)置放置層時(shí)層的疊放狀態(tài)：“Leave on Top”（留在最上方）：選中此項(xiàng)表示將層保留在最頂端； “Restore Z-Index”（還原Z序列）：還原為原來(lái)的疊放順序；“Call Java