apprendre joomla

Apprendre joomla Prérequis HTML et XHTML Langage CSS PHP et Mysql

base html Avant de donner une définition, vous constatez une chose importante. La présente page que vous êtes en train de consulter maintenant, est affichée grâce à votre navigateur (mozilla firefox, internet explorer, safari, opera, netscape, google chrome ou autre). Par analogie aux êtres humains qui ont besoin d’un langage pour communiquer et d’un traducteur le cas échéant qui fera l’intermédiaire, votre navigateur a besoin d’un langage pour comprendre ce qu’on lui demande de faire. Pour afficher le texte « Comprendre html » en gras, vous devez le placer entres et . Votre page web contiendra par conséquent, la ligne suivante : Comprendre html qui sera lue et interprétée par votre navigateur. Celui-ci affichera le résultat suivant: Comprendre html Pour afficher une image « MonImage.gif », vous devez placer le code suivant dans votre page web : et sont appelées des balises html. est une balise ouvrante et une balise fermante. Le langage html (Hypertext Markup Language) est donc un langage de balisage qui permet d’organiser et mettre en forme des informations sur une page web. Il vous donne la possibilité d’inclure des éléments tels que des formulaires de saisie, des tableaux, des ressources multimédias (images, vidéos) etc. En fin de compte, votre page entière n’est qu’une série de balises saisies les unes après les autres que le navigateur interprète pour afficher à l’écran le contenu de la page avec la présentation demandée. La maîtrise de la base html consiste à apprendre la liste des balises disponibles et les règles de syntaxe y afférentes à respecter.

Exemple de balises Les balises qui constituent la base html du langage, sont nombreuses et vous n'êtes pas censés les apprendre toutes par coeur. Une balise peut avoir plusieurs attributs, ce qui rend un peu difficile leur mémorisation. Avec la pratique, vous mémorisez certaines plus que d'autres. L'essentiel c'est de savoir où aller chercher la syntaxe et comment faire une recherche. Pour les balises les plus connues, on peut citer les suivantes: • • •

: pour insérer un lien hypertexte : pour un bloc de page. : pour un saut de ligne

-1-

• • • • • • • •

: pour la mise en gras : pour l'insertion d'une image : pour insérer un tableau : pour une ligne de tableau : pour une cellule de tableau : pour insérer un bloc de mise en forme div ...: pour marquer les titres (niveaux 1 à 6) etc

Le xhtml c’est quoi ? Pour simplifier, xhtml (X pour eXtensible) vient étendre le langage html par l’ajout de normes à respecter dans la syntaxe. Si par exemple l’html n’était pas rigoureux avec les balises de fermeture, xhtml, par contre, est plus exigeant. Voici un exemple: En html Il est tolèré d’avoir cette page de code : En xhtml, il faudra corriger le code ci-dessus. Soit après correction: La fermeture des balises se fait dans tous les cas par un slash « / »: • •

-2-

….. : pour les balises par paires telles que la balise pour le corps de votre page. : pour les balises simples telle que pour l’insertion d’images.

Pourquoi comprendre l'html? Le puissant cms joomla permet de réaliser des sites web professionnels sans connaissances approfondies sur le langage html. Cependant, il est important de comprendre le langage pour agir avec plus de flexibilité. Bien que vous pouvez utiliser des éditeurs pour générer le code de vos pages web, une bonne maîtrise des balises html et des styles css vous permettra de personnaliser vos templates joomla. Maitriser les langages sous-entend une bonne compréhension et non pas une mémorisation par coeur qui demeure, bien évidemment, difficile. En outre, vous voudriez peut être analyser un dysfonctionnement ou faire des retouches d'amélioration sur votre code html. Le passage par un éditeur n’est pas toujours suffisant. Pour affiner votre page web, vous aurez sûrement besoin de décrypter son contenu de manière globale et aller au bon endroit dans le texte du code pour apporter les ajustements nécessaires.

