本文講述了一個靜態網站的設計到重構到架設全部流程，教程需要懂一點HTML代碼，沒有這個基礎的可以簡單看一下，了解別人如何把你的圖片運用到網站上。

我又粗現了，是不是被大大的驚喜了一個，哎喲我去那滿臉憤怒的表情是神馬情況，咳咳咳我知道我知道，太久沒有獻上我寶貴的節操了是不是。

啊，嗯，閑話少敘，各位五湖四海三山五岳的好漢和姑娘們，你們真的沒被我驚喜到嗎？啊哈啊哈啊哈哈哈哈~~~啊~~~別打臉~~~

好吧，吶，休息了這么一段時間，就讓本盟主帶大家繼續八卦一下東邪DIV和西毒CSS之間那些猥瑣的事吧。來來，關門，放狗哦不，放DW。。。

<點圖片看大圖>

嘛，上次咱們折騰出了這么一個奇葩的東西，是不是感覺很慘，嗯，感覺很正確。不過沒關系啦，咱們這次就讓她“豐滿”起來。下面的童鞋有木有跟我一起想歪的，有木有有木有。

上次咱們建立了。。。嘛。。。等我數一下。。。啊是9個區域，有可能童鞋們建了678個，不過不要在意這些細節，按照自己的設計來就是了。

下面按照之前說的區域，我們要把設計好的東西放進這些DIV里，正所謂切圖是也，江湖人稱最高武功秘籍《葵花寶典》，切得越深入功夫越高潮，只是錯別字而已表想多嘿嘿嘿。

在切圖前，首先得說一下其實這個功夫也有分級的，低級的部分叫做“神速一刀切”，高級的部分叫做“雕花神手”，其間難度不可同日而語，自然學成后功力也天差地別，望各位江湖好友慎重選擇。

是不是特有盟主風范，呵呵呵，呵呵呵呵呵

OK，先從低級別的講起，這個簡單內容少嘎嘣脆。

先貼個我的設計稿。

<點圖片看大圖>

我們可以看到，區域一一對應，設計的時候我們應該要想到，做成網頁的時候要怎么去分區域實現，而且能夠保證設計質量的情況下能夠盡量簡單的實現出來。嘛，當然對于新手來說現在說這個貌似然并卵，不過這很重要，請牢記，這也是為神馬設計師要學習這些鬼代碼的原因。

好的，現在打開你的設計稿，我們來“神速一刀切”。

在PS中，選擇“切片工具”，和剪切圖標在一個組里