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