[HTML / CSS ] Conseil sur mise en page d'une page d'accueil

Conseil sur mise en page d'une page d'accueil [HTML / CSS ] - HTML/CSS - Programmation

Marsh Posté le 29-03-2004 à 14:26:18    

Bonjour,
 
Pourriez vous jeter un oeil à cette page : http://asptt.basket.sn.free.fr/
 
Cette page est faite graçe à un tableau, avec un rollover sur les petites bombes.  
 
J'aimerai savoir si l'utilisation de CSS pour cette page pourrai l'optimiser et si oui comment faire techniquement ??
 
Sinon est ce que vous savez si on peut utiliser le format PNG pour n'importe quel navigateur WEB et si oui quel outil de compression d'image utiliser pour ce support (On m'a dit que GIMP faisait bien la chose)
 
Merci de votre aide . :)

Reply

Marsh Posté le 29-03-2004 à 14:26:18   

Reply

Marsh Posté le 29-03-2004 à 14:31:51    

protoinou a écrit :

Bonjour,
 
Pourriez vous jeter un oeil à cette page : http://asptt.basket.sn.free.fr/
 
Cette page est faite graçe à un tableau, avec un rollover sur les petites bombes.  
argh, j'ai vu :sweat
 
J'aimerai savoir si l'utilisation de CSS pour cette page pourrai l'optimiser et si oui comment faire techniquement ??
un simple liste pour laquelle tu changes la puce avec le hover? ou bien un lien avec background de puce qui change au hover (pour la compatibilité avec cette crasse de IE)
 
Sinon est ce que vous savez si on peut utiliser le format PNG pour n'importe quel navigateur WEB et si oui quel outil de compression d'image utiliser pour ce support (On m'a dit que GIMP faisait bien la chose)
tant que tu n'utilise pas l'alpha transparence (la transparence simple, ca va) ca passe dans tous les browser (NS4 excepté). L'outil, peu importe, mais certains comme fireworks ou photoshop sauvent des infos inutiles dedans si tu ne demande pas d'exportation web.
 
Merci de votre aide . :)

Reply

Marsh Posté le 29-03-2004 à 14:39:07    

Tu penses que faire ça en CSS, optimiserait beaucoup la page ?
 
En fait si j'ai bien compris je mets le balon et logo ASPTT, en iage de fond, les liens en liste et les bombe en puce (puce qui change sur le hover?)
 


Message édité par protoinou le 29-03-2004 à 14:40:28
Reply

Marsh Posté le 29-03-2004 à 14:42:24    

protoinou a écrit :

Tu penses que faire ça en CSS, optimiserait beaucoup la page ?

Je pense qui si tu fait ça bien tu pourra réduire le code HTLM des 2/3 !

Reply

Marsh Posté le 29-03-2004 à 14:43:07    

Et au niveau gain d'affichage ??

Reply

Marsh Posté le 29-03-2004 à 14:43:39    

oui, c'est ça. Vu la taille du code, tu économiseras beaucoup de ce côté là. Par contre, le poids principal de la page résidant dans les images, tu ne gagneras pas beaucoup au total, à moins d'essayer un autre format peut-être moins lourd.

Reply

Marsh Posté le 29-03-2004 à 14:46:34    

protoinou a écrit :

Et au niveau gain d'affichage ??

Tu veux parler de la vitesse d'affichage ?
Vu toutes les images, ça sera négligeable.

Reply

Marsh Posté le 29-03-2004 à 14:47:12    

gizmo a écrit :

oui, c'est ça. Vu la taille du code, tu économiseras beaucoup de ce côté là. Par contre, le poids principal de la page résidant dans les images, tu ne gagneras pas beaucoup au total, à moins d'essayer un autre format peut-être moins lourd.


 
Quoi comme format ? et comment je fais pour conserver ma police & style graphique pour la liste des liens (je garde des images par dessus un background ?)

Reply

Marsh Posté le 29-03-2004 à 14:55:17    