Conclusion Pour trouver la syntaxe d'une balise html quelconque et ses attributs correspondants, servez vous d'une documentation de référence html. Et pour vos premiers pas dans l’apprentissage du langage, un cours facile vous permettra de comprendre les éléments de base de l'html, cerner la structure et la terminologie du langage à travers des exemples pratiques. L'essentiel c'est d'apprendre les différentes balises html, les attributs de chaque balise, comment organiser vos textes, vos paragraphes, les titres, comment créer des liens hypertextes, insérer vos images. Vous apprendrez plus lorsque vous abordez la partie sur le langage css qui vous révèle comment personnaliser le désign de votre site.

Pourquoi le css? Généralement, un site web comporte plusieurs pages au format html. Chacune des pages définit la disposition du contenu à publier. Dans une page, on doit distinguer, en effet, les titres, les paragraphes, les énumérations, les tableaux, les liens hypertextes ..etc. Ce sont les balises html qui permettent la mise en oeuvre de cette disposition du contenu de la page web. Mais, pour la mise en forme de ces éléments (par exemple: titres en gras, tableaux avec bordure, énumérations colorées, liens repérés avec une couleur de fond etc..), elle peut être définie, ailleurs, dans un autre fichier de styles css dédié. Faites attention à la différence entre les termes "disposition" et "mise en forme". La "disposition" des éléments de votre page web est définie par la succession de vos balises html dans la page et leurs imbrications, tandis que "mise en forme" est définie par vos styles css. Pour l’ensemble des pages web de votre site, on peut créer un seul fichier css pour définir les propriètés des éléments de ces pages. Par exemple, dans le fichier css ainsi créé, on spécifie la couleur des titres, la taille de police des paragraphes, le type de police pour les énumérations, la couleur des liens hypertextes survolés ou cliqués, la couleur de fond pour les tableaux…etc Il est également possible de définir les styles css au niveau de la page web elle même. Examinez l'utilisation de cette méthode à la page suivante avec l'exemple simple sur la création de cadres avec des coins arrondis moyennant des blocs div emboîtés.

-3-

Simple css Dans votre fichier css, vous aurez, par exemple, le code générique suivant: balise { propriete: valeur propriete: valeur } Pour une balise (lien hypertexte) pour laquelle on souhaite un texte de couleur jaune, sur fond bleu, le code css correspondant sera le suivant: a{ color: yellow; background-color: blue; } Si vous souhaitez appliquer ce même style aux paragraphes du bloc et aux cellules du tableau , le code css deviendra : a, div.MaClasse p, table#Entete td { color: yellow; background-color: blue; }

Explications: a, div, p, table et td relatifs à des balises dans le code html sont dits des sélecteurs de type. La virgule "," c'est pour séparer des éléments auxquelles on va appliquer le même style. Le point "." dans div.MaClasse signifie qu'il s'agit d'un sélecteur de classe. Le dièze "#" dans table#Entete veut dire qu'il s'agit d'un sélecteur d'identifiant id. L'espace entre div.MaClasse et p signifie qu'il s'agit d'un lien de parenté ( à l'intérieur de de classe MaClasse) Idem pour l'espace entre table#Entete et td: signifie que le style s'applique aux cellules à l'intérieur de identifiée par id=Entete. En bref : « Le langage informatique css ("Cascading Style Sheets" traduit en "feuilles de style en cascade") sert à décrire la présentation des documents html…. » Définition wikipédia. Pour un exemple simple css de A à Z, consultez la page suivante traitant un cas très pratique sur la réalisation de bloc avec des coins arrondis moyennant une disposition de blocs div emboités.

-4-

Des difficultés peuvent êtres rencontrées lors de la mise en oeuvre de certaines dispositions des blocs div. Les articles sur le positionnement div vous donnent des solutions à ces problèmes en montrant l'utilisation correcte de quelques propriètés css (float et margin). Tous ces articles, bien choisis, vous seront utiles lors de la conception du design de votre site web avec le puissant cms joomla.

Exemple css - css arrondi Dans ce tutoriel, vous allez vous familiariser davantage avec le langage css, en examinant l'une des utilités des blocs div emboités. On se propose de créer la page web suivante:

Elle est constituée d'un bloc conteneur (bordure en vert) et d'un bloc fils flottant à gauche. Comme vous le constatez, le bloc fils a des coins arrondis. La mise en oeuvre de ces coins arrondis est facilité par l'utilisation des blocs emboités. Pour voir comment le faire, nous allons présenter le code de cette page xhtml en commentant chacun des blocs de code qui la constituent: Initialement, le code de la page a la forme qui suit. Pour l'achever, il faudra, par la suite, renseigner la partie et la partie .

Dans le corps de la page (balise ), on place le code suivant. Le bloc gauche étant constitué de 4 blocs emboités, le bloc gauche lui même et 3 autres qui sont placés à l'intérieur de celui-ci:

-5-

Test de blocs div emboîtés à la manière des poupées russes. Dans la suite, en commentant les styles css, on verra l'utilité de cette disposition qui ressemble à des calques superposés. body { font-family: Tahoma, Arial, Verdana, sans-serif; font-size: 12px; color:blue; text-align: left; } Ces paramètres s'appliquent à toute la page (balise "body"). Le texte de couleur bleu et de taille 12px, sera justifié à gauche. #Principal{ width:800px; border: 2px solid green; /* redéfinition de bordure */ background-color:#FFFFFF; /* fond coloré */ } Le bloc conteneur "Principal" a une largeur de 800px et une bordure verte de 2 pixels d'épaisseur. #gauche { margin:20px; width: 152px; background: transparent url(images/module_middle.jpg) left repeat-y; } Le bloc "gauche" de largeur 152 pixels, a une marge de 20 pixels (espacement à gauche, en haut, à droite et en bas avec son bloc parent). Ce bloc a un fond de couleur transparente, et une image de fond (module_middle.jpg) qui se répète le long de la hauteur. C'est l'image de fond de premier niveau figurant dans le shéma suivant :

#gauche div { width: 152px; background: transparent

-6-

url(images/module_top.jpg) top left no-repeat; } Le bloc fils de l'élément "gauche" a la même largeur et la même couleur de fond (transparent) mais une image de fond différente qui ne se répète pas cette fois-ci (no-repeat) mais s'affiche une seule fois en haut à gauche du bloc (top left). C'est l'image de second niveau figurant dans le schéma ci-dessus. #gauche div div { width: 152px; background: transparent url(images/module_bottom.jpg) bottom left no-repeat; } C'est le bloc fils du bloc fils de l'élément "gauche". Il a la même largeur et la même couleur de fond (transparent) mais une image de fond différente qui ne se répète pas cette fois-ci (no-repeat) mais s'affiche une seule fois en bas à gauche du bloc (bottom left). C'est l'image de troisième niveau figurant dans le schéma ci-dessus. #gauche div div div { width: 132px; height:300px; padding: 10px; background: transparent; C'est le bloc fils le plus profond qui contient le texte à afficher. Il a un fond transparent. Le padding de 10 pixels, définit l'espacement intérieur de ce bloc, entre ses bords et son contenu. Le texte, par exemple, qui y est affiché, ne sera pas collé contre le bord du bloc.

} C'est ainsi, que viennent se superposer ces 4 blocs, l'un en dessus de l'autre. Le bloc le plus profond "#gauche div div div " sera le plus haut et l'élément parent "#gauche" sera au niveau le plus bas. Ils restent tous visibles parce qu'ils ont tous une couleur de fond transparente. Par contre les images top et bottom viennent cacher localement l'image de premier niveau. L'image de troisième niveau ne cache pas celle de deuxième niveau parce qu' elles sont placées à des endroits différents (top et bottom).

Pour tester la page sur votre ordinateur locale, téléchargez les images de fond middle , top et bottom.

float css Pour vous aider à créer facilement un site web de qualité professionnelle avec le puissant cms joomla, on explique dans le présent tutoriel comment résoudre des problèmes css courants. Des difficultés pouvent être rencontrées lorsque vous utilisez le positionnement css des blocs div : éléments conteneurs figurant dans vos pages web. La solution vous servira certainement dans la conception du design de votre site . Pour l'instant, essayons de poser le problème qui réside dans la difficulté de mise en oeuvre de la proprièté css float à travers l'exemple de homepage schématisé ci-après:

