IFT1005 - Automne 2017 - Exercice 6

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.

Cet exercice vaut 2 points, pour les obtenir il vous faut compléter tous les exercices et déposer votre résultat sur Studium.

Étapes

  1. À l'aide d'oXygen, prenez 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éez un répertoire images dans lequel vous pourrez copier ces deux images: GateauFromageErable.jpg et Ricardo.gif.
  3. Reproduisez 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 de la manière suivante à mesure que vous diminuez la largeur de l'écran: Présentation étroite de la recette Présentation très é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. 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.
  5. Créez une archive zip contenant vos fichiers HTML et CSS ainsi que votre répertoire images.
  6. Déposez votre archive sur Studium.