是中一款非常實用的網頁布局擴展插件，有了這款插件可以快速搭建網頁布局，包括幻燈片、內容布局、添加等，可以讓您快速搞定網頁原型設計。有需要的朋友可以下載！
使用教程：
基本布局
讓我們從新建一個新文檔開始。
新建文檔
首先，我們需要點擊“ [+] New ”按鈕來新建一個空白文檔。文檔自帶柵格，總寬度，間隔為30px，方便你為網站進行設計。
添加
在“[+] New ”按鈕下方，你可以看到一系列選項卡，其中一個是。當我點擊其中的一個的時候，會自動在文檔中生成。
在這個案例中，我們使用的的樣式是Logo在左，導航在右。在圖層面板中，你可以看到中所有圖層均置于文件夾中，你可以根據需求進行命名。
注意：如果你隨后選擇其他的，會幫你替換掉。
增加區域（ ）
盡管大尺寸和區域有缺陷，但是很多網站依然選擇保留這個區域。中內置了許多樣式，增加區域和添加一樣容易，點擊選擇即可。
案例中，我們選擇最后一個樣式，于是就生成了一個包含標題、內容和兩個按鈕的區域。
正如上圖所示，你可以在圖層面板中看到區域的圖層分組。
增加內容區域
增加內容區域也一樣簡單。中第三個選項卡就是內容區域。
我選擇了第三個樣式，點擊后添加了三列內容，每列包含標題、圖片和預制的內容。
增加更多模塊
在中，每個模塊相當于一個獨立的內容塊。它的內容和用途由設計師來決定。和、滑塊區域不同，我們可以在文檔中添加多個模塊。
在案例中，我們添加了第一個模塊，其中包含一個橫跨整個柵格的圖片，標題和預制的文本。
添加
通常網頁的最底下都會添加，同樣的，為我們內置了一些可選的：
在這個階段用ps網頁制作的基本步驟，我們已經完成了網頁設計的必要部分，從到，只需要幾次點擊就可以了。為了更好的布局，你還可以這樣添加一些合理的空檔：
現在我們已經完成了基本的布局，接下來，我們可以定制它，讓它看起來更符合一個高保真的原型。
細節調整
當我們為文檔進行個性化調整的時候，盡可能保證每個圖層的完整性是基本原則。每個圖層在進行調整的時候，不能對其進行破壞性的修改，這樣可以確保原型的可調整性。這樣一來，我們就需要用到PS的以下特性：
智能對象和智能鏈接對象
調整圖層
圖層效果
此外，我個人比較喜歡盡可能少地使用圖層。
使用智能對象
在置入LOGO的時候，將其調整為智能對象是非常有必要的。
首先，你需要在組中找到那個名為LOGO的圖層，鼠標右鍵點擊它，將其轉換為智能對象。
為了將LOGO置入這個圖層，我們在這個圖層上點擊右鍵，選擇“編輯內容”。
這個時候，我們會在PS中打開一個PSB格式的新文檔，原來PSD中的這個矩形的智能對象會變為一個透明圖層，我們將準備好的LOGO置于這個PSB文檔中，左對齊，這個時候如果你保存了這個PSB文檔，原來的PSD文檔中會同步改變。
此時，我們可以將這個LOGO智能對象圖層輕松改變、調整。為了更為有效地使用，我們可以在這個圖層上點擊右鍵，選擇“轉換為鏈接…”選項。
隨后，PS將會提醒你保存PSB格式的智能對象文件。作為網站圖片體系的重要組成部分，這個LOGO你會用上的。通常，我們會將其保存到一個名為“image”的文件夾中。
你在中編輯好了LOGO的智能對象，它還可以在中復用。在的組中找到LOGO的圖層用ps網頁制作的基本步驟，右鍵點擊它，選擇“替換內容”。
這個時候打開你保存那個.PSB 文件的文件夾，選擇LOGO，那么底部需要用到LOGO的地方也搞定了。
其他地方的處理方式也是類似的。
使用圖層效果
調整圖層效果想必大家都已經非常熟悉了。在案例中，我們借助圖層效果來為按鈕上色，添加漸變。具體的操作在這里就不贅述了。
重復這些步驟，這里就是需要你精心打磨的設計細節了。它們讓你的網頁的可讀性更高，增加視覺表現力，等等等等。
使用調整圖層
調整圖層的存在，使得設計師可以以非破壞性的方式來定制圖層的色調（亮度、對比度等）。在案例中，我們可以將模塊中的圖標變為黑白。在模塊組中找到對應的圖層，右鍵點擊，選擇“編輯內容”選項，隨后，點擊“新建調整圖層”然后選擇黑白效果就好了。
最終成品
最后，將預制的文本內容（標題、文本）替換成你需要的內容，然后這個原型就算是成品了！
安裝方法：
Step 1：下載擴展
先從官網下載對應版本的 擴展（下載鏈接），如下圖，點擊網頁頁腳的下載按鈕，需要提供和帳號才能下載，不過我們也很貼心的上傳到微盤上了。
Step 2：安裝路徑
這里西西下載的是CS6版本，解壓后把文件夾整個復制到CS6安裝目錄的：Plug-ins–目錄下。
Step 3：打開擴展
打開PS軟件，然后點擊菜單窗口>-擴展功能即可打開。