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

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

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

多媒體教學(xué)

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

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

14.2.1簡(jiǎn)單講評(píng)

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

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

章

小

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

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