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

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

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

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

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

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

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

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

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

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

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

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

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

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