DW文字、圖像和多媒體插入

1、DW文字、圖像和多媒體插入 3.1網(wǎng)頁中文本的操作網(wǎng)頁中文本的操作 本節(jié)課堂目標：本節(jié)課堂目標： 熟練掌握網(wǎng)頁文本的操作方法和技巧熟練掌握網(wǎng)頁文本的操作方法和技巧 本節(jié)教學內(nèi)容：本節(jié)教學內(nèi)容： 1：文本對象的插入和格式設置（重點）：文本對象的插入和格式設置（重點） 2：設置文本標題（難點）：設置文本標題（難點） 3：段落的設置效果：段落的設置效果 （難點）（難點） 4：項目符號和編號的插入使用：項目符號和編號的插入使用 5：歷史記錄面板的使用：歷史記錄面板的使用 DW文字、圖像和多媒體插入 思考題：根據(jù)以前所學知識說出文本的編輯和設置屬性思考題：根據(jù)以前所學知識說出文本的編輯和設置屬性 各包括

2、幾個方面？各包括幾個方面？ 文本插入欄的按鈕和屬性面板的功按鈕相似。文本插入欄的按鈕和屬性面板的功按鈕相似。 . 認識文本按鈕及屬性面板認識文本按鈕及屬性面板 DW文字、圖像和多媒體插入 . 插入文本和對象插入文本和對象 .文本是網(wǎng)頁中最基礎的載體；純文本網(wǎng)頁占用的存儲空文本是網(wǎng)頁中最基礎的載體；純文本網(wǎng)頁占用的存儲空 間小，占用的網(wǎng)絡帶寬較少，打開速度快。間小，占用的網(wǎng)絡帶寬較少，打開速度快。 將文本（英文、中文、數(shù)字）添加到文檔中的方法有以下將文本（英文、中文、數(shù)字）添加到文檔中的方法有以下 三種：直接輸入、粘貼剪貼板中的文字、導入三種：直接輸入、粘貼剪貼板中的文字、導入word格式格式

3、的文檔的文檔。 復制復制/粘貼，巧妙使用粘貼，巧妙使用“選擇性粘貼選擇性粘貼”命令。命令。 導入其他格式的文本（需要清理導入其他格式的文本（需要清理word生成的無關生成的無關html 代碼）代碼） 文件導入文件導入wordexcel 文檔文檔 也可拖動文件放入網(wǎng)頁的適當位置，將文檔鏈接也可拖動文件放入網(wǎng)頁的適當位置，將文檔鏈接 到網(wǎng)頁中（鏈接文本是鏈接文件的名稱）。到網(wǎng)頁中（鏈接文本是鏈接文件的名稱）。 DW文字、圖像和多媒體插入 .插入特殊字符：在插入特殊字符：在html中它被稱作實體，中它被稱作實體， 以名稱或數(shù)字的形式出現(xiàn)。特殊字符如右以名稱或數(shù)字的形式出現(xiàn)。特殊字符如右 所示。所示。

4、 操作方法分別是：操作方法分別是： 菜單法：插入菜單法：插入html特殊字符特殊字符 插入欄按鈕法：插入文本字符按鈕插入欄按鈕法：插入文本字符按鈕 默認情況下默認情況下Html中只允許字符之間包含一中只允許字符之間包含一 個空格，輸入連續(xù)的多個空格的方法：個空格，輸入連續(xù)的多個空格的方法： 設置首選參數(shù)改變默認設置設置首選參數(shù)改變默認設置 在輸入法為全角狀態(tài)下輸入多個空格在輸入法為全角狀態(tài)下輸入多個空格 DW文字、圖像和多媒體插入 .水平線（垂直線）水平線（垂直線） 插入水平線以可視方式分割文本和對象來組織信息。插入水平線以可視方式分割文本和對象來組織信息。 插入插入html水平線水平線 可在

5、屬性檢查器中修改水平線（寬、高等）可在屬性檢查器中修改水平線（寬、高等） .插入日期：插入日期： 菜單法；菜單法； 插入欄按鈕法插入欄按鈕法 5.對插入的文本也可以執(zhí)行刪除、搜索、替換、檢查拼對插入的文本也可以執(zhí)行刪除、搜索、替換、檢查拼 寫（文本檢查拼寫寫（文本檢查拼寫shift+f7）等操作。）等操作。 DW文字、圖像和多媒體插入 . 設置文本格式設置文本格式 字符的樣式指的是字符的外觀顯示方式。利用字符的樣式指的是字符的外觀顯示方式。利用Dw 可以設置多種字符樣式，如字體、加粗可以設置多種字符樣式，如字體、加粗 、傾斜、傾斜 、 下劃線下劃線 、 刪除線刪除線 、 打字型打字型 、 強調(diào)

6、等強調(diào)等 。 默認時默認時 Dreamweaver使用使用css設置文本的格式設置文本的格式,當當 使用命令來設置格式和對齊文本使用命令來設置格式和對齊文本 時，時， css規(guī)則將嵌規(guī)則將嵌 入到當前文檔中；入到當前文檔中； DW文字、圖像和多媒體插入 也可以使用標簽來對齊文本（也可以使用標簽來對齊文本（div標簽）和設置文標簽）和設置文 本格式（本格式（font標簽等），但要在首選參數(shù)中進行設置。標簽等），但要在首選參數(shù)中進行設置。 DW文字、圖像和多媒體插入 . 設置文本標題設置文本標題 文本標題來強調(diào)段落要表現(xiàn)的內(nèi)容。在文本標題來強調(diào)段落要表現(xiàn)的內(nèi)容。在HTML中，定義了中，定義了6 級

