旅游網(wǎng)站圖像和媒體設(shè)置下載PPT學習教案

1、會計學1 旅游網(wǎng)站圖像和媒體設(shè)置下載旅游網(wǎng)站圖像和媒體設(shè)置下載 6.16.1設(shè)計思路設(shè)計思路 本章接著繼續(xù)制作“嶗山旅游”網(wǎng)站的主頁面，使 用圖像和媒體對其進行完善。首先將圖像占位符 “header”更換為圖像，然后將圖像占位符“l(fā)inknav” 刪除，設(shè)置背景圖像和鏈接文本，在網(wǎng)頁主體部分 的左欄和右欄中繼續(xù)編排相應(yīng)的內(nèi)容，使其圖文并 茂，在中欄內(nèi)插入swf動畫。通過這些基本操作， 網(wǎng)頁將顯得更美觀。 第1頁/共23頁 6.2 6.2 使用圖像使用圖像 網(wǎng)頁圖像格式網(wǎng)頁圖像格式 替換圖像占位符替換圖像占位符 設(shè)置背景設(shè)置背景 插入圖像插入圖像 設(shè)置圖像屬性設(shè)置圖像屬性 第2頁/共23頁 網(wǎng)頁

2、中圖像的作用基本上可分為兩種：一種是起網(wǎng)頁中圖像的作用基本上可分為兩種：一種是起 裝飾作用，如制作網(wǎng)頁時使用的背景圖像；另一裝飾作用，如制作網(wǎng)頁時使用的背景圖像；另一 種是起傳遞信息的作用，如新聞圖像、人物圖像種是起傳遞信息的作用，如新聞圖像、人物圖像 和風景圖像等，它與文本的地位和作用是相似的，和風景圖像等，它與文本的地位和作用是相似的， 甚至文本只有配備了相應(yīng)的圖像，才顯得更生動甚至文本只有配備了相應(yīng)的圖像，才顯得更生動 形象。形象。 目前，在網(wǎng)頁中使用的最為普遍且被各種瀏覽器目前，在網(wǎng)頁中使用的最為普遍且被各種瀏覽器 廣泛支持的圖像格式主要是廣泛支持的圖像格式主要是GIF和和JPG格式，

3、格式， PNG格式也在逐步地被越來越多的瀏覽器所接格式也在逐步地被越來越多的瀏覽器所接 受。受。 6.2.1 6.2.1 網(wǎng)頁圖像格式網(wǎng)頁圖像格式 第3頁/共23頁 一、一、GIF圖像圖像 GIF格式（格式（Graphics Interchange Format，圖形交，圖形交 換格式，文件擴展名為換格式，文件擴展名為“.gif”），是在），是在Web上使用上使用 最早、應(yīng)用最廣泛的圖像格式，具有圖像文件小、最早、應(yīng)用最廣泛的圖像格式，具有圖像文件小、 下載速度快、下載時隔行顯示、支持透明色以及多下載速度快、下載時隔行顯示、支持透明色以及多 個圖像能組成動畫的特點。由于最多支持個圖像能組成動畫

4、的特點。由于最多支持256種顏種顏 色，色，GIF格式最適合顯示色調(diào)不連續(xù)或具有大面積格式最適合顯示色調(diào)不連續(xù)或具有大面積 單一顏色的圖像，例如導航條、按鈕、圖標、徽標單一顏色的圖像，例如導航條、按鈕、圖標、徽標 或其他具有統(tǒng)一色彩和色調(diào)的圖像，不適合顯示有或其他具有統(tǒng)一色彩和色調(diào)的圖像，不適合顯示有 暈光、漸變色彩等顏色細膩的圖像和照片。暈光、漸變色彩等顏色細膩的圖像和照片。 第4頁/共23頁 二、二、JPEG圖像圖像 JPEG格式（格式（Joint Photographic Experts Group， 聯(lián)合圖像專家組格式，文件擴展名為聯(lián)合圖像專家組格式，文件擴展名為“.jpg”），），

