|
10.2 Mise en place du squelette du header |
|
|
|
|
Concevoir son template -
10. Le Header
|
|
Écrit par Jean Louis Servais
|
|
19-02-2006 |
 | Joomla! 1.0.x |
 |
15/04/2006 : Retouche de la présentation et ajout vers le tutoriel Améliorer son template.
25/04/2006 : Déplacement note idée (fond jaune) en bas de page.
|
 |
Coloration syntaxe du code ?
|
|
Mette la ligne de code dans les explications ?
|
Dans un premier temps, nous allons ignorer :
- le pathway,
- la zone de recherche,
- la bannière,
- et le top menu.
Nous ajouterons ces éléments ultérieurement. Des chapitres spécifiques à chacun de ces éléments sont présents dans la partie 2 de ce tutoriel : /content/section/5/47/" taget="_blank">Améliorer son template.
Ainsi, vous saurez les ajouter à des templates existants.
Par conséquent, le header se réduit à la zone comportant le nom et le slogan du site. Le résultat à obtenir se résume donc à ceci :
Pour définir cette surface, nous allons utiliser un tableau composé d'une ligne comportant une seule cellule.
Voici le code à placer entre les balises <body> et </body> du fichier index.php :
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<body>
<!-- DEBUT DU HEADER -->
<table>
<tr>
<td>
<!-- NOM DU SITE -->
Emplacement du nom du site
<br />
<!-- SLOGAN DU SITE -->
Emplacement du slogan du site
</td>
</tr>
</table>
<!-- FIN DU HEADER -->
</body>
|
Ces quelques lignes de code XHTML ne posent pas de problèmes particuliers de compréhension. Nous allons cependant les commenter pour que les novices dans ce langage puissent comprendre un minimum de choses :
| Ligne 15 : |
Un commentaire pour se repérer facilement dans le code. |
| Ligne 16 : |
Déclare le tableau de notre header. |
| Ligne 17 : |
Déclare une ligne dans le tableau. |
| Ligne 18 : |
Déclare la cellule de la ligne. |
| Ligne 19 : |
Un commentaire pour se repérer dans le code. |
| Ligne 20 : |
Début du texte contenu dans la cellule. |
| Ligne 21 : |
La balise de retour a la ligne. |
| Ligne 22 : |
Un autre commentaire pour se repérer dans le code. |
| Ligne 23 : |
Fin du texte contenu dans la cellule. |
| Ligne 24 : |
Ferme la première cellule de notre header. |
| Ligne 25 : |
Ferme la ligne de notre tableau. |
| Ligne 26 : |
Ferme le tableau de notre header. |
| Ligne 27 : |
Est un commentaire. |
Sauvegarder cet ajout et allez à la page suivante...
 |
En lisant ce chapitre, vous avez sans doute remarqué l'abondance de commentaires inclus dans le code. Avec l'expérience et plus de compétence, vous pourrez les limiter à ce qu'il est raisonnable. Dans le cas présent, ne faites pas l'économie de ces commentaires. Ils sont utiles pour repérer rapidement les emplacements à modifier.
|
 |
Auto-contrôle :
Théoriquement, la balise </html> vient de dégringoler à la ligne 29. |
|
|
Dernière mise à jour : ( 19-12-2008 )
|
