Technologies Informatiques

Tutoriel 2 : CSS & Gabarit

Nous allons travailler dans cette partie sur la mise en forme de la page d’accueil (index.html), l'idée étant de mettre en oeuvre la plupart des propriétés CSS vues en cours. Reprenons le site de Killian Le Roupic comme exemple et voilà ce à quoi nous voudrions qu’il ressemble :

Étape 0 : Préparation

Télécharger et extraire le fichier web2.zip

vid_tutoriel2_extract - Télécharger et extraire un fichier .zip

Après l'extraction du fichier, vous avez un dossier nommé web2. Ce dossier contient une version modifiée de index.html et quelques ressources supplémentaires.

Étape 1 : Création du CSS

Retrouver le répertoire css dans le répertoire web2
Créer dans le répertoire css le fichier style.css. Note : pour créer un fichier avec l'extension .css, choisir l'option CSS comme le type du fichier lors de la sauvegarde.
- vid_tutoriel2_css_vs - Créer un fichier CSS avec Visual Studio
- vid_tutoriel2_css_vs_code - Créer un fichier CSS avec Visual Studio Code
Ouvrir les fichiers index.html et style.css dans deux fenêtres séparées avec vote éditeur de texte pour pouvoir travailler en parallèle sur les deux
Ajouter dans le fichier index.html la ligne ci-dessous entre <head> et </head>
```
<link rel="stylesheet" href="css/style.css" type="text/css">
```

Étape 2 : Création des différentes divisions

Pour organiser la page (placer les éléments les uns par rapport aux autres correctement) nous allons découper le code HTML en différentes divisions (conteneur div). A première vue le découpage ressemble à ce qui est présenté ci-dessous, la division body existant déjà.

Dans la nouvelle version du fichier index.html, les divisions ( <div id="..."> ) ont été créées. Analyzer et faire une liste des divisions et leurs IDs (sur papier ou dans un fichier texte).

Étape 3 : Modification de l'apparence des éléments de la page

Avant commencer cette étape, merci de bien réviser la section CSS dans le cours 2 : CSS.
Rappel :
- Un fichier CSS contient des règles CSS. Une règle CSS se décompose en un sélecteur et une ou plusieurs déclarations appelées bloc de déclaration se trouvant entre les accolades.
  - Sélecteur : nom, class ou ID de(s) balise(s) dont on souhaite modifier l’aspect
  - Propriétés CSS : color, font-size...;
  - Valeurs pour chaque propriété : red, 20pt, right ...
Dans cette étape, vous modifiez que le fichier style.css. Les IDs ont été attribués aux balises dans le fichier HTML. Note : nous n'utilisons pas l'attribut class dans ce tutoriel. Mais vous êtes libre d'utiliser ce type de sélecteur dans votre projet

Les titres

Déclarer la police permanent_markerregular. La police a été téléchargée et mise dans le répertoire css.
Déclarer 2 règles CSS : h1{} et h2{}
Appliquer la police aux titres h1 et h2 en utilisant la propriété font-family
Changer la taille du titre h1 à 20pt
Changer la couleur du titre h1 à red
Changer la taille du titre h2 à 16pt
Changer la couleur du titre h2 à blue

Code CSS :

