從HTML原型到jsp頁面完美轉型攻略(教你即使不會寫代碼也能弄出漂亮的網頁)


大家都知道軟件項目(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 的原型顯示效果一模一樣啦

    既然如此,我們大功告成啦

    寫下這篇文章,目的就是希望各位朋友也能輕輕松松做出漂亮的網站(*^__^*) 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM