Blog tips: [Part 1] - Composition

Lorsqu'on utilise blogger, en standard, il n'est pas facilement possible de faire des compositions de photos. On ne peut que positionner une photo par ligne en choisissant parmi 3 tailles differentes et 4 types d'alignement.
Ci dessous vous trouverez la description de plusieurs types de composition permettant une mise en page un peu plus elaboree.
Le plus difficile etant en fait de trouver la bonne largeur d'image (attribut width="largeur"). J'ai joint une formule permettant de la calculer en fonction de vos parametres.

Je recommande egalement que vous enregistriez vos images sous 2 formats differents, le format final (si vous decidez qu'il est possible d'agrandir la photo en cliquant dessus) et le format vignette et que vous uplodiez le tout sur un serveur FTP (Free en propose un gratuitement par exemple. Vous pouvez utiliser Filezilla pour uploader les photos). Ou bien utilisez Flickr ou Picasa pour gerer vos images. Il vaut mieux eviter d'avoir une seule image: en effet redimensionner avec l'attribut width une image de grande dimension vous donnera un resultat assez affreux et en plus vous augmenterez le volume a charger sur la page principale pour rien!

Pour vous rafraichir la memoire sur le HTML ou XHTML et CSS, allez faire un tour sur le w3schools.

[horizontal][horizontal][horizontal] ou [vertical][vertical][vertical] > <table width="100%" align="center"> ___<tbody> ______<tr> _________<td width="33%">125</td> _________<td width="34%">125</td> _________<td width="33%">125</td> ______</tr> ___</tbody> </table> > Variable: L la largeur de l'image S la largeur de la surface d'affichage M la marge de l'image P la marge interieure du tableau Formule: 3xL + 3x2xM + 4xP = S Dans mon cas M=5, P=5, S=425 --> L=125

[horizontal][vertical] ou [vertical][horizontal] > <table width="100%" align="center"> ___<tbody> ______<tr> _________<td>250</td> _________<td>141</td> ______</tr> ___</tbody> </table> > Variable: L1 la largeur de l'image horizontale H1 la hauteur de l'image horizontale L2 la largeur de l'image verticale H2 la hauteur de l'image verticale S la largeur de la surface d'affichage M la marge de l'image P la marge interieure du tableau R le rapport d'image Formule: L1 + L2 + 2x2xM + 3xP = S H1 = H2 H2 = R x L2 L1 = R x H1 On resoud et on obtient L2 = {S - (2x2xM + 3xP)} x (R² + 1) L1 = R² x L2 Dans mon cas M=5, P=5, S=425, R=4/3 --> L1=250 --> L2=141

[horizontal][horizontal] [--horizontal--] ou [vertical][vertical] [--vertical--] ou [vertical][vertical] [--horizontal--] ou [horizontal][horizontal] [--vertical--] > <table width="100%" align="center"> ___<tbody> ______<tr> _________<td width="50%">195</td> _________<td width="50%">195</td> ______</tr> ______<tr> _________<td colspan="2" width="100%">405</td> ______</tr> ___</tbody> </table> > Variable: l la largeur de la petite image L la largeur de la grande image S la largeur de la surface d'affichage M la marge de l'image P la marge interieure du tableau Formule: 2xl + 2x2xM + 3xP = S L + 2xM + 2xP = S Dans mon cas M=5, P=5, S=425 --> l=195 --> L=405

Si vous etes sages, apres ces bouts de code, on passera a un modele XML permettant de tout automatiser!

[...a suivre]