Ergebnis: Möglichkeiten von Thymeleaf+Tiles zu eingeschränkt/kompliziert.
+++ /dev/null
-package de.juplo.branding.web;
-
-import javax.annotation.PostConstruct;
-import javax.annotation.Resource;
-import javax.servlet.ServletContext;
-import org.springframework.stereotype.Component;
-
-
-@Component
-public class ApplicationConfig
-{
- public static final String ATTRIBUTE_BASE = "base";
-
- @Resource
- private ServletContext context;
-
- @PostConstruct
- public void configureApplication()
- {
- context.setAttribute(ATTRIBUTE_BASE, context.getContextPath() + '/');
- }
-}
\ No newline at end of file
Main definition that uses layout.html to put title and content attributes from
Thymeleaf fragments; {1} will be evaluated to either 'list', 'form' or 'view'.
-->
- <definition name="*" template="templates/layout">
- <put-attribute name="title" value="title/{1}"/>
- <put-attribute name="content" value="content/{1}"/>
- <put-attribute name="tiles" value="/WEB-INF/views/tiles.jsp" type="jsp"/>
+ <definition name="*" template="templates/html5page">
+ <put-attribute name="title" value="views/{1} :: title"/>
+ <put-attribute name="htmlhead" value="templates/defaults :: htmlhead"/>
+ <put-attribute name="header" value="templates/defaults :: header"/>
+ <put-attribute name="breadcrumb" value="views/{1} :: breadcrumb"/>
+ <put-attribute name="maincontent" value="templates/defaults :: maincontent"/>
+ <put-attribute name="contentclass" value="test" type="string"/>
+ <put-attribute name="marginalcontent" value="views/{1} :: marginalcontent"/>
+ <put-attribute name="navigation" value="views/{1} :: navigation"/>
+ <put-attribute name="footer" value="templates/defaults :: footer"/>
</definition>
- <!--
- Fragments that are included by messages/* definition above;
- 'template' attribute is a template file stored in /WEB-INF/views/message folder;
- {1} will be evaluated to either 'list', 'form' or 'view'.
- -->
- <definition name="title/*" template="views/{1} :: title"/>
- <definition name="content/*" template="views/{1} :: content"/>
+ <!-- Make JSP-templates available through a view-name -->
+ <definition name="jsp/**" template="/WEB-INF/templates/{1}.jsp" templateType="jsp"/>
<definition name="BASEPAGE" template="/WEB-INF/templates/html5page.jsp">
<put-attribute name="title" value="TITLE IS MISSING" type="string" cascade="true"/>
<%@page pageEncoding="UTF-8"%>
<%@page session="false" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
-<p>
- <strong>Lorem ipsum</strong> dolor <a href="${base}projects/typo.html">sit amet</a>, consectetur adipisicing elit, sed do
- eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
- ad minim veniam, quis nostrud <a href="${base}projects/html-experimente.html">exercitation</a> ullamco laboris nisi ut
- aliquip ex ea commodo consequat. Duis aute irure dolor in
- reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
- pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
- culpa qui officia deserunt mollit anim id est laborum.
-</p>
-<h2>Duis aute irure dolor</h2>
-<ul>
- <li>Operators and other mathematical stuff: <c:out value="-+/*"/></li>
- <li>Characters offten used in programming languages: <c:out value="{(<>)}@$?%*#;:&/\!^\"'`~"/></li>
- <li>Special german characters: <c:out value="ÄäÖöÜü"/></li>
- <li>Other special characters: <c:out value="@€¢§%°"/></li>
-</ul>
-<h2>Excepteur sint occaecat cupidatat</h2>
-<p>
- Lorem ipsum dolor <em>sit amet</em>, consectetur adipisicing elit, sed do
- eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
- ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
- aliquip ex ea commodo consequat. Duis aute irure dolor in
- reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
- pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
- culpa qui officia deserunt mollit anim id est laborum.
-</p>
-<p>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
- eiusmod tempor incididunt ut labore et dolore magna aliqua. <strong>Ut enim
- ad minim veniam, quis nostrud <em>exercitation ullamco</em> laboris nisi ut
- aliquip ex ea commodo consequat</strong>. Duis aute irure dolor in
- reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
- pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
- culpa qui officia deserunt mollit anim id est laborum.
-</p>
+<article id="content" class="main" tiles:fragment="maincontent">
+ <p>
+ <strong>Lorem ipsum</strong> dolor <a href="${base}projects/typo.html">sit amet</a>, consectetur adipisicing elit, sed do
+ eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+ ad minim veniam, quis nostrud <a href="${base}projects/html-experimente.html">exercitation</a> ullamco laboris nisi ut
+ aliquip ex ea commodo consequat. Duis aute irure dolor in
+ reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+ culpa qui officia deserunt mollit anim id est laborum.
+ </p>
+ <h2>Duis aute irure dolor</h2>
+ <ul>
+ <li>Operators and other mathematical stuff: <c:out value="-+/*"/></li>
+ <li>Characters offten used in programming languages: <c:out value="{(<>)}@$?%*#;:&/\!^\"'`~"/></li>
+ <li>Special german characters: <c:out value="ÄäÖöÜü"/></li>
+ <li>Other special characters: <c:out value="@€¢§%°"/></li>
+ </ul>
+ <h2>Excepteur sint occaecat cupidatat</h2>
+ <p>
+ Lorem ipsum dolor <em>sit amet</em>, consectetur adipisicing elit, sed do
+ eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+ ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+ aliquip ex ea commodo consequat. Duis aute irure dolor in
+ reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+ culpa qui officia deserunt mollit anim id est laborum.
+ </p>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+ eiusmod tempor incididunt ut labore et dolore magna aliqua. <strong>Ut enim
+ ad minim veniam, quis nostrud <em>exercitation ullamco</em> laboris nisi ut
+ aliquip ex ea commodo consequat</strong>. Duis aute irure dolor in
+ reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+ culpa qui officia deserunt mollit anim id est laborum.
+ </p>
+</article>
<url-pattern>/</url-pattern>
</servlet-mapping>
- <error-page>
- <error-code>404</error-code>
- <location>/404.html</location>
- </error-page>
- <error-page>
- <location>/error.html</location>
- </error-page>
-
</web-app>
--- /dev/null
+@import 'variables.less';
+@import 'base.less';
+@import 'screen.less';
--- /dev/null
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:tiles="http://www.thymeleaf.org">
+ <head tiles:fragment="htmlhead">
+ <title th:text="'juplo - ' + ${title}">juplo - STANDARDELEMENTE</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../less/all.less" th:href="@{/css/base.css}"/>
+ <style type="text/css" th:inline="text">
+ @import '[[@{/css/screen.css}]]' screen;
+ @import '[[@{/css/print.css}]]' print;
+ </style>
+ <script src="../../js/base.js" th:src="@{/js/base.js}"></script>
+ <script src="../../js/less-1.5.1.js" th:remove="all"></script>
+ </head>
+ <body>
+ <h1 id="logo" tiles:fragment="header"><a href="${base}" title="Home" class="l">juplo</a></h1>
+ <article id="content" class="main" tiles:fragment="maincontent">
+ <p>
+ <strong>Lorem ipsum</strong> dolor <a href="#" th:href="@{/projects/typo.html}">sit amet</a>, consectetur adipisicing elit, sed do
+ eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+ ad minim veniam, quis nostrud <a href="#" th:href="@{/projects/html-experimente.html}">exercitation</a> ullamco laboris nisi ut
+ aliquip ex ea commodo consequat. Duis aute irure dolor in
+ reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+ culpa qui officia deserunt mollit anim id est laborum.
+ </p>
+ <h2>Duis aute irure dolor</h2>
+ <ul>
+ <li>Operators and other mathematical stuff: -+/*</li>
+ <li>Characters offten used in programming languages: {(<>)}@$?%*#;:&/\!^"'`~</li>
+ <li>Special german characters: ÄäÖöÜü</li>
+ <li>Other special characters: @?¢§%°</li>
+ </ul>
+ <h2>Excepteur sint occaecat cupidatat</h2>
+ <p>
+ Lorem ipsum dolor <em>sit amet</em>, consectetur adipisicing elit, sed do
+ eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+ ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+ aliquip ex ea commodo consequat. Duis aute irure dolor in
+ reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+ culpa qui officia deserunt mollit anim id est laborum.
+ </p>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+ eiusmod tempor incididunt ut labore et dolore magna aliqua. <strong>Ut enim
+ ad minim veniam, quis nostrud <em>exercitation ullamco</em> laboris nisi ut
+ aliquip ex ea commodo consequat</strong>. Duis aute irure dolor in
+ reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+ culpa qui officia deserunt mollit anim id est laborum.
+ </p>
+ </article>
+ <ul id="footerlinks" tiles:fragment="footer">
+ <li class="f" id="copyright">© <strong>mo</strong> 2013</li>
+ <li class="f"><a class="f" href="#" th:href="@{/impressum.html}">Impressum</a></li>
+ <li class="f about"><a class="f" href="#" th:href="@{/about.html}">About</a></li>
+ </ul>
+ </body>
+</html>
+++ /dev/null
-<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
- <head>
- <title>Footer-Template</title>
- </head>
- <body>
- <footer th:fragment="fragment">
- <hr />
- © 2014 juplo NG
- </footer>
- </body>
-</html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
- <head>
- <title>Header-Template</title>
- </head>
- <body>
- <header th:fragment="fragment">
- juplo proudly presemts:
- <hr />
- </header>
- </body>
-</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org">
+ <head tiles:replace="htmlhead">
+ <title>juplo - BASISTEMPLATE</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <link rel="stylesheet/less" type="text/css" href="../../less/all.less"/>
+ <script src="../../js/less-1.5.1.js"></script>
+ </head>
+ <body id="top" th:class="contentclass" onload="prettyPrint()">
+ <div id="page" class="cf">
+ <header id="header">
+ <h1 id="logo" tiles:include="header"><a href="#" title="Home" class="l">juplo</a></h1>
+ <span id="slogan"><strong>Java</strong> bits from nerds for nerds</span>
+ <hr class="h" />
+ </header>
+ <div id="breadcrumb">
+ <strong class="b title">You are here:</strong>
+ <ol class="b" tiles:include="breadcrumb">
+ <li class="b"><a class="b" href="#">Home</a></li>
+ <li class="b"><a class="b" href="#">Projects</a></li>
+ <li class="b"><a class="b" href="#">Fix SWF</a></li>
+ <li class="b"><strong class="b">Overview</strong></li>
+ </ol>
+ <a class="hide" href="#nav" title="Show navigation menu">Jump to navigation</a>
+ <hr class="b" />
+ </div>
+ <main class="content cf">
+ <article id="content" class="main" tiles:replace="maincontent">
+ <header><h1>Überschrift</h1></header>
+ <p>
+ <strong>Lorem ipsum</strong> dolor <a href="#">sit amet</a>, consectetur adipisicing elit, sed do
+ eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+ ad minim veniam, quis nostrud <a href="#">exercitation</a> ullamco laboris nisi ut
+ aliquip ex ea commodo consequat. Duis aute irure dolor in
+ reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+ culpa qui officia deserunt mollit anim id est laborum.
+ </p>
+ </article>
+ <div class="marginal">
+ <nav id="nav">
+ <hr class="n"/>
+ <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
+ <!--/*-->
+ <h1 class="nav">Navigation</h1>
+ <h2 class="nav menu">Section-Menu</h2>
+ <ul id="menu" class="cf">
+ <li class="m blog"><a href="${base}blog.html" class="m">Blog</a></li>
+ <li class="m projects"><a href="${base}projects.html" class="m selected">Projects</a></li>
+ <li class="m about"><a href="${base}about.html" class="m">About</a></li>
+ </ul>
+ <h2 class="nav submenu">
+ <span class="s">Submenu for section</span>
+ <a class="s selected" href="${base}projects.html">Projects</a>
+ </h2>
+ <ul id="submenu" class="s">
+ <li class="s sub off"><a href="#" class="s">hibernate4-maven-plugin</a></li>
+ <li class="s sub">
+ <a href="${base}projects/fix-swf.html" class="s selected">fix-swf</a>
+ <ul class="s active">
+ <li class="s"><strong class="s">Overview</strong></li>
+ <li class="s"><a href="${base}projects/fix-swf/getting-started.html" class="s">Getting Started</a></li>
+ <li class="s"><a href="#" class="s">FAQ</a></li>
+ <li class="s"><a href="#" class="s">Documentation</a></li>
+ </ul>
+ </li>
+ <li class="s off"><a href="#" class="s">jquery.openx</a></li>
+ <li class="s off"><a href="${base}projects/html-experimente.html" class="s">HTML-Experimente</a></li>
+ <li class="s sub off"><a href="#" class="s">accelerator</a></li>
+ <li class="s off"><a href="${base}projects/typo.html" class="s">Typography</a></li>
+ </ul>
+ <!--*/-->
+ <div tiles:include="navigation" th:remove="tag"></div>
+ <hr class="n"/>
+ </nav>
+ <aside class="m" tiles:replace="marginalcontent">
+ <div class="widget widget_recent_entries">
+ <h2 class="widgettitle">Recent Posts</h2>
+ <ul>
+ <li>
+ <a href="#" title="Combining jetty-maven-plugin and wro4j-maven-plugin for Dynamic Reloading of LESS-Resources">Combining jetty-maven-plugin and wro4j-maven-plugin for Dynamic Reloading of LESS-Resources</a>
+ </li>
+ <li>
+ <a href="#" title="hibernate4-maven-plugin 1.0.3 released!">hibernate4-maven-plugin 1.0.3 released!</a>
+ </li>
+ <li>
+ <a href="#" title="Log out from wrong Account with maven-appengine-plugin">Log out from wrong Account with maven-appengine-plugin</a>
+ </li>
+ <li>
+ <a href="#" title="Bidirectional Association with @ElementCollection">Bidirectional Association with @ElementCollection</a>
+ </li>
+ <li>
+ <a href="#" title="hibernate4-maven-plugin 1.0.2 released!">hibernate4-maven-plugin 1.0.2 released!</a>
+ </li>
+ <li>
+ <a href="#" title="hibernate4-maven-plugin 1.0.1 released!">hibernate4-maven-plugin 1.0.1 released!</a>
+ </li>
+ <li>
+ <a href="#" title="hibernate4-maven-plugin 1.0 released!">hibernate4-maven-plugin 1.0 released!</a>
+ </li>
+ <li>
+ <a href="#" title="hibernate4-maven-plugin">hibernate4-maven-plugin</a>
+ </li>
+ </ul>
+ </div>
+ </aside>
+ </div>
+ </main>
+ <footer id="footer">
+ <hr class="f" />
+ <ul id="footerlinks" tiles:include="footer">
+ <li class="f" id="copyright">© <strong>mo</strong> 2013</li>
+ <li class="f"><a class="f" href="#">Impressum</a></li>
+ <li class="f about"><a class="f" href="#">About</a></li>
+ </ul>
+ </footer>
+ </div>
+ </body>
+</html>
+++ /dev/null
-<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org">
- <head>
- <!--/* Tiles attribute will be put here at runtime */-->
- <title tiles:include="title">Title</title>
- </head>
- <body>
- <!--/* Standard layout can be mixed with Tiles */-->
- <div th:replace="templates/header :: fragment">HEADER</div>
- <div class="container">
- <!--/* Tiles attribute will be put here at runtime */-->
- <h1 tiles:include="title">Title</h1>
- <!--/* Tiles attribute will be put here at runtime */-->
- <div tiles:replace="content">
- <!-- ============================================================================ -->
- <!-- This content is only used for static prototyping purposes (natural templates)-->
- <!-- and is therefore entirely optional, as this markup fragment will be included -->
- <!-- from "fragments/header.html" at runtime. -->
- <!-- ============================================================================ -->
- <h1>Content</h1>
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Praesent scelerisque neque neque, ac elementum quam dignissim interdum.
- Phasellus et placerat elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Praesent scelerisque neque neque, ac elementum quam dignissim interdum.
- Phasellus et placerat elit.
- </p>
- </div>
- </div>
- <!--/* Tiles attribute will be put here at runtime */-->
- <div tiles:replace="tiles">TILES</div>
- <!--/* Standard layout can be mixed with Tiles */-->
- <div th:replace="templates/footer :: fragment">FOOTER</div>
- </body>
-</html>
\ No newline at end of file
<title tiles:fragment="title">Index</title>
</head>
<body>
- <div tiles:fragment="content">
- <p>Inhalt der Index-Seite...</p>
+ <div tiles:fragment="header"><a href="#" title="Home" class="l">juplo</a></div>
+ <ul tiles:fragment="breadcrumb">
+ <li class="b"><a class="b" href="${base}index.html">Home</a></li>
+ <li class="b"><a class="b" href="${base}projects.html">Projects</a></li>
+ <li class="b"><a class="b" href="${base}projects/fix-swf.html">Fix SWF</a></li>
+ <li class="b"><strong class="b">Overview</strong></li>
+ </ul>
+ <div tiles:fragment="navigation">
+ <h1 class="nav">Navigation</h1>
+ <h2 class="nav menu">Section-Menu</h2>
+ <ul id="menu" class="cf">
+ <li class="m blog"><a href="${base}blog.html" class="m">Blog</a></li>
+ <li class="m projects"><a href="${base}projects.html" class="m selected">Projects</a></li>
+ <li class="m about"><a href="${base}about.html" class="m">About</a></li>
+ </ul>
+ <h2 class="nav submenu">
+ <span class="s">Submenu for section</span>
+ <a class="s selected" href="${base}projects.html">Projects</a>
+ </h2>
+ <ul id="submenu" class="s">
+ <li class="s sub off"><a href="#" class="s">hibernate4-maven-plugin</a></li>
+ <li class="s sub">
+ <a href="${base}projects/fix-swf.html" class="s selected">fix-swf</a>
+ <ul class="s active">
+ <li class="s"><strong class="s">Overview</strong></li>
+ <li class="s"><a href="${base}projects/fix-swf/getting-started.html" class="s">Getting Started</a></li>
+ <li class="s"><a href="#" class="s">FAQ</a></li>
+ <li class="s"><a href="#" class="s">Documentation</a></li>
+ </ul>
+ </li>
+ <li class="s off"><a href="#" class="s">jquery.openx</a></li>
+ <li class="s off"><a href="${base}projects/html-experimente.html" class="s">HTML-Experimente</a></li>
+ <li class="s sub off"><a href="#" class="s">accelerator</a></li>
+ <li class="s off"><a href="${base}projects/typo.html" class="s">Typography</a></li>
+ </ul>
</div>
+ <main id="content" class="main" tiles:fragment="maincontent">
+ <p>Inhalt der Index-Seite...</p>
+ </main>
+ <ul tiles:fragment="footer">
+ <li class="f" id="copyright">© <strong>mo</strong> 2013</li>
+ <li class="f"><a class="f" href="${base}impressum.html">Impressum</a></li>
+ <li class="f about"><a class="f" href="${base}about.html">About</a></li>
+ </ul>
</body>
</html>
--- /dev/null
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:tiles="http://www.thymeleaf.org">
+ <head>
+ <title tiles:fragment="title">Index</title>
+ </head>
+ <body>
+ <div tiles:fragment="header"><a href="#" title="Home" class="l">juplo</a></div>
+ <ul tiles:fragment="breadcrumb">
+ <li class="b"><a class="b" href="${base}index.html">Home</a></li>
+ <li class="b"><a class="b" href="${base}projects.html">Projects</a></li>
+ <li class="b"><a class="b" href="${base}projects/fix-swf.html">Fix SWF</a></li>
+ <li class="b"><strong class="b">Overview</strong></li>
+ </ul>
+ <div tiles:fragment="navigation">
+ <h1 class="nav">Navigation</h1>
+ <h2 class="nav menu">Section-Menu</h2>
+ <ul id="menu" class="cf">
+ <li class="m blog"><a href="${base}blog.html" class="m">Blog</a></li>
+ <li class="m projects"><a href="${base}projects.html" class="m selected">Projects</a></li>
+ <li class="m about"><a href="${base}about.html" class="m">About</a></li>
+ </ul>
+ <h2 class="nav submenu">
+ <span class="s">Submenu for section</span>
+ <a class="s selected" href="${base}projects.html">Projects</a>
+ </h2>
+ <ul id="submenu" class="s">
+ <li class="s sub off"><a href="#" class="s">hibernate4-maven-plugin</a></li>
+ <li class="s sub">
+ <a href="${base}projects/fix-swf.html" class="s selected">fix-swf</a>
+ <ul class="s active">
+ <li class="s"><strong class="s">Overview</strong></li>
+ <li class="s"><a href="${base}projects/fix-swf/getting-started.html" class="s">Getting Started</a></li>
+ <li class="s"><a href="#" class="s">FAQ</a></li>
+ <li class="s"><a href="#" class="s">Documentation</a></li>
+ </ul>
+ </li>
+ <li class="s off"><a href="#" class="s">jquery.openx</a></li>
+ <li class="s off"><a href="${base}projects/html-experimente.html" class="s">HTML-Experimente</a></li>
+ <li class="s sub off"><a href="#" class="s">accelerator</a></li>
+ <li class="s off"><a href="${base}projects/typo.html" class="s">Typography</a></li>
+ </ul>
+ </div>
+ <main id="content" class="main" tiles:fragment="maincontent">
+ <p>Inhalt der Index-Seite...</p>
+ </main>
+ <ul tiles:fragment="footer">
+ <li class="f" id="copyright">© <strong>mo</strong> 2013</li>
+ <li class="f"><a class="f" href="${base}impressum.html">Impressum</a></li>
+ <li class="f about"><a class="f" href="${base}about.html">About</a></li>
+ </ul>
+ </body>
+</html>