7、標題，從級標題，從1到到6級，每級標題的字體大小依次遞減。一段級，每級標題的字體大小依次遞減。一段 文字只能設置一個標題級別。文字只能設置一個標題級別。 在在HTML中，采用如下的標記來定義標題：中，采用如下的標記來定義標題： 和和 定義標題定義標題1 和和 定義標題定義標題2 和和 定義標題定義標題3 每級標題的字符大小并沒有一個實際上的固定的值，它每級標題的字符大小并沒有一個實際上的固定的值，它 是由瀏覽器所決定的，為標題定義的級別只決定了標題之是由瀏覽器所決定的，為標題定義的級別只決定了標題之 間的相互大小。間的相互大小。 DW文字、圖像和多媒體插入 3. 設置段落效果設置段落效果 1.

8、設置段落格式的方法設置段落格式的方法 使用【屬性】面板的【格式】彈出式菜單使用【屬性】面板的【格式】彈出式菜單 選擇【文本】選擇【文本】|【段落格式】菜單【段落格式】菜單 2.縮進段落縮進段落 所謂縮進，主要是相對于文檔窗口（或瀏覽器窗口）左端所謂縮進，主要是相對于文檔窗口（或瀏覽器窗口）左端 而言的。而言的。 屬性檢查器：屬性檢查器：“縮進縮進”、“凸出凸出”按鈕按鈕 文本菜單：文本菜單：“縮進縮進”、“凸出凸出”命令命令 DW文字、圖像和多媒體插入 .對齊段落對齊段落 段落的對齊方式，指的是段落相對文檔窗口（或瀏覽器窗段落的對齊方式，指的是段落相對文檔窗口（或瀏覽器窗 口）在水平位置的對齊

9、方式。有四種對齊方式：左對齊、口）在水平位置的對齊方式。有四種對齊方式：左對齊、 居中對齊、右對齊、兩端對齊。居中對齊、右對齊、兩端對齊。 關于文本對齊，源代碼設置為：關于文本對齊，源代碼設置為： .添加段間距：通過添加換行符在段間添加空行添加段間距：通過添加換行符在段間添加空行 添加段落換行符：按添加段落換行符：按enter鍵鍵 添加換行符：按添加換行符：按shift+enter鍵添加特殊字符鍵添加特殊字符/換行符換行符 換行與分段的區(qū)別：文本換行時，按換行與分段的區(qū)別：文本換行時，按Enter鍵換行的行距較鍵換行的行距較 大（在代碼區(qū)生成大（在代碼區(qū)生成標簽），按標簽），按EnterShi

10、ft鍵換鍵換 行的行間距較?。ㄔ诖a區(qū)生成行的行間距較?。ㄔ诖a區(qū)生成標簽）。標簽）。 DW文字、圖像和多媒體插入 .創(chuàng)建項目列表創(chuàng)建項目列表 . 在在HTML中，從總體上分有兩種類型的項目列表，一種是無中，從總體上分有兩種類型的項目列表，一種是無 序項目列表（使用項目符號來標記項目，產(chǎn)生序項目列表（使用項目符號來標記項目，產(chǎn)生ul標簽）標簽） ， 另一種是有序項目列表（使用編號來標記項目順序，產(chǎn)生另一種是有序項目列表（使用編號來標記項目順序，產(chǎn)生ol 標簽）。標簽）。 .在在Dreamweaver 中，一旦插好一個，下一個列表只需按中，一旦插好一個，下一個列表只需按 enter鍵即可；列表可

11、以嵌套。鍵即可；列表可以嵌套。 . 創(chuàng)建項目列表的步驟：創(chuàng)建項目列表的步驟： 選中要轉(zhuǎn)換為項目列表的所有段落。選中要轉(zhuǎn)換為項目列表的所有段落。 單擊單擊“屬性屬性”面板上的面板上的“項目列表項目列表”按鈕或按鈕或“編號列表編號列表” 按鈕；也可以單擊按鈕；也可以單擊“文本文本”“列表列表”菜單項，選擇相菜單項，選擇相 應的應的“無序列表無序列表” 、“有序列表有序列表”菜單項。菜單項。 這時被選中的段落文字就被轉(zhuǎn)換為項目列表的形式。這時被選中的段落文字就被轉(zhuǎn)換為項目列表的形式。 DW文字、圖像和多媒體插入 本節(jié)習題和作業(yè)本節(jié)習題和作業(yè) 1. 填空題填空題 （1）使用屬性檢查器或【文本】菜單中的

12、選項可以設置或）使用屬性檢查器或【文本】菜單中的選項可以設置或 更改所選文本的字體特性?？梢栽O置字體、字形（如粗更改所選文本的字體特性?？梢栽O置字體、字形（如粗 體或斜體）體或斜體） _ 、和、和_。 （2）若要插入更多的特殊字符，請選擇）若要插入更多的特殊字符，請選擇_ | _ | _或在或在_欄中選擇欄中選擇_圖標，選擇一個字圖標，選擇一個字 符，然后單擊【確定】。符，然后單擊【確定】。 2 . 選擇題（多選）選擇題（多選） （1）設置文本屬性可以通過）設置文本屬性可以通過_來設置。來設置。 A屬性面板屬性面板B控制面板控制面板 C啟動面板啟動面板D文本菜單文本菜單 DW文字、圖像和多媒體

13、插入 （2）在網(wǎng)頁中連續(xù)輸入空格的方法是）在網(wǎng)頁中連續(xù)輸入空格的方法是_。 A連續(xù)按空格鍵連續(xù)按空格鍵 B按下按下Ctrl鍵再連續(xù)按空格鍵鍵再連續(xù)按空格鍵 C轉(zhuǎn)換到中文的全角狀態(tài)下連續(xù)按空格鍵轉(zhuǎn)換到中文的全角狀態(tài)下連續(xù)按空格鍵 D按下按下Shift鍵再連續(xù)按空格鍵鍵再連續(xù)按空格鍵 3.簡答題：簡答題： （1）下圖所示情況何時出現(xiàn)？）下圖所示情況何時出現(xiàn)？ (2)如何將已經(jīng)加入了粗、斜體的文字改為正常字體？如何將已經(jīng)加入了粗、斜體的文字改為正常字體？ DW文字、圖像和多媒體插入 (3)如何使日期保持在頁面右下角？如何使日期保持在頁面右下角？ (4)如何使編號呈下圖所示的樣式？（屬性面板如何使編號