-7-

Par défaut, les blocs div, éléments conteneurs d'une page web sont affichés dans une succession verticale, c'est le positionnement en flux normal. Le flux fait en sorte que ces éléments s'affichent naturellement, les uns à la suite des autres. Donc en flux normal, un bloc, génère un retour à la ligne après son affichage. La proprièté css "float" permet de sortir un élément du flux, autrement dit, le placer à doite ou a gauche sans générer de retour à la ligne après son affichage. Mais la difficulté réside dans le comportement des autres blocs qui reste difficile à expliquer, parfois, même pour les designers Web non débutants. Un exemple de comportement inattendu sera examiné à travers l'exemple que nous allons traiter ensemble. Pour réaliser le design du shéma cité avant, créez un fichier nommé "tuto-float.html" (en utilisant, par exemple, l'éditeur notepad++). Le code à insérer, au départ, est le suivant: Pour créer les blocs avec l'imbrication souhaitée, placer le code suivant entre les balises et :

-8-

ENHAUT RECHERCHE GAUCHE CENTRE DROIT ENBAS Pour le positionnement des blocs, il s'agit de: •

attribuer la proprièté "float: left" aux blocs "gauche", "centre" et "droit".

•

et annuler l'effet de la proprièté "float" moyennant la proprièté: "clear: both" qui permet un retour à la ligne pour afficher le bloc suivant dans le flux. A savoir le bloc "enbas".

Mais où placer cette proprièté "clear"? La définition des styles css sera défini dans le même fichier html entre les balises et . En voici le contenu avec des commentaires: body { font-family: Tahoma, Arial, Verdana, sans-serif; font-size: 12px; text-align: center; } C'est la définition de police pour toute la page. Le texte est centré. div{ margin: 4px; border: 1px solid blue; /* définition de bordure par defaut pour tous les blocs */ } C'est bien indiqué en commentaire, il s'agit de la définition de bordure par défaut pour tous les blocs. (N.B: Pour commenter vos styles css, vous placez du texte entre /* et */ ). #conteneur { width:970px; border: 1px solid red; /* redéfinition de bordure */ margin: 0 auto; /* pour centrer tout le contenu de la page */ } Le conteneur global de largeur 970px, est centré dans la page et sa bordure est en rouge. #enhaut { width:960px; height:100px; } Le bloc "enhaut" a une largeur 960px et une hauteur de 100px; #recherche { width:960px;

-9-

height:33px; } #contenu { width:960px; min-height:30px; border: 2px solid green;

/* redéfinition de bordure */

background-color:#ece9d8; /* fond coloré */ } La bordure du bloc "contenu" est en vert. Pour la bien visualiser, on lui a attribué un fond coloré (couleur "#ece9d8"). La taille minimale est de 30px. Ce bloc devra s'étendre, si nécessaire, pour inclure touts ses blocs fils. #gauche { float:left; width:200px; height:300px; } #centre { float:left; width:518px; height:300px; } #droit { float:left; width:200px; height:300px; } Ces trois blocs sont placés en position gauche à l'aide de la proprièté "float" qui ne génère pas de retour à la ligne après affichage de chacun des blocs. #enbas { clear:both; width:960px; height:33px; margin: 4px auto;

/* pour centrer le bas page */

} A ce niveau, on a placé la proprièté clear pour tester son effet. En résumé, On a attribué une largeur et une hauteur et une bordure à chaque bloc div pour permettre une meilleure visualisation des conteneurs et leur positionnement les uns par rapport aux autres: •

le bloc "conteneur" avec une bordure rouge

•

"contenu" avec bordure verte et un fond coloré.

•

et les autres blocs avec bordure bleue

La question était où placer la proprièté clear? Si on la place, au niveau du style id "enbas", on constatera un comportement qui semble être normal avec le navigateur Internet Explorer (IE7) (visualiser la page)

- 10 -

