在網(wǎng)頁中添加flash元素

1、在網(wǎng)頁中添加flash元素實驗要求 通過試驗，掌握如何在網(wǎng)頁中添加flash影片、flash文本和flash按鈕的方法。 說明 macromedia flash技術是目前最為普及的矢量圖形和動畫傳送解決方案。如今的flash影片已經(jīng)在網(wǎng)頁中廣泛應用，增添了網(wǎng)頁的動態(tài)效果。在dreamweavermx2004中不僅可以插入flash程序中創(chuàng)建的影片，還可以直接在文檔中創(chuàng)建、插入和修改flash按鈕和flash文本；這些操作均不需要macromedia flash的參與。 對應知識點1.插入flash動畫2.添加flash按鈕3.使用flash文本對應macromediadreamweavermx

2、2004標準教程第8章的內(nèi)容。試驗課時;4課時實驗素材swf格式的影片可在本書配套光盤中查找使用實驗步驟1.dreamweaver mx 2004程序，選擇菜單”文件“>”新建”命令，創(chuàng)建HTML網(wǎng)頁。保存網(wǎng)頁為page10.htm.2.單擊使用面板中的表格按鈕，插入5行1列，寬度為777像素，邊框粗細、單元格邊距和單元格間距均為0的表格。3.選中表格，在屬性面板中對齊下拉列表中選擇居中對齊選項。4.在第一單元格內(nèi)單擊，使插入點定位在此單元格內(nèi)。5.從本書配套光盤exp10sucai10文件夾中復制文件“1.swf”和”2.swf”,粘貼到任意一個磁盤的根目錄下。這是我們粘貼到盤內(nèi)。如圖

3、10-1示6.返回dreamweaver編輯窗口，在常用面板的媒體列表中選擇文本命令，如圖所示?；蛘哌x擇菜單”插入”媒體”flash文本”命令。 圖10-1 將素材文件粘貼到F盤內(nèi) 圖10-2選擇“Flash文本”命令 說明 flash文本對象允許用戶創(chuàng)建和插入只包含文本的flash影片，使用它可以創(chuàng)建一個小的矢量圖像影片，并定義所有需要的文字和文本。1. 開“插入flash文本”對話框。如圖10-3所示。2. 設置文字為”MS UI Gothic”，大小為"40"，單擊”粗體”和”左對齊”按鈕,在”顏色”調(diào)色板中選擇顏色為藍色（色標值為#0000cc）,在“轉滾顏色”調(diào)色

4、板中選擇顏色為淺藍色（色標值為=#6699ff)，在“文本”編輯框中輸入英文”welcome to ”單擊“另存為“編輯框右側的”瀏覽”按鈕，打開“選擇文件“對話框，選擇F盤根目錄下的”1.swl“文件，確定后彈出dreamweaver提示窗口，如圖10-4所示圖10-3 “插入Flash文本”對話框圖Dreamweaver提示窗口圖10-5“插入Flash文件”對話框的設置3. 單擊”是”按鈕，在另存為“對話框“中顯示了文件路徑和名稱，此時“插入flash文本“對話框。如圖10-5所示。圖10-6 Flash文本的預覽效果 說明 如果需要為flash文本對象創(chuàng)建一個鏈接，則可以在“鏈接“編輯

5、框中輸入所需的URL地址。在輸入了鏈接地址之后，用戶還可以在“目標”列表中指定打開所鏈接文檔的目標框架或目標窗口。4. 單擊“確定”按鈕，flash文本插入到單元格內(nèi)，單擊屬性面板中的“播放”按鈕 ，flash 文本效果顯示在網(wǎng)頁中。如圖10-6 5. 單擊停止按鈕，取消播放。選中flash文本時，屬性面板如圖10-7所示。 說明在屬性面板，單擊"編輯"按鈕，將調(diào)出flash編輯對話框。單擊"重設大小“按鈕，將選定的flash對象大小恢復到原始大小。在垂直邊距和水平邊距編輯框中，指定flash對象四周的間隔。在”品質(zhì)”列表中選擇flash文件播放的效果。影片在“高