14、呈下圖所示的樣式？（屬性面板列表列表 項目按鈕）項目按鈕） 4.操作題操作題（1）將頁面中添加如下圖所示的表格（暫將頁面中添加如下圖所示的表格（暫 時可以通過導入時可以通過導入word文檔的方法實現(xiàn)）文檔的方法實現(xiàn)） DW文字、圖像和多媒體插入 （2.）制作如下的文字頁面）制作如下的文字頁面 DW文字、圖像和多媒體插入 .網(wǎng)頁圖像的運用網(wǎng)頁圖像的運用 本節(jié)內(nèi)容和目標：本節(jié)內(nèi)容和目標： 了解了解GIF、PNG和和JPEG三種圖像格式三種圖像格式 的異同點和的異同點和 使用環(huán)境。使用環(huán)境。(重點、難點重點、難點) 掌握在掌握在Dreamweaver 8.0中使用圖像的一些基本方中使用圖像的一些基本

15、方 法和技巧（重點）法和技巧（重點） 掌握編輯和設置圖像的方法掌握編輯和設置圖像的方法 掌握創(chuàng)建圖像映射和電子相冊的方法掌握創(chuàng)建圖像映射和電子相冊的方法 DW文字、圖像和多媒體插入 .網(wǎng)頁中圖像格式簡介網(wǎng)頁中圖像格式簡介 圖像在網(wǎng)頁中通常起到畫龍點睛的作用，它能裝飾網(wǎng)頁，表圖像在網(wǎng)頁中通常起到畫龍點睛的作用，它能裝飾網(wǎng)頁，表 達個人的情趣和風格，恰到好處地使用圖像能使網(wǎng)頁更加地達個人的情趣和風格，恰到好處地使用圖像能使網(wǎng)頁更加地 生動、形象和美觀生動、形象和美觀 。圖像比文本更能直觀地表達信息。圖像比文本更能直觀地表達信息。 網(wǎng)頁中圖像格式有：網(wǎng)頁中圖像格式有： GIF 、JPEG 、PNG

16、、TIFF、BMP等，等， 而最常用圖像格式有：而最常用圖像格式有：GIF 、JPEG 、PNG 圖1 JPEG 圖2 GIF 圖3 PNG DW文字、圖像和多媒體插入 1GIF（Graphics Interchange Format）格式）格式 (圖形交換圖形交換 格式格式)：使用最早、應用最廣泛。：使用最早、應用最廣泛。 a.無損壓縮、跨平臺兼容；無損壓縮、跨平臺兼容； b .占用磁盤空間小、支持動畫，交織下載、支持透明背景占用磁盤空間小、支持動畫，交織下載、支持透明背景 圖像。圖像。 c.支持支持8位位(256色）圖像，能夠很好地表現(xiàn)不連續(xù)色調(diào)和大色）圖像，能夠很好地表現(xiàn)不連續(xù)色調(diào)和大

17、面積色彩統(tǒng)一的圖像，如：導航條、按鈕、圖標、廣告面積色彩統(tǒng)一的圖像，如：導航條、按鈕、圖標、廣告 條（條（banner）、徽標等對色彩要求不高的圖像格式。）、徽標等對色彩要求不高的圖像格式。 DW文字、圖像和多媒體插入 2. JPEG：Joint Photographic Expert Group（聯(lián)合圖（聯(lián)合圖 像專家組）像專家組） 格式：目前最受歡迎。格式：目前最受歡迎。 a.采用特殊的壓縮算法，在失真較小的前提下，對圖片采用特殊的壓縮算法，在失真較小的前提下，對圖片 進行有損壓縮；進行有損壓縮； b .用來表現(xiàn)較為專業(yè)的或有連續(xù)色調(diào)的圖像可包含用來表現(xiàn)較為專業(yè)的或有連續(xù)色調(diào)的圖像可包含

18、數(shù)百萬種色彩數(shù)百萬種色彩. 分辨率較高，可用于處理照片。分辨率較高，可用于處理照片。 c. JPEG格式不支持透明色，也沒有動畫的概念格式不支持透明色，也沒有動畫的概念;采用采用 JPEG格式對圖像進行壓縮后，不能再重新打開圖像。格式對圖像進行壓縮后，不能再重新打開圖像。 DW文字、圖像和多媒體插入 3.PNG：Portable Network Graphic(便攜或可移植網(wǎng)絡便攜或可移植網(wǎng)絡 圖形格式，開發(fā)于圖形格式，開發(fā)于1995年年)：使用量逐漸增多。：使用量逐漸增多。 a .a .采用與采用與GIFGIF圖像格式類似的壓縮算法，能真實地顯圖像格式類似的壓縮算法，能真實地顯 示原始圖像，

19、支持透明背景，可控制壓縮比，文件小示原始圖像，支持透明背景，可控制壓縮比，文件小, , 靈活性強靈活性強, ,完全可替代完全可替代GIFGIF格式格式, ,是是fireworksfireworks軟件自身軟件自身 的文件格式，其擴展名為的文件格式，其擴展名為.png, .png, 只有帶擴展名只有帶擴展名dwdw才能才能 識別識別. . b . b .支持真彩色，與支持真彩色，與JPEGJPEG格式?jīng)]有太大的差別，目前在格式?jīng)]有太大的差別，目前在 網(wǎng)絡上得到大力推廣。網(wǎng)絡上得到大力推廣。 c .c .但只有但只有Microsoft IE (4.0Microsoft IE (4.0及以上版本及以

20、上版本) )和和Netscape Netscape Navigator(4.04Navigator(4.04及以上版本及以上版本) )才支持，才支持， GIFGIF和和JPEGJPEG不受不受 瀏覽器限制，應用較廣泛。瀏覽器限制，應用較廣泛。 d.Pngd.Png支持監(jiān)視器的伽碼設置修正，可跨平臺兼容。支持監(jiān)視器的伽碼設置修正，可跨平臺兼容。 DW文字、圖像和多媒體插入 總結(jié)：總結(jié)： 當只需要靜態(tài)圖像且色彩要求也不高時：當所選用圖像較當只需要靜態(tài)圖像且色彩要求也不高時：當所選用圖像較 小時用小時用gif格式文件小；而當所選用圖像大時用格式文件?。欢斔x用圖像大時用jpg格式文格式文 件小。此

