DreamweaverCS3中文版實(shí)例教程 03 圖像和多媒體.ppt

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