Valeur de cette activité : 5 points
Compétence :
17- Division d'une image dans un tableau

A-Module 03 : CSS : 5 points - difficulté : 2

Division d'une image dans un tableau

Présentation

Dans cette activité, vous allez utiliser le logiciel GIMP (sous linux-ubuntu, utilisez le menu filtre/web/slice guide ici),

ou INKSCAPE (utilisez le menu extension+web+découpe)

ou SPLITZ (suggéré)

ou SKIX afin de diviser une image dans les différentes cellules d'un tableau HTML.


ou Xaralx (guide ici)

Cette technique est utilisée afin d'effectuer la mise en page d'une page web
Cliquez ici afin d'afficher l'exemple de ce travail produit par l'enseignant.

Description


  1. Trouvez ou produisez une image au format .jpg de dimensions 1024 x 768 (approximativement) ou utilisez cette image

    Vous aimeriez découper cette image afin d'y insérer des textes dans des régions spécifiques comme dans l'exemple ci-dessous :

  2. Vous pouvez utiliser le logiciel GIMP ou téléchargez et installez le logiciel SPLITZ (suggéré) ou le logiciel SKIX ou le logiciel PictureClip .

    Si vous désirez un logiciel plus performant, vous pouvez utiliser la version DEMO du logiciel payant IMAGE CUT.

    Téléchargez installez la version DEMO du logiciel ImageCut en tapant dans le terminal :
    wget http://www.sliceimage.com/downloads/imagecutsliceimagehtml-setup.exe && wine ./imagecutsliceimagehtml-setup.exe

  3. Si vous utilisez IMAGE-CUT, lancez en tapant dans le terminal
    wine ~/.wine/drive_c/Program\ Files/ImageCut/ImageSplitter.exe
  4. En utilisant le logiciel GIMP (suggéré sous linux-ubuntu) ou SPLITZ (suggéré) ou SKIX ou PICTURECLIP, divisez votre image selon vos besoins et exportez votre travail dans une page html nommée SPLIT.HTML.
  5. Téléchargez vos documents (images, page HTML) dans votre espace de téléchargement.
  6. Affichez votre page SPLIT.HTML et copiez le code de cette page (menu Affichage - source).
  7. Ajoutez une page à votre portfolio en affichant la directive 34057.
  8. Affiche les assistants et
  9. Inscrivez dans le champ titre : Division d'une image dans un tableau
  10. Sélectionnez la matière : informatique
  11. Inscrivez dans le champ no de la directive : 34057
  12. Inscrivez dans votre page le titre de niveau 1 : Division d'une image dans un tableau
  13. Collez ensuite le code copié.
  14. Modifiez ensuite les URL de vos images afin de préciser que ces images sont situées dans votre espace de téléchargement.
  15. Vous allez maintenant écrire un texte dans une cellule de votre tableau et placer l'image de cette cellule en arrière-plan de cellule.

    Choisissez une cellule de votre tableau.

    Utilisez maintenant le code en exemple ci-dessous afin de placer l'image de cette cellule en arrière-plan en spécifiant la hauteur et largeur de la cellule (hauteur et largeur de votre image) et ensuite placer le texte dans cette cellule en remplacement de l'image.
    Exemple : <td style="background-image:url(URL);height:HAUTEUR_DE_L_IMAGEpx;width:LARGEUR_DE_L_IMAGEpx;" > TEXTE À INSÉRER ICI </td>
  16. Appliquez ensuite à ce texte des propriétés de feuille de style (taille du texte et couleurs du texte) afin de le rendre bien visible dans la page.
  17. Ajoute ensuite un saut de ligne ainsi que le nom du logiciel utilisé.