Premiers pas - Les listes
En fin de cet article, un didacticiel est à votre disposition, pour mieux visualiser les procédures, selon l'avancée des travaux de KL, il sera mis à jour en fonction de ma disponibilité.
Premiers pas - Les listes
Les listes à puces
Par défaut selon le paramétrage dans la feuille de style :
- Option 1
- Option 2
- Option 3
Choisir dans le liste déroulante une puce différente "Cercle" :
- Option 1
- Option 2
- Option 3
Si vous souhaitez changer de puce, cliquez dans votre liste, puis choisissez dans la liste des puces celle que vous voulez.
Si vous voulez changer de type, mettre une liste alphabétique, le curseur étant dans la liste, en bas du composeur dans la barre "Chemin" vous devez voir la balise "ul", cliquez dessus pour sélectionner la liste et ensuite choisissez dans la deuxième liste "Lettres minuscules"
- Option 1
- Option 2
- Option 3
Ce qui suit est déterminant, la différence de l'action des touches pressées, avec ENTREE ou maj+ENTREE.
- Option 1
- .
- .
- Option 2
- .
- .
- Option 3
Les listes ordonnées
Par défaut les listes sont numériques :
- Première option
- Deuxième option
- Troisième option
Choisir dans la liste déroulante une liste aphabétique "minuscules" :
- Option 1
- Option 2
- Option 3
Pour changer de gente de liste, cliquez dans votre liste, puis choisir dans la liste.
Les listes composées
Ce sont des listes à plusieurs niveaux avec utilisation des 2 possibilités.
Liste à puces avec une sous liste numérique :
- Première liste
- Elément 1
- Elément 2
- Elément 3
- Deuxième liste
- Elément 1
- Elément 2
- Elément 3
- Troisième liste(puce différente si utile)
- Elément 1
- Elément 2
- Elément 3
Chaque sous liste est différente en plaçant le curseur dans une liste et en choisissant dans la liste déroulante.
Les listes imbriquées
Pour faire des listes imbriquées
- Première liste
- Elément 1
- Elément 2
- Elément 3
- Deuxième liste
- Elément 1
- Elément 2
- Elément 3
- Troisième liste
- Elément 1
- Elément 2
- Elément 3
- Quatrième liste
- Elément 1
- Objet 1
- Sujet 1
- Sujet 2
- Objet 2
- Cas A
- Cas B
- Cas C
- Objet 3
- Objet 1
- Elément 2
- .
- .
- .
- .
- .
- .
- Elément 3
- .
- .
- .
- .
- .
- .
Dans les listes, les 3 règles suivantes sont à respectées :
- La touche ENTREE pressée une fois pour la création d'un élément de liste.
Deux pressions sur ENTREE fin de liste. - Pour rester dans un élément et aller à la ligne, il faut presser simultanément les touches maj+ENTREE.
C'est également de cette façon que l'on peut imbriquer une liste secondaire. - En principe il faut pour imbriquer des listes, mettre dans une liste à puces, une liste ordonnée ou dans une liste ordonnée mettre une liste à puces.
Mais si vous souhaiter mettre que des listes à puces, l'astuce est de mettre dans le premier élément en numérique, pour créer l'indentation puis passer en liste à puces et curieusement tout est possible.
Si un élément est vide vous ne pouvez pas ajouter un autre élément, il faut mettre un point ou un astérisque.
Les listes sont très utiles:
- Pour présenter vos articles, organiser vos pages avec des sections, des sous-sections, etc..
- Pour classer vos textes, pour que ce soit bien clair pour les internautes.
- Pour créer menus ou sommaire
Exemple très simple ce que je viens d'écrire présenté en utilisant une liste...
Les listes sont très utiles:
- Pour présenter vos articles, organiser vos pages avec des sections, des sous-sections, etc...
- Intercaler un élément en pressant la touche ENTREE en fin d'un élément.
- Pour classer vos textes, pour que ce soit bien clair pour les internautes.
- Pour créer rmenus et sommaires.
- Autre élément créé en pressant ENTREE en fin de l'élément précédent.
Comme vous le voyez chaque élément est indépendant, vous pouvez leur attribuer à chacun un style, ce n'est pas le but mais c'est possible. Le curseur positionné dans l'élément, un clic sur la balise "li" en bas dans la barre "Chemin", l'élément est sélectionné, vous pouvez cliquez sur les boutons pour appliquer le style.
Vous pouvez modifier le style de la liste, le curseur dans la liste, un clic sur la balise "ul" ou "ol" dans la barre "Chemin" en bas, la liste entière est sélectionnée, choisissez dans l'une des listes de style, à puces ou ordonnées.
Vous avez certainement remarqué que le premier élément de la liste à puces est par défaut un disque, cependant si vous avez mis dans votre feuille de style une puce différente ou rien (none) pour les listes de la partie "Contenu", c'est cette puce qui sera prise en compte dans les navigateurs. En effet le paramètrage dans la feuille de style n'est pas pris en compte dans le composeur(comme dans le précédent composeur).
Je vous conseille donc de mettre "none" aux attributs des listes dans le CSS soit :
list-style-type : none;
Cette possibilité n'est pas négligeable, ça permet de fait une indentation, dans certains articles les puces ou les numéros ne sont pas très esthétiques.
Pour l'exemple je reprends la même liste :
Les listes sont très utiles:
- Pour présenter vos articles, organiser vos pages avec des sections, des sous-sections, etc..
- Elément intercalé
- Pour classer vos textes, pour que ce soit bien clair pour les internautes.
- Elément rajouté
Actuellemnt dans mon CSS les listes sont sans puce, ici cette liste est avec la puce paramétrée par défaut par le système soit le disque, je vais donc valider cet article et le visualiser dans mon navigateur FF3.6.
Comme les listes à puces dans mon CSS,partie "Contenu", sont paramétrées "none"
#contenu ul
{
list-style-type : none;
margin-left : 25px;
}
c'est à dire sans puce, les "disques", puce par défaut, dans le menu du composeur, comme prévu les disques ne s'affichent pas dans mon navigateur FF3.6, et il en est de même sous IE8, Chrome et Safari.
Ce qui permet de présenter du texte avec des indentations et sans puce. Si vous regardez le texte qui suit dans votre navigateur normalement tous les disques ne s'affichent pas. Ce système est bien utile comme la touche de tabulation est utilisée pour une autre fonction. Bien sûr vous pouvez pour indenter du texte vous servir de la barre d'espace mais l'alignement n'est pas toujours très régulier et ça engendre du code supplémentaire. Mais la solution la plus simple serait de rentrer en HTML pour mettre une marge intérieure au paragraphe. Ce composeur en mode "Avancé" donne accès au HTML et en plus 2 touches supplémentaires permettent de créer des tabulations, j'expliquerai dans un autre article.
Exemple de création de sections dans un article...
Je suis désolé de vous imposer ces textes en latin, mais c'est la solution la plus rapide et la plus simple, pour tester une présentation de texte
Première section
- Section 1 - 1
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
- Section 1 - 2
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
- Section 1 - 3
Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
Deuxième section
- Section 2 - 1
- Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
- Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
- Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
- Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
- Section 2 - 2
- Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
- Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
- Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
- Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
- Section 2 - 3
- Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
- Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
- Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
- Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
Troisième section
- Section 3 - 1
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
- Section 3 - 2
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
- Section 3 - 3
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
Super ce texte mais comment le réaliser ?
Réaliser un texte indenté
Première section
- Section 1 - 1
Dans la présentation de cette section uniquement un titre, un sous-titre et le texte qui s'aligne sur la gauche dans un paragraphe. Pour réaliser ça, il faut, positionner le curseur à la fin du sous-titre et presser 2 fois ENTREE.
Vous pouvez écrire votre texte normalement, créer des paragraphes, faire des sauts de ligne...
- Section 1 - 2
Nous verrons dans la prochaine section pour créer des listes secondaires.
Si vous souhaitez créer une quatrième section il faut presser qu'une seule fois sur ENTREE
- Section 1 - 3
- Section 1 - 4
Deuxième section
- Section 2 - 1
- Pour créer la liste secondaire, il faut presser 3 fois en simultané maj+ENTREE
puis remonter d'une ligne. - En principe pour éviter que la première liste change de puce, il faut mettre une liste ordonnée.
- Comme celle-ci, mais après vous pouvez la changer en sélectionnant tous les éléments et choisir la liste à puces que vous voulez.
- Pour créer la liste secondaire, il faut presser 3 fois en simultané maj+ENTREE
- Section 2 - 2
- Pour une liste ordonnée pas de problème
- Ce système permet donc de faire toutes les listes
- Si vous pressez sur ENTREE un nouvel élément est créé, pour le supprimer pressez sur la touche retour arrière.
- Section 2 - 3
- Sans problème une nouvelle liste ordonnée
- Si vous n'écirvez rien dans un élément vous ne pouvez pas en créer un autre.
- Vous êtes obliger de faire retour arrière
Troisième section
- Section 3 - 1
- Sujet
- Objet
- Nom
- Section 3 - 2
- Chose
- Machin
- Truc
- Section 3 - 3
- Bordeaux
- Bourgogne
- Beaujolais
Voilà le texte avec les indentations et sans latin, la troisième section est très simple à faire si vous avez compris le système de liste secondaire.
Après cet exemple vous pouvez tester d'autres posssibilités, en plus pas besoin de rentrer en HTML pour faire une belle présentation. Mais en mode "Avancé" c'est un peu plus facile avec les boutons de tabulation.
Exemple de menu avec une liste
- Premiers pas - Avec le nouveau composeur
- Premiers pas _- Mise en forme du texte
- Tutoriel - Insertion de liens
<li><a href="http://DizTest.blog4ever.com/blog/lirarticle-205392-1731135.html">Premiers pas - Avec le nouveau composeur<br /></a></li>
<li><a href="http://DizTest.blog4ever.com/blog/lirarticle-205392-1731147.html">Premiers pas - Mise en forme du texte<br /></a></li>
<li><a href="http://DizTest.blog4ever.com/blog/lirarticle-205392-1731151.html">Tutoriel - Insertion de liens<br /></a></li>
</ul>
Cet article tient compte des possibilités du composeur en mode "Normal", dans un autre article j'indiquerai les plus du mode "Avancé".
En attendant le didacticiel suivant vous aidera, je l'espère, à bien utiliser les listes.
Ce didacticiel a été réalisé avec les boutons spécifiques à Blog4ever sur le côté, maintenant ce sont les boutons bleus.
Si le didacticiel ne s'ouvre pas dans votre navigateur, essayez ce lien :
Didacticiel Débuter avec le nouveau composeur...