Mais essayez de voir l'affichage avec Mozilla firefox (version testée 3.0.8) qui respecte mieux les normes css. L'affichage est incorrect. En effet, Internet Explorer ne suit pas strictement les standards, et de ce fait pour vérifier la conformité de vos pages web aux standards xhtml et css, il est vivement recommandé de faire les tests via firefox pour corriger toute anomalie constatée. Vous serez rassurés que les visiteurs de votre site web auront un affichage correct. Pour le cas présent, vous constatez, avec mozilla firefox, que le bloc "contenu" n'inclut plus ses blocs fils: "gauche", "centre" et "droit". Sa hauteur ne s'est pas étendue comme prévue.

Pour corriger, il faudra appliquer "clear" au bon endroit. En fait, c'est juste avant de quitter le bloc père "contenu" qui est le conteneur immédiat des blocs flottants à gauche. Pour ce faire, on va créer un bloc vide nommé "clr" : à placer vers la fin du bloc conteneur en question, c'est le bloc "contenu". Ce bloc "clr" sera affecté par la proprièté "clear:both" au niveau du fichier css comme suit: .clr { clear: both; font-size:0; line-height:0; border: 0px; } Voici, en entier, le fichier html corrigé: (les modifications ci-dessus y sont rapportées en gras) body { font-family: Tahoma, Arial, Verdana, sans-serif; font-size: 12px; text-align: center; } div{ margin: 4px;

- 11 -

border: 1px solid blue; /* définition de bordure par defaut pour tous les blocs */ } #conteneur { width:970px; border: 1px solid red; /* redéfinition de bordure */ margin: 0 auto; /* pour centrer tout le contenu de la page */ } #enhaut { width:960px; height:100px; } #recherche { width:960px; height:33px; } #contenu { width:960px; min-height:30px; border: 2px solid green; /* redéfinition de bordure */ background-color:#ece9d8; /* fond coloré */ } #gauche { float:left; width:200px; height:300px; } #centre { float:left; width:518px; height:300px; } #droit { float:left; width:200px; height:300px; } #enbas { /*clear:both;*/ width:960px; height:33px; margin: 4px auto; }

- 12 -

.clr { clear: both; font-size:0; line-height:0; border: 0px; } ENHAUT RECHERCHE GAUCHE CENTRE DROIT ENBAS Examiner le résultat dans les deux navigateurs.

Maintenant, mozilla firefox affiche correctement tous les blocs de votre page web.

css positionnement A ce niveau, on examinera un autre problème que vous pouvez rencontrer lors de l'utilisation de la proprièté "margin". Le constat est fait lorsque vous tentez d'afficher votre page web sous firefox (3.0.8) ou google chrome (1.0.154.53).

- 13 -

Voici un exemple de page simple qui affiche un bloc parent "conteneur" incluant un bloc fils "contenu". L'image suivante montre le résulat escompté:

Pour faire le test, créez une page html avec un éditeur tel que notepad++ . Placez le corps suivant entre les balises et : Contenu Pour la définition des styles css, vous pouvez placer le code suivant entre les balises et de votre page html: body { font-family: Tahoma, Arial, Verdana, sans-serif; font-size: 20px; /* taille de police */ text-align: center; /* texte centré */ color: blue; /* texte de couleur bleue */ } A ce niveau, on a défini les paramètres du texte pour toute la page (style de balise body). Les commentaires placés entre /* et */ permettent d'avoir un code plus lisible. #conteneur { width:960px; min-height:300px;

/* hauteur minimale */

background-color:#A9A9A9;

/* fond coloré */

} C'est la définition du bloc parent. #contenu { margin: 100px auto;

/* bloc centré avec une marge en haut et en bas de 100 pixels */

width:300px; height:100px; background-color:#98FB98; } Le bloc fils est centré dans le bloc parent avec une marge en haut et en bas de 100 pixels.

- 14 -

Lorsque vous tentez d'afficher votre page sous internet explorer 7, l'affichage semble être correct. Cependant avec mozilla firefox ou google chrome, la proprièté margin semble être appliquée au bloc "conteneur" plutôt qu'au bloc fils!. L'image suivante:

