第一篇：dreamweaver網頁制作教案
dreamweaver網頁制作教案
（Dreamweaver MX）
一、Dreamweaver MX中文版建站初步
建立一個網站，首先要在本地機器上做好網站，再傳到網上的虛擬空間上?，F在免費的網頁空間很少了，在http://。
◇使用屬性檢查器：選中示例中的圖像，也可以是文字，點擊屬性面板中的“瀏覽文件”圖標。
◇選中一個文件。會出現一個文件相對于“文檔”，“站點根目錄的選擇”。文檔相對路徑是最適合用于本地鏈接的路徑類型，適合絕大多數Web站點，推薦使用。
◇根相對路徑：如果在一個使用多臺服務器的大型Web站點或一臺服務器上有多個站點的情況下工作，可能需要使用這種類型的路徑。很少用到這種路徑。如果沒有服務器的控制權限，不要使用這種方式！
◇絕對路徑：完整的URL，稱作絕對路徑。例如在鏈接域輸入http://vip.5dmedia.com/fuguotao
◇從打開文檔的選取中創建鏈接：選中文字，按Shift鍵，拖動出現“指向文件”圖標，把“指向文件”圖標拖向目標文件，就會建立鏈接。
◇選擇被鏈接文檔要打開的位置：
若要使被鏈接文檔不出現在當前窗口或框架中，從屬性面板的“目標”彈出式菜單選取一個選項。
_blank 在新的未命名的瀏覽器窗口中加載鏈接文檔。
_parent 在父框架頁或包含該鏈接的框架窗口中加載鏈接文檔。如果包含鏈接的框架不是嵌套的，則鏈接文檔將加載到整個瀏覽器窗口中。_self 將鏈接文檔加載到與鏈接相同的框架或窗口中，該目標是默認值，所以通常您不需要指定它。
_top 將在整個瀏覽器窗口中加載鏈接文件，同時移除所有框架。
一個網站中，第一級鏈接或者導航鏈接選擇_self，第二級鏈接和友情鏈接選擇_blank。
第二部分：使用錨
簡明步驟：選中文本→在目標文檔中插入錨標記→命名→拖動“指向文件”圖標到文本?！箧溄拥轿臋n中的指定位置：在需要插入錨的地方，點一下光標，然后單擊常用面板上的命名錨記工具。
鍵入錨記名稱，一個站點中的錨記名稱只可以是唯一的，否則會出現錯誤。
在文檔中選取要創建鏈接的文本，打開您需要鏈接的命名錨記所在文檔，不一定要是當前文檔，可以是站點中的其它文檔，點擊屬性面板中的“指向文件”圖標，并將它拖動到您需要鏈接的錨記處。
第三部分：使用空鏈接
使用空鏈接可以為頁面上的對象或文本附加行為。創建步驟： 1.在文檔窗口中，選中要設置鏈接的文本、圖像或其他對象。2.在屬性面板的鏈接框中，只輸入一個“#”號。3.如果單擊這種地址為一個“#”的鏈接，無論當前你處于文檔的什么地方，都會自動跳轉到文檔的開頭位置。很多人非常討厭這種情況，因此出現很多插件?？梢杂谩?##”來代替“#”，單擊這樣的鏈接的時候，會保持當前頁面的瀏覽位置。4.還可以在屬性面板的鏈接框中輸入javascript:;創建空鏈接。第四部分：創建javascript腳本鏈接 1.在文檔窗口中選取文本，圖象或對象
2.在“屬性”檢查器的“鏈接”欄中鍵入javascript:，其后緊接JavaScript代碼或函數調用。
例如在鏈接欄中鍵入javascript:alert('哈哈你上當了')創建一個鏈接，點擊鏈接后就會出現一個警告框
第五部分：創建電子郵件鏈接
方法一：選取需要創建鏈接的文本或者圖像，點擊常用面板中的“電子郵件鏈接”工具，輸入郵件地址。方法二：選取需要創建鏈接的文本或者圖像，在屬性面板中的鏈接欄輸入mailto:郵件地址。
第六部分：創建跳轉菜單，例如制作一個友情鏈接。
首先將插入點放在要插入鏈接的位置。點擊表單面板中的跳轉工具
在插入跳轉菜單對話框中，點添加項添加新鏈接。
在屬性面板中選擇類型為“菜單”。
在瀏覽器中發布如圖：
在屬性面板中選擇類型為“列表”高度為3。
在瀏覽器中發布如圖：
點擊屬性面板中的列表值，可以修改列表值。
第七部分：給鏈接增加提示，給鏈接增加快捷鍵。首先將插入點放在要插入鏈接的位置。點擊常用面板上的超級鏈接工具。
設置鏈接參數。
標題是指當指向鏈接會出現提示。
訪問鍵是指按鍵盤上的快捷鍵會選中鏈接。例如在實例中按Alt+D鍵會選中5D多媒體。
第二篇：Dreamweaver網頁制作教案
認識Dreamweaver
一、學習目的
了解Dreamweaver，學會利用Dreamweaver制作網頁。
二、學習內容
Dreamweaver的基本知識。【學習步驟】
1、Dreamweaver的功能
Dreamweaver可以像普通的字處理軟件一樣編輯Internet上以HTML格式保存的所有文件，也就是網頁；它支持動態HTML，可以在網頁中產生動畫；還可以在網頁中插入各種插件，以產生特殊效果。
Dreamweaver可用于管理站點，它像文件夾一樣創建和打開站點，用不同的方式查看站點中各個網頁之間的關系，調整站點的組織結構，使整個站點條理清晰。
2、Dreamweaver的窗口
（1）標題欄（2）菜單欄（3）工具欄（4）視圖欄（5）文件夾列表（6）
工作區
3.網頁工作區的三個視圖方式選項
它們分別是“普通”、“HTML”“預覽”，它們之間的相互切換十分容易實現 的。
普通視圖方式是Dreamweaver對網頁所見即所得編輯方式的最佳體現，在此方式下，可以
像在Word中那樣直接進行各種編輯操作，實現網頁編輯的所有功能。HTML視圖實際上是一個文本編輯器，其中給出了普通視圖方式下所件網頁的HTML代碼。在這里可以用菜單命令進行復制、粘貼、刪除、查找等操作。對于HTML語言中的不同成分均用不同的顏色顯示，這樣比較容易區分各種語法成分。
為了在制作網頁過程中能夠隨時查看網頁的實際效果，Dreamweaver提供了預覽視圖方式。
4.安裝dreameaver的方法
安裝及注冊 5.關閉dreameaver 6.保存網頁的方法
三、小結
Dreamweaver的基本知識
建立一個簡單的站點
一、學習目的
了解Dreamweaver，學會利用Dreamweaver制作網頁。
二、學習內容
Dreamweaver的基本知識；建立一個簡單的站點；進行簡單的網頁編輯。
【學習步驟】
1、創建空白站點。
執行菜單命令“文件”—“新建”—“站點”，就會出現8中站點向導。出于簡單，可
選擇“空站點”按鈕，并在“指定新站點的位置”框中填入站點的位置。在指定新站點的位置后，單擊“確定”即建成一個空站點。
2、建立一個簡單的文字網頁
建立了一個站點之后，就應該在站點中加入網頁了。① 創建空白網頁
執行菜單命令“文件”—“新建”—“網頁”，就會出現一對話框，選擇“普通網頁”
模板并單擊“確定”即建立了一個新的空白頁面。
② 網頁工作區的三個視圖方式選項
它們分別是“普通”、“HTML”“預覽”，它們之間的相互切換十分容易實現 的。
普通視圖方式是Dreamweaver對網頁所見即所得編輯方式的最佳體現，在此方式下，可以像在Word中那樣直接進行各種編輯操作，實現網頁編輯的所 有功能。
HTML視圖實際上是一個文本編輯器，其中給出了普通視圖方式下所件網頁的HTML代碼。在這里可以用菜單命令進行復制、粘貼、刪除、查找等操作。對于HTML語言中的不同成分均用不同的顏色顯示，這樣比較容易區分各種語法成分。為了在制作網頁過程中能夠隨時查看網頁的實際效果，Dreamweaver提供了預覽視圖方式。
③ 輸入文本
網頁中最基本的也是最重要的部分就是網頁中由文本構成的內容，因此制作 網頁首先要從文本輸入開始。
3、設置網頁中文字的字體、顏色、大小和效果
① 在文本開始處按下鼠標左鍵，不放手拖到結束處，選擇要設置的文本塊。② 執行菜單命令“格式—字體”。
③ 在“字體”對話框中，單擊“字體”選項卡。
④ 在字體選擇窗口中，選定所需要的字體，再確定文本的字型、大小、顏色、效果等。⑤ 按“確定”即可。
4、網頁編輯
（1）將圖片插入網頁（2）將剪貼畫插入網頁（3）加入GIF動畫（4）保存嵌入式圖形文件（5）使用圖片工具欄（6）設置圖片屬性（7）設置網頁背景（8）設置超鏈接（9）應用框架（10）表單的使用
5、小結
簡單站點的建立過程
設計限時自動關閉的網頁
一、學習目的
了解Dreamweaver，學會利用Dreamweaver制作網頁。
二、學習內容
Dreamweaver的基本知識；用Dreamweaver設計限時自動關閉的網頁。【學習步驟】
設計頁面時，經常會從一個頁面打開一個子窗口以供瀏覽者查看。通常，這種子窗口中的內容一經瀏覽者看過，對于瀏覽者而言就不再需要，而他們常常會忘記關掉這些小窗口，致使許多的瀏覽器窗口打開著，耗用大量的資源。因此我們可以將子窗口設計成經過一段時間后可以自動關閉的形式。1.在本地站點中生成一個Smlple文件夾。
2.在Smlple文件夾中，生成名為Index.html以及名為firstpage.html的文件。3.雙擊Index.html，打開該文檔，進入到文檔的設計視圖窗口中。4.單擊菜單View/Head Content，顯示文檔的頭部區域。
5.單擊設計視圖窗口中的文檔頭部窗格。選擇菜單Insert/Invisible Tags/Script，打開Inset Script對話框。如圖所示，在Language下拉列表框中選擇javascript選項，并在Coctento文本框中輸入“setTimeout(“self.close()”，15000)”。單擊OK按鈕，完成在文檔頭部插入15秒后自動關閉子窗口的腳本。在代碼中，15000表示15000毫秒，也即15秒，也可以根據需要將之修改為自己需要的時間毫秒數。
設置時間 6.在文檔窗口中輸入“關閉”字樣，在屬性面板上的Link文本框中輸入“###”，將其設置為一個空鏈接。
7.在狀態欄左端的快速標記編輯器上，單擊標記按鈕。選中“關閉”鏈接，然后按下Ctrl+T組合鍵，打開快速標記編輯器，進入到快速標記編輯器的編輯標記模式。然后在“>”前輸入“onclick=“selfclose()””。如圖所示，設置完畢，單擊OK按鈕，確認操作。這樣在Index.html被作為子窗口打開后，單擊該鏈接就可以立刻關閉該子窗口。
8.保存Index.html文件，并退出index.html的Dremweaver窗口。
9.現在開始設計fristpage.html頁面。在本地站點的Smlple文件夾中，雙擊 fristpage.html，打開該文檔，進入到文檔的設計視圖窗口中。
10.在文檔中輸入“單擊這里打開會自動關閉的子窗口”字樣。然后在屬性面板上的 Link文本框中輸入“###”，將之設置為空鏈接。
11.可以通過為該鏈接應用Open Browser Window行為來設置單擊鏈接時打開Index.html窗口，不過更方便的方法是利用快速標識編輯器。方法是首先將插入點放置到鏈接中，然后在狀態欄左端的標識選擇器上，單擊標識按鈕，選中整個鏈接。然后按下Ctrl+T組合鍵，打開快速標記編輯器，進入到快速標記編輯器的 編輯標識模式。再在“>”前輸入“onclick=“window.open('index.html',null','width=200px，height=200px')””（如圖所示）。設置完畢，按下回車鍵，確認操作。
設置單擊鏈接時打開
12.上述操作就完成了本例的設置。可以單擊菜單用File/save，保存所做的工作。然后按下F12鍵，在瀏覽器中預覽頁面效果。
三、小結
用Dreamweaver設計限時自動關閉的網頁
用Dreamweaver做會移動的文字
一、學習目的
了解Dreamweaver，學會利用Dreamweaver制作網頁。
二、學習內容
Dreamweaver的基本知識；用Dreamweaver做會移動的文字?！緦W習步驟】
一、基本語法
文字移動屬性的設置：方向 方式 循環 速度 對齊方式(Align) 二、小結 用Dreamweaver做會移動的文字 用Dreamweaver創建導航條 一、學習目的 了解Dreamweaver，學會利用Dreamweaver制作網頁。 二、學習內容 Dreamweaver的基本知識；用Dreamweaver創建導航條。【學習步驟】 一個網站的不同頁面使用了同一導航條。通過統一導航條的方法，我們可以實現網站風格的統一，同時也方便了瀏覽者在不同頁面間的跳轉。用Dreamweaver可作出各種比較復雜的導航條。網頁上的導航條可由一個或幾個部分組成，每個部分均由各種圖像構成，可以鏈接到不同的網頁頁面。在Dreamweaver中每部分中最多可設四個狀態下的圖像。一開始是一個初始圖像，當鼠標移動到導航條部位上時則顯示另一個圖像，還可以設置當鼠標點擊后的初始圖像，以及鼠標點擊后當鼠標再次移動到這個部位上的圖像。一般地，每部位只設一到兩種狀態的圖像。因為圖像太多了，會影響網頁頁面的訪問、瀏覽的速度。 導航條制作方法：移動光標到需要導航條的地方，單擊主菜單欄的“InsertNavigation Bar”子命令，或直接單擊Objects面板上的圖標，彈出“Insert Navigation Bar”對話框，如下圖，此時我們可以進行各種設置來實現上述功能： 在“Element Name”項后的文本框填入這個部位的命名，也可以不填，這時Dreamweaver 3將自動給它命名。在Dreamweaver中每部分中最多可設四個狀態下的圖像：“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項是必需的，所有的調用圖像都會在系統的提示下保存在Dreamweaver 3文件夾中，以便調用。 三、小結 用Dreamweaver創建導航條 用Dreamweaver創建導航條 一、學習目的 了解Dreamweaver，學會利用Dreamweaver制作網頁。 二、學習內容 Dreamweaver的基本知識；用Dreamweaver創建導航條。【學習步驟】 當然，還可給該部位設置超級鏈接：在下面的“When Clicked Go To URL”項后文本框填入鏈接到的文件的地址，或單擊Browse按鈕選擇，當鼠標移動到這個部位上時，在狀態欄中可以看到鏈接到的地址。When Clicked Go To URL項后有一個下拉選框，這是設置超級鏈接的目標。 接著是“Options”項，若選中“Preload Images”選框，則瀏覽者瀏覽頁面時，所有圖像將在頁面下載的同時全部下載，整個頁面打開的速度會慢些，但圖像間轉換會沒有延遲，選中它。反之，不選Preload Images選框，則頁面下載的同時只下載初始圖像，其它圖像按順序下載，整個頁面打開的速度較快，但圖像間轉換會有延遲。若選中“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”選框中先選中，再點擊對話框上方的“－”按鈕即可。 另外，使用設置導航條圖像中的高級功能，可改變文檔中基于當前按鈕下的其他的圖像。在默認下,單擊導航條中的元素時,所有導航條中元素都會自動地返回原來默認的狀態。若想設置被選中圖像的上浮或是下沉的不同效果時，可用導航條中的高級功能：在“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鍵測試所作導航條。 三、小結 用Dreamweaver創建導航條 用Dreamweaver創建狀態欄 一、學習目的 了解Dreamweaver，學會利用Dreamweaver制作網頁。 二、學習內容 Dreamweaver的基本知識；用Dreamweaver創建狀態欄?！緦W習步驟】 狀態欄制作方法： 設置瀏覽器狀態欄中的文本信息,這一功能可在瀏覽網頁面時,在瀏覽器窗口底下狀態欄中顯示相關信息。其方法:選擇“Behaviors”面板中的Actions標簽頁的“Set Text of Status Bar”命令,在彈出的Set Text of Status Bar對話框中如圖3,在“Message”的文本框中輸入所在狀態欄中顯示的文檔,按“OK”按鈕完成。再用按F12快捷鍵來測試,可看到其運行的效果。 當然可用JavaScript語言在Message文本框中加入些函數,讓文本顯示功態的效果。 三、小結 用Dreamweaver創建狀態欄 用Dreamweaver的模板創建網頁 一、學習目的 了解Dreamweaver，學會利用Dreamweaver制作網頁。 二、學習內容 Dreamweaver的基本知識；用Dreamweaver的模板創建網頁。【學習步驟】 1、創建模板頁面 最簡單的辦法是將一個網頁另存為模板文件，通過執行命令：File→Save as Template，DreamWeaver會在網站根目錄中建立一個模板文件夾——Templates來保存該模板。 當然，也可以新建一個模板：Window→Templates，會出現的Templates面板，單擊右下角的New Template按鈕，輸入文件名，就建立了一個空模板；再單擊Open Template按鈕打開該模板，保存后自動存放于網站模板文Templates中。 新建、打開的模板頁面和普通的網頁沒什么兩樣，同樣可以加入表格、層、圖片、動畫、腳本，設置頁面屬性等。 舉例：這里以制作一個模板為例來說明。在該頁面中，我們希望左側的網站標識圖和底部的導航圖出現在每個頁面中。其中標識圖由兩幅圖片疊加而成，導航圖上的文字“最近更新”、“在線閱讀”、“打包下載”等劃分成幾個熱區分別鏈接到不同的文件，它們在每個頁面中都不變。右上部的主頁面區和左下角彈出式選單按鈕下面的頁面說明則各不相同。為了保持頁面整潔，我們用表格來布置這些元素。 準確地說它只是一個沒有可編輯區域的“準模板”，下面再設定可編輯區域。 2、設定可編輯區域 設定模板可編輯區域，一般來說有兩種方法。 新建可編輯區域：選擇命令：Modify→Template→New Editable Region。在某一空白區域中單擊后執行該命令即可將該區域變為可編輯區域。 標記某一區域為可編輯區域：選擇命令：Modify→Template→Mark Selectin as Editable Region。如果某區域已經有一些文字，并且希望在以后新建的超文本文件中部分保留其內容，先選中該區域再執行標記命令即可。 取消可編輯狀態：選擇命令：Modify→Template→Unmark Editable Region。執行該命令后會彈出一個對話框，其中有當前已有的可編輯區域列表，選中要取消的區域名稱，確認即可。 舉例：在大片空白區中隨便單擊一下，執行Modify→Template→New Editable Region命令，在彈出對話框中輸入名稱：Main；選中左下角本頁說明下面的文字，執行Modify→Template→Mark Selectin as Editable Region命令，輸入名稱：exp。可以看到可編輯區顯示為淺藍色，保存即完成模板制作。 三、小結 用Dreamweaver的模板創建網頁 使用模板 一、學習目的 了解Dreamweaver，學會利用Dreamweaver制作網頁。 二、學習內容 Dreamweaver的基本知識；用Dreamweaver的模板創建網頁?！緦W習步驟】 1、根據模板新建頁面 命令：File→New From Template。彈出對話框，從模板列表中選取模板，出現的新頁面中除可編輯區外均有淡黃色背景，是不能進行修改的部分。空白的Main編輯區可直接進行插入表格、文字、圖片等操作，Exp編輯區保留有原來的文字，修改或重新編輯均可。 2、對一個已經有內容的頁面應用模板 命令：Modify→Template→Apply Template to Page。選擇模板后還會彈出一個對話框，讓您選擇現有的孤立內容保存到哪個可編輯區域（Choose Editable Region for Orphaned Content）。要是不想保留則可以選擇“（none）”。 舉例：我們先新建一個普通頁面，輸入：“CIW電腦工作室”，執行Modify→Template→Apply Template to Page命令，選擇模板test，現有內容保存區域選擇Main，確認后可看到頁面自動變成了模板頁的形式，而“CIW電腦工作室”這一行字就出現在主編輯窗口中。 3、更新模板以全面更新站點 基于某一模板建立了一些頁面后，對模板進行修改后保存時，就會自動彈出一個對話框，列出所有使用了該模板的頁面，詢問是否要更新。 另外一種方法是執行Modify→Template→Update Pages命令。從Update Pages對話框中選擇一個站點或站點的某一種模板（同一站點中可以使用多個模板），單擊右側的Start按鈕，軟件會自動搜索與模板相關聯的網頁并進行更新。非常方便！ 舉例：Test模板左側圖形中的“讀書破萬站”圖片是用一個圖層疊加在另一幅圖片之上的，現在不想要它，同時還想將所有頁面中的該圖片均刪除。就可以打開模板test.dwt，刪除該圖層，保存模板，單擊右側的“Update”按鈕即可。 注意：新建和使用模板前需定義站點。方法是，執行命令：Site→Define Sites；指定站點名稱和本地根目錄（Local Root）。模板使用的是相對路徑，如果沒有指定網站在本地的位置，軟件就不能準確找到并保存模板文件；并且應用模板新建和更新頁面時，頁面中的超鏈接也不能隨頁面文件保存位置的不同而相應變化。 三、小結 用Dreamweaver的模板創建網頁 用Dreamweaver 中插入背景音樂 一、學習目的 了解Dreamweaver，學會利用Dreamweaver制作網頁。 二、學習內容 Dreamweaver的基本知識；用Dreamweaver 中插入背景音樂?！緦W習步驟】 一、直接插入法 1.打開一張需要插入背景音樂的網頁，在菜單中找到這樣的命令： Windows> 設計教室-> HTML 部分中的“HTML語言剖析”中的一段，介紹一下< EMBED >標記的參數： 三、小結 用Dreamweaver 中插入背景音樂 用Dreamweaver 中插入背景音樂 一、學習目的 了解Dreamweaver，學會利用Dreamweaver制作網頁。 二、學習內容 Dreamweaver的基本知識；用Dreamweaver 中插入背景音樂?！緦W習步驟】 < EMBED > 是用來插入各種多媒體，格式可以是 Midi、Wav、AIFF、AU 等等，Netscape 及 新版的 IE 都支持。其參數設定較多。如下： < EMBED src=“your.mid” autostart=“true” loop=“true” hidden=“true” > src=“your.mid”設定 midi 檔案及路徑，可以是相對或絕對。autostart=true是否在音樂檔下載完之后就自動播放。true 是，false 否(內定值)。loop=“true”是否自動反復播放。LOOP=2 表示重復兩次，true 是，false 否。HIDDEN=“true”是否完全隱藏控制畫面，true 為是，no 為否(內定)。STARTTIME=“分:秒”設定歌曲開始播放的時間。如 STARTTIME=“00:30” 表示從第30秒處開始播放。VOLUME=“0-100”設定音量的大小，數值是0到100之間。內定則為使用系統本身的設定。WIDTH=“整數” 和 HIGH=“整數”設定控制面板的高度和寬度。(若 HIDDEN=“no”)ALIGN=“center”設定控制面板和旁邊文字的對齊方式，其值可以是 top、bottom、center、baseline、left、right、texttop、middle、absmiddle、absbottom CONTROLS=“smallconsole”設定控制面板的外觀。預設值是 console。 console 一般正常面板 smallconsole 較小的面板 playbutton 只顯示播放按鈕 pausecutton 只顯示暫停按鈕 stopbutton 只顯示停止按鈕 volumelever 只顯示音量調節按鈕 二、代碼法 < BGSOUND >： < BGSOUND > 是用來插入背景音樂，但只適用于 IE，其參數設定不多。< BGSOUND src=“your.mid” autostart=true loop=infinite > src=“your.mid” 設定 midi 檔案及路徑，可以是相對或絕對。autostart=true 是否在音樂檔下載完之后就自動播放。true 是，false 否(內定值)。loop=infinite 是否自動反復播放。LOOP=2 表示重復兩次，Infinite 表示重復多次。此種方法就是直接把< BGSOUND >標記放于網頁文件的< head >< /head >之間，設置好mid文件的路徑就行。參數的設置如文中解說。 三、插件法 有些人始終沒有舍棄 FrontPage 也許就因為在一些元素的插入中，Dreamweaver 沒有提供功能，或者不方便。但我們知道，Dreamweaver 支持插件，聲音插入插件為我們提供了方便。 插件下載：sound.mxp 下載后雙擊文件，就可以直接安裝了，安裝完成你可以在“對象”面板的“Common”欄看到一個喇叭圖標。直接點擊此按鈕，就彈出如下圖所示的插入窗口： Forever：設置無限循環播放 Never：不循環播放，即只播放一次 NO of times：設置播放的次數 點擊“Browser”按鈕選擇好聲音文件之后，按確定完成制作。 三、小結 利用代碼法和插件法在Dreamweaver 中插入背景音樂 用Dreamweaver在主頁中制作連續的背景音樂 一、學習目的 了解Dreamweaver，學會利用Dreamweaver制作網頁。 二、學習內容 Dreamweaver的基本知識；用Dreamweaver在主頁中制作連續的背景音樂?！緦W習步驟】 一、保持背景音樂的連續不斷，效果很好，現介紹如下，供制作個人主頁的朋友們參考： 首先使用標簽 〈frameset〉〈frame...〉〈frame...〉〈frameset〉 將主頁(index.html)屏幕分成上下兩個幀，為了不破壞頁面布局，將上幀的高度設為 0；然后，在主頁上幀放置的超文本文件(back_music.htm)中設置網站的背景音樂，最好不要設置播放界面；最后，在主頁的下幀放置網站主頁的主要內容(main.htm)。 這樣一來，主頁下幀的頁面就成為主頁實際的活動頁面，上幀的頁面在訪問者的整個瀏覽過程中始終保持靜止不動，設置的背景音樂也就不會中斷了。 主頁文件 index.html: 〈html〉 〈head〉〈title〉連續不斷的背景音樂〈/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〉 三、小結 用Dreamweaver在主頁中制作連續的背景音樂 DreamweaverMX制作導航下拉菜單 一、學習目的 了解Dreamweaver，學會利用Dreamweaver制作網頁。 二、學習內容 Dreamweaver的基本知識；DreamweaverMX制作導航下拉菜單?！緦W習步驟】 Dreamweaver從出道以來，其簡便易用而又功能強大的“行為”(Behavior)一直是大家所關注的熱點之一。在Dreamweaver MX(DW MX)中，對這一功能又有了擴充與改進。 在DW MX中，行為指的是為了響應某一事件(Event)而采取的一個操作(Action)。其中Event 指的是瀏覽器的事件，比如窗口刷新、鼠標移動等。而 Action 指的是后臺響應事件的 JavaScript 代碼，可以完成相應的操作，比如播放聲音、翻轉圖片等。 用DW MX制作導航下拉菜單是網頁中經常使用的特效之一。(如圖)主要應用了DW MX中的“Show-Hide Layers”行為。 首先制作好導航條(圖1中的“產品中心”那一欄)，隨后添加一個層，作為下拉菜單將要顯示的位置，并填入下拉菜單的對應欄目。 接下來，打開“Behaviors”面板，同時選中“產品中心”鏈接(注意，這個時候不能夠選中剛剛建好的層，否則無法應用“Show-Hide Layers”行為)，單擊“+”號，選擇“Show-Hide Layers”，就可以看到我們剛剛建好的層在選擇項中，可以設定為隱藏或者顯示(如圖)。 行為的妙用主要體現在：如果我們要實現下拉菜單，關鍵就是讓鼠標移到“產品中心”鏈接上時，使層顯示；而鼠標離開鏈接時，使層隱藏。根據這種思想，我們首先為這個層設立兩個Action，一個選擇Hide，一個選擇Show。然后，調整Event，將Hide Layer的Event設為OnMouseOut，即為鼠標離開鏈接；而將Show Layer的Event設為OnMouseOver，即為鼠標選中鏈接。按“F12”預覽，就可看到我們期盼的效果。 這樣，平時我們覺得很神秘的導航下拉菜單就可以輕易在行為中實現。還可以在導航鏈接上繼續應用 “Swap Image”行為，實現鼠標點選鏈接時出現圖片翻轉效果。 行為不是一個個孤立的特效，可以由多個行為組合疊加實現復雜的功能，除了DW MX默認設置好的行為外，我們還可以從www.tmdps.cn上下載更多更酷的第三方行為，我們只需將它們直接復制到DreamweaverMXConfigurationBehaviorsActions目錄下即可，從而使DW MX的這一閃光點更加眩目。 三、小結 用DreamweaverMX制作導航下拉菜單 用Dreamweaver做彈出窗口 一、學習目的 了解Dreamweaver，學會利用Dreamweaver制作網頁。 二、學習內容 Dreamweaver的基本知識；用Dreamweaver做彈出窗口?！緦W習步驟】 1.打開一個頁面，設置頁面屬性。左邊界，頂部邊界為 0，在標題處輸入標題名稱。 2.在頁面中插入圖片。也可以是文字，Flash 動畫等。小窗口頁面就準備好了。 給一個頁面添加彈出小窗口： 1.打開需要添加彈出小窗口頁面，例如一個網站的首頁，在標簽選擇器中選擇“ body ”標簽。 2.打開行為面板，點擊“ + ”按鈕添加行為。 3.選擇“打開瀏覽器窗口”。 4.在要顯示的 URL 處，選擇彈出小窗口頁面文件。設置彈出小窗口屬性。 5.按 F12，在瀏覽器中發布的效果如下圖。 三、小結 用Dreamweaver做彈出窗口 Dreamweaver 頁面制作 一、學習目的 了解Dreamweaver，學會利用Dreamweaver制作網頁。 二、學習內容 Dreamweaver的基本知識；Dreamweaver 頁面制作?！緦W習步驟】 一、下邊的簡單網頁為例，敘述一下制作過程。簡單網頁如下圖： 在開始制作之前，我們先對這個頁面進行一下分析。看看這個頁面用到了那些東西。 網頁頂端的標題“我的主頁”是一段文字。 網頁中間是一幅圖片。最下端的歡迎詞是一段文字。網頁背景是一深紫紅顏色。 知道了這個網頁的結構以后我們就來可以制作了。 首先啟動Dreamweaver MX 2004，確保你已經用站點管理器建立好了一個網站（根目錄）。 為了制作方便，請您事先打開資源管理器，把要使用的圖片收集到網站目錄images文件夾內。 【插入標題文字】 進入頁面編輯設計視圖狀態。在一般情況下，編輯器默認左對齊，光標在左上角閃爍，光標位置就是插入點的位置。如果要想讓文字居中插入，點屬性面板居中按鈕即可。啟動中文輸入法輸入“我的主頁”四個字。字小不要緊，我們可以對它進行設置。 【設置文字的格式】 選中文字，在上圖屬性面板中將字體格式設置成默認字體，大小可任意更改字號。并選中“B”將字體變粗。 【設置文字的顏色】 首先選中文字，在屬性面板中，單擊顏色選擇圖標，在彈出的顏色選擇器中用滴管選取顏色即可。 【設置網頁的標題和背景顏色】 點擊“修改”菜單選“頁面屬性”。系統彈出頁面屬性對話框（如下圖） 請在標題輸入框填入標題“我的主頁”。 設置背景顏色：網頁背景可以是圖片，也可以是顏色。此例是顏色。如上圖打開背景顏色選擇器進行選取。如果背景要設為圖片，點擊背景圖象“瀏覽”按鈕，系統彈出圖片選擇對話框，選中背景圖片文件，點擊確定按鈕。 設計視圖狀態，在標題“我的主頁”右邊空白處單擊鼠標，回車換一行，按照以下的步驟插入一幅畫圖片，并使這張圖片居中。您也可以通過屬性面板中的左對齊按鈕讓其居左安放。 【插入圖像】選擇以下任意一種方法： 使用插入菜單：在“插入”菜單選“圖像”，彈出“選擇圖像源文件”對話框，選中該圖像文件，單擊確定。如下圖： 2）使用插入欄（如下圖）：單擊插入欄對象按鈕>選源文件”對話框，其余操作同上。 按鈕，彈出“選擇圖像 （3）使用面板組“資源”面板（如下圖）：點 按鈕，展開根目錄的圖片文件夾，選定該文件，用鼠標拖動至工作區合適位置。 一個圖片就插入完畢了。（插入*.swf動畫文件，選擇“插入”菜單＞媒體＞Flash）。 【輸入歡迎文字】 在圖片右邊空白處單擊，回車換行。仍然按照上述方法，輸入文字“歡迎您??”然后，利用屬性面板對文字進行設置。 保存頁面。 一個簡單的頁面就這樣編輯完畢了。 【預覽網頁】在頁面編輯器中按F12預覽網頁效果。網站中的第一頁，也就是首頁，我們通常在存盤時取名為index.htm。 三、小結 ①圖片插入和對齊設置； ②文字的格式、顏色和加粗等設置； ③背景顏色的設置； ④預覽網頁，查看實際效果。 用Dreamweaver 發布網站 一、學習目的 了解Dreamweaver，學會利用Dreamweaver制作網頁。 二、學習內容 Dreamweaver的基本知識；用Dreamweaver 發布網站。【學習步驟】 在發布網站之前先使用Dreamweaver站點管理器對你的網站文件進行檢查和整理，這一步很必要?？梢哉页鰯嗟舻逆溄印㈠e誤的代碼和未使用的孤立文件等，以便進行糾正和處理。 步驟如下：在編輯視圖點「站點」菜單＞選“檢查站點范圍的鏈接”，彈出“結果”對話框，如下圖： 下圖是檢查器檢查出本網站與外部網站的鏈接的全部信息，對于外部鏈接，檢查器不能判斷正確與否，請自行核對。 下圖是檢查器找出的孤立文件，這些文件您的網頁沒有使用，但是仍在你的網站文件夾里存放，上傳后它會占據有效空間，應該把它清除。清除辦法是：先選中文件，點Delete鍵，確定。這些文件就放在“回收站”。 如果不想刪除這些文件，點保存報告按鈕（上圖所示），在彈出的對話框中您給報告文件一個保存路徑和文件名即可。該報告文件為一個檢查結果列表。你可以參照此表，進行處理。 糾正和整理之后，您的網站就可以發布了。【發布站點操作】 如果您是第一次上傳文件，您的遠程 Web 服務器根文件夾是空文件夾時按以下操作進行。如果不是空文件夾，另行操作附后。 服務器根文件夾是空文件夾時，連接到遠程站點，請執行以下操作： 在 Dreamweaver MX 2004中，選擇“站點”>“管理站點”。管理站點對話框中“dwmx2004”是在本教程第5頁設置的，如果想回憶一下，請查看“設置站點”。 選擇一個站點（即本地根文件夾），然后單擊“編輯”。 單擊對話框頂部的“基本”選項卡。在前面“設置站點”時，已填寫了“基本”選項卡中的前幾個步驟，因此單擊幾次“下一步”，直到向導頂部高亮顯示“共享文件”步驟。如下圖： 在標有“您如何連接到遠程服務器？”的彈出式菜單中，選擇“FTP”。單 擊“下一步”，彈出如下對話框： 請輸入以下選項： 輸入服務器的主機名；（必須填入） “您打算將您的文件儲存在服務器上的什么文件夾中？”（可以留空） 在相應的文本框中輸入您的用戶名和密碼。 “使用安全 FTP(SFTP)”選項。（可不勾選） 單擊“測試連接”。 如果連接不成功，請檢查設置或咨詢系統管理員。 在輸入相應的信息后，單擊“下一步”。 不要為站點啟用文件存回和取出。 單擊“下一步”。 單擊“完成”以完成遠程站點的設置。 再次單擊“完成”以退出“管理站點”對話框。 【上傳文件】 在設置了本地文件夾和遠程文件夾（空文件夾）之后，可以將文件從本地文件夾上傳到 Web 服務器。 請執行以下操作： 在“文件”面板（“窗口”>“文件”）中，選擇站點的本地根文件夾。單擊“文件”面板工具欄上的“上傳文件”藍色箭頭圖標。 Dreamweaver MX 2004會將所有文件復制到服務器默認的遠程根文件夾。多數空間提供商都設置有服務器默認的文件夾，請在此文件夾下創建一個空文件夾，方法是：在“文件”面板，將“本地視圖”轉換為“遠程視圖”。右鍵點擊文件夾，選“新建文件夾”，輸入一個名稱，用作您的遠程根文件夾，名稱與您本地根文件夾的名稱一致，便于操作。也可以最大化“文件”面板。請打開“文件”面板的最右邊的“擴展/折疊”按鈕，最大化文件面板，如下圖，左邊為遠端站點內容，右邊為本地文件內容。 點擊，Dreamweaver MX 2004將所有文件復制到您定義的遠程文件夾。 第一次上傳必須搞清楚網絡空間服務商指定的服務器默認的存放網頁的文件夾，在此文件夾下存放您的站點文件。訪問您的網站地址為：http://......./index.htm 如果你在服務器默認的文件夾下上建立了與本地根文件夾同名的文件夾，那么訪問您的網站，需要用這樣的地址：http://........./（您的文件夾名）/index.htm 上傳完畢，請在瀏覽器中輸入瀏覽地址，測試您上傳的結果。 三、小結 用Dreamweaver 發布網站 Dreamweaver制作網頁經典問題大整理(1)1> 在DW中，如何輸入一個空格呢？ 輸入空格的問題，在DW似乎已成了一個老生常談的問題，我們可能在許多介紹DW使用方面的書籍或文章中看到過N次。 DW中對空格輸入的限制是針對“半角”文字狀態而言的，因此通過將輸入法調整到全角模式就可以避免了，方法是：打開中文輸入法（以人工智能ABC為例），按Shift+Space切換到全角狀態，現在應該沒問題了。此外，你還可以通過許多“變通”的方法達到錄入空格的目的，比如常用的是： 直接在源代碼中加入代表空格的HTML代碼“ ”；輸入一定長度的文字對象后，然后調整文字的顏色與當前的背景顏色相同等等，不過注意的是后者在一些瀏覽器中可能顯示上有點問題。 2> 如何在瀏覽器地址欄前添加自定義的小圖標？ 你是不是記得有時在瀏覽網易網站的首頁時，在地址www.tmdps.cn前會顯示一個“易”字樣的小圖標。而默認情況下，這個圖標是一個IE瀏覽器的指定圖片。 其實這也不是什么高深技術，只不過在網站目錄下添加了一個特定文件而已。 這時，我們需要預先制作一個圖標文件，大小為16*16像素。文件擴展名為ico，然后上傳到相應目錄中。在HTML源文件“ 其中的“SHORTCUT ICON”即為該圖標的名稱。當然如果用戶使用IE5或以上版本瀏覽時，就更簡單了，只需將圖片上傳到網站根目錄下，即可自動識別！ 3> 為什么，我本來設計很好的網頁，在瀏覽器窗口最小化時會變的丑陋難堪？ 這應該是個很值得大家注意的問題，也就是說，在全屏狀態下瀏覽網頁內容時，一點問題也沒有。當我們使用窗口的最小化命令或手動的調整窗口的大小時，問題就慢慢出現了。網頁內容會把當前窗口作為顯示范圍，依次下挫。舉個例子，和在記事本中有“自動換行”和“沒換行”的差別是完全一樣的。解決這個問題，我們必須從網頁的布局說起，一般情況下，網頁內容的定位大多是通過表格來實現的。因此問題的“毛病”也就出在表格上。你可能已經注意到了，在表格的高寬設定選擇上提供了兩種不同的類型，百分比和像素。其中百分比的使用將會產生前面說到的那個毛病，將其全部更正為Pixels單位的實際大小就可以了。 4> 如何改變網頁顯示時，最頂部的提示信息？ 瀏覽網頁時，頂部的提示信息往往代表了網頁內容的關鍵所在，有助于訪問者提前了解網頁內容。在DW4前，沒有在功能上直接提供該操作，我們往往通過在源代碼中應用“title”屬性來完成。進入DW4就簡單多了。 直接在編輯窗口最上方的“title”輸入框內鍵入所需要的文字信息即可。 ·Dreamweaver制作網頁經典問題大整理(2)5> 怎么樣，才能為圖片添加指定顏色的邊框？ 對于沒有邊框的圖片而言，直接插入到網頁中，在顯示效果上是相當差的。記得在微軟的FP中要給圖片添加滿意的邊框還是相當麻煩的。不過在DW中就顯得容易多了，因為這里有一個“Border”屬性，可以讓你直接設置邊框的寬度。 寬度設好了，你一定會問，顏色呢？面板上并沒有提供顏色的選擇呀！呵呵，其實這里有一個技巧問題，用鼠標選擇圖片對象，注意不是點擊選中，而是拖動選擇。象設定文字顏色一樣進行就可以了。 6> 如何添加圖片及鏈接文字的提示信息？ 在我們瀏覽網頁時，當鼠標停留在圖片對象或鏈接上時，在鼠標的右下有時會出現一個提示信息框。對目標進行一定的注釋說明。在一些場合，它的作用是很重要的。 下面先看看圖片提示信息的添加，選中圖片對象，在屬性面板里你會發現有個“Alt”輸入框。默認情況下，該輸入框是空白的。在這里錄入需要的提示內容就可以了。 那么鏈接提示的制作就沒這么簡單了。因為DW中沒有直接提供該功能，因此我們需要通過添加HTML代碼來實現。 7> 如何把自己的ZIP或其他類型的文件供別人下載? 在不少初級網頁制作者看來,好象通過鼠標單擊完成下載是件很“神秘”的事,實際上遠非如此.在DW中凡是不被瀏覽器識別的格式文件(HTM,HTML,ASP,PHP.PERL,SHTML等以外的)作為鏈接目標時,默認的操作都是下載.這時你只需要,把要瀏覽者下載的文件名寫好,然后制作一個到目標文件的鏈接.注意目錄一定不要搞錯.8> 怎樣才能夠保證網頁中文字不跟隨瀏覽器字體大小設置而變動? 大家都知道,在IE瀏覽器的功能設置中，有一個可以自由設置窗口內容字體大小的功能，這樣由于不同訪問者的習慣問題，呈現在他們面前的網頁有時也會不同。 比如你可能本來設計時用的是2號字體，結果由于用戶對瀏覽器的額外設定，變的更大了，這時顯示效果上就出問題了。 那么解決的辦法就是將網頁內容定性的強制在某個合適的大小上。即不容許他變化。通過CSS樣式表對字體進行強制性控制就可以實現這個要求了。 ·Dreamweaver制作網頁經典問題大整理(3) 9> 以新窗口的形式打開目標鏈接？ 以新窗口打開，顧名思義，也就是在不覆蓋當前窗口的前提下，另外打開一個瀏覽器窗口。你可以直接在連接代碼中加入“Target=_blank”。 如果你的HTML比較差的話，在DW屬性面板上同樣提供了這個設置，當你在Link輸入框中鍵入www.tmdps.cnmon的“內容”。 單擊上面的“Refresh”按鈕，其中“Delay”輸入框中鍵入刷新延遲的時間（單位：秒），“Action”為刷新指定的目標URL。因為現在是刷新當前頁面，直接選單選項“Refresh This Document”即可。 ·Dreamweaver制作網頁經典問題大整理(4) 13> 如何定義網頁的關鍵字（Keyname）？ 當用戶使用搜索引擎search合適內容的網頁時，關鍵字起著一個不容忽視的作用。大多的搜索服務器會每隔一段時間自動探測網絡中是否有新網頁產生，并把他們按關鍵字進行記錄，以方便用戶查詢。 你當然想讓你的網頁出現在搜索引擎的查詢返回列表中了，這時關鍵字的定義就尤為重要了。 同樣在“Head”面板部分，單擊“Keywords”按鈕，錄入需要逐個定義的關鍵字即可，注意每個關鍵字以“；”號隔開，數目沒有限制。 14> 如何在編輯窗口中，隱藏一些不必要的標簽？ 當用戶在網頁中插入了太多的不可見元素時，在編輯窗口的最上面就會顯示一排相應的標示標簽，用來方便用戶隨時能找到它們。雖然這些標簽本身并不影響瀏覽器里的顯示效果，但多了以后，往往使網頁內容不得不錯位，從而一定程度上妨礙網頁視覺上的調整，那么怎么樣才能把這些東東去掉呢？ 進入“Preperence”面板，列表中選擇“Invisibel Elements”，勾掉你不想顯示的項目前的“對號”即可，比如Scripts等 15>安排不支持“框架”的瀏覽器的顯示內容？ 我們知道，目前的瀏覽器類型很多，因此我們設計網頁時最先考慮到的往往是“這個東西是不是在不同的瀏覽器中都能顯示好呢？”?？蚣芫褪且粋€例子！ 不過避免開這點，很簡單，你只需要在源代碼中加入下面的內容就可以了。 < BODY>第三篇：Dreamweaver制作網頁經典問題