Bonjour.
Dans cette vidéo, nous allons utiliser des styles CSS pour mettre en forme une page web.
Comme vous le voyez ici, cette page contient déjà quelques éléments HTML standard, notamment une liste de navigation, des titres et des images.
Nous ne verrons pas comment ajouter du texte HTML.
Ce thème est abordé plus en détail dans une autre vidéo.
Pour que la vidéo soit intéressante et pour ne pas perdre trop de temps, j'ai déjà créé les premiers éléments CSS qui vont simplifier le démarrage.
Je vais donc passer dans Dreamweaver et ajouter cette feuille CSS prédéfinie à la page web pour commencer.
Le fichier est ouvert ici dans Dreamweaver.
Pour les besoins de ce tutoriel, je ne vais pas choisir le mode « Standard » par défaut, mais le mode « Développeur ».
J'ai également défini le site en amont pour gérer les fichiers du projet.
Pour suivre ce tutoriel, faites la même chose de votre côté en choisissant Site > Nouveau site.
Un autre tutoriel vous explique comment définir un site.
Ajoutons cette feuille CSS.
Une feuille CSS doit toujours figurer à l'intérieur de l'élément « head ».
Il faut donc repérer la balise ouvrante et la balise fermante, marquée d'une barre oblique.
Je me place entre les deux.
J'ajoute une indentation par souci de clarté.
La syntaxe de la feuille CSS étant assez longue, je vais utiliser une astuce pour aller plus vite.
Je tape « link », j'appuie sur Tab, et non sur Entrée, et j'obtiens directement la syntaxe permettant de relier la feuille CSS.
J'en ai déjà créé une, ce qui va accélérer le processus.
Je tape la lettre « s » pour la retrouver.
Vous la voyez ici, dans le volet de gauche.
Dreamweaver me la propose, car l'application a cette capacité de trouver les fichiers dont on peut avoir besoin.
J'appuie sur Entrée, et je bascule dans le navigateur.
Super !
La mise en page change du tout au tout, mais les éléments HTML5 sont strictement les mêmes.
Le menu de navigation n'est plus présenté sous forme de liste à puces.
Le texte est mis en forme.
La section d'introduction est là mais n'a pas été mise en forme.
Nous nous en occuperons plus tard.
Les images ont été réagencées et redimensionnées.
Et voici les icônes de réseaux sociaux.
Je rappelle que j'ai prédéfini ces éléments pour gagner du temps.
Nous allons maintenant modifier quelques propriétés CSS, puis nous créerons nos propres styles.
Je repasse dans Dreamweaver.
Je suis sur la page HTML, car l'onglet Code source est actif.
Je vais commencer par mettre en forme l'en-tête.
Je m'occuperai ensuite du titre « h1 ».
L'élément « header » sert à structurer la page HTML.
Cette balise prédéfinie du langage HTML5 se rapporte à la zone d'en-tête, autrement dit à la partie supérieure de votre page qui contient généralement votre logo et votre navigation.
L'en-tête apparaît ici dans le code HTML.
Pour ajouter une couleur de fond ou définir une hauteur, je dois reprendre le nom figurant dans ma feuille CSS et travailler ici.
Nous allons faire la même chose pour l'élément « h1 », qui correspond au titre de niveau un, soit le titre le plus important de la page.
Nous allons aussi le mettre en forme.
Je vais basculer vers la feuille CSS que j'ai créée Je clique sur « style-start » dans la barre des documents associés.
Vous voyez que les noms sont exactement les mêmes.
Je retrouve « header » et « h1 ».
Et à l'intérieur de ces accolades, je vois les propriétés CSS et les valeurs que j'ai définies.
À présent, nous allons effectuer quelques modifications.
Je vais travailler en mode Code, mais je contrôlerai le résultat dans le navigateur.
Pour cela, je vais utiliser l'option d'aperçu en temps réel accessible en bas à droite de l'interface.
Dans la fenêtre qui s'affiche, je vais choisir le navigateur Google Chrome.
La page que j'avais dans Dreamweaver apparaît maintenant dans Chrome.
L'avantage avec l'aperçu en temps réel, c'est que les modifications effectuées dans Dreamweaver apparaissent automatiquement dans le navigateur.
Mon ordinateur est équipé de deux moniteurs avec lesquels je vais jongler.
Pour ce tutoriel vidéo, je vais afficher Dreamweaver et redimensionner la fenêtre pour voir l'aperçu dans le navigateur.
Je vais donc commencer par modifier l'en-tête.
Pour l'instant, il occupe environ 50 % de l'écran.
L'élément correspondant se trouve ici, et sa largeur est définie à 50 %.
Je remplace cette valeur par 100 tout rond.
L'en-tête s'étend maintenant sur toute la largeur de la page.
Parfait !
Je vais à présent m'occuper de la propriété « top », car il y a trop d'espace au-dessus de l'en-tête.
Je remplace 100 pixels par 0 pixel pour faire remonter l'en-tête.
Pour la propriété « padding », je remplace 0 par 1.5, et j'ajoute « em » comme unité de mesure.
Vous pouvez utiliser une taille absolue comme des pixels, mais l'unité « em » permet d'adapter le contenu sur la page et facilite les réglages en fonction des différents formats d'écran.
Je vais également modifier la valeur de la propriété « position ».
Si je conserve la valeur « absolute », je ne vois plus les éléments de la partie supérieure lorsque je fais défiler la page.
Ici, le menu disparaît en haut.
Mais si j'utilise la valeur « fixed » et que je commence à descendre sur la page, le menu reste visible.
Nous allons maintenant définir la police de ce texte.
Jusqu'ici, nous avons utilisé la feuille CSS pour définir la largeur et le comportement de l'en-tête.
Nous allons maintenant nous en servir pour définir la police, la taille et la couleur du texte.
Mon titre « h1 » se trouve ici, et voici la propriété de couleur.
Je vais indiquer « #fff » pour obtenir du blanc.
Un sélecteur apparaît dans Dreamweaver, où je peux choisir une couleur.
J'appuie sur Entrée et j'indique « #fff » pour le blanc.
Pour la propriété « text-transform », je veux la valeur « uppercase ».
Je saisis les premières lettres, à savoir « up », et la valeur m'est proposée.
J'appuie sur Entrée pour l'appliquer et récupérer la bonne syntaxe.
La taille de la police est définie à 2 em.
J'indique 8.5 pour l'agrandir.
Pour l'interlettrage, je vais partir sur 0.85 em afin de bien séparer les lettres, comme dans la maquette.
Nous avons donc mis en forme des éléments CSS existants.
Nous allons maintenant en créer.
J'aimerais mettre en forme le paragraphe d'introduction, qui est encore au format brut.
La première chose à faire est de retrouver le nom de l'élément.
Je reviens dans la page HTML en cliquant sur Code source.
La section correspondante se trouve ici.
La classe associée se nomme « intro ».
Je vais la mettre en forme.
Je repasse dans la feuille CSS.
Pour créer une classe, il faut commencer par ajouter un point.
C'est la règle.
Les balises juste avant ne sont pas précédées d'un point.
Il est donc facile de repérer une classe dans une feuille CSS.
Je la nomme « intro ».
Vous pouvez choisir un autre nom.
N'utilisez pas d'espace, et ajoutez un tiret ou un trait de soulignement pour les noms composés.
Je conserve « intro », comme dans la page HTML.
La syntaxe est ensuite identique à celle des autres balises.
J'ajoute une première accolade et Dreamweaver ajoute la seconde.
J'appuie sur Entrée.
Il faut définir le rôle de la classe.
Ces accolades contiennent des propriétés CSS.
Je vais d'abord définir la position en utilisant la propriété « padding ».
Dès que je commence à saisir les premières lettres, j'obtiens le terme complet.
J'appuie sur Entrée.
Les deux points sont automatiquement insérés.
Je vais choisir une marge supérieure de 12 em.
Les marges étant définies dans le sens des aiguilles d'une montre, je passe à celle de droite et tape 6 em.
Pour celle du bas, j'indique 12 em, et pour celle de gauche, 6 em.
Les propriétés CSS se terminent par un point-virgule.
Vérifions cela dans le navigateur.
Nous y voilà !
Nous avons créé nos propres styles CSS, repris le nom de la classe dans notre fichier CSS et ajouté des marges intérieures assez larges en haut et en bas, et plus petites sur les côtés.
Mais il existe une technique plus ingénieuse.
Si je définis simplement les marges supérieure et de droite, le modèle va supposer que j'appliquerai les mêmes mesures pour les deux autres.
C'est une déduction très intelligente.
Le premier élément CSS que nous avons créé est une classe.
Je vais maintenant mettre en forme le texte qui se trouve à l'intérieur.
Je reviens dans le code source.
Voici ma page HTML, qui contient des balises de paragraphe.
Je repasse sur la classe « intro », car j'aimerais mettre en forme le texte qui se trouve à l'intérieur, notamment changer la police, les couleurs, la taille, etc.
Je pourrais le faire dans la feuille CSS, mais il se trouve que les balises « p » sont très courantes et se répètent de nombreuses fois.
Donc, si je mets en forme la première balise « p », toutes les autres le seront également.
Or, je veux une mise en forme ciblée.
Je vais donc utiliser un sélecteur composé.
Allons-y.
Je veux mettre en forme la balise « p » se rapportant au texte d'introduction.
Je vais vous montrer ce que je veux dans la maquette Photoshop.
Je dois appliquer cette police, changer la couleur et la taille, et ajouter un peu d'espace entre les lignes, mais aussi entre les lettres.
Nous allons voir comment écrire ces propriétés en CSS.
Je veux donc mettre en forme la balise « p » à l'intérieur de la classe « intro ».
Voici mon sélecteur composé.
J'ajoute maintenant les accolades, et je commence par définir la police.
Je tape « font-f », et j'obtiens la propriété qui m'intéresse.
J'utilise cette police, et je n'oublie pas le point-virgule à la fin.
Je repasse dans le navigateur.
Voici la nouvelle police.
Je poursuis avec la couleur.
Si je n'ajoute rien, la police va rester telle quelle.
Je tape un dièse pour utiliser le sélecteur ou saisir une valeur de couleur prédéfinie.
Je tape « #343144 », et j'ajoute un point-virgule.
Je tape « text-align », et je choisis en haut de la liste l'option « center », sans oublier le point-virgule.
Je tape ensuite « text-transform », et comme tout à l'heure, je choisis « uppercase ».
J'utilise simplement mon curseur.
Une fois la mise en forme démarrée, Dreamweaver m'aide en me proposant diverses options, ce qui m'évite d'avoir à tout écrire.
Vous pouvez utiliser les touches fléchées pour parcourir la liste, choisir « uppercase » et appuyer sur Entrée.
L'important est de ne pas oublier le point-virgule à la fin.
Je passe ensuite à la taille de la police.
Je tape « font-s », et je reprends l'unité « em ».
Je définis une taille de 2.5, et j'ajoute le point-virgule.
Je passe à la hauteur des lignes, que je définis à 1.8 em.
Et je veux un interlettrage de 0.325 em.
Passons dans le navigateur.
C'est pas mal, non !
Comme nous avons utilisé un sélecteur composé, seule la balise « p » du paragraphe d'introduction a été modifiée.
Vous connaissez maintenant les principes du langage CSS.
Nous avons modifié quelques propriétés existantes et créé notre propre classe.
Rappelez-vous, elle commence par un point.
Nous avons ensuite créé un sélecteur composé, un exercice très avancé, mais pas si compliqué.
Nous avons créé nos styles CSS pour cette page, mais si vous vous souvenez bien, il en existait déjà pour ce projet.
Du coup, pas besoin de partir de zéro.
Je vais vous montrer tout cela dans Dreamweaver.
Voici le contenu sur lequel nous avons travaillé, et un peu plus bas, vous avez tout le code qui a déjà été rédigé pour le reste du site.
Il y a donc pas mal de choses.
Si vous héritez d'un site et que vous vous interrogez sur certaines propriétés CSS ; par exemple, vous ne savez pas ce que « display: block » signifie, vous pouvez faire un clic droit dessus et choisir Documentation rapide.
Cette nouveauté de Dreamweaver vous donne la définition de l'élément affiché et les propriétés associées.
Les propriétés « display » et « float » sont des concepts fondamentaux d'une mise en page CSS qu'il est important de bien maîtriser.
Donc, si vous débutez et avez des doutes sur certaines propriétés CSS, n'hésitez pas à consulter la documentation rapide.
La nouveauté que je préfère est le mode Édition rapide.
Je repasse dans le code source, et je vais m'occuper du pied de page.
Examinons-le dans le navigateur.
Tout le contenu est aligné à gauche.
Vérifions cela dans la maquette.
Ici, il y a une partie à gauche et une autre à droite.
Nous allons reproduire cela en utilisant une propriété « float » et le mode Édition rapide.
Voici mon pied de page, dont la partie « credit » — le nom de l'auteur — doit apparaître sur la droite.
Nous pourrions procéder comme tout à l'heure, lorsque nous avons tapé un point et le mot « intro ».
Mais il existe un moyen plus rapide.
Je peux cliquer avec le bouton droit sur « footer-credit » et choisir Édition rapide.
Un message m'indique qu'il n'existe aucune règle et me demande si je souhaite en créer une.
C'est ce que je veux.
Comme vous le voyez, il s'agit de ma feuille CSS.
Elle apparaît dans cette petite fenêtre, où « footer-credit » possède déjà un point et des accolades.
Je peux donc me lancer très rapidement.
Voilà pour le mode Édition rapide de Dreamweaver.
Pour que ce contenu apparaisse sur la droite, je vais utiliser la propriété « float ».
Je sélectionne « right » dans la liste proposée par Dreamweaver, et j'ajoute un point-virgule.
Tant que j'y suis, je vais définir la largeur à 40 %.
Si vous utilisez la propriété « float » et souhaitez déplacer du contenu à droite, vous devez souvent passer d'une position absolue à une position relative.
Voyons ce que ça donne.
Super, c'est à droite.
Vous avez vu comment changer la position d'un élément, ce qui est super pratique.
Vous avez aussi découvert le mode Édition rapide.
Je suis actuellement dans le code source, autrement dit sur ma page HTML, mais j'interviens sur ma feuille CSS.
Si je réaffiche les styles CSS, je retrouve tout en bas la classe « footer-credit ».
J'utilise très souvent le mode Édition rapide pour ne pas avoir à basculer d'un fichier à l'autre.
Passons dans le navigateur.
Nous avons vu comment créer un élément flottant, travailler en mode Édition rapide et utiliser des styles CSS pour mettre en forme le pied de page, l'en-tête et le menu de navigation, dont nous avons modifié le comportement et les marges.
Nous avons aussi travaillé sur cette section, notamment sur le titre « h1 » et le paragraphe d'introduction, et utilisé des styles CSS pour mettre en forme le texte.
Avant de terminer, supprimons la feuille CSS pour revenir à ce que nous avions au tout début, lorsque le contenu HTML était au format brut.
Voici ma page HTML.
Je sélectionne ma feuille de style, je la supprime, et je repasse dans le navigateur.
C'est fou ce qu'on peut faire avec les styles CSS.
Nous n'avons pas touché au contenu HTML.
Les éléments sont les mêmes qu'au départ : le menu de navigation, les titres, les images...
Mais vous avez vu comment les styles CSS peuvent radicalement transformer la mise en forme.
Il ne s'agit là que d'une présentation rapide des styles CSS.
Ce thème est abordé plus en détail dans d'autres vidéos.
Le moment est venu pour vous de mettre en pratique vos connaissances CSS pour créer de superbes pages web.