montre le résultat obtenu et que vous pouvez, vous même, tester ici avec, bien entendu, mozilla firefox ou google chrome. Pour corriger, vous devez définir une bordure de 1pixel pour le bloc parent "#conteneur". Ajoutez, pour cela, la ligne suivante à votre code css au niveau du style id "#conteneur": border-top: 1px solid transparent; La bordure choisie est de couleur transparente. Affichez maintenant la page ainsi modifiée. L'affichage est maintenant correct avec firefox et google chrome.

Conclusion Comme vous l'avez constaté, le css est un autre langage destiné à la mise en forme du contenu de vos pages web. Si vous êtes débutants, vous pouvez revenir vers les exemples des pages précédentes après avoir consulté le Siteduzero qui vous permettra d’apprendre le langage en douceur. Là, vous allez apprendre comment appliquer des styles à vos différentes balises html, comment définir le formatage de votre texte : taille de police, couleur, alignement, fond …etc Vous allez apprendre également la partie fondamentale concernant la création du design de votre site, en définissant la présentation de vos différents blocs : tailles, bordures, positionnement des unes par rapport aux autres etc. Enfin, une fois que vous avez pris suffisemment du temps à apprendre et assimiler les éléments essentiels des deux langages html et css, vous êtes habilités à réaliser votre propre template : la partie fondamentale de votre projet de conception web avec le puissant cms joomla. Ces deux langages sont prérequis pour pouvoir distinguer une balise, un attribut de balise, un sélecteur de class, un sélecteur d'identifiant id, les différents styles possibles, les propriètés de styles etc. Certes, on vous demande pas de tout apprendre par coeur mais l'essentiel c'est de comprendre le principe et en cas de besoin savoir où aller chercher l'information. Vous pouvez vous servir d'une documentation de référence sur le css et l'html qui vous aidera à la mise en oeuvre d'une balise et de ses attributs ou d'un style css particulier. Un exemple d'utilisation de ces références est bien illustré à la page 8 du tutoriel sur la l'adaptation de template joomla.

- 15 -

PHP et Mysql

Serveur web apache - php et mysql Bien que vous pouvez utiliser joomla sans connaissances approfondies du langage php ni de la base de données mysql, il s'avère utile de comprendre le fonctionnement de ces deux composants et de leur relation avec joomla. Dans joomla, tout le contenu des articles et même la configuration du site (liste des utilisateurs, menus, liens, définition des modules et de leur positionnement ..etc) sont stockés dans une base de données mysql. Les pages web joomla sont des pages php. C’est pourquoi, vous aurez besoin d’un serveur web. Le serveur web dont vous aurez besoin, est composé de apache et mysql ; apache en tant que serveur http qui interpréte le langage php et mysql en tant que serveur de base de données. Une illustration permet de mieux comprendre.

Voici un shéma illustratif :

1- Le client, un internaute par exemple, demande l'affichage d'une page web php en soumettant une requête http. 2- Le serveur web traite la page php demandée. Au cours du traitement de la page php, le serveur puise les données depuis la base de données mysql. Pour cela, il va soumettre une requête sql au serveur de base de données. 3- La base de données mysql traite les requêtes et envoie en réponse les données demandées au serveur web. 4- Ayant reçu tous les éléments nécessaires, le serveur web construit alors une page web sous format xhtml intégrant les données extraites de la base données. Vous constatez que la requête php soumise par le client a déclenché une génération de page xhtml par le serveur web. Il est évident alors qu'une demande réelle de page xhtml ne génére pas de traitement particulier au niveau serveur. Le serveur web ne fait, en effet, dans ce cas, que renvoyer la page xhtml demandée. Le langage xhtml , lui seul, ne permet de construire que des pages statiques. Une page statique est une page interprétée directement par le navigateur du client. Le serveur n'a qu'à envoyer la page xhtml demandée sans aucun traitement. Un traitement, cependant, est exigé pour une page php. Les pages php sont dites des pages dynamiques. php est un langage utilisé pour intéragir avec des bases de données.

- 16 -

