IFT-1005: Exercices #7

But de l'exercice

À la fin de cet exercice, vous devriez pouvoir formatter avec du CSS pour avoir une présentation sur deux colonnes. Il faudrait aussi que l'affichage soit adaptable en fonction de l'écran.

Étapes

  1. À l'aide d'Emacs, prendre une copie de ce fichier HTML et ce fichier CSS qui vous donnent une base de travail. Vous pouvez modifier ces fichiers HTML et CSS.
  2. Créer un répertoire images dans lequel vous pourrez copier ces deux images: EscalopesVeau.jpg et Ricardo.png.
  3. Reproduire une page web HTML 5 valide qui reprend l'organisation de cette présentation de la recette si votre fenêtre a une largeur plus grande que 1024 pixels: Présentation large de la recette Mais lorsque vous rapetissez votre fenêtre à une largeur inférieure à 1024 pixels, l'affichage devrait s'ajuster pour avoir cette apparence: Présentation étroite de la recette
  4. Voici les caractéristiques à reproduire en prenant bien soin que toute la mise en page est dans le CSS et non le HTML sauf pour l'ajout éventuel d'images.
    • Les pastilles rouges sont des liens qui mènent directement aux sections du même nom dans la description de la recette.
    • Le contenu principal est entouré d'une bordure orange.
    • L'image doit être cadrée à droite
    • La partie préparation devrait avoir un fonds grisé
    • Le pied de page contient une image, avec un lien vers le site http://www.ricardocuisine.com, qui reste centré dans le bas de l'écran peu importe la hauteur de la fenêtre. Attention: pour centrer un bloc dans une page, il faut spécifier explicitement sa largeur.
    Assurez-vous que votre page s'affiche bien lorsque la fenêtre est large avant d'ajouter au bas de votre CSS un media query pour modifier l'affichage de certains éléments lorsque la fenêtre est rapetissée.