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.

Créer un site web avec Dreamweaver CC

Ajouter une balise aside

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Vous avez le choix entre deux approches. Vous verrez une méthode plus rapide et directe, et une autre dans le dossier Docs. Ainsi, vous pourrez adapter les CSS à votre guise.
02:55

Transcription

Pas de réelle complexité majeure en ce qui concerne le aside, et tout ce qu'on a vu jusqu'à présent donc, intégration d'une typo Eras bold. L'arrière plan ici pourra contenir chacun des logos avec la forme de la boîte avec une classe info, classe access, classe horaires, classe contact, ou alors on pourrait utiliser des child, nth-child, en disant, le premier, il a simplement un arrière-plan à droite. Le dernier, il a simplement un arrière plan à gauche et les deux du milieu ont tous un arrière-plan à droite et à gauche, tout simplement. Donc je vous placerai cette solution alternative des arrières-plans multiples dans la partie contenu. Mais là, on peut très simplement placer par infos, access, horaires et contact en classe, avec un titre h1 et une paragraphe tout simplement. Donc, retournons dans le HTML, en nous aidant du contenu et de cette structure, voilà ce qu'on va pouvoir obtenir ici. Tous ces éléments avec les infos, avec un choix volontaire de ne pas utiliser de majuscule dans le texte, on aurait pu le faire avec du CSS, voilà cela a été fait dans le texte. Libre à vous de l'adapter. Alors, côté style, commençons par importer les deux typos Eras_bold et ERASLGHT, qu'on va utiliser. On s'aperçoit ici, que l'élément est bien accroché, parce qu'il y a la flottaison derrière, ce h1 qui l'entraîne. Donc, on va faire entrer de jeu Inclureboss. On va mettre un arrière-plan transparent pour enlever la couleur grise Pour les éléments de Li, il n'y a vraiment pas de complexité On va anticiper directement le contain, no-repeat et left top pour chacun des arrière-plans qu'on va avoir. Mais puisqu'on fait flotter ces éléments les uns à la suite des autres sur 25%, donc ils se partagent cet espace. Il va falloir demander au conteneur parent d'avoir un overflow : hidden, pour être sûr d'écarter tout ce monde là. Vous avez vu que dès que je les écarte automatiquement, la couleur d'arrière plan réapparaît, ce orange a été poussé. Côté typographie maintenant les h1, on va pouvoir les placer avec la typo qui va bien. Pour la partie, maintenant du aside p, le paragraphe on va lui mettre un etypo plus légère et un font-size différent, et enfin pour le a on va lui demander d'hériter de la couleur du parain et de ne pas avoir de décoration. Tous nos éléments sont prêts, on n'a plus qu'à mettre les arrière-plans image pour chacun et ici dès qu'on va faire un F5 pour actualiser nos images, chacune prend sa place avec les icônes adhoc. Alors, je vous laisse venir agir si vous voulez affiner la typo ou les divers éléments d'espace pour ce qu'il vous conviendrait. Alors, comme je vous le disais je vous placerai dans les docs directement une version alternative qui utiliserait les parties droite et gauche ici. Vous trouverez le code dans la partie docs ici 06-aside-alternative où vous pourrez venir récupérer et la partie des flèches et la partie roll over que l'on verra plus tard dans une autre étape directement en remplaçant ça dans les CSS.

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 !