AMHA tu vas avoir du mal avec IE. Parceque la bonne technique serait de faire ça avec des PNG transparents, mais tu dois savoir d'IE ne le gère pas...
Tu vas tout devoir aligner parfaitement et ça va être chiant. :(


Message édité par kalex le 29-03-2004 à 14:56:13
Reply

Marsh Posté le 29-03-2004 à 15:01:34    

bon alors je laisse ça comme ça
je vais attendre 10 ans pour qu'IE fasse les choses biens ...
 
C'est pas gagné  
 
::

Reply

Marsh Posté le 29-03-2004 à 15:01:34   

Reply

Marsh Posté le 29-03-2004 à 15:04:09    

kalex a écrit :

AMHA tu vas avoir du mal avec IE. Parceque la bonne technique serait de faire ça avec des PNG transparents, mais tu dois savoir d'IE ne le gère pas...
Tu vas tout devoir aligner parfaitement et ça va être chiant. :(


 
faudrait arrêter un peu de parler sans savoir.
 
La transparence simple (la même que celle concernant les gifs) marche parfaitement sous IE. Il y a juste un problème de couleur, c'est tout.  :o

Reply

Marsh Posté le 29-03-2004 à 15:14:28    

Si on s'arrête aux couleurs, où allons-nous ? ;)
Et de toute façon la transparence binaire pour ce site, je ne le sens pas trop...


Message édité par kalex le 29-03-2004 à 15:14:57
Reply

Marsh Posté le 29-03-2004 à 15:16:29    

Comment ça tu ne l'as sens pas trop

Reply

Marsh Posté le 29-03-2004 à 15:18:06    

Tu auras de l'aliasing tout autour de tes images, voilà.

Reply

Marsh Posté le 29-03-2004 à 15:52:21    

kalex a écrit :

Tu auras de l'aliasing tout autour de tes images, voilà.


 
Bon on va faire plus clair :
 
IL N'Y A AUCUNE DIFFERENCE entre utiliser des GIFS TRANSPARENTS et des PNGS TRANSPARENTS.

Reply

Marsh Posté le 29-03-2004 à 15:53:44    

...avec IE. :o

Reply

Marsh Posté le 29-03-2004 à 15:57:02    

kalex a écrit :

...avec IE. :o


 
Avec aucun navigateur. Le seul problème avec IE, c'est une légère différence au niveau des couleurs qui peut parfaitement être corrigé d'ailleurs...

Reply

Marsh Posté le 29-03-2004 à 16:07:21    

Si pour toi gérer la transparence en binaire c'est pas un problème !

Reply

Marsh Posté le 29-03-2004 à 16:27:28    

BOn calmez vous là, je ne pige rien..
 
Moi je veux savoir si c'est mieux d'utiliser du PNG dans mon cas sachant que les bords de mon images son blancs et que mon background est blanc !!
 
Voilà

Reply

Marsh Posté le 29-03-2004 à 16:34:19    

A la question posée la réponse est "peut-être", pas d'un point de vue technique, mais d'un point de vue gain de place.

Reply

Marsh Posté le 29-03-2004 à 16:45:22    

protoinou a écrit :

BOn calmez vous là, je ne pige rien..
 
Moi je veux savoir si c'est mieux d'utiliser du PNG dans mon cas sachant que les bords de mon images son blancs et que mon background est blanc !!
 
Voilà  

L'idée serait d'utiliser la transparence PNG un peu comme les calques de Photoshop ou Gimp. Tu aurais une image de fond, transparente ou non (ici le gros ballon trouble). Et les autres images viendraient par dessus. Par exemple, celles contenant le texte auraient un fond transparent, laissant apparaître le gros ballon trouble.
Il serait très difficile avec cette technique d'obtenir un beau résultat avec une transparence binaire.


Message édité par kalex le 29-03-2004 à 16:45:51
Reply

Marsh Posté le 29-03-2004 à 17:01:15    

kalex a écrit :

L'idée serait d'utiliser la transparence PNG un peu comme les calques de Photoshop ou Gimp. Tu aurais une image de fond, transparente ou non (ici le gros ballon trouble). Et les autres images viendraient par dessus. Par exemple, celles contenant le texte auraient un fond transparent, laissant apparaître le gros ballon trouble.
Il serait très difficile avec cette technique d'obtenir un beau résultat avec une transparence binaire.


D'accord merci pour la réponse.
 
Cependant par logique, si je mets des images les unes par dessus les autres sans réels raison, (sans fusion), ça me parait demander une plus grande place non ?

Reply

Marsh Posté le 29-03-2004 à 17:03:51    

protoinou a écrit :


D'accord merci pour la réponse.
 
Cependant par logique, si je mets des images les unes par dessus les autres sans réels raison, (sans fusion), ça me parait demander une plus grande place non ?
 


non, pas spécialement, cela dépend du type d'image. Certains se compressent nettement mieux que d'autres suivant le format utilisé.

Reply

Marsh Posté le 29-03-2004 à 17:19:37    

protoinou a écrit :


D'accord merci pour la réponse.
 
Cependant par logique, si je mets des images les unes par dessus les autres sans réels raison, (sans fusion), ça me parait demander une plus grande place non ?
 

Comme le dit gizmo, ça te permet d'utiliser le format le mieux adapté pour chacune des images. Par exemple un fond en JPEG et les "icones" en PNG peuvent être moins lourd que l'ensemble en JPEG. Tous simplement parce que tes "icônes" sont adaptées au PNG, mais leur fond sont adaptés au JPEG, d'où l'intérêt de différencier tout ça.
 
Sans compter que ce système est infiniment plus souple et adaptable. ;)

Reply

Marsh Posté le 29-03-2004 à 17:23:45    

Ouai ok , mais bon là ça va me demander trop de boulot, pour un résultat peut être incertain sous IE ne sachant pas quel sont les bonnes options de compression à utiliser sous Photoshop, mais je vais voir si j'ai le courage je vais chopper GIMP .. :)
 
En fait j'ai vu sur openweb, une démonstration de PNG et ça tue :)

Reply

Marsh Posté le 29-03-2004 à 17:35:42    

A signaler qu'il existe une solution pour avoir la pleine transparence PNG avec IE. Que se soit bien ou mal de l'utiliser, ça existe.

Reply

Marsh Posté le 29-03-2004 à 20:14:22    

Pour une comparaison entre le png et le gif je vous conseille ceci :
http://openweb.eu.org/articles/png_vs_gif/
 
Et pour "patcher" IE afin d'activer la transparence graduelle des png il y a aussi ceci :
http://homepage.ntlworld.com/bobosola/pngtestfixed.htm

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed