créer son template avec des logiciels gratuits ou opensource€¦ · les logiciels à utiliser...

Créer son template avec des logiciels gratuits ou OpenSource

« Les tableaux, c'est tabou, on en viendra tous à bout ! »ou

« comment créer son template en respectant les standards web : un template en <Div> et Css »

--Xavier Lemoine (Chabi01)

--

Tutoriel « Template en div pour Joomla » - XLFormation – http://www.xlformation.sup.frFévrier 2007 – sur 129

http://www.xlformation.sup.fr/



Table des matièresINTRODUCTION................................................................................................................................4

Différences entre templates tabulaires et non tabulaires.............................................................5Note de réalisation de ce tutoriel :.............................................................................................. 7Les logiciels à utiliser................................................................................................................. 8LES OUTILS & LOGICIELS.....................................................................................................9

PREMIERE PARTIE – LES BASES.................................................................................................11« Reprenons tout depuis le début.. »..............................................................................................12

Logique de création des templates............................................................................................ 13COMPRENDRE LE FONCTIONNEMENT D'UN TEMPLATE EN DIV..................................14Règles d'appel et codage Css......................................................................................................... 14

Représentation d'une boite <div>..............................................................................................16Comment écrire les valeurs pour les propriétés de base d'un <div> ?...................................... 18UNITES DE MESURE.............................................................................................................19Comment passer les paramètres d'affichage de chacun de ces <div> ?.................................... 21Règle n°1 des <Div> : toutes les boites sont dans le flux par défaut........................................25Règle n°2 des <Div> : toutes les boites peuvent sortir du flux.................................................26Comment utiliser tout ça avec nos images découpées ? Comment tout ré-assembler ?........... 31Cas N°1..................................................................................................................................... 32Exemple : un template « classique »......................................................................................... 32Cas N° 2 – Un template un peu plus complexe..en apparence..................................................37Le Template présenté sous l'apparence des <Div> (Merci à Did85 ;))..................................................................................................................... 38NE CONFONDEZ PAS !......................................................................................................... 48Les blocs <div> et les zones de publications de Joomla!......................................................... 48

DEUXIEME PARTIE – TEMPLATES COMPLEXES.................................................................... 49ETUDES DE CAS......................................................................................................................... 50

Comment procéder :..................................................................................................................50ETUDE N°1 - « PlanetBlunt001 ».................................................................................................51ETUDE N°1 « PlanetBlunt001 »................................................................................................... 52

Etude n°1 - « PlanetBlunt001 » - Fichier index.php (seules les balises div à l'intérieur de body sont copiées ici).........................................................................................................................54Etude n°1 - « PlanetBlunt001 » - Analyse d'index.php (le fichier est correctement indenté pour faciliter la lecture).............................................................................................................55Etude n°1 - « PlanetBlunt001 » - Template_css.css................................................................ 56Etude n°1 - « PlanetBlunt001 » - Mise en évidence des blocs................................................. 60

ETUDE n°2 - « Behar ».................................................................................................................63ETUDE N°2 « Behar ».................................................................................................................. 64

Etude n°2 - Fichier index.php - « Behar » (seules les balises div à l'intérieur de body sont copiées ici)................................................................................................................................ 65Etude n°2 - Template_css.css - Behar.......................................................................................67Etude n°2 - « Behar » - Mise en évidence des blocs.................................................................71

TROISIEME PARTIE – CREATION COMPLETE « CIRCUS ».................................................... 73Créer un template complexe : gérer les images et les fonds de page.............................................74

PREPARATION DE NOTRE ESPACE DE TRAVAIL..........................................................751. Création de notre espace de travail sur le disque.................................................................. 762. copie des différents fichiers dans les dossiers.......................................................................78Création graphique.................................................................................................................... 79





ELEMENTS DU TEMPLATE................................................................................................. 81QUELQUES PISTES POUR LES DEBUTANTS................................................................... 85TEMPLATE CIRCUS - DISPOSITION DES ELEMENTS DANS DES <DIV>...................86Le template « CIRCUS » abordé du point de vue des Div (par did85) .................................. 89CIRCUS – INDEX.PHP........................................................................................................... 92TEMPLATE_CSS.CSS - CIRCUS...........................................................................................94

Gestion des problèmes d'affichages de vos templates................................................................. 107Calcul des boites dans les navigateurs (FF et I.E.)................................................................. 107Résoudre les problèmes d'affichage entre les navigateurs...................................................... 109

Pour aller plus loin.......................................................................................................................112Personnaliser un module......................................................................................................... 113Un outil indispensable : Firefox et « Web developer »...........................................................116

A vous de jouer................................................................................................................................117CONCLUSION................................................................................................................................ 118REMERCIEMENTS........................................................................................................................ 119LICENCE D'UTILISATION DE CE TUTORIEL ..........................................................................120ANNEXES....................................................................................................................................... 121

LIENS ET RESSOURCES – Joomla!, le css.. et tout le reste !!................................................. 122CSS – MEMENTO...................................................................................................................... 126FICHIERS DU PACK « Créer son template non tabulaire pour Joomla »................................. 127





INTRODUCTION

Ce tuto fait suite au premier tuto « créer son template pour Joomla! » en téléchargement sur le site http://www.xlformation.sup.fr

Le premier tutoriel vous a, je l'espère, aidé à comprendre comment créer un template à l'aide d'un tableau dans Joomla!. Les éléments abordés lors de ce premier tutoriel restent d'actualité, mais ont besoin d'un complément. D'où ce nouveau tutoriel !

Ce tutoriel est destiné à vous expliquer le plus simplement possible la technique de création de templates pour le CMS Joomla! en respectant les normes actuelles du Web, à savoir la création de template « tableless », en français « sans tableaux ».

Je l'ai écrit à partir de sources multiples, m'appuyant sur des standards et techniques utilisées par beaucoup, en essayant de respecter ces standards actuels en vigueur pour le Net. J'ai décidé, de par « l'éparpillement » des différentes informations, et appuyé par ma pratique personnelle de créer ce tutoriel afin de répondre aux demandes de plusieurs, et sûrement aussi, pour « démystifier » la création de templates dit « complexes ».

En effet, et sans rentrer dans la polémique existante encore sur les templates en tableaux, les pages structurées avec des <Div>, ou <Calques>, ou encore <Layer> (tous ces mots sont utilisés plus ou moins correctement et désigne souvent la même chose, même si ce sont des éléments différents), amènent plusieurs notions importantes et intéressantes pour les modèles de présentation (ou templates !) dans Joomla!








Différences entre templates tabulaires et non tabulaires

La différence majeure, à mes yeux, et qui m'a amené à continuer le tutoriel original avec ce second volet est la suivante : l'amélioration de la visibilité et de la rapidité de chargement des pages de votre site.

Pour faire simple, je vais vous expliquer ces 2 choses rapidement.

Meilleure lisibilité : les moteurs de recherche actuels ne font pas réellement de distinction entre les sites développés sous forme tabulaire et les autres. Par contre, il n'est pas déraisonnable de penser que dans les années à venir, la majorité des sites développés vont se conformer aux standards du W3C (World Wide Web Consortium, fondé en 1994, ce consortium ne donnent pas réellement les normes à respecter, mais plutôt des recommandations à valeur de standards).

D'ailleurs, l'évolution de Joomla! laisse voir que les templates tabulaires ne « pourront » plus être utilisés dans les futurs développements et qu'il vous faudra passer par la création à l'aide de <Div>..Dans la pratique, il apparaît qu'un site développé à base de tableau est plus long à charger. A partir de là, les moteurs de recherche faisant des requêtes sur vos pages, et celles-ci ne répondant pas « assez vite », le référencement peut très bien ne pas se faire correctement..

Rapidité de chargement : c'est en fait pour moi ce qui est le plus motivant pour apprendre les notions de ce manuel.

Lorsque vous créer un template sous forme tabulaire, vous aurez la même chose, en terme de résultat visuel, qu'un template créé avec des blocs <div>.

Par contre, ce qui fait toute la différence réside dans le fonctionnement des navigateurs utilisés par les internautes : chaque page crée sous forme tabulaire sera rechargée intégralement depuis le serveur du site hébergé à chaque changement de page.

En gros, vous avez dix articles dans Joomla!, le template est le même pour toute les pages, et chaque page devra se recharger entièrement pour être visualisée.. Perte de temps, facteur crucial du monde de l'Internet.

Inversement, en créant un template en <div>, les pages seront plus rapides. Pourquoi ?

Vos templates (vous devez le savoir si vous avez déjà créé un template ou lu le premier tutoriel) sont créés à partir de 2 fichiers principaux : le fichier index.php et le fichier template_css.css.

A chaque fois qu'une page est affichée, le fichier index.php est relu, donc rechargé. Par contre, le fichier css est pour sa part, chargé une fois, puis (s'il n'y a pas de changement d'appel de fichier css dans le fichier index.php) gardé dans le cache de votre navigateur..





Vous allez vous rendre compte en lisant ce tutoriel que les templates en <div> ont un fichier index.php beaucoup plus petit, moins complexe, et beaucoup mieux structuré que les templates tabulaires : toutes les spécifications de position, taille, etc.. étant écrites dans le fichier css...

Voilà comment, entre autre, l'efficacité de chargement de la page est améliorée..

Je pourrai continuer sur le fait qu'il est plus facile de « retrouver l'endroit » où les images, taille, couleurs, ont été rangées, mais vous trouverez d'autres personnes que moi pour promouvoir la création de template « full Css » sur les forums et ailleurs..

Nous allons juste essayer d'apprendre comment faire le travail nous-même..

Vous êtes prêt ? Commençons !





Note de réalisation de ce tutoriel :

Les notions avancées ici sont, encore une fois et n'en déplaise aux puristes du css, un moyen aux plus ou moins grands débutants pour comprendre l'architecture d'un template.

Je m'appuie sur le travail réalisé dans le premier template (partie 1 et partie 2) où il est expliqué comment réaliser et découper les images de fond pour agrémenter les pages de nos sites.

Bien que ce tutoriel soit différent pour ce qui est du travail graphique, vous pourrez retrouver dans le premier tutoriel comment travailler cette partie de votre template.

Par contre, je reprendrais la logique de conception des éléments graphiques à utiliser : nous n'allons plus travailler à la manière d'un « puzzle » mais plutôt avec des « couches » (notions que vous connaissez peut-être avec les logiciels de créations graphiques sous le nom « calques » ou « layers »)

Enfin, ce tutoriel est, comme le premier tutoriel, basé uniquement sur l'utilisation de logiciels gratuits ou OpenSource, la logique voulant que tout le monde puisse accéder à la création sans être obligé d'investir dans des logiciels hors de prix ou pas forcément accessible à tout le monde..

Souvenez-vous que ce tuto doit s'utiliser comme un outil d'apprentissage et ne sera que le point de départ pour réaliser vos propres créations.

Ce travail, je vous le laisse, et croyez-moi, il n'y a rien de plus agréable que d'utiliser son « propre template » en pensant « ça, c'est mon boulot.. »

A vos claviers, et faites chauffer les neurones ! ;))

Chabi01 – 14/02/2007 - XLFormationhttp://www.xlformation.sup.fr

Fin de rédaction du tutoriel – 20/03/2007

Malgré plusieurs relectures de ce document, il est possible que des erreurs orthographiques puissent rester présentes. Merci de me signaler celles-ci si vous en trouvez..






Les logiciels à utiliser

Vous avez déjà des habitudes de travail ? Vous avez déjà vos logiciels de « création » achetés et installés ? Il n'est pas forcément utile d'en changer..

Par contre, si vous n'avez pas les logiciels vous permettant de faire vos templates ou si vous voulez apprendre à utiliser de nouveaux outils, je vous invite à vous renseigner sur le monde de l'OpenSource (et pourquoi pas le monde Linux..) mettant à disposition des logiciels d'une qualité et d'une fiabilité remarquable.

Il n'est pas important de dire « Linux, c'est mieux » ou de rentrer dans des considérations « trollesques », il suffit juste de savoir que Linux se pose aujourd'hui comme un système alternatif valable et accessible à tous, pas seulement aux informaticiens et ingénieurs informatiques..

Pour découvrir Linux, il existe des distributions (systèmes complets livrés avec un package logiciel prêt à l'emploi) simples et faciles à prendre en main :

Knoppix : http://knoppix-fr.org/site/presentationKaella ou « Knoppix Linux Azur » (la version françisée de Knoppix) : http://kaella.linux-azur.org/

Ubuntu (bureau Gnome) : http://www.ubuntu-fr.org/

Kubuntu (bureau KDE) : http://www.kubuntu-fr.org/

Mandriva : http://www.mandriva.com/fr/community/mandrivaone

Pour information, le bureau « KDE » correspond à une présentation de type « Windows » alors que le bureau « Gnome » correspond à une présentation de type « Macintosh ». Ce ne sont que des « présentations » de votre espace de travail, mais certains logiciels et utilitaires ne tournent que sous l'un ou l'autre (pour les outils intégrés respectivement à chaque bureau).

Notez également qu'il vous est possible de découvrir Linux très facilement à partir des CD bootables : vous récupérez une image disque à graver (fichier ISO), vous gravez cette image sur un CD, puis vous démarrez votre système à partir du CD. Votre machine ne sera en aucune façon modifiée et cela vous permettra de vous rendre compte de ce qu'est Linux. Sachez également que la plupart de ces CD « découverte » sont installables sur votre machine définitivement, mais si vous souhaitez vraiment installer ces systèmes, il est préférable de télécharger les versions d'installation complète.

Encore une fois, le monde de l'OpenSource et de Linux permet à tous d'accéder à des systèmes, ressources et logiciels gratuits.



http://www.mandriva.com/fr/community/mandrivaone



http://www.kubuntu-fr.org/



http://www.ubuntu-fr.org/



http://kaella.linux-azur.org/

http://knoppix-fr.org/site/presentation





LES OUTILS & LOGICIELS

Pour la création de mes templates, j'utilise actuellement 4 logiciels :

Logiciels de création vectorielle :

● INKSCAPE : regardez sur le net et lisez également le début du premier tutoriel sur les templates tabulaires, vous aurez toutes les informations sur comment vous procurer et utiliser Inkscape.

http://www.inkscape.org/?lang=fr

● XARA EXTREME : en réalité, XARALX (Xara for LinuX).Ce logiciel est payant si vous allez voir sur Internet et regardez le site

XaraExtreme.. Pourquoi en parler ? Parce que ce logiciel est passé en OpenSource et

utilisable gratuitement si vous utilisez la version Linux appelé XaraLx !!!

Ce logiciel est une perle rare : les détracteurs du monde libre avancent souvent la qualité discutable des logiciels libres, mais aussi l'argument consistant à dire que tous ces logiciels ne bénéficient pas de la puissance et de l'avancée technique et professionnelle des logiciels commerciaux, et c'est quelque fois vrai..

Allez faire un tour sur le site de XaraLx et nous en rediscuterons peut-être sur les forums ou ailleurs...http://xaralx.org/

http://www.xaraxtreme.org/news/general_news/libre_graphics_meeting_-_french.html

Notez tout de même que la version que vous pouvez utiliser sous Linux ne contient pas les plugins commerciaux existants dans la version Windows.. Vous aurez une version fonctionnelle et performantes, mais comparativement à la version commercialisée, il « manquera » certaines fonctions. Pour ce tutoriel, cela n'est pas vraiment génant.

Logiciel de retouche photo (et beaucoup plus !)

● The GIMP : un incontournable.. Je ne prends pas la peine de le présenter !

Editeurs de texte

● KATE (Linux) : un simple éditeur de texte amélioré permettant de mettre en évidence les codages en php, css, etc.. Cet éditeur ne fonctionne que sous Linux mais vous trouverez des équivalents gratuits pour Windows avec NotepadPlus, Context, etc.. Tous ces éditeurs sont très faciles à trouver sur le Net ou directement sur

les espaces de téléchargement de JoomlaFrance.





http://xaralx.org/

http://www.inkscape.org/?lang=fr



Kate : intégré au bureau KDE uniquement dans les distributions LinuxNotepad+ : http://www.zdnet.fr/telecharger/windows/fiche/0,39021313,11000984s,00.htmContext : http://www.clubic.com/telecharger-fiche10500-context.htmlGimp : http://www.gimp-fr.org/presentation.phpMalgré tout, et comme me l'a fait remarqué Aubin par mail ;)), il existe bien d'autres logiciels gratuits, mais la liste serait particulièrement longue..

Si vous voulez vous rendre compte de la liste existantes des logiciels libres que vous pouvez utiliser, rendez-vous sur le site :

http://www.framasoft.net/

Il y en aura pour tout le monde !!

Utilisez les logiciels qui vous conviennent : si vous avez l'habitude d'autres logiciels, vous ne devez pas changer pour changer ! Si par contre, vous n'avez rien sous la main pour démarrer, autant vous faire la main sur ces logiciels plutôt que dépenser de l'argent.

Chacun verra midi à sa porte et ce tutoriel n'est pas là pour révolutionner vos habitudes et réflexes de travail : adaptez ce que je vais vous expliquer et rejetez ce qui ne vous sert pas..



http://www.framasoft.net/

http://www.gimp-fr.org/presentation.php



http://www.clubic.com/telecharger-fiche10500-context.html



http://www.zdnet.fr/telecharger/windows/fiche/0,39021313,11000984s,00.htm





PREMIERE PARTIE – LES BASE S





« Reprenon s tout depuis le début.. »

Dans le tutoriel précédent, je vous avais expliqué comment réaliser votre fond de page avec Inkscape et comment ensuite le découper pour le « remonter » dans un tableau sous forme de « puzzle ».

Il va vous falloir oublier cette méthode et ne vous souvenir que de comment faire votre fond de page.. et encore !

Je vais vous donner quelques petits trucs de conception graphiques permettant logiquement de monter vos templates en <div>, mais je pourrai difficilement faire plus que dans le premier tutoriel pour vous apprendre à « créer » graphiquement.. Peut-être dans un prochain tutoriel..

La différence majeure entre la création dans un tableau et la création en <div> est pour moi la suivante : les images de fond intégrées comme « background » ne réagissent pas de la même manière.

Voyons ça..

Dans un tableau, si vous mettez une image en arrière plan dans une cellule, cette image est affichée, même si aucun texte ou contenu n'est appelé dans la cellule.

Dans un div (à partir de maintenant, je ne mettrai plus forcément les <> dans le texte autour du div !), la zone elle-même ne s'affiche que si il y a un contenu, l'image de fond n'étant qu'une « information » d'embellissement..

Bien évidemment, il sera possible de donner une largeur et une hauteur à nos div, mais cela ne réglera pas entièrement notre problème..

Dans la pratique, cela signifie que si j'ai une image (un logo par exemple), je vais, dans un div, donner une largeur et une hauteur. L'image en elle-même ne devant pas forcément se répéter, cela ne posera pas de problème particulier (on fait rarement apparaître une zone de texte sur un logo, mais c'est possible !).

Par contre, les fonds répétitifs (comme dans une colonne affichant nos menus par exemple) auront besoin d'être gérés différemment : les fonds ne seront répétés que sous les textes.. mais nous verrons en détails tout cela.





Logique de création des templates

Alors que nous réfléchissions en fond « global » pour les templates tabulaires, en utilisant une image à plat découpée en morceaux, nous devrons réfléchir en couches empilables pour nos templates en div.

Nous allons aborder comme base d'étude des présentations classiques et simples, puis nous verrons différentes études de cas particuliers.

Nous finirons par une création complète d'un template que j'ai créé pour l'occasion.

Avant tout, nous devons comprendre comment fonctionnent les div..





COMPRENDRE LE FONCTIONNEMENT D'UN TEMPLATE EN DIV

Règles d'appel et codage Cs s

Gardez en tête que les explications qui suivent vont être le plus court possible : il faut arriver à réaliser votre template sans pour autant que je sois obligé de ré-écrire ce qui existe déjà sur le net ou dans les librairies sur le Css.

● Les <DIV> : blocs portant plusieurs noms plus ou moins exotiques (conteneurs, balises, calques, layers, etc..), ces éléments sont des « conteneurs », un petit peu comme des cellules libres de tableau, voire des tableaux à eux tout seuls... Pour que nous utilisions le même langage, je les appellerai tout simplement.. les <div>..

Chaque <div> possède, comme les différents éléments qui composent une page, toute une série de paramètres possibles : imaginez un bloc rectangulaire sur une feuille de papier : il va avoir une position sur votre feuille, une largeur, une hauteur, un encadrement (ou pas d'encadrement), une couleur de fond (ou pas), etc..

Ce que l'on va mettre à l'intérieur de ce bloc va pouvoir être de plusieurs natures : du texte, des images, de la couleur, d'autres blocs, etc..

Chaque bloc est défini au moment où on l'insère dans le fichier Index.htm et paramétré dans un fichier externe qui va regrouper la totalité des tailles, positions, etc.. : le fameux fichier template_ccs.css

Chaque bloc va se comporter et se positionner par rapport aux autres blocs : vous allez définir pour chaque bloc sa manière de se comporter dans la société des <div>.

Lorsque vous créerez un <div>, il devra avoir un nom qui vous permettra de l'identifier et de lui dire comment se comporter sur votre page.

Ok ! Et dans la pratique, je fais comment ???! Houla ! Tout doux mon seigneur !

Une des règles importante dans la création de template en <div> est de prendre le temps de travailler de manière organisée, en progressant au fur et à mesure, sinon, ça va rapidement tourner au cauchemar !





Vous aurez donc besoin de travailler sur 2 fichiers pour chaque <div> :

● le fichier index.php où vous allez donner les noms des <div> (dans l'ordre de préférence, ce n'est pas forcément obligatoire, mais c'est plus logique et cela aide à la lecture. De plus, il y a quand même une logique d'imbrication des éléments qu'il vous faudra respecter, alors autant coder correctement dès le départ, non ?)

● le fichier template_ccs.css qui contiendra les paramètres de chaque <div> créé dans index.php





Représentation d'une boite <div>un bloc <div> peut être représenté comme cela :

Ce que vous voyez n'est qu'une représentation ! Les différentes parties ont été agrandies pour pouvoir y intégrer les légendes.

Par contre, il faut bien que vous compreniez ce que vous voyez :

Chaque <div> possède donc :

● 4 marges (en anglais : margin)

● 4 bordures (en anglais : border)

● 4 rembourrages (en anglais : padding)

● 1 largeur (en anglais : width)

● 1 hauteur (en anglais : height)

J'attire votre attention sur le fait que la largeur et la hauteur sont définis à l'intérieur du <div> : cela sera particulièrement important lorsque vous calculerez (si, si, vous calculerez !) la taille que prennent vos <div> à l'écran.

Par défaut, si la largeur d'une boite n'est pas précisée, elle est de la largeur de son parent (l'endroit où elle est ancrée, la largeur de page, la largeur de la boite dans laquelle elle est elle-même incluse, etc..), donc la largeur maximum à sa disposition.





Ces propriétés de boites peuvent être données de plusieurs manières, soit en tapant chaque valeur pour chaque propriété, soit en regroupant ces valeurs selon une règle d'écriture simple.





Comment écrire les valeurs pour les propriétés de base d'un <div> ?

Les propriétés « padding », « border », et « margin » peuvent regrouper les valeurs de plusieurs manières :

je veux 1 pixel pour les 4 marges de mon bloc <div> s'écrit :

margin-top : 1px;

margin-right : 1px;

margin-bottom : 1px;

margin-left : 1px;

IMPORTANT : vous remarquerez qu'à chaque fois que j'ai passé un paramètre, j'ai tapé la propriété, j'ai rajouté un double point vertical, tapé la valeur, puis j'ai terminé la phrase avec un point virgule. C'est toujours de cette manière que vous taperez les paramètres dans votre fichier css (nous y reviendrons après).

Je peux également grouper ces propriétés 2 par 2 ou les 4 ensembles (à condition qu'elles soient identiques).

L'ordre des valeurs n'est pas anodin : quand on regarde la boite, on donne les valeurs dans l'ordre suivant : haut, droite, bas, gauche (ou si vous préférez l'exemple de la pendule : midi, 3h, 6h, 9h)

Je peux donc écrire la même chose qu'au dessus de cette manière :

margin : 1px 1px 1px 1px;

Je peux également regrouper les valeurs 2 par 2 : cela ne sera possible que si vous ne donnez que 2 valeurs.

Dans ce cas, la première valeur correspond à haut et bas, la deuxième à droite et gauche.

Exemple : je veux une marge en haut et en bas de 2 pixels et pas de marge à gauche et à droite (donc marge égale à zéro).

Je peux donc l'écrire comme ceci :

margin : 2px 0px;

Enfin, si toutes les valeurs sont identiques (comme dans le premier





exemple), il suffit de ne donner qu'une seule valeur.

Exemple : toutes mes marges sont réglées à 1 pixel de large

margin : 1px;

Et voilà !

A vous de trouver la meilleure façon d'écrire (la plus économique) : plus vos fichiers sont gros, plus ils mettent de temps à se charger sur les navigateurs..

Pour terminer ces explications, il me faut ajouter une information complémentaire : l'unité de mesure que j'ai utilisé est le pixel, mais il est possible d'utiliser d'autres unités de mesure :

UNITES DE MESURE● pixel (px) : point d'image calculé par rapport à la résolution d'écran. C'est

l'unité la plus simple à calculer. C'est cette unité qu'il vous faudra utiliser pendant l'apprentissage avec ce tutoriel.

● Em (em) : « em » est calculé par rapport à la taille de police défini par l'internaute pour visualiser les pages sur son navigateur. « em » se réfère à la taille de la lettre « M ». C'est une unité très souple, mais qui demande un peu de pratique pour l'utiliser (il faut créer son template en calculant les différentes tailles par rapport à la taille utilisé par l'internaute..)

Les templates entièrement codés en « Em » sont dits « élastiques », la taille des conteneurs variant avec la taille des contenus.

● pourcent (%) : unité relative.. Très utile pour créer un template avec des tailles dynamiques. Cette unité doit toujours être calculée « par rapport à un tout ». Si vous donnez une propriété ressemblant à « width : 75%; », c'est 75% de l'élément parent (de votre page, d'une autre boite <div> contenant votre boite <div>, etc.., donc de l'espace dans lequel est intégré votre <div>).

Les templates codés en % sont dit « liquides », la taille des blocs s'adaptant à la taille de l'écran où ils sont affichés.





Les unités « em » et « % » permettent d'avoir des zones d'affichage « dynamiques » : ces zones vont changer de taille par rapport à l'affichage utilisé par l'internaute. C'est un travail supplémentaire pour calculer vos templates, mais cela vous permet d'avoir des templates « élastiques » ou « liquides ».

Dans ce tutoriel, je n'utiliserai que des valeurs fixes données en pixels : vous pourrez vous amuser à créer vos templates avec d'autres unités de mesures plus tard, mais vous serez obligé de travailler dans « l'absolu » (100% de « quelque chose » n'est pas identique sur tous les navigateurs..)

Sachez enfin qu'il existe encore d'autres unités de mesure : vous les trouverez sur les documentations en ligne traitant du Css.





Comment passer les paramètres d'affichage de chacun de ces <div> ?

Dans l'absolu, il est possible de donner les paramètres des <div> au moment où on les crée dans le fichier index.php. Dans ce cas là, l'écriture est de ce type

exemple : une boite de 300 pixels de large, 100 pixels de haut, avec une marge haut, droite, bas, gauche réglée à 10px

<div style="width:300px; height:100px; margin:10px;"></div>

C'est possible..mais complètement à côté de ce que nous voulons faire !

Je vous rappelle que pour que votre template soit correctement codé (dans la logique de ce tutoriel qui veut que nous ayons au final quelque chose de « souple » et conforme aux standards), vous devez paramétrer vos boites, non pas dans le fichier index.php, mais dans le fichier template_css.css !

Donc, pour cela nous allons ajouter un élément complémentaire : identifier nos <div>

En reprenant le même exemple que ci-dessus, nous allons intégrer la boite dans le fichier index.php avec un identifiant « maboite » (c'est pour l'exemple !!) et ensuite réutiliser ce nom dans le fichier css pour expliquer au navigateur comment afficher correctement la boite.

dans Index.php..

<div id="maboite"></div>

..et dans le fichier template_css.css

#maboite {

width:300px;

height:100px;

margin:10px;

}

C'est exactement pareil que dans l'exemple précédent en terme de résultat, mais complètement différent en terme de « cohérence ».





Nous avons donc ici une nouvelle syntaxe (très simple !) à observer :

Un bloc <div> s'ouvre et se ferme (ne tapez pas le texte en italique !!!!) :

<div id="maboite"> on ouvre la boite

</div> on ferme la boite

Un bloc <div> se paramètre dans le fichier Css sous la forme (ne tapez pas le texte en italique !!!!) :

#maboite { identifiant utilisé pour insérer la boite dans le fichier index.php, l'identifiant est précédé du symbole dièse (« ALTGR »+ « 3 ») et on ouvre une accolade (« ALTGR »+« 4 »)pour signaler le début de l'écriture des propriétés

width:300px; propriété terminé par ;

height:100px; propriété terminé par ;

margin:10px; propriété terminé par ;

} on ferme l'accolade (« ALTGR » + « + ») pour signaler que cette partie est terminée

A noter :

● Dans un fichier Css, vous pouvez ajouter des commentaires en utilisant la syntaxe suivante : /* commentaires */ ou /** commentaires **/

Il est important que vous commentiez vos fichiers (je vous le redirai plus loin !)

● Les raccourcis claviers de type « ALTGR » sont des raccourcis standards fonctionnant dans tous les logiciels : ce ne sont que des codes claviers permettant d'obtenir les différents caractères du clavier..

Erreurs courantes

Lors de vos saisies, vous allez..vous planter ! Bah oui, comme tout le monde !

A moins que vous puissiez garantir l'absence de faute de frappe, d'inattention, que vous ayez une expérience de codage importante (et encore !) etc.. Tout le monde se plante.





● Pensez à relire chacune de vos lignes,

● vérifiez l'orthographe des mots,

● vérifiez les ponctuations..

C'est souvent ce qu'il ressort des appels aux secours « Eh, mon template ne marche pas ! » et qui se traduit par « eh ! T'as oublié un point virgule à la fin de la 4e ligne ! »

Dans les fichiers que vous créerez, la moindre erreur entraînera un dysfonctionnement de votre template..

NOTE SUR « ID »

Je vous ai parlé de « id » pour identifier vos div. Il existe également un autre moyen d'identifier les div : « class ». Pour faire simple (il existe de grandes discussions sur ce sujet !), considérez la chose suivante :

si un sélecteur (div ou autre) est utilisé plusieurs fois dans un document, vous utiliserez « class », (par exemple un div permettant d'utiliser un style),

si un sélecteur (div ou autre) n'existe qu'une seule fois et n'est déclaré et utilisé qu'une seule fois dans votre index.php, vous utilisez « id ».

Dans les exemples suivants, les différents div sont uniques, donc je n'ai utilisé que des « id ».

De plus, les « id » ont une plus grande importance dans le css en cas de conflit (règles se contredisant), si vous avez un « class » stipulant une règle contraire à celle d'un « id » au même endroit, c'est le « id » qui est appliqué.

Pour ces notions de css, il faudra sans doute développer un peu plus : je pense que je vous livrerai rapidement un complément regroupant les règles css ainsi que différents exemples, mais en attendant, à vous de chercher sur le net..

Un bon point de départ pour votre recherche est ici :

http://wiki.media--box.net/documentation/css/



http://wiki.media--box.net/documentation/css/



Bon, faisons le point : vous avez compris ce qu'est une boite <div> et comment la paramétrer.

C'est pas mal ! Mais c'est pas suffisant ! :))

Nous devons maintenant comprendre comment, après avoir donné les tailles de nos boites, les positionner sur la page.

Il existe plusieurs possibilités de positionnement de vos boites. Je ne vous donnerai que les éléments qui vous permettront de créer le template de cet exemple, puis les vôtres ensuite. Vous pourrez en théorie réaliser tous les templates possibles, mais certains demanderont une analyse efficace pour que vous arriviez à vos fins..

De plus, la totalité des propriétés Css demanderait que je ré-écrive une doc de plusieurs dizaines de pages, documentation ayant déjà été réalisée ailleurs !





Règle n°1 des <Div> : toutes les boites sont dans le flux par défautPar défaut, chaque boite que vous positionnerez dans votre page sera

automatiquement passée à la ligne, quelque soit sa taille

Ainsi, si j'ai 3 boites de 200 pixels, 250 pixels, 300 pixels, respectivement, elles s'afficheront ainsi dans le navigateur (ne faites pas attention aux couleurs de fonds et bordures):

Chaque boite créée est donc automatiquement renvoyée à la ligne, même si il reste de la place pour afficher la suivante à la suite.

On parle alors de « flux », un petit peu à la manière d'un cours d'eau où les différentes caisses (nos boites) se suivent les unes sous les autres sans se chevaucher.

Il va être possible de faire sortir les boites du flux en les faisant « flotter » au dessus de celui-ci.





Règle n°2 des <Div> : toutes les boites peuvent sortir du flux

Il est heureusement possible de sortir les boites du flux en utilisant une propriété pour les faire « flotter » au dessus du flux : float

Cette propriété sera activée de 2 manières :

● float: left; La boite sera collée au premier espace disponible en partant de la gauche de l'écran

ou

● float:right; La boite sera collée au premier espace disponible en partant de la droite de l'écran

La propriété « float » reste active jusqu'à qu'elle soit désactivée soit à gauche, soit à droite, soit entièrement :

La commande suivante désactivera le « flottement » d'une boite :

● clear:left; Le flottement est annulé sur la gauche à partir de ce point

● clear:right; Le flottement est annulé sur la droite à partir de ce point

● clear:both; Le flottement est annulé sur la gauche et la droite à partir de ce point

« Clear » ramène donc le fonctionnement des boites automatique avec un passage à la ligne





Pour résumer « float » et « clear » :

● lorsque « float » est utilisé, la boite va flotter au premier emplacement gauche ou droite (suivant ce que l'on a spécifié),

● si une autre boite « float » est déclarée, elle se colle à la précédente si il lui reste suffisamment de place pour le faire (les largeurs des boites s'additionnent et doivent tenir dans la largeur de l'espace ou elles se trouvent)

● si on veut stopper le « flottement » des boites, on utilise la propriété « clear », cela permet de générer un retour automatique à la ligne.

● si rien n'est spécifié, c'est la propriété parente qui l'emporte : si la propriété précédente était « clear », elle reste en « clear »

● si vous utilisez une boite en « float », spécifiez toujours si la boite flotte à gauche ou à droite.

● si vous avez des boites flottantes, pensez à spécifier une largeur !!! Les boites flottantes sans largeur peuvent devenir...folles !..et partir se loger n'importe où !





Quelques exemples seront les bienvenus..

dans index.php, nous déclarons 4 <div>

<div id="boite1"></div>




je veux obtenir quelque chose comme ça (encore une fois, je ne parle que du positionnement, pas des couleurs ou des textes !) :

NOTE : Pour la suite, les commentaires seront tapés tels qu'ils devraient l'être dans le fichier css :

/** on ouvre un commentaire

**/ on ferme un commentaire

Utilisez les commentaires pour pouvoir vous relire !!





Dans le fichier template_css.css, je vais donc déclarer les éléments suivants (je considère que ma largeur écran fait 960 px de large) :

#boite1 { /**toujours pareil : identifiant et accolade**/

width:960px; /**largeur boite 1 ;**/

height:100px; /**hauteur boite 1**/

margin:1px; /**marge générale de 1 pixel**/

padding:1px; /**rembourrage générale de 1 pixel**/

clear: both; /**inutile ici, c'est la première boite ! Mais je le mets pour que vous puissiez le « voir » **/

} /** on ferme l'accolade pour signaler que cette partie est terminée**/

#boite2 { /**rebelote ! : identifiant et accolade**/





float: left; /**la boite doit se coller sur le premier « emplacement libre » à sa gauche, donc, ici à gauche de l'écran (la page, le « body ») et on ne passe pas à la ligne après**/


(suite du code page suivante)





#boite3 { /**belote !(euh, j'aurais du écrire ça avant rebelote..) : identifiant et accolade**/





float: left; /**On colle sur le bord gauche. Premièrement emplacement libre, donc à la suite de la boite 2**/


#boite4 { /**Dix de der ! (là j'ai bon, m'sieur !) : identifiant et accolade**/

clear: both; /**Cette fois, je veux retourner à la ligne ! J'annule donc le « flottement »..**/





} /** on ferme l'accolade pour signaler que cette partie est terminée et nous avons terminé..**/

Les propriétés « float » et « clear » peuvent être utilisées de multiples manières et permettent différents montages. Je vous donnerai quelques trucs au fur et à mesure de notre progression.

Pour l'instant, on a un boulot à terminer de comprendre !

Notez qu'il existe bien d'autres manières de positionner des <div> : je ne vous décris que ce dont nous avons besoin pour travailler sur le template de ce tutoriel.

Je vous ai joint en annexe de ce tuto la feuille de référence Css publiée sur le net sous licence GPL. A vous d'allez chercher les significations de chaque propriété si vous voulez toutes les utiliser (voir annexes).





Comment utiliser tout ça avec nos images découpées ? Comment tout ré-assembler ?

Je ne vais utiliser que les propriétés css qui nous sont indispensables pour ce montage.

Je reviendrai sur le css lorsque nous arriverons à la dernière partie du tuto pour l'explication complète des fichier css..

Chaque <div> peut avoir, entre autres, les propriétés suivantes (ce sont les propriétés qui seront utilisées dans ce tutoriel pour les <div>.

Une liste complète de toutes les propriétés se trouve en annexe dans la page « liens ».

Je vous conseille de lire ces pages pour le détail complet des valeurs de propriété, les compatibilités des navigateurs, les ordres d'écriture) :

background : regroupe les propriétés pour le fond d'un bloc (couleur, image, répétition, etc..). Voir la documentation Css pour plus de détails sur cette propriétés.

background-color : couleur de fond

background-image : image de fond

background-position : position de l'image de fond (analysez Rhuk_solarflare pour l'image de fond des boutons et vous comprendrez)

background-repeat: répétition en x, y de l'image ou empêche la répétition

height : hauteur de la boite

width : largeur de la boite

margin (margin-top, margin-right, margin-bottom, margin-left) : marges de la boite

padding (padding-top, padding-right, padding-bottom, padding-left) : rembourrages de la boite

float (float:left, float:right) : permet de sortir une boite du flux (désactive le retour à la ligne après une boite par défaut)

clear (clear:left, clear:right, clear:both) : permet de réintégrer le flux après avoir utilisé la propriété float. Indispensable dans ce tuto et plus tard dans vos réalisations !

Avec ceci, nous allons être en mesure de mettre notre template en forme, même si certaines propriétés manquent pour que ce soit parfait...





Cas N°1

Exemple : un template « classique »

Vous connaissez tous la présentation classique :

● un bandeau en haut,

● une colonne à gauche,

● une zone centrale,

● une colonne à droite

● un pied de page.

Graphiquement, cela ressemblerait à ça :

Pour l'exemple, je pars sur les largeurs suivantes :

● Bandeau : 800 pixels de large

● Gauche : 200 pixels de large

● Centre : 400 pixels de large

● Droit : 200 pixels de large

● Pied de page : 800 pixels de large

Chacune de ces zones aura une zone de publication insérée à l'intérieur :

● Bandeau : user1

● Gauche : left

● Centre : mainbody

● Droit : right

● Pied de page : footer





je vous rappelle que ces zones de publication sont les zones identifiées dans joomla lorsque vous publiez quelque chose : reprenez la documentation de Joomla! si vous ne comprenez pas cette notion.

Nous avons plusieurs manières de réaliser cette disposition (vous trouverez également le terme « layout » qui signifie la même chose en anglais..), c'est ce qui fait que chaque template est plus ou moins difficile à lire suivant la logique du créateur..

1ère solution : toutes nos boites sont placées directement dans la page avec des marges nulles

Dans index.php (placez ce code entre les balises <body></body>..

<div id="bandeau"></div>

<div id="gauche"></div>

<div id="centre"></div>

<div id="droit"></div>

<div id="baspage"></div>

..des div dans lesquels nous ajoutons nos positions de publications qui seront utilisées dans Joomla pour appeler notre contenu..

<div id="bandeau"><?php mosLoadModules ( 'user1' ); ?></div>

<div id="gauche"><?php mosLoadModules ( 'left' ); ?></div>

<div id="centre"><?php mosMainBody(); ?></div>

<div id="droit"><?php mosLoadModules ( 'right' ); ?></div>

<div id="baspage"><?php mosLoadModules ( 'bottom' ); ?></div>

Je vous rappelle que ces appels php sont faciles à trouver, mais je vous conseille de vous faire un petit fichier contenant tous les appels possibles de manière à les réutiliser en « copier-coller » dans vos fichiers, c'est plus simple et plus rapide.

Notre layout est posé, il faut maintenant expliquer au navigateur comment les boites doivent se positionner à l'écran dans le fichier template_css.css (ou un autre fichier css pourvu que votre index.php pointe le bon fichier css..)





Fichier template_css.css – Cas N°1

Vous remarquerez que j'ai tapé une instruction générale pour tous les div en début de fichier css : cela permet de mettre à zéro toutes les marges et tous les rembourrages sans être obligé de le répéter dans chaque div. Cela nous donne également un autre avantage : nous sommes sûr que ces valeurs sont bien remises à zéro partout avant de commencer..

J'ai également utilisé une couleur de fond pour chaque zone de manière à bien les différencier à l'écran.

div {

padding:0;

margin:0;

}

#bandeau {

width:800px;

background-color: blue;

}

#gauche {

width:200px;

float:left;

background-color: red;

}

#centre {

width:400px;

float:left;

background-color: green;

}

#droit {

width:200px;

float:left;

background-color: yellow;

}

#baspage {

clear:left;

width:800px;


}





2ème cas : je veux centrer toute cette présentation dans la page du navigateur.

Pour réaliser cela, je ne vais pas centrer les éléments un à un, mais tout simplement les « encapsuler » dans un div, un peu à la manière d'une conteneur, qui lui sera centré. Cela nous permet de tout gérer en une fois.

Index.php – Cas N°1 – Centrer le contenu

<div id= »conteneur »>

<div id="bandeau"><?php mosLoadModules ( 'user1' ); ?></div>




<div id="baspage"><?php mosLoadModules ( 'bottom' ); ?></div>

</div>

Vous remarquerez que le conteneur est ouvert au début, tous les autres divs sont rangés à l'intérieur, puis le div « conteneur » est fermé à la fin.

Dans le fichier css, il nous faut en plus paramétrer le conteneur, donc nous ajoutons :

template_css.css– Cas N°1 – Centrer le contenu

#conteneur {

width:800px;

margin: 0 auto;

}

Explications..

La largeur du conteneur est de 800 pixels (il reçoit les autres div donc il faut qu'il puisse les contenir..)

La ligne « margin » est codé en 2 valeurs (donc, les valeurs « haut et bas » et « droite et gauche ») : marge du haut et du bas : aucune

Marge à gauche et à droite : « auto » pour automatique, les marges doivent être identiques à gauche et à droite de notre conteneur. Du coup, nous obtenons un résultat centré dans la page..

Avec ces exemples, vous pouvez vous amuser à coder vos templates en





terme de disposition des zones. Souvenez-vous que des div peuvent être compris dans des div, eux-même compris dans des div, etc..

Ces différentes imbrications doivent avoir une raison : chaque div se comporte par rapport aux autres ou en parallèle aux autres. A vous de trouver le meilleur agencement pour que le comportement soit efficace sans débauche inutile de div..

Un dernier exemple ?

Allez soyons fous !!





Cas N° 2 – Un template un peu plus complexe..en apparenceRésultat escompté :

Schématiquement, je vais faire les imbrications suivantes :

● Conteneur : va contenir la totalité des div suivants (permettra de centrer le tout)

● Partie haute : contiendra bandeau (600 pixels) et zone de news (200 pixels)

● Partie centrale (partie centre dans le fichier index.php) : contiendra gauche (200 pixels), bloccentre (400 pixels) détaillé dessous, droit (200 pixels)

● Bloccentre (sert à positionner les éléments aux centre !) : contiendra 3 divs les uns sous les autres : pathway (400 pixels), zoneinfo (400 pixels) détaillé dessous, centre (400 pixels)

○ Zoneinfo : contiendra infozone1 (200 pixels) et infozone2 (200 pixels)

● partie basse : contiendra le pied de page (800 pixels)

Même schématiquement, je dispose les blocs « visuellement » en les indentant ici et dans le code : c'est important pour rendre le code lisible et facile à reprendre.





Le Template présenté sous l'apparence des <Div> (Merci à Did85 ;))

Résultat Escompté :

Explication avec les <Div> :


PARTIEHAUTE

CONTENEUR contient les DIV ( PARTIEHAUTE + PARTIECENTRE + BASPAGE)

PARTIECENTRE

BASPAGE





DETAIL DE LA PARTIE HAUTE :

BANDEAU NEWS

DETAIL DE LA PARTIECENTRE :

PARTIECENTRE contient les DIV ( GAUCHE + BLOCCENTRE + DROIT)

GAUCHE DROITBLOC CENTRE





DETAIL DU BLOC CENTRE DE LA PARTIECENTRE :

BLOC CENTRE contient les DIV ( PATHWAY + ZONEINFO + CENTRE)

PATHWAY

ZONEINFO

CENTRE

DETAIL DU BLOC ZONE INFO:

ZONEINFO contient les DIV (INFOZONE1 + INFOZONE2)

INFOZONE1 INFOZONE2

DETAIL DE LA PARTIE BASSE :

BASPAGE est l'unique DIV de cette zone :

BASPAGE




Encore merci à Did85 pour son boulot : ces schémas ont été ajouté grâce à lui. ;)


SCHEMA FINAL AVEC LES DIV :

PARTIEHAUTE

PARTIECENTRE

BASPAGE

BLOC CENTRE

ZONEINFO

CONTENEUR




Le codage du fichier index.php nous donne ceci (simple transposition de notre schéma), j'ai utilisé des codes de couleurs « visuels » pour mettre en évidence l'ouverture et la fermeture des balises div :

Index.php – Cas n°2

<div id="conteneur">

<div id="partiehaute">


<div id="news"></div>

</div>

<div id="partiecentre">

<div id="gauche"></div>

<div id="bloccentre">

<div id="pathway"></div>

<div id="zoneinfo">

<div id="infozone1"></div>

<div id="infozone2"></div>

</div>

<div id="centre"></div>

</div>

<div id="droit"></div>

</div>

<div id="baspage"></div>

</div>





Le codage du fichier css va se faire comme avant :

● « partie haute », « partie centre » et « bas de page » sont les uns sous les autres, donc non flottants,

● « gauche », « bloccentre » et « droit » sont les uns à côtés des autres, donc seront flottants,

● « pathway », « zoneinfo » et « centre » sont les uns sous les autres, donc non flottants,

● « infozone1 » et « infozone2 » sont l'un à côté de l'autre, donc flottants.

Ce qui nous donne dans le css (couleur de fond codée pour chaque zone afin de mieux voir le résultat à l'écran) :

template_css.css – Cas N°2

div {

padding:0;

margin:0;

}

#conteneur {

width:800px;

margin: 0 auto;

}

#partiehaute {

width:800px;

}

#bandeau {

width:600px;


float:left;

}

#news {

float:left;

width:200px;

background-color: yellow;

} (suite page suivante)

#partiecentre {





clear:left; /** on se remet dans le flux pour passer la boite sous « partiehaute »**/

width:800px;

}

#gauche {

float:left; /** on se remet en flottant dans la boite « partiecentre » **/

width:200px;

background-color: fuchsia;

}

#bloccentre {

float:left;

width:400px;

}

#droit {

width:200px;

float:left;

background-color: fuchsia;

}

#pathway {

clear:left; /** dans le « bloccentre », les éléments sont les uns sous les autres, donc on revient dans le flux **/

width:400px;

background-color: red;

}

#zoneinfo {

width:400px;

}

(suite page suivante)





#infozone1 {

float:left; /** les zone info 1 et 2 sont l'unes à côté de l'autre **/

width:200px;

background-color: orange;

}

#infozone2 {

float:left;

width:200px;


}

#centre {

clear:left; /** et on revient dans le flux pour la zone « centre » qui doit passer sous « zoneinfo »**/

width:400px;

background-color: green;

}

#baspage {

clear:left;

width:800px;


}

Pour terminer, il ne faut pas que j'oublie de compléter mon index.php en y ajoutant les zones de publications comme ceci :

zone de news : news

gauche : left

pathway : pathway

infozone1 : user1

infozone2 : user2

centre : mainbody

droit : right

pied de page : bottom





Ce qui nous donne le fichier index suivant :

index.php – Complet – Cas n°1

<div id="conteneur">

<div id="partiehaute">


<div id="news"><?php mosLoadModules ( 'news' ); ?></div>

</div>

<div id="partiecentre">


<div id="bloccentre">

<div id="pathway"><?php mosPathWay(); ?></div>

<div id="zoneinfo">

<div id="infozone1"><?php mosLoadModules ( 'user1' ); ?></div>

<div id="infozone2"><?php mosLoadModules ( 'user2' ); ?></div>

</div>


</div>


</div>

<div id="baspage"><?php mosLoadModules ( 'bottom' ); ?>

<?php include_once('includes/footer.php'); ?></div>

</div>

Remarquez également que j'ai couplé les appels php « bottom » et « footer » dans le bas de page..

Tapez ce code et regardez le résultat.





Note : souvenez-vous qu'une zone div n'est affichée que si elle est utilisée : il faut qu'il y ait un contenu (texte, image, etc..). A partir de là, certaines zones ne seront pas affichées si aucun contenu n'est appelé dans les zones de publication.

Si cela vous arrive, avec par exemple la zone correspondant au bandeau où nous mettrions notre logo où il n'y aurait donc pas de contenu excepté une image de fond , il faudrait ajouter au css quelques propriétés pour ces zones : la hauteur, voire la hauteur minimale.