5、是目前互聯(lián)網(wǎng)中最受歡迎的圖像格式。由于是目前互聯(lián)網(wǎng)中最受歡迎的圖像格式。由于 JPEG支持高壓縮率，因此其圖像的下載速度非支持高壓縮率，因此其圖像的下載速度非 ?？?。但隨著?？?。但隨著JPEG文件品質(zhì)的提高，文件的大文件品質(zhì)的提高，文件的大 小和下載時間也會隨之增加。不過通?？梢酝ㄟ^小和下載時間也會隨之增加。不過通?？梢酝ㄟ^ 壓縮壓縮JPEG文件在圖像品質(zhì)和文件大小之間達到文件在圖像品質(zhì)和文件大小之間達到 良好的平衡。由于良好的平衡。由于JPEG格式可以包含數(shù)百萬種格式可以包含數(shù)百萬種 顏色，因此非常適合顯示攝影、具有連續(xù)色調(diào)或顏色，因此非常適合顯示攝影、具有連續(xù)色調(diào)或 一些細膩、講究色彩濃淡

6、的圖像。一些細膩、講究色彩濃淡的圖像。 第5頁/共23頁 三、三、 PNG圖像圖像 PNG格式（格式（Portable Network Graphics，可移植網(wǎng)絡(luò)圖，可移植網(wǎng)絡(luò)圖 形，文件擴展名為形，文件擴展名為“.png”），是目前使用量逐漸增多），是目前使用量逐漸增多 的圖像格式。的圖像格式。PNG格式圖像不僅沒有壓縮上的損失，能格式圖像不僅沒有壓縮上的損失，能 夠呈現(xiàn)更多的顏色，支持透明色和隔行顯示，而且在顯夠呈現(xiàn)更多的顏色，支持透明色和隔行顯示，而且在顯 示速度上比示速度上比GIF和和JPEG更快一些。同時，更快一些。同時，PNG格式圖格式圖 像可保留所有原始層、矢量、顏色和效果信息

7、，并且在像可保留所有原始層、矢量、顏色和效果信息，并且在 任何時候所有元素都是可以完全編輯的。由于任何時候所有元素都是可以完全編輯的。由于PNG格式格式 圖像具有較大的靈活性并且文件較小，因此圖像具有較大的靈活性并且文件較小，因此PNG格式對格式對 于幾乎任何類型的網(wǎng)頁圖像都是非常適合的。不過于幾乎任何類型的網(wǎng)頁圖像都是非常適合的。不過PNG 格式還沒有普及到所有的瀏覽器，因此，除非用戶是使格式還沒有普及到所有的瀏覽器，因此，除非用戶是使 用支持用支持PNG格式的瀏覽器，否則最好使用格式的瀏覽器，否則最好使用GIF或或JPEG 以適應(yīng)更多人的需求。以適應(yīng)更多人的需求。 第6頁/共23頁 6.2

8、.2 替換圖像占位符 圖像占位符是在將最終圖像添加到網(wǎng)頁之前使用的 臨時占位符號，在發(fā)布站點之前，應(yīng)該將圖像占位 符替換成圖像文件。 可以在【屬性】面板中選中圖像占位符，然后單擊 【源文件】文本框后面的 圖標，也可直接雙擊圖 像占位符來打開【選擇圖像源文件】對話框，選擇 要替換圖像占位符的文件。 當然，也可以將圖像占位符直接刪除，然后再插入 需要的圖像。 第7頁/共23頁 6.2.3 設(shè)置背景 通過創(chuàng)建CSS樣式設(shè)置頁面背景和局部區(qū)域背景比較方便， 不僅能夠設(shè)置背景圖像的重復方式，而且還能夠設(shè)置重復圖 像的位置等，可以說比傳統(tǒng)的方法要靈活得多。 第8頁/共23頁 6.2.4 插入圖像 圖像除了

9、用作網(wǎng)頁背景外，更多的還是直接插入到 網(wǎng)頁中來傳遞信息。在【設(shè)計】視圖中插入圖像的 方法總結(jié)起來主要有以下幾種。 1.選擇【插入】/【圖像】命令來插入圖像。 2.在【文件】面板中選中圖像并拖動到文檔中要 插入圖像的位置。 3.在【插入】面板的【常用】類別中單擊（圖像） 按鈕或?qū)⑵渲苯油蟿拥轿臋n中。 4.在【資源】面板中單擊圖標切換到【圖像】類 別，選中圖像并單擊（圖像）按鈕或者直接將 圖像文件拖動到文檔中。 第9頁/共23頁 6.2.5 設(shè)置圖像屬性 插入圖像后，圖像自動處于選中狀態(tài)，在【屬性】 面板中將顯示圖像的相關(guān)屬性?？梢愿鶕?jù)需要重新 設(shè)置圖像屬性，從而使圖像更美觀。 第10頁/共23頁

