
Ce qu'il vous faut
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.
Bienvenue dans la quatrième partie de ce tutoriel sur l'élaboration d'un site web simple en responsive design dans Dreamweaver 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.

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

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.

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

- 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, créez cette règle de style :
Sur la ligne suivante, ajoutez une accolade fermante (}) pour clore la définition de la règle de style.
*, *:before, *:after { box-sizing: inherit; }
- 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).
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
.

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

- 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.
Dans la boîte de dialogue Fragment de code qui s'affiche, le code est déjà sélectionné dans l'un des champs.

- 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.
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’appareil 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.

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

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

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.

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

- 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 Creative Cloud que vous avez installée dans la première partie du tutoriel.
- Cliquez sur la zone de couleur en regard de la propriété
color
pour ouvrir le sélecteur de couleurs.
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.
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.

- 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 nomsource-sans-pro
(voir Figure 14).
Cliquez en dehors du sélecteur de couleurs pour le fermer.

- 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).
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’appareil 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.

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

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

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'IDwrapper
. 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.
- Pour éviter que l’enveloppe ne devienne trop large sur les écrans grand format, ajoutez une autre propriété,
max-width
, et attribuez-lui la 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).
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.

- 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.
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 appareil. 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é.
Le site commence à devenir plus présentable, mais il reste encore beaucoup à faire. L’étape suivante consiste à résoudre les problèmes d’espace horizontal et vertical et à ajouter des images réactives sur la page.
Contributeurs : David Powers, Tom Alex Buch