L'essentiel de Dreamweaver CC 2017

Créer des listes

Testez gratuitement nos 1302 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Le contenu étant une liste d'éléments, Dreamweaver vous permet d'ajouter, de modifier, d'imbriquer et de retirer des listes. Vous verrez que cela concerne aussi bien les listes ordonnées et non-ordonnées.
05:26

Transcription

Une autre utilisation fréquente d'élément de structure au sein de nos pages web, ce sont les éléments de liste que celle-ci soit non ordonnée ou qu'elle soit ordonnée. Donc Andy Clark disait que tout élément est une liste. C'est vrai qu'un paragraphe, c'est une liste de phrase. Une phrase cc'est une liste de mots. Les mots sont une liste de lettres. Tout peut être listé. Donc on verra que dans Dreamweaver, on a cet élément qui est récurrent et cette iconographie qui est très utile et très souple à utiliser. Regardez, ici j'ai toute une série d'éléments non ordonnés. On les voit manifester par défaut par des petites puces comme ça sur le devant de la liste et on les voit dans le code par des éléments li qui sont des listes item et des éléments ul qui sont des unordoned lists. Il est très facile de les transformer en élément de liste numérotée, ordonnée. C'est-à-dire que si je clique sur cette icône maintenant, on voit bien que j'ai remplacé simplement la balise par 1 qui n'est plus du ul mais du ol pour ordoned list. Là maintenant, ça a été remplacé par des numéros. Bien entendu si je reviens en arrière, je suis sur un élément de liste. Ici si je décoche cet élément de liste, on transforme tous ces éléments en des paragraphes. Alors, une erreur qui est fréquemment rencontrée, c'est que si au lieu d'avoir des paragraphes englobant je possède que les paragraphes retour chariot, on va rapidement en fabriquer un. Vous allez voir ici si je met un texte un peu long, et que ce texte un peu long je l'ai remplacé par un attribut BR c'est-à-dire back return, retour chariot, pour cela il suffit d'appuyer sur la touche shift et faire un retour chariot. Là vous voyez que j'ai un texte un peu long mais qu'on a pas le même espace entre 2 paragraphes qu'entre 2 lignes back return ici. Mais si je sélectionne cet élément et que je le transforme en élément de liste en fait j'ai qu'un élément de liste puisque j'ai un back return au milieu j'ai un retour chariot. Donc une erreur fréquemment rencontrée, c'est d'essayer de faire des listes avec des back return et non pas avec des retours chariot. Alors ça arrive aussi fréquemment si par exemple vous tapez le texte, en disant des poires, retour, des pommes, et des scoubidous oui, on pouvait pas la louper. Ici j'ai fait ça dans la partie code. En fait dans la partie rendu, j'ai qu'une seule ligne. Si je viens ici et que je dis voilà je veux en faire un menu, je passe sur mon élément de liste, je n'en ai qu'un seul puisque tout ça est vu comme étant qu'une seule et unique. Maintenant si je reviens sur mes éléments de paragraphe, qui peuvent être transofrmés sous forme de liste individuelle, dès l'instant où je vais utiliser cette icône, je fabrique des listes. Cette icône, une liste ordonnée et maintenant je vais pouvoir les imbriquer les unes dans les autres. Donc si je reviens ici sur de l'unordened, ici je suis bien unordoned, si je passe... le plus simple c'est de passer dans la partie visuelle, si je sélectionne ces 3 éléments et que j'appuie sur la tocuhe tabulation, ici je vais... Alors ça ne marche pas en mode en direct, je suis désolé, il faut vraiment passer en mode création à ce niveau-là. Si je suis sur ces 3 éléments sélectionnés j'appuie sur la touche tabulation. Vous voyez que je viens d'indenter ma liste ici en une seconde liste imbriquée et je vais pouvoir comme ça imbriquer autant d'élément que je le voudrai. Donc si je prends ces 2 éléments et je rajoute une tabulation, j'imbrique une fois de plus ma liste. Si je prends ces 3 éléments et que je fais un shift, tabulation comme dans word d'ailleurs, ou comme dans tout éditeur de texte qui se respecte, je vais désindenter ma liste, je vais donc désimbriquer une profondeur de liste. Alors faites bien attention à une erreur flagrante que l'on fait souvent, c'est cette liste ici. Structurellement, c'est une sous-lliste de lui. Donc il doit être imbriqué à l'intérieur de ce li, d'accord ? Souvent ce qu'on voit c'est ça. Souvent ça arrive on imbrique en sortie. visuellement cette liste se trouve bien à l'intérieur de cette liste. Mais pas à l'intérieur de cet élément de liste. Donc visuellement ça ne change pas. Mais structurellement, le sens est profond. C'est-à-dire que cet ul n'a strictement rien à voir avec ce li. Il se trouve être un sibling, en français un frère, un partenaire de niveau de ce li mais il n'est pas un enfant de ce li. Il est un enfant de cet ul. Donc faites bien attention, Dreamweaver respecte bien cela, de toujours bien garder les léments ul qui doivent être imbriqués dans l'intérieur de l'élément li. Il est possible également de prendre cet élément lu, ul, et de le transofrmer en élément ol. Vous pourrez avoir les partenaires qui s'imbriquent à ce niveau-là. Donc les éléments de liste peuvent être intégralement imbriqués les uns dans les autres. Vous pouvez les retirer ou les retraits négatifs, ici vous voyez que le label a changé au niveau de l'icône on est plus dans des bloc quote et retrait de bloc quote, on va désimbriquer les niveaux. Donc si j'utilise cet élément de désimbrication vous voyez que je sors de l'élément. Donc vous utilisez soit shift, tab et tabulation, soit ces icônes de retrait et d'ajout de retrait que vous pouvez utiliser pour pouvoir imbriquer, structurer et donner des niveaux de profondeur à vos listes.

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 !