字體:小 中 大 | |
|
|
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」檔案, 如圖複製 02、切換回剛剛編輯的檔案, 請選取「推到臉書」的按鈕, 並如圖操作: 03、這樣就完成「推到臉書」的推文按鈕了!其他兩個按鈕就請你如法炮製, 複製「推文語法.js」中的第 2、3 段程式碼, 分別建立「推到噗浪」和「推到推特」按鈕的呼叫行為, 完成檔案可參考 Ch15-02.html。 製作完畢後, 別忘了將網頁上傳到網站伺服器, 並登入你要轉貼的目標網站, 才能測試效果喔!下面我們來試試看「推到噗浪」的完成效果吧!
|
|
( 知識學習|隨堂筆記 ) |