L'avantage d'utiliser une feuille de style externe, c'est que les styles sont immédiatement appliqués à chaque page à laquelle la feuille est jointe. Après avoir lié la feuille de style à la page sights.html, vous devrez mettre à jour le menu de navigation sur la deuxième page.

1. Cliquez sur le bouton Parcourir dans la boîte de dialogue qui s'affiche, puis sélectionnez le fichier responsive.css dans le dossier styles. Cliquez sur OK (Windows) ou Ouvrir (macOS), puis sur OK pour fermer la première boîte de dialogue.
   
   En joignant une feuille de style, l'apparence de la page est immédiatement modifiée. Dreamweaver détecte également que les styles utilisent une police Adobe Edge Web Fonts et insère le code permettant de la télécharger.
   

2. Le menu de navigation a toujours l'apparence d'une liste non numérotée. Dans le panneau DOM, sélectionnez la liste non numérotée (elle est imbriquée entre les éléments header et nav). Double-cliquez sur l'élément ul pour le modifier, puis saisissez #navlinks .displayed dans le champ à droite. Les indicateurs de code s'affichent pour l'ID et la classe (voir Figure 4).

La mise en forme du menu de navigation est modifiée. Celui-ci est positionné de manière absolue par-dessus le premier en-tête et les paragraphes suivants. Si la fenêtre du mode En direct fait plus de 1 000 px de large, l'arrière-plan semi-transparent dépasse de l'élément

1. Pour finaliser le menu de navigation, vous devez ajouter le lien de déclenchement et le fichier JavaScript. Vous pouvez procéder de plusieurs manières, mais étant donné que vous travaillez dans le panneau DOM, poursuivons avec celui-ci.
   
   Sélectionnez la page index.html dans la fenêtre Document, cliquez avec le bouton droit sur h2 #menulink dans le panneau DOM, puis sélectionnez Copier dans le menu contextuel (voir Figure 7).

1. Réaffichez la page sights.html puis, dans le panneau DOM, sélectionnez l'élément nav , cliquez dessus avec le bouton droit et choisissez Coller en tant qu'enfant.
   
   Attention : si vous sélectionnez Coller au lieu de Coller en tant qu'enfant, le lien de déclenchement sera inséré en tant qu'élément frère de l'élément nav (autrement dit, au même niveau dans la hiérarchie HTML), et se situera donc en dessous de l'élément ul dans le panneau DOM. Il apparaîtra toutefois au bon endroit dans le mode En direct, car la liste non numérotée est positionnée de manière absolue et donc hors du flux normal du document.
   
   Consultez le panneau DOM pour vérifier que le lien h2 #menulink est correctement imbriqué dans l'élément nav au-dessus de la liste non numérotée, comme illustré en Figure 8.

Si le lien h2 #menulink se trouve en dessous de la liste non numérotée, annulez l'opération en appuyant sur Ctrl + Z (Windows) ou Cmd + Z (macOS). Sélectionnez de nouveau l'élément nav , cliquez dessus avec le bouton droit, puis choisissez Coller en tant qu'enfant.

Plutôt que de copier la version non définitive du menu de navigation créée dans la troisième partie et de la mettre à jour ici, il aurait pu sembler logique de la finaliser au préalable. En pratique, le développement web se déroule rarement de manière fluide. Votre client ou vous-même pouvez avoir de nouvelles idées ou de nouveaux impératifs. Il est donc important de savoir comment copier des éléments sur d'autres pages. Cet exercice vous aura également permis de vérifier l'imbrication des éléments. La page aurait tout de même fonctionné avec le script imbriqué dans le pied de page, mais un code mal imbriqué provoque souvent des problèmes. Leur résolution est bien plus aisée lorsque le code est correctement structuré.

