Ce tutoriel est la suite du tuto créer une page d'accueil de site Internet avec Photoshop. Au travers de cette deuxième et dernière partie, vous allez apprendre à découper votre design web avec Photoshop et enfin nous l'intégrerons avec HTML/CSS.

Une question ou un problème? Contactez-moi dans l'espace "Avis des utilisateurs".

Jetez un oeil à ces autres tuto Dreamweaver CS5, CSS

Découper et intégrer une maquette de site webDécouper et intégrer une…
Cette formation est consacrée au découpage et à l'intégration…

Créer une playlist administrable pour le player audio HTML5Créer une playlist administrable…
Dans cette formation vidéo, vous allez apprendre à créer…

Créer et personnaliser un player audio HTML5 de A à ZCréer et personnaliser un…
Dans cette formation vidéo, vous allez apprendre à créer…

Créer un blog full responsive en HTML5Créer un blog full responsive…
Dans ce tuto Dreamweaver nous allons aborder l'intégration…

Découper et intégrer une maquette de site internet web 2.0Découper et intégrer une…
Dans cette seconde et dernière partie du tutoriel "Créer une…

Créer un site internet responsive webdesign en HTML5Créer un site internet responsive…
Dans ce tuto Dreamweaver et HTML5, de plus de 3h nous allons…

Dreamweaver CS5, Formation complèteDreamweaver CS5, Formation…
Formation Dreamweaver CS5 de 18h20, pour apprendre à créer…

Créer un portfolio full responsive en HTML5 et CSS3Créer un portfolio full responsive…
Voici une formation pour apprendre à créer un portfolio full…

Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto Dreamweaver CS5, CSS de 1 heure 58 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…

Un menu complet à partir d'une seule imageUn menu complet à partir d'une seule image
Dans ce tuto vous allez apprendre à créer un menu complet à partir d'une seule image.…

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 (36 votes)

Note moyenne des utilisateurs  

Votez pour ce tuto


 

Les avis / Questions des utilisateurs (30)

par loujo64a voté :
(a acheté ce tuto - 23 mars 2013)

" Excellent.. Une petite question éventuelle, le jquery en boucle cé jouable?
En tout cas, un immense merci et probablement à très bientôt. "

par Rpatinioa voté :
(a acheté ce tuto - 14 janvier 2013)

" simple et clair que demander de plus à un tuto...!!! "

par Rik0ua voté :
(a acheté ce tuto - 05 novembre 2012)

" très bon tuto bien explicite, juste un petit détail sur l'explication du montage vidéos c'est pas mentionner la taille dans laquelle on doit encodé. Si non en gros très bon Tuto. "

par highlife81a voté :
(a acheté ce tuto - 15 juillet 2012)

" 5/5 Tres bon Tutoriel, j'ai trouvé très agreable de le suivre, "

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

" top "

par theotixa voté :
(a acheté ce tuto - 19 avril 2012)

" Bon tuto qui m'a bien aidé, après, il l'a fallut que je l'adapte pour GImp, mais ça allait. "

par furaa voté :
(a acheté ce tuto - 11 janvier 2012)

" 5 "

par lifegalopa voté :
(a acheté ce tuto - 23 novembre 2011)

" ***** "

par grim06a voté :
(a acheté ce tuto - 10 octobre 2011)

" TRES BIEN "

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

" Bonjour nabilovic,

Je n'avais pas vu ton message. Peux-tu être plus précis sur ton prblème ? est-ce que la vidéo se met quand même en route ? Si oui, fais moi un copié collé de ton code html.

A bientôt :) "

par nabilovica voté :
(a acheté ce tuto - 17 juin 2011)

" no comment un tuto formidable mille merci
mais j'ai un petit souci avec la vidéo les bouton Play Pause ne fonction pas et jai meme recopie ton code dans le css et le html tjr rien et jai meme teste la vidéo avec google chrom, et Firefox ca rien donnez tjr rien ........
et aussi jamrais ajoute des lien pour tous le menu tu peux mexplique comment faire stp jattend votre reponse .
j'esper que dans les jours qui vienne tu ne fait un tuto d'enfer mais tjr dans le meme esprit et pk un pas un site complété(dynamique) lien base de donnez et php ... il va etre le top du top
a+ mon amis "

par nabilovica voté :
(a acheté ce tuto - 17 juin 2011)

" un tres bon tuto mille merci
mais j'ai un petit souci le lecteur video marche mais le : play/paus ne fonction pas "

par cpsymbiosesa voté :
(a acheté ce tuto - 24 mai 2011)

" CHAPEAU vous êtes un Champion et mon tuteur préféré ! "

