新增加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">

    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>

</div>
#end
 
#macro(breadcrumb)

<ul class="breadcrumb">

    $bodyContent

</ul>
#end
 
#macro(breadcrumbParentItem $title $url)

<li>#@a($url $title)$title#end <span class="divider">/</span></li>
#end
 
#macro(breadcrumbItem $title)

<li class="active">$title</li>
#end
 
#macro(thumbnails $thumbnailsId)

<ul class="thumbnails"#if($thumbnailsId)id="$thumbnailsId"#end>

    $bodyContent

</ul>
#end
 
#macro(filterContainer)

<ul id="portfolio" class="thumbnails ">

    $bodyContent

</ul>
#end
 
#macro(filterContainerItem $column $type)

<li class="span$column $type" style="opacity: 1;">

    <div class="thumbnail" style="text-align:left;">

            $bodyContent

    </div>

</li>
#end
 
#macro(clearfix)

<div class="clearfix"></div>
#end
 
#macro(thumbnailsItem $name $title $qq $email $imgUrl)

<li class="span3">

    <div class="thumbnail">

        #img($imgUrl)

        <div class="caption">

            <h3><a href="#">$name</a></h3>

            <em>$title</em>
 
            <p>QQ:$!qq</p>
 
            <p>邮箱:$!email</p>

            #clearfix

            $!bodyContent

        </div>

    </div>

</li>
#end
 
#macro(slides)

<div class="slides">

    $bodyContent

</div>
#end
 
#macro(slidesItem $imgSrc $title $href)

<div>#@a($href $title)#img($imgSrc $title) #end
$bodyContent

</div>
#end
 
#macro(slidesDetail)

<div class="detail">

    $bodyContent

</div>
#end
 
#macro(slidesDetailInfo $title $subTitle)

<h3>#@a($href $title)$title#end</h3>

<em>$subTitle</em>

    $bodyContent
#end
 
#macro(title $title $subTitle)

<div class="row">

    <div class="span12">

        <h1 class="no-margin">$title</h1>
 
        <p class="lead">$subTitle</p>

    </div>

</div>
#end
 
#macro(wideBanner)
<!-- Wide Banner -->

<div class="wide-bg">

    <div class="container">

        $bodyContent

    </div>

</div>
#end
 
#macro(sidebar $title)
<!-- Sidebar -->

<div class="span3 sidebar">

    #if($title)

        <h3 class="half-margin">$!title</h3>

    #end

    <ul class="nav nav-tabs nav-stacked">

        $bodyContent

    </ul>

</div>
#end
 
#macro(sidebarItem $title $href )

<li>#@a($href $title)$title#end</li>
#end
 
#macro(lead $id $title)

<p class="lead no-margin" id="$id">$title</p>

<div class="">

    $bodyContent

</div>

<hr class="no-margin" style="margin: 5pt;5pt;5pt;5pt;"/>
#end
 
#macro(filter)
<!-- Portfolio Filter -->

<div id="filter" class="half-margin">

    $bodyContent

</div>

<div class="clearfix"></div>

</div>
#end
 
#macro(filterItem $title $current)

<button class="btn btn-small half-margin#if($current) current#end">$title</button>
#end
 
#macro(shortcut $title $href $icon)

    #@a($href $title "_blank")#img($icon)#end
#end
 
#macro(caption $title)

<div class="head" style="text-align: left;">

    <h3><strong>$title</strong></h3>

    $bodyContent

</div>
#end
 
#macro(masonry)

<div id="masonry">

    $bodyContent

</div>
#end
#macro(masonryItem $masonryItemClass)

<div class="single $masonryItemClass">

    $bodyContent

</div>
#end
 
#macro(logo)

<p class="logo"><a href="home.page"><span>Tiny Framework</span></a></p>
#end
 
#macro(toTop)

<div id="toTop">Top</div>
#end

通用的宏已经写好，接下来就是写与网站有关部分的宏：

#macro(header)
<!-- Header -->

    #@row()

        #@span3()

        #logo

        #end

        #@span9()

        <div class="top-header text-right"><em>QQ群: <em>228977971</em> 邮箱：<a

                href="mailto:luo_guo@icloud.com">luo_guo@icloud.com</a></em>
 
            <div class="social">

                #shortcut("Sonar代码检查" "http://www.tinygroup.org/sonar/dashboard/index/org.tinygroup:tiny" "img/sonar.ico")

                #shortcut("Hudson持续集成" "http://www.tinygroup.org/hudson/job/tiny/" "img/hudson.png")

                #shortcut("TinyFramework OSC首页" "http://www.tinygroup.org/sonar/dashboard/index/org.tinygroup:tiny" "img/osc.ico")

                #shortcut("TinyFramework GIT网址" "http://git.oschina.net/tinyframework/tiny" "img/git.ico")

            </div>

        </div>

        <div class="text-left">

            <h2></bit> Think big, start small, scale fast.</h2>

        </div>

        #end

    #end
#end
 
#macro(footer)

    #@section()

        #@container()

        <!-- Footer -->

            #@row()

                #@span12()

                <div class="footer">

                    <hr/>

                    <p class="text-center">&copy;Copy Right 2009~2014 <strong>tiny group</strong><br/>

                        www.tinygroup.org</p>

                </div>

                #end

            #end

        #end

    #end
 
