| 製作 Facebook、Plurk、Twitter 推文按鈕 
範例觀賞 請用瀏覽器開啟網址：http://www.iflag.url.tw/flagjapan2010/jpphotos.html,可看到網頁上有 3 個推文按鈕, 分別可轉貼到 Facebook (臉書)、Plurk (噗浪)、Twitter (推特) 網站, 在此我們以轉貼到 Facebook 網站為例： 
推文的功能是轉貼網址, 所以應該要先將網頁上傳到網路伺服器, 推文的程式才能取得有效的網址。上傳網站的方法在第 11 章已經說明過了, 這裡我們就是直接用上傳完畢的網頁來測試效果。另外, 你必須先登入要轉貼的網站 (例如 Facebook) 才能成功轉貼喔！ 加入推文按鈕圖片 現在就開始來製作吧！請開啟 Ex15-02.html 來練習, 首先要插入 3 張圖片以便製作成按鈕： 01、請點選「日本寫真館」這張標題圖片, 然後按一下  鍵將指標移到圖片的左側,接著如下插入 3 張圖片： 
02、選取最左邊的圖片, 在屬性面板設定替代文字："推到臉書", 第一張圖片就完成了。其他兩張圖片的做法也相同, 如下所示： 
利用 CSS 樣式替圖片加上按鈕效果 接下來要設定按鈕效果, 讓瀏覽者把滑鼠移到圖片上時, 指標會變成手指狀, 這樣才知道此圖片是可以按的按鈕。按鈕效果的做法很多, 底下要為你介紹一種便利的方法, 只要加上一個 CSS 屬性, 即可讓圖片變身成按鈕。 01、請接續上例, 然後按下 CSS 樣式面板的  鈕, 如下操作： 
02、接著請選擇剛剛加入的 3 張圖片, 在屬性面板套用 .styleIcon 類別樣式即可。
完成後, 你可按下即時檢視鈕來測試看看滑鼠效果： 
利用行為面板呼叫程式碼來轉貼網址 到此我們已經將圖片變成了按鈕, 接著要再替按鈕加上推文的設定, 方法是利用
行為來呼叫轉貼網址的程式碼, 以轉貼到指定的網站。請接續上例, 繼續練習： 01、請在 Dreamweaver 中開啟 Ch15 資料夾中的「推文語法.js」檔案, 如圖複製
「推到 facebook 臉書」下面這段程式碼： 
02、切換回剛剛編輯的檔案, 請選取「推到臉書」的按鈕, 並如圖操作： 
03、這樣就完成「推到臉書」的推文按鈕了！其他兩個按鈕就請你如法炮製, 複製「推文語法.js」中的第 2、3 段程式碼, 分別建立「推到噗浪」和「推到推特」按鈕的呼叫行為, 完成檔案可參考 Ch15-02.html。 
製作完畢後, 別忘了將網頁上傳到網站伺服器, 並登入你要轉貼的目標網站, 才能測試效果喔！下面我們來試試看「推到噗浪」的完成效果吧！ 
.....更多內容請見《Dreamweaver CS5 魔法書 》 
| 
第293 期
![曝光聖經 [攝影大師 Bryan Peterson 系列]](http://www.flag.com.tw/images/cover/middle/F0671.gif)
沒有留言:
張貼留言