1、第五次課 圖像多媒體和超級鏈接圖像和多媒體一、網(wǎng)頁中的圖像格式網(wǎng)頁中通常使用的圖像文件有JPEG、GIF和PNG三種格式，其中以前兩者最常用，大多數(shù)瀏覽器都支持。1.GIF：網(wǎng)絡(luò)中最常見的圖像格式l 最多可顯示256種顏色，因此最適合顯示：色調(diào)不連續(xù)/大面積單一顏色的圖像，如導(dǎo)航條、按鈕、圖標(biāo)、徽標(biāo)等，不適合照片。l 無損壓縮l 支持透明背景l(fā) 交織文件格式，瀏覽器完成下載圖像之前，瀏覽者即可看到該圖像。l 通用性好，幾乎所有瀏覽器都支持，而且有許多免費軟件支持該文件編輯。2.JPEG：有損壓縮l 豐富色彩，最多可顯示1670萬種顏色l 有損壓縮l 比GIF格式圖像小，下載速度更快l 圖像邊緣

2、細節(jié)損失嚴重，不適合包含鮮明比照度的圖像或文本的圖像3.PNG：專門為網(wǎng)絡(luò)準(zhǔn)備的圖像格式l 使用新型無損壓縮方案l 豐富色彩，最多可顯示1670萬種顏色l 通用性差，IE4.0或更高版本和Netscape4.04或更高版本瀏覽器都只能部分支持。二、插入圖像、設(shè)置圖像屬性1.插入圖像首先注意：文檔中插入的圖像必須位于當(dāng)前站點文件夾內(nèi)或遠程站點文件夾內(nèi)，否則圖像不能正確顯示，因此，建立站點時，創(chuàng)建一個“image”文件夾。步驟一：將插入點放置在要插入圖像的位置步驟二：插入圖像方法：“插入”面板 “插入”菜單2.設(shè)置圖像屬性圖像的“屬性”面板顯示該圖像屬性“寬”“高”選項：以像素為單位指定圖像寬度和

3、高度。注意：只縮放圖像的顯示大小，不縮短下載時間，瀏覽器；在縮放圖像前下載所有圖像數(shù)據(jù)“編輯”按鈕：啟動外部編輯圖像編輯器，“重新取樣”：對已調(diào)整過得圖像重新取樣，提高圖片在新的大小和形狀下的品質(zhì)“地圖”和“指針熱點工具”設(shè)置圖像的熱點鏈接“原始”：指定在載入主圖像之前可快速載入的低品質(zhì)圖像，節(jié)省瀏覽時間“對齊”：指定同一行上的圖像和文本的對齊方式。“垂直邊距”和“水平邊距”：指定沿圖像邊沿添加的邊距“替換”：給圖片添加文字說明三、插入圖像占位符布局時，設(shè)計圖像在網(wǎng)頁中的位置，設(shè)計方案通過后，再將這個位置變成具體圖像。方法一：“插入”面板方法二：“插入”菜單四、跟蹤圖像“修改”>“頁面屬

4、性”五、調(diào)整圖文混排效果調(diào)整同一行圖像與文字相對位置：選中圖像，屬性面板“對齊”9個選項：“默認值”：通常指定基線對齊，瀏覽器不同，默認值也不同“基線”和“底部”：文本的基線與選定對象的底部對齊“頂端”：當(dāng)前行中最高文本的頂端與圖像的頂端對齊“居中”：當(dāng)前行的基線與圖像的中部對齊“文本上方”：文本行中最高字符的頂端與圖像的頂端對齊“絕對居中”：當(dāng)前行中文本的中部與圖像中部對齊“絕對底部”：將文本行字母的底部與圖像的底部對齊。“左對齊”：圖像放置在左邊，文本在圖像右側(cè)換行“右對齊”：圖像放置在右邊，文本在圖像左側(cè)換行案例 數(shù)碼相機網(wǎng)頁步驟一：插入圖像：分別在第一段和第二段英文標(biāo)題前插入圖像3和4

