大家都知道软件项目（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. Spark MLib 基本统计汇总 2

    4. 假设检验 基础回顾: 假设检验,用于判断一个结果是否在统计上是显著的.这个结果是否有机会发生. 显著性检验 原假设与备择假设 常把一个要检验的假设记作 H0,称为原假设(或零假设) (null ...

  2. vmware安装ubuntu卡在install vm-tools

    vmware,安装ubuntu或者centos,都有这个问题:vmware自作聪明,提示说"快速安装",然后会使用一个autoinst.iso文件来快速安装,并且装完系统后该重启了 ...

  3. sql查找最后一个字符匹配

    DECLARE @str AS VARCHAR(25)='123_234_567' select substring(@str,1,LEN(@str)-CHARINDEX('_',reverse(@s ...

  4. System.BadImageFormatException: 未能加载文件或程序集""或它的某一个依赖项。试图加载格式不正确的程序。

    解决方法: 1.更改程序集的生成目标平台为[Any CPU],或者针对平台进行编译. 项目右键->[属性]->[生成]->[生成目标平台] 2.尝试一下修改线程池设置为32位支持.

  5. GDUT校赛

    题目链接:http://4.gdutcode.sinaapp.com/contest.php?cid=1021 F 题意:给出n和m,要求满足gcd(x,y)=n && lcm(x,y ...

  6. Android WebService

    Web Service简介 Web of Services refers to message-based design frequently found on the Web and in ente ...

  7. python 生成器和递归

    生成器 1.定义 问题:python会把对象放到内存中,我们每次定义变量.列表等都会在内存中占用对应的地址块,所以当内存容量一定时,列表的容量会受到内存的限制,而且假如我们创建了一个包含200万个元素 ...

  8. 第三次个人作业——关于K米(Andorid)的案例分析

    第三次个人作业--关于K米(Andorid)的案例分析 1.K米简介 官方网址:http://www.ktvme.com/ 2.评测 2.1.上手体验 带着找bug的心态,兴致勃勃地开始体验 K米.打 ...

  9. hibernate----(Hql)查询

    package com.etc.test; import java.util.List;import java.util.Properties; import org.hibernate.Query; ...

  10. 【原创】一段简短的读取libglade的UI文件的Python代码

    准备写一个将Glade/GtkBuilder等格式的UI文件转换成C++代码的python程序 首先完成的是将LIBGlade格式读取至内存中 #!/usr/bin/env python # -*- ...