草叢的一小塊田地

請各位到這個部落格參觀的時候，點一下左上方的"BlogAD"的廣告，
當累積到新台幣500元(因為最低請領金額是500元)時，
我會去請領出來，捐給社福機關，
最近的目標是中華民國智障者家長總會的"救敢心公益勸募計畫"，
點上方連結可以看到相關資訊，在能力所及的範圍內，也可以直接捐款。

準備好示範網頁的圖片與縮圖，這一篇開始解釋如何使用流變網格做出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使用這個技術來建立結構有些複雜的網站，應該會很辛苦。我也會試著用這種方式建立範本，過程中勢必發生錯誤，也請各位先進指正，先謝謝了！

最近的課還不少，等著妹妹給文字資料，
但是因為小朋友學校課業日重，我也不敢太催促，所以幫她架站的計畫有些延宕。

也因為如此，我將之前玩過的 Joomla 拿出來再研究，現在已經發展到 3.1版，
裝起來看看，真有些不同，曾經費盡心思研究如何用自己的圖片來建立模板，
著實收穫不少，也幫幾位朋友的公司架好站，迅速又好用，

介紹並示範 Photoshop CS6 新濾鏡中的 Blur Gallery ，
此中含有三種模糊效果：Field Blur (區域模糊)、Iris Blur (光圈模糊)、Tilt-Shift (傾斜轉移)，
不確定中文版的翻譯為何，若是翻譯有誤，請多包涵！
但都是很不錯的模糊效果，尤其是 Iris Blur 可以幫照片製造景深效果。

請仔細看影片中的介紹，

在InDesign課程中，都會加入這個操作方法，
但是，不是很好記，所以錄成影片給大家看，
將來要用的時候，如果不幸忘記了，可以來看一下。

重點在你希望置入很多圖片在同個頁面，
希望要快，又不想讓圖片的寬高比例跑掉，

這幾天有空時都在構思網站的草圖及用色，
今天初步定案首頁草圖，內頁應該也是這樣，

因為將此網站定義為展示型網站，展示妹妹的作品，
作品很多很多，還要整理、分類，我這邊的步調會快一些。

由於妹妹的職業是教授手工捏塑，看著她成天都在捏捏捏~~~，
倒是真的設計很多作品出來，就產生幫她架個網站，以便讓更多人知道她厲害之處的想法。

回頭想想自己，上課時一直苦口婆心鼓勵同學們要實作，
所以，決定將網站架設的整個流程記錄下來，
可以用影片呈現的就錄下來，

每次看到這個小天地的文章，臉上都有些發燒，因為更新的次數實在不給力的緊！
農曆年休假時，本就要開始好好地多加些文章，
可惜當時弟弟帶了可愛的姪子與姪女回來，所有心思都在他們身上。

所以這幾周好好想想要寫哪些題目，
基本上要求自己至少一周一篇，

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

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