5、步驟二：圖文對齊：分別在屬性面板“對齊”選項中選擇“左對齊”和“右對齊”步驟三：設(shè)定圖像大小：選中圖像，單擊右下角調(diào)整點拖曳，屬性面板中圖像“寬、高”隨之變化步驟四：恢復(fù)圖像原始大小，單擊“寬、高”后的旋轉(zhuǎn)形狀按鈕。六、多媒體在網(wǎng)頁中的應(yīng)用案例 營養(yǎng)美食網(wǎng)頁步驟一：打開美食網(wǎng)頁素材；步驟二：插入Flash動畫：光標(biāo)置入右下方單元，“插入”面板>“Flash”，插入case.swf步驟三：播放：屬性面板“播放”按鈕知識點：1.插入Flash動畫：只支持Flash使用文件類型.fla/.swf/.swt-模板文件的swf，2.方法：“插入”面板和“插入”菜單3.插入Shockwave影片：是

6、Web上用于交互式多媒體的Macromedia標(biāo)準(zhǔn)，是一種經(jīng)過壓縮的格式，使得在Director中創(chuàng)建的多媒體文件能夠被快速下載，而且可以子啊大多數(shù)瀏覽器中播放。方法同F(xiàn)lash動畫插入。4.插入Applet程序：是用Java編程語言開發(fā)的、可嵌入Web頁中的小型應(yīng)用程序，插入方法相同5.插入ActiveX控件：是可以充當(dāng)瀏覽器插件的課重復(fù)使用的組件，有些像微型的應(yīng)用程序。只在Windows系統(tǒng)上的IE中運行。超鏈接一、文本超鏈接1.創(chuàng)建文本鏈接：方法很簡單，主要是在鏈接文本的“屬性”面板中指定鏈接文件，指定鏈接文件方法3種：方法一：直接輸入要鏈接文件的路徑和文件名：鏈接本地站點：直接輸入文檔

7、相對路徑或站點根目錄相對路徑鏈接到本地站點以外的文件：直接輸入絕對路徑方法二：使用“瀏覽文件”按鈕：彈出“選擇文件”對話框時，注意：在“相對于”下拉列表中兩個選項，“文檔”表示使用文檔相對路徑，“站點根目錄”表示使用站點根目錄相對路徑來鏈接。“URL”選項文本框中可以直接輸入網(wǎng)頁的絕對路徑提示：一般要鏈接本地站點中的一個文件時，最好不要使用絕對路徑，因為如果移動文件，文件內(nèi)所有的絕對路徑都將被打斷。方法三：使用“指向文件”圖標(biāo)：快捷指定站點窗口內(nèi)德鏈接文件。2.屬性面板“目標(biāo)”下拉列表3項：完成鏈接文件后，“目標(biāo)”變?yōu)榭捎谩?blank”:將鏈接文件加載到未命名的新瀏覽器窗口中“-parent

8、”:加載到包含該鏈接的父框架集或窗口。“-self”:加載到鏈接所在的同一框架或窗口中，次目標(biāo)是默認的，通常不需要指定“-top”：加載到整個瀏覽器窗口中，并由此刪除所有框架。3.文本鏈接狀態(tài)“頁面屬性”對話框修改4.下載文件鏈接“鏈接”選項文本框中指定鏈接文件5.電子郵件鏈接方法一：選中需要鏈接對象，在“鏈接”文本框輸入mailto:jinjin411sohu 方法二：利用對話框：“插入”面板和“插入”菜單案例 車行天下網(wǎng)1. 制作特殊的文字超級鏈接：插入“電子郵件鏈接”按鈕2. 制作下載文件鏈接：直接“瀏覽文件”按鈕二、圖像超鏈接1.圖像超鏈接2.鼠標(biāo)經(jīng)過圖像鏈接案例：戀之語素材模板網(wǎng)1為網(wǎng)頁添加導(dǎo)航鼠標(biāo)經(jīng)過圖像2.為圖片添加鏈接：“NewPhoto”圖片三、創(chuàng)建熱點鏈接案例：健康水果之家四、命名錨記鏈接案例：花卉百科網(wǎng)1. 制作