智慧型手機版網站受限於單一畫面中，只能提供有限的資料量，因此具有往垂直方向延伸網頁的特性。尤其是下層網頁，更需要設計出能清楚判別內容連續性及分段的版型。

Step 1. 分割區域
配合內容劃分區域。利用區分標題的框線，明確區分出低關聯性的內容。

Step 2.  設計內容
在分割後的版面裡，編排影像及模擬文字等必要內容。剛才建立的形狀圖層請配合內容狀態，一邊調整位置，一邊完成整體結構。

Step 3.匯出必要的影像，開始編輯網頁程式碼
匯出排版時需要的影像，開始著手編輯網頁程式碼。以CSS設定套用漸層效果，劃分區域用的矩形作為標題背景。

完成囉！