Taille de site adapté aux écrans

bonjour
je pense que ce sujet a déjà été traité mais comme je ne suis pas en ADSL et oui ça existe encore au fin fond de la S&L comment fait t'on pour adapter un site au taille des différent écran de ceux qui le consulte et pour que la position des images reste a droite ou à gauche et pour dimensionner le tout sans se retrouver avec l'image au milieu au lieu de gauche j'ai surtout le pb avec les ecrans 22 pouces les tests avec les ecran jusqu'a 19 pouces fonctionne assez bien
merçi par avance de votre réponse 8O

Bonjour,
ton énoncé est bien trop confus et tu oublies la ponctuation qui s'impose.

mille pardon,
je demande donc, comment adapte t'on une page html à la taille des différents écran.
soit une page 600x480 si l'on consulte cette page avec un écran 22 pouces l'organisation de la page est différent.
ma question est la suivante:
comment peut t'on faire pour que l'organisation prévue et qui est correct sur un écran 17 pouces soit conservée sur un écran 22 pouces ??
merci:)

En incorporant du CSS pour la mise en forme.
En évitant de mettre des valeurs fixes sur certains élément au profit de valeur en %.
Mais tout dépend de ton site...

c'est consultable à l'adresse suivante
http://dfneulas.free.fr et en cliquant sur le bouton test leman avionics
c'est une page sous cadre
3 cadres et je souhaiterais que la banderole se régle à la longeur
que le logo de droite soit complétement à droite c'est en fait surtout le cadre du haut qui me fais ch..................!!

Aie aie aie ya du boulot ;)
Tout d'abord je te déconseille fortement d'utiliser les frame qui nuisent à la qualité de ton site à divers niveaux...
Ensuite soit ce site est en chantier et alors on attend de voir le résultat final soit les pages sont a peu prés terminées et il te faudra penser à améliorer l'ergonomie et le design parce qu'en l'état tu as des problèmes basiques à résoudre comme par exemple l'absence de la navigation dans les pages intérieures ou l'incohérence de la mise en page d'une page à l'autre.

Pour répondre à ta question, le choix à faire est pas tant celui de l'adaptation d contenu que celui de savoir avant tout quelle est la cible et des choix qui devront en découler.

Si la cible est large et que tu ne souhaites pas exclure une certaine catégorie de personnes, il faudra prévoir d'afficher la totalité du contenu sur une largeur de 770px max (écrans en 800 X 600).
Si la cible est uniquement professionnelle, tu pourra alors miser sur une largeur de 1000px maxi.
A ton niveau je te conseil de commencer par un design de largeur fixe, voire un design semi fluide (largeur maximal et largeur en % pour les petits écrans su tu t'en sens capable.)
Les design fluides (en %) sont plus complexes à gérer...

je suis debutant dans le domaine
je vise un public surtout pro c'est un site vitrine et il est bien sur en chantier ceci n'est pas l'adresse définitive tu me déconseille les cadres j'avoue avoir fait ce choix car l'ancien site était sur ce procédé mais il faudrait que je fasse des pages une à une ??? en fait il faut choisir les dimensions en % ?

Citation:

---

Envoyé par didi71

je suis debutant dans le domaine

---

Ok pas de problèmes, on a tous commencé un jour ;)
Faut le dire s'il y a des notions que tu comprends pas.

Citation:

---

Envoyé par didi71

je vise un public surtout pro c'est un site vitrine et il est bien sur en chantier ceci n'est pas l'adresse définitive

---

Alors je pense que tu peux exclure d'emblée les écrans en 800X600 et passer directement sur du 1024X768 (standard des écrans 17") en te limitant à
990px de large maximum (un peu moins de préférence) étant donné que sur les 1024 de large on y soustrait au moins la largeur de la barre de défilement.

Et puis si tu débutes vas faire un tour sur ce tutoriel.

Citation:

---

Envoyé par didi71

tu me déconseille les cadres j'avoue avoir fait ce choix car l'ancien site était sur ce procédé mais il faudrait que je fasse des pages une à une ??? en fait il faut choisir les dimensions en % ?

---

Commence par une taille fixe (width: 970px par exemple pour la largeur du bloc conteneur).
Si tu as beaucoup de fichiers, penses aux remplacements massif automatisés, certains editeurs HTML comme Dreamweaver donnent cette possibilité.
Si tu es motivé il faudra changer l'extension de tes page en PHP, installer un serveur local tel que EasyPHP qui te permettra d'interpréter le code PHP.
Ceci afin de pouvoir utiliser les Includes PHP : voire http://php.developpez.com/faq/?page=...s_pseudo_frame et http://php.developpez.com/faq/?page=...riptdansscript.

ok je vais potasser cela et je pense que je vais si cela ne te dérange pas trop poser des questions
merci

j'avoue que le php cela fait beaucoup à apréhender en fait modestement je souhaite mettre en place ce site assez rapidement et je pensais que le html suffirait j'ai un éditeur de site Namo web editor 6 qui est assez facile à utiliser.
Le php est t'il un passage obligé ??
si oui je m'y colle mais n'y a t'il pas un truc plus débutant ?
merci :oops:

Citation:

---

