Dans ce tuto Photoshop de plus de 4H30, en vidéo, vous allez apprendre à découper une maquette web sous Photoshop puis à l'intégrer de façon valide W3C avec Dreamweaver.
Ce tuto est la suite de Créer une maquette complète de portfolio"
L'intégralité du code XHTML de cette formation a été validé par les normes W3C 1.0 Strict.
Au programme de cette formation sur le découpage et l'intégration :
- Le Header
- Le Content (page home)
- Le Footer
- La page Portfolio
- La page Contact
- La page About
- Validation W3C
Cette formation convient aussi bien aux débutants qu'à des utilisateurs déjà plus confirmés au niveau HTML/CSS.
Jetez un oeil à ces autres tuto Photoshop CS5, Dreamweaver CS5
Unifier la couleur des cheveux…
Dans ce tuto Photoshop gratuit vous verrez comment harmoniser…
Effet pluvieux
Apprenez à créer un effet pluvieux réaliste, dans ce tuto…
Fluidité : Espace disque…
Dans ce tuto Photoshop gratuit, vous découvrirez comment contourner…
Colorisation manga de A à…
Dans ce tuto Photoshop CS5, vous allez apprendre à coloriser…
Détourer une photo complexe…
Dans ce tuto Photoshop CS5, je vous propose de détourer un…
Créer une maquette de site…
Dans ce tuto Photoshop vous allez pourvoir apprendre et comprendre…
Découper et intégrer une…
Dans cette seconde et dernière partie du tutoriel "Créer une…
Les outils de la retouche…
Dans ce Tuto Photoshop CS5 dédié à la retouche, nous verrons…
Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto Photoshop CS5, Dreamweaver CS5 de 3 heures 35 minutes est proposée dans une résolution plus grande que l’extrait suivant :
bpdesign
, Formateur
Utilisateur adobe photoshop depuis plus de 10 ans, je suis très sensible au monde du Webdesign.
Aujourd'hui auto-entrepreneur dans la création de site internet j'enseigne également en Technologie de l'information et de la communication à l'Université Claude Bernard Lyon 1.
Toutes les formations de Bpdesign
Témoignage des clients de bpdesign
![]()
je recommande ce formateur pour ses tutos bien réalisés et bien expliqués.
![]()
de très bon tuto.
![]()
Formateur plutôt explicite, des tutos assez faciles d'accès.
![]()
Ses formations sont super bien expliquées et la voix est très agréable à écouter.
![]()
merci ça m'a beaucoup aidé
Lire les autres témoignages
D'autres tuto de bpdesign
Créer une info box
Dans ce tuto Photoshop vous allez apprendre à créer une info box sur tons gris. Nous…
Créer une maquette de pricing table
Dans ce tuto Photoshop en vidéo vous apprendrez à créer un tableau de prix élégant…
CSS3 : Ombre sur mesure
Dans ce tuto CSS 3 en vidéo, vous allez apprendre à réaliser une ombre sur mesure…
Créer un menu esthétique
Dans ce tuto Photoshop, en vidéo, vous allez apprendre à créer la maquette graphique…
Notes attribuées par les utilisateurs (11 votes)
Les avis / Questions des utilisateurs (24)
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 CS5, Dreamweaver CS5 d’une durée de 3 heures 35 minutes a été acheté 221 fois et a reçu une note moyenne de 5/5.
Ce tuto a été publié le 5 décembre 2011 par bpdesign, contributeur, ayant reçu une note moyenne de 4,3/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.


