6、品質(zhì)”下效果會更好，但相對需要更快的計算機配置。12.將光標定位在第三行單元格內(nèi)，單擊常用面板中的”flash”按鈕 ，或選擇菜單“插入”“媒體”“flash”命令，打開”選擇文件“對話框。找到本書配套光盤sucai10文件夾中的素材文件” banner.swf”,選擇此文件。如圖10-8所示。13.單擊“確定”按鈕，flash影片立即被插入到單元格中，在文檔窗口中將出現(xiàn)一個flash 占位符。要在文檔窗口中觀看flash影片的預覽，可單擊屬性面板的“播放”按鈕。如圖所示。 說明當用戶向文檔中插入flash影片時，dreamweaver將同時使用object標簽（由internet explo

7、rer 為active x 控件定義）和embed標簽（由netscape navigaror 定義），以期在所有瀏覽器中獲得最佳效果。當用戶在屬性面板中修改該影片屬性時，dreamweaver 會將所輸入數(shù)據(jù)分別影射為 圖10-8“選擇文件”對話框與object和embed標簽相對應的合適的參數(shù)。14.單擊”停止“按鈕，停止flash 影片的播放。Flash 的屬性面板與flash文本的相同。15.將光標定位在第5行單元格內(nèi)，在常用面板的媒體列表中選擇”flash按鈕“的命令。如圖10-10所示。圖10-9插入的Flash影片播放效果 圖10-10選擇Flash按鈕命令 提示 也可以選擇菜單

8、 “插入”“媒體”“Flash按鈕”命令。16.打開如圖10-11所示的“插入flash 按鈕“對話框。17.在對話框“樣式“列表中有許多不同的flash按鈕風格，選擇”blue warper”選項，在“范例”框中選擇字體“Verdana”（或其他字體）。在“大小”編輯框內(nèi)輸入“16”（單位：像素）?？梢詥螕簟版溄印本庉嬁蛴覀鹊摹盀g覽”按鈕，選擇鏈接的網(wǎng)頁，也可以直接在編輯框內(nèi)輸入鏈接路徑，例如：。在“目標”列表中選擇“_blank”選項，當點擊按鈕時彈出一個新窗口。單擊“另存為”右側的“瀏纜”按鈕，在“選擇文件”對話框中，選擇保存在F盤的替換文件“2.swf”。如圖10-12所示。18.系統(tǒng)

9、將彈出“提示框”，詢問是否覆蓋此文件。單擊“是”按鈕，原來的swf文件被替換，其路徑和文件名將顯示在“另存為”編輯框中，“插入Flash按鈕”設置完成效果如圖10-13所示。19.在屬性面板中，單擊“播放”按鈕，可以看見Flash按鈕的動態(tài)效果。如圖10-14所示。圖10-13 “插入Flash按鈕”對話框 圖10-14 Flash按鈕的動態(tài)效果20.單擊“停止”按鈕，停止Flash按鈕的播放。Flash按鈕的屬性面板與Flash文本的相同。21.雙擊“Flash按鈕”，可以再次打開圖10-13所示的對話框，進行重新編輯。編輯完成，單擊“確定”即可。 說明 若要預覽頁面中的所有Flash內(nèi)容，

10、按Ctrl+Alt+Shift+P鍵。所有的Flash對象和影片將開始播放。22.選擇菜單“文件”“->保存”命令，完成網(wǎng)頁保存。按F12鍵在瀏覽器中查看網(wǎng)頁效果。如圖10-15所示。實驗作業(yè)模仿1 創(chuàng)建網(wǎng)頁，保存page10.htm。2 在網(wǎng)頁中插入表格，布局Flash元素。3 插入Flash文本，設置文本顯示為“Welcome to .。”4 插入在Flash程序中制作的Flash影片。5 創(chuàng)建Flash按鈕文件，設置顯示文字為“Enter”,并創(chuàng)建鏈接。創(chuàng)作1 在網(wǎng)頁中創(chuàng)建若干個Flash文本和Flash按鈕。2 使用表格或布局單元合理布局網(wǎng)頁，使其形成完整的網(wǎng)頁結構。3 適當?shù)奈恢貌迦隖lash影片，作為主體內(nèi)容。4 靈活使用Flash文件和Flash按鈕等元素，增