TP 4.

Déroulement du TP - Partie 1 

1. Livraison d'un nouveau dossier zippé contenant : Télécharger le fichier  

• dossier "Informations"
  • charte graphique classique
• fichier index.html dont la mise en place du code est cette fois finalisée
• répertoire css contenant 1 fichier style.css
• répertoire image

Tout le monde repart de ce dossier de travail pour réaliser le TP

2. Décompression du répertoire par les étudiants

3. Les étudiants renomment le répertoire www en www-NOMBINOME1-NOMBINOME2

4. Ouverture des fichiers

• index.html dans le navigateur web
  • la page web est quasiment intégrée
  • il reste à gérer la mise en forme du pied de page
• styles.css dans un éditeur de code
  • ce fichier contient maintenant 700 lignes de code CSS
    • en haut du fichier se trouve le code du reset.css pour annuler les styles par défaut du navigateur
    • vient ensuite l'appel à la police spécifique Trocchi (ligne 17)
    • en suivant se trouve les styles génériques (styles portant sur des balises comme body, h1, h2,...), puis de plus en plus spécifiques (spécifiés par des class attribuées à certains éléménts html)

5. Suite de l'intégration CSS

• dans le fichier style.css se positionner en bas du fichier pour y intégrer le code permettant de réaliser la mise en forme de la zone aside
• créer une class du type .grid_3 { } pour y spécifier des styles spécifiques qui permettront aux 4 colonnes composant le pied de page de se disposer côte à côte (la class grid_3 est déjà appelée dans le code html) :
  • chaque élément de type grid_3 doit
    • avoir une largeur de 220 pixels,
    • "flotter" à gauche,
    • une marge extérieure gauche de 10 pixels
    • une marge extérieure droite de 10 pixels
  • une fois ces styles appliquées, les 4 listes du pied de page doivent se positionner les unes à coté des autres comme sur la charte graphique
• Nous allons ensuite appliquer les styles spécifiques pour mettre en forme les 3 listes de gauche du bas de page
  • Ces 3 listes sont contenues dans des balises ayant pour class "list-2", il faut donc en bas de la feuille de styles :
    • créer une class du type .list-2 li { } puis mettre en place dans cette class les styles permettant
      • de créer une marge intérieure de 12px en bas de chaque élément de liste
    • créer une class du type .list-2 li a { } puis mettre en place dans cette class les styles permettant
      • d'attribuer une couleur à ces liens : #a49d93
  • une fois ces styles appliquées la mise en forme des 3 listes (espacement, code couleur) doit être conforme à la charte graphique
• Nous allons ensuite mettre en forme les liens associés aux icones toujours dans le bas de page
  • Cette liste est contenue dans la balise ul ayant une class spécifique "soc-1", il faut donc en bas de la feuille de styles :
    • créer une class du type .soc-1 li { } puis mettre en place dans cette class les styles permettant
      • de créer une marge intérieure de 17px en bas de chaque élément de liste
    • créer une class du type .soc-1 li a { } puis mettre en place dans cette class les styles permettant
      • d'attribuer une couleur à ces liens : #a49d93
    • créer une class du type .soc-1 li a figure { } puis mettre en place dans cette class les styles permettant
      • de donner un positionnement relatif à l'élément
      • de créer une marge droite exétieure de 8px à l'élément (de manière à éloigner le texte de l'icone)
      • de fixer la largeur de l'élément à 24 pixels
      • de fixer la hauteur de l'élément à 24 pixels
      • d'attribuer un style display:inline-block à l'élément
    • créer une class du type .soc-1 li a img { } puis mettre en place dans cette class les styles permettant
      • de créer une marge extérieure de 7pixels
    • créer une class du type .soc-1 li a:hover, .soc-1 li a:focus{ } puis mettre en place dans cette class les styles permettant
      • d'attribuer une couleur à ces liens au passage de la souris : #ea7044
      • que ces liens ne soient pas soulignés au passage de la souris
  • A l'issu de ces étapes cette zone de la page doit possèder un affichage conforme à la charte graphique
• il ne reste plus qu'à mettre en forme la zone de copyright tout en bas du site web : le contenu de la balise footer
  • Ces éléments sont contenus dans la balise footer ; on ajoute donc en bas de la feuille de style
    • footer { }, puis on associe à cet élement de style les contraintes suivantes :
      • une position relative
      • un espace intérieur haut de 15px
      • un espace intérieur bas de 40 px
    • on créé une class en bas de la feuille de style .privacy { } puis on y associe les styles
      • couleur de police : #a49d93;
      • taille de police de 12px
      • type de police : Arial, Helvetica, sans-serif
    • on créé une class en bas de la feuille de style .privacy a { } :
      • couleur de police : #a49d93;
      • pas d'effet souligné sur ce lien
    • on créé une class en bas de la feuille de style .privacy a:hover, .privacy a:focus { } :
      • couleur de police : #ea7044;
      • pas d'effet souligné sur ce lien
• A cette étape cette première page està priori finalisée dans sa mise en forme
• Il est maintenant nécessaire de controler cette intégration
  • en controlant la validité du code html
  • en vérifiant l'affichage sur différents navigateurs (dont Internet Explorer) et plateformes (PC Mac,...)
• Les prochaines étapes (TP 6) seront la mise en place :
  • Des adaptations pour l'impression
  • Des adaptations pour les smart phone et tablettes