21、時件小。此時png格式不具備優(yōu)勢。格式不具備優(yōu)勢。 GIFGIF、JPEG JPEG 、PNGPNG這幾種格式都是標準的位圖格式這幾種格式都是標準的位圖格式. .所謂位所謂位 圖格式就是指用圖片上每一點的信息來描述圖像；而矢量圖格式就是指用圖片上每一點的信息來描述圖像；而矢量 格式則是用線條和填充色等數(shù)學信息來描述圖像。矢量格格式則是用線條和填充色等數(shù)學信息來描述圖像。矢量格 式的文件要比位圖格式的文件小得多，可表現(xiàn)一般的靜態(tài)式的文件要比位圖格式的文件小得多，可表現(xiàn)一般的靜態(tài) 畫面也可以表現(xiàn)動畫畫面也可以表現(xiàn)動畫. . 在在Web頁上顯示圖片之前，通常需要考慮下列三個問題：頁上顯示圖片之前，通

22、常需要考慮下列三個問題： 確保文件較小確保文件較小:采用正確的格式進行優(yōu)化處理采用正確的格式進行優(yōu)化處理 ,使圖像具使圖像具 有所需的像素大小有所需的像素大小 控制圖像的數(shù)量和質(zhì)量；控制圖像的數(shù)量和質(zhì)量； 合理使用動畫。合理使用動畫。 DW文字、圖像和多媒體插入 .在網(wǎng)頁中使用圖像在網(wǎng)頁中使用圖像 1插入圖像：為了保證參數(shù)的正確，圖象文件必須保存插入圖像：為了保證參數(shù)的正確，圖象文件必須保存 在當前站點的在當前站點的images文件夾中，否則文件夾中，否則dw提示將其復制提示將其復制 到當前站點目錄下。插入后產(chǎn)生到當前站點目錄下。插入后產(chǎn)生img標簽。標簽。 具體操作步驟：單擊插入具體操作步驟

23、：單擊插入-圖像命令圖像命令/常用插欄的插入圖常用插欄的插入圖 像按鈕像按鈕 。 2.插入圖像占位符：暫時為圖片占個位置，在瀏覽器中不插入圖像占位符：暫時為圖片占個位置，在瀏覽器中不 顯示，在發(fā)布網(wǎng)站之前需用具體圖象替換它，在屬性檢顯示，在發(fā)布網(wǎng)站之前需用具體圖象替換它，在屬性檢 查器中（源文件）完成替換更新。一旦插入在查器中（源文件）完成替換更新。一旦插入在html代碼代碼 中自動產(chǎn)生一個包含屬性的圖象標簽中自動產(chǎn)生一個包含屬性的圖象標簽src和替換文本標和替換文本標 簽（簽（alt）。）。 DW文字、圖像和多媒體插入 src表示要插入圖像的文件名，必須包含絕對路徑或相對路表示要插入圖像的文

24、件名，必須包含絕對路徑或相對路 徑，圖像可以是徑，圖像可以是GIF文件、文件、JPEG文件或文件或PNG文件。文件。alt表表 示圖像的簡單文本說明，用于不能顯示圖像的瀏覽器或瀏示圖像的簡單文本說明，用于不能顯示圖像的瀏覽器或瀏 覽器能顯示圖像但顯示時間過長時先顯示，以幫助訪問者覽器能顯示圖像但顯示時間過長時先顯示，以幫助訪問者 了解圖像的信息。了解圖像的信息。 具體操作步驟具體操作步驟 ：單擊：單擊“插入插入-圖像對象圖像對象圖像占位符圖像占位符”命命 令令/常用插欄的插入圖像常用插欄的插入圖像圖像占位符圖像占位符 按鈕。按鈕。 在名稱框中給占位符取名的命名規(guī)則：字母開頭，只能包在名稱框中給

25、占位符取名的命名規(guī)則：字母開頭，只能包 含字母和數(shù)字，不能使用空格和含字母和數(shù)字，不能使用空格和ASCII字符。字符。 DW文字、圖像和多媒體插入 3.創(chuàng)建鼠標經(jīng)過圖象（輪換圖像）：只能在瀏覽器中查看創(chuàng)建鼠標經(jīng)過圖象（輪換圖像）：只能在瀏覽器中查看 （在文檔窗口中不能查看效果）并使用鼠標指針移過它（在文檔窗口中不能查看效果）并使用鼠標指針移過它 時發(fā)生變化的圖像，由主圖像（即頁面首次裝載時所顯時發(fā)生變化的圖像，由主圖像（即頁面首次裝載時所顯 示出的圖像）和翻轉(zhuǎn)圖像（當鼠標指針掠過時所顯示的示出的圖像）和翻轉(zhuǎn)圖像（當鼠標指針掠過時所顯示的 圖像）組成，二者大小要一樣。一旦插入在圖像）組成，二者大

26、小要一樣。一旦插入在html代碼中代碼中 自動產(chǎn)自動產(chǎn)onmouseover事件。事件。 4. 在在dw中圖像的編輯功能僅適用于中圖像的編輯功能僅適用于GIF 和和JPEG 圖像格式。圖像格式。 在屬性檢面板中編輯圖像在屬性檢面板中編輯圖像 在其中可設置圖像的屬性參數(shù)（寬、高、替代）、對齊圖在其中可設置圖像的屬性參數(shù)（寬、高、替代）、對齊圖 像（左、右、居中對齊）、邊距、邊框、改變圖像的尺像（左、右、居中對齊）、邊距、邊框、改變圖像的尺 寸寸 （也可直接拖動調(diào)整控制點）、裁剪圖像、調(diào)整其對（也可直接拖動調(diào)整控制點）、裁剪圖像、調(diào)整其對 比度、銳化圖像。比度、銳化圖像。 DW文字、圖像和多媒體插

