如何快速开发网站？

开发网站 ，通常是以下过程：

1. 找美工画图
2. 进行图片切分
3. 开发人员添加内容

如今还用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 >网站解释权归&nbsp;< b >TINY开源组织</ b >&nbsp;全部.</ 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小时的学习，就能够满点开发要求(可是开发期及维护期节省的时间就远不止这个数了)。

固然，光看写文档，以为又罗嗦，又难懂，光看不练假把式，实际操做一下就知道了。