Mise en forme des liens et du menu de navigation

Remarque : les fichiers d’exemple incluent l’ensemble des bibliothèques Creative Cloud et des fichiers de projet pour ce tutoriel. Vous pouvez poursuivre avec le fichier de démarrage de la première partie ou accéder au dossier approprié et utiliser le fichier correspondant à chaque section.

Introduction

Bienvenue dans la sixième partie de ce tutoriel sur l'élaboration d'un site web simple en responsive design dans Dreamweaver 2015. La version à une seule colonne du site est presque terminée. Il ne reste plus qu'à mettre en forme les liens et le menu de navigation. Vous allez également joindre un fichier JavaScript pour afficher et masquer le menu sur les petits écrans.

Mise en forme des liens à l'aide de pseudo-classes

Par défaut, les liens sont de couleur bleue et soulignés. Lorsqu'un lien a été utilisé, il devient violet. Si ces conventions sont connues de la plupart des utilisateurs, elles sont de moins en moins adaptées aux sites modernes. Ainsi, il est devenu courant de supprimer le trait de soulignement et de modifier l'apparence d'un lien lorsqu'on le survole. Pour créer des styles pour chaque état applicable à un lien, CSS utilise des pseudo-classes. On les appelle ainsi car, contrairement aux classes ordinaires, aucun attribut de classe n'est ajouté à l'élément. La pseudo-classe est appliquée de manière dynamique par le navigateur à l'aide des styles de la feuille CSS.

Les pseudo-classes commencent par deux-points et sont ajoutées directement à un sélecteur. Les pseudo-classes utilisées avec les liens sont les suivantes :

• :link — Applique une mise en forme au lien lorsqu'il n'a pas encore été utilisé.
• :visited — Applique une mise en forme au lien lorsqu'il a été utilisé.
• :hover — Applique une mise en forme à un élément survolé (pas nécessairement un lien). Vous avez utilisé cette pseudo-classe dans la cinquième partie pour modifier l'aspect d'une image.
• :active — Applique une mise en forme à un élément sur lequel on vient de cliquer.
• :focus — Applique une mise en forme à l'élément actif, par exemple lorsque le clavier est en cours d'utilisation pour naviguer sur une page.

Lors de la mise en forme de liens, les pseudo-classes doivent être utilisées dans cet ordre précis. Sinon, les styles ne seront pas correctement appliqués. En anglais, on utilise la mnémotechnique LoVe-HAte pour mémoriser cet ordre. Les indicateurs de code de Dreamweaver sont également pratiques, car ils répertorient les pseudo-classes dans le bon ordre. L’inclusion de la pseudo-classe :focus est importante pour les personnes ne pouvant ou ne souhaitant pas utiliser une souris lorsqu’elles surfent sur un ordinateur portable ou de bureau.

