Atelier de conception de tutoriels en ligne

Joomla!fr Contact Annuaire Extensions Tutoriels Home

Home Tutoriels Templates Joomla! : : Concevoir son template 02. Ebauche du projet 2.2 Choix de la taille

Home Actualités ! Joomla!draft Road Map ! [Work in progress] Tutoriels Templates Joomla! : : Concevoir son template : : Les positions de publication : : Améliorer son template : : Concevoir sa feuille de styles : : Les styles CSS de Joomla! : : Index des styles Joomla! Tutoriels Divers en vrac ! Trucs & Astuces ! Dossiers ! Ressources sur le WEB ! Annuaire ! Outils WEB ! Chercher ? Sommaire du tutoriel :<br />Concevoir son template 00. Avant de commencer 02. Ebauche du projet 2.2 Choix de la taille 2.3 Choix des couleurs 2.4 Choix des polices 2.5 Choix des illustrations 03. Contenu d'un template 04. Les fichiers index.html 05. La feuille de style CSS 06. Le contenu du dossier images 07. Le fichier template_thumbnail.png 08. Le fichier templateDetails.xml 09. Le fichier index.php 10. Le Header 11. Le corps du site 12. Le Footer 13. La zone de débogage 14. Définir les styles CSS Information pratique Dans le tutoriel : Concevoir son template le code et la numérotation des lignes sont vérifiés jusqu'à la page : 14.2 incluse.

2.2 Choix de la taille Concevoir son template - 02. Ebauche du projet Écrit par Jean Louis Servais    08-02-2006 Joomla! 1.0.x 15/04/206 : Retouche de la présentation Ce chapitre à donné lieu à discusion par plusieurs relecteurs. Ceci nécessite de notre part une réflexion sur une amélioration éventuelle de cette page. Afin de ne pas retarder la mise en ligne de ce tutoriel, nous avons placé en fin de page cette discussion pour que vous puissez en bénéficier. La largeur d'un template est un sujet de discussion qui alimente périodiquement les forums des créateurs de site WEB. La problématique est que tous les visiteurs n'ont pas la même résolution d'écran et que cela contraint d'utiliser l'ascenseur horizontal lorsque le template a une largeur supérieure à celle de la résolution. La solution consistant à définir une largeur en % est une alternative à ce problème. Cependant, pour certains concepteurs, elle ne permet pas une parfaite maîtrise de la mise en page. Vous comprendrez aisément que si le template est élastique dans le sens horizontal alors le contenu va suivre verticalement. De plus, une largeur de 100 % engendre des débordements du template sur certains navigateurs compte tenu qu'ils ne gèrent pas tous les attributs CSS de la même manière. Par exemple : suivant le navigateur utilisé, la valeur d'une propriété border est incluse ou exclue dans la largeur de son élément. Nous n'allons pas dans ce tutoriel entrer dans ce vaste débat. Par conséquent, nous vous proposons la démarche suivante : Nous réalisons, dans un premier temps, un template de largeur fixe de 760 pixels. Ce qui correspond à 95 % de la largeur d'un écran de résolution 800x600. Une fois ce template terminé, nous consacrerons un chapitre à la modification de cette largeur. Ainsi, vous saurez comment faire pour adapter un template à la dimension de votre choix et transformer un template à largeur fixe en template à largeur variable. COMMENTAIRES ET SUGGESTIONS DES RELECTEURS Afin de pas perdre de temps à demander les autorisations de citation, nous avons remplacé les pseudos des relecteurs par la dénomination Relecteur suivi d'un numéro d'ordre. Relecteur 1 : Après avoir lu toutes ces pages... mon seul commentaire pour l'instant ira sur le paragraphe relatif aux largeurs en "%", et le suivant. Ce n'est pas clair à la première lecture, et il existe d'autres méthodes pour faire proprement des templates redimensionnables (sans le moindre "%"). D'autre part la problématique des "border" (merci IE) peut aussi se poser avec des templates fixes. Vu que le tutorial ne tranche pas, et propose 2 réalisation... je pense que les 2 paragraphes n'apportent rien. Avis perso bien entendu ;) Sinon le chapitre "Ebauche du projet" a globalement le mérite de bien poser le pb avant de se retrousser les manches :) Relecteur 2 : Pour ma part cette partie du chapitre me parait suffisamment claire et a le mérite d'attirer l'attention sur ce problème sans entrer trop dans le détail. Peut-être supprimer ". Par exemple : suivant le navigateur utilisé, la valeur d'une propriété border est incluse ou exclue dans la largeur de son élément." qui n'est pas indispensable pour la compréhension et modifier : "compte tenu qu'ils ne gèrent.." par "compte tenu du fait qu'ils ne gèrent..." Relecteur 3 : Pour avoir essayer de modifier un template fixe en largeur variable, je pense qu'il faudrait une petite mise en garde : une toute petite remarque sur le fait que oui on peut passer quasi tout template fixe en largeur variable mais que cela s'accompagne en général d'une perte au niveau graphique si les graphiques ne s'y prettent pas (par exemple, des images de largeur fixe utilisées pour l'entête du site, ou encore des images du footer qui sont en longueur et qu'on ne peut étendre au maximum sans dénaturer l'imag...) Bref, a tord ou a raison, je pense qu'il faudrait peut être mieux inciter le lecteur à choisir son camp dès le départ Relecteur 4 : Cette approche me semble très claire, on démarre souvent avec un template fixe pour ensuite se soucier du variable. Cela pourra être complété par des chapitres plus pointus. Bon, c'est mon avis, alors laissons l'auteur décider :-) Relecteur 5 : Je pense aussi que cette partie a le mérite d'attirer l'attention sur le problème. En effet, 15 pages ne suffiraient pas à mettre d'accord les partisans des différentes methodes :grin Donc je trouve que c'est bien comme ça. Relecteur 6 : pour ma part, il est important de connaitre la demarche à suivre pour faire des template à largeur variable. J'ai eu beaucoup de mal à en trouver un qui me convienne, l'aspect sur differentes resolutions d'ecran est mieux rendu. Relecteur 7 : Perso je trouve cela clair. Je pense que commencer doucement est la meilleur solution pour ne pas nous embrouiller des le départ. Une petite définition peut être de ce que c'est un "ascenseur horizontal" car c'est pas forcément évident pour tous...... :grin Relecteur 8 : Je suis pour ne pas courrir deux lièvres à la fois. Comme tu as répondu Relecteur_5, je pense qu'il vaut mieu commencer tout d'abord par un template fixe, puis passer dans un second temps aux template à largeur variable. Je n'ai pas encore d'avis sur la question, un tempate fixe est la garantie d'avoir une mise en page unique quelque soit la résolution d'écran, un variable est plus agréable à l'oeil du fait que tout l'écran est utilisé. Cependant un template variable entrainant une remise en page du texte, on se retrouve, comme chez moi, a avoir 2-3 lignes de texte étirées sur tout l'écran ! (et oui j'ai un 1920x1600) Donc va pour le largeur fixe dans un premier temps. Relecteur 9 : Remarque totalement intéressée : je suis une inconditionnelle de la largeur variable (j'ai un portable 14" et un 17" TFT au boulot :) => Comment qu'on fait y donc sans des % ????  Participez à cette page ! Dernière mise à jour : ( 11-08-2008 )   Suivant > [ Retour ]

Joomla!fr Extensions Contact Annuaires Tutoriels Home

Cette création est mise à disposition sous un contrat Creative Commons. (c) Conception du site par Jean Louis Servais - joomladraft 2006 Site propulsé par le CMS Open Source Joomla!