套用 CSS 裝飾外框來美化你的圖片─網頁研習室【網頁製作系列報導】─智邦公益電子報
enews.url.com.tw · August 18,2016壹、報導前言：
以往我們會使用圖檔表格來做圖片的美化裝飾外框，缺點是程式碼長，費工又費時，算是傳統用法。
現在讓我為大家介紹使用 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 。
玖、如何完整取得以上所有資料：
你想學習與取得這份完整報導資料嗎？你學習上有困難嗎？您想永久長期取得網頁研習室有關網頁製作教材嗎？
如果您想完整取得電子報等所有檔案資料，我們提供燒錄光碟片給您 Go 。
教材詳細內容：語法教學、第一電子報、第二電子報、第三期電子報、第四期電子報、網頁圖窟。
為讓您學習不終斷，自100年12月份起推出凡參加教學會員或購買教材會員，可永久免費完整下載後續各期電子報報導資料 Go 。
歡迎贊助本站新台幣 100 元，立即取得會員 資格 (不含線上指導)，隨時下載 100 年以後各期電子報報導資料 Go 。
特別聲明：本站教學使用軟體或檔案，著作權與版權均屬原創公司所有，屬完全免費性質，不含於教學 (材) 費用內。
拾、結論與建議：
本站所有報導資料，歡迎網友加入鏈結或轉載內容，惟請保留文章完整，並註明此 引用來源 ，謝謝您的支持與配合。
本報每篇報導都花上 8 小時以上搜集、整理及撰稿，絕對值得初學者或想徹底學會 HTML 語法網友永久保存。
強烈建議您 學會 HTML 語法 ，她真的簡單易學，懂了她您就能駕馭她，讓您使用所見即所得軟體更得心應手。
本報導屬於完全免費性質， 索取教材資料 屬個人自由意願，而回饋給您的光碟片，則是我們的誠意而已。
一篇保證前所未見的 HTML 教學課程，絕對是您學習 HTML 的好教材，強烈建議您進入實際體驗一下。
本電子報報導資料，未來將繼續每隔 30 日發表一次，以嘉惠更多想學會 HTML 網友，歡迎 繼續訂閱 。
本報導內容或資料，因限人力、時間，非教學會員，不接受任何疑惑解答，敬請見諒。
