網(wǎng)頁(yè)設(shè)計(jì)與制作 第13章 網(wǎng)頁(yè)按鈕和導(dǎo)航制作

1、第章表單和行為第章表單和行為網(wǎng)頁(yè)設(shè)計(jì)與制作北京師范大學(xué)出版北京師范大學(xué)出版網(wǎng)頁(yè)設(shè)計(jì)與制作第第13章網(wǎng)頁(yè)按鈕和導(dǎo)航制作章網(wǎng)頁(yè)按鈕和導(dǎo)航制作 第13章網(wǎng)頁(yè)按鈕和導(dǎo)航制作 13.1 切片的制作切片的制作 13.2 熱區(qū)的制作熱區(qū)的制作 13.3 制作按鈕制作按鈕 13.4 制作導(dǎo)航條制作導(dǎo)航條 13.5 行為行為 13.6 彈出式菜單彈出式菜單網(wǎng)頁(yè)設(shè)計(jì)與制作網(wǎng)頁(yè)設(shè)計(jì)與制作13.1切片的制作 1、切片工具、切片工具 “切片”是Fireworks最先提出來(lái)的概念，當(dāng)網(wǎng)絡(luò)速度不很理想而圖片又稍大時(shí)，設(shè)計(jì)者通常把一張大圖片分成小圖片放在表格中，使得圖片的顯示速度加快，但是這項(xiàng)工作費(fèi)時(shí)費(fèi)力，于是Firewor

2、ks提供了可視化切割圖片的工具，切片工具可以將Fireworks文檔分割成多個(gè)較小部分，并可以將每部分作為單獨(dú)的文件導(dǎo)出 。 2、切片類別、切片類別 Fireworks的切片工具可以分別創(chuàng)建“矩形切片”和“多邊形切片”。13.1切片的制作 3、切片相關(guān)名詞、切片相關(guān)名詞切片對(duì)象切片對(duì)象：利用切片工具創(chuàng)建的矩形區(qū)域被半透明的綠色所覆蓋，我們稱之為切片對(duì)象。分割線分割線：Fireworks cs4根據(jù)切片對(duì)象的位置對(duì)圖像進(jìn)行分割，分割線呈紅色，它標(biāo)記出了在文件導(dǎo)出時(shí)生成的切片圖像區(qū)域。切片格式切片格式：在切片中心有一個(gè)小圖標(biāo)，它表示該切片處于被選中狀態(tài)，還有“前景圖像：JPEG”的字樣，它表示切片

3、的格式為JPEG格式。切片對(duì)象的位置：創(chuàng)建好的切片對(duì)象放置在網(wǎng)頁(yè)層 。13.1切片的制作 4、切片的導(dǎo)出 切片制作完成以后，需要導(dǎo)出保存為“html文件格式”才 可以在網(wǎng)頁(yè)中使用 13.2 熱區(qū)的制作 1、熱區(qū)的概念、熱區(qū)的概念 熱區(qū)（Hotspot）有時(shí)又稱之為熱點(diǎn)，是圖像上帶有超鏈接的一塊區(qū)域，它可以呈矩形、圓形、甚至還可以是多邊形。文本和圖像都可以在網(wǎng)頁(yè)上創(chuàng)建超級(jí)鏈接。一般情況下一個(gè)圖像只鏈接到一個(gè)目標(biāo)。但是有時(shí)候一幅較大的圖片上有不同的小區(qū)域，不同的小區(qū)域的圖片要相應(yīng)地鏈接到不同的目標(biāo)上去，這樣就需要利用到熱區(qū)的功能。我們可以在這個(gè)大的圖像上相應(yīng)的部分繪制多個(gè)熱區(qū)，然后將這些熱區(qū)分別鏈

