Dans la septième partie de ce tutoriel, vous apprendrez à utiliser des requêtes multimédias CSS pour passer de deux colonnes à une seule lorsque le site est consulté dans un navigateur mobile.
5496-create-first-website_1408x792

Remarque : les téléchargements 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 septième partie de ce tutoriel sur l'élaboration d'un site web simple en responsive design dans Dreamweaver CC 2015. Le projet est presque terminé. Il ne reste plus qu'à finaliser la deuxième page et à adapter la mise en page à une colonne du site Bayside Beat (voir Figure 1) pour obtenir une version à deux colonnes sur les tablettes et les postes de travail.

fig01
Figure 1. La mise en page à une seule colonne est adaptée aux petits écrans des terminaux mobiles.

L'utilisation d'une autre mise en page pour les résolutions d'écran plus élevées s'effectue à l'aide de requêtes multimédias CSS. Une requête multimédia teste différentes règles de style et les transmet au navigateur en fonction de certains critères, comme la largeur maximale ou minimale de l'aire d'affichage. Par souci de simplicité, vous allez créer seulement deux requêtes multimédias : une pour afficher la page sur deux colonnes lorsque la largeur de l'écran est d'au moins 700 pixels, et une autre pour agencer le texte autour de certaines images lorsque la largeur de l'écran est d'au moins 900 pixels. À la fin de cette partie, la page d'accueil aura l'apparence de celle illustrée en Figure 2.

fig02
Figure 2. Présentation de la mise en page à deux colonnes finalisée.

Dans cette partie, vous apprendrez à éviter les problèmes liés au positionnement absolu. Mais dans un premier temps, vous allez vous concentrer sur la deuxième page, qui n'a pas encore été mise en forme.

Mise en forme de la deuxième page

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. Pour ouvrir le fichier sights.html dans la fenêtre Document, double-cliquez dessus dans le panneau Fichiers.

  2. Dans CSS Designer, cliquez sur le signe + en haut à gauche du panneau Sources, puis sélectionnez Joindre un fichier CSS existant (voir Figure 3).
fig03
Figure 3. Le panneau Sources permet de créer ou de joindre une feuille de style, ou d'incorporer des styles dans la page active.
  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 (Mac OS), 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).
fig04
Figure 4. Le panneau DOM propose des indicateurs de code pour les ID et les classes définis dans la feuille de style.

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 <div> wrapper sur la droite. Cela n'a pas d'importance. Le problème sera résolu dans la mise en page à deux colonnes.

  1. Dans le panneau DOM, développez l'élément ul, puis le deuxième élément li, et sélectionnez l'élément a imbriqué à l'intérieur. Pour être certain d'avoir sélectionné le bon élément, vérifiez que le lien SIGHTS est sélectionné dans le mode En direct.

    Dans le panneau DOM, double-cliquez sur l'élément a, puis attribuez-lui la classe thispage (voir Figure 5).
fig05
Figure 5. Attribution d'une classe au deuxième lien du menu de navigation.

Lorsque vous appuyez sur Entrée/Retour pour valider la modification, la classe apparaît également dans l'affichage des éléments, et le deuxième lien change de couleur (voir Figure 6).

fig06
Figure 6. La classe qui identifie la page active a été appliquée au deuxième lien.
  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).
fig07
Figure 7. Copie du lien de déclenchement de la page index.html.
  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.
fig08
Figure 8. Le lien de déclenchement doit être imbriqué à l'intérieur de l'élément nav.

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 (Mac OS). Sélectionnez de nouveau l'élément nav, cliquez dessus avec le bouton droit, puis choisissez Coller en tant qu'enfant.

  1. Réaffichez la page index.html puis, au bas du panneau DOM, cliquez avec le bouton droit sur l'élément script et choisissez Copier dans le menu contextuel.

  2. Sélectionnez de nouveau la page sights.html puis, dans le panneau DOM, cliquez avec le bouton droit sur l'élément footer et choisissez Coller dans le menu contextuel.

    Cette fois-ci, vous devez utiliser l'option Coller, et non Coller en tant qu'enfant. En effet, le script doit se trouver après le pied de page, et non être imbriqué à l'intérieur.

    Une fois le script joint, le menu de navigation est masqué de la même manière que sur la page index.html. Si la largeur de la fenêtre Document est supérieure à 1 000 px, l'ajout du script déplacera peut-être l'enveloppe vers la gauche dans le mode En direct. Le cas échéant, appuyez sur F5 pour actualiser la page.

  3. Enregistrez le fichier sights.html.

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é.

