大家都知道软件项目（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 的原型显示效果一模一样啦

既然如此，我们大功告成啦

写下这篇文章，目的就是希望各位朋友也能轻轻松松做出漂亮的网站(*^__^*)

从HTML原型到jsp页面完美转型攻略（教你即使不会写代码也能弄出漂亮的网页）的更多相关文章

  1. Opencv 完美配置攻略 2014 (Win8.1 + Opencv 2.4.8 + VS 2013)

    http://my.phirobot.com/blog/2014-02-opencv_configuration_in_vs.html 2012年4月给同学写了篇傻瓜式的 VS2010+Opencv- ...

  2. html和jsp页面中把文本框禁用，只能读不能写的方法

    方法常用有三种: 第一种,使用   onfocus="this.blur()" <input name="deptno" type="text& ...

  3. Opencv 完美配置攻略 2014 (Win8.1 + Opencv 2.4.8 + VS 2013)上

    下载安装软件 下载 Opencv for Windows 最新版本,本文是 Opencv 2.4.8.双击后会出现解压提示,实际上就是“安装”了,路径填写为 D:/Program Files,然后确定 ...

  4. Opencv 完美配置攻略 2014 (Win8.1 + Opencv 2.4.8 + VS 2013)下

    前面说了一些在OpenCV在VS2013下的配置的过程,下面说一下其中的个别的知识点,了解一下这样配置的一点点更细节的过程.其实配置项目属性的时候,有两种方式: 一.通过项目属性管理器配置项目属性表 ...

  5. Opencv 完美配置攻略(Win8.1 + Opencv 2.4.8 + VS 2013)

  6. java+eclipse+tomcat+mysql+jdbc——完美配置攻略

    说明: 软件均采用最新版本,请大家详细阅读,注意每个细节,无需分门别类的百度各种教程,配置java环境这一篇就够了. 所需软件及版本(参考): java8; - jdk1.8.0_60; - jre1 ...

  7. UML Rose2003完美破解攻略

    Rational Rose 2003 软件project画图软件 ,当然还不止画图,对于那些不想用英文版Rational Rose2003的同志们.这个Rational Rose2003 版本号已经汉 ...

  8. 关于从JSP页面插入数据到数据库中乱码问题的解决

    问题描述:最近我在写一个j2ee的留言板系统模块,遇到了一个非常让我头大的问题,当我从JSP页面输入数据后,通过hibernate中的业务逻辑类HQL语句把这个数据插入到本地的mysql数据库中,可是 ...

  9. 关于HTML(JSP)页面的缓存设置 －－ cache-control

    我在项目中遇到这么一个问题,当用户登录了系统后,进入并copy下系统某个页面的link,然后关闭浏览器,重新打开浏览器,把刚才复制好的link paste到浏览器的地址栏去,直接enter,发现浏览器 ...

随机推荐

  1. [U3D 导出Xcode工程包，用Xcode给U3D脚本传递参数]

    1.导出Xcode工程 File->Building and setting,导出IOS工程(有错误会失败) 2.运行Xcode工程,在Classes文件夹的UI文件夹里,早到UnityAppC ...

  2. Codeforces 711E ZS and The Birthday Paradox

    传送门 time limit per test 2 seconds memory limit per test 256 megabytes input standard input output st ...

  3. JS-用js的for循环实现九九乘法表以及其他算数题等

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>f ...

  4. gnuplot配置HOME目录

    http://blog.csdn.net/jspenliany/article/details/39828261 本人使用gnuplot绘图,使用console version的来进行处理的时候,经常 ...

  5. 【原】web移动端常用知识点笔记

    摘要:因为平时搞移动端的比例多一点,做个小小的总结.虽然网上很多这方面的总结,不过还是想自己也总结一下,适合自己的才是最好的.这样也方便以后自己的查阅 viewport模板——通用 <!DOCT ...

  6. Android之Proguard语法

    -include {filename} 从给定的文件中读取配置参数 -basedirectory {directoryname} 指定基础目录为以后相对的档案名称 -injars {class_pat ...

  7. 磁盘里的B,MB,GB,TB储存单位是怎么换算大小的?

    磁盘里的B,MB,GB,TB是怎么换算大小的? 1TB=1024GB1GB=1024MB1MB=1024KB1KB=1024Byte 注:Byte就是B也就是字节KB是千字节MB是兆GB是吉字节 即千 ...

  8. Oracle连接查询

    一.内连接和外连接    内连接用于返回满足连接条件的记录:而外连接则是内连接的扩展,它不仅会满足连接条件的记录,而且还会返回不满足连接条件的记录,语法如下: select table1.column ...

  9. BufferedReader类

    BufferedReader类用于从缓冲区中读取内容,多有的输入字节数据都将放在缓冲区中. BufferedReader中定义的构造方法只能接收字符输入流的实例,所以必须使用字符输入流和字节输入流的转 ...

  10. php函数ob_start()、ob_end_clean()、ob_get_contents()

    下面3个函数的用法 ob_get_contents() - 返回输出缓冲区的内容 ob_flush() - 冲刷出(送出)输出缓冲区中的内容 ob_clean() - 清空(擦掉)输出缓冲区 ob_e ...