1. Dans le mode En direct, sélectionnez un lien puis, dans le panneau Sélecteurs de CSS Designer, surlignez le sélecteur h2. La nouvelle règle de style est créée juste après h2, et les sélecteurs génériques restent ainsi regroupés dans la feuille de style. À présent, cliquez sur le signe plus (+) pour créer un sélecteur. Appuyez sur la flèche Haut pour obtenir un sélecteur moins détaillé. Il doit uniquement afficher la lettre a. De cette façon, tous les liens seront mis en forme, quel que soit leur état.
   
   
2. Dans la section Texte du panneau Propriétés, définissez la propriété font-weight sur bold.
   
   
3. Sélectionnez la première icône correspondant à la propriété text-decoration pour définir sa valeur sur none. Tous les liens de la page sont désormais en gras et non soulignés.
   
   
4. Créez un sélecteur pour a:link. Lorsque vous tapez deux-points, Dreamweaver affiche des indicateurs de code pour les pseudo-classes.
   
   
5. Cliquez sur la nuance rose dans le panneau Bibliothèques CC pour copier le code #F68979 dans le Presse-papiers, puis collez-le dans le champ modifiable à droite de la propriété color.
   
   
6. Créez un sélecteur pour a:visited, copiez le code #FF944C de la nuance orange clair, puis définissez-le comme valeur de la propriété color.
   
   
7. Créez un sélecteur de groupe pour a:hover, a:active, a:focus, copiez le code (#7F3300) de la nuance orange foncé, puis collez-le dans le champ de valeur de la propriété color.
   
   Définissez également la propriété text-decoration sur underline en sélectionnant la deuxième icône.
   
   
8. Dans le mode En direct, survolez un lien. Il doit devenir orange foncé et être souligné. Dans le cas contraire, il est possible que vos styles de lien ne soient pas dans le bon ordre dans le panneau Sélecteurs. Comparez votre version avec la Figure 1.

Si nécessaire, vous pouvez modifier l'ordre des règles de style en déplaçant les sélecteurs dans le panneau correspondant. Une ligne noire horizontale indique l'emplacement d'insertion des sélecteurs dans la feuille de style.

Pour le moment, la même mise en forme est appliquée à tous les liens. Une mise en forme différente doit être appliquée aux liens de navigation. Néanmoins, vous devez d'abord créer un lien de déclenchement pour le menu de navigation utilisé sur les petits écrans.

Création d'un lien de déclenchement pour le menu de navigation

Sur les petits écrans comme ceux des smartphones, le menu de navigation est normalement masqué et se développe lorsque l'utilisateur appuie sur un bouton. Dans cette section, vous allez attribuer un ID à la liste non numérotée puis ajouter un en-tête de deuxième niveau avec un lien vers la liste. Le lien du menu sera masqué par CSS sur les écrans plus larges. Le développement du menu de navigation sur les petits écrans sera contrôlé par CSS et JavaScript.

1. Dans le mode En direct, sélectionnez la liste non numérotée en cliquant sur l'un des liens. Le lien devient orange foncé et souligné, car il passe en état actif. À présent, appuyez plusieurs fois sur la flèche Haut jusqu'à ce que l'affichage des éléments indique que la liste est sélectionnée. L'onglet de l'affichage des éléments doit indiquer ul (voir Figure 2).

Lorsque vous appuyez sur la flèche Haut et que le mode En direct est actif, la sélection remonte dans la hiérarchie HTML. Si vous sélectionnez un élément au milieu de la liste et que vous appuyez une fois sur la flèche Haut, la balise <a> (l'hyperlien) de l'élément de liste juste au-dessus est sélectionnée. Si vous appuyez une fois de plus sur la flèche Haut, la balise <li> correspondant à l'élément parent du lien est sélectionnée. À chaque pression sur la flèche Haut, Dreamweaver remonte d'un échelon dans la hiérarchie. Si vous allez trop loin, Dreamweaver sélectionnera l'élément <nav>, puis l'élément <h1>. Appuyez sur la flèche Bas pour revenir à l'élément <ul>.

Une fois l'élément <ul> sélectionné, cliquez sur le signe plus (+) dans l'affichage des éléments, puis attribuez l'ID navlinks à la liste non numérotée en saisissant #navlinks dans le champ qui s'affiche. Appuyez sur Tab ou Entrée/Retour pour confirmer la modification. Le cas échéant, sélectionnez la feuille responsive.css dans le menu déroulant Sélectionnez une source, puis cliquez en dehors de celui-ci pour le fermer.

Remarque : lorsque vous utilisez l’affichage des éléments pour attribuer un ID ou une classe à un élément, Dreamweaver crée automatiquement une règle de style vide pour l’ID ou la classe, si celle-ci n’existe pas déjà dans votre CSS. Si vous ne souhaitez pas créer de règle de style, appuyez sur la touche Échap pour fermer la fenêtre contextuelle. La création automatique de règles de style intervient uniquement lorsque vous attribuez une classe ou un ID via l'affichage des éléments. Ce n'est pas le cas lorsque vous utilisez le panneau DOM ou de l'inspecteur Propriétés.

2. Vérifiez que la liste non numérotée est sélectionnée, puis choisissez Insertion > Titre > H2. Dans l'assistant de position, sélectionnez l'option Avant pour insérer un en-tête de deuxième niveau juste au-dessus de la liste non numérotée.
   
   
3. Double-cliquez sur le texte de substitution dans l'en-tête pour passer en mode de modification, puis remplacez le contenu par Menu.
   
   Toujours en mode de modification, sélectionnez Menu, puis cliquez sur l'icône de lien pour convertir ce texte en lien.
   
   Saisissez #navlinks dans le champ du lien (voir Figure 3), puis cliquez en dehors de ce dernier pour quitter le mode de modification.

Un lien pointant vers l'élément avec l'ID navlinks sur la même page, c'est-à-dire la liste non numérotée de liens de navigation, a été créé.

4. Vérifiez que l'élément <h2> est sélectionné dans le mode En direct (il vous faudra peut-être appuyer une fois sur la flèche Haut si l'élément <a> est sélectionné). Attribuez ensuite à l'élément <h2> l'ID menulink via le bouton + de l'affichage des éléments.
   
   
5. Examinez le code HTML sous-jacent dans la fenêtre du mode Code. L'élément <nav> doit ressembler à ceci :

Notez que la valeur des attributs id dans les éléments <h2> et <ul> ne commence pas par #. En revanche, la valeur de l'attribut href dans le lien commence effectivement par #. En effet, cette valeur signifie qu'un ID doit être recherché.

Les ID sont précédés d'un symbole # dans l'affichage des éléments ou le panneau DOM pour permettre de les distinguer des classes. Dans CSS, un sélecteur d'ID commence par le symbole # et un sélecteur de classe commence par un point. Dreamweaver utilise donc la même convention dans son interface lors de l'application d'ID et de classes à des éléments.

Remarque : un ID ne peut être utilisé qu'une seule fois par page, tandis qu'une classe peut être appliquée à plusieurs éléments. Les noms d'ID et de classe ne doivent pas contenir d'espace. Pour séparer les mots, utilisez un tiret ou un caractère de soulignement. Vous pouvez aussi utiliser une casse mixte et mettre ainsi la première lettre de chaque mot en majuscule. N'utilisez pas de caractère spécial ni de signe de ponctuation.

6. Lorsque vous créez un ID ou une classe via l'affichage des éléments, le sélecteur associé est toujours ajouté au bas du panneau Sélecteurs. Pour conserver les styles dans un ordre logique, sélectionnez #menulink dans le panneau Sélecteurs, puis placez-le après les autres styles de lien par glisser-déposer. Relâchez le bouton de la souris dès que la barre noire horizontale se trouve juste en dessous du sélecteur de groupe a:hover, a:active, a:focus (voir Figure 4).

7. Placez le sélecteur #navlinks juste en dessous de #menulink.

Mise en forme du lien de déclenchement

Le lien de déclenchement est imbriqué dans un en-tête <h2>. Par défaut, les navigateurs affichent les en-têtes de deuxième niveau en gras et dans une police de grande taille. Ce projet nécessite une police plus petite et moins épaisse. Étant donné qu’il sera utilisé sur les appareils mobiles, le lien doit être aisément accessible, et donc occuper toute la largeur de l'en-tête et non uniquement le texte.

1. Vérifiez que #menulink est sélectionné dans le panneau Sélecteurs de CSS Designer, puis supprimez toutes les marges de l'élément. Il existe deux façons de procéder :
   
   
   • Cliquez sur Définir la forme courte, saisissez 0, puis cliquez en dehors du champ.
   • Cliquez sur l'icône de lien au milieu de l'outil visuel (voir Figure 5), puis définissez un côté sur 0 ou 0 px.

2. Définissez également les propriétés et valeurs suivantes :

Le texte est maintenant centré sur un arrière-plan noir et occupe toute la largeur de l'élément <div> wrapper. Les en-têtes sont traités comme des éléments de niveau bloc occupant tout l'espace horizontal disponible.

3. Dans le mode En direct, vérifiez que l'élément <a> du lien de déclenchement est sélectionné. La bordure de l'affichage des éléments entoure uniquement le texte (voir Figure 6).

4. Créez un sélecteur descendant pour #menulink a. Dans la section Texte du panneau Propriétés, définissez ensuite les propriétés et valeurs suivantes :

5. Cliquez sur l'icône  pour revenir à la section Disposition, puis définissez les propriétés et valeurs suivantes :

Dès que la propriété display est définie sur block, l'affichage des éléments de la balise <a> occupe toute la largeur de l'en-tête et le rend ainsi entièrement cliquable (voir Figure 7).

Mise en forme des liens de navigation

Les liens de navigation sont placés dans une liste non numérotée. Pour les mettre en forme, vous devez supprimer les puces, ainsi que les marges intérieures et extérieures appliquées par défaut aux listes par les navigateurs. Vous allez également les rendre cliquables sur toute leur largeur en utilisant la même technique que pour le lien de déclenchement.

1. Sélectionnez #navlinks dans le panneau Sélecteurs de CSS Designer, puis définissez les propriétés et valeurs suivantes dans la section Disposition du panneau Propriétés :

2. Cliquez sur l'icône  pour accéder aux propriétés de texte, puis définissez text-align sur center.
   
   
3. Au bas de la section Texte, définissez la propriété list-style-type sur none pour supprimer les puces.
   
   
4. Cliquez sur l'icône  pour accéder aux propriétés d'arrière-plan, puis sur la zone de couleur de la propriété background-color pour afficher le sélecteur de couleurs. La couleur par défaut est le noir. Au lieu d'appliquer une couleur unie, vous allez utiliser une semi-transparence.
   
   Cliquez sur le bouton RGBa au bas du sélecteur de couleurs, puis faites glisser le curseur Alpha (le troisième à droite) d'environ un tiers vers le bas. La valeur dans le champ en bas à gauche doit correspondre à peu près à rgba(0,0,0,0.65) (voir Figure 8).

Le format de couleur RGBa comprend quatre valeurs séparées par des virgules. Les trois premières définissent les composantes Red, Green et Blue (rouge, verte, bleue) de la couleur à l'aide d'un nombre entier compris entre 0 et 255, et la dernière définit la transparence alpha sur une plage comprise entre 0 (totalement transparente) et 1 (totalement opaque).

Cliquez en dehors du sélecteur de couleurs pour le fermer.

5. Les anciens navigateurs ne reconnaissant pas le format de couleur RVBa, il faut impérativement définir une autre couleur d'arrière-plan. Pour ce faire, vous devez modifier manuellement la feuille de style en mode Code.
   
   Cliquez avec le bouton droit sur le sélecteur #navlinks dans le panneau Sélecteurs, puis choisissez Atteindre le code dans le menu contextuel (voir Figure 9).

Le mode Fractionner s'affiche avec le point d'insertion situé à la fin de la règle de style sélectionnée.

6. Insérez une ligne au-dessus de la définition de background-color, puis ajoutez le code suivant :

Lorsque vous tapez le symbole #, le sélecteur de couleurs s'affiche. Appuyez sur Entrée/Retour pour le fermer. Dreamweaver insère le code hexadécimal du noir. N'oubliez pas d'ajouter un point-virgule à la fin de la ligne. La règle de style modifiée doit être identique à celle illustrée en Figure 10.

En spécifiant la couleur deux fois comme ici, vous tirez parti de la hiérarchie CSS. La seconde valeur remplace la première dans les navigateurs qui prennent en charge le format RVBa. Les navigateurs qui ne le reconnaissent pas ignorent la seconde définition et appliquent un arrière-plan noir uni à l'aide de la valeur hexadécimale spécifiée.

7. Fermez le mode Fractionner en cliquant sur le bouton En direct.
   
   
8. Créez un sélecteur descendant #navlinks a pour les liens du menu de navigation, puis définissez les propriétés et valeurs suivantes dans la section Disposition :

9. Cliquez sur l'icône  pour accéder aux propriétés de texte, puis définissez les valeurs suivantes :

Le menu de navigation a désormais l'apparence illustrée en Figure 11.

Bien que les liens de navigation soient toujours dans une liste non numérotée, les styles ont totalement transformé leur apparence.

Affichage et masquage du menu de navigation

L'affichage et le masquage du menu s'effectuent à l'aide de CSS et de JavaScript. À chaque pression ou clic sur le lien de déclenchement, ou lorsque la largeur de l'aire d'affichage du navigateur devient inférieure à une certaine valeur, JavaScript change le nom de la classe appliquée à la liste non numérotée des liens de navigation.  Le menu ne sera masqué que si JavaScript est activé.

Vous ajouterez le fichier JavaScript à la page ultérieurement. Dans un premier temps, le menu de navigation doit être mis en forme dans son état affiché.

1. La position du menu de navigation, qu'il soit affiché ou masqué, est contrôlée par le positionnement absolu CSS. Sélectionnez #navlinks dans le panneau Sélecteurs de CSS Designer, puis définissez la propriété position sur absolute (elle se trouve dans la section Disposition du panneau Propriétés, juste en dessous de l'outil visuel de définition des marges intérieures).
   
   L'image du Golden Gate Bridge remonte et passe derrière les liens de navigation (voir Figure 12).

