Discussion :

[sandraou2104]

Bonjour a tous,
J'ai un souci, je crée des sites avec la version dreamweaver 8 en mode création , de ce fait, je design mon site en fonction de la taille de mon écran. Seulement voila, une fois mon site mis en ligne, vu de mon écran il est bien, les images ne chevauchent pas le texte...mais vu d'autres écrans , tout est de travers, il y a des bandes qui sont beaucoup trop larges, du texte qui est décalé...chose que moi je ne vois pas sur mon ecran. Comment faire pour regler ce probleme?
je ne sait pas coder mais peut etre qu'il existe une ligne de code que je pourrais rajouter sur toutes les pages? ou alors peut etre que je pourrais creer des marges sur les cotés...je ne sais pas du tout comment faire..
Est ce que quelqu'un peut me conseillez...Je ne sais plus quoi faire..
Merci d'avance

[Botzouk]

Salut,

Tu viens de toucher du doigt une des principales limites de Dreamweaver.
A savoir qu'il ne faut pas se fier à ce que tu vois dans le panneau création mais régulièrement faire un aperçu de ta page dans plusieurs navigateurs. En fait on dit même qu'il faut faire sa page en fonction de Firefox et ensuite corriger les petits bugs habituels de Internet Explorer.

Pour que ton site s'affiche correctement pour plusieurs résolutions d'écran, il faut faire en sorte que tout ce qui est texte, et conteneur puissent s'étendre. On utilise donc pour leur donner une taille des valeurs telles que le % ou bien le em au lieu d'utiliser une valeur pixel.

Je sais que pour beaucoup cela paraît chaud à comprendre et c'est normal.
Mais les démarches pour résumer doivent être :

1/ Définir une résolution type en fonction de la cible des visiteurs. En général si on veut toucher un max de monde on pense soit au 800X600 soit au 1024X768. Mais si l'on veut toucher des artistes rois du photoshop qui travaillent en résolution bien supérieure, on peut faire plus étendu.

2/ Si l'on imagine que tu choisis 1024X768, tu définiras une largeur d'environ 960 px pour ton conteneur principal (le bloc qui contiendra tous les autres éléments de ta page)

3/ Ensuite, toutes les valeurs concernant les éléments fils de ton bloc principal prendront une valeur en pourcentage. Exemple : tu veux faire une mise en page avec deux colonnes : une colonne menu et une contenu.
Sur tes 960px de large, tu veux que ton menu prenne 192 px de large, cela corresponde à 20% de la largeur de ton bloc principal.
Dans ton style css tu donneras donc une valeur de 20% au paramètre Width (largeur) Et ainsi de suite

Ce n'est pas évident du tout mais une fois que tout fonctionne tu réalises à quel point ton site sera visible par tous !

Enfin, une visite sur http://www.csszengarden.com/ te donnera une aperçu des possibilités données par la mise en page par css.

Bon courage à toi !