初中九年級信息技術(shù)制作彈出式的菜單

制作彈出式的菜單

Dreamweaver的時間軸功能可以輕松地讓網(wǎng)頁活動起來，從而使網(wǎng)頁極富動感。時間軸通過在不同的時間內(nèi)改變層的位置、大小、可見性、疊放次序等來創(chuàng)建動畫。在本節(jié)中，我們將時間軸同層緊密結(jié)合在一起來完成動畫效果。在運用時間軸的同時，在可以觸發(fā)許多行為，完成更復(fù)雜的網(wǎng)頁動畫。圖示網(wǎng)頁的左側(cè)是一排彈出式菜單，當(dāng)鼠標移動到每個菜單項上時，右邊就會彈出該菜單項的內(nèi)容。菜單的主菜單項是使用拼圖方法制作完成的，再把同每個主菜單項對應(yīng)的子菜單放置在不同的層中。一、制作靜態(tài)的菜單項1.拼接網(wǎng)頁左側(cè)的圖片內(nèi)容左側(cè)的菜單內(nèi)容實際上是一個大的圖片，為了與網(wǎng)頁上部的內(nèi)容相配合，使用了圖片拼接的方法來完成。做一做拼接網(wǎng)頁左側(cè)的圖片內(nèi)容。第一步：打開“晉陽書屋”網(wǎng)頁，在下拉式菜單的導(dǎo)航欄下插入一個3×2的表格，設(shè)置表格屬性如圖所示。第二步：合并、拆分單元格，調(diào)整表格到如圖所示的外形。第三步：在表格中插入如圖所示的圖片，設(shè)置第2列的第1、2個單元格的背景色分別為#669999和#99CCCC。操作步驟本小節(jié)使用表格制作了無縫的拼接圖形。在制作大面積的拼接圖形時，如果圖形中有大面積單色部分，應(yīng)該使用顏色來填充表格單元格，而不要使用單色的圖片，這樣會加快拼接后圖形的下載速度。說明在彈出菜單右邊的區(qū)域分別用來存放菜單中各按鈕的介紹。為了讓不同按鈕的提示內(nèi)容互不干擾，并且方便以后制作動畫，應(yīng)使用層嵌套的方法，每個子層存放一個按鈕的內(nèi)容介紹。做一做使用層嵌套的方法制作嵌套層。2.制作嵌套層第一步：選擇“插入”→“層”菜單命令，在頁面中插入一個層，取名為Layer0。第二步：移動鼠標指針到Layer0層中，選擇“插入”→“層”菜單命令，在層中再插入一個，取名為Layer1。第三步：選中Layer1層，在“屬性”面板中設(shè)置Layer1的“左”、“上”值為0，“背景圖片”為bookbackground.gif，改變Layer1到適當(dāng)大小。第四步：在Layer1中插入一個3×3的表格，設(shè)置表格屬性如圖所示。操作步驟第五步：分別合并表格第1、3行的所有單元格，在表格中插入如圖所示的文字和圖片。第六步：重復(fù)第二至第五步的操作，在Layer0中再插入層Layer2~Layer5，并在每一個層中插入相應(yīng)的文字和圖片。第七步：設(shè)置Layer2~Layer5層為不可見，結(jié)果如圖所示。時間軸動畫只能移動層的位置，為了使子菜單中的內(nèi)容“彈出”動態(tài)效果，所以我們把要移動的文字插入層中。在制作嵌套層中的子層時，應(yīng)注意使每個子層的大小、位置相同，設(shè)置它們相對于父層的“左”、“上”坐標為0的目的是使父層與子層的左、上邊界一致，便于調(diào)整畫層的位置。說明二、使菜單彈出來下面結(jié)合時間軸動畫和行為，使制作的菜單所包含的內(nèi)容“動”起來。1.制作時間軸動畫做一做用時間軸來制作動畫，使Layer0層從頁面的左側(cè)運動到頁面的中間。第一步：選擇“窗口”→“時間軸”菜單命令，打開“時間軸”面板。第二步：選擇層Layer1，單擊鼠標右鍵，在彈出的菜單中選擇“添加到時間軸”下單命令，這時“時間軸”面板的第1個通道將出現(xiàn)一個紫色條，條中顯示了層的名稱，如圖所示。操作步驟第三步：單擊紫色條右邊的小圓點，把紅色的放音磁頭移動到最后1幀。第四步：單擊紫色條左邊的小圓點，把紅色的放音磁頭移動到第1幀。第五步：選中層Layer0，在“屬性”面板中設(shè)置“左”為-320px，“Z軸”為-1。第六步：用鼠標連續(xù)單擊**按鈕可以看到動畫的效果。按鈕和按鈕：單擊按鈕將后退或前進1幀。第一，“時間軸”面板的最大特點是中間有一條橫向的時間軸，上面標有均勻的刻度，單位是“幀”。紅色的矩形塊稱為放音磁頭，它所在的部位代表當(dāng)前幀。第二，“時間軸”面板上端是一些動畫屬性設(shè)置、播放按鈕。各按鈕的功能如下：說明欄：設(shè)置動畫的名稱。按鈕：返回到動畫的第一幀?！癋ps”欄：設(shè)置動畫的播放速度，單位是幀/秒，默認的值是15。“自動播放”復(fù)選框：設(shè)置是否在頁面載入時就開始播放動畫?！把h(huán)”復(fù)選框：設(shè)置是否循環(huán)播放。頁面左頁是一幅完整的圖形，上面的文字能否做鏈接呢？其實很簡單，只要在圖形中創(chuàng)建一些熱區(qū)，并在每個熱區(qū)上建立相應(yīng)的鏈接就行了。創(chuàng)建圖形熱區(qū)鏈接。做一做2.創(chuàng)建圖形熱區(qū)鏈接第一步：選中頁面左邊的圖片，單擊“屬性”面板中的“矩形熱點工具”按鈕，在圖中的“新書快訊”上面一個大小合適的矩形正好蓋住圖中的文字，如圖所示。第二步：在“屬性”面板中的“地圖”欄輸入“map1”，作為該熱區(qū)的名稱。第三步：選中熱區(qū)，“屬性”面板中顯示如圖所示的熱區(qū)屬性。第四步：在“鏈接”框中輸入“#”表示空鏈接，在“替代”框中輸入該熱區(qū)的引導(dǎo)文字。第五步：分別在圖片中的“名車欣賞”、“暢銷書屋”、“網(wǎng)友原創(chuàng)”等文字上創(chuàng)建熱區(qū)鏈接。操作步驟根據(jù)需要建立熱區(qū)的圖形形狀，可以分別選擇矩形、圓形和多邊形3種熱區(qū)工具創(chuàng)建不同形狀的熱區(qū)。熱區(qū)屬性中的“替代”可以在鼠標移動到熱區(qū)上時，顯示關(guān)于該熱區(qū)的信息，一般用于顯示提示信息或?qū)D的注釋等。說明3.添加行為把行為和剛才制作的時間軸動畫結(jié)合起來，完成彈出式菜單的制作過程。做一做第一步：選擇“修改”→“頁面屬性”菜單命令，在彈出的“頁面屬性”對話框中，設(shè)置“左邊界”為0。第二步：選擇“窗口”→“行為”菜單命令，打開“行為”面板。第三步：選中“新書快訊”上的熱區(qū)，單擊“行為”面板中的按鈕，選擇“顯示-隱藏層”菜單命令，彈出如圖所示的“顯示-隱藏層”對話框。操作步驟第四步：設(shè)置層Layer1顯示，層Layer2~Layer5隱藏，單擊“確定”按鈕，完成給第一個熱區(qū)添加了一個通過onClick事件觸發(fā)的行為。第五步：單擊“行為”面板中的按鈕，選擇“時間軸”→“轉(zhuǎn)到時間軸幀”菜單命令，彈出如圖所示的“轉(zhuǎn)到時間軸幀”對話框。第六步：在“時間軸”下拉列表框中選擇“Timeline1”，“前往幀”設(shè)置為1，單擊“確定”按鈕。第七步：單擊“行為”面板中的按鈕，選擇“時間軸”→“播放時間軸”菜單命令，彈出如圖所示的“播放時間軸”對話框。第八步：在“播放時間軸”的下拉列表框中選擇“Timelilne1”，單擊“確定”按鈕，到此就制作完成了“新書快訊”的彈出動畫。第九步：重復(fù)第三至第八步的操作，給第2個熱區(qū)添加通過onClick時間觸發(fā)的上述3個動作，在添加“顯示-隱藏層”動作時，設(shè)置層Layer2顯示，其他層隱藏，時間軸動作的設(shè)置與第1個熱區(qū)相同。第十步：給剩余的3個熱區(qū)添加上述的行為，按F12預(yù)覽動畫的效果。設(shè)置頁面左邊距為0的目的，是在播放動畫時，不會讓頁面左邊的空隙破壞動畫的效果，當(dāng)然也可以在頁面左邊插入一個不透明的層，使它疊放在layer1上面來遮擋lay