En effet, les éléments à positionnement absolu sont supprimés du flux normal du document et flottent sur un calque différent, devant les autres éléments.

2. Dans le panneau DOM, ajoutez une classe à la liste non numérotée en double-cliquant sur #navlinks pour ouvrir le champ modifiable. Insérez un espace après #navlinks, puis saisissez .displayed (n'oubliez pas le point au début), comme illustré en Figure 13. Cliquez en dehors du champ pour confirmer la modification.

Même si vous pouvez passer par l'affichage des éléments pour attribuer la classe à la liste non numérotée, l'utilisation du panneau DOM a pour avantage de ne pas créer automatiquement de sélecteur dans le panneau Sélecteurs de CSS Designer.

3. Vérifiez que #navlinks est sélectionné dans le panneau Sélecteurs, puis cliquez sur le signe + pour créer un sélecteur. Saisissez #navlinks.displayed dans le champ.
   
   Veillez à n'insérer aucun espace entre #navlinks et le point au début du sélecteur de classe. Il ne s'agit pas d'un sélecteur descendant : #navlinks.displayed sélectionne un élément dont l'ID est navlinks et la classe displayed.
   
   
4. Dans la section Disposition du panneau Propriétés, utilisez l'outil visuel en dessous de la propriété position pour définir top sur 135 px (voir Figure 14). 

Techniquement parlant, cette opération définit la position absolue du haut de la liste non numérotée sur 135 px, en partant du haut de son conteneur. Ici, le conteneur étant la page, la liste est positionnée à 135 px du haut de la page. Vous découvrirez plus en détail le principe de positionnement absolu dans la septième partie du tutoriel.

5. Toujours dans la section Disposition, définissez z-index sur 1 et opacity sur 1.
   
   Pour définir la propriété z-index, sélectionnez value dans le menu déroulant, puis tapez 1. Cette propriété définit l'ordre d'empilement des éléments positionnés et évite que le menu de navigation ne soit masqué par un autre élément.
   
   La valeur de la propriété opacity est comprise entre 0 (totalement transparent) et 1 (totalement opaque). Le menu disparaîtra et apparaîtra ainsi progressivement.
   
   
6. Créez un sélecteur #navlinks.start, puis définissez la propriété display sur none.
   
   
7. Créez un sélecteur #navlinks.collapsed, puis définissez les propriétés et valeurs suivantes :

La définition d'une valeur négative pour la propriété top place le haut de la liste non numérotée hors de la vue, au-delà du haut de la page. Elle est également invisible lorsque l'opacité est définie sur 0.

8. Pour activer le menu, vous devez joindre le fichier JavaScript à la page. Le fichier contient une fonction qui recherche les ID nommés. Il doit donc être joint une fois la totalité du code HTML chargé. Pour insérer le script au bon endroit, sélectionnez le pied de page dans le mode En direct, puis choisissez Insertion > HTML > Script.
   
   
9. Le script devant être positionné après le pied de page, sélectionnez l'option Après dans l'assistant de position. La boîte de dialogue Sélectionner un fichier s'affiche. Accédez au dossier js à la racine du site, sélectionnez le fichier menu.js, puis cliquez sur OK (Windows) ou Ouvrir (Mac OS).
   
   Si vos définitions de style et votre code HTML sont corrects, le menu de navigation doit disparaître du mode En direct. En effet, la fonction du fichier JavaScript modifie la classe du menu de navigation pour appliquer la classe start, en définissant la propriété display sur none. En une fraction de seconde, elle applique ensuite la classe collapsed, pour que le menu soit prêt à s'afficher lorsque l'utilisateur clique sur le lien de déclenchement.
   
   
10. Cliquez sur MENU au-dessus de l'image du Golden Gate Bridge. Le menu de navigation s'affiche. Cliquez de nouveau dessus, et le menu disparaît. Vous allez maintenant créer une transition plus fluide.
    
    
11. Cliquez avec le bouton droit sur #navlinks dans le panneau Sélecteurs de CSS Designer, puis choisissez Atteindre le code dans le menu contextuel.
    
    
12. Ajoutez les deux lignes de code suivantes juste avant l'accolade fermante de la règle de style #navlinks en vous aidant des indicateurs de code :

Ce code indique au navigateur d'appliquer toutes les propriétés à l'élément et à ses descendants dans le cadre d'une transition d'une demi-seconde. L'instruction ease-out ralentit la transition vers la fin.

La règle de style modifiée doit être identique à celle illustrée en Figure 15.

12. Testez de nouveau le menu de navigation. Cette fois-ci, il doit se dérouler et se rétracter.
    
    
13. Dans le menu de navigation affiché, cliquez sur le lien Home pour le sélectionner dans le mode En direct. Cliquez ensuite sur le signe + dans l'affichage des éléments, puis saisissez .thispage dans le champ pour appliquer une classe au lien.
    
    Appuyez sur Tab ou Entrée/Retour pour confirmer la modification. À l'affichage de la fenêtre contextuelle vous invitant à sélectionner une source, appuyez sur Échap. Il est inutile de créer un sélecteur à ce stade, car le style sera intégré à un sélecteur bien plus long.
    
    