27、入 上述設置也可通過菜單實現(xiàn)：修改上述設置也可通過菜單實現(xiàn)：修改-圖像圖像 用用fireworks優(yōu)化圖像：優(yōu)化圖像： 要方便地完成相關的處理工作，則需要圖形圖像處理軟件的要方便地完成相關的處理工作，則需要圖形圖像處理軟件的 協(xié)助。協(xié)助。 具體操作：修改具體操作：修改圖像圖像-在在fireworks優(yōu)化圖像。優(yōu)化圖像。 在頁面中合理地使用圖形圖像已經(jīng)成為網(wǎng)頁制作的一個在頁面中合理地使用圖形圖像已經(jīng)成為網(wǎng)頁制作的一個 基本要求。但是并非所有圖形圖像都可以直接用在網(wǎng)頁中，基本要求。但是并非所有圖形圖像都可以直接用在網(wǎng)頁中， 大多數(shù)情況下，需要對原始圖像素材進行一些處理，例如大多數(shù)情況下，需要對原始

28、圖像素材進行一些處理，例如 圖像優(yōu)化、添加特效等，然后再在網(wǎng)頁中使用。圖像優(yōu)化、添加特效等，然后再在網(wǎng)頁中使用。 DW文字、圖像和多媒體插入 為圖像添加熱點為圖像添加熱點 熱點即圖像上不可見的區(qū)域，該區(qū)域分配了一個超鏈接。熱點即圖像上不可見的區(qū)域，該區(qū)域分配了一個超鏈接。 為圖像添加熱點就是在圖像上劃分區(qū)域，從而設定圖像上為圖像添加熱點就是在圖像上劃分區(qū)域，從而設定圖像上 制作超鏈接的范圍。使用圖像或圖像中的某些區(qū)域來創(chuàng)建制作超鏈接的范圍。使用圖像或圖像中的某些區(qū)域來創(chuàng)建 超鏈接，為網(wǎng)頁設計增色不少。如果我們不建立鏈接，只超鏈接，為網(wǎng)頁設計增色不少。如果我們不建立鏈接，只 是當鼠標移到圖像的某

29、些區(qū)域時，能顯示一些提示信息或是當鼠標移到圖像的某些區(qū)域時，能顯示一些提示信息或 對圖的注釋，那么效果也一定不錯。對圖的注釋，那么效果也一定不錯。 在在Dream weaver中為圖像添加熱點的方法為：中為圖像添加熱點的方法為： 選定圖選定圖 像，打開圖像屬性面板，選擇設置熱點按鈕，單擊鼠標左像，打開圖像屬性面板，選擇設置熱點按鈕，單擊鼠標左 鍵并拖動，鍵并拖動， 在圖像中設置熱點形狀。在圖像中設置熱點形狀。 DW文字、圖像和多媒體插入 .設置圖文混排和圖像邊距設置圖文混排和圖像邊距 的效果。的效果。 圖像和文字的對齊有：圖像和文字的對齊有： 對齊時要先選擇圖像，對齊時要先選擇圖像， 再選對齊

30、方式。再選對齊方式。 設置圖像邊距，設置圖像邊距， 可以使圖像和相鄰的可以使圖像和相鄰的 文字或其他圖片之間文字或其他圖片之間 有一個間距。有一個間距。 7.制作電子相冊：命令制作電子相冊：命令創(chuàng)建網(wǎng)站相冊創(chuàng)建網(wǎng)站相冊 DW文字、圖像和多媒體插入 本節(jié)習題和作業(yè)本節(jié)習題和作業(yè) 1填空題填空題 （1）在計算機領域中，圖像分為）在計算機領域中，圖像分為_和和_2大大 類。類。 （2）GIF圖像采用的是圖像采用的是_壓縮格式。壓縮格式。 2 選擇題選擇題 （2）網(wǎng)頁通?？梢灾С值膱D像格式有）網(wǎng)頁通?？梢灾С值膱D像格式有_。 AGIF BBMP CAVI DPSD EPNG FJPEG。 DW文字、圖

31、像和多媒體插入 3簡答題簡答題 （1）網(wǎng)頁中常用的圖像格式有哪些？各有什么特點？）網(wǎng)頁中常用的圖像格式有哪些？各有什么特點？ 如果在網(wǎng)頁中添加動畫格式的浮動廣告，采用何種如果在網(wǎng)頁中添加動畫格式的浮動廣告，采用何種 格式？為什么？電子相冊，應該用哪種格式最好？格式？為什么？電子相冊，應該用哪種格式最好？ (2)如何創(chuàng)建鼠標變換圖像和圖像熱點？如何創(chuàng)建鼠標變換圖像和圖像熱點？ 4操作題：操作題： 搜集自己的喜愛的圖片，制作一個電子相冊。搜集自己的喜愛的圖片，制作一個電子相冊。 DW文字、圖像和多媒體插入 上機練習上機練習 練習練習1 1 美化文字格式美化文字格式 制作一個文字網(wǎng)頁，效果如圖制作一

32、個文字網(wǎng)頁，效果如圖1-801-80所示。請按照圖中所示。請按照圖中 的提示信息進行制作。的提示信息進行制作。 設置為標題2 設置為標題3 設置為項目列 表 插入水平線 插入版權符號 圖1-80 美化文字格式 DW文字、圖像和多媒體插入 練習練習2 圖文并茂圖文并茂 制作一個圖文并茂的網(wǎng)頁，效果如圖制作一個圖文并茂的網(wǎng)頁，效果如圖1-81所示。注意這里所示。注意這里 要應用圖像屬性中的左對齊和右對齊項設置圖文并茂的網(wǎng)頁要應用圖像屬性中的左對齊和右對齊項設置圖文并茂的網(wǎng)頁 效果。效果。 圖1-81 圖文并茂 DW文字、圖像和多媒體插入 DW文字、圖像和多媒體插入 3.3.1在網(wǎng)頁中使用視頻和在網(wǎng)

