Créer un site web avec Dreamweaver CC

Concevoir l'en-tête

Testez gratuitement nos 1297 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
À l'aide du fichier de maquette et du contenu source, concevez rapidement la structure du header (en-tête). Ajoutez des informations pour cibler les lecteurs d'écran et tenez compte d'Internet Explorer, qui ne prend pas en charge HTML5.
04:52

Transcription

Côté header, pas de grande complexité simplement une liste de lien qui peut être placé soit qui peut être placé soit sous des points d'ancrage des balises « a » tout court, soit des « li » au travers d'une balise Nav un logo qui pourrait être sur le H1 avec le titre donc pas de grosse complexité. Je vous propose qu'on récupère directement le contenu depuis nos fichiers ici. Donc dans les docs ici contenu, on va pouvoir récupérer le header directement. Donc ici on peut le copier et puis venir le coller directement dans notre structure. Un document header HTML a été créé avec la feuille de style qui va bien, il n'y en a plus qu'à se placer à l'intérieur de ce contenu ici, et venir coller l'intégralité du chapitre. Pour cette partie-là maintenant, on va pouvoir placer un H1 dans les propriétés. Donc ici il suffit de venir actualiser ces propriétés ici, placer un titre H1. On avait déjà l'habitude, alors soit on met en Retour, soit on peut glisser-déposer directement l'élément c'est beaucoup plus rapide. Et même si on n'est pas développeur on s'aperçoit que ce n'est pas bien compliqué que de le gérer. Ici on va faire une liste. On va faire une liste sauf que voilà, on va se retrouver exactement avec la même problématique que tout à l'heure. Donc ici on va pouvoir faire le nettoyage. Moi j'aime bien copier-coller ici voilà, c'est très simple, on place le curseur devant et puis ce qu'il faut c'est s'assurer qu'on n'ait pas ces petits espaces ici devant qui peuvent venir être rapidement ennuyeux. Et là, il suffit de venir fermer. Alors, soit on fait un « / » et automatiquement Dreamweaver va coller ces éléments là, soit ce qu'on fait c'est qu'on vient le copier-coller directement c'est autant rapide. Pensez toujours à refaire un petit coup de code, appliquer le format source pour que ça se remette de manière bien indenté. On va placer la balise de navigation, alors soit la navigation inclut le logo et le titre, soit ne l'inclut pas. C'est à vous de voir, vous n'êtes pas obligé de suivre pile poil l'approche que je donne. Maintenant si je place ma navigation, je vais envelopper la sélection. Je n'ai pas de classe à lui placer, je vais dire OK tout simplement. Et puis maintenant on va placer ici tout autour du festival, on va mettre un lien. Alors la meilleure façon de mettre un lien c'est de mettre une ancre vide comme ça, et ça on va pouvoir le faire pour l'ensemble des liens. Il suffit qu'un lien ait été placé, vous venez dans le petit menu déroulant, plus besoin de la taper, elle est présente et là ça va le donner. Alors ce qui peut être fait, qui n'est pas nécessaire puisque l'on fait du HTML5, c'est de se dire, attention ! Là maintenant on a un HTML5, il se peut qu'on ait des vieux navigateurs qui ne prennent pas en compte HTML5. Et donc la balise header on ne saura pas que c'est une balise header pour les personnes à lecteur d'écran. Donc ici ce que l'on va faire, c'est qu'on va rajouter un rôle banner vous voyez ici. Il n'y a plus qu'à valider. Et ici pour navigation, attention c'est bien lui qui va faire le rôle de navigation. On va placer navigation ici, on peut valider. Mais puisqu'on se dit attention, on a des navigateurs qui risquent de ne pas être des navigateurs qui vont comprendre HTML5, il va nous falloir rajouter ce qu'on appelle un CDN, et ce CDN en fait, on va le faire pointer vers « html5shiv » qui est un shiv qui avait été mis en place par Remy Sharp et donc ce qu'on va utiliser c'est le « html5shiv » minimum avec le SRI et le Script tag dans l'intégralité. On va faire copie tout simplement. On va retourner au sein de Dreamweaver, et on va venir coller cet élément, alors je vais le coller juste en amont vous voyez c'est un script, un CDN qui pointe vers une des librairies qui va enseigner en gros à tous les navigateurs qui ne comprennent pas ce qu'est HTML5, la possibilité de pouvoir intégrer cet élément-là. Le problème c'est que maintenant, tous les navigateurs vont le prendre. Ce qu'on va faire c'est mettre un commentaire au conditionnel. Pour cela on va prendre un fragment de code, on va venir chercher dans les commentaires conditionnels, « Conditional comment », pour cibler Internet Explorer parce que c'est le seul à ne pas comprendre. On trie tous ce qui ne nous convient pas et ici on va le remplacer par inférieur et il suffit de venir encadrer cet élément-là sur la partie du script qui fait que cette partie du script va être commentée ne sera lisible que par Internet Explorer 9 et cela va nous permettre de pouvoir filtrer l'élément et donc ne pas surcharger les autres navigateurs qui comprennent HTML5. Donc on peut dire que là le HTML est terminé. On peut l'enregistrer, passer en direct, on s'aperçoit qu'on a bien nos éléments qui sont placés. On les voit très peu. Maintenant il nous faut passer sur la feuille de style qui a été prévue dans ce sens et qui va nous permettre maintenant de styler ce header assez rapidement.

Créer un site web avec Dreamweaver CC

Réalisez votre premier site web avec Dreamweaver. Abordez les principales étapes de conception, telles que la création d’une page web, l’ajout de contenu multimédia, etc.

3h04 (37 vidéos)
Aucun commentaire n´est disponible actuellement
 
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :25 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 !