开发网站 ,一般是如下过程:
-
找美工画图
- 进行图片切分
- 开发人员添加内容
现在还用JSP来做网页,当然属于...那啥的事情。
今天看看不一样的体验,稍有HTML基础,马上就可以照葫芦画瓢了。
第一步:找美工画图,第二步图片切分
这两步合成一步,到网上找模板,假设我们就看上这个模板了。
http://www.cssmoban.com/cssthemes/88.shtml
点击下面的地址http://down.cssmoban.com/cssthemes/dating-web-template-5.rar把它下载到本地。
展开看看,确实还不错,OK,就它了。
OK,现在看看,如何利用它来快速开发一个网站。
Step1:创建UI展现包
说白点,就是创建个jar包工程
Step2:把css和images目录复制到src/main/resources/demo/目录下
Step3:在src/main/resources/demo/目录下,创建文件demo.ui.xml
其文本内容如下:
1
2
3
4
5
|
< ui-components >
< ui-component
name = "demo" >
< css-resource >/demo/css/layout.css</ css-resource >
</ ui-component >
</ ui-components >
|
Step4:编写宏代码,这个时候,最好有dreamwaver等html编写工具,当然没有,用普通编辑器也可以,就是眼力要好一点。当然,如果你熟悉Firefox或Chrome,用浏览器直接找代码也是可以的。
中src/main/resources/demo/ 创建文件:demo.component文件
这个时候,要稍微有点抽象能力(所谓抽象能力就是找同类项的能力)
首先看首页,整体效果如下(受上传图片大小限制,只能这么小):
OK,我们放大看看局部:
可以看到,有Banner图片,有导致栏。
直觉告诉我们这几个导航栏的东东,应该是同样的模式做出来的,找到一看,是下面的样子。
1
2
3
4
5
6
7
8
9
|
< ul >
< li
class = "first" >< a
class = "current" >home</ a ></ li >
< li >< a
href = "about_us.html" >about us</ a ></ li >
< li >< a
href = "privacy.html" >privacy</ a ></ li >
< li >< a
href = "projects.html" >projects</ a ></ li >
< li >< a
href = "services.html" >services</ a ></ li >
< li >< a
href = "support.html" >support</ a ></ li >
< li >< a
href = "contact_us.html" >contact Us</ a ></ li >
</ ul >
|
所以,在
demo.component文件中,添加下面的内容:
1
2
3
4
5
6
7
8
9
10
11
|
#macro(menuBar)
< div
id = "menu" >
< ul >
$bodyContent
</ ul >
</ div >
#end
#macro(menuItem $key $url $title)
< li >< a
href = "$url" #if($CurrentPage==$key)
class = "current" #end>$title</ a ></ li >
#end
|
上面的两段脚本是velocity宏,熟悉的一看就明白,不熟悉的,先猜猜大致意思就可以了。
接下来,在页面中就可以用下面的方式来定义原来的菜单区域了:
1
2
3
4
5
6
7
8
9
|
#@menuBar()
#menuItem("about" "about_us.html" "about us")
#menuItem("privacy" "privacy.html" "privacy")
#menuItem("projects" "projects.html" "projects")
#menuItem("about" "about_us.html" "about us")
#menuItem("services" "services.html" "services")
#menuItem("support" "support.html" "support")
#menuItem("contact_us" "contact_us.html" "contact Us")
#end
|
好吧,可能有人会说,这样的写法,和原来的相比,不容易理解,还不如原来的好写呢。好吧,我也认同这种说法,不过我们放到小结的时候再来回顾这个问题。
通过我们眼睛的模式识别,我们发现下面的四个东东,好象也是一种类型的,那么,我们再抽象一下:
其HTML描述是这样的:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
< div
class = "box1" >
< div >
< h2 >Customer Service</ h2 >
< div > < img
src = "images/ico-med-1.png"
alt = ""
class = "about-img"
/> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sed odio et ante adipiscing lobortis. Quisque eleifend, arcu a dictum varius, < a
href = "#" >Read More...</ a > </ div >
< br
/>
< br
/>
</ div >
< div >< br
/>
< h2 >Global Reach</ h2 >
< br
/>
< div > < img
src = "images/ico-med-3.png"
alt = ""
class = "about-img"
/> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sed odio et ante adipiscing lobortis. Quisque eleifend, arcu a dictum varius, < a
href = "#" >Read More...</ a ></ div >
</ div >
</ div >
< div
class = "box2" >
< div >
< h2 >Award Winning</ h2 >
< div > < img
src = "images/ico-med-2.png"
alt = ""
class = "about-img"
/> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sed odio et ante adipiscing lobortis. Quisque eleifend, arcu a dictum varius, < a
href = "#" >Read More...</ a ></ div >
< br
/>
< br
/>
</ div >
< div >
< h2 >Availability</ h2 >
< div >< br
/>
< img
src = "images/ico-med-4.png"
alt = ""
class = "about-img"
/> Lorem ipsum dolor sit amet, consd
ectetuer adipiscing elit. Proin sed odio et ante adipiscing lobortis. Quisque eleifend, arcu a dictum varius, < a
href = "#" >Read More...</ a > </ div >
</ div >
</ div >
|
我们抽象成下面的样子:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
#macro(box $boxClass)
< div
class = "$boxClass" >
$bodyContent
</ div >
#end < span ></ span > #macro(boxItem $title $imgUrl $moreUrl)
< div >
< h2 >$title</ h2 >
< div >
#img("$imgUrl")
$bodyContent, #moreHref("$moreUrl")
</ div >
</ div >< span ></ span >
< span ></ span >< span ></ span >#end< span ></ span >
#macro(img $url)
< img
src="<span></ span >$url< span ></ span >"
alt="" class="about-img" />
#end
#macro(moreHref $url)
< a
href = "$url" >Read More...</ a >
#end
|
原来的代码就可以写成下面的样子了:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
#@box("box1")
#@boxItem("Customer Service" "images/ico-med-1.png" "#")
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sed odio et ante adipiscing lobortis. Quisque eleifend, arcu a dictum varius
#end
#@boxItem("Global Reach" "images/ico-med-3.png" "#")
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sed odio et ante adipiscing lobortis. Quisque eleifend, arcu a dictum varius
#end
#end
#@box("box2")
#@boxItem("Award Winning" "images/ico-med-1.png""#")
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sed odio et ante adipiscing lobortis. Quisque eleifend, arcu a dictum varius
#end
#@boxItem("Availability" "images/ico-med-1.png""#")
Lorem ipsum dolor sit amet, consd ectetuer adipiscing elit. Proin sed odio et ante adipiscing lobortis. Quisque eleifend, arcu a dictum varius
#end
#end
|
通过不断抽象,就可以把原来杂乱无章的Html代码从我们的页面中拿掉,只留下我们要显示的数据内容。
Tiny的哲学是同样的事情,不要做两次,很明显,那些Header Footer是每个页面都要显示的,如果避免这些东东总要被重写呢?
这里就要创建一个布局文件default.layout
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
< div
id = "layout" >
< div
id = "header" >
< div
id = "logo" >< a
href = "#" >< img
src = "images/logo_1.gif"
alt = ""
/></ a ></ div >
< div
class = "member_login" >
< div
class = "login_box" >
< form
action = ""
method = "get" >
< fieldset >
< div
class = "column_1" >
< label >username :</ label >
< label >password :</ label >
</ div >
< div
class = "column_2" >
< input
type = "text"
name = ""
value = ""
/>
< input
type = "text"
name = ""
value = ""
/>
</ div >
< div
class = "column_3" >
< input
type = "image"
src = "images/login_btn.gif"
class = "login" />
</ div >
< div
class = "column_4" >
< label
class = "password" >< a
href = "#" >Forgot < br
/>
password</ a ></ label >
</ div >
</ fieldset >
</ form >
</ div >
</ div >
</ div >
< div
id = "body_container" >
$pageContent
</ div >
< div
id = "footer" >
< div
class = "footer_link" >
< ul
style = "color:#FFf;" >
Copyright (c) Sitename.com. All rights reserved. Design by Stylish From < a
style = "text-decoration:underline; color:#FFF;"
href = "http://www.cssmoban.com" >cssMoban.com</ a >.
</ ul >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
这样,所有的页面都会自动拥有header和Footer。
但是上面的样子太难看了,我们可以通过定义宏,把它简化成下面的样子。
1
2
3
4
5
|
< div
id = "layout" >
#header()
$pageContent
#footer()
</ div >
|
哇,整个世界清静了,当然,从Tiny的建议来说,最上层的<div id="layout">也尽量不要原生的写来了,变成下面的样子就是最终的结果:
1
2
3
4
5
|
#@pageLayout()
#header()
$pageContent
#footer()
#end
|
这样带来的好处是,什么时候要修改这些html原素,与使用它们的人毫无关系,改了,所有的人就都会生效。
至此,我们已经学会了,怎么进行抽象(眼睛能发生重复的地方,会一点html和Vecocity);学会了怎么写布局,就是在一大段文本当中放一个$pageContent的标记,表示其它page页面就塞在这个位置。学会了编写宏,带有$pageContent的表示,它里面可以装别的东东。学会了怎么做UI组件包。
基于Tiny编写网站 ,带来的好处是:网站构建中,同样的东西,永远不用写第二次;页面的易维护性非常强,特别简洁;未来的维护非常方便,进行大的结构化调整对于最终页面也没有任何影响。
下面展示一下Tiny网站的构建代码:
下面是整体布局default.layout文件的内容:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
#@wrap()
#@header()
#sitename("TINY WEB FRAMEWORK" "我们的目标是: Think big, start small.")
#@topnav()
#topnavItem("home" "Home" "/tinysite/home/home.page")
#topnavItem("faq" "FAQ" "/tinysite/home/faq.page")
#topnavItem("feature" "Feature" "/tinysite/home/feature.page")
#topnavItem("sample" "Sample" "/tinysite/home/sample.page")
#topnavItem("demo" "Demo" "/tinysite/home/demo.page")
#topnavItem("Task" "Task" "/tinysite/home/task.page")
#topnavItem("document" "Document" "/tinysite/home/document.page")
#topnavItem("resource" "Resource" "/tinysite/home/resource.page")
#topnavItem("about" "About" "/tinysite/home/about.page")
#end
#clear()
#@headercolumn1()
我们要做的不只是平台,更是一件艺术品,从所有项目参与者的视觉来看,它都是简洁、高效、美观的。
#end
#@headercolumn2()
< div
id = "search_top" >
< form
action = "/search/search.php"
method = "get" >
< p >< input
type = "text"
name = "query"
id = "query"
class = "keyword" /> </ p >
< p
class = "button" >< input
name = ""
type = "image"
src = "${TINY_CONTEXT_PATH}/images/searchbutton.gif"
alt = "Search"
/></ p >
< p
class = "hide" > < input
type = "hidden"
name = "search"
value = "1"
/> </ p >
</ form >
</ div >
< div
id = "subscribe" >< a
href = "#" >Subscribe</ a ></ div >
#end
#clear()
#end
#@contents()
$!pageContent
#end
#@footer()
< p >Copyright TINY open source group.</ p >
< p >网站解释权归 < b >TINY开源组织</ b > 所有.</ p >
#end
#end
|
下面是关于页面about.page的内容:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
#@homepage()
#@faq("关于我们")
#@servicesItem("idea")
我们的目标:通过此开源项目的运作,对于J2EE应用框架中的各种概念与架构进行充分的验证与分析,达到概念清晰,理论体系完整,功能基本完成。
系统的编写,主要利用业余时间编写。
#end
#end
#@faq("主要参与者")
#@servicesItem("idea")
spzebra:负责架构设计,核心代码编写。
#end
#end
#end
|
下面是demo.page的页面内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
#@homepage()
#@faq("演示列表")
#@servicesItem("idea")
HelloWorld
#end
#@servicesItem("design")
四则运算
#end
#@servicesItem("apps")
简单数据维护
#end
#@servicesItem("mobile")
站内邮件系统
#end
#end
#end
|
等等,所以的页面都非常简捷。
上述两个页面的执行效果图:
关于页面效果:
示例页面效果
小结:
采用Tiny与传统网页开发的不同之处在于:
传统的采用html编写,Tiny则基于宏编写,宏有更高的抽象度,避免了重复代码的编写,使得修改的时候更加容易。
传统的html,每个页面都要完整编写,Tiny则不需要,每个页面只写每个页面需要的部分。因为Tiny框架引入了布局的概念,可以把重复性的内容都放到布局中去。由于Tiny支持多重布局,支持布局继承,支持个性化布局,因此所有需求都可以得到满足。
国际化支持,如果要构建国际性网站,Tiny在这方面有强力支持。
静态化支持,Tiny默认是动态网站,但是可以根据配置提供页面静态化能力,大大提升网站响应速度,降低数据库压力。
当然,Tiny提供了这么多优点,也会带来一点要求,就是需要学习Velocity模板技术,一般来说3小时的学习,就可以满点开发要求(但是开发期及维护期节省的时间就远不止这个数了)。
当然,光看写文档,觉得又罗嗦,又难懂,光看不练假把式,实际操作一下就知道了。
分享到:
相关推荐
收集整理了目前主流的快速网站开发工具,让你快速掌握网站开发。
WebBuilder是一款跨...使用WebBuilder可快速开发出功能强大的各种企业级应用系统,也可以基于应用系统平台做深度的二次开发。 您可以到 http://www.putdb.com 在线使用或下载到本地使用,软件开源基于GPL协议授权。
[测试开发技术] 面试必问:如何快速定位BUG?BUG定位技巧及N板斧!.docx
快速开发平台源码 功能介绍: EasyPlat.Net提供基于DATASET的三层结构,可以通过直接使用BizSQL进行两层开发。包含账号、角色、权限,菜单管理;导入、导出、打印、加密等方法;公共字典、XML字典使用;日志记录等...
U8快速开发工具是针对客户化开发的特点,基于U8平台而开发的一套简化、快速、高效的U8单据开发工具。使用快速开发工具开发的单据与U8标准单据风格一致,可通过数据库脚本的简单调整设置单据上字段格式(文本、日期、...
国外优秀网站模板,快速开发利器之一,整站静态页面css,html,js
Microsoft Azure:如何借GPT快速建构应用?掌握9大通用规则让开发快人一步
PyQt快速开发与实战电子书并非源码。交流学习使用。资源来自于网络,如有侵权立即删除。
1、JAVA 首创JFinal 快速开发平台,提升80%开发效率,快速搞定常规业务,灵动迅捷!源码下载 Eova快速开发平台 最简单的快速开发平台,首创JFinal快速开发平台,降低70%开发成本。快速搞定网站后台管理系统,用EOVA...
大厂程序员是如何做敏捷开发的_大公司程序员编程开发流程_大公司是如何快速响应用户需求并实现产品的持续交付
专业MIS/ERP开发,有成熟的插件式快速开发框架系统-FOXMIS快速开发平台,能在最短的时间内,开发出成熟,稳健,易用,功能全面的MIS/ERP系统; 支持高级的二次开发,界面定义,数据定义,规则定义等,运行时脚本和对象事件处理...
轻量级智能快速开发平台,可以帮助您解决项目中90%的重复工作,让您更多关注业务逻辑。由于本身轻量级特性,可根据自身需求二次开发想要的功能。使用 Spring boot,主流趋势,开箱即用 。 使用 Maven 多模块 构建...
国外优秀网站模板,快速开发利器之三,整站静态页面 css,html,js
专注于快速开发电商移动网站活动页的SDK库
有木有一个通用的快速开发框架?并且得是ASP.NET MVC And Bootstrap?数据库不要手工创建?框架对未来业务支持的扩展性好?这么简单的功能还需要一天搭建基础环境?能不能只关心我所需要的业务? 有这样的一个项目...
PyQt5快速开发与实战,并且附上源码实例。《PyQt5快速开发与实战》既是介绍PyQt 5的快速入门书籍,也是介绍PyQt 5实战应用的书籍。PyQt 5是对Qt所有类的Python封装,既可以利用Qt的强大功能,也可以利用Python丰富的...
网站快速开发框架源代码网站快速开发框架源代码网站快速开发框架源代码网站快速开发框架源代码
不是我写的,源码也没有 只有dll。自己也没用过 不过貌似很强大,可以下来看看。希望对你有帮助
非常适合个人的快速开发一款应用,网络图片,本地图片,文件上传下载,http请求等等。
C#.NET快速开发框架_V1.1程序 C#.NET快速开发框架_V1.1程序 C#.NET快速开发框架_V1.1程序 C#.NET快速开发框架_V1.1程序 C#.NET快速开发框架_V1.1程序