apprendre rapidement a utiliser adobe photoshop par la pratique. devenez web-designer ! tutorial photoshop, exercice, formation, webdesign, skins, textures, infographie, pixel.


 ACCUEIL   PORTFOLIO   LOGICIELS   TUTORIELS   DOSSIERS 

Traducteur Photoshop

Ce traducteur automatique vous permet d'obtenir une traduction en direct des outils, menus, commandes et fonctions photoshop en français depuis un tutorial en anglais.
url :
traduire
voir un exemple : original - traduit

Interfaces
Webdesigns
Typographie
Textures
Effets
Retouches
Pixel-art
Divers
HTML/DHTML/Javascript
un site de A a Z (4)
10 étapes
un site de A a Z (3)
13 étapes
Fade Hyperliens
javascript
Scrollbar couleur
pour IE 6.0 ou plus
Table HTML
7 étapes
Decoupe
8 étapes
Annonces Google

un site de A a Z (4)

4eme et dernier tutorial de la série qui vous propose de suivre la conception d'un webdesign de site de A et Z, c'est a dire de la réalisation graphique a l'intégration HTML. Ce 4eme tutorial traite de la suite de l'intégration HTML du webdesign : intégration des menus de navigation de gauche et du contenu.

Identification Abonné :

Votre Email :
Votre Mot de Passe :
Se souvenir de moi
login

Français :
Anglais :
Shortcut PC :
Shortcut Mac :
Menu :
francais
english



Afficher les commandes photoshop en français

Afficher les commandes photoshop en anglais

Afficher la version imprimable du tutorial


Etape 1

Après avoir réaliser l’intégration de la « fenêtre » générale de menu et de contenu dans le tutorial « un site de A à Z (3) », nous allons attaquer le découpage et l’intégration des menus de sous-navigation a gauche du contenu.
 
Ouvrir le document « webdesign.psd » et, dans la fenêtre de calques, rendre invisible les calques logo, menu haut, textes divers pour obtenir le document comme dans l’exemple ci-dessus puis Fusionner les calques visibles .
 
Dupliquer le document et mettre la duplication de côté pour le découpage de la partie contenu que nous ferons plus tard.
 
Avec l’outil Rectangle de sélection , sélectionner un rectangle autour du menu de navigation de gauche. N’oublier pas les ombres portées du menu dans votre sélection.

 
Recadrer le document.


Etape 2

Créer un nouveau calque puis passer l’opacité de celui-ci a 30% dans la fenêtre de calques.
 
Choisir une couleur jaune comme couleur de premier plan .
 
Avec l’outil Rectangle de sélection , sélectionner un rectangle sur la zone gauche du menu, au centre du menu (d’environ 100 pixels de large) et de la zone droite du menu. Remplir chaque sélection en jaune.


Etape 3

Créer un nouveau calque puis passer l’opacité de celui-ci a 30% dans la fenêtre de calques.
 
Choisir une couleur rouge comme couleur de premier plan .
 
Avec l’outil Rectangle de sélection , sélectionner un rectangle sur la zone haute du menu, au milieu du menu (d’environ 100 pixels de hauteur) et de la zone basse du menu. Remplir chaque sélection en couleur de premier plan .
 
Choisir une couleur bleue comme couleur de premier plan .

 
Avec l’outil Rectangle de sélection , sélectionner un rectangle autour d’une des flèches et Remplir de la couleur de premier plan .


Etape 4

Dans la fenêtre de calques, lier les 2 derniers calques créer et Fusionner les calques liés .
 
Choisir maintenant l’outil Baguette Magique , Tolérance : 0, lissé décoché, pixel contigus coché.
 
Dans le menu Image , Dupliquer le document 10 fois.
 
Sélectionner dans chaque duplication de document l’une des zones indiqués dans l’exemple ci-dessus en cliquant avec la baguette magique dans les rectangles de couleur correspondant a la zones a sélectionner.

 
Dans chaque duplication, Recadrer le document et, dans la fenêtre de calques, rendre invisible le calque contenant les rectangles de couleur. Enregistrer au format gif sous le nom inscrit dans l’exemple ci-dessus chaque duplication du document dans le répertoire « images » créer au début du tutorial.


Etape 5

Les découpes terminés, passons a l’intégration HTML proprement dite.
 
