網路城邦

上一篇 回創作列表 下一篇   字體:
製作 Facebook、Plurk、Twitter 推文按鈕
2011/01/09 06:39:02瀏覽872|回應0|推薦2

製作 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。

製作完畢後, 別忘了將網頁上傳到網站伺服器, 並登入你要轉貼的目標網站, 才能測試效果喔!下面我們來試試看「推到噗浪」的完成效果吧!







( 知識學習隨堂筆記 )

推薦文章 列印 加入我的文摘
上一篇 回創作列表 下一篇

引用
引用網址:https://classic-blog.udn.com/article/trackback.jsp?uid=iink&aid=4777399