Le problème vient du fait que la police du corps est déclarée comme source-sans-pro avec une propriété font-weight de 400 (épaisseur normale). Lorsque vous avez créé cette règle de style dans la quatrième partie, Dreamweaver a initialement défini la propriété font-weight sur 200 (épaisseur fine). Par conséquent, le script chargeant la police Adobe Edge Web Fonts sur la page index.html télécharge les deux épaisseurs. Mais lorsque vous avez joint la feuille de style à la page sights.html, Dreamweaver a uniquement identifié la police source-sans-pro avec la propriété font-weight normale. Pour corriger le problème, vous devez modifier les styles utilisant une épaisseur différente.

En général, il est nécessaire de spécifier la propriété font-family dans une autre règle de style que le corps uniquement lorsque l'on souhaite utiliser une police différente. Ici, en revanche, vous utilisez une police Edge Web Fonts qui doit être téléchargée à partir des serveurs Adobe. Pour minimiser la taille du téléchargement, Dreamweaver ne récupère que les épaisseurs qui seront utilisées. Bien que l'épaisseur semi-bold (600) ne soit utilisée que sur la page index.html, la propriété supplémentaire font-weight sera stockée dans le cache du navigateur lors de la consultation de la page sights.html. Il est donc peu probable qu'elle affecte les performances. Toutefois, si vous utilisez de nombreuses polices web (ce qui d'ailleurs est déconseillé), vous devez réfléchir à deux fois avant de télécharger des polices qui ne seront pas utilisées.

Dans la cinquième partie, vous avez inséré des images dans les éléments

Si nécessaire, actualisez le contenu du panneau en cliquant sur la flèche circulaire en bas à droite. Vous pouvez aussi agrandir le panneau d'aperçu rapide en faisant glisser son bord inférieur vers le bas.

1. Utilisez l'inspecteur Propriétés rapide pour supprimer la largeur et la hauteur de l'image. Supprimez le texte de substitution de l'élément

   , puis remplacez la légende par « Alcatraz—former exclusive residence for notorious criminals ».
   

2. Sélectionnez l'image d'Alcatraz, puis utilisez l'affichage des éléments pour lui appliquer la classe grayscale (n'oubliez pas d'ajouter un point au début de la ligne pour indiquer qu'il s'agit d'une classe).
   

3. Enregistrez le fichier sights.html.

Les requêtes multimédias sont une fonctionnalité relativement récente dans CSS, mais elles sont d'ores et déjà prises en charge par tous les navigateurs modernes. Les seules exceptions notables concernent Internet Explorer 8 et les versions antérieures. Leur support n'étant plus officiellement assuré par Microsoft, le nombre d'utilisateurs de ces navigateurs diminue rapidement. Le principal avantage des requêtes multimédias est qu'elles permettent de transmettre différents jeux de styles CSS aux navigateurs en fonction de certaines caractéristiques, par exemple la largeur de l'écran, son orientation, sa densité de pixels, etc. Ici, vous allez créer seulement deux requêtes multimédias, reposant sur la largeur minimale de l'écran.

1. Faites glisser le curseur de défilement du mode En direct pour que la fenêtre Document atteigne environ 700 px de large. La valeur exacte importe peu, de même que le document actif (index.html ou sights.html).
   

2. Cliquez sur l'icône dans la règle en haut de la fenêtre Document pour ouvrir le panneau contextuel de définition des requêtes multimédias (voir Figure 14).

1. Sélectionnez min-width dans le menu déroulant supérieur, définissez la valeur du champ min-width sur 700 px, puis sélectionnez le fichier responsive.css dans le dernier menu déroulant. Vérifiez que vos paramètres sont identiques à ceux présentés en Figure 15, puis cliquez sur OK.

1. La barre de requêtes multimédias visuelles en haut de la fenêtre Document affiche désormais une barre violette. Cliquez sur cette barre pour que la fenêtre Document fasse exactement 700 pixels de large.
   

2. Vérifiez que le bouton Tout est activé dans la partie supérieure de CSS Designer. Sélectionnez responsive.css dans le panneau Sources, puis développez le panneau @Requêtes multimédias. La requête multimédia y est maintenant répertoriée. Lorsque vous la sélectionnez, le panneau Sélecteurs n'affiche plus rien (voir Figure 16).

La barre de requêtes multimédias visuelles est particulièrement intéressante lorsque vous utilisez plusieurs requêtes multimédias. La ligne supérieure présente les requêtes max-width sous forme de barres vertes, la ligne du milieu présente les requêtes avec des largeurs minimale et maximale sous forme de barres bleues et la ligne du bas présente les requêtes min-width sous forme de barres violettes. En cliquant sur la barre de votre choix, vous redimensionnez la fenêtre Document, ce qui vous permet de visualiser l'effet de vos différentes règles de style. Consultez la documentation en ligne pouren savoir plus sur la barre de requêtes multimédias visuelles .

Le menu de navigation s'affichera en permanence dans la mise en page à deux colonnes. Étant donné que vous savez désormais créer des sélecteurs et des règles de style, les instructions qui suivent sont relativement succinctes.

La définition de la valeur static pour la propriété position signifie que la liste non numérotée des liens de navigation n'est plus positionnée de manière absolue et s'affiche dans sa position normale sur la page, repoussant le reste du contenu vers le bas. Les liens ne sont pas encore visibles, car la classe réduite a été appliquée de manière dynamique par le code JavaScript du fichier menu.js.

Le menu de navigation comportant cinq liens, vous devez définir la propriété width de chacun d'entre eux sur 20 % et les aligner sur la gauche pour les espacer de manière régulière sur la page. La définition de la propriété max-width sur 1 000 px à l'étape 5 les empêche de déborder de l'élément

La propriété float est actuellement le moyen le plus fiable d'aligner horizontalement les éléments de niveau bloc. Bien que les liens ne soient pas normalement de niveau bloc, leur propriété display a été définie sur block dans les styles globaux créés dans les parties 4 à 6 du tutoriel.

Dans la cinquième partie, vous avez mis en forme le paragraphe sous l'image du Golden Gate Bridge avec une police rose de type semi-bold et une bordure inférieure. Pour la mise en page à deux colonnes, vous allez utiliser le positionnement absolu pour placer le paragraphe par-dessus l'image, puis le mettre en forme avec une autre couleur et une bordure de chaque côté. Vous apprendrez également à éviter un erreur courante en matière de positionnement absolu.

Lorsque vous définissez la valeur absolute pour la propriété position, le titre « Riding the Cable Cars » et le texte qui suit remontent sur la page et passent derrière le paragraphe en cours de mise en forme. Le positionnement absolu supprime un élément du flux normal du document et le place dans un calque au-dessus des autres éléments.

1. Définissez la propriété color sur white, la largeur des quatre côtés de la bordure sur 5 px et le style sur solid. La Figure 19 illustre le nouvel emplacement du paragraphe sur l'image du Golden Gate Bridge.

1. Double-cliquez sur la zone grise sur le côté du mode En direct pour qu'elle occupe toute la largeur de la fenêtre Document. Quelle que soit la largeur de votre écran, le résultat sera médiocre (voir Figure 20).

Dans cette situation, on a tendance à croire que l'élément positionné de manière absolue a bougé. Pourtant, ce n'est pas le cas. Les décalages par rapport au bords supérieur et droit de la page sont exactement les mêmes. Le problème vient du fait que les décalages sont calculés en fonction du conteneur de l'élément positionné. Dans le cas présent, l'élément positionné est imbriqué dans l'élément

À 700 pixels, le texte doit toujours être au même emplacement qu'en Figure 19.

La définition de la valeur relative pour la propriété position d'un élément permet de décaler ce dernier par rapport à sa position normale sur la page sans affecter les éléments environnants. Ici, aucun décalage n'étant spécifié pour l'élément

L'utilisation conjointe du positionnement absolu et du positionnement relatif est utile pour les tâches individuelles, par exemple pour le positionnement du texte sur une image comme ici, mais elle est généralement déconseillée pour l'agencement d'une page entière. Le web est un support fluide.

Précédemment, vous avez utilisé la propriété float pour aligner les liens de navigation horizontalement. Cette même propriété constitue actuellement le moyen le plus fiable de créer une mise en page à deux colonnes. Lorsqu'un élément flotte à gauche ou à droite, il se déplace vers ce côté, ce qui permet aux éléments suivants d'occuper l'espace ainsi libéré. Pour que les éléments flottent, ils doivent avoir une propriété width ou max-width déclarée.

C'est tout à fait normal. À l'instar des éléments à positionnement absolu, les éléments flottants ne font plus partie du flux principal du document. En fait, l'élément

1. Créez un sélecteur pour footer , puis définissez la propriété clear sur left. Tous les éléments retrouvent leur place normale.

La technique appelée flexbox aurait également pu être utilisée pour la mise en page à deux colonnes. Elle est prise en charge par tous les navigateurs modernes. Malheureusement, il est difficile d'assurer une mise en œuvre fiable d'un navigateur à l'autre sachant que nombre d'entre eux intègrent des versions plus anciennes des propriétés flexbox.

L'objectif initial de la propriété float était de positionner du texte autour de certaines images. Pour finaliser le site, vous allez créer une deuxième requête multimédia et positionner le texte autour des images de la page sights.html dès que l'aire d'affichage du navigateur dépasse 900 px.

1. Cliquez à droite de 900 px dans la barre de requêtes multimédias visuelles pour redéfinir la largeur de la fenêtre du mode En direct à 900 px.
   

2. Sélectionnez l'image du funiculaire en haut de la page sights.html, puis appuyez une fois sur la flèche Haut pour sélectionner son élément

   parent. Cliquez sur le signe plus (+) dans l'affichage des éléments. Saisissez .floatright dans le champ modifiable, puis appuyez sur Tab ou Entrée/Retour pour attribuer la classe. Dans la fenêtre contextuelle, vérifiez que le fichier responsive.css est sélectionné, puis sélectionnez la requête multimédia min-width: 900px dans le deuxième menu déroulant (voir Figure 24).

1. Sélectionnez min-width: 900px dans le panneau @Requêtes multimédias de CSS Designer, puis .floatright dans le panneau Sélecteurs. Définissez les propriétés et valeurs suivantes pour la classe :

Si l'image ne se déplace pas à droite, cela signifie que vous avez probablement appliqué la classe à l'image elle-même, et non à son élément

1. Enregistrez votre travail en sélectionnant Fichier > Enregistrer tous les fichiers associés.

Votre site en responsive design est terminé. Il reste une dernière opération à effectuer pour qu’il s’affiche correctement sur les appareils mobiles.

Dans la catégorie HTML du panneau Insertion, sélectionnez Aire d'affichage (voir Figure 26). Cet élément se trouve dans la troisième section, à environ deux tiers du bas du menu.

Malgré sa longueur et sa relative complexité, ce tutoriel vous aura permis d'apprendre à utiliser Dreamweaver 2015 et d'en savoir plus sur l'état actuel du design web. Si certaines techniques vous ont semblé difficiles à maîtriser, réétudiez les parties correspondantes. Les bases des langages HTML et CSS sont relativement simples à assimiler, mais le design web devient de plus en plus sophistiqué. On ne peut pas devenir expert du jour au lendemain dans ce domaine. Les graphistes insistant sur le fait qu'ils sont designers et non programmeurs passent à côté d'un point essentiel : la création d'un site web relève effectivement du design, mais tout repose sur le code. Si Dreamweaver rédige la majorité du code de manière automatique, il faut toutefois être capable d'identifier les propriétés et valeurs CSS nécessaires pour obtenir l'effet souhaité.

Si vous rencontrez des problèmes de mise en page ou de design, publiez la page problématique sur un site web et posez votre question sur leforum d'assistance Dreamweaver . Indiquez l'URL de la page et décrivez brièvement le problème dans votre publication. Quelqu'un vous aidera certainement.

Pour apprendre à transférer vos pages web et d’autres ressources sur un serveur web, passez à la dernière partie de ce tutoriel.