Chargement en cours...
Connexion au forum informatique de Sur-la-Toile
La discussion « [Créa site Web] Demande d'assistance » se trouve dans le forum « Programmation »
Statut de la discussion » [Créa site Web] Demande d'assistance « ( normale)

[Créa site Web] Demande d'assistance

» Liste des Forums » Programmation » Discussion

Le 30-01-2007 à 19:12 #

Salut,

je souhaite créer un petit site qui serait en fait un CV interactif.

Voici ce vers quoi j'aspire, les couleurs et dimenssions restants à revoir, mais en concervant cet esprit :




Étant novice (voir pire que ça) en prog., l'aide demandée se porte vers les types de langage à utiliser en fonction des éléments, avec des conseils.
J'ai déjà fait quelques tentatives auparavant de création de site mais la quantité de choses à apprendre pour faire de simples pages m'a découragé. J'aimerais cette fois aller au bout si possible sans tout avoir à apprendre des différents langages. Si cela vous semble être abuser, dites le moi de suite que j'ajourne mon projet. Y'a que c'est pour m'aider pour du boulot et qui si possible j'aimerais que ça ne me prenne pas des mois.


Je commence ...

    L'image en exemple serait la page d'accueil. Je souhaite que le contenu des pages (texte, images, ...) soit présenter sur ce genre de fond (plateau blanc).


  • [1] Faut-il placer l'image du plateau en arrière-plan de la page, le risque étant je crois que mes éléments se trouvent ensuite déplacés dans les différents navigateurs.


  • [2] J'ai lu dans divers endroits qu'il fallait éviter de faire ses mises en page via des tableaux pour les mêmes raisons, hors je me rend compte que la majorité des sites sont basés sur des tableaux
    Quel est donc le meilleur moyen pour une mise en page fiable dans la plupart des navigateurs ?

    Je cherche en fait un moyen pour pouvoir imbriquer plusieurs images ou textes les unes par dessus le autres, en m'assurant que mes éléments ne se décalerons pas, un peu comme le système de calques en infographie.


  • [3] Comme vous avez pu le voir, mes boutons de navigation sont des images avec effets de survol (rollover).
    Je me suis à ce titre inspiré du code d'une page existante avec ce type de langage :

    <a href="index.html" onMouseOver= .....


    mais il existe apparemment d'autres manières de s'y prendre comme en appliquant un style du genre :

    <head>
    <style>
    a.B { background-image: url('image_1.gif'); display: block; width: 100px }
    a.B:hover { background-image: url('image_2.gif') }
    </style>
    </head>

    <body>
    <center>
    <a class="B" href="#back-inline-3"><img border="0" src="images/vide.gif" width="100" height="30"></a>
    </center>
    </body>

    Sur quel langage dois-je alors me concentrer ?



Je vous en demande beaucoup je sais, mais rien ne vous oblige à répondre à toutes mes questions. Je les ai numérotées pour que ce soit plus simple pour vos réponses.

Merci
Freud



[ Ce message a été modifié par : : freud le 30-01-2007 19:17 ]

Le 30-01-2007 à 20:09 #

Pour superposer des éléments j'ai trouvé la fonction z-index en CSS 2.
A en juger par cette page, cette propriété n'est pas totalement compatible avec les différents navigateurs :




Existe-il une autre alternative risquant moins des problèmes d'incompatibilité ?
Et que signifie exactement ce "partiel" ?


Merci


[ Ce message a été modifié par : : freud le 30-01-2007 20:10 ]

Le 31-01-2007 à 03:52 #

salut,

1) Il me semble que l'arrière-plan est différent selon le navigateur, ça ne me semble pas être le meilleur moyen d'incérer une image qui doit correspondre précisément avec des éléments venants par-dessus.

2) Il me semble que le tableau est un moyen accéptable. Il faut peut-être mettre des variables pour les côtés du tableau, en rapport avec la taille de la fenêtre. Par exemple 100% de la fenêtre de large et la variable de la hauteur est égal à 2X celle de la largeur, puis mettre le reste en pourcentage. Il me semble que ça devrait jouer. Ou mettre les bords du tableau en pixels et le reste en pourcentage. Et pour les images les unes par-dessus les autres, je dirais le fond du tableau puis un élément dessus. Ou un autre moyen avec du CSS pour placer des images où l'on veut, mais je ne me souviens plus comment ça fonctionne, dsl.

3) je te conseil d'utiliser le javascript, le CSS qui permet de changer au survol ne foncitonne pas sous tous les navigateurs.


Pour tes autres questions, je ne sais pas, dsl

Le 31-01-2007 à 07:38 #

Salut Freud,

