Créer un modèle de page

Ce tutoriel, conçu avant tout pour les développeurs web, présente une méthode de conception de modèle de page pour Automne. C'est une étape incontournable, puisque à l'heure actuelle aucun thème n'est encore disponible en téléchargement.

La démarche sera familière pour ceux qui travaillent selon les recommandations du W3C : elle consiste à transformer un modèle de page XHTML en modèle Automne à l’aide de balises XML.

Nous verrons donc dans cette première partie comment convertir un modèle de page XHTML en modèle Automne.

Les balises XML d’Automne vont permettre notamment de :

  • gérer les différents balises présentes dans l’entête de page (méta-données, appels des différents fichiers CSS, JS et RSS) ;
  • définir les différentes zones de contenus modifiables, également appelés espaces clients ;
  • gérer les éléments de navigations (menus, plan de site, fil d’ariane) ;

On peut donc au choix partir de rien et concevoir sa page à l’aide des langages XHTML, CSS et JS ou bien adapter un thème existant - sous peine de disposer de fonctionnalités équivalentes dans Automne.

Dans ce tutoriel, nous prendrons un exemple qui se limite aux modules polymod livrés par défaut avec Automne, à savoir le module Actualités et le module Médiathèque.

Modèle Automne = XHTML + XML

Partons d’un code XHTML tout ce qu’il y a de plus classique :

<!DOCTYPE html>
<html lang="fr">
<head>
    <title>Titre de page - Site Web</title>
    <meta 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="#">Accueil</a></li>
                <li><a href="#">Produits</a></li>
                <li><a href="#">Services</a></li>
                <ul>
                    <li><a href="#">Support</a></li>
                    <li><a href="#">Téléchargements</a></li>
                    <li><a href="#">Espace Client</a></li>
                </ul>
             </ul>
      </div>
      <div id="main-content">
        <p>Vous êtes ici : <a href="/">Accueil</a> > Actualités</p>
               .....mon contenu....
      </div>  
      <div class="aside">
               .....mon contenu....
      </div>
      <div id="footer">
              <ul class="links">
                <li><a href="#">Plan du site</a></li>
                <li><a href="#">Mentions légales</a></li>
                <li><a href="#">Accessibilité</a></li>
                <li><a href="#">Contact</a></li>
             </ul>
      </div>
</body>
</html> 

Nous avons ici plusieurs éléments statiques, que nous allons devoir rendre dynamique comme le titre de la page, la description et les mots-clefs associés. Nous avons aussi des listes de liens de navigations qui devront pouvoir se mettre à jour en cas de changement de libellé ou de structure de l’arborescence. Enfin nous avons des zones dans lesquelles du contenu devra pouvoir être inséré par les rédacteurs du site.

A l’aide de balises XML, nous allons pouvoir transformer ce fichier XHTML en modèle de page pour Automne.

Sommaire

Page précédente

Ajouter une contribution :

Les contributions servent à compléter la documentation en détaillant des points précis ou pour donner des exemples. Elles sont modérées et peuvent être supprimées sans préavis.
Pour poser des questions, merci d'employer le forum et pour rapporter un bug, le BugTracker est à votre disposition.








Vous pouvez employer les balises bbcode suivantes :
  • [code-xml] votre code ... [/code-xml] : Pour mettre en forme du code XML / XHTML
  • [code-php] votre code ... [/code-php] : Pour mettre en forme du code PHP
  • [code-js] votre code ... [/code-js] : Pour mettre en forme du code Javascript

Date de votre contribution : 20/10/2017   16:25:58

Haut