Accueil Page 1 Page 2

PAGE D'ACCUEIL

Cette page est l'affichage du fichier index.html
dans un navigateur (Chrome, Firefox, Safari, etc.)

Voir la page 01

Utiliser des images de maquettage

Le site placeholder.com génère automatiquement les images présentées sur cette page (mis à part l'icône Font Awesome présentée plus bas). Pour l'image d'entête il a juste été nécessaire de mentionner l'url suivante en source : http://via.placeholder.com/1200x900. Pour l'image placée dans le corps de l'article l'url en source est la suivante : http://via.placeholder.com/450x600.

Les images proposées se composent d'un fond gris sur lequel est mentionné la dimension de l'image (en pixels). La détermination de la taille des images doit prendre en compte leur affichage sur des écrans de différentes dimensions et résolutions. En faisant varier la dimension de la fenêtre de votre navigateur vous pouvez observer le comportement des images importées. Celles-ci s'adaptent à la largeur de la fenêtre en fonction du code dont elles dépendent

Observez par exemple le comportement de l'image situé à droite de ce paragraphe (sur un écran desktop et une large fenêtre de navigation). Lorsque vous réduisez la largeur de la fenêtre de navigation, il arrive un moment où la partie droite de l'image est masquée. Si vous réduisez encore la fenêtre, l'image se positionnera à un moment donné sous le texte. Elle sera alors de nouveau visible dans sa totalité. Vous pouvez modifier en partie ce comportement en utilisant pour l'élément <img> la proriété suivante : width="100%". L'image restera toujours entièrement visible mais elle rétréciera en fonction de la place dont elle disposera.

Image générée par le site placeholder.com

Déterminer la taille de l'icône

L'icône Font Awesome présentée ci-contre est affichée en grande taille grâce à une classe du nom de l'icône (.fa-coffee). Cette classe a été créée dans les styles personnalisés placés dans le <head>. La déclaration CSS de cette classe est : {font‑size: 170px}.

La taille en pixels est déterminée par la place occupée par l'icône juste avant le point de rupture où le texte bascule sous l'icône. Si la taille de l'icône est trop grande, en approchant de ce point de rupture, le texte se superpose à l'image. Faites l'expérience en modifiant la taille de l'icône à 200px et en faisant varier la largeur de la fenêtre d'affichage. Vous constaterez alors la superposition du texte sur l'icône.

Les icônes utilisées dans les gabarits de w3schools utilisant w3.css sont celle de la version 4.7 de Font Awesome. Vous pouvez choisir les icônes parmi toutes celles présentées à cette adresse : fontawesome.com

Lorsque vos contenus sont des données,
travailler dans Photoshop n’a tout simplement aucun sens.

Rune Madsen | Relevé sur webcitation.fr