In this tutorial, designed primarily for web developers, I will explain how you to build page templates for Automne. This is a must, since there are no theme available at the moment.
The approach will be familiar to those working with the W3C standards: it is to transform an XHTML page into a Automne page template using XML tags.
We will see in this first part how to convert an XHTML page to an Autumn.
Automne XML tags will be use to :
- manage the various tags found in the page header (meta-data calls of different CSS, JS or RSS files);
- define the different areas of editable content, also called clientspaces;
- manage navigation elements (menus, sitemap, breadcrumb);
You can choose to start from scratch and design your own theme using XHTML, CSS and JS or adapt an existing on.
In this tutorial we will stick ourselves to the default modules shipped with Autumn, namely the news module and the media library.
Automne template : XHTML + XML
Let's start with common XHTML code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<title>Page title - website</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<meta name="description" content="The description of the content of the present page may be used by search engines" />
<meta name="keywords" content="CMS, Automne, template, example, tutoriel, XHTML" />
<link rel="stylesheet" href="/css/reset.css" type="text/css" media="all" />
<link rel="stylesheet" href="/css/base.css" type="text/css" media="all" />
<link rel="stylesheet" href="/css/fonts.css" type="text/css" media="all" />
<!--[if IE 7]>
<link rel="stylesheet" href="/css/ie7.css" type="text/css" media="all" />
<![endif]-->
<link rel="stylesheet" href="/css/print.css" type="text/css" media="print" />
<link rel="stylesheet" href="/css/mobile.css" type="text/css" media="handeld" />
<script type="text/javascript" src="/js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="/js/myscript.js"></script>
<link rel="alternate" type="application/rss+xml" title="Actualités" href="http://www.automne-cms.org/rss/rss.php?id=1" />
</head>
<body>
<div id="header">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<ul>
<li><a href="#">Support</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">Clients</a></li>
</ul>
</ul>
</div>
<div id="main-content">
<p>You are here : <a href="/">Home</a> > News</p>
.....some content....
</div>
<div class="aside">
.....some content....
</div>
<div id="footer">
<ul class="links">
<li><a href="#">Sitemap</a></li>
<li><a href="#">Legal notices</a></li>
<li><a href="#">Accessibility</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>
We have several static elements that we're going to make it dynamic as the page title, description and keywords. We also have lists of navigation links that will update on every modification of wording or structure of the page tree. Finally we have areas in which the content will be inserted by the editors of the site.
Now, just with a few XML tags, we will convert this XHTML page into an Automne template.
French