Joomla utilise des pages php et la base de données mysql. En comprenant juste ce qu'on vient d'expliquer, vous serez en mesure d'avancer convenablement dans votre apprentissage et réaliser facilement votre site web avec le puissant cms joomla Si vous êtes passionnés par le langage php, sachez bien qu'il permet de créer un site dynamique, ainsi vous pouvez créer un forum pour votre site, un livre d'or, des news, un compteur des visiteurs de votre site et bien plus.

Apprendre Installation joomla Creation template simple Modifier template simple Creation template complet Creation template simple

Creation template joomla Votre site web devra être bien identifié dans la toile internet avec une charte graphique caractéristique reflétant l'activité de l'entité bénéficiaire (entreprise, administration, université, association, ...), les thèmes abordés et domaines d'intérêt .. etc. Cette charte graphique est traduite en modèles communément connus sous le nom de template joomla. Si vous avez préparé correctement votre ordinateur personnel et bien suivi nos conseils, vous pouvez commencer la conception de votre template joomla en toute sérénité. Dans la réalisation de votre site, ce qui vous incombe principalement, c'est préparer votre propre modèle, le template, en adaptant un template existant ou en concevant un nouveau. Pour réussir cette opération, il faudra maîtriser la structure d'un template pour pouvoir l'analyser dans ses détails et le modifier à votre convenance. C'est le but de ce tutoriel et des tutoriels qui vont le compléter. Tout le monde y trouvera son compte, du débutant au professionnel en passant par les étudiants et chercheurs d'emploi de webmaster ou webdesigner. Pour des raisons pédagogiques, on va commencer par les notions fondamentales et les éléments de base. Au préalable, installez joomla sur votre ordinateur local. Nous passerons, après, à travers ce tutoriel et le tutoriel suivant à la création d'un template simple pour joomla 1.0.15 (version toujours plébiscitée par un grand nombre de webmaters) tout en expliquant sa structure et les éléments le constituant. Des tutoriels complémentaires vous apprennent, par la suite, à construire un template complet pour votre site web joomla 1.0.15 ou 1.5. L'objectif étant d'avoir un code propre parfaitement maitrisable et réussir à modifier et personnaliser un template pour son site web professionnel. Rappelons qu'un minimum de connaissances sur l'html et le langage css est requis. La lecture des articles correspondants s'avère nécessaire pour les débutants. Si vous êtes bien initiés, le tutoriel sur le positionnement css des blocs div vous sera d'un apport considérable. En effet, ce dernier traite des difficultés de mise en oeuvre de certaines propriètés css. La résolution de ces problèmes vous sera utile lors de la construction de votre template professionnel . Pour commencer, on admet que "c:\xampplite\htdocs\" est la racine de votre serveur web (cf installation xampp). Le dossier de votre site portant le nom "MonSitePerso" est, par conséquent, "c:\xampplite\htdocs\MonSitePerso\" à l'issue de l'installation de joomla sur votre ordinateur local.

- 17 -

Après l’installation de votre site "MonSitePerso", vous avez bien remarqué que son url "http://localhost/MonSitePerso" donne un affichage par défaut basé sur le template "rhuk_solarflare_ii" fourni en standard avec joomla.

Le template est l'élement qui gère toute la partie design de votre site. Concrétement, il s'agit d’un répertoire portant le nom de votre template et situé dans le dossier "c:\xampplite\htdocs\MonSitePerso\templates\" de votre site "MonSitePerso". Par défaut, l’installation de joomla 1.0.15 fournit deux templates: "rhuk_solarflare_ii" et "madeyourweb". Vous pouvez rajouter les vôtres. Ainsi, pour le même site, différents templates seront disponibles et chacun fournit une apparence et un design particulier. Dans les pages suivantes, vous allez créer votre propre template nommé " TemplatePerso ". Alors le dossier de votre nouveau template sera le suivant: "c:\xampplite\htdocs\MonSitePerso\templates\TemplatePerso".