Ouvrir le fichier index.html avec le blocnote de Windows ou l’ouvrir avec votre éditeur html habituelle.
 
Nous allons réaliser l’intégration de cette fenetre de navigation sous forme de tableaux html, il y a 3 fonctions principales dans la créer d’une table html :
<table>
pour créer une table,
<tr>
pour ajouter une ligne a une table,
<td>
pour ajouter une colonne dans une ligne d’une table.
 
Cette fenêtre est structurée sous la forme de 3 lignes contenant chaque une 3 colonnes. Le code html pour structurer cette table sera donc :
<table>
ouverture de la table
    <tr>
créer une ligne
        <td>
créer une 1ere colonne dans la ligne
       </td>
fermer la colonne
        <td>
créer une 2eme colonne dans la ligne
        </td>
fermer la colonne
        <td>
créer une 3eme colonne dans la ligne
        </td>
fermer la colonne
    </tr>
fermer la ligne
    <tr>
créer une ligne
        <td>
créer une 1ere colonne dans la ligne
       </td>
fermer la colonne
        <td>
créer une 2eme colonne dans la ligne
        </td>
fermer la colonne
        <td>
créer une 3eme colonne dans la ligne
        </td>
fermer la colonne
    </tr>
fermer la ligne
    <tr>
créer une ligne
        <td>
créer une 1ere colonne dans la ligne
       </td>
fermer la colonne
        <td>
créer une 2eme colonne dans la ligne
        </td>
fermer la colonne
        <td>
créer une 3eme colonne dans la ligne
        </td>
fermer la colonne
    </tr>
fermer la ligne
</table>
fermer la table


Etape 6

Définissons ensuite les propriétés de chaque éléments de la table :

 
La table :
La largeur de la table doit prendre toute la largeur d’une colonne de contenu:
width="100%"
La table ne doit pas avoir de bordure :
border="0"
La table ne doit pas avoir marge externe :
cellspacing="0"
La table ne doit pas avoir marge interne :
cellpadding="0"

Ce qui nous donne la 1ere ligne html suivante :
<table width="100%" border="0" cellspacing="0" cellpadding="0" >

 

 
La 1ere ligne :
La ligne n’a aucune propriétés spéciales donc la 2eme ligne html reste :
<tr>

 
La 1ere colonne :
La 1ere colonne doit contenir l’image « menu_hg.gif » dans le répertoire « images ».

 
On ajoute donc entre les commandes d’ouverture et de fermeture de colonne la commande d’affichage d’image html :
<td>
<img src="images/menu_hg.gif" ><br>
</td>

 
La 2eme colonne :
Elle doit avoir l’image «menu_hm.gif » qui se répète en fond :
background="images/menu_hm.gif"
Elle doit prendre tout le reste de largeur de la table :
width="100%"
Le titre du menu doit etre aligné sur le bas de colonne
valign="bottom"
Elle doit contenir le titre du menu avec le bon style placer a 6 pixels du bas de la colonne

Ce qui nous donne le code html suivant :
<td  background="images/menu_hm.gif" width="100%" valign=bottom>
<font class="menutitre" >TITRE DU MENU</font><br>
<img src="images/vide.gif" width="1" height="6" ><br>
</td>

 
La 3eme colonne :
La 3eme colonne doit contenir l’image « menu_hd.gif » dans le répertoire « images »

 
On ajoute donc entre les commandes d’ouverture et de fermeture de colonne la commande d’affichage d’image html :
<td>
<img src="images/menu_hd.gif" ><br>
</td>

 

 
La 2eme ligne :
La ligne n’a aucune propriétés spéciales donc le code html reste :
<tr>

 
La 1ere colonne de la 2eme ligne :
Elle doit avoir l’image «menu_cg.gif » qui se répète en fond :
background="images/menu_cg.gif"

Ce qui nous donne le code html suivant :
<td  background="images/menu_cg.gif" ><br>
</td>

 
La 2eme colonne de la 2eme ligne :
Elle doit avoir l’image «menu_cm.gif » qui se répète en fond :
background="images/menu_cm.gif"
Elle doit contenir les liens de navigation

