隨著各 Web-based 程式語言的進化，程式碼與畫面分離的技術也愈來愈多，如 PHP 的 Smarty 或 FastTemplate、JSP 的 JSTL 等等。甚至有的語言直接由 Script 進化為 Web Application Framework，如 ASP->ASP.Net、 JSP -> JSF。另外也有利用現有技術做出來的 Web Framework，如 Struts。
在 Web 上程式碼與畫面分離的概念已是大勢所趨，但是樣板的編輯大部份還是得透過程式人員解析修改後才能正常運作。
會發生這種狀況大部份是網頁設計跟程式人員沒有事前溝通好整個網站的架構，導致網頁設計作出來是一套，程式人員用的又是一套。當網頁設計要修改畫面時，看到程式人員轉成的樣板，除了搞不清楚那些樣板代碼是在做什麼，而且圖型也因為路徑結構不同，全部看到的都是叉叉。
程式人員這時就要跟網頁設計解釋為什麼圖型變 X ，大部份的原因都是因為程式人員會把網頁設計的樣板獨立放置在一個資料夾所致。
在網頁設計的環境:
\
|– index.html
|
+– [images]
|
|– logo.jpg
|
|– …
[首頁網址]
http://localhost/index.html
[首頁圖型相對路徑]
images/logo.jpg
程式人員習慣安排的環境:
\
|–index.php
|
+– [templates] (放網頁設計所有的東西)
|
|– index.html
|
+– [images]
| |
| |– logo.jpg
| |
| |– …
放到程式這邊來的環境
樣板路徑:
[靜態首頁網址]
http://localhost/template/index.html
[程式首頁路徑]
http://localhost/index.php (載入template/index.html)
[index.php 讀取圖型相對路徑]
templates/images/logo.jpg
看出哪裡不同了嗎?
也就是程式人員把所有樣板放入 tempates 資料夾裡面，導致相對路徑完全不同，圖也因此就消失了，這時程式人員就會開始在靜態網頁上面動手腳，才能可以順利讀取到對應的圖型。
要解決這種問題，其實也很簡單，只要把在樣板輸出前，把圖型的路徑轉為 template 的路徑即可。
假設原本在 Template 裡面的圖型路徑是 <img src=’123.gif’> ，載入樣板檔案後，由程式在畫面輸出前取代成為 <img src=’/template/123.gif’> 即可。
如此可便可以把程式跟畫面分的更開了，彼此也不會互相干擾作業，網頁設計人員也不用拿到一堆叉燒包的樣板畫面來改，真是皆大歡喜。
