V5Shop是一個網店系統軟體
這裡是針對V5Shop網店系統，先在影象處理軟體中把效果圖作出來，然後切圖，寫程式碼，根據所要實現的功能把標籤插入到頁面。
工具/原料
V5Shop網店系統
Dreamweaver軟體
步驟/方法
進行網頁框架佈局
下面的一張圖是普通行業網站模板首頁效果圖，那麼當我們得到了這樣一張效果圖以後改從何下手呢？
首先是網頁框架結構的分析，這個確定以後，就可以進行網頁的佈局。
從效果圖橫向來看，這個頁面的主體部分是左右結構；從效果圖縱向來看，頭部、中間、底部是比較規整的結構。據此分析，就可以大致把頁面做一個劃分。當然，這部分工作和製作其他網站是一樣，都需要對網頁的結構進行分析，這樣才能對頁面進行佈局，對於有經驗的網頁製作者來說這部分工作應該是輕車熟路的。這下面是搭建框架的程式碼(CSS部分另行編寫，這裡不探討CSS部分)
這裡放置頂部的選單和搜尋
這裡放置廣告和公告
這裡放置分類
這裡放置商品
這裡放置底部的資訊
下圖是頁面佈局的示意圖
確定需要使用哪些功能
首頁的佈局完畢以後，就要把具體要實現的功能擺放在一定的位置了，下圖就是功能分析圖，根據頁面的不同功能來選擇不同的功能名。
讓這些功能實現出來
確定了使用哪些功能是不夠的，因為功能必須要通過外觀檔案表現出來。運用標籤來實現功能：
{web_skin_頭部標籤}
{web_skin_廣告標籤}
{web_skin_公告標籤}
{web_skin_分類標籤}
{web_skin_商品標籤1}
{web_skin_商品標籤2}
{web_skin_底部標籤}