web_2024/R1.02/tp/tp4

TP CSS - mise en page d'un site

Vous pouvez utiliser l'inspecteur dans les outils développeur pour modifier du code CSS directement dans le navigateur.

Vous pouvez utiliser des aides pour trouver les propriétés CSS.

Un peu d'aide pour les grilles css et css tricks.

Un peu d'aide pour les flexbox et css tricks.

Une vidéo si vous voulez utiliser les css grid css grid.

Exercice

On veut réaliser un site qui regroupe des personnes importantes de divers domaines, pour obtenir la présentation suivante. Nous allons écrire l'HTML, puis réaliser progressivement les CSS correspondantes.

1. Écrire l'HTML nécessaire pour coder cette page (sans utiliser de tableau). On se limitera à deux informaticiens.
   Si vous êtes en retard sur les tp, vous pouvez récupérer une version html.

La page fait 960px de large pour votre culture

Les photos:

• http://upload.wikimedia.org/wikipedia/commons/e/e6/Dennis_Ritchie.jpg
• http://upload.wikimedia.org/wikipedia/commons/7/71/Linus_Torvalds_cropped.jpeg
• http://upload.wikimedia.org/wikipedia/commons/7/79/Blaise_pascal.jpg
• https://upload.wikimedia.org/wikipedia/commons/1/17/Alan_Turing_%281912-1954%29_in_1936_at_Princeton_University.jpg

Les couleurs :

• bleu : #08c.
• gris : #EFEFEF.
• ombre : #555.

On utilisera les balises htm5 d'organisation d'un site : header, nav, footer, section, aside, etc.
Pour la mise en page des éléments, il y a évidemment plusieurs solutions. float et display:inline-block peuvent être utiles.
On peut aussi utiliser le module css de boîtes flexibles (flexbox).
On peut utiliser le module css de grilles (grid).

2. Réaliser la mise en page telle que sur l'image en haut de page. Vous pouvez ajouter des attributs (class et id) dans votre source html.

Commencer de haut en bas et de gauche à droite. Il faut garder au maximum une logique dans la mise en page et la réaliser étape par étape. Par exemple :

• mise en page du titre de la page
• mise en page du menu
• mise en page sur 2 colonnes du contenu principal
• mise en page de la colonne de droite
• mise en page du titre de la colonne de gauche
• mise en page des images des personnalités
• mise en page des vignettes
• mise en page du pied de page
• petit correctif pour la mise en page globale

Bon courage ;)