IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

Taille de site adapté aux écrans [Fait]


Sujet :

HTML

  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Novembre 2007
    Messages
    27
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2007
    Messages : 27
    Par défaut 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

  2. #2
    Membre Expert Avatar de Erwan31
    Profil pro
    Inscrit en
    Février 2008
    Messages
    2 177
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2008
    Messages : 2 177
    Par défaut
    Bonjour,
    ton énoncé est bien trop confus et tu oublies la ponctuation qui s'impose.

  3. #3
    Membre averti
    Profil pro
    Inscrit en
    Novembre 2007
    Messages
    27
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2007
    Messages : 27
    Par défaut taille ecran
    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

  4. #4
    Membre Expert Avatar de HiRoN
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2007
    Messages
    2 035
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Août 2007
    Messages : 2 035
    Par défaut
    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...
    Pensez à utiliser les ressources disponibles en Dev. Web :
    (x)HTML : Cours (X)HTML / FAQ (X)HTML
    CSS : Cours CSS / FAQ CSS / Galerie CSS
    Javascript : Cours / FAQ / Sources
    Mon site : Développeur Web Freelance

  5. #5
    Membre averti
    Profil pro
    Inscrit en
    Novembre 2007
    Messages
    27
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2007
    Messages : 27
    Par défaut consultable
    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..................!!

  6. #6
    Membre Expert Avatar de Erwan31
    Profil pro
    Inscrit en
    Février 2008
    Messages
    2 177
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2008
    Messages : 2 177
    Par défaut
    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...

  7. #7
    Membre averti
    Profil pro
    Inscrit en
    Novembre 2007
    Messages
    27
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2007
    Messages : 27
    Par défaut debutant
    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 % ?

  8. #8
    Membre Expert Avatar de Erwan31
    Profil pro
    Inscrit en
    Février 2008
    Messages
    2 177
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2008
    Messages : 2 177
    Par défaut
    Citation Envoyé par didi71 Voir le message
    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 Voir le message
    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 Voir le message
    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.

  9. #9
    Membre averti
    Profil pro
    Inscrit en
    Novembre 2007
    Messages
    27
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2007
    Messages : 27
    Par défaut merci beaucoup pour ton aide
    ok je vais potasser cela et je pense que je vais si cela ne te dérange pas trop poser des questions
    merci

  10. #10
    Membre averti
    Profil pro
    Inscrit en
    Novembre 2007
    Messages
    27
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2007
    Messages : 27
    Par défaut OUAh !!
    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

  11. #11
    Membre Expert Avatar de HiRoN
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2007
    Messages
    2 035
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Août 2007
    Messages : 2 035
    Par défaut
    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).

    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
    Pensez à utiliser les ressources disponibles en Dev. Web :
    (x)HTML : Cours (X)HTML / FAQ (X)HTML
    CSS : Cours CSS / FAQ CSS / Galerie CSS
    Javascript : Cours / FAQ / Sources
    Mon site : Développeur Web Freelance

  12. #12
    Membre Expert Avatar de Erwan31
    Profil pro
    Inscrit en
    Février 2008
    Messages
    2 177
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2008
    Messages : 2 177
    Par défaut
    Citation Envoyé par didi71 Voir le message
    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 Voir le message
    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).

  13. #13
    Membre averti
    Profil pro
    Inscrit en
    Novembre 2007
    Messages
    27
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2007
    Messages : 27
    Par défaut includes
    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

  14. #14
    Membre confirmé
    Homme Profil pro
    Chef opération transport urbain
    Inscrit en
    Avril 2008
    Messages
    92
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : Canada

    Informations professionnelles :
    Activité : Chef opération transport urbain
    Secteur : Transports

    Informations forums :
    Inscription : Avril 2008
    Messages : 92
    Par défaut
    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 :



    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 HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    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

    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

Discussions similaires

  1. Taille du GUI adaptée à l'écran
    Par piploum dans le forum Scilab
    Réponses: 2
    Dernier message: 24/01/2012, 11h07
  2. Site web adapté aux différentes résolutions écran
    Par ludivine49 dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 19/11/2010, 02h44
  3. [XL-2003] Adapter taille d'un userform à la taille de la fenêtre (ou écran)
    Par ankoubzh dans le forum Macros et VBA Excel
    Réponses: 2
    Dernier message: 26/05/2009, 19h37
  4. [DOM] Adapter la taille du site a celle de la fenetre
    Par lysandre dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 19/12/2007, 16h57
  5. Taille du html adaptable à l'écran
    Par hellotk dans le forum Balisage (X)HTML et validation W3C
    Réponses: 5
    Dernier message: 07/10/2007, 16h30

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo