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
- À 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.
- Créez un répertoire
images
dans lequel vous pourrez copier ces deux images:
GateauFromageErable.jpg et Ricardo.gif.
- 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.
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:
- 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é
- Les mesures impériales et la case à cocher pour les faire afficher doivent être cachées.
- 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.
- Créez une archive zip contenant vos fichiers HTML et CSS ainsi que votre répertoire
images
.
- Déposez votre archive sur Studium.