L'essentiel de Dreamweaver CC 2017

Gérer l'état des liens

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Dreamweaver ne vous propose pas d'accès direct aux pseudo-classes. Néanmoins, dans le CSS Designer, un sous-menu vous permet de retrouver tous les pseudo-classes disponibles pour l'élément en cours de définition.
03:17

Transcription

En ce qui concerne les liens, on a accès à ce qu'on appelle des pseudoclasses qui vont nous permettre d'identifier l'état du lien c'est-à-dire s'il est actif, inactif, s'il est visité, si c'est un lien, etc. Pour cela on va utiliser une feuille de style CSS qui a déjà été programmée et qui utilise l'intégralité de ces liens. Le CSS est un CSS purement bateau et basique : il n'a pas été préfixé. Si vous devez travailler sur de vieux navigateurs pensez à le préfixer ou au moins le passer dans un gulp qui permettra de le faire. Ici on a les états qui ont été prévus, c'est-à-dire link c'est un lien hover : il est survolé, actif : je suis en train de presser dessus, et visited : il a déjà été visité. Au niveau du code source, on a simplement des ancres pour ne pas partir de la page et rester sur la page. Par contre j'ai mis des ancres nommées a, b, c, d de façon à ce que quand on va visiter une ancre tout court il me dira tu les as toutes visitées alors que a,b, c on ne les aura pas forcément visitées. Enfin le dernier, le blog ici n'a pas de href=, n'a rien, par contre il a un lien, mais il n'a rien. Ici il ne me reste plus qu'à lier la feuille de style et d'ajouter la classe à l'élément de ul : class=. Avant de passer à la classe quand même, vous allez me dire : comment fait-on pour ajouter les pseudo dans les CSS au niveau de link, hover, etc. ? En fait, rassurez-vous : il n'y a aucune information possible dans l'inspecteur des propriétés : même si vous venez dans l'onglet CSS, il n'y a rien, vous ne pourrez pas le faire. Mais par contre, ce que vous allez pouvoir faire, c'est venir dans le CSS Designer et dans le CSS Designer, lorsque vous vous approchez, par exemple d'un menu a, quand vous allez placer la règle ici .menu a dès que vous allez mettre deux points, Dreamweaver vous propose l'intégralité des pseudo que vous pouvez accrocher à cet élément-là. Donc c'est à vous de voir après celui que vous voulez accrocher. Quelque part, il y a un moyen de s'en souvenir, un moyen mnémotechnique. Une fois le CSS Designer programmé etc, ce qu'on va faire c'est aller visualiser.. On va ajouter la classe quand même parce que j'allais partir en oubliant de le faire. On va rajouter la classe. Il me dit j'ai une classe menu oui ça tombe bien, regardez : les boutons sont placés. On fera les commentaires directement en ligne. On va aller apercevoir dans un navigateur. Je vais dans Chromium ici. Vous voyez ici : je vais ouvrir l'inspecteur de code pour pouvoir le suivre. Là c'est l'élément a qui n'a pas de href Vous voyez ici que tout fonctionne à peu près normalement pour les survols et tout, sauf que je n'ai pas le pointeur, mais une partie du survol fonctionne et j'ai un carré rouge autour. Le carré rouge vient de Christopher Schmitt qui est un développeur qui a vécu les passages en force du CSS à l'époque du Html, donc je vous parle de ça, dans les années 98-99. Il disait qu'en code il faut toujours utiliser des rectangle rouge comme ça pour pouvoir repérer où sont les tableaux. Moi je vous propose de mettre des rectanges rouges pour repérer là où les liens n'ont pas encore été définis, car des fois vous n'avez pas forcément tous les liens, ou le clients ne vous a pas tout donné pour pouvoir ne pas les zapper. Ensuite lorsque vous survolez, vous voyez que le dégradé s'inverse et quand vous cliquez dessus, vous voyez qu'il s'enfonce et quand vous lâchez il est devenu gris parce qu'il a été visité. Du fait qu'il a été visité, il n'est plus un lien actif et donc à ce moment-là, il devient le petit carré rouge qui se met autour puisqu'il a été récupéré. Mais vous pouvez très rapidement vérifier l'état des survols de vos éléments gérés avec des pseudoclasses et les pseudoliens.

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 !