La hauteur est bien interprétée par tous les navigateur, par contre, la hauteur minimale n'est pas comprise par tous.. à vous de trouver lesquels.. ;)

Propriétés Css pour les hauteurs de boites

Hauteur = « Height: valeur; »

Hauteur minimale = « Min-height: valeur; »

Notes complémentaires pour l'exemple 2

Comme me l'a souligné « Emaen » lors de la relecture de ce tutoriel, il aurait été possible de ne pas tout encapsuler dans des div contenu dans des div, etc..

Le choix fait ici est d'arriver à ce que vous visualisiez une méthode de construction, un petit peu à la manière de blocs empilés les uns après les autres, où chaque partie est gérée à son tour.

Il est évident qu'il existe bien d'autres moyens de faire la même chose, mais ce sera à vous de prendre le temps d'analyser les différents exemples à dispositions sur le net dans les différents templates gratuits à télécharger !

Certains trouveront cette méthode pratique, d'autres non. Le but est toujours le même : que vous arriviez à assimiler les bases. Et plus tard, vous améliorerez vos templates où les créerez différemment.





NE CONFONDEZ PAS !

Les blocs <div> et les zones de publications de Joomla!Un bloc div sert à positionner les éléments à l'écran alors qu'une zone de

publication sert à appeler les modules (donc menu, contenus, composants, etc..) dans les éléments div. Vous pouvez donc parfaitement avoir un bloc <div> appelé « left » contenant lui-même une zone de publication « left ». Ce sont 2 choses différentes !

Il n'est pas possible de lister toutes les zones de publications : vous pouvez très bien créer vos propres zones de publication dans Joomla : dans le backend (administration de votre site Joomla), déroulez le menu « site > Gestion des Templates > positions des modules ». Vous pourrez voir qu'un certain nombre de position de publication ont été créées par défaut, mais qu'il vous est possible d'en créer d'autre.

Si vous voulez créer une position appelée « gauche », vous le déclarerez ici et vous n'oublierai pas de l'utiliser lors de la création de votre template en faisant l'appel dans le fichier index.php sous le même nom.

Exemple : j'ai créé une zone « gauche » dans Joomla. Dans mon index.php, l'appel se fera comme ceci :

<?php mosLoadModules ( 'gauche'); ?>

Vous pouvez donc personnaliser complètement vos templates et zones de publication dans Joomla.

Nous allons pouvoir passer à la 2e partie.

Pour y arriver, nous allons étudier 2 templates que vous pouvez trouver partout sur le net sous licence GNU/GPL: « planetBlunt001 » et « Behar »

Ces 2 templates sont intéressants pour la compréhension de notre tutoriel, et il utilisent des techniques de positionnement différentes pour l'un et l'autre.

Vous trouverez directement ces templates dans le package complet de ce tutoriel.





DEUXIEME PARTIE – TEMPLATES COMPLEXE S





ETUDES DE CA SLes 2 études de cas qui vont suivre vont nous permettre de voir comment

un template est codé. Souvenez-vous que ces études ne sont que des exemples et qu'il y a plusieurs manières de coder un template. : certaines méthodes vous « parleront » plus que d'autres.

Pour ces 2 études, je vous donnerai les images, le fichier index.php complet, et la partie du fichier template_css.css qui concerne la disposition des éléments composant le layout.

Prenez le temps de comprendre ces 2 études : cela vous donnera des informations intéressantes pour plus tard.

Je vous laisse juge de ce qui pourrait être perfectible dans ces templates et je ne ferai aucune modification de ce qui me semblerait plus judicieux à mon sens, même si pendant l'analyse j'attirerai votre attention sur certain point.

Pour analyser ces templates, je vous propose une méthode « de la vieille école » que je transcrirai dans ce tutoriel : le papier et le crayon.

Comment procéder :

1. imprimez (ou affichez à l'écran) le fichier index.php ainsi que la partie de template_css.css concernant le layout (n'imprimez pas forcément tout le css : il peut y en avoir des pages et des pages !!)

2. Sur une feuille, identifiez les div que l'auteur a utilisé dans son fichier index.php et refaites le schéma d'imbrication des éléments entre eux sous forme d'arborescence

3. A partir de l'arborescence que vous avez trouvé, prenez le fichier css et faites un dessin des boites entre elles sous forme de page afin de comprendre comment l'auteur a organisé sa page (flottant ou non)

4. Analysez le remplissage de chaque zone avec les images du dossier images du template.

Cette méthode va vous permettre de voir différentes méthodes de création, certaines plus logiques que d'autres, avec des niveaux de difficultés plus ou moins grands.

Ces 2 études vous permettront déjà de démarrer avec de l'aide, le reste ne tiendra qu'à vous.





ETUDE N°1 - « PlanetBlunt001 »





ETUDE N°1 « PlanetBlunt001 »Ce template est intéressant pour l'utilisation des images qui y est faite, le

codage en lui même du div apparaissant comme perfectible (à vous de juger..)

IMAGES DU TEMPLATES (les images utilisées dans les menus et les listes ne sont pas données ici)

Note : pour information, le petit « bg » à côté des images est un terme souvent utilisé dans les templates pour « background », mot anglais pour « arrière-plan »

IMAGES PARAMETRES

Body-bg.jpgImage volontairement réduite en hauteur dans ce tableau pour ne pas prendre une page de texte pour rien !Hauteur : 600 pixelsLargeur : 10 pixels

Pathway-bg.jpg

Taille réelleLargeur : 5 pixelsHauteur : 24 pixelsContrairement à ce que l'on pourrait croire au premier abord, cette image ne correspond pas au « pathway » de Joomla! Ne vous laissez pas berner : l'auteur a dû modifier son template sans changer le nom de ses images.





IMAGES PARAMETRES

Header-main.jpgimage réduite dans ce tableauLargeur : 800 pixelsHauteur : 170 pixels

Main-bg.jpgimage réduite dans ce tableauDégradé gris foncé vers gris clair de gauche à droiteLargeur : 600 pixelsHauteur : 3 pixels

Fichier appelé dans le template mais manquant dans le dossier images du template de l'auteur

