第8章 多媒體網(wǎng)頁制作學(xué)習(xí)目標(biāo)1.了解Dreamweaver 8.0標(biāo)準(zhǔn)工作界面各個(gè).ppt

第8章多媒體網(wǎng)頁制作 主編 馬武 學(xué)習(xí)目標(biāo) 1 了解Dreamweaver8 0標(biāo)準(zhǔn)工作界面各個(gè)組成部分的名稱和主要功能 2 學(xué)會創(chuàng)建和管理本地站點(diǎn)的基本步驟和方法 3 了解頁面設(shè)置的主要內(nèi)容和操作方法 4 掌握利用表格進(jìn)行頁面布局的基本技能 5 掌握向頁面添加文本 圖像 音頻 視頻的基本技能和不同方法 并能設(shè)置各種媒體的相關(guān)屬性和常用參數(shù) 6 掌握向頁面插入Flash動畫和Flash對象的基本方法 并能設(shè)置其相關(guān)屬性和常用參數(shù) 7 掌握向頁面插入Shockwave動畫 JavaApplet應(yīng)用小程序 ActiveX控件 插件 Flash元素的基本方法 并能設(shè)置它們的相關(guān)屬性和常用參數(shù) 8 1Dreamweaver8 0的工作界面和其它應(yīng)用程序有所不同 Dreamweaver8 0提供了一個(gè)將全部元素集成在一個(gè)窗口中顯示的布局方式 它的工作界面包括 標(biāo)題欄 菜單欄 插入面板組 文檔工具欄 文檔窗口 狀態(tài)欄 屬性面板和浮動面板組 如圖8 1 圖8 1 8 2本地站點(diǎn)的創(chuàng)建與管理8 2 1站點(diǎn)的概念Dreamweaver站點(diǎn)提供一種組織所有與Web站點(diǎn)關(guān)聯(lián)文檔的方法 它的組成根據(jù)開發(fā)環(huán)境和所開發(fā)的Web站點(diǎn)類型的不同而有所不同 主要由以下三個(gè)部分組成 1 本地文件夾放置在本地硬盤上的網(wǎng)站叫做 本地站點(diǎn) 用于存儲站點(diǎn)所需要的各種頁面元素文件的文件夾就是本地文件夾 2 遠(yuǎn)程文件夾放在Web服務(wù)器計(jì)算機(jī)上的文件夾叫做遠(yuǎn)程文件夾 把對應(yīng)的站點(diǎn)叫做 遠(yuǎn)端站點(diǎn) 3 測試服務(wù)器文件夾Dreamweaver用來處理動態(tài)頁的文件夾 用來管理和提供動態(tài)內(nèi)容的生成和顯示 8 2 2本地站點(diǎn)的創(chuàng)建Dreamweaver8 0實(shí)際上為用戶提供了兩種站點(diǎn)的創(chuàng)建辦法 一是根據(jù)向?qū)?chuàng)建 二是根據(jù)用戶的實(shí)際需求進(jìn)行高級設(shè)定創(chuàng)建 根據(jù)向?qū)?chuàng)建一個(gè)本地站點(diǎn)的步驟 1 單擊 站點(diǎn) 菜單 選擇 新建站點(diǎn) 彈出站點(diǎn)定義對話框如圖8 2所示 輸入站點(diǎn)名稱和地址后 單擊 下一步 按鈕 圖8 2 2 接下來將彈出如圖8 3所示的對話框 提示選擇當(dāng)前編輯的站點(diǎn)是否需要各種服務(wù)器技術(shù) 如ASP ASP NET JSP PHP等 圖8 3 3 選擇在開發(fā)過程中使用文件的方式 在本地計(jì)算機(jī)上還是在WEB服務(wù)器上進(jìn)行編輯 以及文件存儲的位置 如圖8 4所示 圖8 4 4 設(shè)置網(wǎng)站連接到遠(yuǎn)程服務(wù)器的方式 如圖8 5所示 圖8 5 5 最后顯示新建站點(diǎn)所包含的基本設(shè)置對話框 包括本地信息 遠(yuǎn)程信息和測試服務(wù)器的設(shè)置 如圖8 6所示 單擊 完成 至此就完成了一個(gè)新站點(diǎn)的創(chuàng)建 同時(shí)在右側(cè)的文件面板上就出現(xiàn)了剛才建立的站點(diǎn)文件夾 如圖8 7所示 圖8 6 圖8 7 Dreamweaver8 0還為用戶提供了很好的管理站點(diǎn)服務(wù) 在這里可以直接新建站點(diǎn) 也可以對現(xiàn)有的站點(diǎn)進(jìn)行編輯 復(fù)制和刪除 還可通過已建立的站點(diǎn)定義文件直接進(jìn)行導(dǎo)入和導(dǎo)出操作 可以通過 站點(diǎn) 菜單下的 管理站點(diǎn) 子菜單完成該項(xiàng)操作 其對話框如圖8 8所示 圖8 8 8 2 3本地站點(diǎn)的管理 實(shí)際上管理站點(diǎn)通常采用把網(wǎng)站中的各種文件分門別類存儲的方法 可以在文件面板當(dāng)前站點(diǎn)所在的文件夾上單擊右鍵進(jìn)行文件夾的新建 刪除 拷貝 遮蓋等各項(xiàng)操作 這里我們建立幾個(gè)分別用來存放常見網(wǎng)頁媒體元素的文件夾 如圖8 9所示 圖8 9 8 3頁面設(shè)計(jì)和布局8 3 1頁面設(shè)置1 文件頭內(nèi)容的設(shè)置文件頭內(nèi)容在瀏覽器中是不可見的 但卻攜帶著網(wǎng)頁的重要信息 如關(guān)鍵字 作者版權(quán)等描述性文字信息 還可以實(shí)現(xiàn)一些非常重要的功能 如自動刷新功能等 文件頭內(nèi)容的設(shè)置包含META 關(guān)鍵字 說明 刷新 基礎(chǔ)和鏈接六項(xiàng) 文件頭內(nèi)容中關(guān)鍵字設(shè)置的基本步驟 1 啟動Dreamweaver8 0并新建一個(gè)文檔 將其保存為 index html 2 單擊插入面板組的下拉菜單按鈕 選擇 HTML 再單擊按鈕 指向 關(guān)鍵字 子菜單 如圖8 11所示 圖8 11 3 接下來會彈出如圖8 12所示的關(guān)鍵字對話框 在其中輸入相應(yīng)的關(guān)鍵字即可 圖8 12 2 設(shè)置頁面屬性頁面屬性的設(shè)置可以確定當(dāng)前頁面的外觀 鏈接 標(biāo)題 標(biāo)題 編碼和跟蹤圖像等的基本信息和格式 比如 默認(rèn)字體的類型 大小 顏色 背景圖像及顏色 頁面邊框的寬度 標(biāo)題名稱 鏈接顏色和字體等 頁面屬性的設(shè)置和更改可以用兩種方法實(shí)現(xiàn) 一是單擊屬性面板上的 頁面屬性 按鈕 如圖8 13所示 在彈出的頁面屬性對話框 如圖8 14所示 中來設(shè)置 另一種是通過菜單 修改 頁面屬性 啟動頁面屬性對話框來設(shè)置 圖8 13 圖8 14 8 3 2表格的插入表格是網(wǎng)頁設(shè)計(jì)與制作中非常重要的元素 主要用來將各種媒體表達(dá)元素如文本 圖片 表單 Flash等整齊劃一的顯示在頁面上 對頁面排版具有重要的意義 使用表格布局頁面操作靈活 而且具有較好的兼容性 1 表格的插入及屬性設(shè)置 1 在 index html 文檔窗口單擊鼠標(biāo) 確定表格插入點(diǎn) 2 單擊插入面板組的常用工具欄 如圖8 16所示 單擊插入表格圖標(biāo) 圖8 16 3 在彈出的表格屬性對話框中設(shè)置如圖8 17所示的參數(shù) 4 單擊 確定 圖8 17 2 設(shè)置表格屬性 1 通過單擊插入面板組中的布局按鈕 切換布局模式到擴(kuò)展模式 這樣可以使被設(shè)置為0的表格邊框及單元格等可視化程度增加 方便操作 但實(shí)際瀏覽時(shí)不會有邊框 2 通過鼠標(biāo)或者標(biāo)簽選擇器的 table 標(biāo)簽選擇相應(yīng)的表格 在對應(yīng)的屬性面板設(shè)置或者更改表格的屬性 如圖8 18所示 圖8 18 表格Id 用來為當(dāng)前選定的表格命名 行 列 寬 高 分別用來設(shè)定表格的行數(shù) 列數(shù) 寬度和高度 填充 和 間距 分別用來設(shè)定表格單元格的邊距和間距 對齊 和 邊框 分別用來設(shè)定表格的對齊方式和邊框大小 背景顏色 邊框顏色 和 背景圖像 分別用來設(shè)定表格的背景顏色 邊框顏色和背景圖像 分別用來清除列寬和行寬以及將表格寬度和高度在百分比和像素間切換 8 3 3插入圖像占位符圖像占位符是在插入真正的圖像之前用來起替代作用的 尤其在進(jìn)行頁面布局的時(shí)候是非常有用的 1 定位圖像占位符要插入的位置 2 單擊插入面板組中常用工具欄的插入圖像占位符圖標(biāo) 彈出對話框如圖8 19所示 3 輸入各項(xiàng)參數(shù)如圖8 19所示 單擊 確定 圖8 19 8 4插入多媒體內(nèi)容8 4 1插入文本內(nèi)容1 插入文本文本可以直接在單元格內(nèi)輸入 也可以從其它文本文件中拷貝 1 在單元格內(nèi)單擊 確定文本插入的位置 2 按 Ctrl C 復(fù)制文本 然后按 Ctrl V 完成粘貼 文本就被插入到相應(yīng)的位置了 并且隨著文本的現(xiàn)有屬性可能擴(kuò)展單元格 3 在屬性面板中設(shè)置文本的屬性 2 插入導(dǎo)航條文本 1 在創(chuàng)建的單元格內(nèi)單擊 輸入 導(dǎo)航條文本 字樣 2 在創(chuàng)建表格的單元格內(nèi)單擊 輸入導(dǎo)航文本內(nèi)容 3 在屬性面板中設(shè)置文本的屬性 3 為文本創(chuàng)建鏈接 1 拖動鼠標(biāo)選擇要創(chuàng)建鏈接的文本 2 單擊鏈接列表框后面的文件夾圖標(biāo) 選擇鏈接文件的名稱 然后單擊 確定 如圖8 21所示 圖8 21 8 4 2插入圖像圖像是網(wǎng)頁制作的重要元素之一 可以美化頁面 更重要的是可以攜帶更加形象直觀的信息 1 通過替換圖像占位符插入圖像 1 雙擊圖像占位符 彈出選擇圖像源文件對話框如圖8 22所示 2 選擇 digital 02 JPG 文件 單擊 確定 圖8 22 2 通過 插入 菜單插入圖像 1 在單元格上單擊 確定圖像插入的具體位置 2 單擊 插入 圖像 菜單 彈出 選擇圖像源文件 對話框 選擇 ima 33 gif 文件 單擊 確定 圖像即被插入 3 從文件面板中直接拖曳插入圖像 1 單擊單元格 確定圖像拖曳的具體位置 2 在窗口右側(cè)的浮動面板組中選擇文件面板 雙擊或者單擊 imge 文件夾前面的 號 展開該文件夾 如圖8 23所示 3 選擇 jiawa jpg 圖像文件 按住鼠標(biāo)左鍵拖拽到單元格中松開 圖8 23 4 從資源面板中插入圖像 1 單擊定位圖像插入點(diǎn)的位置 2 點(diǎn)擊窗口右側(cè)文件面板的 資源 選項(xiàng)卡并通過其左側(cè)的圖像視圖圖標(biāo)切換到圖像資源 如圖8 24所示 3 選擇要插入的圖像文件 p2p gif 利用鼠標(biāo)拖動操作將圖像插入 或者使用資源頁簽下面的 插入 命令按鈕完成圖像的插入 圖8 24 8 4 3插入音頻在網(wǎng)頁中插入音頻常見的方式可以說有三種 手寫代碼添加背景音樂 鏈接到音頻文件 嵌入音頻文件 1 手寫代碼添加背景音樂 1 打開我們前面編輯的文件 index html 2 切換視圖到 代碼 視圖 找到標(biāo)記 可以通過Ctrl F快捷鍵或者菜單 編輯 查找和替換 快速查找 并將光標(biāo)定位在其之前 3 在光標(biāo)的位置寫下代碼 如圖8 25所示 4 按下F12鍵試聽剛才添加的背景音樂效果 如果需要設(shè)置背景音樂的其它參數(shù)比如循環(huán) 延遲 平衡 音量屬性還可以繼續(xù)編寫代碼 圖8 25 2 鏈接到音頻文件 1 選擇用來鏈接音頻文件的文本 圖元或者其他對象 2 在對應(yīng)屬性面板的 鏈接 列表中輸入音頻文件的路徑和名稱 或者通過 瀏覽 按鈕直接選擇即可 3 嵌入音頻文件 1 打開我們前面編輯的文件 index html 2 單擊單元格將嵌入音頻媒體插件的位置定位 3 單擊插入面板組常用工具欄中的 媒體 圖標(biāo) 選擇 插件 如圖8 26所示 圖8 26 4 在彈出的選擇文件對話框中選擇文件 zdan mp3 然后單擊 確定 5 此時(shí)用于嵌入音頻媒體插件的圖標(biāo)已顯示在當(dāng)前單元格中 在屬性面板中定義其寬度和高度 6 按F12預(yù)覽其效果 在瀏覽器中可能會彈出 限制此文件顯示 的字樣 在 單擊此處查看選項(xiàng) 處單擊選擇 允許阻止的內(nèi)容 如圖8 27所示 即可顯示嵌入的音頻播放器 如圖8 28所示 圖8 27 圖8 28 8 4 4插入視頻在網(wǎng)頁中常見的視頻有兩種 即Flash視頻和非Flash視頻 1 在網(wǎng)頁中插入Flash視頻 1 打開前面制作的 index html 文件 在單元格單擊確定插入點(diǎn)的位置 2 點(diǎn)擊插入面板組常用工具欄的 媒體 按鈕 選擇 FlashVideo 如圖8 29所示 圖8 29 3 在彈出的 插入Flash視頻 對話框中做如圖8 30所示的設(shè)置 然后單擊 確定 圖8 30 在 視頻類型 列表框中有 累進(jìn)式下載視頻 和 流視頻 兩種類型 累進(jìn)式下載視頻 將Flash視頻文件下載到站點(diǎn)訪問者的硬盤上 然后播放 但是 與傳統(tǒng)的 下載并播放 視頻傳送方法不同 漸進(jìn)式下載允許在下載完成之前就開始播放視頻文件 流視頻 對Flash視頻內(nèi)容進(jìn)行流式處理 并在一段很短時(shí)間的緩沖 可確保流暢播放 后在Web頁上播放Flash視頻內(nèi)容 但要在Web頁上啟用流視頻 站點(diǎn)訪問用戶必須具有訪問MacromediaFlashCommunicationServer的權(quán)限 在 URL 列表框右側(cè)單擊 瀏覽 選擇插入的Flash視頻文件 在 外觀 列表框中點(diǎn)擊右側(cè)的下拉菜單按鈕 選擇Flash視頻組件的外觀 同時(shí)在下面可以設(shè)定其寬度和高度以及是否自動播放和自動重新播放屬性 這些也可以在屬性面板中設(shè)置 勾選檢測用戶是否擁有查看Flash視頻所需的正確FlashPlayer版本 并可以在消息列表框中輸入提示和詢問信息 2 插入非Flash視頻在頁面中插入非Flash視頻的主要方法有兩種 即鏈接到視頻和嵌入視頻 1 鏈接到視頻 選擇用來鏈接到視頻文件的文本或者其它對象 在對應(yīng)的屬性面板上單擊 鏈接 列表右側(cè)的文件夾 選擇視頻文件即可 這種插入視頻的方式可以使用戶具有較高的可控性和選擇性 2 嵌入視頻 在文檔窗口中單擊定位嵌入視頻文件的位置 單擊插入面板組常用工具欄中的 媒體 圖標(biāo) 選擇 插件 在彈出的選擇文件對話框中選擇文件 bsztyd mpg 然后單擊 確定 此時(shí)用于嵌入視頻媒體插件的圖標(biāo)已顯示在單元格中 在屬性面板中定義其寬度和高度 保存頁面并按F12預(yù)覽其效果 同嵌入音頻文件一樣 這種方式將視頻文件直接并入頁面中 但需訪問站點(diǎn)的用戶具有適當(dāng)視頻組件插件才可以播放視頻 8 4 5插入Flash動畫及對象1 插入Flash動畫 1 單擊常用工具欄上的按鈕 從彈出的下拉菜單中選擇 Flash 如圖8 31所示 圖8 31 2 在打開的 選擇文件 屬性對話框中選擇要插入的Flash動畫文件 qxpaio 0312 1 swf 單擊 確定 3 在屬性面板中設(shè)置Flash動畫的屬性 如圖8 33所示 圖8 33 可以在圖8 33所示的左上側(cè)的文本框中為該Flash動畫命名 寬 和 高 用來設(shè)置Flash動畫的寬度和高度 直接輸入數(shù)值 單位為像素 文件 文本框用來設(shè)置Flash動畫的路徑和名稱 循環(huán) 和 自動播放 復(fù)選框用來設(shè)置Flash動畫是否循環(huán)和自動播放 垂直邊距 和 水平邊距 用來設(shè)置Flash動畫和頁面其它對象間的距離 品質(zhì) 和 比例 分別用來設(shè)置Flash動畫的播放質(zhì)量和視圖比例 可以點(diǎn)擊下拉菜單按鈕進(jìn)行設(shè)定 對齊 和 背景顏色 分別用來設(shè)置Flash動畫的對齊方式和背景色彩 單擊 編輯 按鈕可以啟動Flash重新編輯Flash動畫 單擊 重設(shè)大小 使Flash動畫恢復(fù)到原始大小 播放 按鈕用來在文檔窗口預(yù)覽Flash動畫 該按鈕可以隨需求在 播放 與 停止 間轉(zhuǎn)換 參數(shù) 按鈕用來設(shè)置Flash動畫的相關(guān)屬性 如透明屬性等 2 插入Flash按鈕對象可以在Dreamweaver8 0文檔中創(chuàng)建 插入和修改Flash按鈕 無需單獨(dú)啟動Flash應(yīng)用程序 Flash按鈕對象是基于Flash模板的可更新按鈕 設(shè)計(jì)開發(fā)人員可以自定義Flash按鈕對象 并為其添加文本 背景顏色以及指向其它文件的鏈接等等 在頁面中插入Flash按鈕對象的步驟如下 1 將光標(biāo)定位在要插入Flash按鈕的位置 2 單擊常用工具欄上的按鈕 從彈出的下拉菜單中選擇 Flash按鈕 子菜單 3 在彈出的插入Flash按鈕對話框中輸入各項(xiàng)設(shè)置 如圖8 34所示 圖8 34 范例 是用來預(yù)覽當(dāng)前選擇的Flash按鈕的最終效果 樣式 是提供Flash按鈕的外觀 按鈕 文本框用來輸入按鈕上的文字信息 對應(yīng)下面的 字體 列表和 大小 可以設(shè)定文字的字體和大小 鏈接 用來設(shè)置Flash按鈕的鏈接 可單擊 瀏覽 按鈕查找鏈接文件 目標(biāo) 用來設(shè)置顯示鏈接內(nèi)容的窗口 背景色 用來設(shè)置Flash按鈕的背景顏色 另存為 用于設(shè)定Flash按鈕保存的路徑和名稱 4 在屬性面板設(shè)定Flash按鈕的相關(guān)屬性 保存頁面并按下F12鍵預(yù)覽插入的Flash按鈕的動畫效果 3 插入Flash文本對象Flash文本對象支持創(chuàng)建和插入只包含文本信息的SWF文件 在頁面中插入Flash文本對象的操作如下 1 將光標(biāo)定位在要插入Flash文本的位置 2 單擊常用工具欄上的按鈕 從彈出的下拉菜單中選擇 Flash文本 子菜單 3 在彈出的插入Flash文本對話框中輸入各項(xiàng)設(shè)置 如圖8 35所示 圖8 35 字體 大小 鏈接 目標(biāo) 背景色 和 另存為 屬性與Flash按鈕對話框中的比較一致 這里不再贅述 在 字體 列表下面可以直接設(shè)置Flash文本的加粗 傾斜以及對齊方式 文本 列表用來輸入Flash文本內(nèi)容 轉(zhuǎn)滾顏色 用來設(shè)置在瀏覽器中鼠標(biāo)放在Flash文本上時(shí)字體的顏色 4 在屬性面板設(shè)定Flash文本的相關(guān)屬性 保存頁面并按下F12鍵預(yù)覽插入的Flash文本對象效果 4 插入FlashPaperFlashPaper可以將一些主流的文檔格式 如Office文檔 PDF文檔 文本文件 網(wǎng)頁 FLA文件等 輕松地轉(zhuǎn)換成SWF格式 便于在網(wǎng)絡(luò)上瀏覽和打印 8 4 6插入Shockwave動畫Shockwave作為Web上交互式多媒體的Macromedia標(biāo)準(zhǔn) 是一種經(jīng)壓縮的格式 使得在MacromediaDirector中創(chuàng)建的多媒體文件能夠被快速下載 而且可以在大多數(shù)常用瀏覽器中進(jìn)行播放 插入Shockwave動畫的步驟如下 1 將光標(biāo)定位在要插入Shockwave動畫的位置 2 單擊常用工具欄上的按鈕 從彈出的下拉菜單中選擇 Shockwave 子菜單 3 在彈出的選擇文件對話框中選擇Shockwave動畫文件的名稱 1 swf 然后單擊 確定 按鈕 同樣插入后的Shockwave并不會在文檔窗口中顯示內(nèi)容 而是以Shockwave占位符來顯示 4 在屬性面板設(shè)定Shockwave的相關(guān)屬性 保存頁面并按下F12鍵預(yù)覽插入Shockwave動畫的效果 8 4 7插入JavaAppletJava是一種完全開放的編程語言 通過它可以開發(fā)可嵌入Web頁中的小型應(yīng)用程序Applet 它的 交互 性很強(qiáng) 只要有支持Java的瀏覽器就可以運(yùn)行 在頁面中插入JavaApplet的步驟如下 1 將光標(biāo)定位在要插入JavaApplet的位置 2 單擊常用工具欄上的按鈕 從彈出的下拉菜單中選擇 Applet 子菜單 3 在彈出的選擇文件對話框中選擇1個(gè)JavaApplet小程序 然后單擊 確定 按鈕 這樣就可以在頁面中插入1個(gè)JavaApplet小程序 4 選中插入到頁面中的JavaApplet圖標(biāo) 在屬性面板上設(shè)置其屬性如圖8 37所示 圖8 37 代碼 列表用來設(shè)置這個(gè)JavaApplet小程序的名稱 基址 文本框用來顯示這個(gè)JavaApplet小程序所在的文件夾 替換 用來設(shè)置當(dāng)該JavaApplet小程序無法正常顯示時(shí)將顯示的替換對象 5 單擊屬性面板的 參數(shù) 按鈕 打開 參數(shù) 對話框 設(shè)置參數(shù)如圖8 38所示 其中 參數(shù)名稱為圖像 參數(shù)值為圖像文件的實(shí)際名稱 然后單擊 確定 按鈕 圖8 38 8 4 8插入ActiveX控件ActiveX控件是可以充當(dāng)瀏覽器插件的可重復(fù)使用的組件 有些像微型的應(yīng)用程序 Windows系統(tǒng)上的InternetExplorer為ActiveX控件提供了良好的運(yùn)行環(huán)境 在頁面中插入ActiveX控件的步驟如下 1 將光標(biāo)定位在要插入ActiveX控件的位置 2 單擊常用工具欄上的按鈕 從彈出的下拉菜單中選擇 ActiveX 子菜單 3 此時(shí)在頁面中會顯示ActiveX控件圖標(biāo) 4 選中插入到頁面中的ActiveX控件圖標(biāo) 在屬性面板上設(shè)置其屬性如圖8 39所示 圖8 39 ClassID 用來為瀏覽器標(biāo)識ActiveX控件 可以直接輸入一個(gè)值或從彈出菜單中選擇一個(gè)值 在加載頁面時(shí) 瀏覽器使用該 類ID 來確定與該頁面關(guān)聯(lián)的ActiveX控件所需的ActiveX控件的位置 如果瀏覽器未找到指定的ActiveX控件 則它將嘗試從 基址 指定的位置中下載它 嵌入 復(fù)選框如果勾選就相當(dāng)于把該ActiveX控件同時(shí)設(shè)置成了插件 源文件 定義用于如果勾選了 嵌入