Ce qui nous donne le code html suivant :
<td  background="images/menu_cm.gif" >
<a href="#" class="menulien" ><img="images/menu_dot.gif" border=0 align="absmiddle" >Lien de navigation</a><br>
</td>

 
La 3eme colonne de la 2eme ligne :
Elle doit avoir l’image «menu_cd.gif » qui se répète en fond :
background="images/menu_cd.gif"

Ce qui nous donne le code html suivant :
<td  background="images/menu_cd.gif" ><br>
</td>

 

 
La 3eme ligne :
La ligne n’a aucune propriétés spéciales donc la 2eme ligne html reste :
<tr>

 
La 1ere colonne de la 3eme ligne :
La 1ere colonne doit contenir l’image « menu_bg.gif » dans le répertoire « images ».

 
On ajoute donc entre les commandes d’ouverture et de fermeture de colonne la commande d’affichage d’image html :
<td>
<img src="images/menu_bg.gif" ><br>
</td>

 
La 2eme colonne de la 3eme ligne :
Elle doit avoir l’image «menu_bm.gif » qui se répète en fond :
background="images/menu_bm.gif"

Ce qui nous donne le code html suivant :
<td  background="images/menu_bm.gif" >
</td>

 
La 3eme colonne de la 3eme ligne :
La 3eme colonne doit contenir l’image « menu_bd.gif » dans le répertoire « images »

 
On ajoute donc entre les commandes d’ouverture et de fermeture de colonne la commande d’affichage d’image html :
<td>
<img src="images/menu_bd.gif" ><br>
</td>

 

 
On obtient donc le code html suivant :

<table width="100%" border="0" cellspacing="0" cellpadding="0" >

    <tr>
        <td>
            <img src="images/menu_hg.gif" ><br>
        </td>
        <td  background="images/menu_hm.gif" width="100%" valign=bottom>
<font class="menutitre" >TITRE DU MENU</font><br>
<img src="images/vide.gif" width="1" height="6" ><br>
        </td>
        <td>
            <img src="images/menu_hd.gif" ><br>
        </td>
    </tr>

    <tr>
        <td background="images/menu_cg.gif" >
        </td>
        <td  background="images/menu_cm.gif" >
            <a href="#" class="menulien" ><img="images/menu_dot.gif" border=0 align="absmiddle" >Lien de navigation</a><br>
        </td>
        <td background="images/menu_cd.gif" >
        </td>
    </tr>

    <tr>
        <td>
            <img src="images/menu_bg.gif" ><br>
        </td>
        <td  background="images/menu_bm.gif" >
        </td>
        <td>
            <img src="images/menu_bd.gif" ><br>
        </td>
    </tr>

</table>


Etape 7

Afin d’intégrer le tableau de sous-navigation a la fenêtre générale contenu créer dans le tutorial « un site de A à Z (3) », nous allons diviser la largeur de cette fenêtre générale de contenu en 2 colonnes, la 1ere colonne prendra 1/3 de la largeur total soit environ 33%, la 2eme colonne prendra le reste de la largeur soit 2/3 ou environ 66%.
 
La ou les tableaux de sous-navigation seront placés sur le haut de la 1ére colonne. On ajoute donc le code suivant dans la colonne adéquate :
 

<td  background="images/contenuback.gif" width="100%" valign="top" > 

  <table width="100%" border="0" cellspacing="0" cellpadding="0" >
    <tr>
       <td width="33%" valign=top>

Placer autant de code de tableau de sous-navigation que vous désirez ici !


       </td>
       <td width="66%" valign=top>

Ici, le contenu de la page !


       </td>
    </tr>
  </table>
         
</td>


Etape 8

Le code HTML ici obtenu est :