33、頁中使用視頻和flash格式格式 一個優(yōu)秀的網(wǎng)站應該不僅僅是由文字和圖片組成一個優(yōu)秀的網(wǎng)站應該不僅僅是由文字和圖片組成 的，而是動態(tài)的、多媒體。為了增強網(wǎng)頁的表現(xiàn)力，的，而是動態(tài)的、多媒體。為了增強網(wǎng)頁的表現(xiàn)力， 豐富文檔的顯示效果，需用向網(wǎng)頁中插入豐富文檔的顯示效果，需用向網(wǎng)頁中插入Flash動畫、動畫、 Shockwave動畫、動畫、QuickTime 影片文件、影片文件、Java小程小程 序、序、mp3音頻播放插件等多媒體內(nèi)容。音頻播放插件等多媒體內(nèi)容。 1.網(wǎng)頁中可用的視頻文件格式有：網(wǎng)頁中可用的視頻文件格式有：DAT、AVI、RM、 WMV、 MPEG格式、格式、ASF、RMVB等，

34、通過等，通過“插插 入入媒體媒體插件插件”完成這些視頻文件的插入，插入后完成這些視頻文件的插入，插入后 設置設置hidden為為false即可。經(jīng)常使用的視頻文件有即可。經(jīng)常使用的視頻文件有RM 、 MPEG等。等。 DW文字、圖像和多媒體插入 2.常見的常見的flash文件格式：文件格式： flash（.fla格式）格式）:是是flash軟件中創(chuàng)建的各種項目的軟件中創(chuàng)建的各種項目的 源文件。只能在源文件。只能在flash中打開中打開,輸出成輸出成SWF或或SWT文件，文件， 才能在瀏覽器中使用。才能在瀏覽器中使用。 flash影片文件（影片文件（.swf格式）：是經(jīng)過壓縮和優(yōu)化了格式）：是經(jīng)

35、過壓縮和優(yōu)化了 的的.fla格式文件，可在瀏覽器中播放。格式文件，可在瀏覽器中播放。 flash模板文件（模板文件（swt格式）可以讓用戶修改和替換格式）可以讓用戶修改和替換 swf 文件中的信息，使用在文件中的信息，使用在 flash按鈕中，用戶可以按鈕中，用戶可以 使用自己的文字或鏈接修改模板，來創(chuàng)建字定義的使用自己的文字或鏈接修改模板，來創(chuàng)建字定義的 swf 文件并使用。文件并使用。 使用使用flash按鈕和文本：這兩種對象所創(chuàng)建的文件格按鈕和文本：這兩種對象所創(chuàng)建的文件格 式也是式也是.swf，經(jīng)過優(yōu)化的文件的壓縮版本可在瀏覽器，經(jīng)過優(yōu)化的文件的壓縮版本可在瀏覽器 和和dw中播放預覽，

36、也可在中播放預覽，也可在dw中編輯。中編輯。 DW文字、圖像和多媒體插入 flashflash動畫：動畫： FlashFlash動畫以小巧、動感、富有交互動畫以小巧、動感、富有交互 性而風靡網(wǎng)絡。在制作網(wǎng)頁時，將性而風靡網(wǎng)絡。在制作網(wǎng)頁時，將FlashFlash動畫應用動畫應用 到網(wǎng)頁中，能使網(wǎng)頁更具動感，更富有感染力。在到網(wǎng)頁中，能使網(wǎng)頁更具動感，更富有感染力。在 網(wǎng)頁設計中的使用非常普遍。網(wǎng)頁設計中的使用非常普遍。 flash視頻文件（視頻文件（.flv格式）：格式）：Flash視頻是視頻是 Macromedia推出的視頻格式，是一種推出的視頻格式，是一種有經(jīng)過編碼有經(jīng)過編碼 的音頻和視頻

37、數(shù)據(jù)、的音頻和視頻數(shù)據(jù)、適用于網(wǎng)絡應用的媒體格式，適用于網(wǎng)絡應用的媒體格式， 播放品質(zhì)高，同時文件的體積比較小，播放品質(zhì)高，同時文件的體積比較小，通過通過flash player傳送傳送。Flash視頻文件的擴展名為視頻文件的擴展名為.FLV。 DW文字、圖像和多媒體插入 flash元素文件（元素文件（.swc格式）：是一種特殊類型的格式）：是一種特殊類型的flash 文件，通過將此類文件合并到網(wǎng)頁，可以創(chuàng)建豐富的文件，通過將此類文件合并到網(wǎng)頁，可以創(chuàng)建豐富的 internet應用程序；有可自定義的參數(shù)。應用程序；有可自定義的參數(shù)。 flashpaper文件：是經(jīng)過轉(zhuǎn)換軟件文件：是經(jīng)過轉(zhuǎn)換軟件

38、Flash Paper轉(zhuǎn)換后轉(zhuǎn)換后 的文件，該軟件允許把任何的可打印的文檔直接轉(zhuǎn)換成的文件，該軟件允許把任何的可打印的文檔直接轉(zhuǎn)換成 Flash文檔或文檔或PDF文檔，并且保持原來的文件的排版格文檔，并且保持原來的文件的排版格 式。式。 轉(zhuǎn)換后的文件也可以直接插入到網(wǎng)頁中，在網(wǎng)頁轉(zhuǎn)換后的文件也可以直接插入到網(wǎng)頁中，在網(wǎng)頁 中可以直接閱讀、搜索或打印。中可以直接閱讀、搜索或打印。 總結(jié)：總結(jié)：Flash格式雖多，但在網(wǎng)頁中用得較多的還是格式雖多，但在網(wǎng)頁中用得較多的還是.swf 格式。格式。 DW文字、圖像和多媒體插入 3.各種格式各種格式flash的插入和屬性設置的插入和屬性設置 （1）插入和