#end
 
#macro(navbar)
<!-- Navbar -->

<div class="navbar"#* id="nav-follow"*#>

    <div class="navbar-inner">

        <div class="container"><a data-target=".navbar-responsive-collapse" data-toggle="collapse"

                                  class="btn btn-navbar"><i class="icon-th-list"></i></a> <a

                data-target=".navbar-responsive-collapse" data-toggle="collapse" class="brand">Navbar</a>
 
            <div class="nav-collapse collapse navbar-responsive-collapse">

                #@nav()

                    #@menu("Homepage" "home.page" "首页" "home")#end

                    #@menu("philosophy" "philosophy.page" "设计理念" "philosophy")#end

                    #@menu("principle" "principle.page" "设计原则" "principle")#end

                    #@menu("Features" "feature.page" "功能特性" "feature")#end

                    #@menu("FAQ" "faq.page" "常见问题解答" "faq")#end

                    #@menu("encourage us" "encourage.page" "鼓励我们" "encourage")#end

                    #@menu("About us" "about.page" "关于我们" "about")#end

                #end

            </div>

        </div>

    </div>

</div>
#end

上面就把宏处理方面的工作处理完毕了，接下来就是设定页面结构了。

页面结构设计

Html页面结构

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

        "http://www.w3.org/TR/html4/strict.dtd">
<!--[if IE 7 ]>        <html class="no-js ie ie7 lte7 lte8 lte9" lang="en-US"> <![endif]-->
<!--[if IE 8 ]>        <html class="no-js ie ie8 lte8 lte9" lang="en-US"> <![endif]-->
<!--[if IE 9 ]>        <html class="no-js ie ie9 lte9>" lang="en-US"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->

<html class="no-js" lang="en-US"> <!--<![endif]-->

<html lang="en">

<head>

    <meta charset="utf-8"/>

    <link rel="shortcut icon" href="${TINY_CONTEXT_PATH}/tinysite/img/tiny.png" type="image/x-icon"/>

    <title>Tiny Framework-$!pageTitle</title>

    <meta name="description" content="Tiny Framework 是基于Java语言的面向组件的企业级开发框架。"/>

    <meta name="keywords" content="Tiny,Framework,Java,SOA,框架,组件,分层,水平扩展,分区，分表,分布式计算,VFS,Web" />

    <script src="${TINY_CONTEXT_PATH}/uiengine.uijs"></script>

    <link href="${TINY_CONTEXT_PATH}/uiengine.uicss" rel="stylesheet" />

</head>

<body class="boxed"  style="background: url(${TINY_CONTEXT_PATH}/tinysite/img/bg/parquet-bg.jpg);">
$pageContent

</body>

</html>

网站页面结构：

#@section()

    #@container()

    #header

    #navbar

    #hr

    #end

    #@container()

        $pageContent

    #end
#end
#footer
#toTop

上面的页面结构就非常清晰了：

下面详细解释：

#@section()##开一段

    #@container()##开一个容器

    #header##放header进去

    #navbar##放导航条进去

    #hr##放一个分隔线

    #end

    #@container()##再开一个容器

        $pageContent##里面放展现的内容

    #end
#end
#footer ##这里放页脚
#toTop  ##这里放返回页顶按钮

是不是非常清晰呀？

然后就是每一页的内容编写了。

页面编写

首页

在需要解释的行的后面我会增加注释

#pageTitle("首页" "home")##设定这一面展现时的标题是”首页“，并且置"home"菜单为选中状态<span></span> #title("Tiny framework" "基于组件化的J2EE开发框架")
 
#@slides()##轮播

    #@slidesItem("img/example-slide-1.jpg" "Photo" "#")##第一个轮播项

        #@slidesDetail()

            #@slidesDetailInfo("名字" "Tiny名称的来历")##轮播中的详细解释段

            <p>取名Tiny是取其微不足道，微小之意。</p>

            <p>Tiny的构建者认为，一个J2EE开发框架是非常复杂的，只有把框架分解成非常细小、可控的部分，并且对每个细小、可控的部分都有一个最优解或相对最优解，

            那么整个方案也就可以非常不错的落地。</p>

            #end

        #end

    #end

    #@slidesItem("img/example-slide-2.jpg" "Photo" "#")

        #@slidesDetail()

            #@slidesDetailInfo("策略" "Tiny框架的构建策略")

            <p>Think big, start small, scale fast.</p>

            <p>想法要宏伟，但是要从小的开始，同时可以快速的进行扩展。</p>

            <p>Tiny框架的构建者认为：如果想法不够宏伟，那么就会局限于细节；如果一开始就铺非常大的摊子，将会失去控制；如果不能快速扩展，就无法满足应用需要。</p>

            #end

        #end

    #end

    #@slidesItem("img/example-slide-3.jpg" "Photo" "#")

        #@slidesDetail()

            #@slidesDetailInfo("定位" "Tiny框架的应用定位")

            <p>基于WEB的展现平台</p>

            <p>主要包括展现层及控制层，可以让开发人员方便快速的实现WEB层的开发，同时要避免现有方案的缺点，同时要有自己非常突出的优点。</p>

            <p>基于SOA的服务开发平台</p>

            <p>可以方便的开发平台无关的服务，同时有水平扩展，应用集群方面要有良好的支持，可以满足7*24的运维要求。</p>

            #end

        #end

    #end

    #@slidesItem("img/example-slide-4.jpg" "Photo" "#")

        #@slidesDetail()

            #@slidesDetailInfo("目标" "Tiny框架的目标定位")

            <p>Tiny框架的构建者认为再好的框架也有过时的时候，再优秀的架构师也有视野盲区，再NB的写手也无法实现所有的部分。</p>

            <p>所以Tiny框架的构建者认为：只有建立一个良好的生态圈，让广大开发者使用者都在生态圈在找到自己的位置，才是有生命的模式。</p>

            #end

        #end

    #end
