Ressol's Blog - 舊站

關於部落格
您好,這個網誌已不再更新,僅同步張貼來自新站的文章。
若要閱讀新文章,請您前往 這裡
  • 68131

    累積人氣

  • 0

    今日人氣

    0

    訂閱人氣

【教學】Snap Shots 的進階功能

這些瀏覽模式有什麼差別呢?第一個就是我們最常見到的 PreviewShot,它提供『頁面預覽』功能。
其他的八個則是依據連結的網址,自動幫你轉換成對應的預覽模式。

例如:

某個超連結指向 Amazon 上 iPod 產品的網址,
左邊的PreviewShot 會預覽整個網頁,而右邊 ProductShot 則會強調顯示產品的資訊。

這麼神奇?沒錯,就是這麼神奇。只不過,這些新功能在使用上有些限制要注意一下。
由於這些特殊的預覽模式,是藉由分析網頁的結構,來取得網頁的重要部份 (如:Amazon 網頁裡的iPod 產品資訊),所以只有特定的幾個網址才能支援這些功能。

底下這張表,是各個預覽模式的支援網站,以及 URL 格式範例。


對非英文語系的一般使用者而言,大概只用得到 WikiShots、VideoShots、PhotoShots、AudioShots。
之前有介紹過,幫超連結加入 snap_shot 這個 CSS 類別,限制只在特定的超連結秀圖。

在這裡為大家說明一下它的進階語法。

為文字片段加上預覽圖
在要預覽的文字前後,加上 <span></span> 或 <div></div>,並指定預覽模式的 CSS 類別
例如:
原文:這篇文章是用Google的筆記本打的
語法:這篇文章是用<span class="Snap_Shot_Wikipedia">Google</span>的筆記本打的
結果:這篇文章是用Google的筆記本打的

各瀏覽模式的主要 CSS 如下:

各欄位由左至右,依序為 預覽模式CSS 類別名稱、文字內容格式


你只要把文字包起來再指定特定的類別,你的文章就可以擁有豐富的呈現方式,很方便吧

以上,是屬於 snap 的進階語法 (Markup Language) 部份,如果你有興趣的話,可以點選 Snap Shots Markup Whitepaper.  下載語法說明書
相簿設定
標籤設定
相簿狀態