大家都知道软件项目（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. [日常训练]curves

    Description 小同学的弟弟小昨天学习了数学中的一元二次函数,但是由于学业不精,他一个晚上都在缠着小问一元二次函数的极值问题,小烦不可耐,于是,想请你帮忙弄个程序来应付小.程序要完成以下任务: ...

  2. android下载简单工具类

    功能是实现下载文件,图片或MP3等,为了简单起见使用单线程,此代码为MarsAndroid教程的复制品,放在此处,留着参考. 首先是一个得到字节流随后保存到内存卡上的工具类: package com. ...

  3. Android成长日记-APP的签名和打包

    签名的意义: 1. 为了保证每个应用程序开发者的合法 2. 防止部分人通过使用相同的Package Name来混淆替换已经安装的程序,从而出现一些恶意篡改 3. 保证我们每次发布的版本的一致性 (如自 ...

  4. glibc resolv/res_send.c getaddrinfo() buffer stack smash when dealing malformation big DNS Response Package

    catalogue . 漏洞简述 . 调试环境搭建 . 漏洞利用 . 漏洞分析 . 缓解修复方案 1. 漏洞简述 0x1: 函数调用顺序 getaddrinfo (getaddrinfo.c) -&g ...

  5. 关于《加密与解密》的读后感----对dump脱壳的一点思考

    偶然翻了一下手机日历,原来今天是夏至啊,时间过的真快.ISCC的比赛已经持续了2个多月了,我也跟着比赛的那些题目学了2个月.......虽然过程很辛苦,但感觉还是很幸运的,能在大三的时候遇到ISCC, ...

  6. 上班遇到的——关于Web安全

    恩只是流水账,内容写得可能比较随性,权当记录自己的成长:-D 今天经理特地开会跟我们讲了一下关于web安全的东西,SQL注入.文本编辑器.上传.本身程序权限管理漏洞 感觉好高级,做安全的人厉害,黑客也 ...

  7. PHP滚动日志

    PHP滚动日志类库 PHP记录日志,我之前接触过的有按照年月分文件夹,然后按照日分文件的日志记录方式,这种方式有利有弊,有他的使用场景,我今天要说的是另一种日志记录方式--文件滚动方式记录日志,当然了 ...

  8. POJ 3735 Training little cats

    题意 维护一个向量, 有三种操作 将第\(i\)个数加1 将第\(i\)个数置0 交换第\(i\)个数和第\(j\)个数 Solution 矩阵乘法/快速幂 Implementation 我们将向量写 ...

  9. Myeclipse如何设置字体大小

    由于Myeclipse一般是英文版的,这就给英语不太好的人带来了一定的麻烦,有时连设置个字体都无法顺利进行!!! 工具/原料   Myeclipse 方法/步骤   双击启动Myeclipse 点击& ...

  10. HTML学习笔记——post表单

    1>form1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...