關於本報

網頁研習室【網頁製作系列報導】
報主:李文能
創刊日期:2002-06-25
發報頻率:月刊
訂閱人數:6,166
官網:
http://www.webpage.idv.tw/maillist/

近期電子報


訂閱便利貼


將貼紙語法置入您的網站或部落格當中, 訪客可以輸入mail取得認證信,並按下確認連結後, 快速訂閱您的報紙。
預覽圖
訂閱網頁研習室【網頁製作系列報導】報
網頁研習室【網頁製作系列報導】
-----------------------------------------------------------------------------------------------------
Plurk FaceBook Twitter 收進你的MyShare個人書籤 MyShare
  顯示內嵌語法

網頁研習室【網頁製作系列報導】
發報時間: 2010-05-28 11:00:00 / 報主:李文能
[公益聯播]102年最新活動大事曆
本期目錄
壹、報導前言:
貳、介紹 websnapr 網站:
參、Try it now:
肆、註冊取得 developer key:
伍、自製網站連結預覽:
陸、其他七個不錯的建立網頁縮圖 (WebThumb) 服務網站:
柒、使用 Mozilla Firefox 外掛程式:
捌、如何使用這些 JavaScript 程式:
玖、如何完整取得所有資料:
拾、結論與建議:
壹、報導前言:
網站連結預覽縮圖的功能,主要讓訪客在點選超連結之前能先看到該網站的網頁模樣。
這項功能實質效用不大,因為您只能大略看出該網站的網頁樣子,無法察覺詳細內容。
它的技術是使用快照取圖方式預覽該網頁的模樣,然後再由訪客決定是否要連去看看。
缺點是滑鼠移到上面就會自動彈出網站連結預覽,有時還會遮蔽到訪客瀏覽網頁內容。
雖然它的噱頭大於實際功能,但其特殊展示效果也是值得大家進一步研究與把玩一番。
本篇特別介紹如何加以改良運用這項服務,讓你也可以自製網站連結預覽縮圖功能喔。
除此之外也會介紹如何取得與其他類似功能服務,讓你也可以有更多選擇與學習機會。
貳、介紹 websnapr 網站:
websnapr 網站算是一個網頁快照 (snapshot) 及縮圖 (thumbnails) 的免費服務公司。
當您填入指定要的網址,它就會自動幫您擷取該網頁並產生不同尺寸的網頁快照縮圖。
如果您想要在網頁內顯示其他網站的縮圖,只要填入 email、Website Url 和 Password。
註冊後到信箱收取驗證信,即可獲得一個 developer key,讓你進行更多連結預覽設定。
該技術目前使用版本為 websnapr 2.0,而最新版本為 websnapr Bubble 3.0 beta。
基本上 websnapr 屬於完全免費服務性質,此服務仍拒絕提供使用於非法與色情網站。
另外 websnapr 也提供了一些實用的外掛 (Plugin) 程式,使用者可以依照自己的需求運用。
大部分系由網友自行開發,請參考 websnapr 外掛程式 (Implementations / Plugins)。
參、Try it now:
進入 websnapr 網站首頁,於 Website URL: 輸入貴網站的網址。
再下拉選擇想要尺寸,按下 "Capture!" 即可立即取得該網頁的快照縮圖了。
更可以將擷取話面直接上傳或分享到指定的 FTP、E-mail、Facebook、Twitter 等。
目前提供兩種尺寸:micro (90x70) 及 small (202x152) ,其輸出後顯示語法分別如下:
http://images.websnapr.com/?url=http://www.webpage.idv.tw/maillist/&size=t
http://images.websnapr.com/?url=http://www.webpage.idv.tw/maillist/&size=s
肆、註冊取得 developer key:
如果你想要在網站內顯示其他網站的縮圖,websnapr 也提供這項服務,不過必須先在首頁註冊。
註冊程序很簡單,請找到 I want screenshots on my site, how does it work? 位置。
再填入 Your email、Website Url 和 Password 資料即可,註冊後到信箱收取驗證信即可。

請參考詳細教學實做範例 Go
伍、自製網站連結預覽:
websnapr - Preview Bubble Javascript v2.0

