Créer un site web avec Dreamweaver CC

Ajouter des rollovers à l'en-tête et au pied de page

Testez gratuitement nos 1324 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Ajoutez quelques effets de survol à l'en-tête et au pied de page et appliquez un effet de transition à la barre de menus. Grâce au code et à CSS Designer, vous interviendrez aisément sur chacune des feuilles CSS.
06:36

Transcription

Alors, pour placer des effets de rollover, on va commencer par le plus simple d'ailleurs qui est le footer. On va commencer donc, on va sélectionner le footer. Et puis surtout, on va dans cet élément de footer ici on va venir sélectionner l'élément qui va primer le survol. Donc, le mieux c'est le placer sur le li, parce que comme ça peu importe l'endroit que l'on survole on survolera l'intégralité de l'élément. On va sélectionner la feuille de style adhoc de ce fait, voyez, on a directement l'élément qui va bien. Et forcément, si on rajoute, puisqu'on a sélectionné le li, un sélecteur forcément, on va rajouter le sélecteur à partir du li. Donc, moi ce que je vous propose c'est de sélectionner directement le li, ici. Et puis de rajouter un sélecteur, et vous voyez que forcément, on a pris le footer ul li. Donc, on va rajouter grâce aux flèches la possibilité d'améliorer avec le côté conteneur, ici devant. On va rajouter la primauté ici. Puis, dès qu'on va commencer à mettre deux points automatiquement, Dreamweaver me dit, mais qu'est ce que tu veux comme type de pseudo classe. Je veux le pseudo hover. Que veut-on au niveau du pseudo hover ? En fait, j'ai besoin d'éditer cette ligne, parce que quand j'ai validé mon hover, j'ai été un peu vite en besogne. Donc, soit tu fais atteindre le code ici je me retrouve dans le code, et je vais pouvoir rajouter une pseudo qui sera de dire c'est quand je survole le li, moi ce que je veux c'est affecter le a, par exemple. Et à ce moment-là, j'affecterais le lien qui sera à l'intérieur du li, ou si je dis par exemple, je veux le p, je dirais quand je survol le li, je veux affecter p. Là, ce qu'on veut affecter c'est le h1. Et donc, c'est pour cela que j'ai été un peu vite en besogne en validant par un entrée, j'aurais dû faire une tabulation, là on ne peut plus éditer le sélecteur à ce niveau-là. Donc, maintenant, que ça a été édité dans le code je peux repasser en mode En direct, Il n'y a pas de souci pour avoir mon rendu et ici sur mon h1 qu'est-ce qu'on a besoin d'apporter au niveau de h1 ? C'est d'apporter une opacité, vous voyez, ici c'est bien cet élément-là qui soit soit moins forte, soit de changer directement la couleur rgba. Donc ici je vais sur la couleur d'écriture je vais pouvoir venir sur la couleur. On avait un rgba qui était de 255. Alors, ce n'était pas probablement un rgba c'était tout simplement un rgb tout court. Mais, si je passe maintenant à 255,128,0 et que là je passe en version 1, par exemple. Je lui dis que je veux un plein pot d'images à ce niveau-là, et si je valide, regardez quand je vais venir survoler, j'ai bien mon élément qui va passer en plein pot. Alors, on va pouvoir faire la même chose on va sélectionner cet élément-là On va dire qu'on sélectionne le li on va passer sur le header.css, on va se positionner sur le a ici, et on va ajouter une classe. On va faire monter grâce à la flèche bas pour venir sur conteneur, header. alors le nav on peut le supprimer. On va rajouter le pseudo hover ici. Donc, on va descendre dans ce sens-là. Je mets une tabulation. Vous voyez, je ne valide pas avec Entrée. Et puis là, je vais garder sur la partie hover le a, puisque en fait c'est le a que je veux atteindre. Et donc, qu'est ce qu'on veut faire et bien, on va inverser par exemple, les couleurs. Donc, si je dis par exemple que le background du a couleur d'arrière-plan du a, devient ce fameux orange alors ici je vais prendre la petite pipette puisque c'est cet orange là donc autant la valider de la sorte. Je veux que le a, au moment du survol, soit ce orange. Et que par contre, la couleur d'écriture devienne le #3F3F3F. Donc à ce moment-là je passe dans le texte et je vais prendre un #3F3F3F pour être sûr d'avoir le bon gris. Quand je survol, j'ai bien mon élément de survol qui va se positionner de manière correcte. Alors, on va pouvoir jongler maintenant au niveau des positionnements de bloc ici par exemple, en disant que l'on aurait un padding. Alors si on part dans la partie haute au départ, on pourrait prendre un 4vw. Donc ici je vais supprimer cette partie-là et je vais mettre un 4vw. Donc, dans la partie haute, je vais être un petit peu haut. Si je continue avec la touche tabulation et si, je passe sur le second élément. Je vais demander par exemple, un 1vw. Et vous allez de suite voir l'effet que cela va apporter. Si je passe sur la partie basse on pourrait demander un 0.4vw. Toujours, pour rester proportionnel à la taille de la fenêtre. Et puis le dernier, on pourrait demander ici un 1vw. Donc, qu'est-ce que cela donn si je survole maintenant, regardez. J'ai mes éléments qui survolent directement tout le bloc. Par contre, ça ne le fait pas très bien, parce qu'ici les deux petits coins du bas devraient être arrondis. Alors, ce qu'on va faire, c'est rentrer dans les cadres des bordures ici, et on va demander à avoir des bordures qui sont ici de 0. Par contre dans la partie basse et droite on pourrait demander d'avoir 8 pixel. Donc, on pourrait jouer dans ce sens-là. Et ici, alors on va carrément mettre même 8px directement, et 8px dans la partie ici 8px, je valide, regardez quand je survole ça donne un petit effet qui peut être sympathique comme ça. On pourrait demander maintenant au ul li d'avoir un margin-left. Donc ici, on peut rentrer dans les parties de positionnement. On va venir dans le margin: left et on pourrait augmenter un petit peu l'histoire d'avoir nos boutons qui soient plus espacés, pour être plus visibles comme ça. Voilà donc, de manière très simple, on peut apporter des effets de survol et rien ne nous empêche d'apporter un effet de transition entre le a et le a hover. Alors, ici il faudrait l'apporter sur l'élément li puisque ce sont les éléments li qui contiennent l'effet, donc, je vais venir sur le li, et je vais demander d'atteindre le code ici. Et ici dans la partie du code sur la partie li qui est là. Je vais rajouter un transition all, de 400 ms, et regardez ce que se passe. Je vais avoir un effet de transition sur l'élément. Alors, si je le place sur le a ici. Voilà on a l'effet qui se rapportera mieux et qui donnera un effet un peu plus sympathique. Donc, on peut comme ça maintenant, à souhait, venir dans chacune des feuilles de style rajouter des effets de survol et des petits effets de transition.

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 !