HTML tutorial - coder un profile layout - les images (premier partie)(7)
Il y a presque un an je crois que je n’avais pas mis de tutorial ici… A ma décharge, je dois avouer que depuis j’étais très occupée à créer
profile_layout. et à poster les tut’ déjà existant en anglais.
Ce tutorial est dédicacé spécialement à mag_mus . J’espère pouvoir éclairer suffisamment ta lanterne ma Magounette !
Il y aura deux tut’ sur les images car c’est un travail un peu plus délicat que tout ce que nous avons vu jusqu’à présent. C’est pourquoi je vous conseille de réviser en relisant simplement : TUT1 - TUT2 - TUT3 - TUT5 - TUT6 -
De même, si un ou une pro des profiles passe par ici et découvre que je me suis trompée ou tient à m’apporter une info supplémentaire, c’est avec la plus grande modestie que j’accepterai tout commentaire permettant de m’améliorer.
Déjà un premier rappel élémentaire mon cher Watson : votre profile avec image(s) ne rendra bien que si votre ou vos images ou photographies sont belles ! Il n’y a pas de miracle dans ce domaine. Je travaille toujours mes profiles en ayant Photoshop ouvert en permanence, ne serait-ce que pour vérifier la taille de l’image mais le plus souvent, pour aller chercher le code hexadécimal des couleurs (vous savez maintenant, le « truc » qui commence par # et est suivi de 6chiffres et/ou lettres) contenues dans l’image.
Deuxième info devinable : les images doivent aller sur un profile Internet…. Donc, étrangement, chaque image doit être hébergée sur Internet elle aussi ! Et donc avoir une adresse URL… Si vous ne savez pas encore le faire, allez voir PAR ICI pour découvrir diverses façons de réaliser cette opération.
La fonction de l’image peut être multiple :
- tout simplement être un objet mis dans une case au même titre que le texte (avec ou sans texte dans cette case) ; c’est le cas des headers, des footers et des icons que l’on voit souvent dans les profiles.
- un élément de séparation ou de bordure, au même titre qu’une ligne plus ou moins épaisse de couleur.
- le background (l’arrière plan) d’une case, d’une ligne, voire de tout le tableau… c’est là son utilisation la plus délicate et de loin !
Mais dans tous les cas, vous devez nommer votre image par son adresse URL.
est la balise de base quand l’image est un objet dans une case ou un élément de séparation ou une bordure. En aucun cas vous ne pourrez mettre du texte par-dessus (ou alors ce n’est plus du codage de base… niéhéhé) mais avant, après pas de problème ! Vous pouvez également placer une couleur d’arrière-plan. Cette balise sera donc contenue à l’intérieur des …. , à l’intérieur d’une case/cellule donc.
Dans ce cas, je le répète, l’image est UN objet, unique, et donc ne se répètera pas.
ou est l’attribut de base quand l’image est un arrière-plan, un background au même titre que le couleur. Attention ! vous ne pouvez pas ajouter une couleur d’arrière-plan en plus. C’est soit une image, soit une couleur d’arrière-plan, pas les deux à la fois.
Comme la couleur, votre image va remplir la zone définie (tout le tableau ou la case indiquée) et pour cela, l’image se répètera au besoin pour remplir toute la surface.
Quand il s’agit d’une texture, c'est-à-dire dont le but est de se répéter pour obtenir un arrière-plan, ce n’est pas grave, au contraire !
Mais quand vous avez choisi une image telle une feuille de parchemin pour vous servir de background à votre image, la situation est beaucoup plus délicate et il vous faudra jouer avec beaucoup de précaution sur les dimensions et de l’image, et de votre table.(Parfois on voit une balise qui est : style="background-repeat:no-repeat" … malheureusement, elle est inopérante avec LJ… et c’est bien dommage !)
L’exercice pour ce premier tutorial va vous permettre de vous familiariser avec les possibilités d’utilisation des images, puis avec les codes qui permettent cette utilisation…. Mais à vous de retrouver le bon code pour chaque profile !
Voici donc 6 profile layouts tous désignés par une lettre (de A à F)
Le plus usuel ! PROFILE A....... celui avec une image header en haut..... (mais non ce n'est pas de la pub ! ou alors juste un message subliminable....). C'est vraiment l'image/objet typique....
......................................................................................................................................................................................................................................................
Cette fois ci, dans le PROFILE B, utilisation des icons avec derrière une couleur en background..... L'utilisation des icons se développe...
......................................................................................................................................................................................................................................................
Pour ce PROFILE C, j'ai utilisé en header et footer une texture et j'ai fait attention avec l'attribut "height" de mettre un nombre de pixels qui permet d'avoir une seul rangée de points.... mais il s'agit bien d'une image de texture.... la preuve ICI .
......................................................................................................................................................................................................................................................
Avec le PROFILE D, l'image texture est utilisée comme.... separator ! Mais encore une fois il s'agit bien d'une image répétée.... elle est utilisée donc comme arrière-plan pour remplie des cases.
......................................................................................................................................................................................................................................................
Comme vous pouvez le voir dans ce minimaliste PROFILE E, on peut écrire sur l'arrière plan...
......................................................................................................................................................................................................................................................
Voici donc le plus difficile à réaliser, ce PROFILE F, car il faut prévoir exactement la place du texte et ne pas en mettre trop au risque qu'il déborde là où on ne veut pas, et qu'il oblige l'image d'arrière-plan à se répéter.....
......................................................................................................................................................................................................................................................
Voici 6 pages de codes (que je vous conseille d’imprimer) tous désignés par un numéro (de 1 à 6)
A vous de jouer ! Associez chaque profile à sa page de codes… (lettre + numéro)
…. Et question subsidiaire, retrouvez moi le code dont je ne vous ai pas encore parlé, le code inconnu pour les débutantes….
(Je tiens à remercier Mr Glen Morangie pour m’avoir aidée à construire ce tutorial…. Niéhéhé !)
profile_layout. et à poster les tut’ déjà existant en anglais.
Ce tutorial est dédicacé spécialement à mag_mus . J’espère pouvoir éclairer suffisamment ta lanterne ma Magounette !
Il y aura deux tut’ sur les images car c’est un travail un peu plus délicat que tout ce que nous avons vu jusqu’à présent. C’est pourquoi je vous conseille de réviser en relisant simplement : TUT1 - TUT2 - TUT3 - TUT5 - TUT6 -
De même, si un ou une pro des profiles passe par ici et découvre que je me suis trompée ou tient à m’apporter une info supplémentaire, c’est avec la plus grande modestie que j’accepterai tout commentaire permettant de m’améliorer.
Déjà un premier rappel élémentaire mon cher Watson : votre profile avec image(s) ne rendra bien que si votre ou vos images ou photographies sont belles ! Il n’y a pas de miracle dans ce domaine. Je travaille toujours mes profiles en ayant Photoshop ouvert en permanence, ne serait-ce que pour vérifier la taille de l’image mais le plus souvent, pour aller chercher le code hexadécimal des couleurs (vous savez maintenant, le « truc » qui commence par # et est suivi de 6chiffres et/ou lettres) contenues dans l’image.
Deuxième info devinable : les images doivent aller sur un profile Internet…. Donc, étrangement, chaque image doit être hébergée sur Internet elle aussi ! Et donc avoir une adresse URL… Si vous ne savez pas encore le faire, allez voir PAR ICI pour découvrir diverses façons de réaliser cette opération.
La fonction de l’image peut être multiple :
- tout simplement être un objet mis dans une case au même titre que le texte (avec ou sans texte dans cette case) ; c’est le cas des headers, des footers et des icons que l’on voit souvent dans les profiles.
- un élément de séparation ou de bordure, au même titre qu’une ligne plus ou moins épaisse de couleur.
- le background (l’arrière plan) d’une case, d’une ligne, voire de tout le tableau… c’est là son utilisation la plus délicate et de loin !
Mais dans tous les cas, vous devez nommer votre image par son adresse URL.
est la balise de base quand l’image est un objet dans une case ou un élément de séparation ou une bordure. En aucun cas vous ne pourrez mettre du texte par-dessus (ou alors ce n’est plus du codage de base… niéhéhé) mais avant, après pas de problème ! Vous pouvez également placer une couleur d’arrière-plan. Cette balise sera donc contenue à l’intérieur des …. , à l’intérieur d’une case/cellule donc.
Dans ce cas, je le répète, l’image est UN objet, unique, et donc ne se répètera pas.
ou est l’attribut de base quand l’image est un arrière-plan, un background au même titre que le couleur. Attention ! vous ne pouvez pas ajouter une couleur d’arrière-plan en plus. C’est soit une image, soit une couleur d’arrière-plan, pas les deux à la fois.
Comme la couleur, votre image va remplir la zone définie (tout le tableau ou la case indiquée) et pour cela, l’image se répètera au besoin pour remplir toute la surface.
Quand il s’agit d’une texture, c'est-à-dire dont le but est de se répéter pour obtenir un arrière-plan, ce n’est pas grave, au contraire !
Mais quand vous avez choisi une image telle une feuille de parchemin pour vous servir de background à votre image, la situation est beaucoup plus délicate et il vous faudra jouer avec beaucoup de précaution sur les dimensions et de l’image, et de votre table.(Parfois on voit une balise qui est : style="background-repeat:no-repeat" … malheureusement, elle est inopérante avec LJ… et c’est bien dommage !)
L’exercice pour ce premier tutorial va vous permettre de vous familiariser avec les possibilités d’utilisation des images, puis avec les codes qui permettent cette utilisation…. Mais à vous de retrouver le bon code pour chaque profile !
Voici donc 6 profile layouts tous désignés par une lettre (de A à F)
Le plus usuel ! PROFILE A....... celui avec une image header en haut..... (mais non ce n'est pas de la pub ! ou alors juste un message subliminable....). C'est vraiment l'image/objet typique....
......................................................................................................................................................................................................................................................
Cette fois ci, dans le PROFILE B, utilisation des icons avec derrière une couleur en background..... L'utilisation des icons se développe...
......................................................................................................................................................................................................................................................
Pour ce PROFILE C, j'ai utilisé en header et footer une texture et j'ai fait attention avec l'attribut "height" de mettre un nombre de pixels qui permet d'avoir une seul rangée de points.... mais il s'agit bien d'une image de texture.... la preuve ICI .
......................................................................................................................................................................................................................................................
Avec le PROFILE D, l'image texture est utilisée comme.... separator ! Mais encore une fois il s'agit bien d'une image répétée.... elle est utilisée donc comme arrière-plan pour remplie des cases.
......................................................................................................................................................................................................................................................
Comme vous pouvez le voir dans ce minimaliste PROFILE E, on peut écrire sur l'arrière plan...
......................................................................................................................................................................................................................................................
Voici donc le plus difficile à réaliser, ce PROFILE F, car il faut prévoir exactement la place du texte et ne pas en mettre trop au risque qu'il déborde là où on ne veut pas, et qu'il oblige l'image d'arrière-plan à se répéter.....
......................................................................................................................................................................................................................................................
Voici 6 pages de codes (que je vous conseille d’imprimer) tous désignés par un numéro (de 1 à 6)
A vous de jouer ! Associez chaque profile à sa page de codes… (lettre + numéro)
…. Et question subsidiaire, retrouvez moi le code dont je ne vous ai pas encore parlé, le code inconnu pour les débutantes….
(Je tiens à remercier Mr Glen Morangie pour m’avoir aidée à construire ce tutorial…. Niéhéhé !)