@font-face {
    font-family: 'permanent_markerregular';
    src: url('PermanentMarker-webfont.eot');
    src: url('PermanentMarker-webfont.eot?#iefix') format('embedded-opentype'),
            url('PermanentMarker-webfont.woff2') format('woff2'),
            url('PermanentMarker-webfont.woff') format('woff'),
            url('PermanentMarker-webfont.ttf') format('truetype'),
            url('PermanentMarker-webfont.svg#permanent_markerregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
    
h1 {
    font-family:'permanent_markerregular';   
    font-size:20pt;
    color:red;    
}

h2 {
    font-family:'permanent_markerregular';
    font-size:16pt;
    color:blue;       
}

Résultat attendu :

Image de fond : récupérer l’image de fond ici (fichier full-bloom.png) et sauvegarder la dans le dossier img. L’utiliser comme image d’arrière plan, fixée en haut à gauche et répétée. Ajouter les lignes ci-dessous dans le fichier style.css
```
body {
    background: url("../img/full-bloom.png") fixed repeat top left;   
}
```
Voici le résultat attendu :
Menu de navigation : transformer la liste à puces non ordonnée dans un menu de navigation.
- Code HTML : Faire attention que dans la nouvelle version du index.html. La liste est placée dans un <div> avec id="navigation"
- Code CSS : Ajouter les lignes ci-dessous dans le fichier style.css
  - #navigation ul est un sélecteur permettant sélectionner les balises ul à l'intérieur de une balise avec id="navigation"
  - La propriété list-style-type : none : permet de définir l'apparence de la puce d'un élément de liste, la valeur none est utilisée pour ne pas afficher la puce.
  - La propriété display: flex : définit le type d'affichage utilisée, la valeur flex indique qu'on a un conteneur flexible (flexbox)
  - La propriété justify-content : space-around : indique la façon dont l'espace doit être réparti entre et autour des éléments selon l'axe principal d'un conteneur flexible.
```
#navigation {
    width: 100%;
}
    
#navigation ul {
    list-style-type: none;
    display: flex;
    justify-content : space-around;
}
```
- Voici le résultat attendu :
Décorer le menu de navigation : nous mettons à jour la police des items dans le menu
- Modifier la règle css #navigation ul en ajoutant la ligne font-family: 'permanent_markerregular';
```
#navigation ul{
    list-style-type: none;
    display: flex;
    justify-content : space-around;
    font-family: 'permanent_markerregular';
}
```
- Mettre à ajour le style des liens à l'intérieur du div navigation. Ajouter les lignes ci-dessous dans le fichier style.css.
```
#navigation a {
    text-decoration:none;
    color:grey;
}
```
- Voici le résultat attendu :
Logo : changer la taille du logo à 100px
- Code CSS :
```
#logo {
    width: 100px;
}
```

Étape 4 : Les divisions

Avant commencer cette étape, merci de bien réviser la section Structure dans le CM2.
Dans ce tutoriel, nous utilisons les conteneurs flexibles (flexbox) pour organiser les divisions de la page web.

Voici le découpage et la structure attendue de la page index.html

body : centraliser les divisions à l'intérieur de la division body
- Code CSS :
```
body {
    background: url("../img/full-bloom.png") fixed repeat top left;   
    display:flex;
    flex-direction:column;    
    align-items:center;
}
```
- Ici, la div body devient un conteneur flexible - flexbox - (avec la propriété display:flex). L'axe principal est l'axe vertical (avec la propriété flex-direction:column). L'alignement sur l'axe sécondaire (l'axe horizontal) est center (avec la propriété align-items:center;).
- Résultat attendu :
entete : pas de changement
navigation : pas de changement
sousnavigation : refaire apparaître la ligne hr
- Code CSS :
```
#sousnavigation {
    width:100%;
    margin-bottom:5px;
}
```
- Résultat attendu :
corp : mettre la largeur de la division à 65% et ranger les éléments sur l'axe vertical
- Code CSS :
```
#corps {
    width:65%;
    display:flex;
    flex-direction:column;
}
```
- Résultat attendu :
identite : pas de changement

contenu , gauche , milieu et droite

Code CSS :

#contenu {
    width:100%;
    display:flex;
    flex-direction:row;
    justify-content:space-around;
    align-items:center;
    border:1px solid grey;
    background-color:#C0C0C0;
}

#gauche {
    text-align:center;
    padding:2%;
}

#milieu {
    padding:2%;
}

#droite {
    padding:2%;
}

Résultat attendu :

Code CSS :

#cv{
    width:33%;
    margin:auto;
    box-sizing:border-box;
    box-shadow : 4px 4px 0px #C0C0C0;
    margin-top:10px;
    margin-bottom:10px;
    border-radius:10px;
    text-align:center;
    border-style:dotted;
    border-width:2px;
    border-color:#C0C0C0;
    background-color:orange;
}

Résultat attendu :

surpied, pied

Code CSS :

#surpied {
    width:100%;
    margin-bottom:5px;
}

#pied {
    width:80%;
    height:auto;
    text-align:center;
    font-size:10pt;
    display:flex;
    flex-direction:row;
    justify-content:space-between;    
}

Résultat attendu :

Étape 5 : Moodle - à faire dans TD2

Créer un fichier web2.zip et le déposer dans la zone dépôt : Dépôt TD2 - Tutoriel 2
Vidéo de démonstration : vid_tutoriel1_moodle - Créer un fichier .zip et le déposer sur le Moodle