#end

可以看到上面的内容语法结构非常清晰，容易理解，容易修改。

设计理念

#pageTitle("philosophy" "philosophy")
#title("philosophy" "主要介绍Tiny框架的设计理念")
 
#@row()

    #@masonry()

    <!-- Content -->

        #@masonryItem()

            #@caption("使用灵活")

            <p>可以整个使用它，也可以只用它的一个或几个部分。</p>

            <p>Tiny构建者认为，一个完整的框架可能需要有许许多多个部分组成，但是对于实际应用的用户来说，它可能只需要其中的一部分功能。构架一定要有这种能力，可以由使用者进行点菜式，使用，避免只要用一点点功能，就要引入许许多多的内容。</p>

            #end

        #end
 
        #@masonryItem("big")

            #@caption("学习成本低、上手容易")

            <p>框架的学习成本必须非常低，这样才可以让使用者更容易上手，避免由于学习难度大而导致的学习曲线太陡、太长。</p>

            <p>经过许多次的实践，我们总结出来：有基础的JAVA开发人员经过半天的培训，就可以完全学会基于Tiny框架进行开发，经过1天到两天的实践就会变成熟手。</p>

            <p>对框架进行扩展或基于框架扩展接口进行扩展，则需要3天左右的培训，就可以完全掌握，经过一周的实践就会变成熟手。</p>

            #end

        #end
 
         ##后面的内容都类似就不贴了

    #end
#end

鼓励与支持

#pageTitle("鼓励" "encourage")
#title("encourage" "鼓励与支持")
#@row()

    #@span3()

    #end

    #@span6()

    <div class="thumbnail" style="text-align: left;">

            <p>我想每一个访问到这个页面的人，一定也是同样对技术有所追求的人。相对于金钱来说，我们更需要您的支持、鼓励，以及对我们所做工作的认可。</p>

            <p>我们不希望收到多少金钱，但是我们希望收获许多支持。</p>

            <p>如果您感受得到我们的努力及付出，请不辞辛苦为我们捐赠<em style="color:red"><strong>一块钱</strong></em>，为我们加油，为我们助威！</p>

            <p><em style="color:red">请用支付宝中的二维码扫描功能扫描下面的二维码</em></p>

        #img("img/appxl1rc0koh8fj044.png")

    </div>

    #end

    #@span3()

    #end
#end

其它页面也大同小异，这里就不贴了。

运行结果

更多页面，请看网站www.tinygroup.org

增加google及Baidu站点统计

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

        "http://www.w3.org/TR/html4/strict.dtd">
<!--[if IE 7 ]>        <html class="no-js ie ie7 lte7 lte8 lte9" lang="en-US"> <![endif]-->
<!--[if IE 8 ]>        <html class="no-js ie ie8 lte8 lte9" lang="en-US"> <![endif]-->
<!--[if IE 9 ]>        <html class="no-js ie ie9 lte9>" lang="en-US"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->

<html class="no-js" lang="en-US"> <!--<![endif]-->

<html lang="en">

<head>

    <meta charset="utf-8"/>

    <link rel="shortcut icon" href="${TINY_CONTEXT_PATH}/tinysite/img/tiny.png" type="image/x-icon"/>

    <title>Tiny Framework-$!pageTitle</title>

    <meta name="description" content="Tiny Framework 是基于Java语言的面向组件的企业级开发框架。"/>

    <meta name="keywords" content="Tiny,Framework,Java,SOA,框架,组件,分层,水平扩展,分区，分表,分布式计算,VFS,Web" />

    <script src="${TINY_CONTEXT_PATH}/uiengine.uijs"></script>

    <link href="${TINY_CONTEXT_PATH}/uiengine.uicss" rel="stylesheet" />

</head>

<body class="boxed"  style="background: url(${TINY_CONTEXT_PATH}/tinysite/img/bg/parquet-bg.jpg);">
$pageContent

<script type="text/javascript">

    var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");

    document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F08ed66f35813cc4b68c4607c2a40d33c' type='text/javascript'%3E%3C/script%3E"));

</script>

<script>

    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
 
    ga('create', 'UA-51345317-1', 'tinygroup.org');

    ga('send', 'pageview');
 
</script>

</body>

</html>