L'essentiel de Dreamweaver CC 2017

Aller plus loin avec les tableaux

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Dreamweaver ne permet pas de gérer complètement les tableaux avec une interface visuelle. Malgré tout, vous disposez d'un grand nombre d'outils et de possibilités pour affiner et définir la structure de vos tableaux.
06:40

Transcription

Une fois la structure de base mise en place, on va pouvoir aller plus loin grâce aux outils d'aide que Dreamweaver va nous apporter. Donc ici, dans la partie inspecteur de propriétés, dès qu'on sélectionne une cellule on s'aperçoit qu'on a tout un certain nombre d'attribut, de balise de ositionnement qu'il est parfosi préférable de ne pas utiliser eet plutôt reléguer au CSS. Cependant, on en a quelques-uns qui sont très intéressants, regardez. Ici j'ai une balise d'en-tête, et cette balise d'en-tête, ici va être utile puisqu'elle qualifie la colonne. Celle-ci va être utile, elle a un attribut row dans le scope, elle va identifer la rangée. Mais celle-ci peut parfois nuire donc ici j'ai une balise de type en-tête. Si simplement je la décoche vous voyez, elle est devenue une balise td classique. Bien entendu, on va pouvoir sélectionner plusieurs éléments comme ça. Alors je vais passer volontairment en mode création, pour voir tous ces éléments ici de manière différente. Vous voyez quand je les ai sélectionnés je vais pouvoir les décocher, ils ne sont plus en-tête et je les coche ils sont en-tête. Donc on peut sélectionner plus d'eléments. Quand je suis ici dans la partie création, je survole la partie haute j'ai une flèche qui me permet de sélectionner directement toute la colonne. Si je viens sur la partie droite ici, une flèche qui me permet de sélectionner toute la rangée donc c'est très facile à sélectionner. Si je clique dans un élément, je vais pouvoir saisir du contenu et avec la touche tabulation je vais passer sur l'élément voisin du contenu. Vous avez vu que les largeurs bougent, vont s'adapter donc bienvenue dans le monde merveilleux des tableaux. Et ça on va pouvoir le gérer par des CSS sans souci et le contrôler. Alors venons maintenant dans la partie en direct ici. Dans la partie en direct, je ne peux pas sélectionner comme on a vu tout à l'heure les éléments. Pour ça il va falloir que je sélectionne dans un premier temps la balise table et vous avez vu qu'en sélectionnant la balise table à ce moment-là, le cadre a bien changé. Et ici, je vais pouvoir sélectionner déjà plusieurs éléments comme je l'ai montré tout à l'heure en moe création. Je vais pouvoir double cliquer dans un élément pour pouvoir modifier son contenu. Mais uniquement son contenu structurel pas son contenu de cellule, vous voyez l'intégralité ici a été sélectionnée. Pour pouvoir modifier le contenu de la cellule, il va falloir que je désélectionne mon tableau et que je double clique dans la cellule ici pour passer en mode édition. Là je vais pouvoir changer les données. Par contre, vous avez vu que quand vous double cliquez vous pouvez avoir une balise strong, une balise EM, et ici une balise de chainage, lien, une ancre de données qu'on verra par la suite. Revenons sur notre tableau ici donc. En séléctionnant le tableau, si maintenant je m'approche de la colonne vous voyez je peux séléctionner toute la colonne. Si je m'approche de la rangée, également, je peux séléctionner toute la rangée. Bien sûr uniquement, en mode séléction de tableau. Si par contre, je sélectionne deux cellules contigues comme ça, et que je viens dans la partie basse de l'inspecteur de propriétés, je vais pouvoir unifier ces deux cellules ici et vous voyez que là maintenant, j'en ai plus qu'une. Ce qui marche de manière verticale, marche également de manière horizontale. Donc volontairement, je vais prendre dans le tfoot ici l'intégralité des 3 éléments et si j'appuie sur le raccourci clavier M il ne se passe rien comme par le passé on avait la possibilité de marier les cellules. donc ici vous allez devoir passer par cette icône-là. Vous avez l'ensemble maintenant du th vient d'avoir un colspan 3, c'est-à-dire une étendue de colonnes de 3. Lui ici c'est un rowspan, vous voyez ici étendue de 2. Bien entendu on peut faire des colspan et des rowspan sur des cellules qui seraient contigues comme ça et là on va avoir à la fois un colspan, et à la fois un rowspan pour dire que les deux sont étendus. Une fois que tout ça a été réunifié, si on veut les désunifier, on va pouvoir lui demander de redispatcher tout ça en 3 colonnes ici. Donc on a choisi le mode colonne et là je vais repartir sur 3 colonnes. Quand on prend cet élément-là, qu'on le sépare, on va pouvoir lui dire de le séparer par exemple en 2 colonnes. Donc là on va sortir du rowspan ça va se passer donc c'est assez facile de restructurer les éléments. Qaund vous avez l'élément table qui est séléctionné, vous pouvez vous approcher de n'importe quelle rangée et restructurer l'élément comme vous voulez. Si vous avez quelques soucis de le faire au niveau du mode en direct, passez en mode création. Vous allez avoir des éléments beaucoup plus souples à manipuler comme ça qui vont vous permettre de pouvoir redéfinir. Par contre, vous avez des outils d'aide qui vont vous permettre de pouvoir sélectionner la colonne, effacer la largeur de colonne, insérer une colonne à gauche, insérer une colonne à droite par ces petits outils ici que vous avez sur le pasé. Par contre, faites attention dès l'instant où vous allez rentrer des largeurs ici ou des hauteurs qui vont être placées, ça va venir en contrarieté avec les feuilles de style CSS. Donc vous pouvez demander d'effacer la largeur de colonne et vous voyez ici vous pouvez demander d'effacer et là vous enlevez tous les attributs qui vont être des attributs d'élément de largeur Par contre, sachez que dès que vous allez jouer avec ces éléments-là, forcément vous allez prendre la main de dessus. Dernier élément que Dreamweaver ne gère pas et ne propose pas d'un point de vue visuel, c'est ici juste au dessus, en dessous de caption, peu importe, c'est à l'intérieur de table et bien en amont de thead. Vous avez la possibilité d'utiliser ce qu'on appelle des balises colgroup. Vous pouvez l'écrire directement en mode colgroup ici et vous voyez si vous prenez cet élément, vous allez regrouper des colonnes. donc si vous prenez colgroup, voilà, vous pouvez avoir ici slash colgroup qui va être un regroupement de colonnes. Vous pouvez définir à l'intérieur de ce colgroup autant de balises col que vous souhaitez. Donc là je viens de définir 3 balises col. Donc ces col ici, vont pouvoir être utilisés pour dire que la largeur de la colonne dont la première colonne width poura faire, par exemple, 50%. Ici je vais copier ces 2 éléments où je vais placer une autre possibilité de Dreamweaver, je vais placer2 curseurs. Avec la touche Ctrl, j'ai pu placer mon curseur en haut et en bas, et là je vais dire que le width est égal à 25%. Je ferme. Maintenant, si je passe en mode de rendu en direct, vous voyez bien qu'ici je fais 50% et deux fois 25% ici pour régler mes largeurs. Voilà donc ces éléments-là ne sont pas pris en compte par Dreamweaver, par une interface graphique mais Dreamweaver les gère très bien depuis son interface de rendu de données. Et je vous invite donc à, quand vous travaillez avec des tableaux, alterner entre le code, le mode de rendu et le mode en création.

L'essentiel de Dreamweaver CC 2017

Prenez en main l’environnement de travail de Dreamweaver. Créez des documents, utilisez les CSS, gérez les liens hypertexte, les fichiers multimédia, les formulaires, etc.

7h28 (98 vidéos)
Aucun commentaire n´est disponible actuellement
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :30 janv. 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !