Bonjour,
Ta question devance le tutoriel que je prépare, à savoir "Créer un site de A à Z avec Automne", je vais donc en profiter pour essayer d'être assez exhaustif sur la méthodologie à adopter, n'hésitez pas à me faire des retours s'il y a des points qui ne vous paraissent pas clairs.
La première chose quand on part d'un Automne vide va être de créer un modèle de page et une arborescence de pages.
A - Création d'un modèle de page : les préparatifs
SI tu as déjà ta maquette en pur HTML/CSS tu peux créer un modèle de page et coller ton code dedans.
Pour ce qui est de l'emplacement des fichiers par défaut il y a plusieurs dossiers à la racine :
/css : pour les feuilles de styles
/js : pour les scripts javascript
/img : pour les images
/automne/templates/ pour les modèles de pages
/automne/templates/rows/ pour les modèles de rangées
1 - Je fais ma maquette en XHTML/CSS/JS
2 - Je dépose mes CSS dans /css , je peux créer autant de sous-dossiers que nécéssaires pour m'organiser.
L'exemple de la démo :
Pièce jointe:
Description du fichier : Arborescence CSS de la demo
arborescence_css_automne.png [ 13.48 Kio | Consulté 77523 fois ]
arborescence_css_automne.png [ 13.48 Kio | Consulté 77523 fois ]
A noter la présence du fichier 'cssmanager.php' qui est utilisé par Automne pour l'optimisation du chargement des feuilles de styles. Ne jamais toucher à ce fichier.
Un exemple d'arborescence possible :
Pièce jointe:
Description du fichier : Exemple d'arborescence des feuilles de styles CSS
custom_css_tree_automne.png [ 4.64 Kio | Consulté 77523 fois ]
custom_css_tree_automne.png [ 4.64 Kio | Consulté 77523 fois ]
On est donc libre d'organiser ses CSS pour les modèles de pages.
[FACULTATIF - Chargement automatique des feuilles de styles de modules]
Pour les modules il faut savoir qu'Automne détecte automatiquement les fichiers placés dans le sous-dossier '/css/modules/' à condition que le nom de la feuille de style soit le même que celui du codename du module - son identifiant unique - , mais tu peux très bien faire des appels avec ton propre chemin si tu souhaites t'organiser différemment.
Ce qui donne :
Code :
/css/modules/CODENAME_MODULE.css
Pour connaître le codename d'un module, il faut aller dans la gestion du module, choisir l'application dans la liste et cliquer sur modifier, le codename est afficher sous le nom du module.
Pièce jointe:
Description du fichier : Gestion de module : propriétés
codename_module.png [ 9.87 Kio | Consulté 77518 fois ]
codename_module.png [ 9.87 Kio | Consulté 77518 fois ]
Pour le module actualités si j'ai une feuille de style spécifique au module, je nommerais ma feuille de style 'pnews.css' et je dois me retrouver avec l'arborescence suivante :
Code :
/css/modules/pnews.css
[/FACULTATIF]
3 - Je dépose mes scripts Javascript dans le dossier /js
[FACULTATIF - Chargement automatique des fichiers Javascript liés à un module]
Pour les modules le principe est similaire pour les CSS faut que cette fois-ci on a un dossier par module.
Pour la détection automatique des fichiers JS liés à un module, on les places dans /js/modules/CODENAME_MODULE/script.js
Pour ajouter du JS détecté de manière automatique à mon module actualités, je le place dans /js/modules/pnews/script.js.
A noter que les scripts sont chargés dans l'ordre alphabétique lorsqu'on utilise le jsmanager.
[/FACULTATIF]
4 - Je dépose mes images dans le dossier /img, là encore totale liberté pour s'organiser. Perso je fais un dossier par site puis des sous-dossiers par modèle si besoin.
5 - Je créer un nouveau modèle de page dans Automne, je lui donne un nom et éventuellement une description, j'enregistre.
Maintenant je peux aller dans l'onglet "Définition XML" et recopier mon code source HTML. J'enregistre.
Par défaut un nouveau modèle est inactif, c'est à dire qu'il ne sera pas proposé lors de la création d'une nouvelle page. Il faut donc sélectionner le modèle et l'activer dans la liste des modèles.
6 - Je peux déjà tester mon nouveau modèle de page pour voir si j'ai tout bon. Pour cela je créer une nouvelle page et je lui affecte mon modèle.
Si tout se passe bien, la page crée sera conforme à la maquette HTML/CSS/JS. Je peux publier la page et vérifier que c'est aussi OK côté client.
Si tu as un problème à ce niveau c'est simplement une histoire de liens entre ton modèle et des fichiers CSS et JS. Si tu utilises la 4.02 tous les chemins sont absolus. Tes appels seront donc de la forme :
Code :
<link rel="stylesheet" type="test/css" href="/css/reset.css" media="all />
<link rel="stylesheet" type="test/css" href="/css/fonts.css" media="all />
<link rel="stylesheet" type="test/css" href="/css/modele1/screen.css" media="all />
<link rel="stylesheet" type="test/css" href="/css/print.css" media="print />
<link rel="stylesheet" type="test/css" href="/css/fonts.css" media="all />
<link rel="stylesheet" type="test/css" href="/css/modele1/screen.css" media="all />
<link rel="stylesheet" type="test/css" href="/css/print.css" media="print />
7 - Une fois arrivé jusque là je vous invite à suivre ce tutoriel sur la transformation d'une maquette HTML en modèle de page Automne.
8 - Une fois le modèle crée, il faut passer aux rangées. Automne intègre une aide pour la synthaxe dans l'onglet de "Définition XML".
Vous pouvez aussi consulter la documentation en ligne :
http://doc.automne.ws/web/Documentation ... ssique.php
Il est évidemment préférable d'avoir déjà fait le travail sur l'architecture du site et d'avoir créer les pages, même si c'est avec un modèle vide. Ça permettra de tester que les liens, sous-liens ou liens récursifs fonctionnent.
Merci de me dire si tout ça est assez clair, de manière à ce que je corrige le tutoriel en conséquence.
Je vais partir d'un exemple concret avec un design simple à intégrer pour le tutoriel, mais je pense qu'il y a ici déjà matière à te lancer dans la création de ton premier modèle de page.
