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

Bonjour,

Je voudrais créer un site web avec des régions de forme autre que rectangulaires mais je ne sais par où commencer. Je voudrais savoir si tout est faisable en HTML (ce qui m'étonnerait beaucoup) ou s'il faut à un moment donné utiliser photoshop, et dans ce dernier cas la manière de l'utiliser (découpage, etc...). Le modèle est brièvement décrit ci-dessous (ou la même chose que la page suivante : http://www.webmastertoolscentral.com/ mais avec l'entête et le menu à gauche qui fusionne et les bords des tableaux arrondis.

D'avance merci pour votre aide.


LOGO |
___________________________________
____(
____|
____|
____|

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 échapper à 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ême un peu réservé aux connaisseurs, faut être honnête !

<|[;o))
METIS

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 :
<IMG src="Image01.jpg">
<IMG src="Image02.jpg">
<IMG src="Image03.jpg">

Tu auras un truc comme ça (avec un espace entre les images) :
#### **** ++++
#### **** ++++
#### **** ++++
ce qui est génant !!!

Alors que si tu écris :
 <IMG src="Image01.jpg"
><IMG src="Image02.jpg"
><IMG src="Image03.jpg"
>
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 "<IMG ...>" à la bonne taille. Si, comme le fon de ce site, tu as un style répété (type dégradé), il suffit, avec ces propriétés, de créer une bande de 1 pixel de hauteur. Le fait de jouer sur les propriétés "height" et "width" agrandira ou rétrécira l'image (la déformant du même coup... Attention à l'abscence d'anti-aliasing dans cette déformation!!!).

T'en dire plus je puis, mais le faire savoir et le vouloir tu dois !

Enjoy 

---