Dans ce tuto vous allez apprendre à créer un menu complet à partir d'une seule image. Ce menu contiendra plusieurs états pour chacun de ses boutons. Le tout se fera à partir d'une seule image exportée de Photoshop et intégrée dans dreamweaver grâce à un peu de CSS (la technique s'appelle CSS Sprite).

Dans la première partie de ce tuto, nous créerons notre menu dans Photoshop en définissant les 3 états pour chaque bouton. Puis, dans une seconde partie de tutoriel, nous nous occuperons de l'intégration html/css à l'aide de l'éditeur de votre choix (Dreamweaver dans ce tuto).

Ce menu au design sobre et soigné s'adaptera à tout type de site et comporte de nombreux avantages (chargement plus rapide du menu, une seule image pour tout le menu, une intégration simple et efficace).Ce menu est compatible avec la totalité des navigateurs internet.

Jetez un oeil à ces autres tuto Photoshop, Dreamweaver, CSS

La méthode BrenizerLa méthode Brenizer
Dans ce tuto Photo, nous allons aborder la méthode Brenizer…

Speed Modelisation  -  Structures FuturistesSpeed Modelisation - Structures…
Dans ce tuto Cinema 4D, vous allez apprendre à réaliser très…

Créer une photo panoramique HDR ou sans HDRCréer une photo panoramique…
Dans ce tuto dédié à la création d'un panoramique HDR ou…

Apprendre l'outil point de fuiteApprendre l'outil point de…
Très peu utilisé, l'outil point de fuite et pourtant très…

Sherlock Holmes : création du génériqueSherlock Holmes : création…
Voici un tuto Photoshop / After Effects sur la création du…

Effet HDR pour affiche de filmEffet HDR pour affiche de…
Dans ce tuto HDR vous allez grâce à Lightroom, Photomatix,…

Comment prendre et retoucher un portrait en intérieurComment prendre et retoucher…
Dans ce tuto niveau débutant vous allez apprendre à : Régler…

Créez et intégrez un menu en HTML/CSS avec une seule imageCréez et intégrez un menu…
De la création du visuel sous Photoshop à l'intégration HTML/CSS,…

Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto Photoshop, Dreamweaver, CSS de 37 minutes est proposée dans une résolution plus grande que l’extrait suivant :

Partagez cet extrait

Lien vers cet extrait : Embed code :

Infoprog , Formateur



Toutes les formations de Infoprog


Témoignage des clients de Infoprog

Bonjour, tuto intéressant pour les débutants pour créer un portfolio !

Bonjour , ton tuto est génial et facile à suivre. Surtout pour le débutant que je suis. Encore merci;

Bon tuto, bon formateur, convient parfaitement au débutant!

Bonne voix, bonne qualité vidéo. Je conseille ses tutoriels.

Facile à suivre, et beaucoup de points importants sont abordés ce qui permet d'avoir des tutos intéressants.

 

D'autres tuto de Infoprog

Designer une page d'accueil de site internetDesigner une page d'accueil de site internet
Dans ce tuto Photoshop CS5 (compatible avec les autres versions de Photoshop), vous allez…

Découper et intégrer une page d'accueil de site internetDécouper et intégrer une page d'accueil de site internet
Ce tutoriel est la suite du tuto créer une page d'accueil de site Internet avec Photoshop.…

Créez un système d'upload et hébergement d'imagesCréez un système d'upload et hébergement d'images
Ce tuto PHP, réservé aux débutants comme aux utilisateurs moyens vous permettra de…

Créer un champs de recherche personnalisé en CSS3Créer un champs de recherche personnalisé en CSS3
Dans ce tuto CSS3 en vidéo, vous allez apprendre à créer des champs de recherche personnalisés…

voir tous les tuto de Infoprog

Notes attribuées par les utilisateurs (28 votes)

Note moyenne des utilisateurs  

Votez pour ce tuto


 

Les avis / Questions des utilisateurs (33)

par gmoisana voté :
(a acheté ce tuto - 10 juillet 2014)

" Tutoriel très détaillé et bien expliqué, le rythme est parfait "

par mizuholuxa voté :
(a acheté ce tuto - 21 novembre 2013)

" plutot bien expliqué. Devrais à mon sens commenter un peu plus la partie photoshop, la souri se déplace vite et on ne voit bien pas certaines actions . "

par davy971a voté :
(a acheté ce tuto - 24 août 2013)

" Simple à suivre, rapide à faire. Merci pour cette vidéo et les explications qui permettent de savoir ce que l'on fait et par la suite l'appliquer à d'autres menus.
"

par vigora voté :
(a acheté ce tuto - 13 octobre 2012)

" Merci pour ce Tuto . Novice sur le sujet j'ai galéré toute la journée; finalement, (je ne comprends toujours pas pourquoi !) j'ai mis mon style.css à la racine et miracle je vois mon menu ... vous le dites bien dans le TUTO, mais peut être faut t'il insister pour les gens comme moi qui rangent js et css dans des dossiers séparés ... "

par valentino33a voté :
(a acheté ce tuto - 26 mai 2012)

" super "

par fredwama voté :
(a acheté ce tuto - 17 mars 2012)

" Top ! Merci pour le tuto très clair. Il n'y a plus qu'à appliquer la méthode. "

par NEMESIS941a voté :
(a acheté ce tuto - 11 février 2012)

" je n'y connait strictement pas grand chose en codage, mais j ai tout de meme reussis a m en sortir je suis fier de moi, maintenant reste plus cas integrer sa sur mon site :D "

par fogga voté :
(a acheté ce tuto - 21 janvier 2012)

" Je me lance pour la première fois dans le monde de la conception web et je dois dire que ce petit aperçu est vraiment bon ! j'adore ta manière d'expliquer les chose et on voit que tu es ordonné dans ce que tu fais ! bravo a toi !!! "

par buibuia voté :
(a acheté ce tuto - 15 janvier 2012)

" 5/5 "

par erazat74a voté :
(a acheté ce tuto - 18 décembre 2011)

" Très bon tutoriel, facile à comprendre et facile à suivre.
"

par tfloqueta voté :
(a acheté ce tuto - 07 novembre 2011)

" Super tuto avec de vraies explications c'est très plaisant ! "

par Zetha voté :
(a acheté ce tuto - 31 octobre 2011)

" super pratique et simple d'application "

par Energiea voté :
(a acheté ce tuto - 20 septembre 2011)

" Bonjour,

Je ne regrette pas d'avoir acheté ce tuto. Simple et claire... J'aurai un jour à m'en inspirer, puisque je suis présentement en train de penser mon premier site web personnel.

Merci beaucoup pour cette belle formation.

Énergie "

par Infoprog
(auteur de ce tuto - 22 juillet 2011)

" Bonjour alex94, merci de ton commentaire. Pour ton problème, peux-tu être plus précis? Que se passe-t-il?

Cordialement. "

par alex94a voté :
(a acheté ce tuto - 22 juillet 2011)

" Super tuto, merci ! Tout marche, par contre je n'arrive pas à l'utiliser sur un site que je suis en train de créer. "

par Infoprog
(auteur de ce tuto - 23 juin 2011)

" Il faut comprendre que cette exception s'applique uniquement sur le background-position :) "

par iorbita
(a acheté ce tuto - 22 juin 2011)

" ...je reviens sur ces valeurs négatives, je prends un exemple concret que je viens de réaliser à l’instant: j’ai le contenu d’une balise <h2> que je veux déplacer en dehors de ma page, je tape text-indent: -9000px et mon texte sors de la page du côté gauche et non du côté droit, que faut-il donc comprendre? "

par Infoprog
(auteur de ce tuto - 22 juin 2011)

" Bonjour iorbita, oui on peut dire que c'est une exception pour le web qui peut semer la confusion mais on s'y habitue vite. Content que ce tutoriel t'ai plu :)

A bientôt. "

par iorbita
(a acheté ce tuto - 22 juin 2011)

" Bonjour et bravo pour le tuto,
...j'ai une question concernant l’explication des coordonnées négatives et positives de la position du background. J'ai toujours su que les valeurs positives pour l’"y" sont en haut pour le positif et en bas pour le négatif, et là on est d’accord, par contre tu dis que les valeurs pour le "x" sont respectivement à gauche pour le positif et à droite pour le négatif... dans les applications graphiques j’ai toujours appris que c’était le contraire, est-ce une exception pour le web? Merci. "

par snotet
(a acheté ce tuto - 20 mai 2011)

" Très bien... bon boulot!!! "

par Infoprog
(auteur de ce tuto - 01 mai 2011)

" Bonne nouvelle, j'ai trouvé le problème, il se trouvait dans le HTML :)

Pour créer le lien vers ta feuille de style, tu as écrit :

&lt;link rel="slylesheet" media="screen" type="text/css" title="style" href="style.css" /&gt;

Une faute d'orthographe qui a forcément annulé le lien avec ta feuille de style :) donc réécrit et tout va fonctionner:

&lt;link rel="stylesheet" media="screen" type="text/css" title="style" href="style.css" /&gt;

Ah et encore une dernière qui va t'afficher des petits tirets si tu ne le règle pas, enlèves les espace que tu as mis sur tes liens soit :

<a href="index.html"><div class="menu accueil-in"></div></a>
<a href="news.html"><div class="menu news"></div></a>
<a href="FAQ.html"><div class="menu FAQ"></div></a>
<a href="contact.html"><div class="menu contact"></div></a>

Voilà tout fonctionne impec' A bientôt ;) "

par Infoprog
(auteur de ce tuto - 01 mai 2011)

" Est-ce que tu peux m'envoyez tous le dossier qui contient ton html,css et ton image à cette adresse e-mail : infoprog.tuto@gmail.com

Ce sera plus simple pour que je trouve d'où provient le problème :)

PS: Met ton dossier au format RAR ou ZIP ;) "