4、接到不同的目標(biāo)文件之中。和文本超鏈接的情況一樣，當(dāng)瀏覽者將鼠標(biāo)移動(dòng)到熱點(diǎn)上時(shí)，鼠標(biāo)會(huì)變成手形。13.2熱區(qū)的制作 2、熱區(qū)工具Fireworks cs4的熱區(qū)工具，可以分別創(chuàng)建“矩形熱點(diǎn)”、“圓形熱點(diǎn)”和“多邊形熱點(diǎn)”。熱區(qū)創(chuàng)建好后和切片一樣可以編輯、修改和刪除，并需要添加超鏈接地址，來(lái)實(shí)現(xiàn)圖像映射功能。 1、按鈕概念、按鈕概念 按鈕是網(wǎng)頁(yè)中最常用的元素，是實(shí)現(xiàn)交互的重要手段，它的最大作用就是引導(dǎo)用戶鏈接到不同的地址，從而加強(qiáng)人機(jī)交互的功能，進(jìn)而豐富網(wǎng)頁(yè)的表現(xiàn)力。13.3制作網(wǎng)頁(yè)按鈕13.3制作網(wǎng)頁(yè)按鈕 2、創(chuàng)建按鈕、創(chuàng)建按鈕 在Fireworks cs4中，用“按鈕編輯器”來(lái)創(chuàng)建按鈕。 按鈕

5、創(chuàng)建的過(guò)程有5種狀態(tài)：彈起、滑過(guò)、按下、按下時(shí)滑過(guò)和活動(dòng)區(qū)域，因此，按鈕需要由多幀畫面來(lái)完成。 按鈕添加好后，和切片一樣，也需要添加超鏈接。13.4制作導(dǎo)航條 1、導(dǎo)航條概念、導(dǎo)航條概念 導(dǎo)航條是指一組分別指向不同鏈接地址的按鈕，用于在一系列具有相同級(jí)別的網(wǎng)頁(yè)間進(jìn)行跳轉(zhuǎn)。 2、導(dǎo)航條制作方法、導(dǎo)航條制作方法 將多個(gè)按鈕組合起來(lái)，就可以構(gòu)建成為導(dǎo)航條。也可以利用Fireworks cs4自帶的“標(biāo)簽”功能來(lái)創(chuàng)建導(dǎo)航條 。13.5、行為 1、簡(jiǎn)單行為、簡(jiǎn)單行為 “簡(jiǎn)單變換圖像”是指是指通過(guò)將“狀態(tài) 1”用作“彈起”狀態(tài)以及將“狀態(tài) 2”用作“滑過(guò)”狀態(tài)來(lái)向所選切片添加變換圖像行為。選擇此行為后，需

6、要使用同一切片在狀態(tài) 2 中創(chuàng)建一個(gè)圖像以創(chuàng)建“滑過(guò)”狀態(tài)。 “簡(jiǎn)單變換圖像”選項(xiàng)實(shí)際上是包含“交換圖像”和“恢復(fù)交換圖像”行為的行為組。 13.5、行為 2、設(shè)置導(dǎo)航欄圖像、設(shè)置導(dǎo)航欄圖像 “設(shè)置導(dǎo)航欄圖像”實(shí)際上是一個(gè)包含“滑過(guò)導(dǎo)航欄”、“按下導(dǎo)航欄”和“恢復(fù)導(dǎo)航欄”等行為的行為組。作為導(dǎo)航欄一部分的每個(gè)切片都必須具有此行為。 當(dāng)使用按鈕編輯器創(chuàng)建具有兩種狀態(tài)的按鈕時(shí)，會(huì)默認(rèn)為其切片指定簡(jiǎn)單變換圖像行為；當(dāng)創(chuàng)建具有三種或四種狀態(tài)的按鈕時(shí)，會(huì)默認(rèn)為其切片指定“設(shè)置導(dǎo)航欄圖像”行為。 13.6、彈出式菜單 彈出式菜單可以節(jié)省頁(yè)面空間，當(dāng)訪問(wèn)者將鼠標(biāo)指針移到含有彈出菜單的導(dǎo)航按鈕上時(shí)，將彈出相應(yīng)的下級(jí)子菜單。 在Fire