Création d'un site web — Partie 4 : changement de police et création de styles basiques

Dans la quatrième partie de ce tutoriel, vous découvrirez comment la taille des éléments web est calculée. Vous utiliserez ensuite CSS pour appliquer une mise en page et des styles généraux aux éléments et au texte sur la page.

Ce qu'il vous faut

Téléch. bibliothèques

Bibliothèques Creative Cloud d'exemple pour s'entraîner

Téléch. fichiers

Fichiers d'exemple pour s'entraîner (676 Ko)

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 quatrième partie de ce tutoriel sur l'élaboration d'un site web simple en responsive design dans Dreamweaver CC 2015. Les trois premières parties étaient consacrées à la définition d'un site dans Dreamweaver, puis à la création de deux pages à l'aide d'une structure HTML logique. La Figure 1 montre comment la page d'accueil s'affiche lorsque vous chargez le fichier index.html dans un navigateur.

Figure 1. La page d'accueil du site web Bayside Beat fonctionne, mais elle n'est pas attrayante.

Dans la suite de ce tutoriel, à l'exception de la toute dernière partie, vous apprendrez à transformer ce « vilain petit canard » en un site simple mais élégant via l'utilisation de styles CSS et l'ajout d'images. Dans cette partie, vous découvrirez comment simplifier les calculs de largeur et de hauteur, changer de police et utiliser le panneau CSS Designer pour créer des styles basiques.

Création d'un fragment de code pour simplifier les calculs de largeur et de hauteur

Dans CSS, chaque élément est traité comme une boîte. Dans le modèle de boîte CSS par défaut, la largeur et la hauteur d'un élément ne s'appliquent normalement qu'à ce dernier. Si vous agrandissez la marge intérieure (padding) autour du contenu de l'élément, l'espace supplémentaire n'est pas inclus dans le calcul. Les bordures sont également exclues. Par conséquent, si vous déclarez que la largeur d'un élément est de 250 px et sa hauteur de 100 px, et si vous ajoutez 20 px de marge intérieure de chaque côté, ainsi qu'une bordure de 5 px, la largeur totale sera de 300 px, et la hauteur totale de 150 px (voir Figure 2).

Figure 2. Le modèle de boîte CSS compte la marge intérieure et les bordures en dehors de la largeur et de la hauteur d'un élément.

Cela peut compliquer les calculs, surtout si vous voulez combiner des dimensions en pixels et en pourcentages. Il est plus logique de considérer que la marge intérieure et les bordures font intrinsèquement partie de la taille d'un élément. Pour faciliter le contrôle de la mise en page, la plupart des designers web professionnels ajoutent deux petites règles au début de leur feuille de style pour inclure la marge intérieure et les bordures dans la largeur et la hauteur totales d'un élément. Ces règles sont très utiles ; vous les enregistrerez dans le panneau Fragments de code de Dreamweaver pour pouvoir les insérer dans les styles d'autres sites web.

Vérifiez que le fichier index.html est ouvert dans la fenêtre Document, puis cliquez sur responsive.css dans la barre d'outils des fichiers associés (voir Figure 3) pour ouvrir la feuille de style externe en mode Fractionner.

Figure 3. Utilisez la barre d'outils des fichiers associés pour afficher le code d'un fichier joint à la page active.

Cliquez dans le code, créez une ligne vierge sur la ligne 2, puis saisissez /* Simplifier les calculs de largeur et de hauteur */. Dans CSS, tout ce qui se trouve entre /* et */ est considéré comme un commentaire ; il s'agit simplement d'un rappel de l'action du code.
Créez une autre ligne, puis saisissez les lettres html suivies d'une accolade ouvrante ({). Les règles de style sont constituées d'un sélecteur suivi de paires de propriété/valeur placées entre des accolades. Le type de sélecteur le plus simple comprend une balise HTML sans chevrons. L'élément de niveau supérieur de chaque page web est <html>. Par conséquent, html est un sélecteur CSS qui affecte tout le contenu de la page.
Appuyez sur la touche Entrée/Retour après avoir inséré l'accolade. Dreamweaver indente la ligne suivante et affiche immédiatement des indicateurs de code pour les propriétés CSS. Commencez à saisir le terme box. Lors de la saisie, Dreamweaver filtre les indicateurs en recherchant le terme correspondant dans toutes les propriétés valables, y compris au milieu de leur nom (voir Figure 4).

Figure 4. Les indicateurs de code accélèrent la modification en mode Code.

Repérez la propriété box-sizing. Utilisez votre souris ou les touches fléchées de votre clavier pour la sélectionner dans les indicateurs de code, puis appuyez sur la touche Entrée/Retour. Dreamweaver complète alors le nom de la propriété et la fait suivre de deux points (:). Les indicateurs de code s'affichent de nouveau. Pour améliorer la lisibilité du code, ajoutez un espace, sélectionnez la propriété border-box dans la liste, puis placez un point-virgule (;) à la fin de la ligne.

Sur la ligne suivante, ajoutez une accolade fermante (}) pour clore la définition de la règle de style.

Sur la ligne suivante, créez cette règle de style :

*, *:before,
*:after {
    box-sizing: inherit;
}

Cette règle utilise ce qu'on appelle un sélecteur de groupe. Elle est constituée de trois sélecteurs séparés par des virgules, auxquels elle applique le(s) même(s) style(s). L'astérisque (*) étant le sélecteur universel, il s'applique à tous les éléments. Les deux autres sélecteurs utilisent des pseudo-éléments.

La signification de cette règle de style est relativement complexe. À ce stade de l'apprentissage du design web, vous devez simplement savoir qu'elle accomplit la tâche demandée. Le plus important ici est de veiller à la saisir correctement. Bien que vous puissiez avoir un espace après les deux points qui suivent la propriété box-sizing, il ne doit y en avoir aucun avant et après les deux points dans *:before et *:after.