39、編輯）插入和編輯flash動畫、動畫、 flash影片和影片和 flash模板。模板。 方法有菜單法或按鈕法：方法有菜單法或按鈕法： 插入插入媒體媒體flash設置設置 參數(shù)（參數(shù)（autoplay、loop、volume） 參數(shù)設置：參數(shù)設置：Flash動畫控制參數(shù)的設計稍微有點難度，動畫控制參數(shù)的設計稍微有點難度， 不能在不能在【屬性屬性】面板中直接設置，需要打開面板中直接設置，需要打開【參數(shù)參數(shù)】 對話框進行設置。對話框進行設置。 設置參數(shù)為設置參數(shù)為menu，值為，值為false，作用是讓瀏覽器不，作用是讓瀏覽器不 顯示顯示flash的控制菜單。的控制菜單。 DW文字、圖像和多媒體插入

40、 使使Flash的背景變?yōu)橥该?。的背景變?yōu)橥该鳌?單擊屬性面板中的單擊屬性面板中的“參數(shù)參數(shù)” 按鈕，打開按鈕，打開“參數(shù)參數(shù)”對話框，設置參數(shù)為對話框，設置參數(shù)為wmode， 為為transparent，這樣在任何背景下，這樣在任何背景下，F(xiàn)lash動畫動畫 都能實現(xiàn)透明背景的顯示；都能實現(xiàn)透明背景的顯示； 若其值為若其值為 Window用來在網(wǎng)頁上用影片自己的矩用來在網(wǎng)頁上用影片自己的矩 形窗口來播放應用程序，表明形窗口來播放應用程序，表明flash應用程序與應用程序與 html的層沒有任何交互，并始終位于最頂層；的層沒有任何交互，并始終位于最頂層； 若值為若值為opaque使應用程序隱藏

41、頁面上位于它后面使應用程序隱藏頁面上位于它后面 的所有顯示內(nèi)容。的所有顯示內(nèi)容。 DW文字、圖像和多媒體插入 (2)使用使用flash按鈕（基于按鈕（基于flash 模板的可更新按鈕）：模板的可更新按鈕）： 插入插入媒體媒體flash按鈕按鈕 創(chuàng)建、插入、設置各選項創(chuàng)建、插入、設置各選項 修改修改 播放預覽。播放預覽。 在在“插入插入Flash按鈕按鈕”對話框中對話框中“樣式樣式”用來選擇按用來選擇按 鈕的外觀，鈕的外觀，“按鈕文本按鈕文本”用來輸入按鈕上的文字，用來輸入按鈕上的文字， “字體字體”和和“大小大小”用于設置按鈕上文字的字體和用于設置按鈕上文字的字體和 大小，字號變大，按鈕并不會

42、跟著改變。大小，字號變大，按鈕并不會跟著改變。 DW文字、圖像和多媒體插入 注意：確認注意：確認flash 按鈕和按鈕和html文件放在同一個文件夾下，文件放在同一個文件夾下， 瀏覽器可以辨認文檔相對連接，保存在同一文件夾下可以瀏覽器可以辨認文檔相對連接，保存在同一文件夾下可以 保證這些鏈接工作正常。因為瀏覽器不能在保證這些鏈接工作正常。因為瀏覽器不能在flash影片中影片中 識別站點根目錄相對路徑。識別站點根目錄相對路徑。 DW文字、圖像和多媒體插入 插入 Flash 按鈕 Flash 按鈕可根據(jù)鼠標指針位置和狀態(tài)的不 同，顯示不同的圖像，并且會在鼠標單擊 時執(zhí)行超鏈接跳轉(zhuǎn)的動作。 定位插入

43、點，在“插入”欄的“媒體”面 板中單擊“Flash 按鈕”按鈕，打開“插入 Flash 按鈕”對話框。 DW文字、圖像和多媒體插入 插入插入flash按鈕按鈕效果 DW文字、圖像和多媒體插入 (3)使用使用flash文本文本 用用Flash文本制作導航欄目文本制作導航欄目 插入插入媒體媒體flash文本文本設置參（設置參（autoplay、loop、 volume） DW文字、圖像和多媒體插入 確認確認flash文本和文本和html文件放在同一個文件夾下，瀏覽器文件放在同一個文件夾下，瀏覽器 可以辨認文檔相對連接，保存在同一文件夾下可以保證這可以辨認文檔相對連接，保存在同一文件夾下可以保證這

44、些鏈接工作正常。些鏈接工作正常。 DW文字、圖像和多媒體插入 flash文本效果文本效果 DW文字、圖像和多媒體插入 (4)插入插入flashpaper文件文件 在瀏覽器中打開包含在瀏覽器中打開包含 FlashPaper 文檔的頁面時，瀏覽者文檔的頁面時，瀏覽者 能夠瀏覽能夠瀏覽 FlashPaper 文檔中的所有頁面，而無需加載新文檔中的所有頁面，而無需加載新 的的 Web 頁。也可以搜索、打印和縮放該文檔。頁。也可以搜索、打印和縮放該文檔。 選擇選擇“插入插入”“媒體媒體”“FlashPaper”。 在在“插入插入 FlashPaper”對話框中，輸入寬度和高度（以對話框中，輸入寬度和高度

45、（以 像素為單位）指定像素為單位）指定 FlashPaper 對象在網(wǎng)頁上的尺寸，對象在網(wǎng)頁上的尺寸， FlashPaper 將縮放文檔以適合寬度。將縮放文檔以適合寬度。 單擊單擊“確定確定”在在 頁面中插入文檔。頁面中插入文檔。 由于由于 FlashPaper 文檔是文檔是 Flash 對象，因此頁面上將出現(xiàn)對象，因此頁面上將出現(xiàn) 一個一個 Flash 占位符。占位符。 如果需要，在屬性檢查器中設置其如果需要，在屬性檢查器中設置其 他屬性。他屬性。 DW文字、圖像和多媒體插入 (5)使用使用flash元素（圖像查看器）：元素（圖像查看器）： 插入、編輯插入、編輯 可以用來查看圖像，但圖需要在

