Support de cours PUB/MMI

TP3

Déroulement du TP

Lors de ce TP, nous allons continuer la saisie de la feuille de styles CSS : Télécharger le fichier (tp4-2014.zip 4,91 Mo 2015-11-01 21:46:39)

Ouvrez/décompressez le répertoire www pour éditer le code de la page index.html et du fichier CSS
Vérifiez l'état d'avancement de la construction des styles CSS en exécutant la page index.html dans un navigateur

Passage en revue du contenu du fichier styles.css

Nous allons oralement passer en revue ensemble le contenu du fichier CSS qui vous est livré

la première partie du code contient le code du reset.css
une seconde partie permet d'appeler la police sur le serveur de google font

ensuite dans l'ordre du plus général au moins général sont proposés le reste des styles déjà construits

		
body {

background:url(../images/bg-main.jpg) repeat-y 50% 0 #000;

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

font-size:13px;

line-height:18px;

color:#696560;

position:relative;}  /*Notion de chemin pour aller rechercher l'image de fond*/a {

color:#ef4f33;

cursor:pointer;

text-decoration:none;

}

a:hover, a:focus {

text-decoration: underline

}  /*Rôle des pseudo classes :hover (souris) :focus (clavier) : c'est déjà des notions d'ergonomie (comportement de l'interface)*/
/* Header styles */

h1, h2, h3, h4, h5, h6 {

line-height:1.2em;

padding-bottom:18px;

color:#fff;

font-weight:bold;

text-transform:uppercase;

letter-spacing:-2px

} /*On essaye de grouper au maximum les styles généraux de certaines balises*/
/* Structure Page */ 

header, section, aside{

width: 940px;

margin: 0 auto;

position: relative;}

section{ clear:both} /*Role des margin :0 auto pour centrer les éléments en bloc dans la page + rôle du clear:both pour annuler les flotttements + consulter les 2 méthodes pour "rompre" les flottements*/
	          
/* Structure Header */ 

header h1 {

display: block;

padding: 0 0 0 1px;

margin: 0; float:left; width:180px;

}

nav {

float: right; padding-top:45px; width:706px

} /*Notion de flottement des éléments et le fait de devoir "rompre" ces flottements pour revenir dans le flux. Montrer/faire tester ce que cela donne si on supprime "section{ clear:both}"*/
		  
ul.menu li {

float:left;

margin-left:28px

}

ul.menu li a {

display:block;

color:#fff;

position:relative;

font-size:22px;

font-weight:bold;

text-transform:uppercase; 

letter-spacing:-1px

} 

