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.

Dreamweaver CS6 : Les nouveautés

Structure et sémantique en HTML5

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
La palette dédiée à la mise en forme a également été repensée : dorénavant, elle tient compte de la structure et de la sémantique des balises en HTML5. Vous allez voir comme il est simple de l'utiliser pour mettre en place très rapidement une structure de page classiquement rencontrée sur le web.
06:39

Transcription

Dans cette nouvelle version de Dreamweaver CS6 12.1, le menu d'insertion avec son onglet Mise en forme, centralise vraiment l'intégralité des balises sémantiques et structurelles de HTML5. Alors on va regarder de plus près comment on peut construire une page avec cet élément-là. Avant de commencer, rappelons quand même que l'on utilise le panneau avec l'onglet Mise en forme, ou que l'on utilise le menu Insertion Mise en forme, et ici, tous les éléments de ce sous menu, c'est exactement pareil, ça ouvrira les même boites de dialogue, ça donnera accès aux mêmes fonctionnalités. Notez cependant au passage ici, la présence de cadres, et donc bien que le Frame et Frame7 ne soient plus une recommandation de HTML5, il se peut que vous en ayez besoin pour certains types de sites sur lesquels vous travaillez, donc sachez que c'est ici que vous retrouverez cette possibilité-là. Donc, pour des questions de praticité, ici, je vais utiliser le panneau, mais on aurait, bien entendu, pu utiliser le menu d'insertion ici directement. Alors, on va enregistrer cette page, on va l'appeler html5-semantique, je vais lui donner un extension html, voilà. Et on ne va pas s'occuper de la mise en forme des visuels CSS, on verra qu'on peut directement ajouter à cette structure une feuille de style déjà prête. Alors pour commencer, on va rester vraiment basés sur une majorité de templates présents sur le web, et donc on va englober l'intégralité de notre page dans une balise div de type ID container par exemple. Alors, on pourrait faire deux petits reproches à cette utilisation, on pourrait se dire qu'on en a pas besoin, que la balise body permet de faire exactement le même chose, et on pourrait dire aussi qu'on est pas obligés de donner une balise ID, on pourrait utiliser une simple classe de ce container, ce qui serait plus léger pour pouvoir surmonter, pour faire des signatures CSS, ou des éléments de ce type-là. Alors, ça a été fait uniquement pour pouvoir garder une certaine compatibilité avec beaucoup de templates que l'on trouve sur le web, et puis, pour pouvoir justement apporter des précisions sur ce sujet. Alors ici, on va dire OK, et vous voyez que Dreamweaver, comme à l'accoutumée, prépare non seulement la balise div avec l'ID adéquate, mais en plus prépare un petit texte et garde place que l'on va s'empresser de supprimer. On va placer un premier titre dans cette page, et justement, qui dit titre, dit en-tête, qui dit en-tête, dit balise header qu'on va placer au point d'insertion, pas de classe, pas d'ID, pas de nécessité de placer plus de précision ici sur cette balise-là, donc, vous voyez que là encore, le contenu se met en place tout seul, un texte de garde place que l'on va supprimer, et on va donner donc un premier titre en clin d’œil avec le site développé durant le montage sur Dreamweaver CS6, et vous voyez ici, l'intégralité simplement en tapant de cette structure, c'est auto-indenté, c'est auto-formaté de façon à respecter un formatage très lisible sur la partie code ici. Donc ce Hypo Restaurenti, je vais le transformer en titre de niveau 1, je vais rajouter un slogan, et ce slogan, je vais le placer à un niveau de type 2, ici, en-tête de niveau 2. Et donc, on pourrait structurellement penser que ici, j'ai un premier titre, et ici un sous-titre, en fait c'est un peu faux, c'est pas un titre et un sous-titre, c'est vraiment un niveau de titre avec un titre à deux niveaux, mais tout cet élément-là devrait être considéré comme « le titre », et on ne peut pas distinguer une imbrication et une arborescence là-dedans, donc pour cela, on va utiliser la balise hgroup, ici, apparue avec HTML5 qui va nous permettre d'envelopper la sélection ici, et de placer soit une classe soit une ID, là, on en a pas besoin, je vais dire OK. Et donc vous voyez qu'ici, automatiquement, le Hgroup vient englober les balises h1 et h2 pour bien indiquer qu'il s'agit ici d'un titre de même niveau qui est décomposé en deux parties. Vous avez remarqué également au passage, que le formatage du code est très propre, et c'est fait de manière très simple. Ici, je vais pouvoir sélectionner dans le sélecteur de balises dans la partie basse ici, la partie hgroup intégralement, et avec la flèche de mon clavier, je vais pouvoir sortir sur la partie droite pour passer à l'extérieur, et vous voyez ici, si je sélectionne header maintenant, je peux sortir comme ça, placer mon curseur exactement où je le veux dans le code de manière très simple. Donc ici, je suis bien dans la partie après le header, je vais pouvoir intégrer au point d'insertion, un élément de navigation et de balise Nav, qui n'aura pas de classe et pas d'ID, pas nécessaire pour cet élément-là. J'ai, ici, un contenu pour cette balise, très bien, je procède toujours de la même manière, et ici, je vais pouvoir sortir comme ça, et placer maintenant un article, et cet article, je pourrais lui donner soit une classe de préférence, soit un ID, ici, je vais continuer toujours dans l'esprit de l'ID, puisque c'est ce qui était présent sur le web quoi. Ici, je vais dire que ce serait le main par exemple. Cette partie d'article a été placée, je vais continuer à placer un élément de formation complémentaire, ici donc, une side, et cette side justement, je vais pas sortir de ma balise Article puisqu'elle a été identifiée, ici, je vais dire que je place un élément de coté, et cette ois-ci, je vais lui dire que je me mets après la balise. Donc là, j'ai un petit menu déroulant qui me propose de pouvoir me placer après une balise identifiée, donc je vais dire après la balise <article id="main", et je vais lui donner ici, par exemple l'identifiant sidebar, OK. Enfin, on va terminer par un footer, donc un Pied de page ici. Vous voyez avec quelle simplicité on peut utiliser ce genre de boite dialogue, ici bon, pas besoin pour le footer de donner de classe ou d'identifiant. Le remplissage de notre page s'est fait de manière très intuitive, très simple, et surtout très rapide. Voilà, donc maintenant, ma page est terminée, je peux l'enregistrer, et il suffit de lui adjoindre une feuille de style pour voir le résultat. Alors ici, je vais faire dans la partie basse ici, joindre la feuille de style, je peux parcourir, et venir chercher cette feuille de style qui se situe ici, et dès l'instant où je vais placer ma feuille de style, vous voyez que l'intégralité du contenu se place. Alors je vais passer en mode Création pour me donne un peu plus de place. Vous voyez qu'ici, tout a été directement structurellement construit, les feuilles de style s'appuient sur cette structure, et donc maintenant, il ne nous reste plus qu'à aller placer le contenu à l'intérieur de ma page, pour pouvoir le déposer sur le web et remplir ma page. Un flux de travail grandement amélioré pour l'utilisation de HTML5, avec cette version 12.1 de Dreamweaver.

Dreamweaver CS6 : Les nouveautés

Allez à la découverte des nouveautés de Dreamweaver CS6, qui gravitent autour du développement d’applications mobiles, de la pluri-distribution et de sites Internet réactifs.

3h16 (40 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :23 avr. 2012
Mis à jour le:5 avr. 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 !