CSS

>> Support de cours à télécharger (PDF)

 

Quelques ressources

Avant de commencer les exercices, vous devez valider en ligne le code XHTML réalisé au dernier cours avec la DTD de type Strict !

 

Les exercices (4 parties en tout)

 

1) Première partie

Une fois le fichier XHTML validé, faire les exercices suivants en remplissant la feuille de style :

  • Changer la couleur de fond de la page.
  • Changer la police également.
  • Ajouter le logo de l'INALCO en haut à droite.
  • Redimensionner le logo.
  • Définir un style italique pour les paragraphes.
  • Modifier la couleur des liens.
  • Changer la couleur de police du titre et lui appliquer un fond coloré.
  • Ajouter une liste à puces, et changer le style des puces.
  • Modifier la mise en forme du tableau (couleurs, etc.).

 

2) Deuxième partie

L'idée de ce TP est de créer une page contenant un entête, un menu à gauche, un contenu et un pied de page, tout cela réalisé à l'aide de la feuille de style. Le menu contiendra des liens : un vers une page possédant des couleurs différentes, une autre vers une version uniquement textuelle de la page et un troisième pour les daltoniens (noir et blanc).

Exemple à réaliser

Schema

Principe de l'exercice

Pour suivre l'exemple donné plus haut, vous aurez besoin de définir 5 objets dans votre page XHTML :

Un conteneur, qui devra lui-même contenir :

  • Un entête,
  • Un menu à gauche (qui contient trois liens hypertextes),
  • Un contenant (le texte principal),
  • Un pied de page.

Chacune de ces boîtes aura des attributs définis dans la feuille de style.
Pour ce faire, vous utiliserez les fonctions CSS suivantes :

* Pour visualiser les boîtes que vous créez, n'hésitez pas à leur attribuer une couleur de fond ou une bordure afin de voir exactement leur taille et leur emplacement.

* L'entête peut être un texte ou bien une image de la taille du bandeau, que vous pouvez créer avec Gimp.

Créer plusieurs pages toutes associées à la même feuille de style, de façon à obtenir un site Internet avec au minimum une page d'accueil et une page de contact (qu'on alimentera la semaine prochaine). Les liens du menu horizontal doivent permettre de naviguer entre ces pages.

 

--------------------------

Astuces

 

Pour le menu horizontal :

1) Liste à puces : display:inline-block ; + list-style-type: none ; + padding ;

2) Ne pas oublier d'associer des styles différents avec :hover.

 

Pour faire en sorte que les deux colonnes centrales soient de la même longueur :

1) Ajouter un contenant et lui attribuer la propriété CSS display: table ;

2) Attribuer la propriété CSS display : table-cell ; sur les deux autres

3) Supprimer tout positionnement de type float.

--------------------------

 

3) Troisième partie

 

4) Quatrième partie

  • Télécharger le logiciel de création et de retouche d'images GIMP
  • Créer une nouvelle image de la taille de votre bandeau
  • Ajouter une image et un titre
  • Exporter au format JPEG
  • Insérer l'image obtenue dans le div "bandeau" de votre page

 

> Le tout est à m'envoyer par mail, dans une archive au format ZIP à votre nom.