定義列表元素；我們這一章可能用到的常見(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í)； onScroll：當(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 Browser”（檢查瀏覽器）：同一個(gè)網(wǎng)頁(yè)，在不同的瀏覽器上的顯示可能大為不同；為了使我們的網(wǎng)頁(yè)在各種不同的瀏覽器中都完美無(wú)缺，我們可以分別針對(duì)不同的瀏覽器將同一網(wǎng)頁(yè)制作成幾個(gè)不同頁(yè)面，然后再調(diào)用Check Browser，根據(jù)訪問(wèn)者瀏覽器的不同自動(dòng)進(jìn)入相應(yīng)的頁(yè)面；
“Check Plugin”（檢查插件）：比如你的網(wǎng)頁(yè)上有一個(gè)Flash動(dòng)畫(huà)，而訪問(wèn)者的瀏覽器沒(méi)有Flash播放插件時(shí)，利用此功能你可以按你的解決方案對(duì)訪問(wèn)者進(jìn)行提醒；
“Control Shockwave or Flash”（控制Shockwave或Flash）：應(yīng)用此功能我們可以在網(wǎng)頁(yè)上做一些交互按鈕，使用戶可以控制動(dòng)畫(huà)的播放進(jìn)程；
“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è)置新窗口的大小、工具條顯示情況等屬性；
“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 Text 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 Restore”（恢復(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)證用戶提交的表單內(nèi)容是否符合要求； “—”（刪除行為按鈕）：選擇一個(gè)行為后，單擊該按鈕刪除所選行為（包括事件和動(dòng)作）； “▲/▼”：選擇一個(gè)行為后，單擊該按鈕可以將所選行為上移或下移一行； “Events”（事件）：顯示為對(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è)圖層，在圖層中輸入一段文本，名稱采用默認(rèn)的“Layer1”，“Tag”（標(biāo)記）采用默認(rèn)的“DIV”，并保持該圖層被選中（如圖13-2）：
圖13-2 單擊“Behaviors”（行為）面板上的“＋”按鈕，在彈出對(duì)話框中選中“Change Properties”（改變屬性）（如圖13-3），彈出“Change Properties”（改變屬性）對(duì)話框（如圖13-4）。
圖13-3
圖13-4 “Type of Object”（對(duì)象類型）：在右側(cè)的下拉選單中選擇標(biāo)記，如“DIV”（和“Properties”（屬性）面板中一致）；
“Named Object”（已命名的對(duì)象）：從右側(cè)下拉選單中選中對(duì)象名稱，如“Layer1”； “Property”（屬性）：設(shè)置對(duì)象的屬性，包括兩個(gè)選項(xiàng)：
“Select”（選擇）：從下拉選單中選擇需要更改的屬性；從最右側(cè)的下拉選單中選中兼容的瀏覽器類型；
“Enter”（輸入）：自己輸入需要修改的屬性；
本例中我們選中“Select”，并選中“style.backgroundColor”（背景顏色）； “New Value”（新值）：為所選的屬性值設(shè)置新值，如“green”（綠色）；
完成上述設(shè)置后，單擊“OK”按鈕保存并退出，這時(shí)我們可以發(fā)現(xiàn)“Behaviors”（行為）面板中已經(jīng)出現(xiàn)了我們所設(shè)的行為（如圖13-5）：
圖13-5 Dreamweaver 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-9 13.3.2 檢測(cè)瀏覽器
為了使我們的網(wǎng)頁(yè)在各種瀏覽器中的顯示完美無(wú)缺，我們必須為同一網(wǎng)頁(yè)制作幾個(gè)適合相應(yīng)類型瀏覽器的文件。在本例中，我們假設(shè)已經(jīng)為某一頁(yè)面制作了三個(gè)網(wǎng)頁(yè)文件“ie.htm”、“netscape.htm”和“other.htm”，分別適用于IE、Netscape和其他類型的瀏覽器。由于使用IE的用戶是大多數(shù)，我們將默認(rèn)的頁(yè)面設(shè)置為“ie.htm”，將檢測(cè)瀏覽器的事件設(shè)置在“ie.htm”上。也就是說(shuō)，默認(rèn)的是“ie.htm”，然后在“ie.htm”加載時(shí)（“onLoad”（加載）事件），激發(fā)檢測(cè)瀏覽器的動(dòng)作（若用戶瀏覽器為IE，則保持原來(lái)的頁(yè)面不變；若用戶瀏覽器為Netscape，則跳轉(zhuǎn)到“netscape.htm”；若用戶使用的是其他瀏覽器，則跳轉(zhuǎn)到“other.htm”）。
打開(kāi)網(wǎng)頁(yè)文件“ie.htm”，在狀態(tài)欄上單擊選中HTML標(biāo)記“
”（如圖13-10），使之變?yōu)榇煮w（如圖13-11）。圖13-10
圖13-11 在“Behaviors”（行為）面板中單擊“＋”（添加行為）按鈕，在彈出菜單中選中“Check Browser”（檢測(cè)瀏覽器）（如圖13-11），彈出“Check Browser”（檢測(cè)瀏覽器）對(duì)話框（如圖13-12）：
“Check Browser”（檢測(cè)瀏覽器）對(duì)話是由一組條件語(yǔ)句組成的，根據(jù)判斷的結(jié)果做出選擇，在三個(gè)網(wǎng)頁(yè)當(dāng)中選其一。這個(gè)動(dòng)作可以明確判斷兩種瀏覽器：Netscape 和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è)面）。“URL”和“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（netscape.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è)小Flash，將會(huì)使網(wǎng)頁(yè)增色不少。但遺憾的是，運(yùn)行Flash需要插件的支持，但并不是所有的用戶的瀏覽器都安裝了Flash插件。如果用戶打開(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)作：若用戶安裝了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”，單擊選中任務(wù)欄上的“
”標(biāo)記，然后單擊“Behaviors”（行為）面板上的“＋”（添加行為）按鈕，在彈出對(duì)話框中選擇“Check Plugin”（檢測(cè)插件）（如圖13-14），彈出“Check Plugin”（檢測(cè)插件）對(duì)話框（如圖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è)面；
“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)層
如果我們想在網(wǎng)頁(yè)上作一個(gè)像拼圖游戲、拖出菜單這類可以隨用戶的鼠標(biāo)指針移動(dòng)的頁(yè)面元素，我們就需要應(yīng)用“Drag Layer”（拖動(dòng)層）行為了。
插入一個(gè)圖層并將需要移動(dòng)的元素放入其中，選中該層（此時(shí)狀態(tài)欄的標(biāo)記“”變成粗體），單擊“Behaviors”（行為）面板中的“＋”按鈕并從中選擇“Drag Layer”（拖動(dòng)層）命令（如圖13-17），彈出“Drag Layer”（拖動(dòng)層）對(duì)話框，默認(rèn)為“Basic”（基本）選項(xiàng)卡（如圖13-18）。
圖13-17
圖13-18 “Layer”（層）：從右側(cè)下拉選單中選擇需要被拖動(dòng)的層； “Movement”（移動(dòng)）：設(shè)置層可以拖動(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)指用戶所拖動(dòng)的層需放置的地方；當(dāng)層的左上角坐標(biāo)和我們?cè)O(shè)置的值相匹配時(shí)，即達(dá)到了放置目標(biāo)，該值是相對(duì)于瀏覽器窗口的左上角而言）
“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 JavaScript”（呼叫JavaScript）：設(shè)置拖動(dòng)層時(shí)調(diào)用的JavaScript代碼； “When Dropped”（放下時(shí)）：設(shè)置放下時(shí)層的狀態(tài)：
“Call JavaScript”（呼叫JavaScript）：設(shè)置放下層時(shí)調(diào)用的JavaScript代碼； “Only if snapped”（只有在靠齊時(shí)）：選中此項(xiàng)表示只有在靠齊時(shí)才調(diào)用JavaScript代碼；
完成上述設(shè)置后，單擊“OK”按鈕保存并退出。我們可以發(fā)現(xiàn)“Behaviors”（行為）面板中已經(jīng)添加了我們剛才設(shè)置的行為：“Events”（事件）為“onClick”（載入）；“Actions”（動(dòng)作）為“Drag Layer”（檢測(cè)瀏覽器）（如圖13-20）：
圖13-20 控制Shockwave或Flash 在“Insert/Common”（插入/標(biāo)準(zhǔn)）面板中單擊“Flash”（插入Flash）按鈕（如圖13-21），選擇一個(gè)Flash文件并將其命名為“flash1”（如圖13-23）。
圖13-21 在“Insert/Forms”（插入/表單）面板中單擊“Button”（插入按鈕）按鈕（如圖13-22），插入幾個(gè)按鈕并將它們的“Action”（動(dòng)作）設(shè)置為“none”（無(wú)），“Label”（標(biāo)簽）依次設(shè)置為“Play”（播放）、“Stop”（停止）、“Rewind”（返回）和“GoTo4”（轉(zhuǎn)到第4幀）（如圖13-23）。
圖13-22
圖13-23 選中一個(gè)按鈕“Play”（播放），然后在“Behaviors”（行為）面板中單擊“＋”按鈕，在彈出菜單中選中“Control Shockwave or Flash”（控制Shockwave或Flash）（如圖13-24），彈出“Control Shockwave or Flash”（控制Shockwave或Flash）對(duì)話框（如圖13-25）。
圖13-24
圖13-25 “Movie”（影片）：從下拉選單中選擇要控制的動(dòng)畫(huà)，如“flash1”； “Action”（動(dòng)作）：設(shè)置控制動(dòng)畫(huà)的動(dòng)作，其中： “Play”（播放）：選擇該項(xiàng)表示播放動(dòng)畫(huà)； “Stop”（停止）：選擇該項(xiàng)表示停止動(dòng)畫(huà)；
“Rewind”（倒帶）：選擇該項(xiàng)表示使播放的動(dòng)畫(huà)返回初始位置；
“Go to Frame”（前往幀）：選擇該項(xiàng)并在其后的文本框中數(shù)字表示將動(dòng)畫(huà)跳至指定幀； 完成上述設(shè)置后，單擊“OK”按鈕保存并退出。我們可以發(fā)現(xiàn)“Behaviors”（行為）面板中已經(jīng)添加了我們剛才設(shè)置的行為：“Events”（事件）為“onClick”（單擊）；“Actions”（動(dòng)作）為“Control Shockwave or Flash”（控制Shockwave或Flash）（如圖13-26）：
圖13-26 同樣可以完成對(duì)其他按鈕的設(shè)置，設(shè)置完成后按快捷鍵『F12』瀏覽即可看到預(yù)料的效果。轉(zhuǎn)到URL 關(guān)于文字的鏈接我們前面講得已經(jīng)非常多了，但是應(yīng)用“Go To URL”（轉(zhuǎn)到URL）我們可以實(shí)現(xiàn)一些高級(jí)的跳轉(zhuǎn)。我們下面就來(lái)講一個(gè)單擊一個(gè)鏈接同時(shí)打開(kāi)幾個(gè)頁(yè)面的例子。單擊“Insert/Frames”（插入/框架）面板上的“Left and Nested Top Frames”（左框架嵌套頂框架）按鈕（如圖13-27），插入一個(gè)嵌套框架集（如圖13-29）。
圖13-27 單擊“Insert/Forms”（插入/表單）面板上的“Button”（按鈕）按鈕（如圖13-28），插入一個(gè)按鈕（如圖13-29）。
圖13-28 選中該按鈕并將其“Action”（動(dòng)作）設(shè)為“none”（無(wú)），單擊“Design/Behaviors”（設(shè)計(jì)/行為）面板上的“＋”按鈕，選中“Go To URL”（轉(zhuǎn)到URL）（如圖13-29），彈出“Go To URL”（轉(zhuǎn)到URL）對(duì)話框（如圖13-30）。
圖13-29 “Open In”（打開(kāi)在）：設(shè)置鏈接的打開(kāi)方式；列表框中列出了當(dāng)前框架集中的所有框架的名字以及主窗口，如果頁(yè)面沒(méi)有框架，則只有“Main Window”（主窗口）一個(gè)選項(xiàng)。“URL”（URL）：設(shè)置在選定窗口中打開(kāi)的頁(yè)面URL地址； 在本例中，我們?yōu)槿齻€(gè)框架“l(fā)eftFrame”、“topFrame”和“mainFrame”分別設(shè)置URL地址“http://004km.cn”、“http://004km.cn”和“http://www.5460.net”，設(shè)置好后單擊“OK”按鈕保存并退出（如圖13-30）：
圖13-30 這時(shí)我們可以發(fā)現(xiàn)“Behaviors”（行為）面板中已經(jīng)添加了我們剛才設(shè)置的行為：“Events”（事件）為“onClick”（載入）；“Actions”（動(dòng)作）為“Go To URL”（轉(zhuǎn)到URL）（如圖13-31）：
圖13-31 按快捷鍵『F12』瀏覽，即可看到我們預(yù)料的效果（如圖13-32）：
圖13-32 13.3.7 打開(kāi)瀏覽器窗口 應(yīng)用“Open Browser Window”（打開(kāi)瀏覽器窗口）行為可以在用戶觸發(fā)該行為時(shí)打開(kāi)一個(gè)新的瀏覽器窗口，在新窗口中載入指定URL地址上的網(wǎng)頁(yè)。該選項(xiàng)還可以設(shè)定新窗口的各項(xiàng)屬性，如窗口的大小、是否顯示導(dǎo)航欄、狀態(tài)條等。如果沒(méi)有指定窗口的屬性，則按啟動(dòng)窗口的屬性和大小打開(kāi)，一旦指定了窗口的任何屬性，將自動(dòng)關(guān)閉其他屬性。
下面我們就利用“Open Browser Window”（打開(kāi)瀏覽器窗口）行為來(lái)實(shí)現(xiàn)在瀏覽網(wǎng)站時(shí)經(jīng)常看到的廣告窗口。
首先準(zhǔn)備一個(gè)頁(yè)面如“advertise.htm”作為廣告，然后在我們的主頁(yè)上單擊選中狀態(tài)欄中的標(biāo)記“
”，單擊“Behaviors”（行為）面板中的“＋”按鈕，選中“Open Browser Window”（打開(kāi)瀏覽器窗口）（如圖13-33），彈出“Open Browser Window”（打開(kāi)瀏覽器窗口）對(duì)話框（如圖13-34）。圖13-33
圖13-34 “URL to Display”（要打開(kāi)的URL）：設(shè)置新窗口中所要打開(kāi)的頁(yè)面地址，如“advertise.htm”；
“Window Width”（窗口寬度）：設(shè)置新窗口的寬度； “Window Height”（窗口高度）：設(shè)置新窗口的高度； “Attributes”（屬性）：設(shè)置新窗口的屬性，其中： “Navigation Toolbar”（導(dǎo)航工具欄）：選中此項(xiàng)表示在新窗口中顯示導(dǎo)航工具欄； “Location Toolbar”（地址工具欄）：選中此項(xiàng)表示在新窗口中顯示地址工具欄； “Status Bar”（狀態(tài)欄）：選中此項(xiàng)表示在新窗口中顯示狀態(tài)欄； “Menu Bar”（菜單條）：選中此項(xiàng)表示在新窗口中顯示菜單欄；
“Scrollbars as Needed”（需要時(shí)使用滾動(dòng)條）：選中此項(xiàng)當(dāng)內(nèi)容超出新窗口時(shí)顯示滾動(dòng)條；
“Resize Handles”（調(diào)整大小手柄）：選中此項(xiàng)表示允許用戶調(diào)整新窗口大??； “Window Name”（窗口名稱）：設(shè)置新窗口的名稱；
由于廣告窗口需要向用戶傳遞的信息不多，所以一般尺寸較小，且不需要各種工具條。我們?cè)诖藶槠湓O(shè)置好尺寸后，其他都不設(shè)。單擊“OK”按鈕保存并退出，這時(shí)我們可以發(fā)現(xiàn)“Behaviors”（行為）面板中已經(jīng)添加了我們剛才設(shè)置的行為：“Events”（事件）為“onLoad”（載入）；“Actions”（動(dòng)作）為“Open Browser Window”（打開(kāi)瀏覽器窗口）（如圖13-35）：
圖13-35 按快捷鍵『F12』瀏覽，可以看到當(dāng)主頁(yè)打開(kāi)后，立即彈出廣告窗口（如圖13-36）：
圖13-36 播放聲音
調(diào)用“Play Sound”（播放聲音）行為可以方便地在網(wǎng)頁(yè)中加入音樂(lè)。
單擊“Insert/Forms”（插入/表單）面板上的“Button”（按鈕）按鈕（如圖13-37），插入一個(gè)按鈕（如圖13-29）。
圖13-37 選中該按鈕并將其“Action”（動(dòng)作）設(shè)為“none”（無(wú)），單擊“Design/Behaviors”（設(shè)計(jì)/行為）面板上的“＋”按鈕，選中“Play Sound”（播放聲音）（如圖13-38），彈出“Play Sound”（播放聲音）對(duì)話框（如圖13-39）。
圖13-38
圖13-39 “Play Sound”（播放聲音）：設(shè)置要加入網(wǎng)頁(yè)的音樂(lè)文件即可（如果聽(tīng)不到聲音，可能是瀏覽器不支持所選音樂(lè)格式）。
設(shè)置完后單擊“OK”按鈕保存并退出。這時(shí)我們可以發(fā)現(xiàn)“Behaviors”（行為）面板中已經(jīng)添加了我們剛才設(shè)置的行為：“Events”（事件）為“onClick”（點(diǎn)擊）；“Actions”（動(dòng)作）為“Play Sound”（播放聲音）（如圖13-40）：
圖13-40 這時(shí)我們可以發(fā)現(xiàn)頁(yè)面中出現(xiàn)了一個(gè)“Plugin”（插件）圖標(biāo)（如圖13-41）。選中該圖標(biāo)后，“Properties”（屬性）面板的內(nèi)容發(fā)生相應(yīng)變化，單擊“Parameters”（參數(shù)）按鈕（如圖13-41），彈出“Parameters”（參數(shù)）對(duì)話框，我們可以在該對(duì)話框中為聲音播放設(shè)置各項(xiàng)參數(shù)（如圖13-42）。
圖13-41
圖13-42
1、APPLET2、3、第十單元插入多媒體對(duì)象
教學(xué)目的：網(wǎng)頁(yè)中插入FLASH SHOCKWAVE ACTIVE PLUGIN JAVA 教學(xué)重點(diǎn)：插入對(duì)象的具體方法 課堂教學(xué)
插入FLASH按扭的對(duì)話框
插入FLASH動(dòng)畫(huà)方法對(duì)話框
插入FLASH文本
修改屬性
添加SHOCKWAVE 對(duì)象
java applte對(duì)象
添加plugin
屬性對(duì)話框
作業(yè)：在自己的網(wǎng)頁(yè)上添加聲音
第12單元 模板和庫(kù)
一、教學(xué)目的：理解模板的作用，掌握模板的創(chuàng)建和應(yīng)用。
二、教學(xué)重點(diǎn)：模板的應(yīng)用。
三、內(nèi)容： 模板的概念
在制作一個(gè)網(wǎng)站的整套頁(yè)面時(shí)，我們會(huì)發(fā)現(xiàn)大部分頁(yè)面的基本格式都是相同的。比如說(shuō)頁(yè)面背景、文字樣式、導(dǎo)航條、版權(quán)信息等。所以我們可以將頁(yè)面先做成類似申請(qǐng)表一樣的表格，將那些相同的內(nèi)容固定下來(lái)，并留出一定的空白以供將來(lái)插入不同的內(nèi)容。以后我們制作頁(yè)面時(shí)就只需要在這個(gè)表格的基礎(chǔ)上添加新的內(nèi)容就可以了。一般網(wǎng)頁(yè)的基本組成部分：
“l(fā)ogo”：即網(wǎng)站的徽標(biāo)，這是一個(gè)網(wǎng)站的標(biāo)志，一般放在每個(gè)頁(yè)面最頂部的左上角，其一般和標(biāo)準(zhǔn)大小為88px×31px；
“banner”：即頁(yè)面上的廣告條，可放在頁(yè)面的任意位置
“Nav Bar”：即頁(yè)面上的導(dǎo)航條，一般放在頁(yè)面的頂部和底部，用來(lái)快捷地在網(wǎng)站各頁(yè)面之間跳轉(zhuǎn)
“Location Bar”：即頁(yè)面上的地址條，一般在導(dǎo)航條下面，用來(lái)告訴用戶當(dāng)前頁(yè)面所屬的類別和樹(shù)型目錄
“content”：即頁(yè)面的正文，這是每個(gè)頁(yè)面區(qū)別于其他頁(yè)面的地方；
“copyright”：即頁(yè)面上的版權(quán)信息，一般在頁(yè)面的最底部模板中的元區(qū)域可以分為兩類：鎖定區(qū)域和可編輯區(qū)域。鎖定區(qū)域是指在任何基于該模板的網(wǎng)頁(yè)中都不可編輯或修改的區(qū)域，可編輯區(qū)域是指在基于該模板的網(wǎng)頁(yè)中可以被編輯或修改的區(qū)域。當(dāng)我們編輯模板本身時(shí)，二者皆可修改；但當(dāng)我們編輯基于模板的文擋時(shí)，后者不可修改。
在我們批量制作網(wǎng)頁(yè)時(shí)，logo、導(dǎo)航條和版權(quán)信息往往是不變的，此外頁(yè)面的背景和文字樣式也可能需要統(tǒng)一，因此我們可以將這些元素設(shè)置為鎖定區(qū)域。而地址條、正文和頁(yè)面的標(biāo)題往往是不同的，我們可以將這些元素設(shè)置為可編輯區(qū)域。創(chuàng)建模板文件
【File/New】（文件/新建）（如圖14-3），彈出“New Document”（新建文檔）對(duì)話框（如圖14-4）。在“General”（常規(guī)）選項(xiàng)卡的左邊“Category”（類別）列表框中選中“Basic Page”（基本頁(yè)面），然后在右邊“Basic Page”（基本頁(yè)面）列表框中選中“HTML Template”（HTML模板），然后單擊“OK”按鈕保存并退出
新建文件窗口的標(biāo)題欄中的文件名前出現(xiàn)了 [<>(Untitled-2*)]”，表明這是一個(gè)模板文件。
打開(kāi)一個(gè)現(xiàn)有的網(wǎng)頁(yè)文件,然后單擊菜單欄【File/Save as Template】（文件/另存為模板），彈出“Save as Template”（另存為模板）對(duì)話框。
“Site”（站點(diǎn)）：從右側(cè)下拉選單中選擇保存和應(yīng)用模板的站點(diǎn)；
“Existing Templates”（已存在地模板）：該列表框中列出了所選站點(diǎn)鐘所有的模板； “Save As”（另存為）：設(shè)置所要保存的模板文件的名稱；
這時(shí)我們發(fā)現(xiàn)Dreamweaver MX已經(jīng)自動(dòng)在“Site”（站點(diǎn)）面板中新建了一個(gè)名為“Templates”（模板）的文件夾，我們剛才創(chuàng)建的模板文件“mycool.dwt”就放在該文件夾下
定義可編輯區(qū)域
先為模板設(shè)置可編輯區(qū)域。
將光標(biāo)置于想要插入可編輯區(qū)域的地方，然后依次單擊菜單欄【Insert/Template Objects/Editable Region】（插入/模板對(duì)象/可編輯區(qū)域）（如圖14-10），或單擊“Insert/Templates”（插入/模板）面板上的“Editable Region”（可編輯區(qū)域）按鈕（如圖14-11），或按快捷鍵『Ctrl+Alt+V』，彈出“New Editable Region”（新建可編輯區(qū)域）對(duì)話框 定義模板的重復(fù)區(qū)域
重復(fù)區(qū)域：是指一個(gè)頁(yè)面中可以任意多地增加的部分，例如表格的內(nèi)容等。重復(fù)區(qū)域是不可編輯區(qū)域，如果要編輯不同的內(nèi)容，必須在重復(fù)區(qū)域中 條件區(qū)域：是指在滿足一定條件下才在頁(yè)面中顯示的區(qū)域插入可編輯區(qū)域。
操作：
1、選中重復(fù)區(qū)域的文本內(nèi)容。
2、在INSERT面板中單擊重復(fù)按鈕
4、為區(qū)域輸入一個(gè)名稱。
課題
認(rèn)識(shí)Dreamweaver
一、學(xué)習(xí)目的
了解Dreamweaver，學(xué)會(huì)利用Dreamweaver制作網(wǎng)頁(yè)。
二、學(xué)習(xí)內(nèi)容
Dreamweaver的基本知識(shí)?！緦W(xué)習(xí)步驟】
1、Dreamweaver的功能
Dreamweaver可以像普通的字處理軟件一樣編輯Internet上以HTML格式保存的所有文件，也就是網(wǎng)頁(yè)；它支持動(dòng)態(tài)HTML，可以在網(wǎng)頁(yè)中產(chǎn)生動(dòng)畫(huà)；還可以在網(wǎng)頁(yè)中插入各種插件，以產(chǎn)生特殊效果。
Dreamweaver可用于管理站點(diǎn)，它像文件夾一樣創(chuàng)建和打開(kāi)站點(diǎn)，用不同的方式查看站點(diǎn)中各個(gè)網(wǎng)頁(yè)之間的關(guān)系，調(diào)整站點(diǎn)的組織結(jié)構(gòu)，使整個(gè)站點(diǎn)條理清晰。
2、Dreamweaver的窗口
（1）標(biāo)題欄（2）菜單欄（3）工具欄（4）視圖欄（5）文件夾列表(6)工作區(qū)
3.網(wǎng)頁(yè)工作區(qū)的三個(gè)視圖方式選項(xiàng) 它們分別是“普通”、“HTML”“預(yù)覽”，它們之間的相互切換十分容易實(shí)現(xiàn)的。
普通視圖方式是Dreamweaver對(duì)網(wǎng)頁(yè)所見(jiàn)即所得編輯方式的最佳體現(xiàn)，在此方式下，可以
像在Word中那樣直接進(jìn)行各種編輯操作，實(shí)現(xiàn)網(wǎng)頁(yè)編輯的所有功能。
HTML視圖實(shí)際上是一個(gè)文本編輯器，其中給出了普通視圖方式下所件網(wǎng)頁(yè)的HTML代碼。在這里可以用菜單命令進(jìn)行復(fù)制、粘貼、刪除、查找等操作。對(duì)于HTML語(yǔ)言中的不同成分均用不同的顏色顯示，這樣比較容易區(qū)分各種語(yǔ)法成分。
為了在制作網(wǎng)頁(yè)過(guò)程中能夠隨時(shí)查看網(wǎng)頁(yè)的實(shí)際效果，Dreamweaver提供了預(yù)覽視圖方式。
4.安裝dreameaver的方法
安裝及注冊(cè) 5.關(guān)閉dreameaver 6.保存網(wǎng)頁(yè)的方法
3、小結(jié)
課題
建立一個(gè)簡(jiǎn)單的站點(diǎn)
一、學(xué)習(xí)目的
了解Dreamweaver，學(xué)會(huì)利用Dreamweaver制作網(wǎng)頁(yè)。
二、學(xué)習(xí)內(nèi)容
Dreamweaver的基本知識(shí)；建立一個(gè)簡(jiǎn)單的站點(diǎn)；進(jìn)行簡(jiǎn)單的網(wǎng)頁(yè)編輯。
【學(xué)習(xí)步驟】
1、創(chuàng)建空白站點(diǎn)。
執(zhí)行菜單命令“文件”—“新建”—“站點(diǎn)”，就會(huì)出現(xiàn)8中站點(diǎn)向?qū)?。出于?jiǎn)單，可
選擇“空站點(diǎn)”按鈕，并在“指定新站點(diǎn)的位置”框中填入站點(diǎn)的位置。在指定新站點(diǎn)的位置后，單擊“確定”即建成一個(gè)空站點(diǎn)。
2、建立一個(gè)簡(jiǎn)單的文字網(wǎng)頁(yè)
建立了一個(gè)站點(diǎn)之后，就應(yīng)該在站點(diǎn)中加入網(wǎng)頁(yè)了。① 創(chuàng)建空白網(wǎng)頁(yè)
執(zhí)行菜單命令“文件”—“新建”—“網(wǎng)頁(yè)”，就會(huì)出現(xiàn)一對(duì)話框，選擇“普通網(wǎng)頁(yè)”
模板并單擊“確定”即建立了一個(gè)新的空白頁(yè)面。
② 網(wǎng)頁(yè)工作區(qū)的三個(gè)視圖方式選項(xiàng) 它們分別是“普通”、“HTML”“預(yù)覽”，它們之間的相互切換十分容易實(shí)現(xiàn)的。
普通視圖方式是Dreamweaver對(duì)網(wǎng)頁(yè)所見(jiàn)即所得編輯方式的最佳體現(xiàn)，在此方式下，可以
像在Word中那樣直接進(jìn)行各種編輯操作，實(shí)現(xiàn)網(wǎng)頁(yè)編輯的所有功能。
HTML視圖實(shí)際上是一個(gè)文本編輯器，其中給出了普通視圖方式下所件網(wǎng)頁(yè)的HTML代碼。在這里可以用菜單命令進(jìn)行復(fù)制、粘貼、刪除、查找等操作。對(duì)于HTML語(yǔ)言中的不同成分均用不同的顏色顯示，這樣比較容易區(qū)分各種語(yǔ)法成分。
為了在制作網(wǎng)頁(yè)過(guò)程中能夠隨時(shí)查看網(wǎng)頁(yè)的實(shí)際效果，Dreamweaver提供了預(yù)覽視圖方式。
③ 輸入文本
網(wǎng)頁(yè)中最基本的也是最重要的部分就是網(wǎng)頁(yè)中由文本構(gòu)成的內(nèi)容，因此制作網(wǎng)頁(yè)首先要 從文本輸入開(kāi)始。
3、設(shè)置網(wǎng)頁(yè)中文字的字體、顏色、大小和效果
① 在文本開(kāi)始處按下鼠標(biāo)左鍵，不放手拖到結(jié)束處，選擇要設(shè)置的文本塊。
② 執(zhí)行菜單命令“格式—字體”。
③ 在“字體”對(duì)話框中，單擊“字體”選項(xiàng)卡。
④ 在字體選擇窗口中，選定所需要的字體，再確定文本的字型、大小、顏色、效果等。
⑤ 按“確定”即可。
4、網(wǎng)頁(yè)編輯
（1）將圖片插入網(wǎng)頁(yè)（2）將剪貼畫(huà)插入網(wǎng)頁(yè)（3）加入GIF動(dòng)畫(huà)
（4）保存嵌入式圖形文件（5）使用圖片工具欄（6）設(shè)置圖片屬性（7）設(shè)置網(wǎng)頁(yè)背景（8）設(shè)置超鏈接（9）應(yīng)用框架（10）表單的使用
5、小結(jié)
課題
設(shè)計(jì)限時(shí)自動(dòng)關(guān)閉的網(wǎng)頁(yè)
一、學(xué)習(xí)目的
了解Dreamweaver，學(xué)會(huì)利用Dreamweaver制作網(wǎng)頁(yè)。
二、學(xué)習(xí)內(nèi)容
Dreamweaver的基本知識(shí)；用Dreamweaver設(shè)計(jì)限時(shí)自動(dòng)關(guān)閉的網(wǎng)頁(yè)?！緦W(xué)習(xí)步驟】
設(shè)計(jì)頁(yè)面時(shí)，經(jīng)常會(huì)從一個(gè)頁(yè)面打開(kāi)一個(gè)子窗口以供瀏覽者查看。通常，這種子窗口中的內(nèi)容一經(jīng)瀏覽者看過(guò)，對(duì)于瀏覽者而言就不再需要，而他們常常會(huì)忘記關(guān)掉這些小窗口，致使許多的瀏覽器窗口打開(kāi)著，耗用大量的資源。因此我們可以將子窗口設(shè)計(jì)成經(jīng)過(guò)一段時(shí)間后可以自動(dòng)關(guān)閉的形式。
1.在本地站點(diǎn)中生成一個(gè)Smlple文件夾。
2.在Smlple文件夾中，生成名為Index.html以及名為firstpage.html的文件。
3.雙擊Index.html，打開(kāi)該文檔，進(jìn)入到文檔的設(shè)計(jì)視圖窗口中。
4.單擊菜單View/Head Content，顯示文檔的頭部區(qū)域。5.單擊設(shè)計(jì)視圖窗口中的文檔頭部窗格。選擇菜單Insert/Invisible Tags/Script，打開(kāi)Inset Script對(duì)話框。如圖所示，在Language下拉列表框中選擇javascript選項(xiàng)，并在Coctento文本框中輸入“setTimeout(“self.close()”，15000)”。單擊OK按鈕，完成在文檔頭部插入15秒后自動(dòng)關(guān)閉子窗口的腳本。在代碼中，15000表示15000毫秒，也即15秒，也可以根據(jù)需要將之修改為自己需要的時(shí)間毫秒數(shù)。
設(shè)置時(shí)間
6.在文檔窗口中輸入“關(guān)閉”字樣，在屬性面板上的Link文本框中輸入
“###”，將其設(shè)置為一個(gè)空鏈接。
5、小結(jié)
課題
設(shè)計(jì)限時(shí)自動(dòng)關(guān)閉的網(wǎng)頁(yè)
一、學(xué)習(xí)目的
了解Dreamweaver，學(xué)會(huì)利用Dreamweaver制作網(wǎng)頁(yè)。
二、學(xué)習(xí)內(nèi)容
Dreamweaver的基本知識(shí)；用Dreamweaver設(shè)計(jì)限時(shí)自動(dòng)關(guān)閉的網(wǎng)頁(yè)?！緦W(xué)習(xí)步驟】
7.在狀態(tài)欄左端的快速標(biāo)記編輯器上，單擊標(biāo)記按鈕。選中“關(guān)閉”鏈接，然后按下Ctrl+T組合鍵，打開(kāi)快速標(biāo)記編輯器，進(jìn)入到快速標(biāo)記編輯器的編輯標(biāo)記模式。然后在“>”前輸入“onclick=“selfclose()””。如圖所示，設(shè)置完畢，單擊OK按鈕，確認(rèn)操作。這樣在Index.html被作為子窗口打開(kāi)后，單擊
該鏈接就可以立刻關(guān)閉該子窗口。
8.保存Index.html文件，并退出index.html的Dremweaver窗口。9.現(xiàn)在開(kāi)始設(shè)計(jì)fristpage.html頁(yè)面。在本地站點(diǎn)的Smlple文件夾中，雙擊 fristpage.html，打開(kāi)該文檔，進(jìn)入到文檔的設(shè)計(jì)視圖窗口中。10.在文檔中輸入“單擊這里打開(kāi)會(huì)自動(dòng)關(guān)閉的子窗口”字樣。然后在屬性面板上的 Link文本框中輸入“###”，將之設(shè)置為空鏈接。11.可以通過(guò)為該鏈接應(yīng)用Open Browser Window行為來(lái)設(shè)置單擊鏈接時(shí)打開(kāi)Index.html窗口，不過(guò)更方便的方法是利用快速標(biāo)識(shí)編輯器。方法是首先將插入點(diǎn)放置到鏈接中，然后在狀態(tài)欄左端的標(biāo)識(shí)選擇器上，單擊標(biāo)識(shí)按鈕，選中整個(gè)鏈接。然后按下Ctrl+T組合鍵，打開(kāi)快速標(biāo)記編輯器，進(jìn)入到快速標(biāo)記編輯器的 編輯標(biāo)識(shí)模式。再在“>”前輸入“onclick=“window.open('index.html',null','width=200px，height=200px')””（如圖所示）。設(shè)置完畢，按下回車鍵，確認(rèn)操作。
設(shè)置單擊鏈接時(shí)打開(kāi)
12.上述操作就完成了本例的設(shè)置。可以單擊菜單用File/save，保存所做的工作。然后按下F12鍵，在瀏覽器中預(yù)覽頁(yè)面效果。
13、小結(jié)
課題 用Dreamweaver做會(huì)移動(dòng)的文字
一、學(xué)習(xí)目的
了解Dreamweaver，學(xué)會(huì)利用Dreamweaver制作網(wǎng)頁(yè)。
二、學(xué)習(xí)內(nèi)容
Dreamweaver的基本知識(shí)；用Dreamweaver做會(huì)移動(dòng)的文字?！緦W(xué)習(xí)步驟】
一、基本語(yǔ)法
文字移動(dòng)屬性的設(shè)置：方向 #=left, right 方式 #=scroll, slide, alternate
循環(huán) #=次數(shù)；若未指定則循環(huán)不止(infinite)
速度
2、小結(jié)
課題 用Dreamweaver創(chuàng)建導(dǎo)航條
一、學(xué)習(xí)目的
了解Dreamweaver，學(xué)會(huì)利用Dreamweaver制作網(wǎng)頁(yè)。
二、學(xué)習(xí)內(nèi)容
Dreamweaver的基本知識(shí)；用Dreamweaver創(chuàng)建導(dǎo)航條?！緦W(xué)習(xí)步驟】
一個(gè)網(wǎng)站的不同頁(yè)面使用了同一導(dǎo)航條。通過(guò)統(tǒng)一導(dǎo)航條的方法，我們可以實(shí)現(xiàn)網(wǎng)站風(fēng)格的統(tǒng)一，同時(shí)也方便了瀏覽者在不同頁(yè)面間的跳轉(zhuǎn)。用Dreamweaver 3可作出各種比較復(fù)雜的導(dǎo)航條。網(wǎng)頁(yè)上的導(dǎo)航條可由一個(gè)或幾個(gè)部分組成，每個(gè)部分均由各種圖像構(gòu)成，可以鏈接到不同的網(wǎng)頁(yè)頁(yè)面。在Dreamweaver中每部分中最多可設(shè)四個(gè)狀態(tài)下的圖像。一開(kāi)始是一個(gè)初始圖像，當(dāng)鼠標(biāo)移動(dòng)到導(dǎo)航條部位上時(shí)則顯示另一個(gè)圖像，還可以設(shè)置當(dāng)鼠標(biāo)點(diǎn)擊后的初始圖像，以及鼠標(biāo)點(diǎn)擊后當(dāng)鼠標(biāo)再次移動(dòng)到這個(gè)部位上的圖像。一般地，每部位只設(shè)一到兩種狀態(tài)的圖像。因?yàn)閳D像太多了，會(huì)影響網(wǎng)頁(yè)頁(yè)面的訪問(wèn)、瀏覽的速度。
導(dǎo)航條制作方法：移動(dòng)光標(biāo)到需要導(dǎo)航條的地方，單擊主菜單欄的“InsertNavigation Bar”子命令，或直接單擊Objects面板上的圖標(biāo)，彈出“Insert Navigation Bar”對(duì)話框(圖1)，此時(shí)我們可以進(jìn)行各種設(shè)置來(lái)實(shí)現(xiàn)上述功能：
圖1 在“Element Name”項(xiàng)后的文本框填入這個(gè)部位的命名，也可以不填，這時(shí)Dreamweaver 3將自動(dòng)給它命名。在Dreamweaver中每部分中最多可設(shè)四個(gè)狀態(tài)下的圖像：“Up Image”項(xiàng)是該部位的初始圖像，在其后文本框填入已準(zhǔn)備好的圖像的地址，或點(diǎn)擊右邊Browse按鈕來(lái)選擇。每個(gè)部位可只設(shè)置Up Image項(xiàng)，其下的“Over Image”、“Down Image”和“Over While Down Image”三項(xiàng)可以不設(shè)置。其中，“Over Image”項(xiàng)是鼠標(biāo)移動(dòng)到這個(gè)部位上時(shí)顯示的圖像(本例中選擇)；“Down Image”項(xiàng)是鼠標(biāo)點(diǎn)擊該部位后顯示的初始圖像；“Over While Down Image”項(xiàng)是鼠標(biāo)點(diǎn)擊后當(dāng)鼠標(biāo)再次移動(dòng)到這個(gè)部位上時(shí)顯示的圖像。注意：Element Name項(xiàng)和 Up Image項(xiàng)是必需的，所有的調(diào)用圖像都會(huì)在系統(tǒng)的提示下保存在Dreamweaver 3文件夾中，以便調(diào)用。
2、小結(jié)
課題 用Dreamweaver創(chuàng)建導(dǎo)航條
一、學(xué)習(xí)目的
了解Dreamweaver，學(xué)會(huì)利用Dreamweaver制作網(wǎng)頁(yè)。
二、學(xué)習(xí)內(nèi)容
Dreamweaver的基本知識(shí)；用Dreamweaver創(chuàng)建導(dǎo)航條?！緦W(xué)習(xí)步驟】
當(dāng)然，還可給該部位設(shè)置超級(jí)鏈接：在下面的“When Clicked Go To URL”項(xiàng)后文本框填入鏈接到的文件的地址，或單擊Browse按鈕選擇，當(dāng)鼠標(biāo)移動(dòng)到這個(gè)部位上時(shí)，在狀態(tài)欄中可以看到鏈接到的地址。When Clicked Go To URL項(xiàng)后有一個(gè)下拉選框，這是設(shè)置超級(jí)鏈接的目標(biāo)。
接著是“Options”項(xiàng)，若選中“Preload Images”選框，則瀏覽者瀏覽頁(yè)面時(shí)，所有圖像將在頁(yè)面下載的同時(shí)全部下載，整個(gè)頁(yè)面打開(kāi)的速度會(huì)慢些，但圖像間轉(zhuǎn)換會(huì)沒(méi)有延遲，選中它。反之，不選Preload Images選框，則頁(yè)面下載的同時(shí)只下載初始圖像，其它圖像按順序下載，整個(gè)頁(yè)面打開(kāi)的速度較快，但圖像間轉(zhuǎn)換會(huì)有延遲。若選中“Show “Down Image”Initially”選框，則將Down Image設(shè)為初始圖像。此時(shí)，Over While Down Image項(xiàng)改為鼠標(biāo)移動(dòng)到這個(gè)部位上時(shí)顯示的圖像，Up Image項(xiàng)改為鼠標(biāo)點(diǎn)擊該部位后顯示的初始圖像，Over image項(xiàng)改為鼠標(biāo)點(diǎn)擊后當(dāng)鼠標(biāo)再次移動(dòng)到這個(gè)部位上時(shí)顯示的圖像。
最下面是“ Insert”項(xiàng)，選框中有Horizontally(水平)和Vertically(垂直)兩個(gè)選項(xiàng)。選中Horizontally為導(dǎo)航條水平展開(kāi)，選中Vertically 為導(dǎo)航條垂直展開(kāi)。Use Table 項(xiàng)，選中后，Dreamweaver自動(dòng)生成HTML代碼將導(dǎo)航條各部位用表格隔開(kāi)。
當(dāng)一個(gè)部位設(shè)置完成后，要添加其他部位，可點(diǎn)擊對(duì)話框上方的“＋”按鈕，可按上面的步驟進(jìn)行新部位的設(shè)置。要?jiǎng)h去某一個(gè)部位，在“Nav Bar Elements”選框中先選中，再點(diǎn)擊對(duì)話框上方的“－”按鈕即可。
2、小結(jié)
課題 用Dreamweaver創(chuàng)建導(dǎo)航條
一、學(xué)習(xí)目的
了解Dreamweaver，學(xué)會(huì)利用Dreamweaver制作網(wǎng)頁(yè)。
二、學(xué)習(xí)內(nèi)容
Dreamweaver的基本知識(shí)；用Dreamweaver創(chuàng)建導(dǎo)航條。【學(xué)習(xí)步驟】
另外，使用設(shè)置導(dǎo)航條圖像中的高級(jí)功能，可改變文檔中基于當(dāng)前按鈕下的其他的圖像。在默認(rèn)下,單擊導(dǎo)航條中的元素時(shí),所有導(dǎo)航條中元素都會(huì)自動(dòng)地返回原來(lái)默認(rèn)的狀態(tài)。若想設(shè)置被選中圖像的上浮或是下沉的不同效果時(shí)，可用導(dǎo)航條中的高級(jí)功能：在“Behaviors”面板中的“Actions”標(biāo)簽頁(yè)，單擊其上面的“＋”號(hào)按鈕，在彈出的菜單中選擇“Set Nav Bar Image”命令，彈出Set Nav Bar Image 對(duì)話框中(見(jiàn)圖2)，選擇“Advanced”標(biāo)簽頁(yè)，對(duì)高級(jí)屬性進(jìn)行設(shè)置。其中，若選擇“Over Image or over while Down Image”項(xiàng)，則當(dāng)鼠標(biāo)劃過(guò)圖片時(shí)顯示其上面的圖片，有上浮或是下沉的效果，并在“Also Set Image”文本框中選擇要顯示的圖片，同時(shí)在其下面的“If Down To Image File”中選擇當(dāng)鼠標(biāo)按下時(shí)要顯示的圖片路徑；若選擇“Down Image”項(xiàng)，則當(dāng)瀏覽者單擊所選圖像后,顯示另外的圖片。
圖2 存盤(pán)后，按F12鍵測(cè)試所作導(dǎo)航條。
2、小結(jié)
課題 用Dreamweaver創(chuàng)建狀態(tài)欄
一、學(xué)習(xí)目的
了解Dreamweaver，學(xué)會(huì)利用Dreamweaver制作網(wǎng)頁(yè)。
二、學(xué)習(xí)內(nèi)容
Dreamweaver的基本知識(shí)；用Dreamweaver創(chuàng)建狀態(tài)欄。
【學(xué)習(xí)步驟】
狀態(tài)欄制作方法：
設(shè)置瀏覽器狀態(tài)欄中的文本信息,這一功能可在瀏覽網(wǎng)頁(yè)面時(shí),在瀏覽器窗口底下?tīng)顟B(tài)欄中顯示相關(guān)信息。其方法:選擇“Behaviors”面板中的Actions標(biāo)簽頁(yè)的“Set Text of Status Bar”命令,在彈出的Set Text of Status Bar對(duì)話框中如圖3,在“Message”的文本框中輸入所在狀態(tài)欄中顯示的文檔,按“OK”按鈕完成。再用按F12快捷鍵來(lái)測(cè)試,可看到其運(yùn)行的效果。
當(dāng)然可用JavaScript語(yǔ)言在Message文本框中加入些函數(shù),讓文本顯示功態(tài)的效果。
2、小結(jié)
課題 用Dreamweaver的模板創(chuàng)建網(wǎng)頁(yè)
一、學(xué)習(xí)目的
了解Dreamweaver，學(xué)會(huì)利用Dreamweaver制作網(wǎng)頁(yè)。
二、學(xué)習(xí)內(nèi)容
Dreamweaver的基本知識(shí)；用Dreamweaver的模板創(chuàng)建網(wǎng)頁(yè)?！緦W(xué)習(xí)步驟】
1、創(chuàng)建模板頁(yè)面
最簡(jiǎn)單的辦法是將一個(gè)網(wǎng)頁(yè)另存為模板文件，通過(guò)執(zhí)行命令：File→Save as Template，DreamWeaver會(huì)在網(wǎng)站根目錄中建立一個(gè)模板文件夾——Templates來(lái)保存該模板。
當(dāng)然，也可以新建一個(gè)模板：Window→Templates，會(huì)出現(xiàn)的Templates面板，單擊右下角的New Template按鈕，輸入文件名，就建立了一個(gè)空模板；再單擊Open Template按鈕打開(kāi)該模板，保存后自動(dòng)存放于網(wǎng)站模板文Templates
中。
新建、打開(kāi)的模板頁(yè)面和普通的網(wǎng)頁(yè)沒(méi)什么兩樣，同樣可以加入表格、層、圖片、動(dòng)畫(huà)、腳本，設(shè)置頁(yè)面屬性等。
舉例：這里以制作一個(gè)模板為例來(lái)說(shuō)明。在該頁(yè)面中，我們希望左側(cè)的網(wǎng)站標(biāo)識(shí)圖和底部的導(dǎo)航圖出現(xiàn)在每個(gè)頁(yè)面中。其中標(biāo)識(shí)圖由兩幅圖片疊加而成，導(dǎo)航圖上的文字“最近更新”、“在線閱讀”、“打包下載”等劃分成幾個(gè)熱區(qū)分別鏈接到不同的文件，它們?cè)诿總€(gè)頁(yè)面中都不變。右上部的主頁(yè)面區(qū)和左下角彈出式選單按鈕下面的頁(yè)面說(shuō)明則各不相同。為了保持頁(yè)面整潔，我們用表格來(lái)布
置這些元素。
準(zhǔn)確地說(shuō)它只是一個(gè)沒(méi)有可編輯區(qū)域的“準(zhǔn)模板”，下面再設(shè)定可編輯區(qū)
域。
2、設(shè)定可編輯區(qū)域
設(shè)定模板可編輯區(qū)域，一般來(lái)說(shuō)有兩種方法。
新建可編輯區(qū)域：選擇命令：Modify→Template→New Editable Region。在某一空白區(qū)域中單擊后執(zhí)行該命令即可將該區(qū)域變?yōu)榭删庉媴^(qū)域。標(biāo)記某一區(qū)域?yàn)榭删庉媴^(qū)域：選擇命令：Modify→Template→Mark Selectin as Editable Region。如果某區(qū)域已經(jīng)有一些文字，并且希望在以后新建的超文本文件中部分保留其內(nèi)容，先選中該區(qū)域再執(zhí)行標(biāo)記命令即可。
取消可編輯狀態(tài)：選擇命令：Modify→Template→Unmark Editable Region。執(zhí)行該命令后會(huì)彈出一個(gè)對(duì)話框，其中有當(dāng)前已有的可編輯區(qū)域列表，選中要取
消的區(qū)域名稱，確認(rèn)即可。
舉例：在大片空白區(qū)中隨便單擊一下，執(zhí)行Modify→Template→New Editable Region命令，在彈出對(duì)話框中輸入名稱：Main；選中左下角本頁(yè)說(shuō)明下面的文字，執(zhí)行Modify→Template→Mark Selectin as Editable Region命令，輸入名稱：exp。可以看到可編輯區(qū)顯示為淺藍(lán)色，保存即完成模板制作。
2、小結(jié)
課題 使用模板
一、學(xué)習(xí)目的
了解Dreamweaver，學(xué)會(huì)利用Dreamweaver制作網(wǎng)頁(yè)。
二、學(xué)習(xí)內(nèi)容
Dreamweaver的基本知識(shí)；用Dreamweaver的模板創(chuàng)建網(wǎng)頁(yè)?！緦W(xué)習(xí)步驟】
1、根據(jù)模板新建頁(yè)面
命令：File→New From Template。彈出對(duì)話框，從模板列表中選取模板，出現(xiàn)的新頁(yè)面中除可編輯區(qū)外均有淡黃色背景，是不能進(jìn)行修改的部分?？瞻椎腗ain編輯區(qū)可直接進(jìn)行插入表格、文字、圖片等操作，Exp編輯區(qū)保留有原來(lái)的文字，修改或重新編輯均可。
2、對(duì)一個(gè)已經(jīng)有內(nèi)容的頁(yè)面應(yīng)用模板
命令：Modify→Template→Apply Template to Page。選擇模板后還會(huì)彈出一個(gè)對(duì)話框，讓您選擇現(xiàn)有的孤立內(nèi)容保存到哪個(gè)可編輯區(qū)域（Choose Editable Region for Orphaned Content）。要是不想保留則可以選擇“（none）”。
舉例：我們先新建一個(gè)普通頁(yè)面，輸入：“CIW電腦工作室”，執(zhí)行Modify→Template→Apply Template to Page命令，選擇模板test，現(xiàn)有內(nèi)容保存區(qū)域選擇Main，確認(rèn)后可看到頁(yè)面自動(dòng)變成了模板頁(yè)的形式，而“CIW電腦工作室”這一行字就出現(xiàn)在主編輯窗口中。
3、更新模板以全面更新站點(diǎn)
基于某一模板建立了一些頁(yè)面后，對(duì)模板進(jìn)行修改后保存時(shí)，就會(huì)自動(dòng)彈出一個(gè)對(duì)話框，列出所有使用了該模板的頁(yè)面，詢問(wèn)是否要更新。另外一種方法是執(zhí)行Modify→Template→Update Pages命令。從Update Pages對(duì)話框中選擇一個(gè)站點(diǎn)或站點(diǎn)的某一種模板（同一站點(diǎn)中可以使用多個(gè)模板），單擊右側(cè)的Start按鈕，軟件會(huì)自動(dòng)搜索與模板相關(guān)聯(lián)的網(wǎng)頁(yè)并進(jìn)行更新。
非常方便！舉例：Test模板左側(cè)圖形中的“讀書(shū)破萬(wàn)站”圖片是用一個(gè)圖層疊加在另一幅圖片之上的，現(xiàn)在不想要它，同時(shí)還想將所有頁(yè)面中的該圖片均刪除。就可以打開(kāi)模板test.dwt，刪除該圖層，保存模板，單擊右側(cè)的“Update”按鈕即
可。
注意：新建和使用模板前需定義站點(diǎn)。方法是，執(zhí)行命令：Site→Define Sites；指定站點(diǎn)名稱和本地根目錄（Local Root）。模板使用的是相對(duì)路徑，如果沒(méi)有指定網(wǎng)站在本地的位置，軟件就不能準(zhǔn)確找到并保存模板文件；并且應(yīng)用模板新建和更新頁(yè)面時(shí)，頁(yè)面中的超鏈接也不能隨頁(yè)面文件保存位置的不同而
相應(yīng)變化。
2、小結(jié)
課題 用Dreamweaver 中插入背景音樂(lè)
一、學(xué)習(xí)目的
了解Dreamweaver，學(xué)會(huì)利用Dreamweaver制作網(wǎng)頁(yè)。
二、學(xué)習(xí)內(nèi)容
Dreamweaver的基本知識(shí)；用Dreamweaver 中插入背景音樂(lè)?！緦W(xué)習(xí)步驟】
一、直接插入法
1.打開(kāi)一張需要插入背景音樂(lè)的網(wǎng)頁(yè)，在菜單中找到這樣的命令： Windows> 設(shè)計(jì)教室-> HTML 部分中的“HTML語(yǔ)言剖析”中的一段，介紹一下< EMBED >標(biāo)記的參數(shù)：
2、小結(jié)
課題 用Dreamweaver 中插入背景音樂(lè)
一、學(xué)習(xí)目的
了解Dreamweaver，學(xué)會(huì)利用Dreamweaver制作網(wǎng)頁(yè)。
二、學(xué)習(xí)內(nèi)容
Dreamweaver的基本知識(shí)；用Dreamweaver 中插入背景音樂(lè)?！緦W(xué)習(xí)步驟】
< EMBED > 是用來(lái)插入各種多媒體，格式可以是 Midi、Wav、AIFF、AU 等等，Netscape 及 新版的 IE 都支持。其參數(shù)設(shè)定較多。如下 :
< EMBED src=“your.mid” autostart=“true” loop=“true” hidden=“true” >
src=“your.mid” 設(shè)定 midi 檔案及路徑，可以是相對(duì)或絕對(duì)。
autostart=true 是否在音樂(lè)檔下載完之后就自動(dòng)播放。true 是，false 否(內(nèi)定值)。
loop=“true” 是否自動(dòng)反復(fù)播放。LOOP=2 表示重復(fù)兩次，true 是，false 否。
HIDDEN=“true” 是否完全隱藏控制畫(huà)面，true 為是，no 為否(內(nèi)定)。
STARTTIME=“分:秒” 設(shè)定歌曲開(kāi)始播放的時(shí)間。如 STARTTIME=“00:30” 表示從第30秒處開(kāi)始播放。
VOLUME=“0-100” 設(shè)定音量的大小，數(shù)值是0到100之間。內(nèi)定則為使用系統(tǒng)本身的設(shè)定。
WIDTH=“整數(shù)” 和 HIGH=“整數(shù)” 設(shè)定控制面板的高度和寬度。(若 HIDDEN=“no”)
ALIGN=“center” 設(shè)定控制面板和旁邊文字的對(duì)齊方式，其值可以是 top、bottom、center、baseline、left、right、texttop、middle、absmiddle、absbottom
CONTROLS=“smallconsole” 設(shè)定控制面板的外觀。預(yù)設(shè)值是 console。
console 一般正常面板
smallconsole 較小的面板
playbutton 只顯示播放按鈕
pausecutton 只顯示暫停按鈕
stopbutton 只顯示停止按鈕
volumelever 只顯示音量調(diào)節(jié)按鈕
2、小結(jié)
課題 用Dreamweaver 中插入背景音樂(lè)
一、學(xué)習(xí)目的
了解Dreamweaver，學(xué)會(huì)利用Dreamweaver制作網(wǎng)頁(yè)。
二、學(xué)習(xí)內(nèi)容
Dreamweaver的基本知識(shí)；用Dreamweaver 中插入背景音樂(lè)?！緦W(xué)習(xí)步驟】
二、代碼法 < BGSOUND >：
< BGSOUND > 是用來(lái)插入背景音樂(lè)，但只適用于 IE，其參數(shù)設(shè)定不多。如下 < BGSOUND src=“your.mid” autostart=true loop=infinite > src=“your.mid” 設(shè)定 midi 檔案及路徑，可以是相對(duì)或絕對(duì)。autostart=true 是否在音樂(lè)檔下載完之后就自動(dòng)播放。true 是，false 否(內(nèi)定值)。loop=infinite 是否自動(dòng)反復(fù)播放。LOOP=2 表示重復(fù)兩次，Infinite 表示重復(fù)多次。
此種方法就是直接把< BGSOUND >標(biāo)記放于網(wǎng)頁(yè)文件的< head >< /head >之間，設(shè)置好mid文件的路徑就行。參數(shù)的設(shè)置如文中解說(shuō)。
三、插件法
有些人始終沒(méi)有舍棄 FrontPage 也許就因?yàn)樵谝恍┰氐牟迦胫校珼reamweaver 沒(méi)有提供功能，或者不方便。但我們知道，Dreamweaver 支持插件，聲音插入插件為我們提供了方便。
插件下載：sound.mxp 下載后雙擊文件，就可以直接安裝了，安裝完成你可以在“對(duì)象”面板的“Common”欄看到一個(gè)喇叭圖標(biāo)。直接點(diǎn)擊此按鈕，就彈出如下圖所示的插入窗
口：
Forever：設(shè)置無(wú)限循環(huán)播放
Never：不循環(huán)播放，即只播放一次
NO of times：設(shè)置播放的次數(shù)
點(diǎn)擊“Browser”按鈕選擇好聲音文件之后，按確定完成制作。
2、小結(jié)
課題 用Dreamweaver在主頁(yè)中制作連續(xù)的背景音樂(lè)
一、學(xué)習(xí)目的
了解Dreamweaver，學(xué)會(huì)利用Dreamweaver制作網(wǎng)頁(yè)。
二、學(xué)習(xí)內(nèi)容
Dreamweaver的基本知識(shí)；用Dreamweaver在主頁(yè)中制作連續(xù)的背景音樂(lè)?！緦W(xué)習(xí)步驟】
一、保持背景音樂(lè)的連續(xù)不斷，效果很好，現(xiàn)介紹如下，供制作個(gè)人主頁(yè)的朋友們參考： 首先使用標(biāo)簽 〈frameset〉〈frame...〉〈frame...〉〈frameset〉 將主頁(yè)(index.html)屏幕分成上下兩個(gè)幀，為了不破壞頁(yè)面布局，將上幀的高度設(shè)為 0；然后，在主頁(yè)上幀放置的超文本文件(back_music.htm)中設(shè)置網(wǎng)站的背景音樂(lè)，最好不要設(shè)置播放界面；最后，在主頁(yè)的下幀放置網(wǎng)站主頁(yè)的主要內(nèi)容(main.htm)。這樣一來(lái)，主頁(yè)下幀的頁(yè)面就成為主頁(yè)實(shí)際的活動(dòng)頁(yè)面，上幀的頁(yè)面在訪問(wèn)者的整個(gè)瀏覽過(guò)程中始終保持靜止不動(dòng)，設(shè)置的背景音樂(lè)也就不會(huì)中斷了。主頁(yè)文件 index.html: 〈html〉
〈head〉〈title〉連續(xù)不斷的背景音樂(lè)〈/title〉〈/head〉 〈frameset frameborder=“0” rows=“0,*”〉
〈frame src=“back_music.htm” scrolling=“no” noresize frameborder=“0”〉 〈frame src=“main.htm” frameborder=“0”〉 〈noframes〉 〈body〉
〈p〉please browse the web pages with browser that supperts frames.〈/p〉 〈/body〉 〈/noframes〉 〈/frameset〉 〈/html〉
上幀文件 back_music.htm(背景音樂(lè)為當(dāng)前目錄下的liang_zhu.mid,只播放一次)： 〈html〉
〈head〉〈title〉〈/title〉〈/head〉 〈body〉
〈!-背景音樂(lè):--〉
〈embed src=“./liang_zhu.mid” hidden=“true” autostart=“true” loop=“0”〉 〈/body〉 〈/html〉
2、小結(jié)
課題 DreamweaverMX制作導(dǎo)航下拉菜單
一、學(xué)習(xí)目的
了解Dreamweaver，學(xué)會(huì)利用Dreamweaver制作網(wǎng)頁(yè)。
二、學(xué)習(xí)內(nèi)容
Dreamweaver的基本知識(shí)；DreamweaverMX制作導(dǎo)航下拉菜單?！緦W(xué)習(xí)步驟】
Dreamweaver從出道以來(lái)，其簡(jiǎn)便易用而又功能強(qiáng)大的“行為”(Behavior)一直是大家所關(guān)注的熱點(diǎn)之一。在Dreamweaver MX(DW MX)中，對(duì)這一功能又有了擴(kuò)充與改進(jìn)。
在DW MX中，行為指的是為了響應(yīng)某一事件(Event)而采取的一個(gè)操作(Action)。其中Event 指的是瀏覽器的事件，比如窗口刷新、鼠標(biāo)移動(dòng)等。而 Action 指的是后臺(tái)響應(yīng)事件的 JavaScript 代碼，可以完成相應(yīng)的操作，比如播放聲音、翻轉(zhuǎn)圖片等。
用DW MX制作導(dǎo)航下拉菜單是網(wǎng)頁(yè)中經(jīng)常使用的特效之一。(如圖1)主要應(yīng)用了DW MX中的“Show-Hide Layers”行為。
圖1 首先制作好導(dǎo)航條(圖1中的“產(chǎn)品中心”那一欄)，隨后添加一個(gè)層，作為下拉菜單將要顯示的位置，并填入下拉菜單的對(duì)應(yīng)欄目。接下來(lái)，打開(kāi)“Behaviors”面板，同時(shí)選中“產(chǎn)品中心”鏈接(注意，這個(gè)時(shí)候不能夠選中剛剛建好的層，否則無(wú)法應(yīng)用“Show-Hide Layers”行為)，單擊“+”號(hào)，選擇“Show-Hide Layers”，就可以看到我們剛剛建好的層在選擇項(xiàng)中，可以設(shè)定為隱藏或者顯示(如圖2)。
圖2 行為的妙用主要體現(xiàn)在：如果我們要實(shí)現(xiàn)下拉菜單，關(guān)鍵就是讓鼠標(biāo)移到“產(chǎn)品中心”鏈接上時(shí)，使層顯示；而鼠標(biāo)離開(kāi)鏈接時(shí)，使層隱藏。根據(jù)這種思想，我們首先為這個(gè)層設(shè)立兩個(gè)Action，一個(gè)選擇Hide，一個(gè)選擇Show。然后，調(diào)整Event，將Hide Layer的Event設(shè)為OnMouseOut，即為鼠標(biāo)離開(kāi)鏈接；而將Show Layer的Event設(shè)為OnMouseOver，即為鼠標(biāo)選中鏈接。按“F12”預(yù)覽，就可看到我們期盼的效果。
這樣，平時(shí)我們覺(jué)得很神秘的導(dǎo)航下拉菜單就可以輕易在行為中實(shí)現(xiàn)。還可以在導(dǎo)航鏈接上繼續(xù)應(yīng)用 “Swap Image”行為，實(shí)現(xiàn)鼠標(biāo)點(diǎn)選鏈接時(shí)出現(xiàn)圖片
翻轉(zhuǎn)效果。
行為不是一個(gè)個(gè)孤立的特效，可以由多個(gè)行為組合疊加實(shí)現(xiàn)復(fù)雜的功能，除了DW MX默認(rèn)設(shè)置好的行為外，我們還可以從004km.cn上下載更多更酷的第三方行為，我們只需將它們直接復(fù)制到DreamweaverMXConfigurationBehaviorsActions目錄下即可，從而使DW MX的這一閃光點(diǎn)更加眩目。課題
用Dreamweaver做彈出窗口
一、學(xué)習(xí)目的
了解Dreamweaver，學(xué)會(huì)利用Dreamweaver制作網(wǎng)頁(yè)。
二、學(xué)習(xí)內(nèi)容
Dreamweaver的基本知識(shí)；用Dreamweaver做彈出窗口?！緦W(xué)習(xí)步驟】
1.打開(kāi)一個(gè)頁(yè)面，設(shè)置頁(yè)面屬性。左邊界，頂部邊界為 0，在標(biāo)題處輸入標(biāo)題名稱。
2.在頁(yè)面中插入圖片。也可以是文字，F(xiàn)lash 動(dòng)畫(huà)等。小窗口頁(yè)面就準(zhǔn)備好了。
給一個(gè)頁(yè)面添加彈出小窗口：
1.打開(kāi)需要添加彈出小窗口頁(yè)面，例如一個(gè)網(wǎng)站的首頁(yè)，在標(biāo)簽選擇器中選擇“ body ”標(biāo)簽。
2.打開(kāi)行為面板，點(diǎn)擊“ + ”按鈕添加行為。
3.選擇“打開(kāi)瀏覽器窗口”。
4.在要顯示的 URL 處，選擇彈出小窗口頁(yè)面文件。設(shè)置彈出小窗口屬性。
5.按 F12，在瀏覽器中發(fā)布的效果如下圖。
課題
Dreamweaver 頁(yè)面制作
一、學(xué)習(xí)目的
了解Dreamweaver，學(xué)會(huì)利用Dreamweaver制作網(wǎng)頁(yè)。
二、學(xué)習(xí)內(nèi)容
Dreamweaver的基本知識(shí)；Dreamweaver 頁(yè)面制作?！緦W(xué)習(xí)步驟】
一、下邊的簡(jiǎn)單網(wǎng)頁(yè)為例，敘述一下制作過(guò)程。簡(jiǎn)單網(wǎng)頁(yè)如下圖：
在開(kāi)始制作之前，我們先對(duì)這個(gè)頁(yè)面進(jìn)行一下分析?？纯催@個(gè)頁(yè)面用到了那些東西。
□網(wǎng)頁(yè)頂端的標(biāo)題“我的主頁(yè)”是一段文字。
□網(wǎng)頁(yè)中間是一幅圖片。
□最下端的歡迎詞是一段文字。
□網(wǎng)頁(yè)背景是一深紫紅顏色。
知道了這個(gè)網(wǎng)頁(yè)的結(jié)構(gòu)以后我們就來(lái)可以制作了。
首先啟動(dòng)Dreamweaver MX 2004，確保你已經(jīng)用站點(diǎn)管理器建立好了一個(gè)網(wǎng)站（根目錄）。
為了制作方便，請(qǐng)您事先打開(kāi)資源管理器，把要使用的圖片收集到網(wǎng)站目錄images文件夾內(nèi)。
【插入標(biāo)題文字】
進(jìn)入頁(yè)面編輯設(shè)計(jì)視圖狀態(tài)。在一般情況下，編輯器默認(rèn)左對(duì)齊，光標(biāo)在左上角閃爍，光標(biāo)位置就是插入點(diǎn)的位置。如果要想讓文字居中插入，點(diǎn)屬性面板居中按鈕即可。啟動(dòng)中文輸入法輸入“我的主頁(yè)”四個(gè)字。字小不要緊，我們可以對(duì)它進(jìn)行設(shè)置。
【設(shè)置文字的格式】 選中文字，在上圖屬性面板中將字體格式設(shè)置成默認(rèn)字體，大小可任意更改字號(hào)。并選中“B”將字體變粗。
【設(shè)置文字的顏色】首先選中文字，在屬性面板中，單擊顏色選擇圖標(biāo)，在彈出的顏色選擇器中用滴管選取顏色即可。
【設(shè)置網(wǎng)頁(yè)的標(biāo)題和背景顏色】
點(diǎn)擊“修改”菜單選“頁(yè)面屬性”。系統(tǒng)彈出頁(yè)面屬性對(duì)話框（如下圖）
請(qǐng)?jiān)跇?biāo)題輸入框填入標(biāo)題“我的主頁(yè)”。
設(shè)置背景顏色： 網(wǎng)頁(yè)背景可以是圖片，也可以是顏色。此例是顏色。如上圖打開(kāi)背景顏色選擇器進(jìn)行選取。如果背景要設(shè)為圖片，點(diǎn)擊背景圖象“瀏覽”按鈕，系統(tǒng)彈出圖片選擇對(duì)話框，選中背景圖片文件，點(diǎn)擊確定按鈕。設(shè)計(jì)視圖狀態(tài)，在標(biāo)題“我的主頁(yè)”右邊空白處單擊鼠標(biāo)，回車換一行，按照以下的步驟插入一幅畫(huà)圖片，并使這張圖片居中。您也可以通過(guò)屬性面板中的左對(duì)齊按鈕讓其居左安放。
【插入圖像】選擇以下任意一種方法：
（1）使用插入菜單：在“插入”菜單選“圖像”，彈出“選擇圖像源文件”對(duì)話框，選中該圖像文件，單擊確定。如下圖：
2）使用插入欄（如下圖）：?jiǎn)螕舨迦霗趯?duì)象按鈕>選源文件”對(duì)話框，其余操作同上。
按鈕，彈出“選擇圖像
（3）使用面板組“資源”面板（如下圖）：點(diǎn)
按鈕，展開(kāi)根目錄的圖片文件夾，選定該文件，用鼠標(biāo)拖動(dòng)至工作區(qū)合適位置。
注：為了管理方便，我們把圖片放在“images”文件夾內(nèi)。如果圖片少，您也可以放在站點(diǎn)根目錄下。注意文件名要用英文或用拼音文字命名而且使用小寫(xiě)，不能用中文，否則要出現(xiàn)一些麻煩。
一個(gè)圖片就插入完畢了。（插入*.swf動(dòng)畫(huà)文件，選擇“插入”菜單＞媒體＞Flash）。
【輸入歡迎文字】
在圖片右邊空白處單擊，回車換行。仍然按照上述方法，輸入文字“歡迎您??”然后，利用屬性面板對(duì)文字進(jìn)行設(shè)置。保存頁(yè)面。
一個(gè)簡(jiǎn)單的頁(yè)面就這樣編輯完畢了。
【預(yù)覽網(wǎng)頁(yè)】在頁(yè)面編輯器中按F12預(yù)覽網(wǎng)頁(yè)效果。網(wǎng)站中的第一頁(yè)，也就是首頁(yè)，我們通常在存盤(pán)時(shí)取名為index.htm?！拘〗Y(jié)】在今天的教程中我們制作了一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)。內(nèi)容有四：
①圖片插入和對(duì)齊設(shè)置；
②文字的格式、顏色和加粗等設(shè)置； ③背景顏色的設(shè)置； ④預(yù)覽網(wǎng)頁(yè)，查看實(shí)際效果。
不僅要掌握還要舉一反三反復(fù)練習(xí)。
課題 用Dreamweaver 發(fā)布網(wǎng)站
一、學(xué)習(xí)目的
了解Dreamweaver，學(xué)會(huì)利用Dreamweaver制作網(wǎng)頁(yè)。
二、學(xué)習(xí)內(nèi)容
Dreamweaver的基本知識(shí)；用Dreamweaver 發(fā)布網(wǎng)站。【學(xué)習(xí)步驟】
在發(fā)布網(wǎng)站之前先使用Dreamweaver站點(diǎn)管理器對(duì)你的網(wǎng)站文件進(jìn)行檢查和整理，這一步很必要?？梢哉页鰯嗟舻逆溄?、錯(cuò)誤的代碼和未使用的孤立文件等，以便進(jìn)行糾正和處理。
步驟如下：在編輯視圖點(diǎn)「站點(diǎn)」菜單＞選“檢查站點(diǎn)范圍的鏈接”，彈出“結(jié)果”對(duì)話框，如下圖：
下圖是檢查器檢查出本網(wǎng)站與外部網(wǎng)站的鏈接的全部信息，對(duì)于外部鏈接，檢查器不能判斷正確與否，請(qǐng)自行核對(duì)。
下圖是檢查器找出的孤立文件，這些文件您的網(wǎng)頁(yè)沒(méi)有使用，但是仍在你的網(wǎng)站文件夾里存放，上傳后它會(huì)占據(jù)有效空間，應(yīng)該把它清除。清除辦法是：先選中文件，點(diǎn)Delete鍵，確定。這些文件就放在“回收站”。
如果不想刪除這些文件，點(diǎn)保存報(bào)告按鈕（上圖所示），在彈出的對(duì)話框中您給報(bào)告文件一個(gè)保存路徑和文件名即可。該報(bào)告文件為一個(gè)檢查結(jié)果列表。你可以參照此表，進(jìn)行處理。
糾正和整理之后，您的網(wǎng)站就可以發(fā)布了。
【發(fā)布站點(diǎn)操作】
如果您是第一次上傳文件，您的遠(yuǎn)程 Web 服務(wù)器根文件夾是空文件夾時(shí)按以下操作進(jìn)行。如果不是空文件夾，另行操作附后。
服務(wù)器根文件夾是空文件夾時(shí)，連接到遠(yuǎn)程站點(diǎn)，請(qǐng)執(zhí)行以下操作：
在 Dreamweaver MX 2004中，選擇“站點(diǎn)”>“管理站點(diǎn)”。管理站點(diǎn)對(duì)話框中“dwmx2004”是在本教程第5頁(yè)設(shè)置的，如果想回憶一下，請(qǐng)查看“設(shè)置站點(diǎn)”。
選擇一個(gè)站點(diǎn)（即本地根文件夾），然后單擊“編輯”。
單擊對(duì)話框頂部的“基本”選項(xiàng)卡。在前面“設(shè)置站點(diǎn)”時(shí)，已填寫(xiě)了“基本”選項(xiàng)卡中的前幾個(gè)步驟，因此單擊幾次“下一步”，直到向?qū)ы敳扛吡溜@示“共享文件”步驟。如下圖：
在標(biāo)有“您如何連接到遠(yuǎn)程服務(wù)器？”的彈出式菜單中，選擇“FTP”。單擊“下一步”，彈出如下對(duì)話框：
請(qǐng)輸入以下選項(xiàng)：
輸入服務(wù)器的主機(jī)名；（必須填入）
“您打算將您的文件儲(chǔ)存在服務(wù)器上的什么文件夾中？”（可以留空）
在相應(yīng)的文本框中輸入您的用戶名和密碼。
“使用安全 FTP(SFTP)”選項(xiàng)。（可不勾選）
單擊“測(cè)試連接”。
如果連接不成功，請(qǐng)檢查設(shè)置或咨詢系統(tǒng)管理員。
在輸入相應(yīng)的信息后，單擊“下一步”。
不要為站點(diǎn)啟用文件存回和取出。
單擊“下一步”。
單擊“完成”以完成遠(yuǎn)程站點(diǎn)的設(shè)置。
再次單擊“完成”以退出“管理站點(diǎn)”對(duì)話框。
【上傳文件】
在設(shè)置了本地文件夾和遠(yuǎn)程文件夾（空文件夾）之后，可以將文件從本地文件夾上傳到 Web 服務(wù)器。
請(qǐng)執(zhí)行以下操作：
在“文件”面板（“窗口”>“文件”）中，選擇站點(diǎn)的本地根文件夾。
單擊“文件”面板工具欄上的“上傳文件”藍(lán)色箭頭圖標(biāo)。
Dreamweaver MX 2004會(huì)將所有文件復(fù)制到服務(wù)器默認(rèn)的遠(yuǎn)程根文件夾。
多數(shù)空間提供商都設(shè)置有服務(wù)器默認(rèn)的文件夾，請(qǐng)?jiān)诖宋募A下創(chuàng)建一個(gè)空文件夾，方法是：在“文件”面板，將“本地視圖”轉(zhuǎn)換為“遠(yuǎn)程視圖”。右鍵點(diǎn)擊文件夾，選“新建文件夾”，輸入一個(gè)名稱，用作您的遠(yuǎn)程根文件夾，名稱與您本地根文件夾的名稱一致，便于操作。
為了操作更直觀，您也可以最大化“文件”面板。請(qǐng)打開(kāi)“文件”面板的最右邊的“擴(kuò)展/折疊”按鈕，最大化文件面板，如下圖，左邊為遠(yuǎn)端站點(diǎn)內(nèi)容，右邊為本地文件內(nèi)容：（注）這是將文件夾展開(kāi)的示例，便于您觀察，供參考。
點(diǎn)擊，Dreamweaver MX 2004將所有文件復(fù)制到您定義的遠(yuǎn)程文件夾。
提示：第一次上傳必須搞清楚網(wǎng)絡(luò)空間服務(wù)商指定的服務(wù)器默認(rèn)的存放網(wǎng)頁(yè)的文件夾，在此文件夾下存放您的站點(diǎn)文件。訪問(wèn)您的網(wǎng)站地址為：http://......./index.htm 如果你在服務(wù)器默認(rèn)的文件夾下上建立了與本地根文件夾同名的文件夾，那么訪問(wèn)您的網(wǎng)站，需要用這樣的地址：http://........./（您的文件夾名）/index.htm 上傳完畢，請(qǐng)?jiān)跒g覽器中輸入瀏覽地址，測(cè)試您上傳的結(jié)果。
