創(chuàng)建頁面的熱點區(qū)域和切片

創(chuàng)建頁面的熱點區(qū)域和切片第1頁，課件共28頁，創(chuàng)作于2023年2月教學重點掌握切割工具的使用掌握圖像的輸出與優(yōu)化掌握圖像熱區(qū)的創(chuàng)建

第2頁，課件共28頁，創(chuàng)作于2023年2月教學目標和基本要求_________________________________________________________________________________________________________教學時間：本章共分_______課時教學方法案例教學

多媒體教學

理論面授教學素材課程范例文件：sample\第14章\練習文件：exercise\第14章\第3頁，課件共28頁，創(chuàng)作于2023年2月本章各節(jié)課時分配及鏈接14.1任務56切割公司首頁——（）課時14.2任務57為圖像添加熱點——（）課時14.3綜合實訓——使用熱點繪制網站封面頁面——（）課時本章小結思考與練習第4頁，課件共28頁，創(chuàng)作于2023年2月14.1任務56切割公司首頁

如果網頁上的圖片較大，瀏覽器下載整個圖片的話需要花很長的時間。切片的使用，使得整個圖片可以分為多個不同的小圖片分開下載，這樣下載的時間就大大縮短了。在目前互聯(lián)網帶寬還受到條件限制的情況下，運用切片來減少網頁下載時間而又不影響圖片的效果。第5頁，課件共28頁，創(chuàng)作于2023年2月14.1.1簡單講評切片就是將一幅大圖像分割為一些小的圖像切片，然后在網頁中通過沒有間距和寬度的表格重新將這些小的圖像沒有縫隙的拼接起來，成為一幅完整的圖像。這樣做可以減小圖像的大小，減少網頁的下載時間，還能將圖像的一些區(qū)域用html來代替。第6頁，課件共28頁，創(chuàng)作于2023年2月14.1.2核心知識——切片工具的使用切片是Fireworks中十分有特色的一個部分。切片將圖像分割成多個小部分、并將每部分導出為單獨的文件。第7頁，課件共28頁，創(chuàng)作于2023年2月14.1.3實際操作步驟2選擇工具箱中“切片”工具。第8頁，課件共28頁，創(chuàng)作于2023年2月步驟3將光標置于要創(chuàng)建切片的位置，按住鼠標左鍵拖動，繪制切片。第9頁，課件共28頁，創(chuàng)作于2023年2月步驟5選擇“窗口>優(yōu)化”命令，打開“優(yōu)化”面板。第10頁，課件共28頁，創(chuàng)作于2023年2月步驟6在“優(yōu)化”面板中選擇文件格式，如圖14-9所示，此時應根據(jù)文件類型選擇不同的文件格式。第11頁，課件共28頁，創(chuàng)作于2023年2月步驟8選擇“文件>導出”命令，彈出“導出”對話框，在“導出”右邊的下拉列表中選擇HTML和圖像。第12頁，課件共28頁，創(chuàng)作于2023年2月14.2任務57為圖像添加熱點有時候在頁面上顯示一幅較大的完整圖像同時將整幅圖像中的不同區(qū)域分別映射到不同的鏈接上，這時使用傳統(tǒng)的超鏈接設置方法就無法滿足要求。這時可以在圖像上創(chuàng)建熱點，之后將熱點分別同不同的鏈接相關聯(lián)即可實現(xiàn)。第13頁，課件共28頁，創(chuàng)作于2023年2月

14.2.1簡單講評

一般來說，一幅圖像只能有一個超級鏈接目標，同一個圖像的不同部分也可以鏈接到不同的文檔，這就是熱點鏈接。要使圖像特定部分成為超級鏈接，就要在圖像中設置“熱點”?？梢栽谝粋€較大的圖像上建立多個熱點區(qū)域，以鏈接到文本文件、圖像等。第14頁，課件共28頁，創(chuàng)作于2023年2月14.2.2核心知識--圖像熱點工具的使用

從工具箱中的“Web”部分選擇“矩形熱點”工具或“圓形熱點”工具，拖動熱點工具，在圖形的某個區(qū)域上繪制熱點。按住Alt鍵可從中心點開始繪制。第15頁，課件共28頁，創(chuàng)作于2023年2月14.2.3實際操作步驟2選擇工具箱中的“矩形熱點”工具。第16頁，課件共28頁，創(chuàng)作于2023年2月步驟3在要創(chuàng)建熱點的位置按住鼠標左鍵拖動形成一個矩形選區(qū)。第17頁，課件共28頁，創(chuàng)作于2023年2月步驟4拖動到合適的大小，釋放鼠標。第18頁，課件共28頁，創(chuàng)作于2023年2月步驟5在熱點屬性面板中出現(xiàn)熱點屬性設置選項。在文本框中輸入URL地址，即單擊該熱點就會鏈接到該URL地址。在“替代”文本框中輸入對該熱點鏈接的說明。第19頁，課件共28頁，創(chuàng)作于2023年2月14.3綜合實訓——使用熱點繪制網站封面頁面熱點的作用是當光標經過熱點區(qū)時，指針會變?yōu)槭中?，單擊熱點會打開相關的鏈接網頁。這樣的效果在瀏覽網頁時是十分常見的。下面使用熱點繪制網站封面頁。第20頁，課件共28頁，創(chuàng)作于2023年2月步驟2單擊工具箱中的“文本”工具，添加文本“爵士島咖啡，傳承歐洲咖啡文化的精髓”，設置字體為隸書，“大小”為25，填充顏色為#FF6600。第21頁，課件共28頁，創(chuàng)作于2023年2月步驟3單擊工具箱中的“矩形熱點”工具，繪制一個熱點。第22頁，課件共28頁，創(chuàng)作于2023年2月步驟4選中熱點區(qū)域，在屬性面板中出現(xiàn)熱點屬性設置選項。第23頁，課件共28頁，創(chuàng)作于2023年2月步驟8分別在熱點屬性選項中的“替代”文本框中輸入“合作流程”、“市場定位”、“加盟爵士島”、“在線申請”，并且添加上鏈接。第24頁，課件共28頁，創(chuàng)作于2023年2月本

章

小

結在網頁設計中熱點被廣泛的使用，熱點是圖像上帶有超級鏈接的一塊區(qū)域，同一幅圖上可以有幾個熱點鏈接到不同的地址。切片可以將一幅大的圖片分割開來，這樣可以減小圖像的大小，并且能創(chuàng)造交互的效果，還能將圖像的一些區(qū)域用html來代替。第25頁，課件共28頁，創(chuàng)作于2023年2月思考與練習1．填空題

（1）在Fireworks中，為圖像設置鏈接區(qū)域是靠________或________工具來完成。（2）在目前互聯(lián)網帶寬還受到條件限制的情況下，運用________來減少網頁下載時間而又不影響圖片的效果。（3）如果切片大小不合適，可以使用工具箱中的________工具拖動切片引導線來調整切片大小。第26頁，課件共28頁，創(chuàng)作于2023年2月2．判斷題（1）如果網頁上的圖片較大，瀏覽器下載整個圖片的話需要花很長的時間。熱點的使用，使得整個圖片可以分為多個不同的小圖片分開下載，這樣下載的時間就大大縮短了。（）（2）使用工具箱中的“指針”工具，可以移動圖像上的切片對象。（）（3）在源圖形中標識出可作為導航點的區(qū)域后