46、可以用來查看圖像，但圖需要在flash元素屬性的元素屬性的 imgURLS中設置各個圖像路徑。中設置各個圖像路徑。 具體設置看下頁。具體設置看下頁。 通過該法可以用來制作電子相冊 DW文字、圖像和多媒體插入 DW文字、圖像和多媒體插入 DW文字、圖像和多媒體插入 (6)在網(wǎng)頁中使用在網(wǎng)頁中使用shockwave動畫動畫/影片影片 插入插入媒體媒體shockwave （選擇（選擇*.dcr 或或shockwave小小 游戲）游戲） shockwave是專門的是專門的Flash動畫升級插件，動畫升級插件， shockwave 動畫是用動畫是用Director制作，文件后綴名是制作，文件后綴名是dc

47、r。 播放shockwave動畫需要安裝shockwave player插件 DW文字、圖像和多媒體插入 (7)使用使用flash視頻（視頻（ . Flv，僅，僅8.0 能實現(xiàn)）能實現(xiàn)） 在使用插入前，必須有一個經(jīng)過編碼生成的視頻（在使用插入前，必須有一個經(jīng)過編碼生成的視頻（ . flv） 文件。文件。 主要有以下主要有以下2種視頻形式種視頻形式 a累進式下載視頻：先下載到瀏覽者的電腦上，再進行播累進式下載視頻：先下載到瀏覽者的電腦上，再進行播 放放 b流視頻：經(jīng)過很短的時間緩沖后在網(wǎng)頁上播放。流視頻：經(jīng)過很短的時間緩沖后在網(wǎng)頁上播放。 插入插入媒體媒體flash視頻視頻 DW文字、圖像和多媒

48、體插入 4.控制控制flash動畫動畫 在屬性檢查其中分別給插入到網(wǎng)頁中的在屬性檢查其中分別給插入到網(wǎng)頁中的flash動畫命名，如動畫命名，如 圖命名為圖命名為main。 DW文字、圖像和多媒體插入 在網(wǎng)頁中添加文字在網(wǎng)頁中添加文字“播放播放”和和“停止停止”或類似的按鈕，或類似的按鈕， 分別加上空鏈接（分別加上空鏈接（#），然后添加行為），然后添加行為“控制控制 shockwave或或flash”，在彈出的對話框中選擇要進行控，在彈出的對話框中選擇要進行控 制的制的flash名即可實現(xiàn)。名即可實現(xiàn)。 DW文字、圖像和多媒體插入 3.3.2在網(wǎng)頁中使用音頻在網(wǎng)頁中使用音頻 添加音頻能極好地吸引

49、讀者添加音頻能極好地吸引讀者,烘托良好的藝術氛圍烘托良好的藝術氛圍,但是添加但是添加 音樂后音樂后,會讓網(wǎng)頁文件變大會讓網(wǎng)頁文件變大,增加網(wǎng)頁下載的時間增加網(wǎng)頁下載的時間,所以在添所以在添 加音樂時加音樂時,需要考慮聲音文件的大小、聲音品質(zhì)和在不同瀏需要考慮聲音文件的大小、聲音品質(zhì)和在不同瀏 覽器中的差異覽器中的差異,適時適度的增加。適時適度的增加。 1.在網(wǎng)頁中添加音頻文件的在網(wǎng)頁中添加音頻文件的2種方式：種方式： 鏈接到音頻文件：主要使用超級鏈接實現(xiàn)，提供音樂下載鏈接到音頻文件：主要使用超級鏈接實現(xiàn)，提供音樂下載 或在線播放，但在線打開播放時需要讀者安裝好相應的播或在線播放，但在線打開播放

50、時需要讀者安裝好相應的播 放器。放器。 嵌入聲音文件：可以設置網(wǎng)頁的背景音樂嵌入聲音文件：可以設置網(wǎng)頁的背景音樂,也可以提供音樂也可以提供音樂 在線播放。但在線播放時，需要瀏覽器安裝相應的插件，在線播放。但在線播放時，需要瀏覽器安裝相應的插件， 可以顯示其外觀及進行相應的播放、暫停和音量控制。本可以顯示其外觀及進行相應的播放、暫停和音量控制。本 章著重講解嵌入聲音文件。章著重講解嵌入聲音文件。 DW文字、圖像和多媒體插入 2.網(wǎng)頁中添加背景音樂的文件格式有網(wǎng)頁中添加背景音樂的文件格式有:mid、wmv、mp3、 wav等。等。 umid/midi格式：音質(zhì)好、文件小、反應快、可重復格式：音質(zhì)好

51、、文件小、反應快、可重復 播放、被多數(shù)瀏覽器支持，是網(wǎng)頁中默認的背景音樂播放、被多數(shù)瀏覽器支持，是網(wǎng)頁中默認的背景音樂 格式，也是設計者的首選。但錄制要求較高，且依賴格式，也是設計者的首選。但錄制要求較高，且依賴 于聲卡，多用于器樂。于聲卡，多用于器樂。 uMP3壓縮率最高、音質(zhì)最好。壓縮率最高、音質(zhì)最好。 uWMV： uwav和和aif（aiff）文件：二者相似：音質(zhì)好、被多數(shù)）文件：二者相似：音質(zhì)好、被多數(shù) 瀏覽器支持，錄制。瀏覽器支持，錄制。 DW文字、圖像和多媒體插入 3.嵌入聲音文件的幾種方式和操作思路嵌入聲音文件的幾種方式和操作思路 方法方法1：插入：插入媒體媒體插件插件 將鼠標定位到需要插入音頻文件的位置，執(zhí)行插入將鼠標定位到需要插入音頻文件的位置，執(zhí)行插入媒媒 體體插件插件-選擇一個音頻文件選擇一個音頻文件設置（設置（hidden、loop、 autostart等）參數(shù)。等）參數(shù)。 如果訪問者安裝有能播放相應格式如果訪問者安裝有能播放相應格式 文件的插件（例如文件的插件（例如 RealMedia 或或