網站美工教學

第四篇
套用 CSS 裝飾外框來美化你的圖片

適合程度： 初學者 一般程度 進階者 以上均宜
壹、報導前言：
以往我們會使用圖檔表格來做圖片的美化裝飾外框，缺點是程式碼長，費工又費時，算是傳統用法。
現在讓我為大家介紹使用 CSS 裝飾外框語法，來美化原始圖片，不但省工省時，更是輕鬆方便。
原創作者曾於 2008 年 1 月發表過一篇，使用 CSS 語法來創建漸變文字效果，頗獲網路上的好評。
這次作者用同樣的技術，教你不須使用繪圖軟體，只需套用 CSS 裝飾外框就可以美化你原始的圖片。
其實道理很簡單，你只需要一個 標籤和製作好的背景圖像，然後重疊起來，便可達成這個效果。
從簡單的圖像裝飾外框，到超過 15 種見費範例，只要具備基本的 HTML 及 CSS 語法，即可讓你輕鬆取得。
當然你也可以使用 PhotoImpack、PhotoShop 等繪圖軟體或 nEOiMAGING，自己製作特別的裝飾外框來套用。
如果你熟悉英文並對 HTML 及 CSS 語法有基本概念，請自己前該網站研習即可，初學者建議先參考本篇報導。
作者最後告訴我們：正如你看到，這個 CSS 技巧是非常靈活，你可以隨意創建自己的圖形圖像和 CSS 樣式。
強烈建議想好網頁製作朋友，免費訂閱或購買本站所有教材資料，有系統完整學會 HTML 標籤，提昇你的網頁水準。
聲明：非本站付費教學學會員，站長因限於時間與工作，無法提供線上諮詢服務，有需要者請加入教學會員，謝謝支持。
如果你是初學者，建議你學習本篇報導之前，最好具備基本的 HTML 觀念及 CSS、JavaScript 等網頁程式運用。
為讓您學習不終斷，自100年12月份起推出凡參加教學會員或購買教材會員，可永久免費完整下載後續各期電子報報導資料 Go 。
歡迎贊助本站新台幣 100 元，立即取得會員 資格 (不含線上指導)，隨時下載 100 年以後各期電子報報導資料 Go 。
感謝：本報導程式或技術資料，大都取自網路分享資源，其版權與著作權均為當事者所有，特此感謝你的努力與辛苦。

貳、作者網站與檔案下載：
作者網站：Web Designer Wall – Design Trends and Tutorials Go 。
CSS Decorative Gallery 網址： Go 。
示範網址： Go 。
下載網址： Go 。
教學或教材會員：請到本篇資料夾直接取得整理過的 decorative.zip 檔。
CSS 漸變文字效果網址： Go 。
示範網址： Go 。
下載網址： Go 。
教學或教材會員：請到本篇資料夾直接取得整理過的 gradient.zip 檔。

參、HTML 與 CSS 用法比較：
傳統 HTML 用法：程式碼較長，費工費時，套用困難 Go 。
簡潔 CSS 用法：程式碼簡潔，省工省時，套用方便 Go 。

肆、使用 CSS 的好處：
節省時間：您不必在 PhotoImpack、PhotoShop 等繪圖軟體上，個別的加以裝飾外框。
保持原始圖片：就是這個原因，所以你不必擔心會改變或破壞原始圖片。
非常靈活：您可以使用任何一個完全不同的外觀和感覺，只需要編輯 CSS 碼即可。
適用於任何網站：這個 CSS 技巧適用於任何類型的網站，與任何大小的圖像。
兼容各瀏覽器：它已通過大多數瀏覽器（如：Mozilla Firefox，Safari，Opera，IE6 等）測試。

伍、CSS 語法解說：
基本運作概念： 作者利用透明的 png 圖檔當做背景圖，然後運用 容器標籤，加以 CSS 整合出多變的裝飾外框。
在 CSS 中，你要記住的關鍵點是：指定 DIV 元素的位置是相對值；指定 SPAN 元素的位置是絕對值。
也就是每張圖片的位置，要使用相對值；套用透明底圖的位置，要使用絕對值。
任何要改變原始圖片的的外觀和感覺，只要編輯 CSS 規範的 SPAN 元素即可。

幾個重要語法解說： Go 。

陸、範例介紹：
特別逐一詳細介紹作者網站上 12 種範例給你學習。

值得學習範例 Go 。


柒、創建自己的畫框：
我使用 nEOiMAGING 軟體，自己製作 12 個特別的裝飾外框給你看看。

詳細解說 Go 。


捌、整合不一樣效果：
當你學會這套用法，你也可以整合出不一樣展現效果 Go 。
與本報導有關之本報相關報導 - 替文字或圖片製作立體的陰影效果 Go 。

玖、如何取得：

拾、結論與建議：