Le Contenu du dossier template Le dossier "c:\xampplite\htdocs\MonSitePerso\Templates\" est le conteneur qui comprend tous les templates disponibles pour votre site web. Pour la mise en oeuvre de votre template nommé "TemplatePerso", créez l'arborescence suivante dans le dossier "\Templates":

- 18 -

"\TemplatePerso\" : dossier contenant tout les éléments du template. "\TemplatePerso\css\" : dossier contenant les fichiers css. "\TemplatePerso\images\" : dossier contenant toutes les images du template. Examinons le contenu de chacun de ces dossiers: Le dossier "\TemplatePerso\" va contenir les fichiers suivants: index.php : le fichier définissant la structure de votre template. templateDetails.xml : le fichier descriptif de votre template (auteur, nom, liste des images, etc) template_thumbnail.png : fichier correspondant à la miniature affichée dans joomla. Cette image miniature, vous pouvez la créer après finalisation (création et amélioration) de votre template. Le dossier "\TemplatePerso\css\" va contenir le fichier : template_css.css : fiche des déclarations de style pour paramétrer l'affichage du contenu dans joomla (police, taille, couleurs, bordure, espacements, positionnement etc..) Le contenu de ces fichiers sera examiné en détail dans les pages qui suivent. Le dernier dossier de l'arborescence "\TemplatePerso\images\" comprend tous les fichiers images propres à votre template. N.B: pour les images utilisées dans votre site quel que soit le template, elles sont placées dans un niveau plus haut, dans le dossier : "c:\xampplite\htdocs\MonSitePerso\images\". C’est là où vous placez les images illustrant vos articles.

Le fichier index.html : Dans tous les dossiers de l’arborescence (racine et sous dossiers du template), un fichier index.html est placé pour sécuriser votre site. Il n’a pas de fonction ni sur le contenu ni sur la présentation de vos pages web. De ce fait, la présence d’un code particulier dedans n'est pas une obligation, cependant on y insère généralement le code suivant : Jusqu'à présent, tous les fichiers de l’arborescence sont vierges. Aucun code n’est inséré dedans sauf pour le fichier de sécurité index.html. A l’aide d’un éditeur de texte, Notepad ++ , par exemple, de votre « Boîte à outils », vous allez préparer, par la suite, les fichiers de votre template..

Le fichier template_thumbnail.png En supposant que votre template final tiendra sur toute la page de votre navigateur pour une résolution de 1024*768 pixels, une image miniature de 25% de cette taille est généralement acceptable. Soit une dimension de 256*192 pixels pour votre template_thumbnail.png. Adoptez, par exemple, une dimension de 250*200 pixels. Vous pouvez créer ce fichier miniature grâce à un outil de dessin tel que Gimp, une fois, la conception de votre template achevée. Une capture d'écran et une réduction de l'image en spécifiant les dimensions dans votre outil de dessin est une tâche facile et rapide.

- 19 -

Le fichier templateDetails.xml Il s’agit d’un fichier comprenant une série de balises xml qu’il faudra adapter au contexte du template nouvellement créé, notamment pour la troisième ligne où il faut placer le nom exacte du template. A l'aide de Notepad++ par exemple, créez un nouveau fichier nommé templateDetails.xml (la lettre "D" en majuscule). Voici le contenu à insérer dedans : TemplatePerso 04/02/2009 Inserer-Votre-Nom GNU/GPL Inserer-Votre-Email http://www.Votre-Site.com 1.0 Inserer-Texte-Descriptif-De-Votre-Template. index.php template_thumbnail.png images/powered_by.png css/template_css.css Modifiez le texte, entre les balises xml ouvrante et fermante, par un texte qui vous correspond le mieux : : pour le nom de votre template : date de création du template : le nom du créateur du template : Information sur le copyright du template. : l’email du créateur. : adresse du site du créateur : version du template : texte descriptif du template : indique la liste des fichiers à installer associés au template. : indique la liste des images associées au template : indique la liste des feuilles de styles. Après modification, sauvegarder le fichier avant de quitter.

- 20 -

Le squelette du fichier index.php A l'aide de Notepad++ par exemple, créez un nouveau fichier nommé index.php et insérer dedans le squelette suivant :