<style type="text/css" >
    A.menulien:link        { FONT: 9px Verdana, Arial, Helvetica, sans-serif; COLOR:#FFFFFF ; TEXT-DECORATION: none;  font-weight: bold;}
    A.menulien:visited     { FONT: 9px Verdana, Arial, Helvetica, sans-serif;  COLOR:#FFFFFF ; TEXT-DECORATION: none;  font-weight: bold;}
    A.menulien:active      { FONT: 9px Verdana, Arial, Helvetica, sans-serif;  COLOR:#FFFFFF ; TEXT-DECORATION: none;  font-weight: bold;}
    A.menulien:hover       { FONT: 9px Verdana, Arial, Helvetica, sans-serif;  COLOR:#FFFFFF ; TEXT-DECORATION: none;  font-weight: bold;}

.menutitre { FONT: 9px Verdana, Arial, Helvetica, sans-serif; color:#000000; font-weight: bold;}
</style>
<body background="images/background.gif" >
<table align="center" width="760" border="0" cellspacing="0" cellpadding="0" >
  <tr>
    <td>
      <img src="images/menulogo.gif" ><br>
    </td>
    <td background="images/menuback.gif" width="100%" align="right" >
      <table border="0" cellspacing="0" cellpadding="0" >
        <tr>
          <td><a href="#" ><img src="images/btn_apropos.gif" border="0" ></a>
          </td>
          <td><a href="#" ><img src="images/btn_produits.gif" border="0" ></a>
          </td>
          <td><a href="#" ><img src="images/btn_services.gif" border="0" ></a>
          </td>
          <td><a href="#" ><img src="images/btn_contact.gif" border="0" ></a>
          </td>
        </tr>
      </table>
    </td>
    <td>
      <img src="images/menudroite.gif" ><br>
    </td>
  </tr>
</table>
<table align="center" width="760" border="0" cellspacing="0" cellpadding="0" >
  <tr>
    <td background="images/contenugauche.gif" valign="top" >
      <img src="images/contenugauche.gif" ><br>
    </td>
    <td background="images/contenuback.gif" width="100%" valign="top" >
      <table width="100%" border="0" cellspacing="0" cellpadding="0" >
        <tr>
          <td width="33%" valign=top>
            <table width="100%" border="0" cellspacing="0" cellpadding="0" >
              <tr>
                <td>
                  <img src="images/menu_hg.gif" ><br>
                </td>
                <td background="images/menu_hm.gif" width="100%" valign=bottom>
                  <font class="menutitre" >TITRE DU MENU</font><br>
                  <img src="images/vide.gif" width=1 height=6><br>
                </td>
                <td>
                  <img src="images/menu_hd.gif" ><br>
                </td>
              </tr>
              <tr>
                <td background="images/menu_cg.gif" >
                </td>
                <td background="images/menu_cm.gif" >
                  <a href="#" class="menulien" ><img src="images/menu_dot.gif" border=0 align="absmiddle" >Lien de navigation</a><br>
                  <a href="#" class="menulien" ><img src="images/menu_dot.gif" border=0 align="absmiddle" >Lien de navigation</a><br>
                  <a href="#" class="menulien" ><img src="images/menu_dot.gif" border=0 align="absmiddle" >Lien de navigation</a><br>
                  <a href="#" class="menulien" ><img src="images/menu_dot.gif" border=0 align="absmiddle" >Lien de navigation</a><br>
                </td>
                <td background="images/menu_cd.gif" >
                </td>
              </tr>
              <tr>
                <td>
                  <img src="images/menu_bg.gif" ><br>
                </td>
                <td background="images/menu_bm.gif" >
                </td>
                <td>
                  <img src="images/menu_bd.gif" ><br>
                </td>
              </tr>
            </table>
          </td>
          <td width="66%" valign=top>
           
          </td>
        </tr>
      </table>
    </td>
    <td background="images/contenudroite.gif" valign="top" >
      <img src="images/contenudroite.gif" ><br>
    </td>
  </tr>
  <tr>
    <td>
      <img src="images/basgauche.gif" ><br>
    </td>
    <td background="images/bascentre.gif" >
    </td>
    <td>
      <img src="images/basdroite.gif" ><br>
    </td>
  </tr>
</table>
</body>


Etape 9

Procéder de la même façon pour la fenêtre de contenu (3 lignes sur 3 colonnes) puis intégrer le code du tableau dans le code html pour obtenir :
 

            <table width="100%" border="0" cellspacing="0" cellpadding="0" >
              <tr>
                <td>
                  <img src="images/contenu_hg.gif" ><br>
                </td>
                <td background="images/contenu_hm.gif" width="100%" valign=bottom>
                   <font class="contenutitre" >TITRE DE LA FENETRE DE CONTENU</font><br>
                   <img src="images/vide.gif" width=1 height=6><br>
                </td>
                <td>
                  <img src="images/contenu_hd.gif" ><br>
                </td>
              </tr>
              <tr>
                <td background="images/contenu_cg.gif" >
                </td>
                <td background="images/contenu_cm.gif" >
                   <p align="justify" >
                   <font class="contenutexte" >
                   <img src="images/photo.gif" align=left>
                   le texte de contenu ici!
                   </font>
                   </p>
                </td>
                <td background="images/contenu_cd.gif" >
                </td>
              </tr>
              <tr>
                <td>
                  <img src="images/contenu_bg.gif" ><br>
                </td>
                <td background="images/contenu_bm.gif" >
                </td>
                <td>
                  <img src="images/contenu_bd.gif" ><br>
                </td>
              </tr>
            </table>  


Etape 10

Une fois le tableau de contenu intégré, on obtient le code HTML final :
 

<style type="text/css" > 
    A.menulien:link        { FONT: 9px Verdana, Arial, Helvetica, sans-serif; COLOR:#FFFFFF ; TEXT-DECORATION: none;  font-weight: bold;} 
    A.menulien:visited     { FONT: 9px Verdana, Arial, Helvetica, sans-serif;  COLOR:#FFFFFF ; TEXT-DECORATION: none;  font-weight: bold;} 
    A.menulien:active      { FONT: 9px Verdana, Arial, Helvetica, sans-serif;  COLOR:#FFFFFF ; TEXT-DECORATION: none;  font-weight: bold;} 
    A.menulien:hover       { FONT: 9px Verdana, Arial, Helvetica, sans-serif;  COLOR:#FFFFFF ; TEXT-DECORATION: none;  font-weight: bold;} 
  .menutitre { FONT: 9px Verdana, Arial, Helvetica, sans-serif; color:#000000; font-weight: bold;} 
  .contenutitre { FONT: 9px Verdana, Arial, Helvetica, sans-serif; color:#6C54DC; font-weight: bold;}
  .contenutexte { FONT: 9px Verdana, Arial, Helvetica, sans-serif; color:#C4C4C4; }
</style> 
<body background="images/background.gif" > 
<table align="center" width="760" border="0" cellspacing="0" cellpadding="0" > 
  <tr> 
    <td> 
      <img src="images/menulogo.gif" ><br> 
    </td> 
    <td background="images/menuback.gif" width="100%" align="right" > 
      <table border="0" cellspacing="0" cellpadding="0" > 
        <tr> 
          <td><a href="#" ><img src="images/btn_apropos.gif" border="0" ></a> 
          </td> 
          <td><a href="#" ><img src="images/btn_produits.gif" border="0" ></a> 
          </td> 
          <td><a href="#" ><img src="images/btn_services.gif" border="0" ></a> 
          </td> 
          <td><a href="#" ><img src="images/btn_contact.gif" border="0" ></a> 
          </td> 
        </tr> 
      </table> 
    </td> 
    <td> 
      <img src="images/menudroite.gif" ><br> 
    </td> 
  </tr> 
</table> 
<table align="center" width="760" border="0" cellspacing="0" cellpadding="0" > 
  <tr> 
    <td background="images/contenugauche.gif" valign="top" > 
      <img src="images/contenugauche.gif" ><br> 
    </td> 
    <td background="images/contenuback.gif" width="100%" valign="top" > 
      <table width="100%" border="0" cellspacing="0" cellpadding="0" > 
        <tr> 
          <td width="33%" valign=top> 
            <table width="100%" border="0" cellspacing="0" cellpadding="0" > 
              <tr> 
                <td> 
                  <img src="images/menu_hg.gif" ><br> 
                </td> 
                <td background="images/menu_hm.gif" width="100%" valign=bottom> 
                  <font class="menutitre" >TITRE DU MENU</font><br> 
                  <img src="images/vide.gif" width=1 height=6><br> 
                </td> 
                <td> 
                  <img src="images/menu_hd.gif" ><br> 
                </td> 
              </tr> 
              <tr> 
                <td background="images/menu_cg.gif" > 
                </td> 
                <td background="images/menu_cm.gif" > 
                  <a href="#" class="menulien" ><img src="images/menu_dot.gif" border=0 align="absmiddle" >Lien de navigation</a><br> 
                  <a href="#" class="menulien" ><img src="images/menu_dot.gif" border=0 align="absmiddle" >Lien de navigation</a><br> 
                  <a href="#" class="menulien" ><img src="images/menu_dot.gif" border=0 align="absmiddle" >Lien de navigation</a><br> 
                  <a href="#" class="menulien" ><img src="images/menu_dot.gif" border=0 align="absmiddle" >Lien de navigation</a><br> 
                </td> 
                <td background="images/menu_cd.gif" > 
                </td> 
              </tr> 
              <tr> 
                <td> 
                  <img src="images/menu_bg.gif" ><br> 
                </td> 
                <td background="images/menu_bm.gif" > 
                </td> 
                <td> 
                  <img src="images/menu_bd.gif" ><br> 
                </td> 
              </tr> 
            </table> 
          </td> 
          <td width="66%" valign=top> 
            <table width="100%" border="0" cellspacing="0" cellpadding="0" >
              <tr>
                <td>
                  <img src="images/contenu_hg.gif" ><br>
                </td>
                <td background="images/contenu_hm.gif" width="100%" valign=bottom>
                   <font class="contenutitre" >TITRE DE LA FENETRE DE CONTENU</font><br>
                   <img src="images/vide.gif" width=1 height=6><br>
                </td>
                <td>
                  <img src="images/contenu_hd.gif" ><br>
                </td>
              </tr>
              <tr>
                <td background="images/contenu_cg.gif" >
                </td>
                <td background="images/contenu_cm.gif" >
                   <p align="justify" >
                   <font class="contenutexte" >
                   <img src="images/photo.gif" align=left>
                   le texte de contenu ici!
                   </font>
                   </p>
                </td>
                <td background="images/contenu_cd.gif" >
                </td>
              </tr>
              <tr>
                <td>
                  <img src="images/contenu_bg.gif" ><br>
                </td>
                <td background="images/contenu_bm.gif" >
                </td>
                <td>
                  <img src="images/contenu_bd.gif" ><br>
                </td>
              </tr>
            </table>              
          </td> 
        </tr> 
      </table> 
    </td> 
    <td background="images/contenudroite.gif" valign="top" > 
      <img src="images/contenudroite.gif" ><br> 
    </td> 
  </tr> 
  <tr> 
    <td> 
      <img src="images/basgauche.gif" ><br> 
    </td> 
    <td background="images/bascentre.gif" > 
    </td> 
    <td> 
      <img src="images/basdroite.gif" ><br> 
    </td> 
  </tr> 
</table> 
</body> 

Ainsi s’achève ce tutorial géant en 4 étapes. A vous maintenant d’adapter celui-ci a votre convenance pour créer un super site internet. N’hésitez pas à nous faire part de vos réalisations de site basées sur ce tutorial en postant vos urls dans les commentaires.

Fichier(s) associé(s) au tutorial
integration html final (142 Ko) télécharger
integration html (tutorial ''un site de A a Z(3)'') (119 Ko) télécharger
webdesign (835 Ko) télécharger
Commentaires des visiteurs
Ajouter un commentaire
Copyright Jérome Boulinguez 1995/2007
Tous les éléments de ce site sont la propriété de leurs auteurs respectifs.
Toutes reproductions, distributions, commercialisations, copies sous quelques formes que ce soit est strictement interdit sous peine de poursuites.


point de croix .  broderie .  cross stitch .  broderie prenom .  broderie portrait .  pochoir .  pochoir personalisé .  stickers .  scrapbooking .  pochoirs à imprimer .  loisir créatif .  templates .  lifting .  cadeaux personnalisés .  pop art .  warhol .  warhol .  pop art .  affiches .  journal de naissance .  prénom .  étiquettes personnalisées .  parchemin personnalisé .  parchemin .  pagerank .  calendrier .  avatar .  faire-part .  collections .  mariage .  telephone portable .  tableau prénom .  fausse couverture people .  fausse couverture de magazine .  fausse couverture de journal .  calligraphie prenom .  t-shirt personnalisé .  géo-localisation .  fausse affiche .  affiche humour .  marque-pages .  plaque de rue .  roman photo .  cadre photo .  faux papiers .  dés photos .  pêle mêle .  pancarte de porte .  pour les nuls .  carte de membre .  scrapbooking .  acrostiche .  graffiti .  invitation a imprimer .  tapis de souris personnalise .  mug personnalisé .  mug photo .  grille point de croix gratuite .