Dreamweaver制作復(fù)雜交換圖像_Dreamweaver教程
我們要制作出一列7個(gè)按鈕的圖片,并且在這一列的按鈕圖片的前面加上一個(gè)指針,我
們要實(shí)現(xiàn)的效果是當(dāng)我們在將鼠標(biāo)移向某一個(gè)按鈕圖片的時(shí)候,這個(gè)按鈕上面的文字變換顏色。并且指針指向這張圖片(效果如圖1所示)。
圖1
制作原理
交換圖像的制作原理是應(yīng)用到Dreamweaver中的行為面板上的翻轉(zhuǎn)圖像(Swap image)這一個(gè)工具。將它設(shè)置成為當(dāng)產(chǎn)生鼠標(biāo)懸停在某一個(gè)按鈕圖片的動作的時(shí)候,讓按鈕本身實(shí)現(xiàn)一個(gè)圖像的交換(交換成為黃色文字的圖片),與此同時(shí)設(shè)計(jì)指針圖像的交換(交換成為指針指向當(dāng)前按鈕的指針圖片),以實(shí)現(xiàn)上述效果的實(shí)現(xiàn)。
^-^:其實(shí)網(wǎng)頁上的一些東西看起來似乎很神秘,可究其根源它也只不過是幾張圖片或幾個(gè)圖層的簡單變化而已。
制作材料
這里演示的是7張按鈕圖片的翻轉(zhuǎn),所以,我們需要14張按鈕圖片和7張指針圖片共21張圖片的制作來實(shí)現(xiàn)所示效果。其中7張前臺按鈕圖片分別命名為B1-1~B1-7,7張后臺按鈕圖片分別命名為B2-1~B2-7,其中7張指針圖片分別命名為Z1~Z7,它們的指針分別指向第一到第七個(gè)按鈕。您可以用Fireworks等圖片制作軟件來制作按鈕圖片。
制作方法
1、建立網(wǎng)頁文件。
2、插入一個(gè)7乘2的表格,并且把左面的一列表格合并,用來插入指針圖片。而右面的七個(gè)表格用來插入按鈕圖片。
3、在左面的表格中插入第一張指針圖片Z1,在右面的7行單元格中分別插入藍(lán)色的前臺按鈕B1-1~B1-7(效果如圖2所示)。
圖2
4、點(diǎn)擊“窗口(Windows)→行為”,調(diào)出行為面板。
5、選中第一個(gè)要設(shè)置行為的圖片,這里是寫有“指導(dǎo)思想”的按鈕圖片,即圖片B1-1。
6、點(diǎn)擊加號按鈕,在彈出菜單下選擇交換圖像(Swap image),彈出交換圖像對話框。我們的主要部分的設(shè)置將在這個(gè)對話框中進(jìn)行。
7、點(diǎn)擊對話框當(dāng)中的瀏覽按鈕,然后選擇好這張按鈕圖片將要翻轉(zhuǎn)成的目的圖片,在本例中是帶有黃色文字的按鈕圖片,即圖片B2-1。然后點(diǎn)擊確定。
8、重復(fù)第6步的操作,在圖像的文本框中選中指針圖片Z1,然后,再次點(diǎn)擊瀏覽按鈕,把它翻轉(zhuǎn)成第1個(gè)指針文件,即Z1。點(diǎn)擊確定。完成上述操作后,行為面板上的顯示結(jié)果如圖3所示。
圖3
9、選中第2張按鈕圖片B1-2,按照上面的方法將它本身翻轉(zhuǎn)成按鈕B2-2,并且將指針圖片翻轉(zhuǎn)成第2號指針圖片Z2。
10、依以上步驟,分別將下面5張圖片分別設(shè)置成為交換圖像的行為。
11、按F12預(yù)覽,把鼠標(biāo)的指針懸停在每張圖片上,怎么樣,感覺還不錯(cuò)吧?
- 用Dreamweaver在網(wǎng)頁中插入Flash按鈕
- 在Dreamweaver中編寫CSS需要掌握的技巧
- Dreamweaver CS3代碼片斷功能面板的利用
- Dreamweaver CS3 的最新功能
- 用Dreamweaver建站如何設(shè)計(jì)CSS?
- Dreamweaver文字自動換行
- 探討Dreamweaver制作網(wǎng)頁時(shí)的空格
- 使用Dreamweaver制作網(wǎng)頁的20個(gè)技巧
- Dreamweaver MX 2004的PPT格式課件
- Dreamweaver技巧:運(yùn)用代碼片斷工具提高css開發(fā)效率
- 在DreamWeaver中編寫CSS的一些技巧
- 使用Dreamweaver模板批量制作網(wǎng)頁
Dreamweaver教程Rss訂閱網(wǎng)站制作教程搜索
Dreamweaver教程推薦
猜你也喜歡看這些
- Dreamveaver中CSS視頻教程
- 中文版Dreamweaver 8從入門到精通
- Dreamweaver 8完美網(wǎng)頁設(shè)計(jì):商業(yè)網(wǎng)站篇
- Dreamweaver 8、Flash 8、Fireworks 8網(wǎng)頁制作從入門到精通
- PHP+MYSQL網(wǎng)站設(shè)計(jì)入門實(shí)踐
- 巧奪天工-Dreamweaver MX 2004 入門與進(jìn)階實(shí)例
- 精通JavaScript+jQuery視頻教程
- 網(wǎng)頁制作基礎(chǔ)教程
- 動態(tài)網(wǎng)頁設(shè)計(jì)視頻全教程
- Dreamweaver MX 2004中文版完全自學(xué)手冊
- 相關(guān)鏈接:
- 教程說明:
Dreamweaver教程-Dreamweaver制作復(fù)雜交換圖像。