我們常常在網頁或是Blog中放置內容圖片，只是純粹放入圖片，有時候會覺得在視覺效果上略顯單調，但是如果想要針對圖片加點設計效果，往往又需要使用美工軟體進行編輯才可以做到，所以今天設計嵐來分享一個簡單的手法，利用CSS語法在圖片上製作具有拍立得效果的外框，瞬間就可以讓沒有特色的圖片擁有吸引眾人目光的魔力喔！
這項設計手法的教學會有兩篇，本文針對網頁設計者如何在Dreamweaver網頁編輯軟體中進行CSS規則設定與建立，製作出圖片拍立得效果；下一篇文章設計嵐則會針對Blog使用者，分享如何在Blog內容圖片製作拍立得效果，讓大家以後寫文章放圖片的時候，圖片不再單雕乏味喔！
◎完成圖：
在原本圖片的外圍多出了底色和邊框，還可加上圖片的說明文字喔！
成為CSS高手之路系列文章第七篇來嚕!!上一篇設計嵐說明了如何針對文字設定邊框以及轉灰階圖片的CSS語法，今天來介紹一個更實用的技巧~文繞圖的設定，這個技巧之所以重要，原因有二：1.網頁內文不作文繞圖排版上很難看 2.使用DIV+CSS排版是目前網頁標準化的一個標準作法，網頁設計師必備技能!!
1.首先設計嵐先用Dreamweaver開一個新網頁並且放入文字以及一張圖片在同一個段落，此時各位會發現，由於圖片有長寬大小，與文字同段落會造成文字上方被撐開而有一大塊空白，在版面上不但造成空間浪費也不好看。
2.為解決這個問題，在傳統的做法中，有人習慣用表格排版，但表格有其限制比較不靈活；另外則有人使用以下方法：
A.選取圖片→屬性面板→對齊→靠左或靠右對齊。
今天設計嵐來介紹『成為CSS高手之路』系列文章第六篇，經過前面五篇的基本功訓練，有閱讀並且練習的人應該對於CSS有了基本的認識，接著開始我們正式進入實際運用的介紹，當然，我們還是要由淺入深，先從最簡單的圖片效果開始介紹，慢慢的再進展到更進階的CSS設定。
‧CSS相關系列文章請參閱：成為CSS高手之路(五)~CSS在DW中的設定與語法宣告方式Part III-套用外部的CSS檔案
系列文章之六設計嵐介紹兩個可以運用在圖片上的CSS效果做個暖身，分別為『圖片套用邊框』以及『將全彩圖片轉成灰階』兩種效果，各位可以試著做做看：
一、在圖片上套用邊框：
1.利用Dreamweaver開啟新頁面並且插入一張圖片。
今天設計嵐繼續針對『成為CSS高手之路』系列文章發表第五篇~套用外部CSS檔案的方式進行說明，如果是第一次學習CSS相關課程的人不妨先針對此系列文先前的文章進行閱讀，循序漸進的學習效果更好喔！
而今天系列文章之五所要介紹的套用外部CSS檔案的方式，是先將CSS的格式語法寫在一個獨立的檔案中，並且儲存成CSS格式的檔案，然後再將此檔案以連結或匯入的方式套用在不同的網頁中，讓這些網頁同時擁有相同的CSS格式設定，相當方便快速，而且日後有需要，只要修改CSS檔就可以同時更新所有的網頁格式設定了，這對於需要統一格式設定以及同時管理大量網頁的設計師來說，是個省時簡便的好方法。
1.首先設計嵐先準備兩個網頁檔案，並且輸入簡單文字作區分，但是不作任何的格式設定。
◎以下為a1.html畫面：
今天『成為CSS高手之路』系列文章之四，繼續針對『整頁套用的CSS規則』作後半段的說明，能夠讓規則套用在整個頁面的方法除了前文『成為CSS高手之路(三)~CSS在DW中的設定與語法宣告方式Part I-整頁套用的CSS規則(上)』所提到的設定方法之外，還有其他幾種設定方式，其影響範圍也都是一整個頁面的。
以下要介紹以『類別』(CLASS)、『ID』以及『標籤』三種方式所建立的CSS規則，這三種規則的宣告有個共通性-『都必須寫在<head>及</head>之間，且用<style>標籤來定義CSS的內容』，這一點我們在上一篇文章有提過，溫故知新一下，但是這三種方式還是有其宣告與使用上的差異性，以下來分別介紹。
1.本文範例初始畫面如下： 開啟Dreamweaver建立新頁面後，輸入以下五段文字。
今天『成為CSS高手之路』系列文章之三將來說明一下，CSS語法的宣告方式以及在Dreamweaver中要如何設定CSS，雖然有些人覺得應該直接用『寫』得方式來學習CSS，但設計嵐希望CSS被更多人所了解接受(包括初心者)，唯有大家不害怕CSS了，也才會願意去深入研究它，所以即使直接使用軟體的設定畫面完成的CSS，只要使用得當，實用性還是相當高的。
由於CSS的宣告方式很多種不同的方式，為了減輕各位學習上的負擔，以及分別說明各種不同的方式，設計嵐以一種方式一篇文章的方式來解說，大家可以分開閱讀，也比較好掌握重點；首先Part I 設計嵐先來講解第一種方式-『在整個網頁頁面中套用CSS規則』要怎麼設定以及宣告的方式。
在這一系列的文章中，我們依然用上一篇的範例來做示範說明，下圖為一個純粹使用HTML語法撰寫的頁面：
1.網頁頁面內容圖解說明： (順便溫故知新一下)
既然要成為CSS高手，HTML語法就不能不稍微了解一下，因為CSS樣式是針對HTML的標籤作為定義的對象；且設定好的CSS樣式也是得套用在HTML文件中，所以，想要真正搞懂CSS，以下這些HTML請確實掌握，這樣成為CSS高手的路會平坦一些。
但是話說前頭，本文主要是就HTML語法架構做『入門』的說明，如果是已經有一定製作網頁程度或是只願意在『所見即所得』網頁編輯軟體中製作網頁的人，此篇不妨可以先略過，直接進入下一篇的CSS教學文章！
下圖為一個純粹使用HTML語法撰寫的頁面：
從今天開始，設計嵐會在部落格中慢慢的加入『網頁設計』相關的文章，然而可以寫的東西太多了，所以設計嵐盡量從實用性高的部分開始進行，而第一首選就是『CSS串接樣式表』，因為不管是網頁設計或是部落格經營，都可以使用CSS樣式設定。
為了讓沒有接觸過CSS的初心者可以盡快上手進入CSS的世界，設計嵐在本文將用Q&A方式針對CSS做一個簡介，其後再陸續用其他文章分享各種常用的CSS設定範例教學。
Q:什麼是CSS?
A:所謂的CSS，全名為『Cascading Style Sheets (串接樣式表)』，而其中的『串接』代表的是我們可以將各個樣式分開定義之後，再串接起來套用於網頁中，目前最新版本為CSS2.1，主要的功能在於針對Web文件進行格式上的設定，應用領域相當廣，不論是網站頁面或是部落格，幾乎都是以CSS作為格式設定的主要方式。
下圖即為Pixnet部落格的CSS樣式設定畫面：
房匠網專欄 (8)