Correction du problème de police du lien de déclenchement

Dans la section précédente, vous avez alterné entre les pages index.html et sights.html à plusieurs reprises. À cette occasion, vous avez peut-être remarqué une différence entre le lien de déclenchement sur les deux pages. En effet, le texte MENU sur la page index.html est moins épais que sur la page sights.html (voir Figure 9).

fig09a
Figure 9. Le texte du lien de déclenchement sur la page sights.html (ci-dessous) est plus épais que sur la page index.html.
fig09b

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.

  1. Activez la page sights.html dans la fenêtre Document, puis sélectionnez #menulink dans le panneau Sélecteurs de CSS Designer.

  2. Si nécessaire, désactivez la case à cocher Ensemble dans le panneau Propriétés, cliquez sur l'icône  pour accéder aux propriétés de texte, puis définissez font-family sur source-sans-pro. Le script de la section <head> qui télécharge les polices Edge Web Fonts est alors mis à jour.

  3. Revenez à la page index.html, puis sélectionnez la règle de style pour #hero p dans le panneau Sélecteurs de CSS Designer. La propriété font-weight est ainsi déclarée à 600. Cette valeur correspondant à une épaisseur supérieure à celle de la propriété font-weight, les navigateurs (y compris le mode En direct) interprètent la police comme étant de type semi-bold. Ce n'est pas ici le résultat recherché. Définissez également font-family sur source-sans-pro pour cette règle. Le texte du paragraphe est maintenant bien plus net.

  4. Étant donné que vous avez modifié plusieurs fichiers, sélectionnez Fichier > Enregistrer tout.

  5. Dreamweaver vous demande si vous souhaitez mettre à jour les polices web dans le fichier sights.html (voir Figure 10).
fig10
Figure 10. Dreamweaver vous propose de mettre à jour le script des polices web dans les autres pages.
  1. Cliquez sur Mettre à jour, puis sur Fermer pour fermer la boîte de dialogue confirmant la mise à jour. Dreamweaver enregistre automatiquement les fichiers qu'il actualise.

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.

Insertion d'images à partir d'une source locale

Dans la cinquième partie, vous avez inséré des images dans les éléments <figure> directement à partir de la bibliothèque CC Bayside. En général, vous utiliserez surtout des images stockées localement. Dans cette section, vous allez ajouter deux images sur la page sights.html via différentes méthodes. Le processus est très semblable à celui de la cinquième partie, c'est pourquoi les instructions fournies ici sont succinctes.

  1. Dans le panneau Bibliothèques CC, cliquez avec le bouton droit sur l'image nommée alcatraz, puis sélectionnez Télécharger la ressource non liée dans le menu contextuel.

  2. Dans la boîte de dialogue qui s'affiche, choisissez le format JPEG, puis rééchantillonnez l'image en spécifiant les valeurs 400 x 266.

  3. Répétez les deux étapes précédentes pour télécharger l'image cable_car2. Étant donné que vous avez défini le dossier images comme dossier d'images par défaut dans la première partie, les deux images sont extraites de la Bibliothèque CC et téléchargées dans le dossier images du site Bayside Responsive.

  4. Dans la page sights.html, sélectionnez le premier paragraphe (il commence par « The precipitous hills (...) ») dans le mode En direct.

  5. Dans la catégorie HTML du panneau Insertion, sélectionnez Figure pour insérer un élément <figure> avec un élément <figcaption> imbriqué. Dans l'assistant de position, sélectionnez Après.

  6. Vérifiez que l'élément <figure> est toujours sélectionné, puis utilisez l'une des méthodes suivantes pour insérer l'image cable_car2.jpg :

    • Dans la section HTML du panneau Insertion, cliquez sur Image.
    • Choisissez Insertion > Image.
    • Utilisez le raccourci clavier Ctrl + Alt +I (Windows) ou Cmd + Opt + I (Mac OS).
       
  7. Dans l'assistant de position, choisissez Imbriquer, puis sélectionnez l'image cable_car2.jpg dans la boîte de dialogue qui s'affiche.

  8. 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 <figure>, puis remplacez celui de la légende par « The front seat of a cable car affords a great view of the city ».

  9. Insérez un élément <figure> avec <figcaption> entre les troisième et quatrième paragraphes.

  10. Contrairement au panneau Fichiers, vous pouvez faire glisser une image locale à partir du panneau Actifs qui, par défaut, est ancré avec le panneau DOM dans l'espace de travail Création.

    Affichez le panneau en cliquant sur l'onglet correspondant, et vérifiez que l'icône Images est activée en haut à gauche (voir Figure 11).
fig11
Figure 11. Le panneau Actifs répertorie la totalité des images, couleurs, URL et médias du site actif.

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. Sélectionnez l'image alcatraz.jpg dans la liste des fichiers ou dans le panneau d'aperçu rapide, puis déposez-la dans le mode En direct. Comme dans la cinquième partie du tutoriel, faites glisser l'image jusqu'à ce qu'une ligne verte s'affiche au-dessus de l'élément <figure>, marquez un temps d'arrêt, puis placez le curseur de la souris sur l'icône </> qui s'affiche. Continuez à faire glisser l'image dans le panneau DOM flottant, puis relâchez le bouton de la souris lorsque le curseur se trouve au-dessus de l'élément figure (voir Figure 12). L'image s'imbrique alors dans l'élément.
fig12
  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 <figure>, 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.

Ajout d'une requête multimédia pour mettre en forme le site pour les tablettes et postes de travail

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. Comme vous n'avez plus besoin du panneau Bibliothèques CC, faites glisser son onglet à côté du panneau Fragments de code dans le groupe de panneaux sur la droite (voir Figure 13). Déplacez-le vers le haut du groupe de panneaux jusqu'à ce qu'une ligne bleue s'affiche. Relâchez alors le bouton de la souris pour l'ancrer avec les autres panneaux.
fig13
Figure 13. Vous pouvez replacer le panneau Bibliothèques CC dans sa position d'origine.
  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).
fig14
Figure 14. Ce panneau accélère la création des requêtes multimédias.
  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.
fig15
Figure 15 . La nouvelle requête multimédia affectera uniquement les écrans d'une largeur d'au moins 700 pixels.
  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).
fig16
Figure 16. Aucun sélecteur n'a été créé dans la requête multimédia pour le moment.
  1. Cliquez sur GLOBAL dans le panneau @Requêtes multimédias. Tous les sélecteurs créés dans les parties 4 à 6 y sont répertoriés. Ces styles seront appliqués par tous les navigateurs, quelle que soit la largeur de l'écran. Vous pouvez utiliser la requête multimédia pour modifier seulement les valeurs à remplacer lorsque l'écran atteint au moins 700 pixels de large.

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

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 pour en savoir plus sur la barre de requêtes multimédias visuelles

Mise en forme du menu de navigation pour la mise en page à deux colonnes

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.

  1. Vérifiez que la fenêtre Document mesure au moins 700 pixels de large. Le fichier actif (index.html ou sights.html) n'a pas d'importance. Cliquez sur le lien de déclenchement dans le mode En direct pour le sélectionner.

  2. Dans CSS Designer, vérifiez que le bouton Tout est activé, sélectionnez responsive.css dans le panneau Sources, puis cliquez sur (min-width: 700px) dans le panneau @Requêtes multimédias. Le panneau Sélecteurs doit être vide (voir Figure 16).

  3. Cliquez sur le signe plus (+) dans le panneau Sélecteurs, puis créez un sélecteur pour #menulink. Dans la section Disposition du panneau Propriétés, définissez la propriété display sur none. Le lien de déclenchement disparaît.

  4. À l'aide du curseur de défilement du mode En direct, passez à une largeur de page inférieure à 700 px. Le lien de déclenchement réapparaît. Faites glisser le curseur dans le sens inverse. Le lien est masqué dès que la page atteint 700 px de large.

  5. Vérifiez que la requête multimédia est toujours sélectionnée dans le panneau @Requêtes multimédias (cette instruction est valable pour toutes les prochaines modifications), créez un sélecteur pour #navlinks, puis définissez les propriétés et valeurs suivantes :
max-width: 1000px
position: static
background-color: transparent

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.

  1. Créez un sélecteur pour #navlinks.collapsed (sans espace avant ni après le point), puis définissez la propriété opacity sur 1. Le menu réapparaît, mais seul le lien thispage est visible, car la propriété background-color a été définie sur transparent à l'étape précédente. Or, il est impossible de voir des liens blancs sur un arrière-plan de la même couleur.

  2. Pour corriger le problème, créez un sélecteur pour #navlinks a, puis définissez les propriétés et valeurs suivantes :
width: 20%
margin-bottom: 20px
padding-top: 15px
padding-bottom: 15px
float: left (it’s the first icon for this property)
color: #1E1E1E

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

fig17
Figure 17. La mise en forme du menu de navigation a été modifiée pour la mise en page à deux colonnes.

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 <div> wrapper.

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.

Utilisation du positionnement absolu pour placer du texte sur une image

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.

  1. Si nécessaire, activez la page index.html, puis cliquez sur la barre violette dans la barre de requêtes multimédias visuelles pour définir la largeur de la fenêtre Document sur 700 px.

    Si la règle en haut de la page n'est pas correctement définie, fermez puis rouvrez le fichier index.html. Le code JavaScript qui contrôle le menu de navigation sur les écrans de moins de 700 px de large modifie parfois la règle.

  2. Dans le mode En direct, sélectionnez le paragraphe situé en dessous de l'image du Golden Gate Bridge. Vérifiez que le fichier responsive.css et la requête multimédia sont toujours sélectionnés dans CSS Designer, créez un sélecteur pour #hero p, puis définissez les propriétés et valeurs suivantes :
width: 36%
padding-top: 20px
padding-left: 25px
padding-right: 25px
position: absolute

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. À l'aide de l'outil visuel situé juste en dessous de la propriété position, placez le paragraphe en position par-dessus l'image du Golden Gate Bridge en définissant les décalages supérieur et droit. La définition d'une valeur de décalage positive éloigne le côté de l'élément du côté correspondant de son conteneur.

    C'est l'occasion d'utiliser la technique de défilement décrite dans la cinquième partie de ce tutoriel. Après avoir sélectionné px comme unité de mesure, placez votre curseur sur ou juste en dessous de la valeur jusqu'à ce qu'il prenne la forme d'une flèche à double sens (voir Figure 18), puis faites-le glisser vers la droite pour augmenter la valeur, ou vers la gauche pour la réduire.
fig18
Figure 18. Le défilement des valeurs de décalage vous permet de positionner l'élément de manière visuelle.
  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.
fig19
Figure 19. Le texte est maintenant positionné de manière absolue sur l'image.
  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).
fig20
Figure 20. Le texte n'est plus correctement positionné.

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 <div> hero. On pourrait dès lors croire qu'il s'agit de son conteneur.

Toutefois, d'après la spécification CSS, le conteneur d'un élément positionné doit lui aussi être positionné. En l'absence d'un tel élément, c'est la page qui devient le conteneur. La largeur de 36 % dépend donc de la page et non de l'élément <div> hero, et les décalages sont calculés par rapport aux bords supérieur et droit de la page.

  1. Le problème peut être corrigé très facilement. Créez un sélecteur pour #hero, puis définissez sa propriété position sur relative. L'élément <div> parent devient le conteneur du paragraphe positionné de manière absolue, et les décalages ne sont plus calculés en fonction du haut et de la droite de la page.

  2. Ajustez la position du paragraphe en sélectionnant le sélecteur #hero p, puis en redéfinissant la propriété top sur environ 90 px. À une largeur maximale, l'image d'en-tête doit avoir la même apparence qu'en Figure 21.
