Accueil » Code » Joomla » Apprendre Joomla 1.5 - Installation| Utilisation| Personnalisation

Tuto Joomla | Insérer du contenu dans un tableau

vidéo 21/43
  • Un contenu flash devrait s'afficher ici. Votre navigateur ne comporte pas de plugin flash, ou il ne s'est pas correctement initialisé.

    Vous pouvez télécharger le plugin flash depuis le site d'Adobe à l'adresse suivante : http://get.adobe.com/flashplayer/.

    La suite de cette vidéo est accessible après achat de la formation.
    previous
    summary
    resume
    next
    play
    Insérer du contenu dans un tableau
    00:00 / 18:19
    HD
    fullscreen

Ce cours vidéo fait partie de la formation Apprendre Joomla 1.5 - Installation| Utilisation| Personnalisation

Détails de la formation

Continuons dans cette séquence à enrichir le contenu de cet article. Nous allons intégrer un peu plus bas un élément nouveau dans cet article le fait de vouloir structurer son contenu à l’intérieur d’un tableau. Nous disposons dans la barre d’outils d’un bouton pour ce genre de chose, nous cliquons dessus et nous avons ici un pop up nous permettant d’intégrer les éléments de départ. Nous allons par exemple créer un tableau avec trois colonnes, trois lignes également, des marges extérieures que nous fixons par exemple à trois pixels et nous allons fixer la largeur à 100%. Donc quelle que soit la zone dédiée à notre article, nous aurions un tableau qui occupera toujours 100% de la largeur disponible. Insérons ce tableau, si je vérifie également dans mon code source, j’ai bien un système de balisage qui commence par table avec les lignes et également les cellules de mon tableau. Ce système de tableau est parfois un petit peu capricieux et vous n’avez pas forcement de rafraichissement-écran tel que vous le souhaitiez, ce que je vous conseille de faire c’est assez régulièrement de cliquer sur le bouton appliquer de manière à ce qu’il y a rafraichissement du code et que vous puissiez travailler de manière beaucoup plus flexible à l’intérieur de votre article. Nous allons par exemple vouloir à cet endroit insérer une image, pour cela il va nous falloir réunir ces trois cellules individuelles en une seule, nous allons les sélectionner et l’avantage de JCE c’est que vous bénéficiez seulement des éléments qui sont ici notamment ce qui nous intéresse c’est de pouvoir fusionner les cellules. Vous pouvez si vous le souhaitez aller jusqu’à utiliser à l’image d’un environnement traditionnel, cliquez doit et voyez qu’on y trouve également certaines fonctionnalités et notamment celle qui nous intéresse ici c’est fusionné les cellules. Procédez à l’application que je viens de faire, pour être sure de ne rien perdre, je redescends, je resélectionne et à l’identique ici je vais dédier cette zone à mon article, donc je fusionne et j’irai insérer sur le côté trois boutons. Je vais m’occuper du contenu, je vais chercher dans Word à nouveau le texte qui m’intéresse, je le copie, comme nous l’avions vu dans la séquence précédente nous allons l’intégrer sous la forme d’un texte brut, contrôle v ; open v sur Mac. Je vais réduire de suite l’écart que j’ai au dessus et j’insère mon texte. Je vais également comme tout à l’heure m’occuper de l’enrichissement de ce titre, en allant par exemple remettre le balisage 2 et je vais dans la première cellule de la première colonne, insérer mon image et je vais pour cela utiliser le bouton de la barre d’outils JCE. Il me manque en faite beaucoup de chose, il me manque le répertoire, il me manque également les images qui vont alimenter mon article. Je vais pouvoir intégrer tout cela à l’intérieur justement de cet outil que me propose JCE. J’ai pour cela, sur le côté, le bouton nouveau dossier que je vais appeler par exemple Photoshop, le répertoire étant créé je me rends dedans et juste à côté vous avez un bouton qui vous permet d’envoyer une ou plusieurs images de votre disque dur vers le site distant ou vers le site local ici. Dans notre exemple je clic sur ajouter, je vais aller chercher cette image également les trois autres, donc je clic sur la première et majuscule clic sur la dernière il ne veut pas, je vais les intégrer à la main donc j’ouvre la première image et la supposition en attente ici, je renouvelle ajouter choix 2, choix 3 et la troisième image. Ceci étant fait, je clic sur envoyer ; je vais décaler légèrement cette petite fenêtre pour vous montrer qu’au fur et à mesure les images vont apparaître, j’envoie. J’ai la validation de cet envoi, je vois également que cette image apparaît maintenant dans mon répertoire, je peux maintenant cliquer sur fermier et bénéficier des images. Je vais insérer par exemple cette première image, insérer, je vais enregistrer et intégrer ensuite dans la première cellule. Ma première image, chois 1 donc je peux vérifier aussi avec le système d’aperçue sur le côté si j’ai bien fait le bon choix, j’insère mon image et je vais tour à tour faire de même pour les autres cellules. Je peux à tout moment vouloir faire des choix différents, notamment par rapport à la taille de l’image qui se trouve sur le côté gauche, en sélectionnant cette image, je vais pouvoir recliquer sur le bouton qui m’a permis de l’insérer, je retrouve bien entendu les paramètres de cette image que je vais compléter ici, en allant par exemple réduire un petit peu sa taille, toujours de manière proportionnelle et s’il refuse de le faire vous pouvez resélectionner cette image et remettre à nouveau cette proportion. Voilà comme ceci, je mets à jour et je vais tester ce que donne ce rendu côté site, j’applique. Une nouvelle fois je retourne sur le site, je vais actualiser ma page et je m’aperçois que mon contenu est structuré tel que je l’avais demandé, la largeur des cellules s’est bien entendu adaptée au contenu, mais on pourrait aller jusqu’à personnaliser cette partie-là. Dernière petite chose que je peux faire ici c’est faire en sorte que le texte ne soit pas centré comme ceci puisque vous voyez les images sur le côté droit sont très importantes en taille donc ça génère une hauteur de tableau assez importante, ce que je souhaiterai c’est de faire en sorte que mon texte soit plutôt aligné sur le haut de ce tableau. Nous allons revenir sur notre article, je clic dans la cellule de mon choix et je vais pouvoir bénéficier d’un petit bouton ici, propriété de la cellule, où j’aurai notamment à la fois le type d’alignement qui me sera proposé, vertical et horizontal, donc je vais plutôt faire le choix d’un alignement vertical vers le haut, je clic sur mettre à jour, mon texte se positionne bien entendu vers le haut et je vais faire de même dans la cellule d’à côté. Si ce réglage est un réglage systématique, vous pouvez également choisir ici de le faire, soit simplement en modifiant la cellule active, celle-ci, soit de modifier toutes les cellules de la ligne, donc la ligne entière ou alors de modifier toutes les cellules du tableau. Donc si je fais ce choix-là, l’ensemble des cellules sera avec un type d’alignement vertical haut. Je peux vérifier à nouveau dans mon code source et voyez ici que nous avons un système ou par exemple les images apparaissent avec leurs tailles, je retrouve également les réglages associés à mon tableau c'est-à-dire la largeur égale à 100%, bordure zéro et également une marge extérieure de mes cellules et j’ai également le système d’alignement v à ligne en top donc l’alignement vertical en haut, tout cela est conforme. Il ne me reste à vérifier une dernière fois côté site que tout cela a fonctionné, je retourne sur mon site, j’actualise et j’ai bien ici un positionnement du texte plutôt vers le haut. Nous allons retourner dans l’article, sauver cet article une dernière fois et quitter cet article. Nous allons créer un nouvel article en mettant ce titre par exemple, toujours la catégorie nos activités formation multimédia et nous allons bâtir un article de type phrase d’introduction, ensuite utiliser le bouton lire la suite pour compléter la lecture de cet article. Nous allons pour cela aller chercher le texte d’introduction, nous l’intégrons en tant que texte brut et nous allons par exemple faire la coupure à ce niveau-là, donc je vais rajouter trois petits points à mon explication et je vais intégrer avec le bouton lire la suite cette fameuse coupure dans l’article. Vous voyez qu’ici il a généré un trait de séparation. Je vais maintenant tester cela sur mon site donc je sauvegarde, je fais mon lien vers l’article, dans le groupe MainMenu, je vais comme tout à l’heure, faire ce lien. Si vous aviez un lien un petit peu équivalent à celui que vous vouliez réaliser, vous pourriez éventuellement utiliser la fonction « copier » qui vous permet de reprendre, en faite, les caractéristiques du lien que vous venez de générer. Je le sélectionne, je vais pouvoir choisir le groupe de menu dans lequel je l’intègre, alors il me reprend bien entendu le même titre. Pour pouvoir les distinguer l’un de l’autre, vous allez retrouver ici un numéro d’identifiant qui est fixé à chaque fois, qui est un système de chrono sur les articles, les sections, les liens, etc.… Et ce qui les distingue c’est le fait que plus les liens ont l’occurrence ici seront récent plus le numéro sera important. Je sais que l’original se trouve ici et que la copie à cet endroit là. Donc je vais tout simplement changer ce titre, comme l’alias également n’est plus frais, je vais demander à Joomla de me le régénérer ; il s’agit toujours ici d’un lien vers un article donc cela n’a pas changé par contre dans la sélection, je vais pouvoir aller chercher Photoshop CS4 découverte qui est l’article que je viens de créer. Je sauve, je vérifie bien que mon lien est publié et je vais côté site vérifier qu’il s’agit bien de l’article que je viens de créer. On constate ici que nous n’avons pas l’effet escompté même en actualisant, cela ne change rien, nous allons pour cela vérifier s’il s’agit bien ici du lire la suite, celui qui apparaît si je positionne dans code source je m’aperçois qu’il y a bien un balisage de type système readmore, donc on va annuler tout cela et on va changer tout simplement ou tenter de changer le lien ou le type de lien donc pour cela nous allons aller dans MainMenu et ce lien actuellement présent sur le site nous allons le modifier, nous allons changer son type alors qu’il pointe actuellement sur un article, nous allons demander à ce qu’il pointe vers une catégorie d’article sous la forme de blog, nous allons sélectionner la catégorie, il s’agit ici des activités de formation multimédia et nous allons par exemple présenter les choses sous forme d’une seule colonne. Je clic sur « sauver », j’actualise. J’ai bien ici l’ensemble des articles de cette section, formations multimédias, j’ai bien également mon « lire la suite », je peux utiliser ce lien et consulter également le reste de l’article ici, je peux faire précédent. Si je souhaite modifier et personnaliser le titre qui est à cet endroit-là, je peux le faire via l’article, quand je vais dans le menu contenu, gestion des articles, je réouvre l’article concerné et c’est un des paramètres qui figure dans un des paramètres avancés, j’ouvre cet onglet accordéon je vais dans texte alternatif ou lire la suite, je vais par exemple mettre à la place de lire la suite « continuer … », j’applique et je teste côté site, la modification a bien été effectuée. Je vais intégrer des éléments supplémentaires dans mon article, je vais pour cela faire un saut de paragraphe, retourner dans mon traitement de texte et je vais par exemple intégrer ce texte dans une première colonne d’un tableau et ce texte dans une autre colonne, en essayant peut être d’équilibrer un petit peu, je vais revenir sur mon article, faire une insertion d’un tableau, donc rapidement deux colonnes et une seule ligne, toujours une largeur de 100% et je vais intégrer dans la première partie cette première zone de texte, « copier », je colle en texte brut et je vais intégrer simplement ce texte jusqu’ici à nouveau « copier » je me positionne dans la bonne cellule et j’intègre mon texte. Je peux éventuellement demander, comme nous l’avons vu tout à l’heure, dans les propriétés de la cellule un alignement de types vertical haut et je vais le faire cette fois-ci à nouveau pour l’intégralité dans mon tableau. Je regarde côté site ce que cela donne, ce texte que je viens d’insérer bien entendu figure dans la partie « lire la suite » et j’ai bien ici intégrer mon tableau, je peux éventuellement mettre en valeur les sous-éléments chaque fois des chapitres qui sont mentionnés, par exemple ici l’interface-on va les rajouter des listes à puce ou des listes numérotées. Pour cela je retourne dans « mon article », je sélectionne la zone concernée. Ces listes à puce et ces listes numérotées figurent à cet endroit-ci, donc vous avez « listes à puce », « listes numérotées ». Je vais intégrer par exemple les listes à puce, j’applique et je constate ici que la lecture de mon tableau est petite peu plus facile qu’elle ne l’était, tout à l’heure en comparaison d’ailleurs des autres cellules. Dernière petite chose sur ce tableau, nous allons intégrer les couleurs de fond à ce tableau donc pour cela, en plus de le faire de manière séparée pour la première et la deuxième cellule, sélectionnons la première cellule et nous allons allez dans la sélection de cette cellule ; dans la partie avancée vous allez trouver, grâce à l’éditeur JCE, un certain nombre d’éléments vous facilitant justement cette mise en forme et nous allons par exemple ici choisir, grâce au nuancier disponible, une couleur de fond qui fait apparaître soit ce nuancier soit nuancier web soit nuancier également avec des couleurs nommées, voyez que les noms figurent en bas et auriez éventuellement des couleurs associés à vos templates par exemple. Je vais plutôt opter pour ce vert très léger, le code hexadécimal apparaît dans cette zone, ce qui vous permet de voir précisément si cela correspond à votre carte graphique, je mets à jour et j’intègre également, propriété avancée, je clic à nouveau sur ce nuancier, template et je vais aller chercher l’autre couleur pastel, toujours le code hexadécimal, je mets à jour. Je regarde côté site, et voici.

Cette formation Joomla est également disponible dans les packs suivants

0 Notes et avis
Note moyenne:
5 5 0 1
1
Donnez votre avis sur la formation Apprendre Joomla 1.5 - Installation| Utilisation| Personnalisation !
Vous devez acheter cette formation pour écrire des commentaires