Ouvrez le panneau Fragments de code (dans l'espace de travail Création, il est ancré avec le panneau Fichiers), puis sélectionnez le dossier CSS_Snippets (voir Figure 5).

Figure 5. Le panneau Fragments de code contient déjà une sélection de fragments de code réutilisables.

En mode Code, sélectionnez le commentaire et les deux règles de style que vous venez de créer, cliquez avec le bouton droit sur la sélection, puis choisissez Créer un fragment de code dans le menu contextuel (voir Figure 6).

Figure 6. Enregistrement des règles de style dans le panneau Fragments de code.

Dans la boîte de dialogue Fragment de code qui s'affiche, le code est déjà sélectionné dans l'un des champs.

Dans le champ Nom, saisissez Box-sizing: border-box. Dans le champ Description, saisissez Inclut la marge intérieure et les bordures dans la largeur et la hauteur. En regard du type de fragment de code, sélectionnez le bouton radio Insérer le bloc. Conservez le type d'aperçu défini par défaut, à savoir Code. Le panneau doit ressembler à celui illustré en Figure 7.

Figure 7. Enregistrement du code box-sizing comme fragment de code.

Cliquez sur OK pour enregistrer le fragment de code. Comme vous avez sélectionné le dossier CSS_Snippets dans le panneau Fragments de code, le nouveau fragment de code est automatiquement stocké dans celui-ci.

L'insertion de ce fragment de code dans votre feuille de style vous permet d'ajuster la marge intérieure et les bordures d'un élément sans affecter ses dimensions totales.

Vous pouvez synchroniser vos fragments de code avec Creative Cloud. Consultez la documentation en ligne pour en savoir plus sur l'utilisation des fragments de code.

Installation d'une police Adobe Edge Web Fonts

Par défaut, les navigateurs affichent le texte en Times ou Times New Roman, une police avec empattements (les empattements sont de petits traits décoratifs à l'extrémité des caractères). La propriété CSS font-family vous permet de sélectionner des polices, mais votre choix se limite normalement aux polices disponibles sur l'équipement utilisé pour afficher le site. L'utilisation d'une police web se téléchargeant avec la page lève cette restriction. Dreamweaver offre un accès intégré aux nombreuses polices web gratuites hébergées par Adobe. Vous devez d'abord les activer dans Dreamweaver.

Sélectionnez Modifier > Gérer les polices pour ouvrir le panneau illustré en Figure 8.

Figure 8. Le panneau Gérer les polices vous donne accès à une grande variété de polices.

La police que vous recherchez est nommée Source Sans Pro. Dès que vous commencez à saisir son nom dans le champ de recherche, trois options vous sont proposées. Cliquez sur celle du milieu : Source Sans Pro. Une coche indique que la police a été sélectionnée (voir Figure 9).

Figure 9. Source Sans Pro fait partie de la famille des polices associées.

Source Sans Pro est une police sans empattements. En d'autres termes, les extrémités des caractères sont dépourvues de petits traits décoratifs. Vous pouvez clairement voir la différence entre Source Sans Pro et Source Serif Pro.

Les polices Adobe Edge Web Fonts sont gratuites mais soumises à un contrat de licence. Pour consulter les conditions d'utilisation, cliquez sur le lien dans la partie inférieure du panneau.
Si les conditions d'utilisation vous conviennent, cliquez sur Terminé.

Dreamweaver installe les polices Edge Web Fonts dans votre dossier de configuration personnel, ce qui vous permet de les utiliser dans tous les sites que vous créez dans Dreamweaver.

Utilisation de CSS Designer pour ajouter des styles basiques à la page

Vous avez vu précédemment que les indicateurs de code peuvent accélérer la création de règles de style en mode Code. Dreamweaver intègre également CSS Designer, un panneau qui vous permet de mettre en forme votre page tout en visualisant directement les modifications en mode En Direct. Dans cette section, vous utiliserez CSS Designer pour ajouter des styles basiques à la feuille responsive.css, puis vous verrez comment ils affectent la page index.html.

Le fichier index.html étant ouvert dans la fenêtre Document, cliquez sur le bouton En direct de sorte que ce mode occupe l'intégralité de la fenêtre.
Ouvrez CSS Designer en cliquant sur l'onglet correspondant dans le groupe de panneaux à droite de l'écran (il est ancré avec le panneau Fragments de code que vous avez utilisé dans la section précédente). CSS Designer comprend quatre panneaux : Sources, @Requêtes multimédias, Sélecteurs et Propriétés (voir Figure 10).

Figure 10. CSS Designer vous permet de créer et de contrôler vos styles depuis un point central.

Par défaut, CSS Designer se présente sur deux colonnes, le panneau Propriétés apparaissant à droite dans l'espace de travail Création. Si vous utilisez un moniteur de petite taille, vous pouvez afficher le contenu sur une colonne en faisant glisser le côté du groupe de panneaux vers l'intérieur.

Lorsque vous créez des règles de style, vérifiez que le bouton Tout est sélectionné dans la partie supérieure du panneau.

Voici le rôle de chaque panneau :

Sources : indique la provenance des différents styles de la page active. Il peut s'agir de feuilles de style externes, telles que responsive.css, dans un bloc incorporé à la page, ou dynamiquement liées.
@Requêtes multimédias : répertorie les requêtes multimédias utilisées dans les différentes sources. Ce panneau sera abordé plus en détail dans la septième partie du tutoriel.
Sélecteurs : affiche les sélecteurs CSS contenus dans la source sélectionnée. Un champ de recherche est disponible dans la partie supérieure pour faciliter la localisation des sélecteurs dans une grande feuille de style.
Propriétés : c'est ici que vous définissez les propriétés et valeurs d'un sélecteur. Lorsque la case à cocher Ensemble est activée, le panneau affiche uniquement les propriétés qui ont été définies. Lorsqu'elle est désactivée, vous voyez apparaître une cinquantaine de propriétés courantes pour la disposition, le texte, la bordure et l'arrière-plan.

Assurez-vous que le bouton Tout est sélectionné dans la partie supérieure de CSS Designer.

Sélectionnez responsive.css dans le panneau Sources.

Vous n'utiliserez le panneau @Requêtes multimédias qu'à partir de la septième partie du tutoriel. Vous pouvez donc le fermer en faisant glisser le bord supérieur du panneau Sélecteurs vers le haut.

Le panneau Sélecteurs répertorie les sélecteurs ayant déjà été créés. Le dernier (#wrapper) n'a pas encore de styles. Lorsque vous créez un sélecteur, Dreamweaver l'insère systématiquement au bas de la feuille de style, sauf si un autre sélecteur est déjà sélectionné. Il est recommandé de classer les styles dans un ordre logique. Sélectionnez *, *:before et *:after, puis désactivez la case à cocher Ensemble dans la partie supérieure droite du panneau Propriétés.
Cliquez sur le signe plus (+) en haut à gauche du panneau Sélecteurs pour créer un sélecteur. Dreamweaver vous suggère un nom en se basant sur ce qui est sélectionné dans le mode En direct. Ignorez la suggestion, et saisissez body. Appuyez deux fois sur la touche Entrée/Retour pour confirmer la modification. Le nouveau sélecteur étant sélectionné (voir Figure 11), vous pouvez maintenant créer une règle de style pour l'ensemble de la page en définissant les valeurs des propriétés dans le panneau correspondant.

Figure 11. Préparation de la définition des propriétés en vue de la mise en forme du corps de la page.

La section Disposition située en haut du panneau Propriétés contient un outil visuel permettant de définir la propriété de la marge. Plutôt que d'utiliser cet outil, cliquez simplement sur Définir la forme courte pour ouvrir un champ modifiable, puis saisissez la valeur 0. Appuyez sur la touche Entrée/Retour pour confirmer la modification.

En mode En direct, vous remarquerez que le contenu s'est légèrement déplacé vers le haut et la gauche, car la marge par défaut de 8 px a été supprimée de l'élément.

Dans le panneau Propriétés, la propriété margin apparaît maintenant en gras, ce qui indique qu'elle a été définie. Par ailleurs, la valeur de chaque côté dans l'outil visuel a été définie à 0 (voir Figure 12).

Figure 12. La propriété margin a été définie à 0 sur tous les côtés.

Cliquez sur l'icône Texte dans la partie supérieure du panneau Propriétés pour accéder à la section correspondante. La première propriété de la liste, color, sert à définir la couleur du texte. Toutes les couleurs disponibles pour ce projet sont enregistrées dans la Bibliothèque CC que vous avez installée dans la première partie du tutoriel.

Le panneau Bibliothèques CC est ancré avec CSS Designer. Faites glisser l'onglet Bibliothèques CC pour le détacher du groupe de panneaux et le faire flotter sur la fenêtre Document.

Cliquez sur la zone de couleur en regard de la propriété color pour ouvrir le sélecteur de couleurs.

Vérifiez que le bouton Hex est bien sélectionné dans la partie inférieure droite du sélecteur. Il permet de définir la couleur en utilisant un code hexadécimal pris en charge par tous les navigateurs.

Sélectionnez l'outil Pipette dans la partie inférieure droite du sélecteur et prélevez la couleur à partir de la nuance gris clair dans le panneau Bibliothèques CC (voir Figure 13). La couleur prend la valeur #4B4B4B, ce qui est plus agréable à l'œil que du noir pur sur du blanc.

Figure 13 . Utilisation de l'outil Pipette pour prélever une couleur.

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

Cliquez à droite de la propriété font-family pour ouvrir un menu de piles de polices fréquemment utilisées. Sélectionnez la police Adobe Edge Web Fonts que vous avez précédemment installée. Elle est répertoriée au bas de la liste sous le nom source-sans-pro (voir Figure 14).

Figure 14. Les polices web sont répertoriées sous les piles de polices courantes.

Les polices présentées dans ces listes sont généralement classées par ordre de préférence. Si la première n'est pas disponible sur l'équipement de l'utilisateur, le navigateur essaie la deuxième, et ainsi de suite jusqu'à ce qu'il en trouve une appropriée.

Le choix d'une police Edge Web Fonts définit automatiquement les valeurs des propriétés font-style et font-weight, en plus de la propriété font-family. Un nouveau fichier (source-sans-pro:n2,n4:default.js) apparaît également dans la barre d'outils des fichiers associés ainsi qu'une source en lecture seule dans le panneau Sources (vous en verrez parfois plusieurs). Le nouveau fichier et les sources en lecture seule chargent la police de façon dynamique à partir d'un serveur Adobe. Vous ne pouvez pas les modifier.

La valeur de la propriété font-style (normal) est correcte, mais celle de la propriété font-weight (200) est extrêmement faible.

Cliquez sur 200 pour accéder aux épaisseurs disponibles, puis sélectionnez 400, ce qui équivaut à une police normale (voir Figure 15).

Figure 15. Les polices Adobe Edge Web Fonts utilisent des numéros pour définir la propriété font-weight.

La propriété font-weight peut être définie à l'aide d'une valeur allant de 100 (fin) à 900 (épais) par incréments de 100 ou à l'aide des mots-clés « normal » (équivalent de 400), « bold » (700), « bolder » ou « lighter ». Les polices Adobe Edge Web Fonts utilisent toujours des valeurs numériques. Les valeurs disponibles diffèrent d'une police à l'autre. Comme le montre la Figure 15, la police source-sans-pro ne prend pas en charge les valeurs 100, 500 et 800.

Cliquez en regard de la propriété font-size pour accéder aux unités de mesure et mots-clés applicables aux polices, puis sélectionnez em (voir Figure 16).

Figure 16. Sélection de l'unité de mesure em pour la propriété font-size.

Plus rien n'apparaît dans la fenêtre du mode En direct. Pour reprendre l'expression de la couverture du Guide du voyageur galactique : Pas de panique !

Lorsque vous sélectionnez une unité de mesure, Dreamweaver définit la valeur à 0. L'unité em est une mesure proportionnelle basée sur la hauteur de la police actuelle. Toutefois, lorsqu'elle est définie à 0, le texte disparaît.

Saisissez simplement 1 pour faire réapparaître le texte. Lorsque la valeur est définie à 1 em dans la règle de style body, le paramètre par défaut du navigateur, normalement 16px, est utilisé pour les paragraphes et les éléments de liste.

Cliquez sur l'icône Arrière-plan dans la partie supérieure du panneau Propriétés pour accéder aux propriétés correspondantes.
Au lieu d'utiliser le sélecteur de couleurs pour définir la propriété background-color, cliquez simplement sur la nuance bleu clair dans le panneau Bibliothèques CC (voir Figure 17) pour copier sa valeur hexadécimale dans le Presse-papiers.

Figure 17. Cliquez sur une nuance dans le panneau Bibliothèques CC pour copier sa valeur hexadécimale.

Cliquez dans le champ modifiable à droite de la propriété background-color, puis collez la valeur et appuyez sur la touche Entrée/Retour pour confirmer la modification. L'arrière-plan de la page est maintenant bleu clair.

Activez la case à cocher Ensemble dans la partie supérieure droite du panneau Propriétés pour afficher toutes les propriétés CSS définies sur le corps de la page (voir Figure 18).

Figure 18. Activez la case à cocher Ensemble pour passer en revue les définitions de style d'un sélecteur.

Définition de propriétés directement dans CSS Designer

La sélection de propriétés communes dans les différentes sections du panneau CSS Designer est une excellente façon de se familiariser avec le code CSS. Supposons toutefois que vous maîtrisiez déjà les styles CSS et que vous souhaitiez simplement définir d'autres propriétés et valeurs. Vous pouvez le faire dans la section Plus située au bas du panneau Propriétés. Dreamweaver accélère le processus en affichant des indicateurs de code. Faisons un test. Même si vous êtes néophyte, vous devriez pouvoir suivre ces instructions :

Assurez-vous que le bouton Tout est activé dans la partie supérieure de CSS Designer et que la feuille de style responsive.css est sélectionnée dans le panneau Sources. Si nécessaire, activez la case à cocher Ensemble en haut à droite du panneau Propriétés.
Dans le panneau Sélecteurs, sélectionnez #wrapper. Le symbole dièse indique qu'il s'agit d'un sélecteur d'ID. Ce dernier appliquera donc des règles de style au contenu portant l'ID wrapper. S'il n'apparaît pas dans la liste, vous pouvez le créer en cliquant sur le signe plus (+) en haut à gauche du panneau Sélecteurs, puis en saisissant #wrapper dans le champ modifiable.

Aucun style n'ayant été défini pour ce sélecteur, le panneau Propriétés affiche uniquement la section Plus ainsi que deux champs permettant d'ajouter une propriété et une valeur.
Cliquez dans le champ ajouter une propriété et commencez à saisir width. Dès le début de la saisie, des indicateurs de code affichent les propriétés correspondantes. Une fois la propriété width mise en évidence, appuyez sur la touche Tab ou Entrée/Retour pour la sélectionner.

Une fois le second champ actif, saisissez 100%, et appuyez sur la touche Entrée/Retour. L'enveloppe remplit alors toute la largeur de l'écran.

Pour éviter que l'enveloppe ne devienne trop large sur les écrans grand format, ajoutez une autre propriété, max-width, et définissez sa valeur à 1000 px.
Centrez l'enveloppe en ajoutant la propriété margin et en définissant sa valeur à 0 auto. Il s'agit d'un raccourci pour supprimer les marges supérieure et inférieure et définir une marge automatique à gauche et à droite. Tant que la largeur de la fenêtre Document est supérieure à 1 000 px (la valeur de la propriété max-width), le contenu de la page reste centré en mode En direct.
Ajoutez la propriété background-color et définissez sa valeur à white. Il s'agit d'un mot-clé reconnu par tous les navigateurs. Le panneau Propriétés doit maintenant contenir quatre définitions de style pour le sélecteur #wrapper (voir Figure 19).

Figure 19. Vous pouvez créer des règles de style directement dans la section Plus du panneau Propriétés.

Enregistrez votre travail en sélectionnant Fichier > Enregistrer tous les fichiers associés. Prenez l'habitude d'enregistrer régulièrement les éléments de mise en forme d'une page.

Le contenu est maintenant centré sur un arrière-plan de couleur blanche. Si la largeur de la fenêtre Document est supérieure à 1 000 px, l'arrière-plan bleu clair du corps apparaît alors de chaque côté. Il y a toutefois un écart mystérieux en haut de la page, et le texte effleure le côté gauche de l'élément <div> wrapper. Vous résoudrez ces problèmes dans la cinquième partie. Mais avant cela, abordons un instant les mesures en pixels dans les pages web.

Pixels et affichages haute densité

Les pixels sont les points minuscules qui composent un écran d'ordinateur. Aux débuts du web, la taille d'un point était de 1 px. Au fil des années, la technologie a progressé et les points sont devenus de plus en plus petits. Heureusement, CSS a anticipé la situation. Les pixels utilisés comme unité de mesure ne dépendent pas de la taille des pixels physiques de l'écran d'un équipement. Par conséquent, les 1 000 px définis comme largeur maximale de l'élément <div> devraient avoir la même taille sur les anciens moniteurs et les derniers écrans haute densité.

Pour aller plus loin

Le site commence à devenir plus présentable, mais il reste encore beaucoup à faire. Vous résoudrez les problèmes d'espace horizontal et vertical et agrémenterez la page d'images réactives dans la Partie 5 : ajustement de l'espace autour des éléments et création d'images réactives.

04/13/2018

Contributeurs : David Powers, Tom Alex Buch

Changement de police et création de styles basiques