文/圖、蘇芳玲老師撰

0824pic007.jpg  

     你是否也有想要在網頁中製作互動式選單卻又不會撰寫程式的困擾呢?放心~這個問題就交給Dreamweaver的『Spry組件』功能來幫你解決,只要動動手指頭,按按滑鼠左鍵,你就可以輕輕鬆鬆製作出各種具有互動功能的選單囉!

      什麼是『Spry組件』呢?其實它就是HTML、Javascript和CSS等程式語法的集合,將這些具有互動功能的語法預先寫好放在Dreamweaver中,就像一個一個的指令集,讓不會撰寫程式的使用者也可以透過Spry組件做出各種具有互動效果的選單。

      現在就以製作「Spry摺疊式」多層選單為例,來教同學們如何應用Dreamweaver的『Spry組件』功能來製作具有互動功能的選單囉!

Steps:
1.首先請開啟「視窗/插入」面板中的「Spry」面板。
0824pic000.jpg  
2.將游標放在欲插入摺疊式選單的位置,點選「Spry摺疊式」按鈕
0824pic001.jpg  
3.開始編輯摺疊式選單的內容,編輯的方式與一般網頁相同。
0824pic002.jpg  
4.點選眼睛圖示的按鈕,就可以繼續編輯下一個項目的選單內容了。
0824pic003.jpg  
5.完成選單的內容編輯後,按下儲存檔案的同時,會跳出複製相關檔案的對話框視窗,請按下確定按鈕,檔案會存放在「SpryAssets」資料夾中,此資料夾Dreamweaver會自動產生並且放在根目錄下第一層,無需自己增加。

0824pic004.jpg  
6.可以開啟「視窗/CSS樣式」面板,配合網站色調來修改選單的樣式。
0824pic005.jpg  
7.CSS樣式修改完成後,就大功告成囉!
0824pic006.jpg 0824pic007.jpg   

 

, , , , , , ,

lccnetvip 發表在 痞客邦 PIXNET 留言(0) 人氣()