par thieulgpa voté :
(a acheté ce tuto - 01 mai 2011)

" alors même avec les changements sa ne marche toujours pas :( . mais déjà merci pour la rapidité de tes réponses j'apprécie énormément :) "

par Infoprog
(auteur de ce tuto - 01 mai 2011)

" Erreurs dans le CSS :

- Dans ta class "menu", tu as écrit display :inline-bloc; tu as oublié le k à la fin de bloc soit : display :inline-block;

- Dans ta class "menu", tu as oublié le point virgule après margin-right:-4px

Redis moi si ça marche ;) "

par thieulgpa voté :
(a acheté ce tuto - 01 mai 2011)

" --partie css
.menu
{
width :170px;
height :62px;
display :inline-bloc;
background-image:url(menu.png);
background-repeat:no-repeat;
margin-right:-4px
}

.accueil {background-position:-2px top;}
.news {background-position:-172px top;}
.FAQ {background-position:-342px top;}
.contact {background-position:-512px top;}

.accueil:hover {background-position:-2px -62px;}
.news:hover {background-position:-172px -62px;}
.FAQ:hover {background-position:-342px -62px;}
.contact:hover {background-position:-512px -62px;}

.accueil-in {background-position:-2px -124px;}
.news-in {background-position:-172px -124px;}
.FAQ-in {background-position:-342px -124px;}
.contact-in {background-position:-512px -124px;}

