Tiny实例：利用TINY框架官网制作过程详解

Tiny框架的官网已经开通：http://www.tinygroup.org/

新增加war包下载地址，呵呵愿意体验的可以直接下载并发布到容器即可试用，也可以查看里面的内容。

由于只花了两天时间制作，一天时间搞页面，一天时间搞内容，所以还非常粗糙，还有许多需要完善的地方，欢迎同学们提出改进和完善意见，但是今天网站做的好不好不是重点，重点讲讲网站是怎么做出来的。当然了，不用问，必须用Tiny框架来做，所以今天就来讲一下如何利用Tiny框架来高速有效的进行网站开发。

网站模板选择

首先声明，本人是美工盲，前台界面盲，JS盲。所以，指望自己弄个漂亮的网站出来那是根本没有可能的。好在现在互联网发达，只要用心找就是可以找得到的。想想准备用bootstrap方式的响应式网页方式，于是就找到了themeforest.net，然后就在其主题世界荡漾，最后感觉Perfetto网站效果不错，是我想要的效果，再查看一下源文件，发现比较简单，比较容易搞定。于是就想着就是它了。

于是从http://www.angelomazzilli.com/Perfetto/index.html上把源文件搞下来，呵呵，第一手资料就算有了。由于这个不是重点，所以就快速过掉，总之，我拿到了这个网站的html,js,css,图片等等一应资源，在本地目录中打开文件访问也正确，OK，可以进入下一步骤。

宏提取

所谓宏提取，就是把网页里重复出现的东东搞成个宏，这样就避免了重复内容到处复制来复制去：

#macro (a $aHref $title $aTarget )
<a#if($title) title="$title"#end#if($aHref)
              href="#if($aHref.startWith('/'))#if($TINY_CONTEXT_PATH.equals("/"))#else{TINY_CONTEXT_PATH}#end$#end$aHref"#end#if($aTarget)
              target="$aTarget"#end>
    $bodyContent
</a>
#end

#macro (img $imgHref $imgTitle)
        <img#if($imgTitle) alt="$imgTitle"#end#if($imgHref)
                           src="#if($imgHref.startWith('/'))#if($TINY_CONTEXT_PATH.equals("/"))#else{TINY_CONTEXT_PATH}#end$#end$imgHref"#end#>
</a>
#end

#macro(section)
<div class="section">
    $bodyContent
</div>
#end

#macro(container)
<div class="container">
    $bodyContent
</div>
#end

#macro(row)
<div class="row">
    $bodyContent
</div>
#end

#macro(span1)
<div class="span1">
    $bodyContent
</div>
#end

#macro(span2)
<div class="span2">
    $bodyContent
</div>
#end

#macro(span3)
<div class="span3">
    $bodyContent
</div>
#end

#macro(span4)
<div class="span4">
    $bodyContent
</div>
#end

#macro(span5)
<div class="span5">
    $bodyContent
</div>
#end


#macro(span6)
<div class="span6">
    $bodyContent
</div>
#end

#macro(span7)
<div class="span7">
    $bodyContent
</div>
#end

#macro(span8)
<div class="span8">
    $bodyContent
</div>
#end

#macro(span9)
<div class="span9">
    $bodyContent
</div>
#end

#macro(span10)
<div class="span10">
    $bodyContent
</div>
#end

#macro(span11)
<div class="span11">
    $bodyContent
</div>
#end

#macro(span12)
<div class="span12">
    $bodyContent
</div>
#end

#macro(hr)
<hr/>
#end

#macro(dropdownMenu $dropdownTitle $dropdownHref $dropdownSubTitle )
<li class="dropdown"><a href="$dropdownHref?activePage=$!menuKey">$dropdownTitle</a> <b class="caret"></b>
    <span>$dropdownSubTitle</span>
    $!bodyContent
</li>
#end

#macro(menu $menuTitle $menuHref $menuSubTitle  $menuKey)
<li class="dropdown#if($menuKey==$activePage) active#end"><a
        href="${menuHref}">$menuTitle</a>
    <span>$menuSubTitle</span>
    $!bodyContent
</li>
#end

#macro(nav)
<ul class="nav">
    $bodyContent
</ul>
#end

#macro(subMenu)
<ul>
    $bodyContent
</ul>
#end

#macro(subMenuItem  $title $href $menuKey)
<li><a href="$href"#if($menuKey==$activePage) class="current"#end >$title</a></li>
#end

#macro(pageTitle $title $page)
    #set($pageTitle="$title")
    #set($activePage="$page")
#end

#macro(modalFooter)
<div class="modal-footer&#