back_search.jpgCette image est appelée dans le fichier css (#suche) mais n'a pas été livrée avec le template : l'auteur a dû décider de ne pas utiliser cette image.

Notez que toutes les images sont au format JPG : l'auteur ne veut pas gérer la transparence. Toutes les images opèrent donc un recouvrement total de ce qu'il y a « derrière » lorsqu'elles sont utilisées.





Etude n°1 - « PlanetBlunt001 » - Fichier index.php (seule s les balise s div à l'intérieur de body sont copiée s ici)

<body><div align="center"><div id="main"> <div id="header-top-outer"> <div id="topmenu"> <?php if (mosCountModules( "user3" )) { ?><?php mosLoadModules ( 'user3',-1); ?><?php } ?> </div> <div id="suche"> <?php mosLoadModules ( 'user4',-1); ?> </div> </div> <div id="header-main-outer"> <div id="header-main-inner"> <h1><?php echo $mosConfig_sitename; ?></h1> </div> </div> <div id="header-bottom-outer"> <div id="datum"> <?php echo mosCurrentDate(); ?> </div> <div id="pathway-inner"> <?php mosPathWay(); ?> </div> </div> <div id="leftblock-outer"> <div id="leftblock-inner"> <?php mosLoadModules ( 'left', -2 ); ?> </div> </div> <div id="content-outer"> <div id="content-inner"> <?php mosMainBody(); ?> </div> </div> <div id="footer-outer"> <div id="footer-inner"> <span>© <a href="http://www.larsellmauer.net" target="_blank">Planet Blunt Web-Design</a> 2006 - Site powered by <a href="http://www.joomla.org" target="_blank">Joomla CMS</a> </span> </div> </div></div></div></body>





Etude n°1 - « PlanetBlunt001 » - Analyse d'index.php (le fichier est correctement indenté pour faciliter la lecture)Je vous livre une traduction « adaptée » en français à côté des noms que l'auteur a utilisé.

MAIN (conteneur global)

Header-Top-Outer (Entête-Haut-Conteneur)

TopMenu (Menu du haut, contient le tag « User3 »)

Suche (Recherche, contient le tag « User4 »)

Header-Main-Outer (Entête-bloc principal-Conteneur)

Header-main-inner (Entête-bloc principal-contenu, contient le tag « nom du site »)

Header-Bottom-Outer (Entête-pied-Conteneur)

Datum (Date, contient le tag d'appel « date »)

Pathway Inner (Pathway, contient le tag « pathway »)

Left-block-outer (Bloc de gauche-Conteneur)

Leftblock-inner (Bloc de gauche, contenu, Contient le tag « Left »)

Content-Outer (Contenu du site-Conteneur)

Content-inner (Contenu du site-Contenu, contient le tag « mainbody »

Footer-Outer (Pied de page-Conteneur)

Footer-inner (Pied de page – contenu)

Vous pouvez suivre ci-dessus la hiérarchisation de chaque bloc par rapport aux autres : dans ce template, nous pouvons dire que nous avons 3 niveaux.

Nous avons besoin du fichier css pour savoir comment les blocs se comportent sur les niveaux où ils se trouvent.





Etude n°1 - « PlanetBlunt001 » - Template_cs s.c s s

Code Explications

/*PlanetBlunt001 Template fr Joomla CMS----------------------------------------------Autor: Lars Ellmauer - Planet Blunt Web-DesignBei Fehlern freue ich mich ber eine Rckmeldungper Email an [email protected]. Danke!Dieses Template unterliegt der GNU/GPL Lizenz-----------------------------------------------*/

/*Allgemeine Seiten-Informationen*/

body { font-family: Verdana, Geneva, Arial, helvetica, sans-serif; font-size:12px; background-image:url(../images/body-bg.jpg); background-repeat:repeat-x; background-color:#333333;}

td { font-family: Verdana, Geneva, Arial, helvetica, sans-serif; font-size:12px;}th { font-family: Verdana, Geneva, Arial, helvetica, sans-serif; font-size:12px;}

a:link { color: #333333; text-decoration: none;}a:visited { text-decoration: none; color: #333333;}a:hover { text-decoration: underline; color: #ffffff;

Commentaire de l'auteur..

Règlage par défaut de la page (body)..utilisation d'une image de fond de page que les autres zones vont recouvrir (et cacher si elles ont elles-même des images de fond), répétition sur la largeur (repeat-x) avec une couleur de fond gris foncé (couleur de fond #333333) correspondant à la couleur du dégradé vertical de fond de page (body-bg.jpg) afin qu'il n'y ait pas de « coutures » trop visibles à l'écran.

Si non précisé plus tard, réglages des éléments essentiels pour l'affichage des éléments de texte du site..





Code Explications

}a:active { text-decoration: none; color: #333333;}

/*DIV-Container*/

#main { width: 800px; padding: 0px; margin: 0px;}

#header-top-outer { width:800px; height:24px; background-image:url(../images/pathway-bg.jpg); background-repeat:repeat-x; border: 1px solid #ffffff; color:#333333; text-align:left;}

#topmenu { height: 20px; float: right; width: 600px;}

#suche { margin: 0px; padding: 0px; width: 148px; float: left; background: url(../images/back_search.jpg) right top no-repeat; padding-left: 5px; padding-top: 3px; vertical-align: middle;}

#header-main-outer { width:800px; height:170px; margin-top:5px; background-image:url(../images/header-main.jpg); background-repeat:no-repeat; border: 1px solid #ffffff;}

Ici commence la disposition de notre page :

Zone principale, contient toutes les autres zones, 800 pixels de large

Petite bande de 800 pixels sur 24 pixels, remplie avec l'image répétée « pathway-bg » sur l'axe des x (en largeur), bordure autour de la zone

Zone de 600 pixels de large dans header-top-outer, 20 pixels de haut, contient « user3 », flottant à droite

Zone de 148 pixels de large, zone de recherche, « user1 », flottant à gauche dans header-top-outer, notez que l'image appelée ici n'existe pas dans le template : bien que l'appel se fasse, rien ne sera affiché en fond de bloc.

Sous header-top-outer malgré le fait qu'il n'y ait pas eu de « clear:both; » ici (la largeur du bloc l'oblige à être seul sur une ligne..), ce bloc contient l'image principale du template : le lever de soleil au dessus de la planète.





Code Explications

#header-main-inner { padding:10px; text-align:right; color:#ffffff;}

#header-bottom-outer { width:800px; height:24px; margin-top:5px; background-image:url(../images/pathway-bg.jpg); background-repeat:repeat-x; border: 1px solid #ffffff; text-align:left; font-size:10px; font-weight:bold; color:#333333;}

#pathway-inner{ text-align:left; width:500px; padding:5px;}

#datum { width:250px; float:right; text-align:right; padding:5px;}

#leftblock-outer { width:180px; float:left; margin-top:5px;}

#leftblock-inner{}

Cette zone vient se positionner à droite dans header-main-outer : flottante à droite, texte aligné à droite, appel dans le fichier index.php de « nom du site » (donné dans la configuration du site – Backend Joomla)

Encore une fois, pas de « clear », mais la largeur oblige le bloc à retourner à la ligne sous header-main-outer, même image répétée que dans header-top-outer..

Flottant à gauche dans header-bottom-outer, sert à appeler le « pathway » dans Joomla (d'où la confusion de certains en lisant : l'auteur a utilisé le terme pathway à plusieurs endroits alors que le « vrai » pathway est ici..)

Flottant à droite dans header-bottom-outer, sert à afficher la date du jour..

Ce bloc fait 180 pixels de large et flotte sur la gauche (à côté de content-outer défini ensuite)..

Ce bloc est dans leftbloc-outer. Pensez-vous qu'il soit utile ? A vous de décider..





Code Explications

#content-outer{ width:613px !Important; width:603px; float:right; margin-top:5px; border:1px solid #ffffff; background-image:url(../images/main-bg.jpg); background-repeat:repeat-y; background-color:#cccccc; margin-bottom:5px;}

#content-inner{ padding-left:5px; padding-right:5px; padding-bottom:5px;}

#footer-outer{ width:800px; line-height:33px; clear:both;}

#footer-inner{ background-image:url(../images/pathway-bg.jpg); background-repeat:repeat-x; border: 1px solid #ffffff; margin-top:5px; line-height:23px; text-align:center; font-size:10px; font-weight:bold;

}

Bloc flottant à droite. Remarquez les 2 propriétés « width » : la première est pour Firefox (moteur Gecko), la deuxième pour Internet Explorer (qui ne comprend pas « !important »). Ces 2 lignes sont liées aux différences de calcul de largeur de boites (voir le chapitre correspondant dans ce tutoriel)Notez que cette fois, un dégradé est appliqué dans la zone de gauche à droite, en utilisant l'image « main-bg » répété en y (en hauteur). Encore une fois, la fin du dégradé correspond à la couleur de fond du bloc pour ne pas « faire de trou »

Bloc inclus dans Content-outer et appelant dans index.php la zone de publication « mainbody »

Zone pour le pied de page, l'auteur a jugé bon ici de remettre la boite dans le flux avec « clear:both; », les zones précédentes ne faisant pas la largeur complète du conteneur principal. Plutôt que de donner une hauteur et une hauteur minimal (la propriété n'est pas appliquée correctement par tous les navigateurs..), l'auteur a utilisé la propriétés « hauteur de ligne »..

Contenu dans footer-outer, on retrouve le motif répété en haut de page, avec une hauteur de ligne de 23 pixels. Remarquez dans le fichier index.php que l'auteur a préféré taper directement son pied de page (cela lui permettant de mettre exactement SON texte) plutôt que d'appeler le tag joomla « Footer »..





Etude n°1 - « PlanetBlunt001 » - Mise en évidence des blocsAvec ces différentes informations, nous pouvons « recomposer notre

template ».

J'ai recréé graphiquement le template dans Xara afin de vous mettre en évidence les couches superposées :

Couche n°1 :

On peut voir le dégradé se finissant sur le fond de page grisé..





Couche n°2

Nous avons ici tous les conteneurs « outer ».

Notez que pour la visualiser, j'ai mis la colonne de gauche en blanc : en réalité, elle est transparente et ce sont les images utilisées pour les menus dans joomla qui rempliront cette colonne (regardez en détails la suite du fichier template_css.css dans le template, ainsi que les images utilisées)





Couche n°3

J'ai mis en transparence les zones destinées à accueillir les zones de publications de Joomla.

Pour voir le template terminé, il ne vous reste qu'à l'installer dans Joomla et vérifier si vous obtenez bien tous ces éléments.

Prenez le temps de refaire l'analyse seul : c'est un excellent exercice pour la suite.

Vous pouvez même vous amuser à refaire intégralement ce template en n'utilisant que les images du template et en le recodant à votre manière : peut-être obtiendrez-vous le même résultat avec un code plus efficace..





ETUDE n°2 - « Behar »





ETUDE N°2 « Behar »

Ce template est intéressant pour le positionnement des éléments du layout et pour sa simplicité et son efficacité.

IMAGES DU TEMPLATES (les images utilisées dans les menus et les listes ne sont pas données ici)

IMAGES PARAMETRES

Back.jpgImage volontairement réduite en largeur dans ce tableauLargeur : 782 pixelsHauteur : 8 pixels

Cette image sera utilisée comme fond de page répété en y (en hauteur) dans le fichier css dans « body »

head2.jpgImage volontairement réduite en largeur dans ce tableauLargeur : 782 pixelsHauteur : 200 pixels

Image utilisée dans le fichier css dans « header »

C'est tout ! Pas plus d'image !

Notez comme précédemment que toutes les images sont au format JPG : l'auteur ne veut pas gérer la transparence. Toutes les images opèrent donc un recouvrement total de ce qu'il y a « derrière » lorsqu'elles sont utilisées.





Etude n°2 - Fichier index.php - « Behar » (seule s les balise s div à l'intérieur de body sont copiée s ici)

<body>

<div id="box"><div id="title"></div><div id="header"></div><div id="top-nav"></div>

<div id="main"><?php mosLoadModules ( "top" ); ?><?php include_once("mainbody.php"); ?> <div id="footer"> <?php mosLoadComponent( "banners" ); ?> </div></div>  <div id="right-menu"><?php mosLoadModules ( "left" ); ?></div>

</div></body>

Compact comme fichier, non ?!

Procédons à l'analyse..

Analyse d'index.php (le fichier est correctement indenté pour faciliter la lecture)

Je vous livre une traduction « adaptée » en français à côté des noms que l'auteur a utilisé.

Box (conteneur principal)

Title (bande colorée en haut de page)

Header (contiendra l'image au format « bannière »)

top-nav (bande colorée en haut de page : l'auteur aurait-il oublié d'insérer un appel joomla pour une zone de publication ici ? Le nom qu'il a donné à la zone le laisse supposer..)

Main (conteneur du menu supérieur (l'auteur a intégré « top » ici, de la zone principale (mainbody) et du div suivant(footer))

footer (pied de page dans le lequel l'auteur a utilisé la zone de publication joomla « banners »)

Right-menu (menu de droite dans lequel l'auteur a utilisé la zone de publication joomla.. « left »...)

On peut imaginer que l'auteur a créé son template en décidant « arbitrairement » des noms de zones de publication : mettre « left » dans la zone de droite peut nous emmêler pour utiliser le template. Cela peut aussi s'expliquer par le fait que le menu principal est souvent affiché à gauche de l'écran dans la zone « left »..

Nous pouvons voir que l'auteur a tout réalisé sur le même niveau sans imbrication de div..

L'analyse du css va mettre en valeur une technique intéressante pour le positionnement du bloc « right-menu », le reste étant normalement assimilé par les études précédentes.





Etude n°2 - Template_cs s.c s s - BeharSeul le code relatif au layout est reporté ici.

Code Explications

body { margin: 0; padding: 0; border: 0; text-align: center; color:#000000; background-color: #DFC0C0; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100.01%; background-image: url(../images/back.jpg); background-repeat: repeat-y; background-position: 50% 0px;}

#box { width: 782px; margin-right: auto; margin-left: auto; text-align: left; padding: 1px; margin-top: 0px; position: relative;}a:link { color:#02486C; text-decoration:none;}a:visited{ color:#02486C; text-decoration:none;}a:hover{ border-bottom: 0px solide #ffffff;}

Ici, pour la totalité de la page, l'image « back.jpg » est utilisée. Remarquez une notion intéressante : pour centrer l'image dans la page, l'auteur a utilisé « background-position ». Les valeurs sont données ici dans l'ordre : largeur, hauteur (ordre à respecter pour cette propriété). Vous pouvez voir qu'il a indiqué « 50% 0px », ce qui permet à l'image d'être centrée dans la page. C'est ici une autre technique pour centrer le fond lorsque vous l'intégrez directement dans « body ».

Un div de 782 pixels, centré automatiquement en largeur. L'information « position: relative » n'était pas obligatoire ici : c'est le comportement par défaut des div.

L'auteur paramètre les liens par défaut pour tout le site..





Code Explications

#title { background-color: #02486c; width: 760px; margin: 0px 0px 0px 11px; padding: 1px; border-bottom:2px solid white; height: 30px;}

#title h1 { color: #FFFFFF; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 24px; text-align: right; font-style: oblique; font-variant: normal; margin: 0px 20px 0px 0px; padding: 0px;}

#header { background-image: url(../images/head2.jpg); background-repeat: no-repeat; width: 760px; height: 200px; margin: 0px 0px 0px 11px; padding: 1px 1px 1px 0px;}

Un div de 760 pixels de large et de 30 pixels de haut (donc moins large que le div « box » dans lequel il est positionné, avec un marge à gauche de 11 pixels (donc un décalage vers la droite). La boite est remplie avec une couleur de fond (un bleu faisant écho au bleu de la bannière) recouvre l'image positionnée dans le body, mais le décalage de 11 pixels permet de voir le petit motif d'ombrage du fond sur la gauche et la droite qui, avec la répétition, crée l'illusion de l'ombre. La boite bénéficie d'une bordure de 2 pixels avec un trait blanc uniquement sur le trait inférieur (border-bottom).

Ici, l'auteur détermine le style H1 uniquement pour le div title. C'est étonnant quand on voit que dans le fichier index.php, il n'y a pas eu d'appel de zone de publication. Sans doute un « reliquat » d'un essai abandonné..

Ce div contient l'image des feuilles sous la neige. Encore une fois, la zone ne fait que 760 pixels de large et 200 pixels de haut, et subit un décalage vers la droite de 11 pixels avec la marge. L'image n'est pas répétée (no-repeat) et l'auteur n'a pas spécifié de position, donc l'image est positionnée en haut à gauche du div.





Code Explications

#top-nav{ width:760px; margin-left:11px; background-color : #02486C; height : 30px; font-size: 80%; border-top : 2px solid #FFFFFF; padding: 0px; margin-top: -3px; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #FFFFFF;}

#main { font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 11px; line-height: 11px; padding: 12px; margin-top: 0px; border: thin none #FF0000; float: left; width: 560px;}

#main p { padding-left: 20px; padding-right: 15px;}

#main h1 { text-transform:uppercase; margin:10px 40px 0px 20px; color:#02486C; text-align:left; font-size: 120%;}

Ce div (toujours de 760 pixels de large avec une marge de 11 pixels sur la gauche) fait 30 pixels de haut, est rempli d'une couleur de fond (la même que dans le bloc « title »), et possède quasiment les mêmes propriétés que le bloc « title ». Un bel exemple de propriétés identiques écrite différemment..

Ah ! Ici, contrairement aux blocs précédents, nous avons un bloc « flottant à gauche » qui va permettre à l'auteur de positionner un autre bloc à côté de lui (en fait, c'est celui-ci qui flotte, celui qui s'affichera à côté sera dans le flux !)La largeur de ce bloc ne fait que 560 pixels de large.Quelques propriétés générales au bloc et à son contenu sont données ici.

L'auteur redéfinit l'affichage du texte (p) au niveau du padding à gauche et à droite, pour éviter que le texte ne soit à cheval sur « l'ombre » du fond.

Ici, toujours dans le bloc « main », l'auteur indique comment le style H1 doit être affiché : majuscule (uppercase), couleur, marges, alignement, taille du texte de 120% (100% étant la référence du texte à l'écran, cela permet d'avoir un rapport toujours identique entre titres et textes).





Code Explications

#right-menu { width:180px; margin:0px 0px 0px 580px; border: 2px none #FFFFFF; padding: 0px;}

Le bloc du menu de droite fait 180 pixels de large et possède une marge à gauche de..580 pixels ! Et voilà comment l'auteur a choisi de positionner le contenu correspondant à sa colonne de droite. La colonne de gauche étant flottante, ce bloc suit le flux et c'est la colonne de gauche qui se superpose à lui sans réellement le faire à cause de la marge de 580 pixels..

Ce template est intéressant par sa relative simplicité et parce qu'il vous permet également de rapidement vous exercer à le recréer « à votre manière ».

Les choix de l'auteur sont corrects, dans le sens où il arrive à un template fonctionnel, mais il était bien sûr possible de créer cette disposition différemment.

Comme pour l'étude n°1, je vous donne les 2 niveaux d'imbrication : le fond de page et l'affichage des blocs sur ce fond.





Etude n°2 - « Behar » - Mise en évidence des blocsAvec ces différentes informations, nous pouvons « recomposer notre template ».

J'ai recréé graphiquement le template dans Xara afin de vous mettre en évidence les couches superposées :

Couche n°1 :

Body est rempli avec l'image de fond...





Couche n°2 :

...et tout le reste est au même niveau.

J'ai fait apparaître les zones transparentes en bas de page en les rendant translucides et en ajoutant un trait fin autour pour que vous les voyiez.

Installez le template dans un Joomla et, comme pour l'étude n°1, refaites ce template vous-même en utilisant les images fournies avec le template.

Nous pouvons maintenant passer à la 3e partie : création d'un template complet !

Avec tout ce que nous avons vu, cela ne va pas être si difficile maintenant !





TROISIEME PARTIE – CREATION COMPLETE « CIRCUS »





Créer un template co m ple x e : gérer les image s et les fond s de page.

Dans cette partie, je vais répéter un certain nombre de choses existantes dans le premier tutoriel et ne changeant pas ou peu. Vous pouvez passer cette partie si vous n'avez pas de lacunes ou d'incompréhensions.

A noter que dans le premier template, je vous faisais utiliser les fichiers de base du template « rhuk_solarflare ». Dans ce tutoriel, je vous ferai utiliser un fichier mis à disposition sur le net ayant l'avantage d'avoir les différentes classes Joomla commentées et classées. Ainsi, même si la totalité des classes ne sont pas écrites et documentées, vous aurez à votre disposition le fichier de référence et vous pourrez le personnaliser à volonté.

Je mettrai ce fichier en téléchargement sur le site http://www.xlformation.sup.fr comme d'habitude ainsi que dans le package complet de ce tutoriel.








PREPARATION DE NOTRE ESPACE DE TRAVAIL

Cette partie sera composée de plusieurs étapes :

1. Création de notre espace de travail sur le disque

2. Copie des fichiers dans les différents dossiers

3. Adaptation, création, modification des fichiers du template

4. Finalisation du template

5. Test de notre travail.

Commençons !





1. Création de notre espace de travail sur le disque.

Nous allons devoir organiser nos fichiers sur le disque pour travailler de manière cohérente.

Vous allez créer l'arborescence suivante :

|--Circus (dossier qui va contenir tout le template, à vous de choisir le nom)

| |--css (dossier contenant le fichier css)

| |-- template_css.css (fichier css)

| |--images (dossier contenant toutes les images du templates)

| |-- tous les fichiers images que vous avez créé précédemment

|--index.php (fichier)

|--templateDetails.xml

|--template_thumbnail.png (fichier correspondant à la miniature affichée dans joomla)

Voici le détail de ces fichiers et dossiers :

Circus : contient les autres dossiers, les fichiers index.php, templateDetails.xml, et template_thumbnail.png

index.php : dans le dossier « Circus », c'est la structure de votre template pour les images et les emplacements des différentes zones d'affichage de votre site dans Joomla

templateDetails.xml : dans le dossier « Circus », en gros, la fiche signalétique de votre template (auteur, nom, liste des images, etc..)

template_thumbnail.png : dans le dossier « Circus », c'est votre miniature pour l'affichage dans la partie administrateur de Joomla : voyez la partie graphique pour ce fichier.

Css : dossier contenant le fichier de codage css pour les contenus dans Joomla

template_css.css : dans le dossier « css », il contient toutes les déclarations pour l'affichage des contenus dans Joomla (police, taille, couleurs, etc..)

images : dossier contenant toutes les images du template, vous devez y copier-coller toutes les images qui ont été générées dans l'étape précédente avec Gimp, Xara, Inkscape, ou le logiciel graphique que vous utilisez (lisez la suite pour cette partie graphique)

Créez donc sur le disque tous les dossiers (si ce n'est pas déjà fait !).

Plutôt que de créer les fichiers index.php, template_css.css, TemplateDetails.xml, récupérez les sur un template déjà créé, ou mieux, utiliser les versions « vierges » en téléchargement sur le site http://www.xlformation.sup.fr. Ces fichiers sont également directement dans le pack complet « création de templates non tabulaires pour joomla » en téléchargement sur le même site.








Je considère que vous avez récupéré ces 3 fichiers vierges et que vous les avez copiés dans leurs dossiers respectifs.





2. copie des différents fichiers dans les dossiers

Bien, créez les dossiers, copiez les fichiers vierges que vous avez récupérés en téléchargeant ce tutoriel, ou utilisez d'autres fichiers pour template que vous modifierez vous même.

Pour les autres fichiers, plusieurs choix sont possibles : tout retaper ou récupérer un fichier déjà prêt. Je laisse cela du choix de chacun : personnellement, je reprends mes fichiers index.php, supprimant tout ce qui se trouve entre les balises <body></body> et j'utilise le fichier template_css.css « vierge » à disposition sur mon site.

Je vous rappelle donc que ce tuto est livré avec tous les fichiers permettant de réaliser le template, y compris les fichiers dont je viens de vous parler.

Nous commencerons par templateDetails.xml.

Nous créerons ensuite le fichier index.php et template_ccs.css manuellement à partir des fichiers de base.

Mais avant de faire tout cela, nous allons voir notre objectif..en images !

En piste !

Un template pour le cirque !





Création graphique

Lors du premier tutoriel, je vous ai fait travailler à partir d'Inkscape. Dans ce tutoriel, j'ai travaillé à partir de XaraLX (Xara Extreme)

Toute cette partie graphique est destinée à ceux et celle qui ne savent pas comment travailler leurs fonds et images : si vous connaissez et maîtrisez un autre logiciel de traitement graphique, utilisez-le.

Les différentes parties graphiques sont un patchwork composé à partir de formes géométriques simples, de photos, de lignes, etc.. Les différentes effets utilisés sont des effets d'ombres et de lumières ajoutés afin de fondre les différents éléments entre eux en un tout cohérent.

Afin de pouvoir travailler efficacement, il est fortement conseillé de travailler avec des calques (layers), permettant de superposer les éléments et de les hiérarchiser en couches disposées les unes sur les autres.

Ce tutoriel n'étant pas destiné à vous apprendre la composition et la création graphique, je ne vais que vous détailler les différents éléments graphiques, leurs tailles et vous donner différentes informations vous permettant de mieux comprendre comment j'ai réalisé ceux-ci.

La « beauté » d'un template va faire appel à votre côté artistique : c'est une règle pour les sites web : travaillez l'ensemble et pas les éléments un a un !

Si vous savez coder, il faut aussi savoir créer... Rien ne vous empêche, si vous ne vous sentez pas capable de faire quelque chose de « plaisant » de faire appel à un de vos proches ou un professionnel pour la partie graphique.

Lorsque vous aurez travaillé ces éléments de manière à ce qu'ils correspondent à l'aspect visuel final, vous devrez exportez les éléments soit au format gif (ou png), soit au format jpg. Si vous avez organisé votre composition en calque, l'exportation ne devrait pas vous poser de soucis.

Je vais vous détailler ces éléments en les numérotant, cela sera plus facile pour tout le monde !





Note : 1 et 2 sont détaillées dans l'étape suivante mais sont une seule et même image lors de l'exportation de l'image GIF.





ELEMENTS DU TEMPLATENote : les différents éléments graphiques sont exportés soit au format JPG, soit au format GIF via votre logiciel graphique.

Outre les différences de tailles et de qualités, il faut vous rappeler que le format GIF préserve, entre autre, la transparence (appelé également « Canal Alpha » ou « Alpha Channel ») qui permet de ne pas avoir un remplissage avec une couleur quelconque et de laisser apparaître l'élément qui se trouve dessous lors de superpositions. La transparence quoi ! Renseignez-vous sur les limites du format GIF et le PNG (gérant également la transparence) ainsi que les problèmes d'affichages possibles de ces formats d'images dans les navigateurs.

BANDEAU SUPERIEUR (1) :

bandeau.gif

Largeur : 960px

Hauteur : 277px

Composition réalisée à partir de blocs géométriques et de 2 photos (tête de clown et drapeau en haut à gauche). Différents effets de transparence et de lumières, ajout d'étoiles de tailles et couleurs variées. Le pathway (bande rouge) est détaillée ci dessous, mais fait partie de cette image.

PATHWAY (2) :

Largeur : 704px

Hauteur : 50px

Réalisé avec une simple bande rectangulaire et différents petits ronds de couleurs variées répartis sur la longueur. Cette image est exportée en même temps que le bandeau ( je ne vous la montre ici que pour ceux qui se pose la question de « comment qu'il a fait donc ?? » ;)





COLONNE GAUCHE (3)

J'ai uniquement gardé dans l'exportation la photo travaillée et la ligne blanche de la corde (l'aplat de couleur de fond sera directement intégré dans le fond du template).

Largeur : 220px

Hauteur : 600 px

menugauche.gif

Remarquez que dans Xara, j'ai gardé le fond de page visible avant l'exportation de manière à ce que le fondu autour de la trapéziste soit vert et non pas blanc.

COLONNE DROITE (4)

La colonne de droite n'est pas une image : ce sera un fond transparent (nous verrons pourquoi plus loin).

Par contre, nous avons besoin de ses dimensions :

Largeur : 220px

Hauteur : variable (ça aussi, nous verrons plus loin !)

BANDEAU NEWS OU BANNIERE (5) :

Même chose que pour la colonne de droite, ici, il n'y aura pas d'images, juste une couleur de fond, mais qu'il faudra par contre afficher (ou non, suivant l'effet recherché)

Les dimensions :

Largeur : 520px

Hauteur : 65px





ZONE CENTRALE (Mainbody)(6)

Cette zone restera transparente et aura :

Largeur : 520px

Hauteur : variable

PIED DE PAGE (7)

Un simple découpage de rectangle avec un remplissage dégradé répétitif.

Largeur : 960px

Hauteur : 88px

piedpage.gif

FOND DE PAGE (pas de numérotation sur la figure exemple)

Ah Ah !! Voilà une chose intéressante !

Je vous rappelle qu'une zone div ne s'agrandit qu'avec son contenu. Si j'avais uniquement rempli avec une couleur de fond les zones « colonne gauche » et « colonne droite », j'aurai eu des « vides » sans couleur dans mon template.

Hors, je veux que mes colonnes soit « remplies » de leurs couleurs respectives jusqu'en bas.

Pour cela, je vais utiliser un artifice : une image de fond qui va occuper la totalité de l'espace verticale, et qui va s'agrandir dynamiquement avec le contenu jusqu'au pied de page, comme nous l'avons vu dans les études précédentes.

Le fond que j'ai dans mon template est le suivant :

(le trait de bordure extérieur n'est là que pour visualiser correctement l'image)





Nous apercevons ici notre colonne de gauche, notre colonne de droite, et automatiquement, le centre de la page en blanc.

Maintenant, il n'est pas judicieux de garder une image aussi grande en hauteur (l'image originale faisant 960 pixels sur 600 de haut !), étant donné que nous allons lui demander une répétition systématique.

Nous allons donc reprendre cette image pour ne garder qu'une « tranche » de 8 pixels de hauteur : à partir d'un logiciel comme « The Gimp », nous allons sélectionner une bande de 960 px sur 8 pixels et l'enregistrer sur notre disque.

Au final, j'obtiens ceci :

nom du fichier : fondpage8.jpg

Encore une fois, je vous montre l'image dans un encadré afin que vous puissiez la visualiser : dans la réalité, il n'y a pas de bordure !

Bon ! Si je récapitule, nous avons :

● Un fond de page (répétitif)

● Un image pour le haut de notre page (non répétitif)

● Une image pour notre colonne de gauche (non répétitif)

● Une image pour notre bas de page (non répétitif)

Tout ces éléments seront intégrés dans des blocs <div> comme image de fond.

Tous ces éléments vont être positionnés exactement comme nous l'avons vu dans la partie précédente du tutoriel !

En passant, vous pouvez prendre le temps d'enregistrer votre image complète sous le nom « template_thumbnail.png » en réduisant sa taille à 200 pixels de large : cela servira à avoir notre vignette lors du choix du template dans joomla. Vous rangerez cette image directement dans le dossier « circus » qui contient tous les autres fichiers et dossiers de notre template.

Cette taille de 200 pixels est arbitraire : pas trop gros, pas trop petit pour une miniature.

Enfin, lorsque je crée un fond de page, je règle mon logiciel graphique de manière à avoir un « guide » en largeur et en hauteur : vous devez faire un choix en largeur pour les images.

● Pour un affichage en 800x600, évitez de dépasser 780 pixels de large,

● Pour un affichage en 1024x768, évitez de dépasser 960 pixels de large.

Pensez que si vous faites un template en 800x600, il s'affichera pour les définitions d'écran plus élevées, mais le texte sera plus petit..

Personnellement, je travaille en 960 pixels de large, cette largeur convenant pour les affichages en 1024 et 1280 de large, même si je sais que le site sera plus difficile à consulter pour les personnes ayant des résolutions en 800x600..





QUELQUES PISTES POUR LES DEBUTANTS..

Lorsque vous créez un fond de page, peut importe le logiciel que vous utilisez ! Si je vous conseille XaraLx, Inkscape et Gimp, c'est parce que ces logiciels sont gratuits et OpenSource.

Si vous avez l'habitude d'un autre logiciel (et il en existe d'excellent !), utilisez-le.

Les conseils que je peux vous donner :

– Entraînez-vous au départ avec un template avec peu d'images (« Behar » en est un très bon exemple), cela vous permettra de bien comprendre le fonctionnement des blocs div,

– Partez sur un « tout », évitez les créations à partir de petits morceaux raccommodés les uns aux autres, cela nuit à l'ensemble et c'est toujours plus compliqué à agencer par la suite,

– Lorsque vous utiliserez vos images, il faudra qu'elles « tiennent » dans les blocs : n'enregistrez pas une image de 1000 pixels de large si vous la mettez ensuite dans un bloc de 500 pixels !

– Pensez votre template par rapport aux éléments que vous allez intégrer dedans : zones de news, images « flash », pathway, etc.. Faites une liste et composez votre fond de page en vérifiant que vous n'avez pas oublié d'élément,

– N'oubliez pas qu'un bloc div va s'agrandir en hauteur par défaut si le contenu est trop grand, pensez à éviter des zones trop petites où vous allez être obligé d'écrire en « pattes de mouches »

– Si vous ne savez pas utiliser les calques dans les logiciels de dessin, apprenez !! C'est une notions quasiment indispensable si vous voulez vraiment arriver à une disposition complexe sans pour autant vous casser la tête, et cela vous permet de masquer certains éléments pendant que vous en travaillez d'autres.

– Entraînez-vous, essayez, essayez !!!!

Vous pourrez ensuite travaillez comme vous l'entendez, mais pour apprendre, essayez de garder tout cela en tête.

Encore une chose,

Vos templates vont avoir besoin d'une taille en largeur, nous l'avons vu. Pour la hauteur, c'est tout autre chose ! Vos pages ne sont pas figées en hauteur (bien que ce soit parfaitement possible !) et vous devez prendre en compte cet élément dans votre fond de page initial en visualisant ce qui ne doit pas changer de hauteur et ce qui devra forcément changer de hauteur.

Tout ceci n'est là que pour vous donner des repères si vous n'en avez pas, alors continuons.





TEMPLATE CIRCUS - DISPOSITION DES ELEMENTS DANS DES <DIV>

Nous allons donc avoir la disposition suivante :

● 1 conteneur global (qui nous servira à centrer notre template dans la page)

● 1 conteneur pour l'image de fond (qui va contenir notre petite bande répétée sur toute la hauteur de notre template)

● Nos différents blocs <div> qui vont contenir les images venant en superposition sur le fond.

Pour que vous puissiez suivre, j'ai donné aux div les noms suivants :

conteneurglobal : div contenant tous les autres blocs div (pas indispensable, mais quelquefois utile si le fond de page est flottant pour arriver à centrer le tout...)

fondpage : div contenant le motif de fond de page répétitif. Il contient également les autres div imbriqués

bandeau, milieu, baspage : div non flottants, donc disposés les uns sous les autres.

Bandeau : contient l'image d'entête de notre page (bandeau.gif) et l'appel de la zone pathway

Milieu : va contenir colonnegauche, centrepage, colonnedroite. Ces 3 div sont flottants, de manière à les positionner les uns à côtés des autres. La zone milieu va avoir une marge supérieure négative : cela va compenser la hauteur de la « pointe inférieure » de notre image de bandeau. Sans cela, nous aurions un espace vide disgracieux.

colonnegauche : contient l'image « menugauche.gif » et le tag joomla « left »

colonnedroite : est un div transparent, appel du tag joomla « right »

Centrepage : contiendra 2 div positionnés l'un au dessus de l'autre, zoneban et zoneprinc

Zoneban : bande qui contiendra au choix nos news ou une bannière, pas d'image positionnée à l'intérieur

zoneprinc : ce div correspond à l'appel du tag joomla « mainbody ».

baspage : contiendra notre image « piedpage.gif » et les appels pour les tags joomla « footer » et « bottom » eux-même inclus dans un div appelé « textbas ». Pourquoi avoir un div dans un div ?

Ce petit « truc » va nous permettre de rajouter un padding à nos tags joomla pour les positionner en hauteur, sans pour autant que ce soit l'image du bas de page qui soit bougée ou décalée. Cette méthode simplifie largement les positionnements de textes verticaux dans certains cas..

Bien, à partir de là, je vous donne le code du fichier index.php avec tous ses éléments imbriqués les uns avec les autres.





Souvenez-vous que si un div est contenu dans un autre, il s'affiche par défaut au dessus de son conteneur. Cela vous servira pour « hiérarchiser » les div entre eux dans le sens de la « profondeur »:

si vous avez un conteneur avec une image de fond, et que dans ce conteneur avec une autre image (comme une bannière), la bannière s'affichera au dessus du fond.

Exemple :

J'ai un DIV pour le fond contenant..une image de fond !

A l'intérieur de ce div, j'ai un autre div avec une bannière.

L'imbrication dans cet exemple est :

<div id="monfonddepage">

<div id="mazonebanniere"></div>

</div>

Mon fond de page contient bien « mazonebannière », et « mazonebanniere » recouvrira « monfonddepage ».

Avec cette méthode, vous pouvez donc bien gérer les recouvrements de zones.

La profondeur est quelquefois abordée dans les tutoriels sous le nom de « Z-index », en partant du principe que l'on regarde un repère géométrique en 3 dimensions :

Je vous rajoute une petite illustration page suivante..





Dans ce schéma, j'ai donné des « noms » à chaque bloc : ce n'est pas une représentation pour un template, mais juste une illustration de ce que je veux vous faire comprendre par « hiérarchisation ».

Les blocs X1, X2, X3 sont sur l'axe des X,

Les blocs Y1, Y2, Y3 sont sur l'axe des Y,

Les blocs Z1 (appelé aussi Y3 dans l'exemple), Z2, Z3 sont empilés sur l'axe Z

Je laisse de côté X et Y et ne vous parle que de Z :

Pour avoir un empilage (et un recouvrement dans cet ordre des zones), il faudrait (encore une fois dans cet exemple puisqu'il est toujours possible de faire « autrement »), que Z1 contienne Z2 et que Z2 contienne Z3.

Codé, cela donnerai quelque chose qui ressemblerait à :

<div id="Z1">

<div id="Z2">

<div id="Z3"></div>

</div>

</div>

Réfléchissez donc à qui recouvre qui, et comment imbriquer vos div.

Grâce (encore une fois) à Did85, vous pouvez avoir une représentation de « circus » représenté avec des div imbriqués (encore une fois, merci did85 ;)





Le template « CIRCUS » abordé du point de vue des Div (par did85)

Il faut comprendre dans cette représentation ce qui est contenant et ce qui est contenu.

Par exemple, le div « conteneurglobal » contient tous les autres div.

Le div « milieu » contient les div « centrepage », « colonnegauche », et


CONTENEURGLOBAL

FONDPAGE

BANDEAU

ZONEPATHWAY

MILIEUCENTREPAGE

BASPAGE

REPRESENTATION SCHEMATIQUE DES BLOCS DIV :

COLONNEGAUCHE

COLONNEDROITEZONEBAN

ZONEPRINC

TEXTBAS




« colonnedroite », tandis que le div « centrepage » contient les div « zoneban » et « zoneprinc »..

Explication détaillée :

CONTENEUR GLOBAL contient FONDPAGE.

FONDPAGE contient tous les autres.


BANDEAU

ZONEPATHWAY

BANDEAU contient son div (pour l'image de fond) ET la zone d'affichage de texte pour le pathway..

- tag joomla « pathway »

- image« bandeau.gif »

DIV MILIEU:MILIEU contient les DIV ( COLONNE GAUCHE + CENTREPAGE + COLONNE DROITE)

CENTREPAGECOLONNEGAUCHE

COLONNEDROITE

-tag joomla « left »-image de fond « menugauche.gif »

-tag joomla « right »-image de fond : transparent




encore merci à did85


ZONEBAN

ZONEPRINC

DIV CENTREPAGE:CENTREPAGE contient les DIV ( ZONEBAN +ZONEPRINC)

- tag joomla «user1 »- pour news ou bannière

- tag joomla «mainbody»- pour texte des articles

TEXTBAS

DIV BASPAGE:

BASPAGE contient les DIV ( TEXTBAS)

- tags joomla « bottom » et « includes/footer.php »- image « piedpage.gif »




CIRCUS – INDEX.PHP

<?php echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?".">"; ?><?php defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' ); ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"><html xmlns="http://www.w3.org/1999/xhtml"><head><title><?php echo ; ?></title><meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" /><?php include ("includes/metadata.php"); // include keywords, and such

if (0) { include ("editor/editor.php"); initEditor();}?><link href="<?php echo $mosConfig_live_site;?>/templates/circus/css/template_css.css" rel="stylesheet" type="text/css"/>

</head><body><div id="conteneurglobal"> <div id="fondpage"> <div id="bandeau"> <div id="zonepathway"><?php mosPathWay(); ?></div> </div>

<div id="milieu"> <div id="colonnegauche"> <?php mosLoadModules ( 'left' ); ?></div> <div id="centrepage"> <div id="zoneban"><?php mosLoadModules ( 'user1' ); ?></div> <div id="zoneprinc"> <?php mosMainBody(); ?></div> </div> <div id="colonnedroite"> <?php mosLoadModules ( 'right' ); ?></div> </div>

<div id="baspage"> <div id="textbas"><?php mosLoadModules ( 'bottom' ); ?>

<?php include_once('includes/footer.php'); ?> </div> </div>

</div></div></body></html>





Le paramétrage de tous ces éléments est donné dans le fichier css.

Notez une chose importante : lors de la création de vos templates, il faudra au départ coder suivant les valeurs de base que vous avez déterminées.

Vous vous rendrez compte que votre template ne réagit pas exactement comme vous l'aviez prévu, et ce à cause de toutes les contraintes que nous avons abordées précédemment et des spécificités des navigateurs.

Dès lors, vous devrez prendre le temps de peaufiner vos réglages en vérifiant l'aspect de votre template à l'écran. Je vous conseille d'abord de travailler avec Firefox, puis ensuite de vérifier et d'adapter votre template pour Internet Explorer.

Voici donc le fichier css « finalisé » après avoir testé le template circus dans Firefox. Je vous ai commenté toutes les modifications réalisées après le « premier jet ».





TEMPLATE_C S S .C S S - CIRCUS

CODE CSS Commentaires – Explications

body, html { margin:0; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; background-color: #FFFFFF; height: 100%;}

tbody { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #000000;}

/** Paramétrage des div dans le template Circus **/

/**Mise par défaut zéro des marges et� rembourrages*//div {margin:0;padding:0;}

#conteneurglobal {width:960px;margin:0 auto;}

#fondpage {width:960px;background: transparent url(../images/fondpage8.jpg) repeat-y left top;}

Balise pour l'affichage global de la page : tout étant inclus dans « body », nous donnons ici les paramètres généraux à notre template.

Cette petite partie concerne « tous les div » : ici, nous mettons à zéro toutes les marges et rembourrages des zones <div> par défaut

Notre contenteur global contient tous les autres div et sert à centrer le contenu avec « margin:0 auto; »

Fondpage ne sert que comme fond de page, tout en incluant les autres div de manières à ce qu'il s'agrandisse automatiquement avec le contenu.






#bandeau {width:960px;height:300px;min-height:300px;background: transparent url(../images/bandeau.gif) no-repeat left top;}

#zonepathway {width:500px;padding: 115px 0 0 0;}

#milieu {width:960px;margin-top:-120px;}

La zone bandeau contient l'image « bandeau.gif » mais également la zonepathway : cette technique (répétée dans le bas de page) permet de positionner une zone de « texte » sans pour autant se casser la tête avec le positionnement des images.. Il existe d'autres techniques, mais celle-ci a le mérite d'être facile à utiliser.

La zone contenant uniquement le « pathway ». La largeur est donnée indicativement, le padding du haut est donné de manière à ce que le texte se trouve sur la bande rouge de l'image du pathway. La valeur a été trouvée par « essai-erreur »

Cette zone contient toute la zone centrale de notre page. Remarquez que cette zone (et donc tout son contenu) possède une marge supérieure négative. Cela nous sert à « remonter » le bloc complet de manière à ce que la pointe inférieure de notre bandeau (qui s'inscrit comme toute image dans un rectangle) ne casse pas la dynamique de la page.. La valeur a été trouvée par « essai-erreur ». Essayez de supprimer cette valeur pour que vous vous rendiez compte de ce qu'elle fait..






#colonnegauche {float:left;width:210px;background: transparent url(../images/menugauche.gif) no-repeat center top;padding-top:120px;padding-left:10px;}

#centrepage {float:left;width:500px;

}

#zoneban {clear:left;width:500px;border-bottom:1px solid;}

#zoneprinc {width:500px;padding:0 30px 0 10px;}

#colonnedroite {float:right;width:210px;padding: 20px 0 0 25px;}

La colonne de gauche a une largeur de 210 pixels parce qu'elle bénéficie également d'un padding à gauche de 10px.Le padding en haut est créé pour éviter que le texte ne se superpose à l'image de la trapéziste..

La largeur du bloc central est ramenée à 500 pixels après tests..

Pas de couleur de fond, à la place, une ligne de séparation en utilisant la bordure inférieure..

La zone principale contenant « mainbody » avec un padding à gauche de 10px et un padding à droite de 30px afin que le texte ne soit pas collé aux « bords »

La colonne de droite fait, comme la colonne de gauche, 210 pixels de large, mais avec un padding plus important à gauche et à droite. La zone est flottante à droite pour gagner encore un peu plus d'espace avec la zone centrale..(il aurait été possible d'utiliser « float:left; » mais nous aurions dû augmenter le padding gauche






#baspage {clear:both;width:960px;height:90px;min-height:90px;background: transparent url(../images/piedpage.gif) no-repeat left bottom;}

#textbas {padding-top:45px;}

pour l'esthétique de la page..) (voir explications complémen-taires en fin de tableau).

Contient l'image du bas de page, pour l'exemple, j'ai positionné l'image en bas et à gauche..

Ce div est, comme pour le pathway, utilisé pour positionner les tags joomla en hauteur. C'est toujours pareil, il existe d'autres techniques, mais celle-ci est simple à assimiler et reproduire..

Le « layout » est terminé. La suite du fichier fait référence à la présentation des éléments de Joomla.

Vous pouvez obtenir une description détaillée de tous ces éléments sur les différents sites traitant du sujet. Je vous donne quand même quelques points de repères afin que vous puissiez suivre.






/* Default MOS Class Settings****************************/

td.pathway { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; padding-top: 1px; padding-left: 0px;}

a.pathway:link, a.pathway:visited { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;font-weight:bold; color: #000000;}

a.pathway:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #666666; background-color: transparent;font-weight:bold;}

/* Main Menu Styles*********************/

a.mainlevel:link, a.mainlevel:visited { color: #666666; text-align: left; font-weight: bold; border-left-width: 3px; border-left-style: solid; border-left-color: #EBEC9C; padding-left: 5px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; line-height: 15px;}

a.mainlevel:hover { color: #FFFFFF; text-align: left; background-color: #000000; width: 98%; border-left-width: 3px; border-left-style: solid; border-left-color: #FFFFFF;}

Eléments « Pathway »

Menus affichés dans Joomla (mainmenu, etc..) de premier niveau (comme les sections par exemple)Liens et liens visités...

..liens survolés par la souris..






a.mainmenu:link, a.mainmenu:visited { color: #000000; font-family: Arial, Helvetica, sans-serif; font-weight: bold;}

a.mainmenu:hover, { color: #666666; text-align: left;}

a.sublevel:link, a.sublevel:visited { color: #000000; font-family: Arial, Helvetica, sans-serif; font-weight: normal;}

a.sublevel:hover { color: #666666; text-align: left;}

/* Module Styles****************/

table.moduletable { width: 100%; text-align: center; margin-right: 0px; margin-left: 0px;}

table.moduletable th { font-family: Verdana, Arial, Helvetica, sans-serif; font-size : 12px; font-weight : bold; color : #000000; text-align : center; background-image: url(../images/mod_title.gif); height: 27px; padding-top: 8px;}

table.moduletable td { font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; text-align: left;}

Sous-menu : menu de niveau 2 comme par exemple, les catégories..

La plupart des modules sont appelés et affichés avec les paramètres « table.moduletable ». Joomla trouve ici la manière de présenter ces modules.






/* Polls Style**************/

.poll { color : #666666; line-height : 12px; font-weight: bold;}

/* Sections Style*****************/

.sectiontableheader { background-color : #CCCCCC; color : #000000; font-weight : bold; font-size: 11px; line-height: 13px;}

.sectiontableentry1 { font-size: 11px; background-color : #E4E4E4; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #000000;}

.sectiontableentry2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; background-color : #DADADA; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #000000;}

.pagenav { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #000000;}

a.pagenav:link, a.pagenav:visited { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #000000;}

a.pagenav:hover { font-family: Verdana, Arial,

Présentation des sondages dans Joomla..

Présentation des sections..

Présentation des éléments de navigation dans les articles multipages..






Helvetica, sans-serif; font-size: 11px; font-weight: bold; color : #000000; text-decoration : none; background-color: #99CC00;}

.small { font-size : 11px; color : #666666;}

.smalldark { font-size : 11px; color : #333333; text-decoration : none;}

.createdate { font-size : 10px; color : #666666; text-decoration : none; font-weight : medium;}

.modifydate { font-size : 10px; color : #666666; text-decoration : none; font-weight : medium;}

/* Content Styles*****************/

.contentpane { font-size: 11px; color: #000000;}

.contentpaneopen { font-size: 11px; color: #000000;}

.contentheading, .componentheading { font-family : Verdana, Arial, Helvetica, sans-serif; font-size : 14px; font-weight : bold; color : #FF6633; text-align : left; line-height: 16px; padding-left: 20px;

Paramétrage de la taille de police écran « small » : relatif au réglage par l'internaute, c'est la « taille normale » dans les menus affichage des navigateurs..

Style d'affichage..

Date de création des articles...

Date de modification des articles....

Articles affichés dans le mainbody...






}.category { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #000000;}

a.category:link, a.category:visited { color : #333333; font-weight : bold;}

a.category:hover { color : #000000; text-decoration : none; background-color: #99CC00;}

/* Form Styles****************/

form { /* borrowed from mambosolutions.com -- to fix empty space issues */ display:inline; margin: 0px; padding: 0px; }

.button { font-family : Arial, Helvetica, sans-serif; font-style : normal; font-size : 10px; font-weight : bold; background-color : #F0F0F0; color : #000000; border : 1px solid #000000;}

.inputbox { font-family : Verdana, Arial, Helvetica, sans-serif; font-size : 10px; color : #000000; background-color : #F0F0F0; border : 1px solid #000000;}

Présentation des formulaires dans Joomla (identification utilisateurs, etc..)...

Boutons..

Zones de texte et de saisie...






/* Links*********/

a:link, a:visited { font-size : 11px; color : #333333; text-decoration : none;}

a:hover { color : #000000; text-decoration : none; background-color: #99CC00;}

/* For content item titles that are hyperlink instead of Read On****************************************************************/

a.contentpagetitle:link, a.contentpagetitle:visited { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; color: #000000; text-align:left; }

a.contentpagetitle:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; text-align:left; color : #000000; text-decoration : none; background-color: #99CC00; }

.description { font-size: 11px; color: #000000;}

/* Styles for dhtml tabbed-pages */.ontab { background-color: #ffae00; border-left: outset 2px #ff9900; border-right: outset 2px #808080; border-top: outset 2px #ff9900; border-bottom: solid 1px #d5d5d5; text-align: center; cursor: hand; font-weight: bold;

Liens généraux..

Toujours pour l'affichage dans mainbody (voir les sites et forums listant les différentes classes joomla pour comprendre les différences..)






color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;}.offtab { background-color : #e5e5e5; border-left: outset 2px #E0E0E0; border-right: outset 2px #E0E0E0; border-top: outset 2px #E0E0E0; border-bottom: solid 1px #d5d5d5; text-align: center; cursor: hand; font-weight: bold; color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;}

.tabheading { background-color: #ffae00; text-align: left; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;}

.pagetext { visibility: hidden; display: none; position: relative; top: 0; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #000000;}

/* for modifying {moscode} output. Don't set the colour! */.moscode { background-color: #f0f0f0;}

/* Text passed with mosmsg url parameter */.message { font-weight: bold; font-size : 10pt; color : #ff6600; text-align: center;}td.content {

}

Pages à « onglets »..

Paramètres liés à joomla...






Il va falloir que nous gérions quelques petites choses supplémentaires : le fait que tous les navigateurs ne réagissent pas de la même manière pour le même fichier (respect strict des normes css ou non).

Notes complémentaires concernant « colonnedroite »

Vous avez remarqué que colonne droite était flottante à droite, non ?

Et si vous avez bien lu, les 3 zones « colonnegauche », « centrepage » et « colonnedroite » sont les unes à côté des autres.

Avez-vous remarqué que chacune de ces zones font respectivement 210 pixels, 500 pixels, 210 pixels ? Le total en largeur (sans compter le padding et les marges) faisant 920 pixels ? Avez-vous remarqué que ces 3 zones sont dans un espace de 960 pixels de large ??

Pourquoi ai-je procédé ainsi ?

Nous allons voir juste après que Firefox et Internet Explorer ne calculent pas les largeurs de boites de la même manière. Pour éviter de gérer des problèmes d'affichage, j'utilise un artifice courant : je sacrifie quelques pixels en largeur pour éviter de gérer les problèmes d'affichage.

Souvenez-vous que si une zone n'a pas la place en largeur pour s'afficher, elle saute automatiquement à la ligne.

Exemple :

Ainsi, si j'avais 3 zones de 300, 500, et 300 pixels, les 3 flottantes les unes à côté des autres, et les 3 contenues dans un div de 960 pixels de large, il arriverait la chose suivante (toutes les boites sont flottantes à gauche « float:left » :

● la première à la place de s'afficher, elle se cale à gauche de l'écran,

● la deuxième à encore de la place (960-300 de gauche : 660) et elle se colle à notre première zone à gauche

● la troisième..saute à la ligne suivante !

Les 2 premières zones prennent 800 pixels de large (300 + 500). Dans l'espace total utilisable (960 pixels), il ne me reste donc que 160 pixels à disposition. La largeur de la dernière zone à droite faisant 300 pixels, elle n'a plus la place de tenir et passe donc à la ligne.

Donc, dans « Circus », j'ai des 3 zones qui ont une largeur additionnée plus petite que le conteneur dans lequel elles sont.

Pour éviter un effet disgracieux du texte dans la colonne de droite, je n'ai donc pas « collé » la zone sur son côté gauche, mais sur son côté droit.

Je perds donc 40 pixels en largeur utile, mais je n'ai pas à gérer les calculs





de boites au pixel près pour Firefox et pour Internet Explorer..

Pour plus de détails, voyez la partie suivante..





Gestion des problèm e s d'affichage s de vos templates..Le calcul des <div> est différent suivant les navigateurs.. ça ne va pas nous

aider, mais c'est comme ça !

Lorsque vous créez votre template, il faut toujours que vous pensiez au fait que vos lecteurs n'utilisent pas forcément votre configuration technique : navigateur, résolution d'écran, etc..

Les boites <div> sont calculées différemment par les 2 navigateurs les plus utilisés : Firefox et Internet Explorer. Pourquoi ? Parce que le premier respecte les règles Css alors que le second ne le fait pas complètement.

Calcul des boites dans les navigateurs (FF et I.E.)Dans Firefox, la largeur totale d'une boite est réalisée en additionnant :

marge de gauche + épaisseur gauche de la bordure + rembourrage gauche + largeur de la boite + rembourrage droite + marge de droite

Si vous avez les propriétés suivantes pour une boite :

#boiteexemple {

width : 100 px;

margin : 10 px;

padding : 10 px;

border : 1px solid;

}

Quelle largeur fait votre boite si vous respectez les normes css ?

Elle fait :

100 (width) + 20 (marge gauche ET droite) + 20 (rembourrage gauche ET droite) + 2 (bordure gauche ET droite) = 142 pixels

donc, la largeur totale d'une boite correspond à tous ces éléments additionnés.

Malheureusement, pour Internet Explorer, le calcul est différent : les valeurs données pour le rembourrage et les bordures sont comprises dans la valeur calculée.

donc, pour cette même boite, la largeur totale serait pour I.E. de : 100 + 20 = 120 pixels seulement... Un sacré bazar dans le template...

De plus, avec des valeurs de marge à zéro, I.E. met « quand même » une valeur de 0,5 pixel pour chaque bordure suivant les versions de navigateur...

Si en plus, vous considérez que les modules et composants sont eux-mêmes inscrits dans leurs propres tableaux ou <div>, cela va devenir de la folie...





On va éviter la dépression et je vous donne un moyen d'éviter de tout jeter par la fenêtre...





Résoudre les problèmes d'affichage entre les navigateurs..

Tout d'abord, codez correctement votre template (index.php et template_css.css) en respectant les standards css.

Visualisez le résultat avec du contenu (textes, images, etc.. affichés sur le site) sur les 2 navigateurs au minimum (en fait, il est judicieux de faire les tests d'affichage sur Firefox, Internet Explorer, et Opera pour Macintosh. Voir Annexes)

Notez que Internet Explorer fonctionne différemment suivant les versions (5, 6, 7..) mais que si vous faites un réglages « I.E », il devrait être correct pour toutes les versions.

Intégrez les 2 calculs de boites <div> dans votre fichier css

Ah ah !!! Pour faire cela, nous allons utiliser ce qui est appelé communément sur le Net un « Hack ». Disons que cela permet d'exploiter une différence de lecture pour créer une sorte de correction conditionnelle !

IE et Firefox n'ont pas le même vocabulaire !

Internet Explorer ne comprend pas certains mots. Quand cela lui arrive, il ignore purement et simplement la ligne, considérant que c'est une erreur de codage de l'auteur. Nous allons profiter de ce comportement pour donner des directives différentes pour les 2 navigateurs :

« !important »

Ce petit mot nous permet au départ de réaliser une action importante : lorsque vous donnez une règle css et en y ajoutant « !important », vous demandez au navigateur de respecter absolument cette règle.

La chose à savoir, c'est que Internet Explorer ne « comprend » pas ce mot et donc purement et simplement toute la ligne où il est écrit..

Le « hack » est utilisé comme ceci dans un template :

#bloc13{

background-image: url(../images/montemplate-1-3.jpg);background-repeat: no-repeat;width:616px !important;width:608px;height:374px;margin: 0px 0px 0px 0px;padding:0px 0px 0px 0px;float:left;}

Firefox verra la ligne « width:616px !important; » et l'appliquera alors que Internet





Explorer ignorera la ligne et appliquera la suivante « width:608px; ». De plus, lorsque Firefox « verra » la déclaration suivi de « !important », il l'appliquera comme une priorité absolue, même si il y a l'autre « width » après, tant qu'il reste dans cette id.

Ce problème d'affichage des boites (et de plusieurs autres choses) est abordé de multiples manières sur le net et sur les forums. Prenez le temps d'aller lire les informations à votre disposition.

NOTE : avec l'arrivée d'Internet Explorer 7, les choses risquent encore d'évoluer et il faudra peut-être que vous utilisiez les « Conditional Comments », éléments valables uniquement pour Internet Explorer (les autres navigateurs ne les interprétant pas..)

Ces commentaires conditionnels se placeront dans le fichier index.php et ne seront donc lus que par Internet Explorer (apparus pour la première fois avec I.E.5).

Je vous donne un petit exemple de ce type de commentaires :

CODE Traduction ( !!)

 Fin de la condition Il est possible d'aller encore plus loin avec ces Conditionnal Comments : en effet, dans l'exemple ci dessus, nous avons un opérateur d'égalité (si navigateur = IE), mais il est possible d'utiliser les opérateurs suivants :

lt (Lesser Than) : plus petit que

lte (Lesser Than or Equal) : plus petit ou égal

gt (Greater Than) : plus grand que

gte (Greater Than or Equal) : plus grand ou égal

Dans le codage, cela s'écrira par exemple comme ceci :

<!--[if lt IE 6]> Si la version du navigateur Internet Explorer est strictement inférieur à 6.....

Cela ouvre différentes perspectives : fichier css différents pour chaque navigateur, prise en compte des différentes versions, etc.. De quoi résoudre tous les problèmes d'affichage.

En règle générale, essayez de mettre le moins possible de codage avec « important! » et ne truffez pas vos fichiers php et css de conditions sauf si c'est

VRAIMENT nécessaire : vous risquez de tomber dans une situation impossible où il vous faudra gérer l'ingérable.. Vous devrez faire des choix et quelques fois, faire marche arrière pour vous y prendre autrement..





Pour aller plus loin..

Pour que vous puissiez arriver à personnaliser vos templates après cette première étape, il faudra dans certains cas que vous personnalisiez les affichages dans les différentes zones de publication.

Pensez que vous pouvez le faire dans le div (n'oubliez pas que les styles en cascade s'appliquent sur la règle « dernière déclaration, déclaration à appliquer », au sein du fichier css sur les classes de base de Joomla, ou en ajoutant des classes supplémentaires au fichier css.

Comme c'est souvent une question qui revient, je vais vous donner quelques éléments complémentaires pour que vous puissiez sereinement continuer votre apprentissage.





Personnaliser un module

Vous avez sans doute vu que tous les affichages de vos contenus passent par l'appel d'un module dans une zone de publication.

Je vous donne un exemple :

Titre : titre de votre module

Position : left : position de publication indiquant où faire apparaître le module (ici le menu principal)

Suffixe css de module (pas de menu !) : si vous passez votre souris sur le texte « suffixe css de module », joomla vous informe que ce module s'affiche avec la classe « table.moduletable ».

Si vous voulez utiliser l'affichage par défaut (identique pour tous les modules utilisant « table.moduletable »), vous laisserez la zone vide.

Si par contre vous voulez personnaliser l'affichage de ce module précis, en l'occurrence dans notre exemple, le menu principal, vous allez ajouter un suffixe dans cette zone.

Pour l'exemple, je vais ajouter le suffixe « -menuprincipal » : notez bien que j'ai mis le signe « moins » collé au texte « menuprincipal ». J'aurai très bien pu l'appeler « stylemenu » ou « tiensilpleut », c'est uniquement l'identification de votre module personnalisé dans le fichier css. Autant utiliser quelque chose de « parlant », d'où mon choix.

Faites la modification et validez.





Pour faire fonctionner cette modification, nous devons ensuite modifier le fichier css de notre template.

Ouvrez le fichier, recherchez le texte suivant (j'ai copié ici le css de « circus »):

/* Module Styles

****************/

table.moduletable { width: 100%; text-align: center; margin-right: 0px; margin-left: 0px;}

table.moduletable th { font-family: Verdana, Arial, Helvetica, sans-serif; font-size : 12px; font-weight : bold; color : #000000; text-align : center; background-image: url(../images/mod_title.gif); height: 27px; padding-top: 8px;}

table.moduletable td { font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; text-align: left;}

Copiez le texte, positionnez vous à la fin de votre fichier css et collez-le.

Vous avez donc maintenant en fin de fichier template_css.css ce texte.

Nous allons maintenant le modifier pour qu'il corresponde à notre personnalisation de classe dans notre module « menu principal ».





Je veux que mon texte soit présenté comme ceci :

Le module en lui-même ne doit pas changer de taille ou d'alignement.

Titre du module (th) affiché en majuscule, en gras et en jaune, taille 14

Texte du module (td) affiché en rouge, taille 12.

Je sais.. c'est pas très joli, mais c'est pour l'exemple ! ;))

/* Module Styles – mon style menuprincipal, ça, c'est pour pouvoir me relire par la suite..

****************/

table.moduletable-menuprincipal { width: 100%; text-align: center; margin-right: 0px; margin-left: 0px;}

table.moduletable-menuprincipal th { font-family: Verdana, Arial, Helvetica, sans-serif; font-size : 14px; font-weight : bold; color : yellow; text-align : center; background-image: url(../images/mod_title.gif); height: 27px; padding-top: 8px;

text-transform:uppercase;}

table.moduletable-menuprincipal td { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; text-align: left; color : red;}

Regardez la liste des modifications.. Vous comprenez ? Ce n'est pas si compliqué !

Si maintenant, vous n'arrivez pas à lire ce texte, il faut que vous repreniez simplement les bases du css (allez voir les liens dans ce document).

IMPORTANT ! : cette information n'est valable que si vous n'avez pas modifié les appels de zones de publication dans index.php ! Cette notion complémentaire fera l'objet d'un document supplémentaire à télécharger plus tard sur mon site.





Un outil indispensable : Firefox et « Web developer »

Pour arriver à travailler correctement, vous avez besoin d'outils..

Il existe un outil excellent à votre disposition pour Firefox (vous avez bien sur installé Firefox..) : la barre WebDevelopper.

Si vous ne l'avez pas déjà installée, faites-le ! Cette barre va vite devenir indispensable pour travailler vos sites.

Vous aurez avec cette barre tous les outils vous permettant d'identifier vos zones à l'écran, les noms des modules affichés, les styles utilisés, etc..

Vous pourrez même charger, éditer, enregistrer vos feuilles css directement à l'écran !

Ne vous en privez pas !





A vous de jouer..Le template « Circus » a été réalisé et testé sous Firefox. Les tests

d'affichage n'ont pas été fait avec Internet Explorer..

Cela signifie que l'affichage risque d'être incorrect sous Internet Explorer.. et bien, ce sera à vous de le découvrir !

Théoriquement, avec ce tutoriel, vous allez pouvoir modifier les différents templates à votre disposition pour qu'ils correspondent à vos envies et vos besoins.

Ce travail là, c'est maintenant le vôtre !

N'oubliez pas que vous n'êtes pas seul dans cet apprentissage ! Si vous arrivez à un cul de sac, appelez au secours sur les forums, vous trouverez sûrement une personne pour vous expliquer comment résoudre votre problème !





CONCLUSION

J'espère que ce tutoriel vous a permis de comprendre la création des templates avec des div.

Malgré les avertissements de plusieurs sur ma démarche « suicidaire » pour un professionnel de la formation de réaliser ce document en version libre, je reste convaincu que cette démarche s'inscrit dans la ligne commune de partage des connaissances et des moyens : convaincu que le monde du logiciel libre est une avancée pour tous, il est nécessaire que chacun participe à sa manière à celui-ci. Voilà pourquoi ce tutoriel est sous licence Gnu/Gpl/Fdl.

Si nous n'avions pas les logiciels OpenSource, vous ne seriez sûrement pas en train de lire ce texte, et nous perdrions une certaine valeur humaine dans le partage des connaissances communes et profitables à tous, y compris moi-même. Ce tutoriel est un juste retour des choses..

Pour ce qui est de créer vos templates, il vous reste encore beaucoup à apprendre et c'est ce qui est intéressant !

Bonne création, et n'hésitez pas à me faire part de vos réussites et de vos difficultés directement, sur le site Xlformation, ou sur les forums. Ce sera avec plaisir que je verrai vos réalisations et c'est avec joie que je verrai que ce tutoriel a servi.

N'hésitez pas à me faire remonter vos remarques, critiques, ou souhaits de nouveau tutoriel !

A bientôt !

Chabi01 - http://www.xlformation.sup.fr - Mars 2007








REMERCIEMENTS

Il est important pour moi de remercier celles et ceux qui, de près ou de loin, ont contribué à la création de ce tutoriel.

Tout d'abord..vous ! En posant vos questions sur les forums, en laissant planer les demandes pour ce tutoriel, vous m'avez incité à créer ce document.

Ensuite, la totalité des personnes impliquées dans les forums, les sites dédiés à Joomla!, pour leur disponibilité remarquable aux questions posées par tous les nouveaux utilisateurs.

Un remerciement particulier pour les personnes ayant bien voulu jouer le rôle de « Beta-Lecteur » et qui ont bien voulu lire ce tutoriel et me renvoyer les éléments difficiles à suivre afin que je puisse les modifier (dans le désordre !) :

Did85 (Didier) pour sa mise en pratique du tuto et toutes les questions qu'il s'est posé et qui ont donné lieu à des explications et même des parties ajoutées,

Emmanuel (Eiconn.com) pour ses multiples remarques sur les contenus abordés et sa mise en pratique du tuto,

Laurent pour avoir incité à développer un tuto complémentaire sur les règles les plus importantes du css (en cours en ce moment !),

Marwen (Loin, loin au Québec !) qui a organisé du mieux possible son temps de boulot et de participation ;))

Aubin qui m'a rappelé que dans les logiciels libre, « y'a pas que Linux » (mea culpa;),

Sophie (Sophprlui) pour sa mise en pratique du tuto et ses différentes remarques dans sa pratique personnelle et l'application du tutoriel,

Et pour tous, merci d'avoir chacun trouvé les différentes fautes de frappes et d'écriture dans le tuto (je ne sais si il en reste encore, mais vous en avez enlevés un bon paquet ;)))

MERCI !!

Enfin, merci aussi à tous ceux que je passe sous silence mais qui restent indispensables : les développeurs de Joomla sans qui rien de tout ça n'existerait, les personnes qui de près ou de loin passent du temps à développer des modules, composants, bots pour améliorer Joomla! et doter ce CMS de fonctions qui le rendent chaque jour plus intéressant, et ce bénévolement.

Merci à toutes et à tous.





LICENCE D'UTILISATION DE CE TUTORIEL

Copyright (c) 2007 – Xavier Lemoine – XLFormation - [email protected]

Permission vous est donnée de copier, distribuer et/ou modifier ce document selon les termes de la Licence GNU Free Documentation License, Version 1.1 ou ultérieure publiée par la Free Software Foundation :

Ce document peut être reproduit et distribué dans son intégralité ou partiellement, par quelque moyen physique que ce soit. Il reste malgré tout sujet aux conditions suivantes :

– la mention du copyright / copyleft doit être conservée, et la présente section dans son intégralité sur toute copie intégrale ou partielle,

– si vous distribuez ce travail en partie, vous devez mentionner comment obtenir une version intégrale de ce document et être en mesure de la fournir,

– des portions de ce document peuvent être utilisées comme illustrations d'une présentation ou comme remarques sans autorisation préalable si les citations d'usage sont réalisées.

Chabi – XLFormation - 2007



mailto:[email protected]





ANNEXES





LIENS ET RES S OUR C E S – Joo mla!, le c s s . . et tout le reste !!

Vous trouverez sur le net tout ce qu'il vous faut pour progresser après ce template : les ressources en lignes sont énormes ! Et c'est une bonne chose qu'autant de personnes prennent le temps de partager les connaissances !! Sans cela, il n'y aurait pas de communautés Joomla et encore moins de Joomla !

Vous trouverez en ligne tout ce qu'il faut pour comprendre et maitriser le Css : je vous donne quelques adresses sur lesquelles vous pouvez aller faire un tour.

Ces sites ne sont que le pale reflet de la quantité d'informations à votre disposition sur le net, et ne constitue qu'un point de départ à votre recherche..

LIENS VOUS Y TROUVEREZ :

CSS

http://wiki.media-box.net/documentation/css

Tout sur le css : recensement des propriétés existantes pour les éléments css en général (par exemple, les <div> !)

http://actuel.fr.selfhtml.org/index.htm SelfHtml : une traduction d'un document original allemand de plus de 1900 pages. Une mine d'information !

Formations, Aides et Tutoriels

http://www.xlformation.sup.fr L'endroit où vous avez normalement téléchargé ce tutoriel, n'hésitez pas à revenir de temps en temps : de nouveaux tutoriels sont publiés périodiquement..

http://www.framasoft.net/rubrique4.html

Un site ressource pour les tutoriels (entre autres !) A voir absolument !

http://forum.joomlafacile.com/ Une source incontournable d'informations et une communauté particulièrement réactive ! En passant, merci à tout ceux qui participent à la vie de ces forums !! ;))

http://www.toulouse-renaissance.net/c_outils.htm#graphisme

Une page recensant différents outils et techniques pour vos sites..






http://forum.joomlafacile.com/




http://actuel.fr.selfhtml.org/index.htm






http://openweb.eu.org/ « Pour les standards sur Web ».. Allez voir !

HEBERGEMENT

http://www.keoconcept.com Je tenais à donner ici l'adresse d'un hébergeur que je salue pour la formidable réactivité aux problèmes techniques et à la hotline comme tout le monde aimerait avoir : efficace, professionnelle, rapide. Vos sites sur Joomla seront hébergés sans problème et vous pourrez choisir différents types d'hébergement : du gratuit au payant. Je n'ai rien à « gagner » à donner cette information, il existe d'autres hébergeurs excellent, mais ceux-ci sont pour moi extrêmement performants.

http://www.webhosting.info/ Ressource publique sur les hébergeurs, cela peut vous permettre de choisir votre hébergeur à partir d'informations utiles..

TEST DE VOS PAGES

http://www.browsrcamp.com/

http://www.scapture.com/

http://www.danvine.com/iecapture/

http://browsershots.org/

Ces différents sites vous permettent de prendre des « photos » de ce qui s'affiche dans les différents navigateurs existants. Très utile, voire indispensables, cela vous permet de vérifier si vos pages s'affichent comme vous le souhaitez pour les internautes..

CREATION DE TEMPLATES

http://www.joomladraft.org/ Anciennement « Marzanweb », ce site travaille sur le recensement et l'explication technique des différents éléments paramétrables dans vos templates Joomla! Vous cherchez comment présenter tel ou tel élement



http://www.joomladraft.org/

http://browsershots.org/

http://www.danvine.com/iecapture/

http://www.scapture.com/

http://www.browsrcamp.com/

http://www.webhosting.info/

http://www.keoconcept.com/

http://openweb.eu.org/




dans Joomla ? Rendez-vous sur ce site.

http://www.aide-joomla.fr/template/index.php?option=com_joomlaboard&func=view&id=22&catid=15

Un site intéressant pour Joomla : vous y trouverez plusieurs choses pour vous aider..

RESSOURCES – PHOTOS – ANIMATIONS

http://adigitaldreamer.com/gallery/

http://www.pleindephotos.com/libres/

http://www.klondik.net/ressources-photos-27-5,2.html

Vous aurez quelquefois besoin de trouver photos, animations, illustrations, sans pour autant passer des heures à les créer par vous même.

Ces quelques sites peuvent vous aider à trouver votre bonheur !

TEMPLATES A TELECHARGER

http://www.joomlaos.de/joomla_template_galerie.html

http://www.joomla-templates.com

http://www.joomla24.com/option,com_gallery/Itemid,6.html

Pour cela aussi, il existe une multitude de sites vous permettant de télécharger des templates gratuitement : au delà du fait que le travail est prêt à être utilisé, vous pourrez à partir de ces templates analyser la conception et intégrer de nouvelles techniques.

RESSOURCE JOOMLA (GENERAL)

http://www.joomlafrance.org

http://www.joomlaresource.com

http://www.joomladimension.be

http://www.joomlasource.be/

http://www.joomlaspan.com

Vous connaissez déjà plusieurs sites traitant de Joomla. Je vous redonne les liens de plusieurs de ces sites..

ARTICLES A LIRE

http://www.commentcamarche.net/faq/sujet-1073-creer-un-site-beau-dynamique-et-respectueux-des-standards

Les standards du web..






http://www.joomlaspan.com/

http://www.joomlasource.be/

http://www.joomladimension.be/

http://www.joomlaresource.com/

http://www.joomlafrance.org/



http://www.joomla-templates.com/





http://www.pleindephotos.com/libres/

http://adigitaldreamer.com/gallery/







http://www.csszengarden.com/tr/francais/

Le Css en action..

http://www.droitdunet.fr/par_profils/profil.phtml?it=7&type=profil_createur

http://www.sam-mag.com/P1,1,5,384,,,default.aspx

Par ce qu'il vaut mieux créer que « pomper »..

http://opensourcecms.com/ Parce que même si je considère personnellement que Joomla est le premier de la liste, il existe d'autres CMS..



http://opensourcecms.com/









CS S – MEMENTOVous trouverez joint au pack complet le fichier CSS1 d'Emmanuel Fleury. Ce

document au format PDF peut facilement être utilisé comme référence : bien que plusieurs éléments aient changé, le document reste d'actualité pour débuter avec le css.

Je vous conseille également cette page très bien faite et recensant les différentes propriétés css et comment les utiliser :


J'avais au départ songé à vous ajouter ici les propriétés css les plus courantes, mais si vous cherchez un petit peu sur le net et dans les documentations à votre disposition, vous trouverez des informations très détaillées et très claires.

Prenez le temps de lire au moins une fois la liste des propriétés css, juste pour savoir ce qui existe..cela vous sera toujours utile.






FICHIERS DU PACK « Créer son template non tabulaire pour Joo mla »

Ce tutoriel est également téléchargeable sous forme de pack sur le site http://www.xlformation.sup.fr et contient les fichiers :

TutoTemplateChabi2007-DIV.pdf : ce fichier

Circus.zip : le template réalisé dans ce tutoriel

behar.zip : template utilisé pour la partie étude

planetblunt001.zip : template utilisé pour la partie étude

Feuille de référence css : inclus dans ce fichier

css1.pdf : document synthétique sur les propriétés Css, réalisé par Emmanuel Fleury

Layoutclown.xar : fichier au format Xara Extreme / XaraLX contenant les éléments ayant servis à la création graphique du template.

Un dossier contenant un template vierge : pouvant servir de base à vos propres créations.








créer son template avec des logiciels gratuits ou opensource€¦ · les logiciels à utiliser...

Documents