Declare the docmument type
The first thing to do is to specify the DTD that you want to use for your page template. By default, Automne comes with XHTML Transitional DTD, we'll stick to this one for our template :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
Page title and website label
In our example, the <title> element will be made of the page title and the website label, a common pratice in SE0.
<title>Page title : website</title>
We'll use the well-called <atm-title /> tag to display the current page title. This value is the one entered in the Title field in the properties tab.
To display the website label, we'll need to get the value of a constant. Most of the constants are defined in the cms_rc.php file, but the one we need is defined in /automne/classes/modules/standard_rc.xml. It's the APPLICATION_LABEL constant that stores the website label. The root user can define this label in the parameters of the Administration panel.
Thanks to the <atm-constant name="constant" /> element we can now diplsay our complete title
<title><atm-title /> : <atm-constant name="APPLICATION_LABEL" /></title>
Meta tags contain information describing the page, keywords, the language used in the page, the author, his email address, links to RSS feeds, etc.. All this information can be edited either in the page properties window or in the management of sites where you can define default metadata per site, that will be applied automatically on all pages which have no specific metadata.
With Automne you can build custom RSS feeds. Then you can add links to your feeds in a site or page meta-datas so that browsers can auto-detect them.
To embed all those meta tags, we just have to use <atm-meta-tags />
In our example we will replace the following lines :
<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="alternate" type="application/rss+xml" title="Automne News" href="http://www.automne-cms.org/rss/rss.php?id=1" />
with :
<atm-meta-tags />
This tag is mandatory in every page template. Automne needs it in order to work properly. It's thanks to this tag for example that you can edit a page in Automne. It also embed default CSS and JS modules files automatically.
Calling stylsheets and Javascript files
Automne respects W3C standards and the separation between the structure (XHTML), présentation (CSS) and behaviour (Javascript).In order to link to stylesheets and javascript files, you can either use the XHTML syntax or use Automne specific XML tags. Automme tags will optimize those files for better performance. Automne will handle minification, concatenation and compression of all CSS and JS files for you. This will be useful on a production server but we recommand no to use them during the development, so you can debug more easily with Firebug for instance.
There are often many stylesheets to include, once in production you can replace this :
<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" />
with :
<atm-css-tags files="/css/reset.css,/css/base.css,/css/fonts.css" media="all" />
If you have specific stylesheets for different medias like printers or mobile phones, you have to call each one separately :
<link rel="stylesheet" href="/css/print.css" type="text/css" media="print" />
<link rel="stylesheet" href="/css/mobile.css" type="text/css" media="handeld" />
So we write :
<atm-css-tags files="/css/print.css" media="print" />
<atm-css-tags files="/css/mobile.css" media="handeld" />
If you use conditionnal comment to correct CSS bugs in IE for instance, you won't need to use <atm-css-tags /> for such small files.
It's the same principles with javascript files , you just have to call them all in once to save some precious HTTP requests.
In our example, we can replace :
<script type="text/javascript" src="/js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="/js/myscript.js"></script>
with :
<atm-js-tags files="/js/jquery-1.4.2.js,/js/myscript.js" />
So that's it for the page header, remember we started from : /p>
<!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="en" xml:lang="en">
<head>
<title>Page title - My 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="Automne News" href="http://www.automne-cms.org/rss/rss.php?id=1" />
</head>
And now, thanks to a few XML tags we have the following Automne template :
<!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="en" xml:lang="en">
<head>
<title><atm-title /> - <atm-constant name="APPLICATION_LABEL" /></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<atm-meta-tags />
<atm-css-tags files="/css/reset.css,/css/base.css,/css/fonts.css" media="all" />
<!--[if IE 7]>
<link rel="stylesheet" href="/css/ie7.css" type="text/css" media="all" />
<![endif]-->
<atm-css-tags files="/css/print.css" media="print" />
<atm-css-tags files="/css/mobile.css" media="handeld" />
<atm-js-tags files="/js/jquery-1.4.2.js,/js/myscript.js" /
</head>
Now, we can continue with the page body.
French