Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

L'essentiel de Dreamweaver CC 2017

Formater le texte

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
La structure et la sémantique du texte étant importantes, vous devez soigner la hiérarchie et l'emphase du contenu. Avec du code et l'inspecteur de propriétés, vous pourrez affiner la structuration du texte.
05:30

Transcription

Nous allons toujours devoir continuer d'affiner ce texte. Nous avons vu que nous avons déjà plusieurs outils qui nous aident, qui vont nous permettre de pouvoir structurer le contenu. On va voir qu'il en existe d'autres et qui sont tout autant utiles et souples d'utilisation. Par exemple ici j'ai un titre h1 qui a été porté ici et dans l'inspecteur des propriétés ça me reflète l'en-tête h1. Je vais pouvoir venir et peu importe où est placé le curseur, il suffit qu'il soit dans la ligne. Redéfinir cette entité de tête à un autre niveau donc en h3. donc il est très important de pouvoir donner un sens structurel et hiérarchique à l'int"gralité des contenus en donnant des degrés de granularité comme ici par exemple h1, titre principal, h2 sous-titre h3 qui serait un peu plus petit et on peut aller comme ça jusqu'à h6. Donc vous pouvez venir simplement dès que vous avez placé votre curseur dans la ligne en question, venir redéfinir ce degré d'en-tête ici à ce niveau-là. Alors certains diront qu'on ne peut pas utiliser plusieurs h1 au sein de la même page. Alors je vous laisse le libre arbitre en venant regarder la vidéo de Matt Cutts. Matt Cutts c'est quand même un ingénieur communiquant chez Google. Il est assez réputé pour quand même lâcher du bout des lèvres, ce qui est permis et ce qui ne l'est pas. Vous pouvez écouter ce discours, c'est en anglais mais il est très clair de dire que dans la mesure où on respecte un degré hiérarchique de contenu bien sûr que l'on peut utiliser plusieurs h1 au sein de la même page et cela n'influencera aucunement un mauvais piositionnement dans le référencement donc en SEO. Au contraire, plusieurs h1 dans la même page dans le sens où vous allez avoir une vraie imbrication de balises parents donc ici j'ai un header, j'ai un h1. Il est certain que si je replace un h1 à l'int"rieur du header, ça va coincer. On pourrait avoir plusieurs h2 ou h3, mais pas plusieurs h1. Par contre, maintenant, ici j'ai un h1 qui lui se trouve dans une div slider et là-dessus, il n'y a pas de souci. Au contraire, c'est le titre de cette rubrique-là. Ce qu'il y a d'intéressant c'est que si je récupère cette partie-là, je la copie ou je la coupe et je l'injecte dans une autre page ou dans un autre contenu. On gardera toujours ce sens hierarchique en disant ça c'est le titre de class slider. Oups là je vois d'ailleurs une petite erreur de frappe. Voilà donc pensez à utiliser plusieurs h1 dans la page à condition qu'ils soient tous placés dans une balise parent distincte et différente. Ensuite, les h2 les h3 les h4, vous pouvez en utiliser autant que vous souhaitez. Vous avez la possibilité également d'utiliser des raccourcis clavier. Seulement les raccourcis clavier vont demander de sélectionner l'intégralité de l'élément, regardez. Si je suis placé ici et je fais Ctrl 1, je vais placer un h1 mais juste à l'endroit de mon curseur. Pour pouvoir placer ce h1 sur l'intégralité du texte, il faudra que l'intégralité du texte soit sélectionnée et là si je fais Ctrl 1, je vais placer un h1 autour de l'intégralité de la sélection. Vous pouvez faire Ctrl 2, Ctrl 3, Ctrl 4 eccetera, Commande 1, Commande 2, Commande 3 si vous êtes sur Macintosh pour pouvoir placer des titres. De la même manière, on va pouvoir utiliser des mises en gras ou des mises en italique. J'utilise volontairement l'erreur de franglais qui va dire mise en gras, mise en italique parce qu'on a l'habitude de voir strong ou B ici vous voyez pour pouvoir remplacer cet élément-là. Si là je rappuie sur B, je vais enlever le strong qui a été sélectionné ici. D'accord ? Alors que si j'utilise le raccourci clavier Ctrl B Ctrl I, Ctrl B vous voyez ici, je fais Ctrl I, pour faire en italique, automaiquement on va placer des strong et des em autour de l'élément, faites attention si vous réappuyé sur Ctrl I vous allez rajouter autant de M que vous avez de sélections. Donc faites bien attention quand vous utilisez les raccourcis clavier. Par contre, si ici j'utilise maintenant le petit icône B ou italique, je l'ajoute ou je le retire en fonction de l'élément. Alors pourquoi je disais faussement appelé gras et bold italic, tout simplement parce qu'à l'époque c'était pour mettre en bold ou en italic tout simplement. Donc on mettait en gras ou en itlaique. Maintenant il y a un sens structurel qui va être apporté au document et si je viens dans les préférences de l'application ici dans l'onglet général, j'ai la possibilité de demander d'utiliser strong et EM au lieu de B et I. Alors Strong et EM ça va être non seulement structurel mais en plus sémantique. On va dire qu'on met une emphase dans le texte. Donc un lecteur d'écran qui lirait la phrase hausserait le ton dès l'instant où on va avoir du strong ou du M, alors que sur le B ou le I il va lire toujours dans un sens monocorde il y a pas de structure, il n'y a pas de structure là-dessus. Donc, faites bien attention le fait d'être en strong ne veut pas dire que l'on est en gras. On va dire attention ici il ya une emphase plus forte ou une mise en exergue quelque part de l'élément si c'est de l'EM. Visuellement, vous pourez très bien le représenter en gras comme pas du tout et c'est pas ça qui va primer. Donc pensez à utiliser une structuration hierarchique en donnant des degrés d'informations h1, h2, h3 eccetera, vous pouvez utiliser autant de fois ces balises-là que vous le souhaitez au sein des mêmes conteneurs parents, sauf le h1 qui lui doit être utilisé qu'une seule fois au sein du même conteneur parent mais il peut y avoir plusieurs h1 dans la page. Pensez à utiliser des mises en emphase Em, Strong, B et I. B et I ne sont pas du tout obsolètes vous pouvez les employer dans vos documents.

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 !