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 cheveuxUnifier la couleur des cheveux…
Dans ce tuto Photoshop gratuit vous verrez comment harmoniser…

Effet pluvieuxEffet pluvieux
Apprenez à créer un effet pluvieux réaliste, dans ce tuto…

Fluidité : Espace disque insuffisantFluidité : Espace disque…
Dans ce tuto Photoshop gratuit, vous découvrirez comment contourner…

Colorisation manga de A à ZColorisation manga de A à…
Dans ce tuto Photoshop CS5, vous allez apprendre à coloriser…

Détourer une photo complexeDétourer une photo complexe…
Dans ce tuto Photoshop CS5, je vous propose de détourer un…

Créer une maquette de site internet web 2.0Créer une maquette de site…
Dans ce tuto Photoshop vous allez pourvoir apprendre et comprendre…

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…

Les outils de la retouche mannequinLes 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 :

Partagez cet extrait

Lien vers cet extrait : Embed code :

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 boxCré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 tableCré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 mesureCSS3 : 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étiqueCréer un menu esthétique
Dans ce tuto Photoshop, en vidéo, vous allez apprendre à créer la maquette graphique…

voir tous les tuto de bpdesign

Notes attribuées par les utilisateurs (11 votes)

Note moyenne des utilisateurs  

Votez pour ce tuto


 

Les avis / Questions des utilisateurs (24)

par Crioveura voté :
(a acheté ce tuto - 30 septembre 2012)

" Super tutoriel comme d'habitude.
Accessible, compréhensible, clair et exhaustif.

Un seul mot: BRAVO ! "

par pitermana voté :
(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'. "

par staszea voté :
(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) "

par bpdesign
(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. "

par staszea voté :
(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. "

par camilleodona voté :
(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! "

par nabilovica voté :
(a acheté ce tuto - 05 mars 2012)

" " ok merci de m'avoir répondu aussi vite je vais essayer ton astuce …..thanks "
"

par bpdesign
(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. "

par CRTXRa voté :
(a acheté ce tuto - 05 mars 2012)

" ***************************************************************** "

par nabilovica voté :
(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 "

par Infoprog
(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 ;) "

par bpdesign
(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 ;) "

par Infoprog
(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 ;) "

par campana18
(a acheté ce tuto - 27 janvier 2012)

" Bonne nouvelle ça, merci ! "

par bpdesign
(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. "

par campana18
(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 ? "

par claba voté :
(a acheté ce tuto - 20 janvier 2012)

" super Très bonnes explications "

par bpdesign
(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 "

par campana18
(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 "

par poussin974a voté :
(a acheté ce tuto - 13 janvier 2012)

" Very Nice "

par bpdesign
(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. "

par Laendila voté :
(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. "

par Jasse29a voté :
(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.

"

par jml71a voté :
(a acheté ce tuto - 09 décembre 2011)

" très bon tuto comme d'habitude. "

 

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.

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