Introduction

Dans ce projet, vous apprendrez à positionner des images pour créer votre propre robot !

Ce projet couvre des éléments des composantes suivantes de Raspberry Pi Digital Making Curriculum:

• Conception de ressources 2D et 3D.

Donner des yeux à votre robot

Donnons des yeux à votre robot !

• Ouvrez ce trinket : jumpto.cc/web-robot. Le projet doit ressembler à ça :

  

• Chaque image de ce projet possède son propre nom (ou id). Par exemple, le lien HTML pour les images des yeux et du visage (‘face’, ‘eyes1’ et ‘eyes2’ commençant à la ligne 8 de votre code) ressemblent à ça :

  

• Vous pouvez utiliser l’id d’une image pour lui donne son propre style, en utilisant le symbole #. Cela vous permet de styliser chaque image séparément.

  Cliquez sur le fichier style.css. Vous voyez comme la taille du visage du robot et celle des autres images sont différentes ?

  

• Ajoutez ce code CSS pour donner un style aux yeux du robot :

  

  Remarquez que vous stylisez uniquement l’image eyes1, en utilisant #eyes1 dans votre CSS. Si vous préférez, vous pouvez utiliser #eyes2 ou #eyes3 à la place !

  

• Vous remarquez comme chaque image est affichée l’une après l’autre ? Il s’agit d’un positionnement relatif. Si vous voulez dire au navigateur exactement où placer les yeux de votre robot, il vous faudra utiliser un positionnement absolu à la place.

  Ajoutez ces 3 lignes de code au CSS pour votre image eyes1 :

  

  Vous devriez voir les yeux de votre robot se déplacer au bon endroit sur votre robot.

  

  Ce code CSS dit au navigateur à quelle distance afficher l’image du sommet/de la gauche de la page Web.

  

  Vous pouvez utiliser bottom au lieu de top pour dire au navigateur à quelle distance du bas de l’écran afficher l’image, et utiliser right au lieu de left.

Donner une bouche à votre robot

Donnons une bouche à votre robot !

• Ajoutez le code CSS suivant pour styliser votre image mouth1 :

  

• La bouche de votre robot a l’air très petite, et elle ne se trouve pas au bon endroit.

  

  Pouvez-vous modifier cela en effectuant des changements dans votre CSS ?

Défi: Concevez votre propre robot

Utilisez ce que vous avez appris pour finir la conception de votre propre robot. Voici quelques exemples de ce à quoi votre robot pourrait ressembler :

Défi: Ajoutez vos propres images

Pouvez-vous trouver des images supplémentaires à ajouter à votre robot, et les positionner sur votre page Web ? Vous pouvez même remplacer le visage de votre robot par le vôtre !