par heubsa voté :
(a acheté ce tuto - 29 mars 2011)

" Bonjour Infoprog!
Tout d'abord un grand MERCI pour ce super tuto qui m'a eclairé sur bien des points !!!
j'aimerais savoir s'il est possible d'ajouter plsieurs vidéos sur ce meme lecteur (par exemple si on clic sur un lien "A" la vidéo "A" est chargée sur le lecteur;si on clic sur un lien "B" la vidéo "B" est chargée sur le lecteur, ... etc).
Merci pour votre réponse et votre aide !!!
Continuez à nous fournir de superbes tutos tels que celui-ci !!! "

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

" Bonjour dl52, Alors pour ton problème, rien de plus simple, dans le tuto pour insérer notre image, on a utilisé la class image-carousel :

.image-carousel
{
background-image:url(images/expendable.png);
width:980px;
height:525px;
}

si tu souhaites insérer 3 images différentes, créer 3 class différentes qui auront un background-image différent.

PS : N'oubli pas de modifier le nom de ta class dans ta page HTML ;) Si tu as un autre problème, n'hésites pas. "

par dl52
(a acheté ce tuto - 23 mars 2011)

" Bonjour infoprog.

Merci pour le tuto, presque tout marche sur mon site en suivant tes explications, mais je n'ai pas trouvé pour mettre trois images différentes dans le carousel (ce qui est le but).

Merci pour ta réponse

Cordialement "

par Infoprog
(auteur de ce tuto - 17 mars 2011)

" tricksteur -> bonjour, merci pour ton message :) Pour le menu, je te propose de me montrer la prtie html et css qui correspondent à ce menu et je te dirais d'où ça vient :) A bientôt. "

par tricksteur
(a acheté ce tuto - 17 mars 2011)

" Salut a toi l'ami,
Bravo pour ce tuto, j'ai acheté la premiere version du design avec photoshop et celle ci, un travail remarquable !! bravo !!
Par contre j'ai pas mal de soucis et je n'arrive pas a afficher le menu. je ne comprends pas car avec une autre solution j'ai réussi a l'afficher intégralement.
En appliquant les memes valeurs de pixel qu'avec la solution qui fonctionne, rien ne s'affiche :(
j'ai beau l'avoir refait plusieurs fois, rien ne fonctionne.
je débute dans le HTML/CSS mais ne pense pas avoir fait d'erreur car j'ai copié mot a mot et introduit mes valeurs ......
Je suis sur d'avoir commis des erreurs mais je ne trouve pas ou :'(
"

par spokie94a voté :
(a acheté ce tuto - 25 février 2011)

" bonjour, très bon tutoriel, vraiment chapeau !
Je débute à peine et pour l'instant j'y comprend pas vraiment grand chose mais bon il y'a un début à tout.

J'ai une question : Au lieu d'avoir la catégorie "les séances" j'aimerais avoir une catégorie "galerie d'images" je voudrais mettre une galerie 3d interactive. Comment je dois m'y prendre pour mettre ma page en 3d interactive? et comment je fais pour que quand je clique dans la catégorie "galerie d'images" il m'emmène sur ma nouvelle page?

Ps : la galerie 3d interactive je l'ai faite issus du tutoriel "Galerie 3d interactive avec flash" sur http://fr.tuto.com

Merci d'avance pour vos réponses ! "

par ptidej
(a acheté ce tuto - 21 février 2011)

" très bon tuto , merci , j'y vois un peu plus clair . Il me manque juste un peu plus d'explication sur les "float" , "z-index" et le positionnement des div . Peut-être existe t'il un tuto pour celà ?
chris "

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

" Bonjour blockbuster :) J'ai fait une recherche (car je n'utilise pas IE7) et ce navigateur pose pas mal de problème de compatibilité, certains problèmes (dont ceux pour la balise video) seront corrigé dans IE9, tu pourras constater que tout fonctionne impec avec les autres navigateurs :) Je ne peux que te conseiller de te tourner vers un autre navigateur car IE7 est selon moi un peu capricieux =/ Si tu as besoin je suis dispo ;) "

par blockbuster
(a acheté ce tuto - 09 février 2011)

" Du coup la vidéo est tassée ou écrasée dans sa hauteur et ne joue plus dans la taille voulue. "

par blockbuster
(a acheté ce tuto - 09 février 2011)

" Dans IE 7 le menu n'affiche pas les filets séparateurs entre les boutons et surtout le bloc Recherche incluant l'input chasse à la ligne et se retrouve donc sous le bouton accueil avec la petite maison.
En outre le palyer vidéo dans IE7 la vidéo ne se lance pas auto et s'affiche la skin d'outils en bas avec Play, Sound Vol. etc. Du coup la vidéo est tasser dans sa "

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

" Bonjour rolhoc, ce carroussel ne peut pas être modifié pour mettre deux flèches suivant - précédent, cependant je te propose de faire une petite recherche de carroussel sur google et tu devrais trouver des fichiers prêt à l'emploi pour ce que tu veux faire.

Cordialement ;)

PS : Si tes recherches restent infructueuses, recontactes-moi ;) "

