Partage
  • Partager sur Facebook
  • Partager sur Twitter

photoshop et xhtml

nico81
    24 mars 2006 à 11:19:01

    Bonjour,

    Pouvez vous me donner svp la marche à suivre pour réaliser une interface comme
    celle-ci par exemple (mon interface ne sera pas de ces couleurs :p:lol: )
    Image utilisateur
    Je sais qu'il faut que je crée premièrement mon interface. Mais après, de quelles manière découper mon image?... o_O

    comment faire aussi pour que quand j'aurait créé les liens sur les menus (en jaune) le contenu des pages s'affiche dans la partie rose et que je puisse faire défiler le texte uniquement dans cette partie? o_O

    Je ne sais pas si mon problème est clair.
    Si ce n'est pas le cas et que vous n'avez pas compris demandez moi.

    Merci beaucoup d'avance pour votre aide :)

    Nico ;)
    • Partager sur Facebook
    • Partager sur Twitter
    jp949
      24 mars 2006 à 11:46:26

      slt.
      1ere chose creer l'image, une chose a la fois apres suivant le resultat je t'expliquerai la methode pour la suite.
      Il faut voir si tu as un header , un footer les liens comment ils se presentent.
      Donc pour le moment realise ton image
      • Partager sur Facebook
      • Partager sur Twitter
      nico81
        24 mars 2006 à 11:53:15

        Salut,

        mon image est dejà réalisé et elle se présente sous la forme de mon image du dessus.
        Il y aura bien :


        un header (orange)
        un menu (gris + lien en jaunes)
        un contenu (rose)
        un footer (bleu)


        merci d'avance pour tes explications :);)

        Nico

        • Partager sur Facebook
        • Partager sur Twitter
        jp949
          24 mars 2006 à 12:27:52

          est-ce que c'est un design extensible en largeur?
          pour la question de faire afficher tes pages dans le cadre de droite rose: c'est au php include qu'il faut recourir. tu as les explications et les codes sur cette page
          http://www.jp949.info/include_php.php
          • Partager sur Facebook
          • Partager sur Twitter
          nico81
            24 mars 2006 à 12:40:49

            Non, il ne sera pas extensible en largeur :)

            Par contre de quelle manière dois-je découpe ma page? comme je l'ai fait avec les couleurs ça va?

            Comment faire pour que le contenu ne soit que dans la partie rose? et que on puisse faire défiler le texte que dans cette partie?

            merci :)
            • Partager sur Facebook
            • Partager sur Twitter
            jp949
              24 mars 2006 à 13:02:42

              pour decouper tu decoupes selon la largeur et la hauteur des images dont tu veux garder l'apparence ; en general le header , le menu et le footer parfois pour que le corps une image qui se repete peut-etre et pour faire defiler dans un cadre , tu fixes une hauteur, une largeur et overflow:auto;
              • Partager sur Facebook
              • Partager sur Twitter
              nico81
                29 mars 2006 à 11:14:52

                Bonjour,

                alors j'ai découpé mon header, mon footer, les éléments de mon menu (jaunes) sur lesquels j'ai créé les liens puis j'ai découpé la parti du contenu de mes pages (rose) mais comment dois je faire pour que par exemple si le clique sur le premier lien jaune le contenu s'affiche dans la partie rose?
                comment dois-je m'u prendre?
                pour mes découpes, j'ai utilisé image ready.
                Lorsque j'ai fais mes découpes je peux enregistrer mon image au format HTML.
                Cela va générer le code pour remettre en page toutes mes découpe afin de former une page web.
                Je me retrouve donc avec une page web et des liens mais je ne vois pas comment m'y prendre pour que le contenu de la page de mon premier lien s'affiche dans la partie rose.
                Pouvez vous m'aider s'il vous plait et me mettre sur la voie?

                merci d'avance. :)

                J'espère que j'ai été clair dans mes explications :honte:
                • Partager sur Facebook
                • Partager sur Twitter
                jp949
                  29 mars 2006 à 11:33:38

                  tu as affiché le code generé par photoshop en html ?
                  regarde l'immondice que c'est par curiosité.
                  un table en html 3.5
                  • Partager sur Facebook
                  • Partager sur Twitter
                  nico81
                    29 mars 2006 à 12:57:46

                    voici le code généré :

                    <html>
                    <head>
                    <title>design_puissancecastres_decoupe</title>
                    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
                    </head>
                    <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
                    <!-- ImageReady Slices (design_puissancecastres_decoupe.psd) -->
                    <table id="Tableau_01" width="761" height="571" border="0" cellpadding="0" cellspacing="0">
                            <tr>
                                    <td colspan="19">
                                            <img src="images/design_puissancecastres_dec.gif" width="760" height="109" alt=""></td>
                                    <td>
                                            <img src="images/spacer.gif" width="1" height="109" alt=""></td>
                            </tr>
                            <tr>
                                    <td colspan="17">
                                            <img src="images/design_puissancecastres_-03.gif" width="223" height="7" alt=""></td>
                                    <td rowspan="19">
                                            <img src="images/design_puissancecastres_-04.gif" width="467" height="436" alt=""></td>
                                    <td rowspan="20">
                                            <img src="images/design_puissancecastres_-05.gif" width="70" height="461" alt=""></td>
                                    <td>
                                            <img src="images/spacer.gif" width="1" height="7" alt=""></td>
                            </tr>
                            <tr>
                                    <td rowspan="19">
                                            <img src="images/design_puissancecastres_-06.gif" width="47" height="454" alt=""></td>
                                    <td colspan="8">
                                            <a href="actualites.php" target="_self">
                                                    <img src="images/actualites.gif" width="120" height="29" border="0" alt="actualites"></a></td>
                                    <td colspan="8" rowspan="2">
                                            <img src="images/design_puissancecastres_-08.gif" width="56" height="45" alt=""></td>
                                    <td>
                                            <img src="images/spacer.gif" width="1" height="29" alt=""></td>
                            </tr>
                            <tr>
                                    <td colspan="8">
                                            <img src="images/design_puissancecastres_-09.gif" width="120" height="16" alt=""></td>
                                    <td>
                                            <img src="images/spacer.gif" width="1" height="16" alt=""></td>
                            </tr>
                            <tr>
                                    <td rowspan="17">
                                            <img src="images/design_puissancecastres_-10.gif" width="20" height="409" alt=""></td>
                                    <td colspan="8">
                                            <a href="association.php" target="_self">
                                                    <img src="images/association.gif" width="123" height="29" border="0" alt="association"></a></td>
                                    <td colspan="7" rowspan="2">
                                            <img src="images/design_puissancecastres_-12.gif" width="33" height="46" alt=""></td>
                                    <td>
                                            <img src="images/spacer.gif" width="1" height="29" alt=""></td>
                            </tr>
                            <tr>
                                    <td colspan="8">
                                            <img src="images/design_puissancecastres_-13.gif" width="123" height="17" alt=""></td>
                                    <td>
                                            <img src="images/spacer.gif" width="1" height="17" alt=""></td>
                            </tr>
                            <tr>
                                    <td colspan="2" rowspan="12">
                                            <img src="images/design_puissancecastres_-14.gif" width="15" height="276" alt=""></td>
                                    <td colspan="8">
                                            <a href="animations.php" target="_self">
                                                    <img src="images/Animations.gif" width="123" height="29" border="0" alt="animations"></a></td>
                                    <td colspan="5" rowspan="2">
                                            <img src="images/design_puissancecastres_-16.gif" width="18" height="46" alt=""></td>
                                    <td>
                                            <img src="images/spacer.gif" width="1" height="29" alt=""></td>
                            </tr>
                            <tr>
                                    <td colspan="8">
                                            <img src="images/design_puissancecastres_-17.gif" width="123" height="17" alt=""></td>
                                    <td>
                                            <img src="images/spacer.gif" width="1" height="17" alt=""></td>
                            </tr>
                            <tr>
                                    <td colspan="2" rowspan="8">
                                            <img src="images/design_puissancecastres_-18.gif" width="8" height="184" alt=""></td>
                                    <td colspan="8">
                                            <a href="match.php" target="_self">
                                                    <img src="images/Le-match.gif" width="123" height="29" border="0" alt="match"></a></td>
                                    <td colspan="3" rowspan="2">
                                            <img src="images/design_puissancecastres_-20.gif" width="10" height="46" alt=""></td>
                                    <td>
                                            <img src="images/spacer.gif" width="1" height="29" alt=""></td>
                            </tr>
                            <tr>
                                    <td colspan="8">
                                            <img src="images/design_puissancecastres_-21.gif" width="123" height="17" alt=""></td>
                                    <td>
                                            <img src="images/spacer.gif" width="1" height="17" alt=""></td>
                            </tr>
                            <tr>
                                    <td colspan="2" rowspan="4">
                                            <img src="images/design_puissancecastres_-22.gif" width="5" height="92" alt=""></td>
                                    <td colspan="7">
                                            <a href="joueurs.php" target="_self">
                                                    <img src="images/joueurs.gif" width="121" height="29" border="0" alt="ils nous l&#39;ont dit"></a></td>
                                    <td colspan="2" rowspan="2">
                                            <img src="images/design_puissancecastres_-24.gif" width="7" height="46" alt=""></td>
                                    <td>
                                            <img src="images/spacer.gif" width="1" height="29" alt=""></td>
                            </tr>
                            <tr>
                                    <td colspan="7">
                                            <img src="images/design_puissancecastres_-25.gif" width="121" height="17" alt=""></td>
                                    <td>
                                            <img src="images/spacer.gif" width="1" height="17" alt=""></td>
                            </tr>
                            <tr>
                                    <td colspan="8">
                                            <a href="phototèque.php" target="_self">
                                                    <img src="images/photot&#232;que.gif" width="123" height="29" border="0" alt="photot&#232;que"></a></td>
                                    <td rowspan="9">
                                            <img src="images/design_puissancecastres_-27.gif" width="5" height="225" alt=""></td>
                                    <td>
                                            <img src="images/spacer.gif" width="1" height="29" alt=""></td>
                            </tr>
                            <tr>
                                    <td colspan="8">
                                            <img src="images/design_puissancecastres_-28.gif" width="123" height="17" alt=""></td>
                                    <td>
                                            <img src="images/spacer.gif" width="1" height="17" alt=""></td>
                            </tr>
                            <tr>
                                    <td rowspan="2">
                                            <img src="images/design_puissancecastres_-29.gif" width="4" height="46" alt=""></td>
                                    <td colspan="8">
                                            <a href="liens.php">
                                                    <img src="images/Liens.gif" width="122" height="29" border="0" alt="liens"></a></td>
                                    <td rowspan="7">
                                            <img src="images/design_puissancecastres_-31.gif" width="2" height="179" alt=""></td>
                                    <td>
                                            <img src="images/spacer.gif" width="1" height="29" alt=""></td>
                            </tr>
                            <tr>
                                    <td colspan="8">
                                            <img src="images/design_puissancecastres_-32.gif" width="122" height="17" alt=""></td>
                                    <td>
                                            <img src="images/spacer.gif" width="1" height="17" alt=""></td>
                            </tr>
                            <tr>
                                    <td rowspan="2">
                                            <img src="images/design_puissancecastres_-33.gif" width="4" height="46" alt=""></td>
                                    <td colspan="8">
                                            <a href="sponsors.php" target="_self">
                                                    <img src="images/sponsors.gif" width="122" height="29" border="0" alt="sponsors"></a></td>
                                    <td colspan="2" rowspan="5">
                                            <img src="images/design_puissancecastres_-35.gif" width="8" height="133" alt=""></td>
                                    <td>
                                            <img src="images/spacer.gif" width="1" height="29" alt=""></td>
                            </tr>
                            <tr>
                                    <td colspan="8">
                                            <img src="images/design_puissancecastres_-36.gif" width="122" height="17" alt=""></td>
                                    <td>
                                            <img src="images/spacer.gif" width="1" height="17" alt=""></td>
                            </tr>
                            <tr>
                                    <td rowspan="3">
                                            <img src="images/design_puissancecastres_-37.gif" width="9" height="87" alt=""></td>
                                    <td colspan="8">
                                            <a href="contact.php" target="_self">
                                                    <img src="images/Contactez-nous.gif" width="120" height="29" border="0" alt="contactez nous"></a></td>
                                    <td colspan="2" rowspan="3">
                                            <img src="images/design_puissancecastres_-39.gif" width="12" height="87" alt=""></td>
                                    <td>
                                            <img src="images/spacer.gif" width="1" height="29" alt=""></td>
                            </tr>
                            <tr>
                                    <td colspan="8" rowspan="2">
                                            <img src="images/design_puissancecastres_-40.gif" width="120" height="58" alt=""></td>
                                    <td>
                                            <img src="images/spacer.gif" width="1" height="33" alt=""></td>
                            </tr>
                            <tr>
                                    <td>
                                            <img src="images/design_puissancecastres_-41.gif" width="467" height="25" alt=""></td>
                                    <td>
                                            <img src="images/spacer.gif" width="1" height="25" alt=""></td>
                            </tr>
                            <tr>
                                    <td>
                                            <img src="images/spacer.gif" width="47" height="1" alt=""></td>
                                    <td>
                                            <img src="images/spacer.gif" width="20" height="1" alt=""></td>
                                    <td>
                                            <img src="images/spacer.gif" width="9" height="1" alt=""></td>
                                    <td>
                                            <img src="images/spacer.gif" width="6" height="1" alt=""></td>
                                    <td>
                                            <img src="images/spacer.gif" width="4" height="1" alt=""></td>
                                    <td>
                                            <img src="images/spacer.gif" width="4" height="1" alt=""></td>
                                    <td>
                                            <img src="images/spacer.gif" width="4" height="1" alt=""></td>
                                    <td>
                                            <img src="images/spacer.gif" width="1" height="1" alt=""></td>
                                    <td>
                                            <img src="images/spacer.gif" width="72" height="1" alt=""></td>
                                    <td>
                                            <img src="images/spacer.gif" width="23" height="1" alt=""></td>
                                    <td>
                                            <img src="images/spacer.gif" width="6" height="1" alt=""></td>
                                    <td>
                                            <img src="images/spacer.gif" width="9" height="1" alt=""></td>
                                    <td>
                                            <img src="images/spacer.gif" width="3" height="1" alt=""></td>
                                    <td>
                                            <img src="images/spacer.gif" width="5" height="1" alt=""></td>
                                    <td>
                                            <img src="images/spacer.gif" width="3" height="1" alt=""></td>
                                    <td>
                                            <img src="images/spacer.gif" width="2" height="1" alt=""></td>
                                    <td>
                                            <img src="images/spacer.gif" width="5" height="1" alt=""></td>
                                    <td>
                                            <img src="images/spacer.gif" width="467" height="1" alt=""></td>
                                    <td>
                                            <img src="images/spacer.gif" width="70" height="1" alt=""></td>
                                    <td></td>
                            </tr>
                    </table>
                    <!-- End ImageReady Slices -->
                    </body>
                    </html>


                    c'est quoi l'immondice? o_O:)

                    merci encore :)
                    • Partager sur Facebook
                    • Partager sur Twitter
                    jp949
                      29 mars 2006 à 13:08:53

                      Ajoute un doc type xhtml et passe le au validateur w3c tu vas comprendre.
                      et pour faire afficher tes pages dans le cadre de droite reste plus qu'a faire une iframe
                      • Partager sur Facebook
                      • Partager sur Twitter

                      photoshop et xhtml

                      × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                      × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                      • Editeur ●
                      • Markdown