TP CSS 2 : la mise en page

Liste des propriétés CSS utiles

Pour cette question, vous aurez probablement besoin des propriétés suivantes :

table : width (pour que le tableau occupe toute la largeur du body), border-spacing ou border-collapse (si vous souhaitez supprimer la petite bordure entre chaque cellule).
td : text-align (pour centrer le texte dans les cellules), vertical-align (pour aligner le texte en haut des cellules), background-color (pour la couleur d'arrière-plan de la cellule),
Pour que votre contenu ait une hauteur minimale : <td id=contenu><div style="min-height:300px">...</div></td>

Et, si vous souhaitez que votre site ne soit pas en pleine largeur mais centré au milieu de la fenêtre :

body : width (pour fixer la largeur du site), margin-left et margin-right (pour centrer le site), margin-top (si vous souhaitez agrandir ou supprimer la marge en haut du site), background-color (pour la couleur d'arrière-plan), ou background-image si vous préférez une image de fond.

Ecrivez les codes HTML et CSS qui permettent d'obtenir la mise en page suivante. Il faut reprendre votre réponse n°3 du TP HTML 2, et remplacer toute la mise en forme HTML par de la mise en forme CSS (ceux qui ne supporte pas de faire de la mise en page avec un tableau peuvent le faire avec les balises <div>). Les deux codes doivent être validés :

le fichier HTML doit être validé en HTML 5, il doit donc commencer par : <!DOCTYPE html>. Le validateur HTML est ici : http://validator.w3.org/#validate_by_input,
le fichier CSS doit être validé avec le validateur CSS : http://jigsaw.w3.org/css-validator/ (pour les terminales : c'est la dernière fois de l'année que je vous demande de valider un code HTML ou CSS, promis !)

Copiez le code HTML dans la première réponse et le code CSS dans la deuxième réponse. Contrairement au TP HTML, faites une mise en forme définitive (tableau en pleine largeur et couleurs d'arrière-plan).

Votre réponse n°1

Votre réponse n°2

Faites une capture d'écran du résultat et postez-la ici :

Votre réponse n°3

Lâchez-vous !

Faites le design du site de vos rêves, ou du site que vous présenterez en projet cette année. Eventuellement, inspirez-vous des superbes design des sites présentés ici : http://www.disjonk.com/fr/design-site-internet/jean-pronovost-art.htm. N'hésitez pas à piquer des images (background notamment) sur Internet. Une fois que c'est fini, faites une capture d'écran de votre design (dans une taille raisonnable, plutôt petite que plein écran) puis postez-la ici :

Votre réponse n°4

Copiez-collez le code HTML ici :

Votre réponse n°5

Copiez-collez le code CSS ici :

Votre réponse n°6

Mise en page du site avec CSS

Liste des propriétés CSS utiles

Lâchez-vous !