Création d'un site web avec des formes non rectignes.

Question

Bonjour, 

Je voudrais cr&#233;er un site web avec des r&#233;gions de forme autre que rectangulaires mais je ne sais par o&#249; commencer. Je voudrais savoir si tout est faisable en HTML (ce qui m'&#233;tonnerait beaucoup) ou s'il faut &#224; un moment donn&#233; utiliser photoshop, et dans ce dernier cas la mani&#232;re de l'utiliser (d&#233;coupage, etc...). Le mod&#232;le est bri&#232;vement d&#233;crit ci-dessous (ou la m&#234;me chose que la page suivante : 
http://www.webmastertoolscentral.com/ mais avec l'ent&#234;te et le menu &#224; gauche qui fusionne et les bords des tableaux arrondis. 

D'avance merci pour votre aide. 

LOGO | 
___________________________________ 
____( 
____| 
____| 
____|

cs_metis15 · Answer

Heu... A l'adresse que tu donnes, je ne vois pas trop de tableaux avec des formes arrondies, mais bon... Pour faire du beau site, on ne peut pas trop &#233;chapper &#224; un passage par un logiciel pour traiter de l'image, comme Photoshop, ou FireWorks ou The Gimp (gratuit).
On peut cependant tout traiter par les CSS, mais c'est quand m&#234;me un peu r&#233;serv&#233; aux connaisseurs, faut &#234;tre honn&#234;te !

<|[;o))
METIS

ScSami · Answer

Non, le HTML ne sert qu'a disposer les éléments et en aucun cas c'est faisable en CSS. Bref, t'es bel et bien obligé de passé par un soft 2D. Photoshop, justement, a un outils et un mode de travail réservé à cet usage : les tranches. Son petit frère, Image Ready est orienté conception web. Pour faire des pages web avec des bords arrondis, y'a pas 36 solutions!!! Soit tu utilises des gifs transparentes, soit tu "gruges". Les GIFs, de par leur limite à 256 couleurs sont à éviter !!! Reste les JPEG. Déjà, il vaut mieux avoir un fond unicolor afin d'éviter les problèmes. Ensuite, il faut créer, sous le soft 2D, un document (image) de la largeur de la page que tu veux (regarde les tailles standardes des sites web...) puis jouer avec les "repères" afin de bien tout aligner à l'avance. Pour les testes des menus et autres, conseil : évite de les gérer avec le soft car si les effets peuvent être vraiment bien (ombre porté p.ex.) la maintenance du site deviendra rapidement un enfer (surtout s'il est en plusieurs langues!!!). Une fois que tout est fini il suffit d'utiliser les tranches pour toutes les découper et les extraire (dans des fichiers séparés) d'un coup Ensuite, dans ton HTML, soit tu gères toutes les images avec un tableau, soit tu gères ça simplement en mettant les images cote à cote. D'ailleurs, pour se faire, un petit conseil... Il faut prendre l'habitude en HTML (et ça, on ne le dira jamais assez souvent!!!) de ne fermer les balises qu'a la ligne car un retour à la ligne dans le code HTML génère (si la norme est respecté!) un espace. Du coup, si tu fais un truc du style : Tu auras un truc comme ça (avec un espace entre les images) : #### **** ++++ #### **** ++++ #### **** ++++ ce qui est génant !!! Alors que si tu écris :

> Tu auras : ####****++++ ####****++++ ####****++++ Mais dans les deux cas (tableaux ou images juxtaposées) il faudra te penser la création comme un tableau, c'est à dire qu'il faudra que tout soit aligné (ou puisse être contenu dans des cellules...). Il faut penser la réalisation du design comme ça. Alors attention à ne pas pense le design comme ça parce que sinon ça se verrait trop!!! Par exemple, si tu veux faire un cercle avec une zone de texte au centre pense ainsi : Il faut découper le cercle (pour le transformer en tableau). Il y a plusieurs techniques. Prenons la technique la plus polyvalente possible, la plus simple et la plus optimisée qu'il soit. Le mieux dans ce cas c'est de faire comme ça : +-----------------------+ | _____________ | | / \ | +---/-+-----------+-\---+ | / | Text Ici | \ | | | | | | | | | | | | | | | | | | | | | | | | | | \ | | / | +---\-+-----------+-/---+ | \_____________/ | | | +-----------------------+ Donc, pour faire des interfaces plus complexe il faut penser son coup à l'avance!!! De plus, il ne faut pas oublier que tous les éléments du HTML (les zones... en ligne comme en bloc d'ailleurs!) sont rectangulaires. Autrement dit, c'est toujours au graphiste de gruger ce fait en accolant une multitude de zones de manière asymétriques afin de contrer cet effet soviétique! Et pour finir je te dirais qu'il y a moyen simple d'optimiser le graphisme de ton site pour le téléchargement... Lorsque tu as une zone unicolore, au lieu de créer une image de la taille de cette zone, crée une image de 1x1 pixel (GIF ou JPEG selon le gain c'est à toi de voir...) en mettant les proriétés "height" et "width" de la balise "

(Si une réponse vous convient, cliquez sur son bouton "Accepter ...")

Création d'un site web avec des formes non rectignes.

2 réponses

Votre réponse

Discussions similaires