--partie html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;link rel="slylesheet" media="screen" type="text/css" title="style" href="style.css" /&gt;
&lt;title&gt;Document sans nom&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;

<a href="index.html"><div class="menu accueil-in"></div> </a>
<a href="news.html"><div class="menu news"></div> </a>
<a href="FAQ.html"><div class="menu FAQ"></div> </a>
<a href="contact.html"><div class="menu contact"></div> </a>

&lt;/body&gt;
&lt;/html&gt;

"

par Infoprog
(auteur de ce tuto - 01 mai 2011)

" Bonjour thieulgp, copie-colle ton code pour que je vois d'où cela peut venir :) A bientôt ;) "

par thieulgpa voté :
(a acheté ce tuto - 01 mai 2011)

" j'ai bien suivit le tuto que j'ai trouvé très clair mais problème quand j'ouvre mon menu rien ne s'affiche. d'où le problème peut il venir?
merci ! "

par ArC3Nik
(a acheté ce tuto - 16 février 2011)

" Il y avait deux tutos sur ce sujet j'ai suivit les votes des autres utilisateurs et je regrette pas vraiment bien expliqué clair et net. 5/5 "

par Infoprog
(auteur de ce tuto - 05 février 2011)

" Bonjour dhenri13, oui tu peux mettre ton code dans une div :) N'hésites pas si tu as d'autres questions.

Cordialement. "

par dhenri13
(a acheté ce tuto - 04 février 2011)

" Bonjour, je voudrais savoir si l'on peut mettre ce code dans une div ou doit-on le laisser dans le body ? "

par Infoprog
(auteur de ce tuto - 27 janvier 2011)

" Bonjour shanti91160, pour votre problème je vous propose de comparer votre travail avec les fichiers sources histoire de voir si tout est identique. Si le problème persiste, remplacer votre code HTML actuel par celui-ci :

<a class="menu accueil-in" href="#"></a>
<a class="menu news" href="news.html"></a>
<a class="menu faq" href="faq.html"></a>
<a class="menu contact" href="contact.html"></a>
<a class="menu compte" href="compte.html"></a>

Cordialement. "

par shanti91160a voté :
(a acheté ce tuto - 26 janvier 2011)

" tout fonctionne mais ..... quand on clique pas de réaction ...flêche souris mais pas de main et il me semble pas de détection d'hyperlien vers la page ?????????
merci !!!!!!! "

par Edlera voté :
(a acheté ce tuto - 15 janvier 2011)

" Génial et le résultat est rapide et sûr. Un menu occupant 23 ko, il fallait le faire.
De plus les explications, très pédagogiques, permettent de bien comprendre et d'adapter selon les besoins. "

 

Donnez votre avis ou posez une question au formateur.

Vous souhaitez commenter ce tuto vidéo ? Créez un compte gratuit. Déjà membre ? Identifiez-vous

Ce tuto en résumé ...

Ce tuto Photoshop, Dreamweaver, CSS d’une durée de 37 minutes a été acheté 485 fois et a reçu une note moyenne de 5/5.

Ce tuto a été publié le 27 décembre 2010 par Infoprog, contributeur, ayant reçu une note moyenne de 4,6/5 pour l’ensemble de ses vidéos, dans la catégorie Tuto Photoshop webdesign.

Tous les fichiers sources sont fournis avec cette formation. Ces derniers vous permettront de reproduire les manipulations expliquées dans cette formation.

Ce tuto video vous expliquera étape par étape, toutes les manipulations présentées par le formateur.

Toutes nos vidéos sont visionnées par notre équipe, avant d’être mises en ligne, garantissant ainsi la qualité des produits téléchargés.

N'hésitez pas à nous contacter si vous avez la moindre question !