大家都知道软件项目（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
分享到：
相关推荐
非常漂亮的网站html页面原型
html界面原型代码
该资源内包含了一个考勤管理系统全部html页面，本人亲测过，页面齐全，非常适合学习使用，有需要的童鞋请积极下载哦！
jsp 韩顺平jsp九讲 html 原型 界面
原型页面原型页面原型页面原型页面原型页面原型页面原型页面原型页面
网上商城的页面原型 适合多种语言使用 源代码+rar格式
这30款页面原型，分享给大家，个人感觉挺好的
手机原型风格html页面多个，登录，主页，分页等
旅游系统原型及基本业务代码旅游系统原型及基本业务代码旅游系统原型及基本业务代码旅游系统原型及基本业务代码旅游系统原型及基本业务代码旅游系统原型及基本业务代码旅游系统原型及基本业务代码旅游系统原型及基本...
页面原型
上传代码 原型上传代码 原型上传代码 原型上传代码 原型上传代码 原型上传代码 原型
原型模式代码示例，使用JAVA代码演示。配有说明文档，有助于对原型模式的理解。
该资源包含了一个考勤系统的基本功能页面，想学习html技术的童鞋请积极下载哦！
JSP写的简单OA系统，功能分为资料管理、资产管理、费用管理、人力资源管理、个人工具、工作计划管理、车辆管理，每大项内有若干小项，还有个性的下拉菜单功能，程序原型是惠通在线OA办公系统，是以计算机技术和网络...
绿色页面风格，宠物店的CMS后台管理系统的页面原型-html页面模板，有问题可以私聊沟通，共有8个页面
设计模式-原型模式源代码
个人博客页面原型素材html
html原型 html原型 html原型 html原型 html原型 html原型 html原型 html原型 html原型 html原型
前期网页设计原型工具 简单、易操作 用户名：BEAN 注册码：MZlb4FJwOVw+j04A4pX8S5genhcCOo1adsaH/ZHOukDY7OyPJcCKUHlwUEfU0Osr
原型和原型链整体例子从原型的创建，原型与对象的关联关系，实例与原型的关系以及原型链的形成和运用等等均做了例子的说明