ul.menu a:hover,.menu a:focus {

text-decoration:none;

color:#ef4f33; }  /*Mise en place des styles du menu : on peut reparler des flottements si besoin (les li sont par défaut des éléments de type "bloc", pour qu'ils se placent côte à côte on doit introduire le comportement de flottement*/
		  
et les derniers styles de la feuille de styles : 

/* Structure section */ 

.flexslider {

min-height: 120px;

margin: 0;

position: relative;

padding: 103px 0 133px 47px;

}

.flexslider h1 {

display: block;

font-size: 140px;

line-height: 184px;

font-weight: bold;

color: white;

letter-spacing: -12px;

}

.flexslider h1 span {

color: #EA7044;

font-size: 30px;

line-height: 32px;

padding-left: 10px;

margin-top: -18px;

display: block;

letter-spacing: -2px;

} /*Notions de padding, de letter-spacing et de margin négatives > à leur faire tester en supprimant ces styles et en voyant les conséquences sur le navigateur 	  
Importance des commentaires qui viennent ponctuer/organiser le code*/

Suites à donner

Vous pouvez maintenant suivre les étapes ci-après...

A. Pour respecter la charte graphique transmise il faut reproduire l'effet qui est présent au niveau du background du header
- il s'agit d'appeler une image de fond appliquée au "header" (cette image est semi transparente) : "bg-header.png"
- une fois ce style appliqué se pose un problème, les zones à droite et à gauche de la zone de contenu n'affichent pas l'image
- pour corriger ce point il faut remanier les styles CSS précédemment posés
  - on ne doit pas préciser la largeur du header, ni ses marges
  - on doit créer une class sur l'élément qui est contenu dans le header pour lui appliquer la largeur et les marges précédemment supprimées sur le header
  - une fois mis en place on doit retrouver le même effet sur le header que dans la charte graphique
B. Intégration des styles de la première ligne de 3 blocs : styler la ligne
- il existe une class sur le div qui fait suite au div .flexslider nommée row-1
- nous allons dans la feuille de style CSS ajouter les styles permettant d'appliquer le fond image à ce div en appelant l'image "tail-header.png"
- on applique une bordure en haut de ce div d'une couleur #0C0B0B et d'une hauteur de 12px
- on applique un espacement à l'intérieur du bloc pour créer des espaces intérieurs de 92px en haut, 89px en bas, 0 pixels à droite, 0 pixels à gauche
C. Intégration des styles de la première ligne de 3 blocs : styler chaque bloc
- Nous allons cette fois nous appuyer sur la class "bloc_tiers" comme sélecteur de chacun des 3 blocs de contenus de la ligne.
  - dans la feuille de style css vouc ajouter donc le sélecteur .bloc_tiers et les styles spécifiques suivants :
- On applique dans la feuille de styles les styles permettant :
  - marge droite : 10 pixels
  - marge gauche : 10 pixels
  - de positionner les 3 blocs les uns à côté des autres
  - largeur de 290px
- A ce stade les 3 blocs se disposent bien les uns à côté des autres mais l'image de fond n'est pas bien positionnée, c'est parce que nous sommes "sortis du flux html" en mettant en place les flottements, il faut "revenir dans le flux" :
  - en ajoutant une class sur le div au dessus des 3 blocs
  - en attribuant à cet élement
    - une largeur de 100%
    - un style overflow:hidden pour supprimer les flottements (cf http://www.quirksmode.org/css/clearing.html)
- On doit maintenant "styler" les headings de niveau 2 :
  - ces styles s'appliqueront à tous les headings de niveau 2 de la page
  - la taille de la police est de 40 pixels
  - un espace en bas du heading est aménagé sur une hauteur de 36 pixels
- On définit ensuite les styles du paragraphe contenu dans chaque bloc
  - la taille de la police est de 11 pixels
  - les caractères sont transformés en capitale
- On définit les styles s'appliquant au lien contenu dans chaque bloc :
  - on ajoute une class "link-1" dans le code html au niveau de chaque lien
  - on définit des styles s'appliquant à la class "link-1"
    - couleur blanche
    - taille de police de 11 pixels
    - comportement de type bloc
    - mise en forme en capitale
    - pas de souligné
    - une marge haut de 15 pixels
- La flèche qui vient devant chaque lien est gérée en image de fond et est associée à la balise span
  - on attribue à chaque span contenu dans chaque lien les styles suivants
    - comportement de type "inline-block"
    - image de fond : "marker-1.png" positionnée à droite sans répétition
    - largeur de 9 pixels
    - hauteur de 5 pixels
    - marge de 5 pixels en haut, 4 pixels à droite
  - au passage de la souris sur le lien la flèche change de couleur
    - cet effet est produit en déplaçant l'image de fond du span au passage de la souris
    - on doit donc créer un effet se déclenchant au passage de la souris qui va au niveau de chaque span contenu dans chaque lien déplacer l'image de la droite vers la gauche
D. finalisation de la première ligne
- Pour finaliser la première ligne dans sa mise en forme reste à équilibrer les paragraphes qui ont des hauteurs variables :
  - On ajoute une hauteur minimum de 80 pixels
  - On ajoute une hauteur maximum de 80 pixels
E. Mise en forme de la seconde ligne
- Cette mise en forme respectera des principes similaires, vous pouvez donc réaliser sa mise en forme en autonomie.

TP 3.

TP3

Déroulement du TP

Passage en revue du contenu du fichier styles.css

Suites à donner