大家都知道軟體項目（web）開發之前都要先做原型設計，而我們使用的比較多的一款原型設計軟體就是Axure rp了。在Axure rp上畫原型不需要任何編碼能力，而且產生的原型可以在瀏覽器上運行。除了沒有資料庫和少了些許邏輯以外，產生的原型與真實的網站相差無幾。
但是，大家可以看到Axure rp產生的原型檔案是HTML格式的，那麼如果我們想在我們的實際開發中複用上這原型的代碼，就必須將HTML轉化為JSP格式。有的軟體自稱具有這樣的功能：將HTML轉為JSP，但是我去試過，轉出來的JSP很詭異，與之前的HTML顯示效果差的不少。
所以，想要把原型轉化為可以用於開發的網頁頁面，即將HTML轉為JSP，還是要我們自己動手噢。
步驟一：產生原型
用Axure rp可以直接產生原型（F5即可），選擇路徑後，該路徑上會出現一個檔案夾（假設叫原型），就是我們的原型了。
其中的HTML檔案是主要的頁面
原型\resources\css目錄下檔案的作用是描述Axure rp中統一的顯示風格
原型\resources\scripts目下是一些指令檔
原型\頁面名_files\目錄下是該頁面專屬的頁面風格描述檔案，指令檔，和該頁面會用到的圖片資源。
步驟二：建立web項目並配置
既然是web開發，自是用myeclipse了。jdk的配置和tomcat的配置就不再講啦。建立一個叫MyWeb的項目，右擊項目名MyWeb，建立一個JSP頁面，就叫做myJsp吧。
這樣的一個JSP頁面我們需要對它稍作修改，以支援HTML中的一些東西。實際上只需要修改第一行：pageEncoding="ISO-8859-1"，把後面的編碼格式改為“UTF-8”就行啦。
步驟三：加入HTML並修改其他配置
我們把原型中某頁面的HTML檔案用文字格式設定開啟，全選，複製~~~然後開啟剛剛項目的myJsp.jsp，把剛剛的東西複製到<html></html>之間即可。好了，這樣我們的代碼就可以運行了，但是別以為這麼簡單就結束了，不然這篇文章有什麼意義是吧(*^__^*)
此時我們的jsp檔案有什麼問題呢，第一，它其中沒有包含會用到的圖片資源，css等資源。第二，它的對資源的擷取路徑有問題。還有一點非常非常重要的，就是Axure rp產生的原型的HTML中的資來源目錄中會有中文，但是這個帶有中文的資來源目錄是JSP不能識別的。。。這點等等我會提到。
知道了這些問題，趕緊改。先把原型的resource目錄拷貝到項目的webroot目錄下，再把頁面名_files檔案夾拷到webroot目錄下。然後，我們先把<link href="resources/css/jquery-ui-themes.css" type="text/css" rel="stylesheet">這樣的代碼中使用的css目錄改成我們剛剛拷到webroot下的resource檔案裡的相應css檔案（檔案是相同的噢）。 再修改<SCRIPT src="resources/scripts/jquery-1.4.2.min.js"></SCRIPT>中的js檔案，還是在我們剛剛拷貝進webroot中的檔案中找到相應檔案，把這個檔案的路徑替換剛才的路徑。
最後修改圖片資源路徑。我們在代碼中仔細尋找<INPUT type="image" id=u2 src="Images\transparent.gif" class="u2" >和<IMG src="Images/4.jpg" class="raw_image">樣子的代碼，這樣的代碼意思是引用該圖片並顯示在網頁上。我們還是用和剛剛相同的方法找到剛剛拷貝進項目的檔案夾中的相應圖片，將其相對路徑改到src=“ ”中。
還有要注意的一點是，無論是圖片路徑還是css路徑，千萬不要包含中文，不然JSP無法識別的噢~~~我自己今天搞了一個多小時才發現這個蛋疼的問題
好了，項目基本上搞定了，讓我們運行看看。
步驟四：發布和運行
先用tomcat發布項目，再在瀏覽器中輸入http://localhost:8080/項目名稱/myJsp.jsp，有沒有發現頁面顯示效果和Axure rp 的原型顯示效果一模一樣啦
既然如此，我們大功告成啦
寫下這篇文章，目的就是希望各位朋友也能輕輕鬆鬆做出漂亮的網站(*^__^*)
覺得對您有協助的話請頂我一下噢~~~O(∩_∩)O
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