fig21
Figure 21. Le paragraphe est à présent correctement décalé par rapport à l'élément <div> hero.

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

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

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 <div> hero, l'image d'en-tête ne se déplace pas. En revanche, étant donné que l'élément est positionné, il agit comme conteneur du paragraphe positionné de manière absolue. Cela peut paraître étrange, mais c'est ainsi que le positionnement absolu fonctionne.

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.

Alignement d'une colonne par rapport à l'autre à l'aide de la propriété float

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.

  1. Avec le fichier responsive.css et la requête multimédia sélectionnés dans CSS Designer, créez un sélecteur pour main, puis définissez sa propriété width sur 60 %.

  2. Créez un sélecteur pour aside, puis définissez sa propriété width sur 28 %. Définissez également la marge gauche sur 0 px. Cette opération est nécessaire pour ignorer la marge de 4 % héritée des styles globaux.

    L'élément <main> hérite d'une marge de 4 % de chaque côté via les styles globaux, et l'élément <aside> a toujours une marge de 4 % sur la droite. Ainsi, la largeur combinée des deux éléments et de leur marge horizontale atteint précisément 100 %.

  3. Créez un sélecteur de groupe pour main, aside. Définissez les propriétés et valeurs suivantes :
margin-top: 30px
margin-bottom: 30px
float: left
font-size: 0.875em

Une fois la propriété float définie, le résultat semble désastreux, car une grande partie de l'arrière-plan devient noire (voir Figure 22).

fig22
Figure 22. Le pied de page remonte également pour passer à côté de l'élément principal flottant.

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 <footer> est venu se positionner à côté de l'élément <main>, et son arrière-plan occupe à présent l'espace libéré par les éléments flottants. Le problème peut être corrigé très facilement.

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.

Positionnement du texte autour de certaines images

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. Affichez la page sights.html, puis utilisez le curseur de défilement pour redimensionner la fenêtre du mode En direct à environ 900 px.

  2. Cliquez sur l'icône  dans la règle, puis créez une requête multimédia min-width: 900px dans la feuille de style responsive.css (voir la Figure 23 pour les paramètres).
fig23
Figure 23. Paramètres de la deuxième requête multimédia.
  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 <figure> 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).
fig24
Figure 24. Vous pouvez spécifier dans quelle requête multimédia ajouter la classe.
  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 :
float: right
margin-right: 0px
margin-left: 10px

Le texte du paragraphe suivant est alors redistribué à gauche de l'image et de sa légende (voir Figure 25).

fig25
Figure 25. Le texte est positionné de manière naturelle autour de l'image et de la légende.

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 <figure> parent.

  1. Répétez les étapes 4 et 5 avec l'image d'Alcatraz, en créant cette fois-ci une classe nommée .floatleft et en définissant les valeurs suivantes :
float: left
margin-right: 10px
margin-left: 0px
  1. Enregistrez votre travail en sélectionnant Fichier > Enregistrer tous les fichiers associés.

Définition de la métabalise de l'aire d'affichage

Votre site en responsive design est terminé. Il reste une dernière opération à effectuer pour qu'il s'affiche correctement sur les terminaux 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.

fig26
Figure 26. Vous devez ajouter la métabalise d'aire d'affichage aux pages créées en responsive design.

Vous devez effectuer cette opération pour les pages sights.html et index.html (et de manière générale, pour toutes les pages créées en responsive design). En effet, sans cette métabalise, les terminaux mobiles mettent automatiquement les pages à l'échelle et ignorent les requêtes multimédias.

Pour aller plus loin

Malgré sa longueur et sa relative complexité, ce tutoriel vous aura permis d'apprendre à utiliser Dreamweaver CC 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 le forum 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 Partie 8 : publication du site web.

04/13/2018

Contributeurs : David PowersTom Alex Buch

Cette page vous a-t-elle été utile ?