14. Sélectionnez #navlinks a dans le panneau Sélecteurs de CSS Designer, puis cliquez sur le signe + pour créer un sélecteur. Saisissez le sélecteur de groupe suivant dans le champ modifiable :
    
    #navlinks a:hover, #navlinks a:active, #navlinks a:focus, #navlinks a.thispage

    Les liens de navigation des pseudo-classes :hover, :active et :focus sont ainsi mis en forme, de même que le lien de navigation avec la classe .thispage.
    
    
15. Dans la section Texte du panneau Propriétés, définissez la propriété color sur #F68979. Désormais, le lien Home ainsi que les autres liens de navigation deviennent roses lorsque vous les survolez.
    
    
16. Enregistrez votre travail en sélectionnant Fichier > Enregistrer tous les fichiers associés.

Problèmes potentiels

Même si tout s'est déroulé correctement jusqu'à présent, il se peut que le menu ne fonctionne pas. Si c'est le cas, vous avez dû commettre une erreur quelque part. Les navigateurs (ainsi que le mode En direct de Dreamweaver dans une certaine mesure) peuvent tolérer certaines erreurs dans le code HTML, ainsi que dans les feuilles de style CSS. Ce n'est malheureusement pas le cas de JavaScript : une seule erreur et rien ne fonctionne.

Le script du fichier menu.js utilise une IIFE (Immediately Invoked Function Expression). Cette fonction est exécutée immédiatement. Elle utilise trois arguments : l'ID du lien de déclenchement, l'ID de la liste non numérotée et un chiffre indiquant le point d'arrêt auquel le menu doit être masqué lorsque l'aire d'affichage du navigateur est redimensionnée. Si vous avez attribué des ID différents aux éléments ou que vous les avez écrits différemment, la fonction ne pourra pas s'exécuter. Il en ira de même si vous n'avez pas mal orthographié le nom des classes start, collapsed et displayed. JavaScript étant sensible à la casse, menulink et menuLink sont traités comme des valeurs totalement différentes.

Vous pouvez aussi avoir commis des erreurs dans votre feuille de style CSS. Les trois derniers sélecteurs que vous avez définis, #navlink.displayed, #navlink.start et #navlink.collapsed, ne doivent comporter aucun espace. Vérifiez également que vous n'avez pas oublié d'ajouter un point-virgule à la fin de chaque ligne dans les règles de style que vous avez saisies manuellement.

Si le menu ne fonctionne toujours pas, comparez vos fichiers avec ceux fournis en exemple dans le dossier part6. Peu importe si les numéros de ligne sont différents. Recherchez les différences dans le code. Dreamweaver peut être intégré avec un utilitaire tiers de comparaison de fichiers, qui facilite l'identification des différences. Consultez les fichiers d'aide pour en savoir plus sur la configuration et l'utilisation de la comparaison de fichiers.

Ne vous laissez pas décourager par vos erreurs. Elles font partie du processus d'apprentissage. Même les experts en commettent. La différence, c'est qu'avec leur expérience, ils savent les repérer et les corriger plus rapidement.

Vous avez maintenant terminé la version à une colonne du site Bayside Beat. L’étape suivante consiste à adapter la mise en page pour créer une version à deux colonnes et à modifier le style du menu de navigation.