Le php est t'il un passage obligé ??

---

Si ton site comporte des parties dynamiques, ou si tu auras besoins de stocker des informations en bases de données, alors oui. Il peut aussi te permettre de mieu maintenir ton site (en le construisant à l'aide d'include par exemple).

Citation:

---

si oui je m'y colle mais n'y a t'il pas un truc plus débutant ?

---

En langage côté serveur, je dirai que non. Php est connu pour être "facile" d'utilisation par rapport à d'autres langages (et il est open source).

Suis bien les tutoriaux donnés par Erwan31 ;)

Citation:

---

Envoyé par didi71

j'avoue que le php cela fait beaucoup à apréhender en fait modestement je souhaite mettre en place ce site assez rapidement et je pensais que le html suffirait

---

Ce à quoi je fais référence (les includes php) ne requière aucun compétence
en PHP, juste de comprendre la logique de fonctionnement des includes et de savoir les intégrer, tu verra c'est pas bien compliqué ;)

Citation:

---

Envoyé par didi71

Le php est t'il un passage obligé ??

---

Non pas du tout mais comme le précise Hiron cela permettrait de faciliter la mise à jour des contenus persistant (menu, bandeau identitaire et plus généralement tous les contenus qui sont commun à toutes les pages de ton site).

donc en clair il faut que je bosse les includes
y t'il un tutoriel moins riche que celui de erwar31 pour aborder le sujet
en tout cas merci de vous occuper d'un debutant en html et php par contre si vous voulez des tuyau sur filemaker pro c'est mon truc
merci

Je ne suis pas un expert, mais voici un exemple plutôt simple et rapide à concevoir.

Premièrement, tu dois savoir ce que tu veux comme modèle. La meilleure façon de monter un fichier html avec du css pour séparer tes parties c'est de le faire sur papier, comme ceci :

http://www.tigercx.com/storage/upload/htmlconcept.gif

La partie bleu-ciel en arrière complètement est le "conteneur" de ma page, j'ai mis mon code dans le tag <body>. Alors body se trouve à être mon conteneur principal.

VERT -> Mon entête appelé "top_section".

ROUGE -> Un autre conteneur appelé "center_section" qui est séparé en 2 :

JAUNE -> Un conteneur appelé "left_section" qui contient la navigation.

BLANC -> Un conteneur appelé "right_section" qui contient le texte.

BLEU FONCÉ -> Un conteneur appelé "bottom" qui contient le copyright.

Maintenant que je sais ce que je veux, tu peux programmer ma page xhtml :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   <html> <head> <title>CX Solution Web</title> </head>   <body> <!-- BLEU CIEL -->   <div id="top_section"></div> <!-- VERT -->   <div id="center_section"> <!-- ROUGE -->   <div id="left_section"> <!-- JAUNE -->   <?php   include "include/connexion.inc";   include "include/nav_buttons.inc";   ?>   </div> <!-- Fin left_section -->   <div id="right_section"> <!-- BLANC -->   <?php include "include/accueil.inc"; ?>   </div> <!-- Fin right_section -->   </div> <!-- Fin center_section -->   <div id="bottom">Copyright CX Solution Web</div> <!-- BLEU FONCÉ -->   </body>   </html>

---

Ce que tu peux remarquer dans mon code c'est ceci :

J'ouvre et referme immédiatement "top_section" puisque j'ai seulement mis une image en arrière plan.

J'ouvre "central_section" et à l'intérieur j'y met :

"left_section", mais au lieu d'y insérer tout le code que je veux dans ma section gauche, je l'ai mis dans 2 fichiers à part appelé : connexion.inc et nav_buttons.inc.

C'est le seul code PHP que tu as besoins pour insérer un fichier... simple non? Ça se fait en 4 étapes simple :

1. J'ouvre le tag <?PHP
2. J'y met le code include "nom_du_fichier"
3. Je mets un ";" à la fin de l'appel de la fonction
4. Je ferme le tag ?>

On continue ensuite avec la fermeture de "left_section".

On ouvre "right_section" et encore là on y insère en PHP une inclusion qui insère le fichier accueil.inc

On ferme "right_section"

On ferme "central_section"

On ouvre "bottom", on y met le texte que l'on veut et on le referme.

À quoi ça sert tout ça? Et bien le principe est fort simple, tu copies/colles ce code pour toutes tes pages et ce qui change c'est seulement le fichier appelé dans la partie où tu veux ton texte, dans mon cas c'est le accueil.inc qui change pour chacune de mes pages.

L'avantage d'une telle structure c'est que si tu décides d'ajouter 2-3 liens dans ta barre de navigation de gauche, tu ne le fais que dans un seul fichier et le changement va s'appliquer dans toutes les pages, plus besoin de modifier 10 pages!

Je n'ai pas inclu mon fichier CSS dans cet exemple car ça serait un peu trop lourd et je n'ai pas la prétention d'être un expert CSS, pour ça tu devras suivre un petit cours sur le web :wink:

En espérant que ma modeste contribution puisse t'aider à t'améliorer et à comprendre le fonctionne XHTML

L'exemple ci-haut est disponible en vrai ici : http://www.cxsolutionweb.com