(a acheté ce tuto - 30 septembre 2012)
" Super tutoriel comme d'habitude.
Accessible, compréhensible, clair et exhaustif.
Un seul mot: BRAVO ! "
(a acheté ce tuto - 27 août 2012)
" la video s'aret a 27'.
la video s'aret a 27'.
la video s'aret a 27'. "
(a acheté ce tuto - 06 août 2012)
" Merci pour votre réactivité en espérant vraiment que vous puissiez avoir rapidement cette corde à votre arc (en plein JO de Londres, c'est normal ... lol) "
(auteur de ce tuto - 05 août 2012)
" Hello stasze malheureusement je n'ai pas encore cette corde à mon arc de connaissance mais promis j'y travaille. "
(a acheté ce tuto - 05 août 2012)
" Tout d'abord merci pour les superbes tutos que vous nous faites partager. J'aimerai savoir si vous avez prévu un prochain tuto pour l'intégration du slide en jquery pour ce template?
Encore merci. "
(a acheté ce tuto - 26 juillet 2012)
" merci pour ce tutoriel, aussi bien que le premier! j'ai juste eu un problème: mon bouton ne faisait pas 60 par 60 et là c'a été un peu galère... au moins maintenant la css ne me cache plus grand chose! "
(a acheté ce tuto - 05 mars 2012)
" " ok merci de m'avoir répondu aussi vite je vais essayer ton astuce …..thanks "
"
(auteur de ce tuto - 05 mars 2012)
" Hello nabilovic,
si j'ai bien compris vous voulez mettre le logo + menu sur la même ligne? Et bien tout simplement il faut ajuster les class grid sur une ligne qui compte 12 grid (12 colonnes). Si vous n'y arrivez pas contacter moi via mon site internet accessible sur ma page profil public. "
(a acheté ce tuto - 05 mars 2012)
" ***************************************************************** "
(a acheté ce tuto - 04 mars 2012)
" bjr superb tuto j'ai juste une question j'ai un problème avec mon menu il descend tout en bas accuse du logo et moi je veux que le menu et le logo soie dans la meme linge comment faire jattends votre repos merci davance "
(n'a pas acheté ce tuto - 01 février 2012)
" Ok merci de ta réactivité ^^ Je vais me contenter de la partie 1 alors parce que niveau design, je suis un peu à la traîne en ce moment et mon portfolio doit voir le jour très rapidement. Merci encore ;) "
(auteur de ce tuto - 01 février 2012)
" Bonsoir Infoprog,
Non dans cette partie nous voyons que l'intégration HTML/CSS et non JQuery ;) "
(n'a pas acheté ce tuto - 01 février 2012)
" Bonjour, je vais acheter le première partie pour créer le design mais je voulais savoir si tu expliquais dans cette partie comment intégrer le carousel avec le défilement ... ?
A très vite ;) "
(a acheté ce tuto - 27 janvier 2012)
" Bonne nouvelle ça, merci ! "
(auteur de ce tuto - 26 janvier 2012)
" Bonsoir campana18,
oui aucun souci de compatibilité car nous ne parlons pas de la même chose. HTML5 c'est le doctype de ton index.html par exemple. CSS3 ce sont des nouvelles techniques d'animations ou de rendus qui ne change en rien le CSS2. "
(a acheté ce tuto - 26 janvier 2012)
" Merci pour votre réponse, cela a fonctionné ! Une dernière question, est ce que le framework "960css.grid" est compatible avec le HTML5/CSS3 ? "
(a acheté ce tuto - 20 janvier 2012)
" super Très bonnes explications "
(auteur de ce tuto - 16 janvier 2012)
" Bonjour campana18,
vous avez tout compris. En effet, la width de 940px bloque le header en abscisse. Pour cela mettez 2 choses en imaginant que votre background est une image:
#header
{
width: 100%;
backgroung: url(images/bg.jpg) repeat-x;
}
bien entendu d'autres propriétés rentrent en compte dans le header c'est un exemple de base "
(a acheté ce tuto - 16 janvier 2012)
" Super tuto, vraiment rien à redire ! J'aurais une question, pour l'intégration du header, comment faire pour que le header se répète en abscisse à l'infini ? Je n'arrive pas à faire cette manipulation car je pense que le header est bloqué par le "width 940" du body. Merci d'avance "
(a acheté ce tuto - 13 janvier 2012)
" Very Nice "
(auteur de ce tuto - 12 décembre 2011)
" Bonsoir Laendil,
ce problème ne vient pas du formateur (moi) mais de tuto.com. De plus il a été réparé et normalement vous avez accès au tuto normal avec un son et une image en parfaite harmonie. C'est très regrettable si c'est la seule raison d'un 4/5 au lieu d'une note complète car je n'y suis pour rien. "
(a acheté ce tuto - 12 décembre 2011)
" 4/5 malgres que le Tuto soit très interressant, il y a un gros décalage entre la bande son et la vidéo. "
(a acheté ce tuto - 09 décembre 2011)
" Bonsoir,
Tutoriel de qualité (nous sommes habitués avec bpdesign) : le résultat est très sympa, et on y apprend des techniques très intéressantes que l'on peut utiliser pour nos propres créations.
Tutoriel qui peut être abordé par tous car bpdesign explique clairement tout ce dont on a besoin de savoir pour comprendre ce qu'il réalise.
"
(a acheté ce tuto - 09 décembre 2011)
" très bon tuto comme d'habitude. "