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

Table HTML

Après une demande de cité, voici un tutorial sur la méthode pour créer des tableaux graphiques sur votre site html.

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

parter de votre dessin photoshop de tableau decoupé et applati.


Etape 2

péparer l'intégration html en procédant au découpage des images gif du tableau sur 3 lignes et 3 colonnes.


Etape 3

consulter le tutorial decoupe pour connaitre ma méthode de découpage.
une fois vos gif créer, nous allons passer a l'intégration HTML.


Etape 4

le tableau eyant etait découpé en 3 lignes et 3 colonnes, notre tableau html sera structuré de la même façon.
la création d'une ligne dans un tableau html ce fait avec l'instruction <tr> et </tr> pour finir la ligne.
pour les colonnes, c'est l'instruction <td> pour l'ouverture
et </td> pour la fermeture.


Etape 5

le structure html du tableau sera donc :
<tr> ouverture de la ligne
<td></td> 1er colonne
<td></td> 2eme colonne
<td></td> 3eme colonne
</tr> fermerture de la ligne
reproduite 3 fois pour les 3 lignes.


Etape 6

suivant si la hauteur de la ligne ou la largueur de la colonne du tableau est fixe ou variable,
on utilisera le tag html d'insertion d'image : <img src=...> ou celui d'affichage de fond de colonne <td background=..>


Etape 7

les angles de notre tableau etant fixe, on va inserer les tags img dans les 4 colonnes d'angles de notre tableau.
ce qui nous donne pour la ligne du haut :
<tr> ouverture de la ligne
<td><img src="tableau_haut_gauche.gif" width=12 height=24></td> 1er colonne fixe
<td></td> 2eme colonne a largueur variable
<td><img src="tableau_haut_droit.gif" width=12 height=24></td> 3eme colonne fixe
</tr> fermerture de la ligne


Etape 8

pour la colonne centrale qui a une largueur variable, nous utiliserons le tag html background pour que le navigateur duplique l'image sur toute la largeur de la colonne :
<td background="tableau_haut_milieu.gif"></td> 2eme colonne a largueur variable


Etape 9

procéder de cette façon sur la 2eme et 3eme ligne en sachant que les 3 colonnes de la 2eme ligne sont toutes les 3 de hauteur variable.
télécharger le tutorial pour obtenir le code complet de notre tableau html.

Fichier(s) associé(s) au tutorial
decoupage html (26 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 .