Mise en forme du site Hitchcock avec les CSS

Séparation du contenu et de la mise en forme

Séparer le contenu de la mise en forme, telle est la volonté du W3C. Retenez ces deux idées maîtresses :

  • Le langage HTML permet de mettre des éléments dans une page.
  • Le langage CSS permet de mettre en forme ces éléments.

De cette manière, le code HTML devient très concis et lisible, contrairement à ses versions précédentes qui mélangeaient le contenu et la mise en forme.

Voici ce que nous allons obtenir grâce au langage CSS :

Page d’accueil :

Page biographique :

Page filmographique :

Ce n'est pas le dernier cri en matière de design, mais c'est un bon moyen de mettre en application le langage CSS.

Récupérez votre travail en HTML sur Hitchcock.

Insertion de la balise <link>

Dans la zone d’entête <head> de chaque page, disposez une balise <link> sur chaque page comme ci-dessous, afin de relier un fichier la feuille de style externe à chaque page HTML.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Alfred Hitchcock</title>
		<link rel="stylesheet" href="style.css">
	</head>

Cette balise <link> est à insérer dans chaque page qui doit adopter les mises en formes : index.html, biographie.html et filmographie.html.

Création du fichier CSS

Créer un nouveau document dans votre bloc-notes préféré, plus enregistrez-le sous le nom style.css, comme indiqué dans les balises <link>.

Ce document CSS va nous permettre d'appliquer une charte graphique à l’ensemble des pages du site. Chaque page aura donc le même aspect, et pour modifier l’aspect graphique de toutes les pages il suffira de modifier l'unique fichier style.css.

Les couleurs

Arrière-plan

Nous allons faire une redirection de la balise <body>. La couleur d'arrière-plan colorera toute la page. Choisissons un gris léger pour donner l'atmosphère polar années 50.

body {
	background-color: #E6E6E6;
}

Premier plan

La couleur de premier plan ne sera pas un noir pur mais un gris très foncé. Cette astuce permet de mieux intégrer le texte à l'ensemble du design. Cette couleur spécifiée dans <body> va colorer par héritage les balises textuelles filles <p>, <h1>, <h2>, etc.

body {
	background-color: #E6E6E6;
	color: #333;
}

Les polices de caractère

Par défaut, la police de caractère d'une page Web est Times. Pour la changer, il faut utiliser la propriété font-family. En sélectionnant <body>, l'ensemble des balises textuelles <p>, <h1>, <h2>, <a> hériteront de cette police.

Pour moderniser l'apparence du site, j'opte pour Roboto, une police moderne mais issue de Google Font. Il faudra donc ajouter en haut du document CSS une ligne @import permettant de télécharger cette police dans le cache du navigateur.

@import url('https://fonts.googleapis.com/css?family=Roboto');

body {
	background-color: #E6E6E6;
	color: #333;
	font-family: 'Roboto', sans-serif;
}

La police choisie pour les titres sera True Crime avec une forte évocation des polars année 50. Cette police est gratuite et peut se télécharger sur FontSquirel ou Dafont.

Déposez les polices dans un sous dossier nommé polices (à l'intérieur du dossier Hitchcock), puis ajoutez le code suivant à votre feuille de style :

@font-face {
    font-family: 'TrueCrimesRegular';
    src: url('polices/true-crimes.eot');
    src: url('polices/true-crimes.eot') format('embedded-opentype'),
         url('polices/true-crimes.woff') format('woff'),
         url('polices/true-crimes.ttf') format('truetype'),
         url('polices/true-crimes.svg#TrueCrimesRegular') format('svg');
}

h1 {
    font-family: 'TrueCrimesRegular';
    font-weight: normal;
    letter-spacing: 5px;
}

La propriété font-weight permet ici de dégraisser les titres qui sont gras par défaut. La propriété letter-spacing permet d'espacer légèrement les lettres des titres.

Le menu

Les liens

En désignant nav a comme sélecteur CSS, seuls les liens du menu seront concernés par cette mise en forme.

La propriété text-decoration: none permet d'annuler le soulignement par défaut des liens. Ensuite, nous les espaçons grâce à l'ajout d'une marge à droite de 20 pixels.

L'héritage de la couleur adressée à body n'a pas fonctionné, il faudra s'adresser précisément au lien pour que la couleur #333 s'applique.

nav a {
    margin-right: 20px;
    text-decoration: none;
    color: #333;
}

La barre sous le menu

Pour dessiner la barre séparatrice du menu, nous appliquons une bordure pleine de 4 pixels sur le bas du conteneur nav. La marge intérieure padding permet d'éloigner la bordure des liens de 16 pixels (1em).

nav {
    padding: 1em 0;
    border-bottom-width: 4px;
    border-bottom-style: solid;
    border-bottom-color: #999;
}

Cadrage et alignement

Afin que les textes ne s'étalent pas sur toute la largeur de la fenêtre, et pour permettre une meilleure lisibilité, nous ramenons la largeur du conteneur global <body> à 60% de la largeur de la fenêtre du navigateur, grâce à la propriété width suivie de la valeur 60%.
La propriétés margin-left et margin-right ont la valeur auto pour équilibrer les marges gauche et droite, de manière à centrer le contenu dans la page.

body {
    background-color: #E6E6E6;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    color: #333;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    overflow: scroll;
}

Code complet de la feuille de style externe style.css

Parmi les autres améliorations graphiques, on peut ajouter une lettrine pour les titres, une ligne de séparation du menu, la justification des textes et la suppression du souligné des liens

Voici l'ensemble du code style.css :

@font-face {
    font-family: 'TrueCrimesRegular';
    src: url('polices/true-crimes.eot');
    src: url('polices/true-crimes.eot') format('embedded-opentype'),
         url('polices/true-crimes.woff') format('woff'),
         url('polices/true-crimes.ttf') format('truetype'),
         url('polices/true-crimes.svg#TrueCrimesRegular') format('svg');
}

@import url('https://fonts.googleapis.com/css?family=Roboto');

body {
    background-color: #E6E6E6;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    color: #333;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    overflow: scroll;
}

h1 {
    font-family: 'TrueCrimesRegular';
    font-weight:normal;
    letter-spacing:5px;
}

h1:first-letter {
    font-size:2em;   
}

nav {
    padding: 1em 0;
    border-bottom-width: 4px;
    border-bottom-style: solid;
    border-bottom-color: #999;
}

nav a {
    margin-right:20px;
    text-decoration: none;
    color: #333;
}

p {
    text-align: justify;
}