12 novembre 2012 Grégory Petit

La semaine dernière… Intégration Web Éléments complexes de Dreamweaver

Et donc on fait quoi aujourdhui? Création dune image lien via Photoshop Mettre du texte Couleur de fond Texture de fond Changement de couleur au survol Images maps via Dreamweaver

Image lien via Photoshop

Image lien Vous savez déjà faire des liens images avec Dreamweaver: Insérer une image Ajouter le lien dans dans la boite des propriétés de lélément Web image On va créer un lien image un peu plus flyé via Photoshop. Certaines étapes ne sont pas forcément nécessaires en fonction du degré de complexité que vous voulez atteindre. Au plus haut degré de complexité, limage sera utilisée comme image de fond de lélément Web.

Photoshop – nouveau fichier Choisir ici la taille souhaitée pour votre image lien

Photoshop – nouveau fichier

Ajouter du texte Sélectionner loutil Texte Modifier la police, la couleur, le style, la taille, etc.

Ajouter du texte - résultat

Modifier le texte Pour modifier le texte une fois ajouté, il faut : Sélectionner le calque du texte à modifier Sélectionner loutil Texte dans la boite à outils de gauche. Modifier la police, taille, couleur, etc. dans la boite à outils du haut. Modifier le texte en cliquant dessus.

Ajouter une couleur de fond Créer un nouveau calque

Ajouter une couleur de fond Choisir loutil de sélection et sélectionner lensemble du claque Choisir « Remplir » dans le menu « Édition »

Ajouter une couleur de fond Choisir la couleur voulue Correspond aux 2 couleurs de la boite à outil

Ajouter une couleur de fond - résultat Le fond apparaît par défaut devant le texte car un nouveau calque apparaît toujours en haut dans la liste des calques Glisser le calque du fond en dessous du calque du texte

Créer une texture à partir de la couleur de fond Comme pour chaque modification, il faut sélectionner le bon calque avant. Ici, il faut sélectionner le calque du fond. Ajouter certains filtres permet de créer une sorte de texture.

Texture - résultat On change la couleur du texte pour que cela ressemble à quelque chose de plus correct.

Ajouter un effet de survol Maintenant, on veut rajouter un effet lorsque la souris de lusager passe au-dessus de limage lien. On va faire ça dans le même fichier Photoshop en dupliquant de quon vient déjà de faire. La version survolée va se retrouver en dessous de la version normale de limage lien. Il faut donc doubler la taille de la zone de travail de notre fichier Photoshop.

Augmenter la zone de travail On va doubler la taille de la zone de travail et létendre vers le bas

Augmenter la zone de travail Mettre la taille en pixel pour que cela soit plus facile et doubler la hauteur. On va aussi indiquer quon souhaite que limage soient étendue vers le bas.

Augmenter la zone de travail - résultat

On va maintenant dupliquer les deux claques quon a. Glisser le calque vers licône Nouveau calque Dupliquer les calques Faire ça pour les deux calques

Déplacer les calques dupliqués Sélectionner un des deux calques dupliqués puis choisir loutil de déplacement dans la boite à outils Déplacer le calque avec les flèches du clavier ou la souris Faire la même manipulation pour le second calque dupliqué

Ajouter leffet de survol Sélectionner le calque du fond dupliqué (celui du bas donc) et jouer avec son contraste et sa luminosité pour ajouter leffet de survol.

Ajouter leffet de survol - résultat

Exporter votre image Exporter votre image pour le Web (vu dans le cours sur les images) Après on passe dans Dreamweaver pour rajouter le comportement de survol.

Ajouter le lien dans Dreamweaver Si vous navez pas créé deffet de survol, ajoutez limage lien comme dhabitude (voir début du cours) Pour rajouter leffet de survol, 3 règles CSS sont nécessaires. Tout dabord, il faut créer un lien normal, et non pas un lien image.

Ajouter le lien dans Dreamweaver Ensuite créer une nouvelle classe qui aura comme image de fond votre fichier image que vous venez de créer. Il faut aussi rajouter dautres propriétés CSS importantes pour faire fonctionner votre survol.

Règle CSS pour la classe du lien Choisir votre image de fond Bien indiquer 0 et 0 pour ces deux valeurs de position.

Règle CSS pour la classe du lien Choisir la même taille que vous aviez choisi à lorigine pour votre fichier Photoshop

Règle CSS pour la classe du lien Bien choisir Block

Appliquer la classe à votre lien On voit bien que le texte est toujours affiché. Il faut donc le rendre invisible.

Rendre invisible le texte du lien Créer une classe avec la propriété display: none; Entourer le texte du lien par un span et attribuer la classe quon vient de créer à ce span.

Rajouter leffet de survol Écrire une nouvelle règle directement dans le fichier CSS comme suit. Nom de la classe associée au lien Le :hover permet de rajouter le comportement du survol dune élément Correspond à la hauteur de votre image créer avec Photoshop

Effet de survol plus simple

Code CSS ajouté automatiquement. Ne pas supprimer les scripts ajoutés automatiquement dans le du fichier HTML. Limage originale et limage de survol sont créées aussi dans Photoshop. Vous pouvez utiliser les mêmes techniques vues précédemment sauf que vous mettez les deux images dans deux fichiers séparés au lieu dun seul.

Images map

Une image map permet de rendre certaines zones dune image cliquable. On crée donc plusieurs liens dans une même image. On insère dabord une image classique.

Prenons ce magnifique exemple

Option avancée dans les propriétés de limage

Créer des zones dans limage Remplir dabord lattribut map pour donner un nom à limage map. Choisir un des trois éléments encadrés pour commencer à dessiner une zone de limage map.

Créer des zones dans limage

Remplir la propriété link pour indiquer la cible de la zone quon vient de créer (comme pour un lien normal)

Créer des zones dans limage Répéter lopération pour chacune des zones quon veut créer

Et ça donne ceci dans le code. Créer des zones dans limage

Atelier

Refaite votre menu du travail 2 avec une image map. ET Refaite votre menu du travail 2 avec des liens-image avec survol.

Des questions??? Merci de votre attention! A la semaine prochaine!