A priori, tu n'as pas besoin de te préoccuper du z-index, comme je vois ça il y aurai un seul calque affiché et le fait de cliquer sur une des options changerait simplement le calque en question, inutile d'ordonner des calques invisibles.

Cadre ombré

Idéalement, le contour ombré de ton cadre devra être collé autour d'une zone à taille variable (donc pas d'image de fond, mais un bricolage CSS comme celui des blocs de SLT) afin que ça soit beau dans toutes les résolutions.

Voici une technique permettant d'obtenir cet effet (bien entendu, tu peux modifier l'image utilisée suivant tes besoins) :

Code: 
  1.   <style type="text/css">

  2.   .dropshadow2{

  3.   	float:left;

  4.   	clear:left;

  5.   	background: url(img/shadowAlpha.png) no-repeat bottom right !important;

  6.   	background: url(img/shadow.gif) no-repeat bottom right;

  7.   	margin: 10px 0 10px 10px !important;

  8.   	margin: 10px 0 10px 5px;

  9.   	width: 500px;

  10.   	padding: 0px;

  11.   }

  12.   .innerbox{

  13.   	position:relative;

  14.   	bottom:6px;

  15.   	right: 6px;

  16.   	border: 1px solid #999999;

  17.   	padding:4px;

  18.   	margin: 0px 0px 0px 0px;

  19.   }

  20.   .innerbox{

  21.   	/* IE5 hack */

  22.   	\margin: 0px 0px -3px 0px;

  23.   	ma\rgin:  0px 0px 0px 0px;

  24.   }

  25.   }

  26.   </style>


    Positionnement

    Les tableaux étaient un bon moyen de positionner tes éléments au débuts du web. A présent, on recommande d'utiliser les CSS. Cela te permet d'aligner n'importe quoi n'importe comment. SLT utilise des tableaux pour des raisons historiques (et parce que le webmestre est paresseux). Pour un nouveau site, mieux vaut utiliser des <div> (ou autres éléments) et les positionner.

    Affichage des différentes sections

    Il y a une propriété très utile des CSS, "display", qui détermine si un élément doit être affiché ou pas. Cette propriété peut être changée via javascript:

    Code: 
    1.   <script>

    2.   function montrer(page){

    3.    // cacher toutes les pages qui seraient éventuellement affichées

    4.     document.getElementById('accueil').style.display = 'none';

    5.     document.getElementById('formation').style.display = 'none';

    6.     document.getElementById('experience').style.display = 'none';

    7.     document.getElementById('competences').style.display = 'none';

    8.    // montrer uniquement la page sélectionnée

    9.     document.getElementById(page).style.display = '';

    10.   }

    11.   </script>


      A partir de là, il te suffit d'avoir une série de pages à afficher et une série de boutons qui déclanchent le javascript. Etant donné que tu es obligé d'utiliser javascript pour cette partie, tu n'auras plus de raison d'avoir de scrupules à l'utiliser pour le rollover.

      Code: 
      1.   <div id='contenu'>

      2.     <div id='accueil'>Ceci est la page d'accueil</div>

      3.     <div id='formation'>Voici ma formation...</div>

      4.     <div id='experience'>Expériences: Modo sur la toile depuis telle date</div>

      5.     <div id='competences'>Compétences: Je sais faire des pages web!</div>

      6.   </div>

      7.   

      8.   <div id='boutons'>

      9.     <input type='button' onClick='javascript:montrer("accueil");' value='accueil'>

      10.     <input type='button' onClick='javascript:montrer("formation");' value='formation'>

      11.     <input type='button' onClick='javascript:montrer("experience");' value='experience'>

      12.     <input type='button' onClick='javascript:montrer("competences");' value='competences'>

      13.   </div>

      14.   

      15.   <script>

      16.     //cacher les pages autres que l'accueil

      17.     montrer('accueil');

      18.   </script>


        La suite...

        Ensuite, il te reste à positionner tout ça, remplacer les boutons par des images <IMG SRC='url' onClick=... onMouseOver=... >, et remplir le tout. On pourra t'assister étape par étape si tu le souhaites.

        N'hésites pas à poser des questions si ce n'est pas clair, j'ai mis mon exemple en attachement.

        Ben


        [ Ce message a été modifié par : : ben le 31-01-2007 08:37 ]

        Attachement: test-freud.zip

        Le 31-01-2007 à 11:02 #

        Salut les gars et merci beaucoup pour votre aide !


        Je vais travailler là-dessus cet après-midi et vous tiendrais au courant de mon avancement.

        Cadre ombré : J'ai en fait préparé mes images déjà ombrées. Pour le cadre en arrière plan je pense que je vais utiliser ta méthode, mais l'ombre de mes boutons change au passage de la souris.

        Ma plus grande crainte en matière de positionnement est pour les boutons justement, car ils doivent rester parfaitement positionnés les uns par rapport aux autres. Je vais essayer tout ça et enverrais ma page d'accueil.


        Merci encore

        ++
        Freud

        Le  1-02-2007 à 02:56 #

        Youpi ! je progresse ...


        Ça été dur de s'y mettre mais ça commence à venir !

        Vous trouverez en attachement mes premiers travaux, à savoir un semblant de page d'accueil avec les fichiers qui vont bien.


        Ben :

        Pour les ombres je suis resté sur les images d'origine. Je maitrise mieux Photoshop que les codes Par contre j'ai vu ton hack pour IE 5. Pourrais-tu jeter un oeil afin de déterminer si j'ai ou non des risques d'incompatibilités ?


        Ton script avec les "display" sert en fait à n'avoir qu'une seule page pour mes différentes rubriques, et donc à gagner du temps en chargement ?
        Pour être honnête je n'ai pas encore travaillé dessus. Il y a encore 4 heures de ça je ne pigais rien et ne savais même pas par ou commencer, ne serait-ce que pour créer un 1er bloc et me repérer dans l'espace. J'ai avancé au fil de mes lectures en m'inspirant du code d'un site en particulier : laurencelebour.com


        J'ai tout de même joué avec javascript pour jouer sur l'opacité des boutons correspondant à la page en cours (accueil donc dans cette page).

        Je me suis servi du "display" pour les "rollover" des boutons. J'ai tenté plusieurs trucs auparavant que j'avais lu mais rien n'y faisait. Les boutons ne changaient pas au passage de la souris. Enfin bon, ça marche ...


        J'attends donc vos regards d'experts pour détecter les éventuelles sources d'anomalies futures et autres conseils. Je reverrais l'aspect global avec les tons/couleurs.

        AH Ah ah ! je suis super content ! Ma 1ère page web avec en plus de jolis boutons ... ah ahh ... bon au lit !


        ++






        ah ah ahhhh ....



        [ Ce message a été modifié par : : freud le 01-02-2007 03:02 ]

        Attachement: archive.rar

        Le  1-02-2007 à 03:54 #

        Salut Freud,

        01-02-2007 à 02:56, freud :

        Pour les ombres je suis resté sur les images d'origine. Je maitrise mieux Photoshop que les codes Par contre j'ai vu ton hack pour IE 5. Pourrais-tu jeter un oeil afin de déterminer si j'ai ou non des risques d'incompatibilités ?

        L'inconvénient de ta méthode c'est que les visiteurs qui ont une résolution différente de la tienne vont voir autre chose. P.ex si tu te mets en 800x600 ça va déborder sur les cotés de la pages et il faudra scroller. Les écrans 800x600 deviennent moins courants (+/- 10%), mais il y a aussi les nouveaux écrans atypiques, comme les tablet-pc en 768x1280, ou la web-tv en 640x480, etc...

        Bien sûr on ne peut pas tout prévoir, mais il faudrait au minimum que la page soit correcte en 1024x768, 1280x1024 et 800x600, les 3 modes les plus courants chez les internautes. Il y a plusieurs méthodes pour y arriver. Tu peux réduire la largeur de ton image pour que ça passe partout, faire un javascript pour changer d'image en fonction de la résolution, ou utiliser la méthode que je propose.

        Il faudra aussi penser à une version facile à imprimer, pour un CV je pense que c'est indispensable.

        Ton script avec les "display" sert en fait à n'avoir qu'une seule page pour mes différentes rubriques, et donc à gagner du temps en chargement

        Oui, l'affichage sera rapide et c'est relativement simple à mettre en place.

        Tiens nous au courant!

        Ben

        Le  1-02-2007 à 15:20 #

        Salut Ben,

        Je vois ce que tu veux dire. Je vais donc m'essayer aux ombres par les codes.
        Je vais aussi revenir sur mes jolis boutons

        Pour les boutons, si je reste sur des images je retrouverais les mêmes problèmes
        J'aimerais pouvoir les personnaliser de la manière suivante :


        Mais je ne sais pas trop comment m'y prendre pour le déroulement, à savoir utiliser les "display" ou jouer sur les positions relatives ou absolues, voir combiner les 2, et je ne sais quoi d'autre encore ...

        Pour y voir plus clair moi-même j'ai commencer à structurer sur papier, mais je ne sais pas ce qu'il est possible de faire (tout je sais, pourvu que l'on sache le faire ) et comment m'y prendre.

        Voici mon petit crobar. Ça te donnera mes appellations de blocs, etc ... pour les explications :


        Bon, je commence par travailler sur ce que tu m'as donné.

        @+
        Freud



        Re moi !

        Si je veux garder la même hauteur pour mon bloc conteneur, quel que soit son contenu, comment faire ?


        exemple avec 300px en height :
        Code: 
        1.   <style type="text/css">

        2.   .dropshadow2{

        3.   	float:left;

        4.   	clear:left;

        5.   	background: url('img/shadow.gif') no-repeat bottom right !important;

        6.   	width: 500px;

        7.   	height: 300px;

        8.   	padding: 0px; margin-left:5px; margin-right:0; margin-top:10px; margin-bottom:10px

        9.   }

        10.   .innerbox{

        11.   	position:relative;

        12.   	bottom:6px;

        13.   	right: 6px;

        14.   	border: 1px solid #999999;

        15.   	padding:4px;

        16.   	margin: 0px 0px 0px 0px;


          pour ne plus avoir ça :


          [ Ce message a été modifié par : : freud le 01-02-2007 16:30 ]

          Le  6-02-2007 à 08:15 #


          Salut Freud,

          Puis, ça avance?

          A ta place je ne modifierais pas les codes d'innerbox et dropshadow2, le plus simple c'est de faire un autre div à l'intérieur de ces deux là, et de le formater selon tes besoins (taille, position). Le cadrage devrait s'adapter automatiquement.

          Pour les boutons, finalement ce que tu veux faire ce sont des menus déroulants, non? (comme dans windows) C'est plus compliqué que les boutons. Je cherche une solution actuellement pour en mettre sur SLT, je teste plusieurs techniques pour voir ce qui donne les meilleurs résultats, je te tiendrai au courant.

          Ben

          Le  7-02-2007 à 00:34 #

          Salut ben,

          J'avais lâché un peu le clavier pour me mettre dans la doc et au moins acquérir quelques bases avant de me jeter dans l'inconnu.

          Je ne suis pas sûr d'être plus avancé mais bon ... c'est en faisant qu'on apprend n'est-ce pas ?


          J'ai joué avec les positionnement à partir de ton modèle et sur les dimensions des boutons. Ça a l'air de coller.
          J'ai par contre des soucis, je crois (pour ne pas dire "je suis sûr")à cause des javascripts "document.getElementById('accueil')...". Le fait de se servir de cette fonction semble m'empêcher d'afficher des blocs avec "onmouseover" pour les sous-menus.

          J'ai tenté de m'inspirer de ça : menu vertical puisé ici.

          Rien à faire. Oui je sais je suis têtu tu m'avais dis d'attendre ....


          Crois-tu que je devrais repasser sur plusieurs pages pour pouvoir utiliser le "onmouseover". Ça évitera peut-être que mon code se transforme en usine à gaz avec des trucs pour lesquels je ne pige rien.


          Par exemple :

          Code: 
          1.   <script>

          2.     function montrer(page){

          3.      // cacher toutes les pages qui seraient éventuellement affichées

          4.       document.getElementById('accueil').style.display = 'none';

          5.   

          6.                            etc etc ...

          7.   

          8.      // montrer uniquement la page sélectionnée

          9.       document.getElementById(page).style.display = '';

          10.         }

          11.     </script>


            Avec ça, quand je clic sur "accueil" (onClick='javascript:montrer("accueil")), je cache toute cette liste :


            ...ById('accueil')...
            ...ById('formation')...
            ...ById('experience')...
            ...ById('competences')...



            sauf la page en cours :


            document.getElementById(page).style.display = '';




            à quoi sert alors le petit script à la fin puisqu'on les as déjà cachées :



            <script>
            //cacher les pages autres que l'accueil
            montrer('accueil');
            </script>



            surtout pourquoi avoir uniquement besoin de celui-ci avec seulement "accueil" dedans ?

            Je ne sais pas si tu vois ou je veux en venir, et je sais que tu as d'autres chats (blattes pardon) à fouetter mais j'aimerais comprendre mon code sinon je ne saurais pas le faire évoluer.

            désolé et merci encore. Je ne suis pas aux pièces non plus.


            ++

            Attachement: CV freud.rar
            » Liste des Forums » Programmation

            Sujets Connexes

            Arakien & WéWé


            Forums

            Navigation


            Publicité

            Connectés

            Il y a actuellement 105 visiteurs et 1 toilien en ligne, ainsi que 3 connectés sur le tchat.

            Recherche

            Annonces


            Sauf mention contraire, le contenu du blog et du forum est sous licence Creative Commons By-Sa. Vous avez le droit de le reproduire à condition de citer l'auteur, de faire un lien vers la page d'origine, et de partager vos travaux dérivés selon les mêmes conditions.

            Conditions d'utilisation -

            Partenaires: [Informatique Multimédia] [Portail du Maroc] [Actualité High Tech]
            [Tutoriaux Photoshop] [éligibilité ADSL] [Astuces Windows]

            Page générée en 212 millisecondes sur WWW2.