|
Page 7 sur 10
Le corps du fichier index.php
Pour compléter le squelette de votre fichier index.php, il faut insérer du code entre les balises <body> et </body>. Pour le préparer, schématisez tout d'abord, l’apparence de votre page d’accueil. On adopte, à titre pédagogique, le modèle suivant :
Pour réaliser ce schéma, vous allez utiliser des blocs <div> pour la mise en forme de votre site.
Insérer pour l’instant entre <body> et </body> le code suivant :
<div id="haut">CONTENU BANNER</div>
<div id="gauche">CONTENU GAUCHE</div>
<div id="centre">CONTENU PRINCIPAL</div>
<div id="droit">CONTENU DROIT</div>
<div id="bas">CONTENU PIED DE PAGE</div>
Chaque bloc <div> est identifié par son attribut "id". C'est le selecteur qui va vous servir pour paramétrer vos blocs dans le fichier css.
Il vous est conseillé d’ouvrir en même temps 2 fenêtres; la fenêtre de votre navigateur et la fenêtre de votre éditeur Notepad++ qui va vous servir pour la modification de vos 2 fichiers php et css. Cela vous permet de sauvegarder vos modifications et voir dans l’immédiat le résultat sur votre navigateur.
Sauvegarder votre fichier index.php.
Testez maintenant le résultat en rafraichissant l’affichage de l’url de votre site: "http://localhost/MonSitePerso/"
Vous constatez que le template standard par défaut est encore utilisé. C’est tout à fait normal.
Assigner un template par défaut
Pour assigner votre template en tant que modèle par défaut du site, accédez à la console d’administration via l'url http://localhost/MonSitePerso/administrator
Entrer le nom « admin » et le mot de passe correspondant (cf Etape 3 de l'installation de joomla sur votre ordinateur local)
Allez ensuit dans le menu "Site-->Gestion des Templates-->Template du Site"
Dans le nouveau écran ainsi affiché, cliquez sur le bouton en regard de votre template "TemplatePerso" et puis cliquez sur le bouton "Default".
Raffraichir l’écran dans votre navigateur pour l’url de votre site: "http://localhost/MonSitePerso/". L’affichage correspond maintenant à votre nouveau template :
Comme vous le remarquez, à ce stade, votre template affiche 4 bloc div, le bloc « haut » , le bloc « gauche », le bloc « centre » , le bloc « droit » et enfin le bloc « bas ».
Dans la page suivante, vous allez paramétrer votre fichier template_css.css qui est encore vierge jusqu'à maintenant.
|
