【正文】 ? 通過本章的學(xué)習(xí)并結(jié)合與本章內(nèi)容相關(guān)的實訓(xùn)練習(xí)，學(xué)生應(yīng)能制作簡單的 Web動畫，能運用圖像翻轉(zhuǎn)技術(shù)制作不同形式的 Web按鈕，掌握圖像切片的基本方法、理解圖像優(yōu)化的意義和優(yōu)化參數(shù)的設(shè)置方法。如圖 像映射工具和 Web內(nèi)容調(diào)板定義的一個圖像映射。 ? 要想把圖像內(nèi)的某個區(qū)域定義為一個圖像映射，可在工具調(diào)板中選擇一種圖像映射工具，在圖像中選取所要創(chuàng)建圖像映射的區(qū)域，在圖像映射調(diào)板中命名該映射，并給它分配一個 URL。用戶可以在一幅圖像內(nèi)設(shè)立多個“熱點”區(qū)域。 ⑩ 單擊圖像時瀏覽器中顯示為 Click的狀態(tài)，如圖 示。 ⑧ 將鼠標(biāo)放置于圖像上面時，瀏覽器中顯示為 Over的狀態(tài)，如圖 。 ⑦ 設(shè)置完成后，單擊工具箱中的“”圖標(biāo)，可以在瀏覽器中預(yù)覽圖像的滾動效果。在對話框中選擇“點按”選項，在圖層調(diào)板中顯示圖層 1（同時隱藏圖層 2），作為 Click時的頁面顯示。 ④ 再次單擊 Web 內(nèi)容調(diào)板中的“”按鈕，在 Web 內(nèi)容調(diào)板上出現(xiàn) Down狀態(tài)，在圖層調(diào)板中顯示圖層 2（同時隱藏圖層 3），作為 Down時的頁面顯示，如圖 。 ② 此時在 Web內(nèi)容調(diào)板中只有 Normal（正常）狀態(tài)，在圖層調(diào)板中隱藏圖層 3，得到 Normal狀態(tài)，如圖。 ? Out：鼠標(biāo)移動到圖像之外時的頁面狀態(tài)。 ? Down：鼠標(biāo)按下時的頁面狀態(tài)。翻轉(zhuǎn)可以給網(wǎng)頁增添交互性。 76 目錄 圖 像 翻 轉(zhuǎn) ? 在 ImageReady CS2中，設(shè)置好圖像切片或者映射圖像時，可以為這個區(qū)域或者整個圖像加入翻轉(zhuǎn)圖像。 73 目錄 圖 把圖像切片轉(zhuǎn)換成表 圖 使用彈出菜單劃分切片 74 目錄 圖 將一個切片分割成六個相等的子切片 75 目錄 在切片內(nèi)創(chuàng)建表 ? 同樣，可以把多個切片編組成一個單獨的表。在 Web內(nèi)容調(diào)板內(nèi)的切片下找到剛才創(chuàng)建的表，右擊該子切片，從彈出的菜單中選擇“劃分切片”選項，在彈出的對話框中，在水平和垂直方向上同時分割該切片，如圖 ，該切片被均分成六個小切片。要在切片內(nèi)創(chuàng)建表，圖像必須首先被分解成至少兩個切片，用切片選擇工具或在通過 Web內(nèi)容調(diào)板選中需要被切割成更小切片的切片。 72 目錄 在切片內(nèi)創(chuàng)建表 ? 在 ImageReady中可以在切片內(nèi)創(chuàng)建表。 71 目錄 切片鏈接 ? 用切片工具切分好圖片之后，用戶可以將每個切片制作成超鏈接，并把它鏈接到另一個 Web頁面或 URL。改變鏈接組中任何一個切片的優(yōu)化設(shè)置，鏈接組中的其他切片共享同樣的設(shè)置。 ? 切片區(qū)域設(shè)置好后，可以對切片進行鏈接和對齊操作。用切片選擇工具選中所要修改的切片，用鼠標(biāo)拉動邊上的控制點，可以改變切片的大?。话醋∈髽?biāo)拖動則可將切片移動到新位置。執(zhí)行“選擇” → “從選區(qū)中創(chuàng)建切片”命令，則在選區(qū)周圍會自動創(chuàng)建切片，如圖 。 66 目錄 圖 從參考線中創(chuàng)建的切片 67 目錄 創(chuàng)建切片 （ 2）從圖層中創(chuàng)建切片 ? 在圖層調(diào)板中選擇新建一圖層，在該圖層上繪制一橢圓，執(zhí)行“圖層” → “基于新建圖層的切片”命令，結(jié)果如圖 ，“”圖標(biāo)表示此切片是一個圖層切片。使工作窗口顯示標(biāo)尺，將鼠標(biāo)移到標(biāo)尺上，按下左鍵并拖動，這樣就可以拉出“參考線”。 65 目錄 創(chuàng)建切片 （ 1）從參考線中創(chuàng)建切片 ? 在 ImageReady 中，可以把參考線之間的所有區(qū)域創(chuàng)建成用戶切片。在每次添加或編輯用戶切片或圖層切片時，都會重新生成自動切片，自動切片是不能被編輯的。 64 目錄 切片類型 ? 使用切片工具創(chuàng)建的切片稱為“用戶切片”，從一個圖層創(chuàng)建的切片稱為“圖層切片”。 ? 在 ImageReady 中可以將圖像分割成獨立的切片，用不同的網(wǎng)頁圖像格式優(yōu)化每個切片。將圖像優(yōu)化成 PNG8格式的步驟和各選項都與建立 GIF格式優(yōu)化圖像相似。 ③ 設(shè)置完成后選擇“文件” → “存儲優(yōu)化結(jié)果”命令，將圖像保存為“ .GIF”格式。將圖像優(yōu)化成 GIF格式的操作如下： ① 打開源圖像，在優(yōu)化調(diào)板中選擇 GIF。如圖 ，一張 ，可以很方便地在網(wǎng)絡(luò)中傳輸。 ④ 選擇連續(xù)選項，使該圖像在瀏覽器中逐步顯示。高品質(zhì)的圖像可以保存更多的色彩，但會導(dǎo)致文件數(shù)據(jù)量增大。 59 目錄 優(yōu)化 JPEG格式 將圖像優(yōu)化成 JPEG格式的過程如下： ① 打開源圖像，調(diào)出優(yōu)化調(diào)板，如圖 。 ? PNG8格式支持 8位彩色圖像，采用無損壓縮，壓縮率很高，比 GIF格式高出 10％～ 30％。 ? GIF格式支持 8位彩色圖像，可以用來創(chuàng)建動態(tài)圖像，采用無損壓縮法，壓縮時不會產(chǎn)生數(shù)據(jù)丟失。一般來說像照片這種具有連續(xù)色彩的圖像應(yīng)當(dāng)使用 JPEG格式，其他圖像可使用 GIF或PNG8文件。 56 目錄 優(yōu)化 Web圖像 選取優(yōu)化的文件格式 優(yōu)化 JPEG格式 優(yōu)化 GIF和 PNG8格式 57 目錄 選取優(yōu)化的文件格式 ? 在 Web上使用的圖像主要有 JPEG、 PNG和 GIF三種格式，而每一種圖像格式在色彩數(shù)量、壓縮質(zhì)量和處理方式等許多方面各不相同，由此直接影響到文件大小、傳輸速度和圖像質(zhì)量。 ? 啟用動態(tài)文本：如果需要 SWF文件含有動態(tài)變量文本則勾選該選項。 ? SWF背景顏色：用來指定動畫的背景。用戶可根據(jù)自己的需要進行設(shè)置，然后單擊“確定”，可將該動畫以“ .SWF” 格式保存。 ④ 保存 SWF動畫。單擊動畫調(diào)板右上角的右向箭頭，在彈出的菜單中選擇“選擇全部幀”命令，選中全部幀。 添加了黃色到綠色變化的過渡幀 52 目錄 創(chuàng)建 SWF動畫 ? 用同樣的方法添加綠色到紅色、紅色到藍色、藍色到黃色變化的過渡幀，效果見 圖 。在對話框中輸入“要添加的數(shù)”為 3，其余默認。 圖 每幀分別顯示一個圖層的效果 51 目錄 創(chuàng)建 SWF動畫 ② 添加過渡幀。 50 目錄 創(chuàng)建 SWF動畫 ? 過渡幀效果的設(shè)置及 SWF格式文件的導(dǎo)出實例： ① 打開“旋轉(zhuǎn)的彩球”，該圖像的四個圖