Déroulement du TP - Partie 2 : media queries

1. Livraison d'un nouveau dossier zippé contenant : Télécharger le fichier (tp8.zip 7,47 Mo 2015-11-06 17:20:09)

• dossier "Informations"
  • charte graphique classique
  • charte graphique smart phone
• fichier index.html dont la mise en place du code est finalisée
• répertoire css contenant 1 fichier style.css
• répertoire image

Tout le monde repart de ce dossier de travail pour réaliser le TP

2. Décompression du répertoire par les étudiants

3. Les étudiants renomment le répertoire www en www-NOMBINOME1-NOMBINOME2

4. Ouverture des fichiers

• index.html dans le navigateur web
  • la page web est intégrée
  • il reste à gérer la mise en forme en version mobile
• styles.css dans un éditeur de code
  • ce fichier contient maintenant plus de 700 lignes de code CSS
    • en haut du fichier se trouve le code du reset.css pour annuler les styles par défaut du navigateur
    • vient ensuite l'appel à la police spécifique Trocchi (ligne 17)
    • en suivant se trouve les styles génériques (styles portant sur des balises comme body, h1, h2,...), puis de plus en plus spécifiques (spécifiés par des class attribuées à certains éléménts html)

5. Suite de l'intégration CSS : mise en place du responsive

• dans le fichier index.html positionner dans le <head></head> le code ci-après qui va permettre d'empêcher les navigateurs des smart phone d'appliquer une réduction de la page :
  • <meta name="viewport" content="width=device-width; initial-scale=1.0">
• une fois cette balise META viewport ajouter nous allons pouvoir travailler dans le fichier CSS :
  • se positionner en bas du fichier CSS
  • faire une déclaration qui permettra de surcharger les écrans disposant d'une largeur comprise entre 768px et 995px (grande tablette) en ajoutant cette ligne :
    • @media only screen and (min-width: 768px) and (max-width: 995px) {/* Ici les styles pour les 768px < écrans < 995px */ }
  • faire une déclaration qui permettra de surcharger les écrans disposant d'une largeur iférieure à 767px en ajoutant cette ligne (petite tablette + smart phone) :
    • @media only screen and (max-width: 767px) { /* Ici les styles pour les 767px > écrans */ }
• Une fois ces 2 conditionnements en place, nous allons surcharger (contredire) des styles précédemment définis plus haut dans la feuille de style CSS : essentiellement en :
  • Modifiant les largeurs
  • Supprimant des flottements
  • Cachant des éléments
  • redimensionnant des éléments
• Nous pourrons vérifier la mise en forme pendant la construction en réduisant la largeur de votre navigateur (tous sauf internet explorer)

5.1. Surcharge pour les écrans inférieurs à 768px :

• Au niveau de @media only screen and (max-width: 767px) { /* Ici les styles pour les 767px > écrans */ } entre les parenthèses on doit ajouter les styles suivants :
  • largeur minimale du body (min-width :.....px) d'une valeur de 300px
  • largeur du .main de 300px
• On peut déjà voir le rendu modifié dans le navigateur en ajustant sa largeur
• On continue les surcharges pour ces tailles d'écran :
  • largeur de 100% pour la class .container_12
  • Pour les élements ayant pour class .container_12 .grid_4 et .container_12 .grid_3 :
    • largeur de 100%
    • centré
    • marge haute externe de 30 pixels
  • suppression des marges intérieures pour la class .flexslider
  • pour le h1 contenu dans le .flexslider :
    • taille de police : 50px
    • hauteur de ligne : 80px
    • espacement des lettres : -5px
• On peut à nouveau voir le rendu dans le navigateur en ajustant sa largeur : les éléments commencent à se verticaliser.
• On continue les surcharges pour ces tailles d'écran :
  • On applique aux éléments .row-1, .row-2, aside .wrapper (pour décoler les textes des bordures)
    • un espace intérieur gauche de 30 pixels
    • un espace intérieur droit de 30 pixels
  • On applique à l'élément aside
    • une largeur de 300 pixels
    • on le centre dans la page
  • On applique à l'élément .row-2 .wrapper
    • une largeur calculée automatiquement (auto)
    • une marge intérieure gauche de 10 pixels
    • une marge intérieure droite de 10 pixels
• Une fois tous ces styles mis en place un nouveau design s'applique à notre code html pour tous les navigateurs disposant d'une largeur inférieure à 768 pixels semblable à la charte proposée par le designer :

5.2. Surcharge pour les écrans compris entre 768px et 995 px :

• Au niveau de @media only screen and (min-width: 768px) and (max-width: 995px) {/* Ici les styles pour les 768px < écrans < 995px */ }entre les parenthèses on doit ajouter les styles suivants :
  • largeur minimale du body (min-width :.....px) d'une valeur de 768 pixels
  • largeur du .main de 600px
  • largeur de l'aside de 600 px
  • largeur de 50% pour .container_12 .grid_3
• Un nouveau rendu de navigateur avec une largeur supérieure à la largeur précédente permet de voir un autre modèle de mise en forme s'appliquant aux écrans de 768px à 995 px.

5.3. Continuez seuls les ajustements en responsive design

• Sur ces principes vous pouvez continuer à adapter la mise en forme en fonction de la largeur d'écran disponible en déplaçant les éléments, grossissant les tailles de caractères...