現在CSS3功能愈來愈強大，像是大家所熟悉的圓角框、影陰，完全不用繪製任何的圖像，立即就能套用此特效，除此之外先前小米也分享過CSS3的混合模式，其特效就像在Photoshop一樣，可將二張圖片進行融合，完全不用再透過影像軟體，甚至CSS3內建也支援一些濾鏡特效模組，像是飽和度、色相、對比、亮度、模糊.....等特效，完全不用透過Photoshop立即就能將照片套用各種不同的風格特效。 　　而網路上也有相關的套件的模組，只要將特效名稱加入指定的區塊中，立即就能將照片套用此風格特效，就像是PS作出來的一樣，因此有了這個CSS Filter濾鏡特效後，免PS！立即就能將照片套用各種不同的風格特效，同時套用也相當的簡單，因此身為網頁設計的你，也趕快來看看囉!

---

CSS Filter：

---

Step1
進入css濾鏡特效網站後，上方大約有13種的風格特效可使用，當點上方的特效縮圓，下方的範例照片立即就可預覽套用後的結果。

---

Step2
當套用後，下方就會顯示css3相關濾鏡屬性所套用的數值，而這些特效都已整理成套件，所以只要點下方的按鈕，立即可下載此css特效濾鏡。

---

Step3
進入GitHub 網站後，點右下的Donwload ZIP鈕，立即可下載此濾鏡模組。

---

Step4
接著將網頁向下拉，就會看到套用的方式，而方法也相當的簡單，先將CSS載入到網頁中，再將要套用的特效的div中加入濾鏡名稱，立即就可套用，而所有的濾鏡特效名稱就在下方。

---

Step5
下載解壓縮後，就會看到以下的檔案，這時只要將filter.css複製到自己的專案中就可以了。

---

Step6
接著就可照片套用各種不同的風格特效啦!效果還蠻不錯的，如此一來就不用再開PS啦!

　　Bootstrap是目前相當主流是RWD自適應套件之一，除了功能完善外，再來就是它的網格概念相當的簡易好懂，同時也相當容易客製化，這也是讓梅干愛不釋手的原因，同時也將Bootstrap導入每個專案中，但Bootstrap本身只是一套framework，所以並沒有設計工具，因此只能透過一般的文字編輯器，將所需要用的特效或版面，一一的key到原始碼中，而為了縮短製作時程，有上過梅干的Bootstrap的朋友都知道，梅干將這些Boostrap製作成短code，並快速的產生這些特效的原始碼，但那天梅干開啟許久沒用的Dreamweaver CC 2015後，突然無意發現，在建立新檔案的地方，怎多了一個Bootstrap的頁籤，便引起梅干的好奇，就研究了一下，沒想到大家的需求Dreamweaver終於聽見了，將Bootstrp變成圖形化介可，讓許多習慣DW的網設，也能輕易的使用，因此習慣用DW的朋友，不妨也一塊來看看，怎在DW CC 2015下使用Bootstrap來開發RWD的網頁吧!

---

Step1
在建立新檔案後，將頁籤切到Bootstrap，並將下方的勾點掉，不用載入預設的版型。

---

Step2
由於Dreamweaver會自動產生Bootstrap所會用到的元素，因此要先指定一個資料夾。

---

Step3
當建立完畢後，先進行儲存。

---

Step4
接著DW會把Bootstrap所會用到的檔案，複製到剛所指定的資料夾中。

---

Step5
接著切到原始碼模式，可看到這就是基本的Bootstrap的網頁結構，且DW完全沒有加料。

---

Step6
接著回到編輯模式，在插入面板中，將下拉選單更改為Bootstrap Compoments，這邊裡面都是Bootstrap所有元素。

---

Step7
就可透過拖拉的方式，建立Bootstrap的版型。

---

Step8
甚至也可直接嵌入廣告輪播。

---

Step9
完成後，切到Live來預覽一下，此次的Live功能更加方便了，上方還有尺寸表，可清楚知道目前所在的解析。

---

Step10
直接開啟瀏覽器預覽，一切都正常，因此當習慣DW的朋友，也趕快升到DW CC 2015後，就可用DW中使用Bootstrap，來製作RWD自適應的網頁啦!說真的還蠻方便的。