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

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

网站模板选择

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

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

宏提取

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

#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>

</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>

#end

#macro(wideBanner)

<div class="wide-bg">

<div class="container">

$bodyContent

</div>

#end

#macro(sidebar $title)

<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)

<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)

#@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 class="text-left">

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

</div>

#end

#macro(footer)

#@section()

#@container()

#@row()

#@span12()

<div class="footer">

<hr/>

www.tinygroup.org</p>

</div>

#end

#macro(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>

#end

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

页面结构设计

Html页面结构

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

"http://www.w3.org/TR/html4/strict.dtd">

<html class="no-js" lang="en-US"> 

<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

#footer

#toTop

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

下面详细解释：

#@section()##开一段

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

#header##放header进去

#navbar##放导航条进去

#hr##放一个分隔线

#end

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

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

#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

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

#@slidesDetail()

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

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

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

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

#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

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

#@slidesDetail()

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

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

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

#end

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

设计理念

#pageTitle("philosophy" "philosophy")

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

#@row()

#@masonry()

#@masonryItem()

#@caption("使用灵活")

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

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

#end

#@masonryItem("big")

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

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

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

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

#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

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

运行结果

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

增加google及Baidu站点统计

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

"http://www.w3.org/TR/html4/strict.dtd">

<html class="no-js" lang="en-US"> 

<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>

考虑要个人也比较关心一些统计数据，于是就增加一baidu及google的统计分析。

很简单，只要在根目录中的default.layout中增加这两段js就可以了，所有的其它文件都不必修改。

哇，已经可以收集数据了，同时也再一次验证了Tiny框架对于DRY原则的坚持。

总结

上面展示了Tiny框架强大的页面开发能力。

对于页面开发人员来说，进行了相当的封装，避免了直接使用html而出现不应该出现的问题。

对于开发人员来说，不必关心页面结构，也不必关系js,css相关的内容，只要设置好页面上的元素即可。

这里就可以非常清晰的看到，界面开发程序员做的事情非常简单、易懂，且易于维护。明眼人也看得非常清晰，如果数据是来自于数据库，那处理就更简单了。

时间： 2024-09-22 09:36:25

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

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

网站模板选择

宏提取

页面结构设计

页面编写

首页

设计理念

鼓励与支持

运行结果

增加google及Baidu站点统计

总结

Tiny实例：TINY框架官网制作过程详解的相关文章

Android应用框架之应用启动过程详解_Android

ThinkPHP RBAC官网的例子详解

Maya实例：模拟一碗真实的水制作过程详解

Android应用框架之应用启动过程详解

求原理，腾讯JX框架官网的开始动画，很炫

android上传图片到PHP的过程详解_php实例

.NET配置文件解析过程详解

IIS8 使用FastCGI配置PHP环境支持过程详解

基于Android实现百度地图定位过程详解_Android