大家都知道软件项目（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. Day_6作业_模拟人生

    as #!/usr/bin/env python # encoding: utf-8 class wisdom(object): def __init__(self,n,g): self.n = n ...

  2. 通过Calendar类判断是否是周末及是否在指定时间

    package time; import java.sql.Timestamp; import java.util.Calendar; import java.util.Date; public cl ...

  3. Beta版本——第六次冲刺博客

    我说的都队 031402304 陈燊 031402342 许玲玲 031402337 胡心颖 03140241 王婷婷 031402203 陈齐民 031402209 黄伟炜 031402233 郑扬 ...

  4. 北京地铁站点遍历最少经站次数问题普遍意义上是一个NP问题，目前不存在多项式时间算法能够解决该问题

    http://www.cnblogs.com/jiel/p/5852591.html 众所周知求一个图的哈密顿回路是一个NPC问题: In the mathematical field of grap ...

  5. javascript表单验证

    表单HTML <form action="" method="post"> <fieldset class="login" ...

  6. SQL Server 2012 学习笔记3 增查改删

    现在举例几个"增查改删"的语句 select * from UserInfor --查找所有字段 select username,UserId from UserInfor -- ...

  7. Servlet Request的 getInputStream() getReader() getParameter()

    如果你知道了这三者的区别,请忽略 最近碰到了servlet对入参获取方式的处理问题,因为二方库处理不当,导致了获取不到入参的情况,之前也知道这三个方法不兼容,现简单介绍下 1.这三个获取入参的方法,是 ...

  8. xpath php

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> < ...

  9. my.conf 配置编码为utf-8

    MySQL基础配置之mysql的默认字符编码的设置(my.ini设置字符编码) MySQL的默认编码是Latin1,不支持中文,那么如何修改MySQL的默认编码呢,下面以设置UTF-8为例来说明. M ...

  10. python --- Python中的callable 函数

    python --- Python中的callable 函数 转自: http://archive.cnblogs.com/a/1798319/ Python中的callable 函数 callabl ...