10、 6.3 6.3 使用媒體使用媒體 網(wǎng)頁媒體類型網(wǎng)頁媒體類型 插入插入SWF動畫動畫 插入插入FLV視頻視頻 插入插入ActiveX控件控件 第11頁/共23頁 6.3.1 網(wǎng)頁媒體類型 在Dreamweaver CS5中，媒體的類型包括SWF、 FLV、Shockwave、Applet、ActiveX和插件等。 在使用Dreamweaver CS5來插入使用Adobe Flash創(chuàng)建的內(nèi)容之前，應(yīng)熟悉FLA、SWF和 FLV文件類型之間的關(guān)系。 一、FLA文件：擴展名為“.fla”，是使用Flash 軟件創(chuàng)建的項目的源文件，此類型的文件只能 在Flash中打開。因此，在網(wǎng)頁中使用時必須首 先

11、在Flash 中將它發(fā)布為SWF或SWT文件，這 樣才能在瀏覽器中播放。 第12頁/共23頁 二、SWF文件：擴展名為“.swf”，是FLA文件 的編譯版本，已進行優(yōu)化，可以在網(wǎng)頁上查看。 此文件可以在瀏覽器中播放并且可以在 Dreamweaver中進行預覽，但不能在Flash中編 輯此文件。 三、FLV文件：擴展名為“.flv”，是一種視頻 文件，它包含經(jīng)過編碼的音頻和視頻數(shù)據(jù)，用 于通過Flash Player進行傳送。例如，如果有 QuickTime或Windows Media視頻文件，則可以 使用編碼器（如Flash CS5 Video Encoder）將視 頻文件轉(zhuǎn)換為FLV文件。

12、第13頁/共23頁 6.3.2 插入SWF動畫 SWF動畫是目前互聯(lián)網(wǎng)上最常見的動畫類型。 在菜單欄中選擇【插入】/【媒體】/【SWF】命令， 打開【選擇SWF】對話框，選擇SWF動畫文件即可。 然后在【屬性】面板中根據(jù)需要設(shè)置其相關(guān)屬性。 第14頁/共23頁 6.3.3 插入FLV視頻 在開始向網(wǎng)頁中添加FLV視頻之前，必須有一個經(jīng)過 編碼的FLV文件。在Dreamweaver CS5中向網(wǎng)頁內(nèi)插 入FLV文件時將首先插入一個SWF組件，當在瀏覽 器中查看時，此組件將顯示插入的FLV文件和一組播 放控件。 在菜單欄中選擇【插入】/【媒體】/【FLV】命令， 打開【插入FLV】對話框，根據(jù)需要

13、進行參數(shù)設(shè)置。 第15頁/共23頁 第16頁/共23頁 第17頁/共23頁 第18頁/共23頁 6.3.4 插入ActiveX控件 ActiveX控件（以前稱作OLE控件）是功能類似于瀏 覽器插件的可重復使用的組件，有些像微型的應(yīng)用 程序，主要作用是擴展瀏覽器的能力。如果瀏覽器 載入了一個網(wǎng)頁，而這個網(wǎng)頁中有瀏覽器不支持的 ActiveX控件，瀏覽器會自動安裝所需控件。 Dreamweaver CS5中的ActiveX對象使讀者可為瀏覽 器中的ActiveX控件提供屬性和參數(shù)。在頁面中插入 ActiveX對象后，可在【屬性】面板設(shè)置object標簽 的屬性和ActiveX控件參數(shù)，單擊“參數(shù)”按鈕可輸 入未在【屬性】面板中顯示的屬性名稱和值。 WMV和RM是網(wǎng)絡(luò)常見的兩種視頻格式。其中， WMV影片是Windows的視頻格式，使用的播放器是 Microsoft Media Player。 第19頁/共23頁 在菜單欄中選擇在菜單欄中選擇【插入插入】/【媒體媒體】/【ActiveX】命令，命令， 系統(tǒng)自動在文檔中插入一個系統(tǒng)自動在文檔中插入一個ActiveX占位符。占位符。 然后