草叢的一小塊田地

準備好示範網頁的圖片與縮圖，這一篇開始解釋如何使用流變網格做出RWD的做法，網路上有很多相關說明的文章，期盼這一篇可以給各位多一份參考，RWD真的很好用。
如同上一篇所述，可以先拿較少頁面的網站練習。

請先理解，我們談的是螢幕的解析度而非尺寸，所以想做出各式裝置都可以閱讀的網頁，應該先去查出你的目標解析度，詳細數字可以參考這個網站 Screen Sizes。
我試著做出如下的網頁呈現：

1.480x800px

為了自適應網頁設計(RWD，Responsive Web Design)，也有人翻譯為"響應式網頁"。研究好一陣子的"流變網格"，這是 Dreamweaver CS6 ( 以下簡稱為DW ) 開始才有的新功能。

它是由HTML5與CSS3組成，邏輯上來說，利用三組同名稱的 CSS 樣式(但是儲存在一個樣式表檔中)來控制一組DIV。最外圍的 DIV，由.gridContainer這個樣式控制，再藉由"媒體偵測"，也就是@media這個語法去偵測瀏覽器所在的裝置解析度。在 DW 中，設定為三種尺寸的解析度，480px以下、481~768px及769px以上。不過我認為這還有討論的空間。

重點是，在建立過程中，真的有些麻煩。最近在課程中帶著同學們一步一步建立，還好同學們都很小心翼翼，結果蠻成功的。因此，我想在接下來的文章，將整個過程一篇一篇寫出來，提供給對這方面有興趣的朋友參考。也會介紹一些國外相關的網站。說實在的，目前的粗淺心得是，如果DW使用這個技術來建立結構有些複雜的網站，應該會很辛苦。我也會試著用這種方式建立範本，過程中勢必發生錯誤，也請各位先進指正，先謝謝了！

現今的網頁設計主流該是HTML+CSS+JavaScript，
過去使用表格加上巢狀表格的呈現方式，會阻礙搜尋引擎到你的網站拜訪！
如果你的網站已稍具知名度，當然不用擔心。

但是，新建立的網站最迫切希望的就是被網友是用關鍵字找到，
在這方面，CSS的版面呈現因為都是使用文字，占了先天優勢。

之前曾為慈聖堂建立一個網站，可是，流量過小，
沒多少人看就出現流量不足的現象，
真的很沒力！

有鑑於此，又考慮到暫時不使用到資料庫，
就到智邦生活館租用一個平價網站空間，

這次跟各位說說CS3版開始才有的新功能，也就是"行為"中的"效果"，
就個人而言，這些效果提供不一樣的呈現，
但是，請各位要好好想想怎麼用，要用在網頁的哪個部份。

已經先建好一個表格，插入一張點陣圖，在下方插入一個沒有標籤的按鈕，
不使用標籤的原因，是因為我們只是使用這個按鈕來啟動效果。如圖：

Spry是DW CS3版開始才有的新功能，好用嗎？真不錯用，不過有幾件事要提醒大家。

1.這些效果都是以JS與CSS構成，因此，如果更換該Srpy效果的位置，比如換到另一個網頁，
   請務必注意CSS與JS檔案的位置與連結，密切注意每個網頁程式碼的頂端處。

2.如果該效果要建立在網站的範本中，要特別注意到，務必在"另存成範本"之前做好，
   已經體會過轉成範本後再加上效果的痛苦。

現在的Dreamweaver(CS3版開始，以下簡稱DW)已經是ADOBE家族的一員，
與其他重量級軟體的整合度相當不錯，
例如在DW中插入圖片或是照片，可以直接呼叫Photoshop來加以修改或潤飾，
這一點，真的很方便。

CS3版中有個新功能叫做"Spry"，經過測試，效果不錯。