請參考詳細教學實做範例 Go
陸、其他七個不錯的建立網頁縮圖 (WebThumb) 服務網站:
讓你不用再像以前一樣土法煉鋼,先用 Print Screen 鍵分節抓圖,再用繪圖軟體很費工銜接起來。提供這些網路上資訊網站因異動頻繁,並無法保證所有連結永久有效,不用來信問我。

柒、使用 Mozilla Firefox 外掛程式:
Mozilla Firefox 外掛程式又稱為 ADD ON 附加元件。安裝後只要把滑鼠移到超連結上,右邊會出現一個放大鏡小圖示,點選後就會出現一個燈箱 (LighBox) 預覽視窗效果。
你可以在瀏覽後打開、關掉、放大縮小、移動、暫時加入最愛、郵寄 ...等功能,比上述的程式好用太多了。
最新版本 CoolPreviews 3.0.1,請到此下載安裝即可。
你也可以參觀原創作網站
另一個 Link Preview 0.1.7 外掛程式
捌、如何使用這些 JavaScript 程式:
您最好要具備 HTML 基礎及簡單的 JavaScript 程式觀念,這樣才能輕鬆的套用它。
所附的範例,您都可以按檢視原始碼打開記事本,就可以很容易的查看它的程式碼。
有些程式碼使用到外部連結檔,如 websnapr.js 或 websnapr.css 等,必須下載後使用。
以上所有範例程式歡迎訂閱會員免費下載套用,教學會員或教材會員請到本篇目錄內取得即可。
因限於人力問題,非本報教學會員請勿來信詢問問題,謝謝配合。
玖、如何完整取得所有資料:
購買教材 (教學) 會員,請由本篇目錄:study/maillist/maillist4/web/02/ 進入學習。
您需要這份完整報導資料嗎?學習上有困難嗎?您想永久長期取得網頁研習室有關網頁製作教材嗎?
如果您想完整取得電子報內所有檔案資料,我們提供燒錄光碟片給您 Go
凡加入教學會員者,可獲得半年期線上指導及所有報導完整的資料光碟乙片。
教材詳細內容:語法教學第一電子報第二電子報第三期電子報第四期電子報網頁圖窟
為讓您學習不終斷,即日起推出凡購買教材,可加選是否於第四期電子報報導完閉後補送完整教材一片!
凡加入本站教學會員,可免費獲得半年期的無廣告 10 MB 空間,讓您輕鬆跟我學習網頁製作 10 MB 空間 Go
已購買教材或教學會員,如需本報導資料歡迎寫信註明編號免費索取,您也可加價 100 元,於本期報導完畢後一次完整取得。
基於使用者付費原則與指導時間付出,教材會員不包括這項服務,非本站付費會員不接受相關問題指導。
特別聲明:以上軟體著作權與版權均屬原創公司所有,屬完全免費性質,不含於教學(材)費用內。
拾、結論與建議:
本站所有報導資料,歡迎網友加入鏈結或轉載內容,惟請保留文章完整,並註明此 引用來源 ,謝謝您的支持與配合。
本報每篇報導都花上 8 小時以上搜集、整理及撰稿,絕對值得初學者或想徹底學會 HTML 語法網友永久保存。
強烈建議您 學會 HTML 語法 ,她真的簡單易學,懂了她您就能駕馭她,讓您使用所見即所得軟體更得心應手。
本報導屬於完全免費性質, 索取教材資料 屬個人自由意願,而回饋給您的光碟片,則是我們的誠意而已
一篇保證前所未見的 HTML 教學課程,絕對是您學習 HTML 的好教材,強烈建議您進入實際體驗一下。
本電子報報導資料,未來將繼續每隔 30 日發表一次,以嘉惠更多想學會 HTML 網友,歡迎 繼續訂閱
本報導內容或資料,因限人力、時間,非教學會員,不接受任何疑惑解答,敬請見諒。
推薦訂閱
<數位之牆>國際化,是台灣網際網路產業的最後活路@【數位之牆】
介紹一個免費資訊與網路新知網站@【網頁研習室【網頁製作系列報導】】
轉寄『如何自製網站連結預覽縮圖功能』這期電子報

寄信人暱稱  寄信人email
收信人暱稱  收信人email

  • 社群留言
  • 留言報主