par rolhoc
(a acheté ce tuto - 09 février 2011)

" Super ton tuto, mais j'ai quand même une question.
Pour le carroussel j'aimerai à la place des petits numéros mettre deux fléches (Droite-gauche) pour faire défiler l' image suivante ou précédente.
Aurai tu une solution? "

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

" blockbuster -> Peux-tu me préciser quel est le problème exactement pour le menu?

DKProject -> Si j'ai bien compris, tu veux pouvoir mettre un texte en gras à partir du CSS? Si oui c'est très simple, par exemple tu as ce code HTML :

Bonjour à tous, je suis <div class="gras">Infoprog</div>.

et le CSS :

.gras
{
font-weight : bold;
}

Voilà j'espère vous avoir aidé :) "

par DKProject
(a acheté ce tuto - 08 février 2011)

" Tiens par exemple, j'ai une architecture comme celle-ci pour mon texte :

-----------------------------------------


Titre principal (gras)

Titre secondaire (gras) : sous-titre (comportant des mots gras et d'autres non)
Titre secondaire (gras) : sous-titre (comportant des mots gras et d'autres non)
Titre secondaire (gras) : sous-titre (comportant des mots gras et d'autres non)

-----------------------------------------

Comment faire, avec les div et le css (j'aimerais privilégier le bold dans le CSS plutôt que dans le code HTML avec <strong>) pour mettre la partie sous-titre en face du titre secondaire et pour que certains mots d'une phrase soient gras et que d'autres non ...?

Je sais pas si vous voyez ce que je veux dire.

-----------------------------------------
MON CODE TEST
-----------------------------------------

-----------------------------------------
HTML
-----------------------------------------

<div class="evenement">
<div class="titre-evenement">
Evènements à venir</div>
<div class="ville-evenement">
Toulouse:
</div>
<div class="sous-titre-evenement">
Action privée de <strong>GreenPeace</strong>
</div>
</div>

-----------------------------------------
CSS
-----------------------------------------

.evenement
{
width:490px;
height:200px;
}

.titre-evenement
{
font-family:"Segoe UI";
font-size:16px;
font-weight:bold;
color:#5b5b5b;
width:490px;
margin-top:20px;
margin-left:10px;
text-align:left;
}

.ville-evenement
{
font-family:"Segoe UI";
font-size:14px;
font-weight:bold;
color:#9fc31b;
width:490px;
margin-left:10px;
text-align:left;
}

.sous-titre-evenement
{
font-family:"Segoe UI";
font-size:14px;
color:#5b5b5b;
width:490px;
}

-----------------------------------------

Comme vous pouvez le voir dans le HTML je suis obligé de mettre des <strong> pour essayer d'avoir l'effet souhaité et c'est ça que j'aimerais arranger ainsi que le fait de pas pouvoir avoir le titre secondaire et le sous-titre sur la même ligne.

Merci ! ^^ "

par DKProject
(a acheté ce tuto - 08 février 2011)

" Si, enfaite j'ai réussi à me corriger ! ^^
Bon, je suis graphiste, et si j'ai pris ce tutoriel c'est pour me former à la programmation de mes chartes graphiques.

La j'essaye de faire un site "test" avec les bases de ton tutoriel et je dois dire que c'est très utile. Même si je ne parviens pas à mettre certaines de mes idées en place faute de savoir tout faire...

Encore merci. ;) "

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

" Merci pour ton commentaire :) En solution je peux te proposer de comparer ton code avec le code que j'ai fourni dans le fichier source. Si ça ne fonctionne pas, recontactes - moi ;) "

par DKProject
(a acheté ce tuto - 07 février 2011)

" Super tuto, par contre je ne parviens pas à faire défiler les images du carousel.
En guise d'exemple, j'ai juste mis une image rouge et une autre marron pour voir si cela fonctionnait, mais rien ne se passe...

Une solution ? "

 

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 Dreamweaver CS5, CSS d’une durée de 1 heure 58 minutes a été acheté 536 fois et a reçu une note moyenne de 4/5.

Ce tuto a été publié le 4 février 2011 par Infoprog, contributeur, ayant reçu une note moyenne de 4,6/5 pour l’ensemble de ses vidéos.

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 !