从HTML原型到jsp页面完美转型攻略(教你即使不会写代码也能弄出漂亮的网页)
来源:互联网 发布:js跨域修改iframe样式 编辑:程序博客网 时间:2024/05/16 09:31
但是,大家可以看到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原型到jsp页面完美转型攻略(教你即使不会写代码也能弄出漂亮的网页)
- 从HTML原型到jsp页面完美转型攻略(教你即使不会写代码也能弄出漂亮的网页)
- 网页天幕代码!从css、html到js的完美实现(自执行函数加原型的完美应用)!!
- DIY你的Eclipse--打造漂亮代码和完美配色
- DIY你的Eclipse--打造漂亮代码和完美配色
- 教你写一个简单的网页(html网页开发入门)
- 教你写一个简单的网页(html网页开发入门)
- html标签特效代码大全(让你制作漂亮的页面效果)
- 把你的代码写得漂亮些
- 将JSP页面完美转换HTML页面
- 从PSD到HTML,网页的实现
- JAVA WEB开发从数据库中查询到的数据用list怎么在JSP页面整齐的显示出来,请写代码,
- 最简单的方法,在index.jsp页面写一个JS跳转到你的action。
- JSP和HTML关闭页面的代码
- 手机如何从网页完美的跳转到应用程序
- 要写漂亮的代码
- 要写漂亮的代码
- ASPX网页,添加标签到你意想不到的位置,让生成的html代码正确
- HDU 1267 下沙的沙子有几粒?(递推)
- 计算机视觉领域的一些牛人博客,超有实力的研究机构等的网站链接
- android布局详解
- 一致性hash算法
- hdu 3664 递推
- 从HTML原型到jsp页面完美转型攻略(教你即使不会写代码也能弄出漂亮的网页)
- 使用Eclipse重构代码——Replace Temp with Query
- ortp库使用入门
- MFC 制作OCX插件
- 【4】Decide if two strings are anagrams or not
- POJ3356 AGTC
- Cookie详细介绍
- ubuntu 使用命令行将txt转换为pdf
- java.lang.UnsupportedClassVersionError: Bad version number in .class file