TP 2: Découverte du C.S.S

Créer une feuille de style et mettre en page

Les instructions de mise en page sont enregistrées dans une feuille de style au format CSS. La notre s’appelle “style1tp1.css” ce qui n’est pas original mais informatif.

Exercice 1 : design de la page

Télécharger le fichier style1tp1.css ici.

Ouvrir le fichier. Il contient des indications de mises en forme pour le “body”.

1. Enlever les marques de commentaires <!-- et --> de l’en-tête de votre fichier HTML pour que la feuille de style s’applique. Tester comme on pouvait s’y attendre les couleurs ont changé.
2. Créer un division <div id=”page”> pour encapsuler vos trois divisions. Tester. Comment sont codées les couleurs noir et blanc ?

Exercice 2 : style du bandeau

Au fur et à mesure que vous avez compris une propriété CSS commentez la dans le fichier style1tp1.css avec /* et */

1. Mettons le bandeau en forme en ajoutant une par une les instructions suivantes et en testant à chaque fois :

    					
    			 header
   			 {
      				margin:2em 3% 1% 3%;
      				padding:0.05em 0 0.05em 0;
      				font-size:200%;
      				background-color:#ffd000;
      				border-radius:25px;
   			 }
   					
   					

2. Rajouter :

   					
   			 header h1
   			 {
      				font-family:"Comic Sans MS",Arial,Helvetica,sans-serif;
      				text-align:center;
   			 }
   					
   					

3. Il manque manifestement un logo pour notre bandeau. Insérer dans la division du bandeau une division <div class=“logo”>. On notera l’utilisation de class plutôt que id. Contrairement aux id, les class ne sont pas uniques et peuvent apparaître plusieurs fois avec le même nom dans un même fichier. Chercher des explications sur le Web.

   Télécharger l'image logo.png ici.

   Insérer <img src="logo.png" width="100" alt="Logo"/>. Tester.

4. Pour positionner le logo utiliser le style :

   		 	 
   		 	 header .logo
   			{
      				float:left;
      				display:block;
   			}
   			
   			

   Ajouter une marge de 15 pixels tout autour. Puis faire revalider votre page par le W3C.

Exercice 3 : style du menu

1. Positionnons le menu par :

      
      			left:5%;
      			position:absolute;
      			width:15%;
      			overflow:hidden;
      	
      	

   Que signifie position:absolute ? Chercher sur le site OpenWeb.
2. Tester. On se rend compte qu’il faut positionner immédiatement le manifeste. Le faire avec une instruction margin provisoire. Inutile de faire quelque chose de très précis, nous y reviendrons en son temps.
3. Choisissez des couleurs de fond et d’avant plan pour le menu. Puis donner les attributs suivants aux titres de niveau 2 du menu (vous pouvez changer la couleur) :

      	
      			border-color:#f09000;
      			border-style:solid;
      			border-width:0 0 3px 0;
      			font-size:medium;
      			font-weight:700;
      			margin:0;
      			padding-left:0em;
      			text-transform:uppercase;
      			
      	

   Que signifie em ? Que signifie font-weight ?
4. Changer la couleur de la première lettre des titres de niveau 2 en utilisant nav h2:first-letter.
5. Terminer par la mise page des liste avec pour < ul > :

     
     			margin-bottom:1.5em;
      			margin-top:0.5em;
     
     

   et pour <li> :

   
      			list-style:none;
   

Exercice 4 : style du manifeste

1. Positionner le manifeste plus précisément par :

   	 
         		
     		 	background-color:#f5f8fc;
      			border:1px solid #6090c0;
      			line-height:150%;
      			margin:0 3% 2em 21%;
      			padding:0 2% 3em 2%;
      			color:#000000;
      	
      	

   et changer éventuellement les couleurs. Que signifie line-height ?
2. Choisir une mise en forme pour les titres de niveau 2.