|
11.1 Mise en place du corps du site |
|
|
|
|
Concevoir son template -
11. Le corps du site
|
|
Écrit par Jean Louis Servais
|
|
02-03-2006 |
 | Joomla! 1.0.x |
 |
30/03/2006 : Regroupement des 2 premiéres pages publiées précédemment.
16/04/2006 : Retouche de la présentation.
|
 |
Coloration syntaxe du code ?
|
Cette partie du template est souvent dénommée Contenu (content en anglais), car elle contient la raison d'être du site. C'est-à-dire vos textes, vos images, et tout ce que vous avez décidé de publier sur le Web.
Voici le schéma du corps du site que nous avions prévu de réaliser dans notre projet de template :
Le projet initial prévoit 3 colonnes :
- La première et la troisième pour l'affichage des modules (colonnes latérales),
- La deuxième colonne est destinée à la publication des articles et des composants (colonne centrale).
Dans un premier temps nous allons considérer que nous souhaitons avoir les 3 colonnes en permanence. Nous verrons dans un prochain chapitre comment rendre invisible la troisième colonne lorsqu'elle ne contient pas de module.
Avant d'encoder cette partie du template, nous allons choisir les largeurs et les couleurs de nos colonnes :
- Pour la colonne 1 (celle située à gauche) :
Une largueur de 160 pixels de couleur bleu acier.
- Pour la colonne 2 (celle du milieu) :
Un fond blanc et une largeur égale au complément des 2 colonnes latérales pour une dimension totale de 760 pixels (taille retenue pour le header).
- Et pour la colonne 3 (celle de droite) :
Nous adoptons les mêmes caractéristiques que la colonne de gauche.
Pour la mise en place du corps du site, nous allons utiliser la même technique que précédemment. Un tableau d'une ligne comportant 3 cellules est tout indiqué :
|
<!-- DEBUT CORPS DU SITE -->
<table>
<tr>
<!-- DEBUT COLONNE 1 DU CORPS DU SITE -->
<td>
Emplacement colonne 1 du corps du site
</td>
<!-- DEBUT COLONNE 2 DU CORPS DU SITE -->
<td>
Emplacement colonne 2 du corps du site
</td>
<!-- DEBUT COLONNE 3 DU CORPS DU SITE -->
<td>
Emplacement colonne 3 du corps du site
</td>
</tr>
</table>
|
Surtout, ne copiez pas le code précédent dans le fichier index.php. Car maintenant que vous avez compris le principe, nous allons tout mettre en place ici au préalable.
En premier lieu réglons la largeur du nouveau tableau à la même dimension que celui du header :
|
<table border="0" cellpadding="0" cellspacing="0" width="760px">
|
En ce qui concerne le positionnement du tableau dans la page, nous ne faisons rien car le nouveau tableau va trouver sa place à la suite du header. Donc entre les balises : <div align="center"> ... </div>
Par conséquent, il va s'aligner sur le header.
Fort de notre expérience des styles du header, nous prévoyons avec prudence un style différent pour chaque colonne (ou pour chaque cellule, c'est pareil dans le cas présent) :
| |
| Style |
Domaine d'application |
| #column1 |
Colonne de gauche |
| #column2 |
Colonne centrale. |
| #column3 |
Colonne de droite. |
|
Vous remarquerez :
- que nous choisissons des noms explicites pour chaque colonne,
- que nous n'avons pas utilisé les noms des positions pour les noms des styles, comme cela est souvent le cas dans de nombreux templates. Ceci évite toute ambiguïté car une colonne peut contenir plusieurs positions.
Ceci nous conduit à remplacer les trois lignes avec les balises <td> respectivement par :
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
<!-- DEBUT CORPS DU SITE -->
<table border="0" cellpadding="0" cellspacing="0" width="760px">
<tr>
<!-- DEBUT COLONNE 1 DU CORPS DU SITE -->
<td id="column1">
Emplacement colonne 1 du corps du site
</td>
<!-- DEBUT COLONNE 2 DU CORPS DU SITE -->
<td id="column2">
Emplacement colonne 2 du corps du site
</td>
<!-- DEBUT COLONNE 3 DU CORPS DU SITE -->
<td id="column3">
Emplacement colonne 3 du corps du site
</td>
</tr>
</table>
<!-- FIN DU CORPS DU SITE -->
|
Avez-vous remarqué que nous avons mentionné les numéros des lignes ?
Vous pouvez donc copier tout ceci dans le fichier index.php, en le plaçant juste en dessous de la ligne suivante :
32
|
<!-- FIN DU HEADER --">
|
Prenez le temps d'aligner correctement l'ensemble des lignes. Un code bien présenté est plus facile à analyser et à débuguer.
 | Auto-contrôle :
La balise </html> doit se trouver sur la ligne 53. |
|
|
Dernière mise à jour : ( 14-08-2008 )
|
