第3章圖像和多媒體 本章簡介 圖像在網頁中的作用是非常重要的 圖像 按鈕 標記可以使網頁更加美觀 形象生動 從而使網頁中的內容更加豐富多彩 所謂 媒體 是指信息的載體 包括文字 圖形 動畫 音頻和視頻等 在DreamweaverCS3中 用戶可以方便快捷地向Web站點添加聲音和影片媒體 并可以導入和編輯多個媒體文件和對象 課堂學習目標 圖像的插入調整圖文的混排效果創建網站相冊多媒體在網頁中的應用 3 1圖像的插入 課堂案例 兒童相冊網頁中的圖像格式插入圖像設置圖像屬性給圖片添加文字說明插入圖像占位符跟蹤圖像 3 1 1課堂案例 兒童相冊 使用 圖像 按鈕插入圖像 使用 屬性 面板改變圖片的大小 調整圖像的亮度和對比度并為圖片添加文字說明 使用 圖像占位符 命令代替網頁中缺少的一張圖片 效果圖 3 1 2網頁中的圖像格式 Web頁中通常使用的圖像文件有JPEG GIF PNG3種格式 但大多數瀏覽器只支持JPEG GIF兩種圖像格式 因為要保證瀏覽者下載網頁的速度 所以網站設計者也常使用JPEG和GIF這兩種壓縮格式的圖像 GIF文件JPEG文件PNG文件 3 1 3插入圖像 要在DreamweaverCS3文檔中插入的圖像必須位于當前站點文件夾內或遠程站點文件夾內 否則圖像不能正確顯示 所以在建立站點時 網站設計者常先創建一個名叫 image 的文件夾 并將需要的圖像拷貝到其中 3 1 4設置圖像屬性 插入圖像后 在 屬性 面板中顯示該圖像的屬性 屬性面板 3 1 5給圖片添加文字說明 當圖片不能在瀏覽器中正常顯示時 網頁中圖片的位置就變成空白區域 為了讓瀏覽者在不能正常圖片顯示時也能了解圖片的信息 常為網頁的圖像設置 替換 屬性 3 1 6插入圖像占位符 在網頁布局時 網站設計者需要先設計圖像在網頁中的位置 等設計方案通過后 再將這個位置變成具體圖像 DreamweaverCS3提供的 圖像占位符 功能 可滿足上述需求 在網頁中插入圖像占位符的具體操作步驟如下 1 在文檔窗口中 將插入點放置在要插入占位符圖形的位置 2 通過以下幾種方法啟用 圖像占位符 命令 彈出 圖像占位符 對話框 選擇 插入 面板 常用 選項卡 單擊 圖像 展開式工具按鈕 選擇 圖像占位符 選項 選擇 插入記錄 圖像對象 圖像占位符 命令 3 1 7跟蹤圖像 在工程設計過程中 一般先在圖像處理軟件中勾畫出工程藍圖 然后在此基礎上反復修改 最終得到一幅完美的設計圖 制作網頁時也應采用工程設計的方法 先在圖像處理軟件中繪制網頁的藍圖 將其添加到網頁的背景中 按設計方案對號入座 等網頁制作完畢后 再將藍圖刪除 DreamweaverCS3利用 跟蹤圖像 功能來實現上述網頁設計的方式 3 1 8跟蹤圖像 在工程設計過程中 一般先在圖像處理軟件中勾畫出工程藍圖 然后在此基礎上反復修改 最終得到一幅完美的設計圖 制作網頁時也應采用工程設計的方法 先在圖像處理軟件中繪制網頁的藍圖 將其添加到網頁的背景中 按設計方案對號入座 等網頁制作完畢后 再將藍圖刪除 DreamweaverCS3利用 跟蹤圖像 功能來實現上述網頁設計的方式 3 2調整圖文的混排效果 課堂案例 數碼相機網頁調整圖像與文本的相對位置 3 2 1課堂案例 數碼相機網頁 使用 圖像 按鈕插入圖像 使用 屬性 面板改變圖像的對齊 水平邊距 效果圖 3 2 2調整圖像與文本的相對位置 網頁中既有文字 又有圖像 如何調整同一行文字和圖像的擺放位置達到表現良好的視覺效果 這就涉及圖像與文字的相對位置問題 調整同一行圖像與文字相對位置的具體操作步驟如下 1 在設計視圖中選擇圖像 2 在圖像 屬性 面板中展開 對齊 選項的下拉列表 選擇一種調整圖像與文字相對位置的方式 對齊 選項中提供了9種圖像與文字的對齊方式 3 3創建網站相冊 課堂案例 家庭生活照片創建網站相冊 3 3 1課堂案例 家庭生活照片 用 創建網站相冊 命令制作相冊效果 使用 查找 和 替換 命令將圖像設為居中顯示效果 效果圖 3 3 2創建網站相冊 在開始創建網站相冊之前 將相冊的所有圖像放置在一個文件夾中 并確保圖像文件名的擴展名為 Gif Jpg Jpeg Png Psd Tif 或 Tiff 首先 使用FireworksCS3來為該文件夾中的每個圖像創建一個縮略圖和一個較大尺寸的圖像 然后 應用DreamweaverCS3創建一個Web頁 它包含所有縮略圖以及指向大圖像所在網頁的鏈接 3 4多媒體在網頁中的應用 課堂案例 營養美食網頁插入Flash動畫插入Flash文本插入Flash按鈕插入Shockwave影片影片插入Applet程序插入ActiveX控件 3 4 1課堂案例 營養美食網頁 使用 Flash 按鈕制作網頁導航條效果 使用 屬性 面板改變按鈕的大小 使用 Flash文本 按鈕為網頁文檔插入Flash文本效果 使用 居中對齊 按鈕設置Flash文本居中對齊效果 使用 Flash 按鈕為網頁文檔插入Flash動畫效果 使用 播放 按鈕在文檔窗口中預覽效果 效果圖 3 4 2插入Flash動畫 DreamweaverCS3提供了使用Flash對象的功能 雖然Flash中使用的文件類型有Flash源文件 fla FlashSWF文件 swf Flash模板文件 swt 但DreamweaverCS3只支持FlashSWF swf 文件 因為它是Flash fla 文件的壓縮版本 已進行了優化 便于在Web上查看 3 4 3插入Flash文本 Flash文本是指只包含文本的Flash影片 Flash文本使用戶利用自己選擇的設計字體創建較小的矢量圖形影片 3 4 4插入Flash按鈕 如果用戶想在網頁中插入一個具有交互效果的按鈕 可通過 插入Flash按鈕 功能輕松實現 用戶可以在文檔中插入Flash按鈕 但在插入Flash按鈕前 必須先保存文檔 3 4 5插入Shockwave影片 Shockwave是Web上用于交互式多媒體的Macromedia標準 是一種經壓縮的格式 使得在MacromediaDirector中創建的多媒體文件能夠被快速下載 而且可以在大多數常用瀏覽器中進行播放 3 4 6影片插入Applet程序 Applet是用Java編程語言開發的 可嵌入Web頁中的小型應用程序 DreamweaverCS3提供了將JavaApplet插入HTML文檔中的功能 3 4 7插入ActiveX控件 ActiveX控件 也稱OLE控件 它是可以充當瀏覽器插件的可重復使用的組件 有些像微型的應用程序 ActiveX控件只在Windows系統上的InternetExplorer中運行 DreamweaverCS3中的ActiveX對象可為瀏覽者的瀏覽器中的ActiveX控件提供屬性和參數 3 5課堂練習 數碼世界網頁 使用 圖像 按鈕插入圖像 使用 對齊 選項將插入的圖像右對齊 效果圖 3 6課堂練習 旅游資訊網 使用 Flash 按鈕制作網頁導航條效果 使用 Fla