Dans cette seconde et dernière partie du tutoriel "Créer une maquette de site internet web 2.0 avec Photoshop" vous allez apprendre à découper une maquette PSD sous Photoshop puis intégrer celle-ci sous Dreamweaver à l'aide du framework 960 Grid System.

Ce tutoriel est vendu avec les fichiers sources pour une meilleure compréhension du travail effectué et à effectuer par vous-même.

A la fin de celui-ci vous serrez capable de réaliser les points suivants:

  • Découpage d'images PNG, JPG sous Photoshop
  • Intégration HTML /Css
  • Coder avec un Framework
  • Intégrer et adapter un slideshow JQuery Javascrypt
  • Intégrer une Google Map
  • Gestion d'une stylesheet Css
  • Gestion d'une stylesheet HTML
Bon apprentissage

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…

Les outils de la retouche mannequinLes outils de la retouche…
Dans ce Tuto Photoshop CS5 dédié à la retouche, nous verrons…

Photoshop CS5 la formation complètePhotoshop CS5 la formation…
Voici une formation Photoshop CS5 complète. Cette formation…

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 16 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

Réaliser un scrolling animéRéaliser un scrolling animé
Dans ce tuto Flash Catalyst CS5, nous allons réaliser un scrolling animé à partir…

Image typo : remplir une image avec du texteImage typo : remplir une image avec du texte
Dans ce tuto Photoshop CS5 vous allez apprendre à réaliser un effet typographique,…

Créer une icône Web 2.0Créer une icône Web 2.0
Dans ce tuto Photoshop vous allez apprendre à réaliser une icône Web 2.0 glossy et…

Créer une maquette de slideshowCréer une maquette de slideshow
Dans ce tuto Photoshop CS5, vous allez pouvoir créer votre propre maquette Photoshop…

voir tous les tuto de bpdesign

Notes attribuées par les utilisateurs (64 votes)

Note moyenne des utilisateurs  

Votez pour ce tuto


 

Les avis / Questions des utilisateurs (121)

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

" Tuto sympa, peut-e^tre certaines choses a revoir au niveau du html "

par Nectroooxa voté :
(a acheté ce tuto - 11 janvier 2013)

" Sympa mais la qualité vidéo n'est vraiment pas idéal. "

par unelongueurdavancea voté :
(a acheté ce tuto - 18 novembre 2012)

" Formateur sympa et de bonne volonté. ce n'est pas vraiment une formation, c'est un échange de bonne pratiques trouvées sur le web.
Merci quand même "

par Tonytutoa voté :
(a acheté ce tuto - 07 octobre 2012)

" Merci Bpdesign, c'est un excellent cours vidéo.
Je connaissais pas cette façon de travailler avec la grille et qui est bien plus pratique.
Encore un grand merci,
Antony "

par cuberdona voté :
(a acheté ce tuto - 04 septembre 2012)

" Tutoriel capturé en haute résolution d'écran sans que cela ne soit justifié. Du coup il est très difficile de suivre les explications tellement c'est petit même sur un écran 24". La compression vidéo n'arrange rien. Impossible de lire le code HTML. Dommage. "

par Answald
(n'a pas acheté ce tuto - 24 juillet 2012)

" D'accord, merci beaucoup je fini mon tuto cinema 4d et je les achète les deux !!!!

"

par bpdesign
(auteur de ce tuto - 22 juillet 2012)

" Hello Answald, bien sur aucun souci concernant l'éditeur de texte ;) "

par Answald
(n'a pas acheté ce tuto - 22 juillet 2012)

" Bonjour,

est-ce possible de suivre ce tutoriel sans Dreamweaver mais avec notepad ?

Merci ! "

par Erebe66a voté :
(a acheté ce tuto - 29 mai 2012)

" La partie audio est excellente : le formateur explique très bien, avec un ton calme et posé.
En revanche, c'est la partie vidéo qui pose problème : c'est filmé beaucoup trop petit !!
Il fallait ZOOMER pour qu'on puisse suivre correctement à l'écran les explications...C'est le seul problème, mais il est de taille ! "

par rappydsa voté :
(a acheté ce tuto - 16 avril 2012)

" trés bon Tutoriel web 2.0 et très bien réalisé. Merci ^^. "

par isaytooa voté :
(a acheté ce tuto - 15 avril 2012)

" Bon tuto. Manque seulement quelques précisions sur la disposition des "margin " ainsi que les "height" et "width". sinon parfait. "

par Daigenzoa voté :
(a acheté ce tuto - 13 mars 2012)

" Super tuto. clair, précis. Réalisation finale tip top. D'une grande aide pour mes projets persos. Merci encore. "

par Saiyzoa voté :
(a acheté ce tuto - 11 mars 2012)

" tres bon tuto, tous marche :)
malgré quelque erreur de frappe pas simple a retrouvé. maintenant c'est nikel ^^

merci pour ce tuto ! "

par iorbita
(a acheté ce tuto - 26 février 2012)

" Bonjour,
j'ai suivi les deux tutos et j'ai les mêmes réflexions que celles qui ont été signalées par d’autres internautes: sympa pour créer une maquette à partir de Photoshop par contre très difficile de suivre les explications concernant le code, un agrandissement du code concerné n’aurait pas été superflu (sur mon portable c'est tout simplement illisible!) et dommage pour le fichier slide.css qui n’est plus disponible sur le site de l’auteur.

En plus, les explications concernant l'intégration du slideshow avec jQuery sont bien maigres, plus de détails concernant la balise div contenant le slide et l’intégration des diverses classes n’auraient pas été de trop... idem pour les boutons du slide (les petits ronds), qu'en est-il du code qui figure via Firebug et qui n'est pas présent dans le fichier source html?
"

par Intia voté :
(a acheté ce tuto - 02 février 2012)

" Bonjour,

Tuto qui m'a bien aidé à comprendre comment découper et coder un site web.
Je suis, par contre, très très déçu car il fallait me faire du mal aux yeux pour tenter de lire les codes html et css. Parfois, il y a eu agrandissement mais malheureusement rarement.
A "

par adoumediaa voté :
(a acheté ce tuto - 01 février 2012)

" impossible de lire les lignes de codes montrées à l'écran, m^me en mode plein écran. il aurait été judicieux de zoomer pour adapter à la lecture pendant le tuto. Des Hésitations dans les explications beaucoup de phrases non finies et basculement immédiat vers la suite. Notemment au niveau de l'explication du css dans dreamweaver "

par Personnofila voté :
(a acheté ce tuto - 31 janvier 2012)

" Très bon tuto, clair, net, précis comme on les aime. Félicitation à Bp. Explication de la maquette et découpe parfaite.

ps: difficulté toute fois à m'en sortir seul à partir du code html et css "

par Caketosa voté :
(a acheté ce tuto - 09 janvier 2012)

" Parfait, que demander de plus ?
Merci beaucoup à vous pour votre claretée ( si on enlève les " euuuh " "euuuh " :p )

Je vais suivre avec attention les tutos suivants et ceux à venir si cela est prévu !

"

par TamLondona voté :
(a acheté ce tuto - 05 janvier 2012)

" tres bon tuto c'est dommage que tu n es pas joinsle zip du slide mais sinon ! well done !
"

par bpdesign
(auteur de ce tuto - 16 décembre 2011)

" Bonjour julien077,

hasard des choses j'étais en train de vous répondre. C'est un tutoriel vieux d'un petit peu plus d'un an et la source originelle du tuto a pu être enlevée ou échangée. Je vous conseil de prendre (si vous ne retrouvez pas la source) un autre slider jquery (c'est pas ce qui manque sur le web) et d'essayer par vous même ( tel est votre désir) de l'intégrer.

En cas de besoin technique je peux vous être utile via le formulaire de contact de mon site internet http://bp-design.fr "

par julien077
(a acheté ce tuto - 16 décembre 2011)

" personne pour répondre ? "

par julien077
(a acheté ce tuto - 15 décembre 2011)

" Bonsoir Bp,

Je viens de finir l'intégration du slider mais j'aimerais refaire le tout avec le fichier slide.css avant que tu ne fasses les modifications, celui d'origine donc, histoire de modifier moi-même. Et je n'arrive pas à trouver ce fichier. Peux tu me dire où je peux le télécharger ?
Merci d'avance "

par bpdesign
(auteur de ce tuto - 13 décembre 2011)

" Bonjour julien077,

la pratique est bonne tu dois simplement fusionner le groupe en prenant garde à ne pas avoir le fond en visible s'il y en a un. Une fois le groupe fusionné il devient un calque.
Copiez ce calque (Ctrl+C) et créer un nouveau document (Ctrl+N) et collez-le dedans (Ctrl+V). Ensuite enlevez l'arrière plan de ce nouveau calque (si celui-ci est là sinon non) et enregistrez le fichier sous le format ".png" pour garder la transparence.
"

par julien077
(a acheté ce tuto - 13 décembre 2011)

" Bonjour,

Petit problème pour copier / coller une image en gardant son ombre
Je fusionne tout d'abord le groupe en ne gardant que les éléments nécessaires, ensuite, dois-je copier avec fusion ou pas ? Si oui il faut enlever le fond. J'ai windows et toi Mac, et j'aimerais bien connaitre les raccourcis clavier qui correspondent. Lorsque je colle, je n'ai pas le calque blanc qu'il faut ensuite supprimer ... HELP !!!
Merci bpdesign pour tes tutos, j'aime et j'apprends beaucoup de choses
A+
Patrick "

par bpdesign
(auteur de ce tuto - 11 décembre 2011)

" le psd est dispo dans la première partie du tutoriel
=> http://fr.tuto.com/photoshop/creer-une-maquette-de-site-internet-web-2-0-photoshop,12057.html "

par htmlman
(a acheté ce tuto - 11 décembre 2011)

" Bonjour ou je peut trouver le fichier psd ? "

par goodtimea voté :
(a acheté ce tuto - 13 novembre 2011)

" Top, le tuto est bien détaillé et accessible à tous, Merci ! "

par antonanzaa voté :
(a acheté ce tuto - 05 octobre 2011)

" Il n'y a pas grand chose a apprendre pour un débutant. C'est plutôt faites comme je dis, mais n'essayez pas de comprendre. "

par rolfyflashy
(n'a pas acheté ce tuto - 28 septembre 2011)

" J'ai réussi a résoudre le problème c’était bien une div ^^ mais par contre j'en ai un autre maintenant --' pour le second et le third du tableau. Je fais normalement tous comme toi et le second et third viennent s'ajouter en dessous du first et ne vont pas dans la catégorie commentaire ou l'autre ... "

par bpdesign
(auteur de ce tuto - 27 septembre 2011)

" le tuto indique bien :

Téléchargement immédiat
Lecture illimitée
Fichiers sources et support inclus


Donc normalement c'est sur le site au même endroit que tes téléchargements "

par rolfyflashy
(n'a pas acheté ce tuto - 27 septembre 2011)

" et ou est ce que je peut trouver ce fameux lien ? j'ai cherché j'ai rien trouver --' "

par bpdesign
(auteur de ce tuto - 26 septembre 2011)

" hello rolfyflashy,

tu as les fichiers sources qui sont téléchargeables sur le site de tuto.com.
Sinon je pense que ton problème vient d'une <div> mal fermée ;) "

par rolfyflashy
(n'a pas acheté ce tuto - 26 septembre 2011)

" Bonjour mr bpdesign
j'ai acheter votre tuto recement et je bloque au niveau du tableau "flash"
je pense avoir mal recopier le code, si possibiliter de me l'envoyer ceci m'aiderait enormement.
Le tableau s'affiche mais une partie se trouve en haut je pensais qu'en jouant avec les margin sa allait marcher mais non...
Et du coup toute la suite de la sidebar et louper a cause de sa
Merci de me repondre
coridallement
rodolphe "

par bpdesign
(auteur de ce tuto - 22 septembre 2011)

" Salut ivery,

merci pour ton commentaire. Pour ton problème d'affichage de Previous / Next je te conseil de faire un text-indent: -9999px; dans leur classe respective.
Cela va te permettre de masquer le texte sur un navigateur en -9999px du coup il ne s'affichera jamais à l'écran.

Par contre enlève font-size:0; qui ne te servira plus. Pour les border c'est une bonne façon de faire oui. "

par iverya voté :
(a acheté ce tuto - 22 septembre 2011)

" Salut,

encore moi :-D bon je suis presque à la fin du TUTO, bon tu te rattrape bien pour la deuxième video ou tu fais des zoom sur le code. Bien que parfois, ce n'est pas très évidant ... mais bon. Par contre, j'ai apprécier ta démarche pédagogique où tu prend le temps d'expliquer ce que tu fais ainsi que les fonctionnalités tant en programmation qu'en design.

Je t'ai donné 4/5. Bonne continuation ++

NB : j'avais un souci pour le Slide Show où le texte : "Previous" et "Next" s'affichait ainsi qu'une bordure de bouton sous firefox. J'ai résolu ce pb en ajoutant un border:0; et font-size:0; dans fichier slide.css ligne
#container .carousel .carousel-next{ et
#container .carousel .carousel-previous{
Je ne sais pas si c'est une bonne méthode mais en tout cas, ça fonctionne ... "

par bpdesign
(auteur de ce tuto - 21 septembre 2011)

" Bonjour boodda,

essaie de télécharger les fichiers sources de la formation sur tuto.com
Tu auras à ta disposition tout ce dont tu as besoin. "

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

" salut j'aime bien votre tuto 1/2 jai commencer le 2/2 mes a un moment tu demande le fichier silde.css que je trouve pas le seul que je trouve quand je le telecharge sur jquery carrousel ces 1 fichier et 1 seul en .js dans ton tuto tu dit que tu pasera le fichier mes je le trouve pas non plus ...tu peut maidé ? "

par iverya voté :
(a acheté ce tuto - 19 septembre 2011)

" Salut,

J'ai suivi la première partie du tuto qui est pluto bien faite (parti photoshop) et jusqu'a la découpe, tous va bien. Mais arrivé a Dreamweaver, je dois admettre que je suis déçu. La capture à été faite sur une tro grande résolution. Effectivement, on ne voit pas grand chose pour le code et c'est vraiment dommage.

Voila pour ma part, je verrai la parti dreamweaver demain et laisserai sans doute un autre com bye a tous. "

par bpdesign
(auteur de ce tuto - 15 septembre 2011)

" Bonjour Olivier75009,

excellent intervention de votre part. Je vous rejoins complètement. De surcroît ce tuto était le 1er en la matière et il est vrai qu'un autodidacte c'est comme un bon vin...il s'affine durant les années.

Je vous remercie pour l'intérêt que vous me portez.

Amicalement, "

par Olivier75009
(a acheté ce tuto - 12 septembre 2011)

" Bonsoir,

Après avoir parcouru l'un de vos tutos, je me suis attelé à celui-ci car l'une des parties manquantes du précédent tuto est précisément abordée dans ce dernier : à savoir l'intégration html et css.

Je sais que vous comptez produire une suite au tuto dont je parle en début de commentaire, et cela pour dans la semaine il me semble.
Je ne peux que vous y encourager.

J'ai pour habitude de ne rarement intégrer de composition d'image à mes sites, leur préférant toute la richesse, la souplesse et la légèreté des CSS. Et jamais n'ai eu recours à de quelconque template. Mes clients veulent des sites originaux.

Cependant, je reconnais que parfois l'esthétique qu'apporte une maquette réalisée sous Photoshop peut s'avérer intéressante. C'est pourquoi j'ai acheté plusieurs de vos tutos.

Malgré cela, je ne saurais vous conseiller de prendre un plus grand soin quant à votre code html - qui est bourré de fautes à la limite du supportable - de même qu'à la structure et à l'arborescence du site. Je ne m'appesantirais pas non plus sur les aberrations css que j'ai pu voir ça et là.

Je me suis donc résigné à l'abandon bien avant la moitié de ce tuto qui paraissait pourtant prometteur.

Néanmoins, j'attends avec impatience d'autres de vos tutos. Vous y mettez du goût et de la générosité ; nul doute que vous mettrez davantage de soin les prochaines fois.

Bonnes continuations,

Sincèrement. "

par grafikOnea voté :
(a acheté ce tuto - 09 septembre 2011)

" Toujours aussi clair, et préçis
excellent travail bonne continuation "

par bpdesign
(auteur de ce tuto - 11 août 2011)

" @dionaea re, alors je t'invite à ouvrir un topic sur le forum dans l'espace web sinon de continuer dans ce sujet du forum pour plus de clarté. Amicalement, bpdesign. "

par bpdesign
(auteur de ce tuto - 11 août 2011)

" @dionaea j'allais te répondre mais tu as trouvé tout seul. Je vais essayer de ré-encoder la vidéo (que je n'ai pas sur mon portable) donc je te demanderai un peu de patience et je fais ça si j'en ai la possibilité :) "

par dionaea
(a acheté ce tuto - 11 août 2011)

" Re,

J'ai exactement le meme probleme que "standardintruder" plus bas (28 mars).
Le carroussel fonctionne mais j'ai des numéros que je n'arrive pas à enlever, un cadre autour des boutons et du texte. De plus mes images n'étant pas exactement de la même dimension (828x277px chez moi), l'image est coupée en bas et la seconde deborde à droite sur la premiere.... Une petite explication sur slide.css aurait été la bienvenue...

Merci d'avance. "

par dionaea
(a acheté ce tuto - 11 août 2011)

" OK, j'ai compris en cherchant.

La déclaration de div se fait avec un diese comme tu l'as indiqué, et non avec une etoile comme j'avais mis...
(c'est vrai que la résolution n'aide pas alors que j'ai un Imac 27" comme toi je pense ;))
Est il possible de récupérer ta vidéo en HD ? ou 720p ? "

par dionaea
(a acheté ce tuto - 11 août 2011)

" Bonjour,

Je suis bloqué.
Dans DW, pour mettre le logo, je déclare bien la div *logo dans mon style.CSS, j'enregistre, par contre il ne me l'affiche pas dans l'ID de index.html... J'ai tout vérifié...

*logo
{
background-image:url(../Images/logo.png);
height:69px;
background-repeat:no-repeat;
margin:10px;
}

Merci d'avance pour votre aide... "

par Titeuf10a voté :
(a acheté ce tuto - 03 août 2011)

" Bonjour,
la suite de ce tutoriel est extrêmement embrouillée, on passe un peu du coq a l'âne avec en plus des imprécisions enorme ! et en plus on ne voit absolument rien à l''ecran sur la video quand on aborde le chapitre avec dreamweaver, et comme c'est en plus très mal expliqué, franchement ce tuto est vraiment limite d'incompréhension pour ce quiconcerne la section
avec dreamweaver !
"

par bpdesign
(auteur de ce tuto - 27 juillet 2011)

" OK super ;) "

par johnmichael
(a acheté ce tuto - 27 juillet 2011)

" J'ai progressé sur mon problème, je suis allé sur le site du créateur du carousel et j'ai regardé le code source de la page html, j'ai vu qu'il y avait un commentaire conditionnel qui permet l'utilisation de la classe IE (slide.css) si le brower est IE. Avec cette ligne en plus dans index.html, cela marche avec IE9. "

par bpdesign
(auteur de ce tuto - 26 juillet 2011)

" Bonjour johnmichael, le tuto a bientôt 1 an donc IE9 n'était pas sorti à l'époque si je puis dire. Du coup je peux pas trop vous aider sur ce coup là mais je vais tenter de regarder ça ;) "

par johnmichael
(a acheté ce tuto - 25 juillet 2011)

" Bonjour bpdesign
J'ai suivi les 2 tutos ce qui m'a permis de customiser une page d'un site. Le slide fonctionne très bien sur firefox, chrome, opera (iphone), safari (iphone) mais malheureusement pas sur IE9.
Les boutons next et previous apparaissent sous IE9 non pas à gauche et à droite mais en haut et en bas.
J'ai noté que dans slide.css il y a une ligne spécifique pour IE:
.IE #container ... display:inline;
Il semble que cette ligne soit importante pour résoudre mon problème. Mais cela fait comme si elle n'était pas prise en compte. Pourquoi? "

par bpdesign
(auteur de ce tuto - 07 juillet 2011)

" Bonjour,

je tiens simplement à vous dire votre commentaire qu'il soit bon ou mauvais reste accessible et ne saura en aucun cas supprimé. La démocratie existe même sur le net voyez-vous? Chacun son opinion et je tiens à ajouter que je prends la votre en considération. Je vous invite par la suite à faire attention au commentaire déjà postés qui relates le problèmes de format trop large (enregistré sous 27").

Je suis heureux lorsque je lis un commentaire positif et bien entendu malheureux lorsque je lis ce genre de commentaire. Je ne suis pas du genre à prendre les gens pour des imbéciles et les arnaquer. Maintenant je comprends votre sentiment, et tout légitime de votre part d'en faire part.

Je vous remercie pour votre franchise, et merci de prendre en compte ma considération. "

par iroda voté :
(a acheté ce tuto - 07 juillet 2011)

" Désolé je vais être très dur

Je trouve ce tuto inutile puisqu'il est absolument impossible de comprendre quoi que ce soit!

J'ai visionné 2 heures en 3 jours impossible de rester accrocher plus de 30 minutes sans paracétamol !!!

Prendre 1 heure pour expliquer le principe de la découpe de la maquette ... ... ... c’est long et lassant

Toute la partie code est illisible c'est une catastrophe, en plus on ne peux même pas se raccrocher au commentaire trop de bafouilles (alt slash euh click point css désolé je suis fatigué?!? )

La voix donne l'impression que vous avez enregistré durant un congé maladie, du fond de votre lit avec 40° de fièvre le thermomètre à la bouche et la bouillotte sur le front

comme dit le proverbe ... le temps c'est de l'argent ; donc vous demandé 4 euros pour les 3 heures qu'il vous a fallut à faire ceci (je dis ceci car impossible d'appeler ceci tutoriel) c'est de bonne guerre ...quoique chez moi on appel ça une arnaque

je vais arrêter la car je me doute bien que mon commentaire sera supprimé car c'est vrai toute les vérités ne sont pas bonne à dire et risquerait de faire fuir le pigeon euh... je veux dire le client pardon

PS: aller faire un tour du coté de W3C validator pour voir ou se trouve les 38 erreurs que vous avez faites dans vos lignes de code


tout est dit :-( "

par bpdesign
(auteur de ce tuto - 27 juin 2011)

" Merci à toi d'avoir choisit mon tuto pour te former ;) "

par chichou007
(a acheté ce tuto - 25 juin 2011)

" Merci mille fois pour cet excellent tuto en deux parties !! J'ai appris enormément de choses grâce à lui! "

par bpdesign
(auteur de ce tuto - 19 juin 2011)

" Bonjour oui tout à fait! L'enregistrement s'est réalisé sous Dreamweaver mais vous pouvez le faire sous n'importe quel éditeur de texte. Sinon oui je pense expliquer assez en détails pour que vous puissiez le suivre même en étant débutant. "

par 3dblend
(a acheté ce tuto - 19 juin 2011)

" J'ai une petite question : est-ce que il est possible d'effectuer ce tutoriel, si l'on a pas beaucoup d'expérience dans le code et que l'on ne possède pas dreamweaver ?
Merci d'avance pour votre réponse ! "

par bpdesign
(auteur de ce tuto - 19 mai 2011)

" "Vous avez déjà uploadé des sources pour ce tutoriel."
Les sources et donc le code sont jointes avec le tuto, vérifiez de bien les avoirs téléchargées sinon demandez la réactualisation de votre délais de transfert pour le tuto à l'équipe du site. "

par pimade
(a acheté ce tuto - 18 mai 2011)

" impossible de lire le code, car il est ecrit trop petit.
SVP, donnez-nous le code en clair ou alors la manière de zoomer sur le dit code.
Merci d'avance "

par bpdesign
(auteur de ce tuto - 18 mai 2011)

" bonjour, vous pouvez lire le tuto avec VLC qui vous permet de zoomer à 400% sur la vidéo en déroulant votre molette de souris d'ordinateur. Sinon, faite aussi référence à mon code joint. Je suis désolé pour la qualité du tuto ou plutôt son format. Comme je l'ai déjà répété plusieurs fois auparavant, je l'ai enregistré sur un 27 pouces et je ne referai plus cette erreur.

Amicalement, "

par pimade
(a acheté ce tuto - 17 mai 2011)

" tuto intéressant mais le code est tellement petit qu'il est illisible.
Ne pouvez-vous pas remédier à cela.??
Merci d'avance "

par isolat05
(a acheté ce tuto - 16 avril 2011)

" PAS SATISFAIT DE LA QUALITE DU VIDEO "

par standardintruder
(a acheté ce tuto - 28 mars 2011)

" Bonjour,

avant tout merci beaucoup pour cette tuto de super qualité!
cependant j'ai deux petits soucis avec le caroussel: d'abord j'ai, par dessus mes navigations, internes et externes, du texte qui vient se rajouter, à savoir previous et next par dessus mes boutons de prev et next et 1 et 2 par dessus ma navigation interne. (je n'ai que deux slides)
ensuite, j'ai une sorte de liseret blanc autour de mes boutons prev et next, comme si il s'était ajouté une sorte d'effet biseautage et estampage!
comment puis je régler ces problèmes? merci d'avance. "

par spirit63
(a acheté ce tuto - 11 mars 2011)

" Bonsoir bpdesign
J'ai effectué quelques modification pour le slider (rien de bien méchant...
Jusqu'à ce que je le test avec IE et là panique !!! Les boutons next et prev ainsi que les slides sont affichés à gauche mais les uns au dessous des autres comme suit :
"NEXT"
"SLIDE"
"PREV"

J'ai tenté de modifier les tailles "affichage, marges, center au lieu de left..." bref rien n'y fait !
Qui plus est les (nav1,2,3) ne s'affichent pas.
Incompatibilité IE ?
parce que dans "Firefox, Google chrome et Safari" tout s'affiche correctement

Merci d'avance pour votre réponse .
"

par quartza voté :
(a acheté ce tuto - 01 mars 2011)

" Salut, ton code n'est pas conforme au W3c ! "

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

" C'est bien mais trop hésitant et il ne faut pas toujours tout expliquer pas à pas, c'est long. Sinon, je suis content d'avoir trouvé ce tuto. "

par bpdesign
(auteur de ce tuto - 18 février 2011)

" bonsoir bohort,

pour une compréhension plus aisé du problème et comme vous le suggérez envoyez moi les liens par mail à l'adresse suivante: contact @ bp - design . fr (sans espace bien entendu) "

par bohort
(a acheté ce tuto - 18 février 2011)

" Bonsoir BP, tout d'abord merci pour ce tuto ainsi que la première partie, personnellement je suis d'un niveau moyen en programmation et je m'en suis assez bien sorti, peut etre quelques passages un peu compliqué surtout au niveau du Java (je ne connais pas du tout le language) et également l'adaptation au grid, je ne connaissais pas du tout. Seul petit aspect négative que je peut dire c'est que la résolution est trop grande du coup on ne voit pas très bien ;). Sinon j'ai une petite question, j'ai fais la maquette et je l'ai integrer via mon hébergeur par contre j'ai un soucis au niveau du previous et next du slide ainsi que les numéros de pages rien ne s'affiche pourtant sur mon local tout marche mais dès que je l'ai upper rien, le problème viendrait d'ou ? je peut te laisser l'adresse de mon site par email si tu veux ? d'avance merci et continue comme ça c'est que du bohneur ^^ "

par bpdesign
(auteur de ce tuto - 14 février 2011)

" Bonsoir aerobil,

c'est normal c'est un choix personnel un peu marketing je l'avoue mais je peux faire une exception à la règle pour toi. Merci de me contacter sur contact @ bp-design . fr (sans espaces)
et je t'enverrai cela.

Bonne st valentin et bon tuto!

Amicalement "

par aerobil
(a acheté ce tuto - 14 février 2011)

" Salut Mr le créateur!
J'ai un vague problème, j'ai acheté le 2e tuto sur l'intégration et pas le 1er sur photoshop. Je m'attendais à trouver un psd joint ...mais rien de rien. Tuto.com m'affirme que je devrais avoir les "Fichiers sources et support inclus"
J'attends donc le fameux fichier source photoshop sans quoi je ne peux rien intégrer.
Merci. "

par elrapha
(a acheté ce tuto - 09 janvier 2011)

" Hello,

Si je peux me permettre un petit résumé ...

J'avais beaucoup aimé la première partie de cette série de tutos, sur la création du design sous photoshop. Je l'ai trouvée très claire, très bien articulée et très bien structurée du début à la fin, et encore un grand bravo ... !!!

Par contre j'ai beaucoup moins aimé ce deuxième tuto. Je note que ton but n'était pas du tout de développer un tuto html/css et ce n'est pas ce qui m'a dérangé puisque je connais déjà ces deux languages. Par contre, même pour une simple explication d'intégration de ton design web 2.0 je l'ai trouvé très brouillon. Tu as pour moi pris pas mal de temps sur certains points qui n'en vallaient pas la peine et au contraire tu n'as pas pris de temps sur certains points qui auraient valu la peine.

Si donc je peux te donner des conseils pour tes prochains tutos. C'est de mettre par écrit le déroulement de ton tuto avant de l'enregistrer et de bien réfléchir à chaque point que tu vas expliquer et développer, comme un genre de storyboard, car si tu te lances en impro pure c'est risqué pour la compréhension du plus grand nombre !!! :( Et autre point, c'est de toujours intégrer ton html en premier et seulement ensuite ton css, tout en expliquant très brièvement ce que cela va produire sur ton css, mais pour moi ça serait beaucoup plus clair.

Mais sinon dans l'ensemble je t'encourage car tes tutos sont bons, et les prix sont honnêtes .... donc merci encore !

A+

Rapha "

par lisaa voté :
(a acheté ce tuto - 08 janvier 2011)

" super tuto, merci Lisa "

par grems02a voté :
(a acheté ce tuto - 16 décembre 2010)

" Tuto riche et généreux. Il serait presque accessible aux débutants si certaines explications n'étaient pas un peu confuses et d'autres manquantes (en faisant le tour des fichiers CSS un utilisateur confirmé comprendra par exemple pourquoi le site est centré en étudiant le CSS du grid, et comment adapter ses boutons au carousel en étudiant les CSS du carousel... mais cela n'est pas forcément évident pour le débutant). Mais c'est vrai que la vidéo fait déjà 3h20 et qu'il n'est pas évident de tout expliquer. Un tuto plus court sur l'utilisation des grids serait le bienvenu pour compléter cette formation.

Pour vos prochains tuto je vous recommande également de procéder toujours selon la méthode la plus conventionnelle, à savoir établir les divs puis ensuite les formater en css. C'est plus clair, surtout si vous adressez vos tutoriels aux débutants.

Ce Tuto est très utile et je trouve que question qualité/prix il vaut vraiment le détour, c'est pourquoi je lui ai mis 5 étoiles.

Bonne continuation.
"

par doukdmla
(a acheté ce tuto - 26 novembre 2010)

" Bonjour,
j'ai exécute les modifications du code comme indiqué, le résulta donne 4 colonnes sur la même ligne mais les textes des 4 colonnes ce sont collés plus du tout esthétique.

Alors en diminuant à 6px la margin-right et la margin-left de la ligne 2 dans 960.css :
( display:inline;float:left;position:relative;margin-left:6px;margin-right:6px}).

Cela fonctionne bien comme ça, en espérant que cela ne nuira pas plus l'ensemble de la page web
Encore Merci "

par bpdesign
(auteur de ce tuto - 25 novembre 2010)

" Bonjour doukdmia, merci pour votre contribution tout d'abord!
Je vous invite à rajouter dans class=""grid_4" alpha et omega. Ces deux paramètres vous servent à enlever les marges par défauts de gauche et de droite.

alpha = enlève marge de gauche
omega= enlève la marge de droite

voici la ligne à écrire:

class=""grid_4 alpha omega"

Je vous invite aussi à rééditer cette propriété sur les autre grid_4. de la ligne. "

par doukdmla
(a acheté ce tuto - 25 novembre 2010)

" Bonjour,
merci pour votre Tuto, pour un débutant comme moi il est parfait,
mon souci est : ma seule modification apporter est dans le "content haut" j'ai effectuer 4 colonnes avec une class=""grid_4", au lieu des 3 colonnes comme dans votre Tuto.
Donc, mon problème est le suivant : ma 4éme colonne ce positionne sous la 1 ère systématiquement (à la ligne suivante).

Merci et bonne continuation "

par bpdesign
(auteur de ce tuto - 22 novembre 2010)

" Bonjour,

c'est votre droit de ne pas être satisfait et je suis actuellement en plein tutoriel intégration CSS / HTML et je note toutes mes erreurs à ne pas rééditer... Maintenant je tiens à signaler une nouvelle fois que ce tutoriel sert à intégrer la maquette web 2.0 auparavant créée et non l'apprentissage du HTML / CSS... Comment voulez-vous que j'anticipe votre design personnel?

Bonne continuation dans vos recherches, et je reste à votre disposition comme je le répète...même pour vos problèmes de codes. "

par AlexZa voté :
(a acheté ce tuto - 22 novembre 2010)

" J'avais déjà testé le premier tuto &quot;créer une maquette de site su photoshop&quot; et je l'avais trouvé très bien. Pour ce deuxième tuto je suis très déçu. Déjà ce tuto est présenté sur un écran de 27' ... c'est quasiement pas lisible ... et pour apprendre à faire des lignes de code c'est un GROS problème ... Ensuite , il faut faire scrupuleusement le même site , la moindre modification sur la maquette photoshop et ça ne marchera plus une fois qu'il faudra faire le code CSS. Enfin voilà , j'était content au début et finalement c'est une grosse déception , c'est très compliqué , illisible la plupart du temps et enfin c'est souvent expliqué beaucoup trop vite et un peu broullion défois. Dommage , j'étais vraiment très interressé au départ ! Avis aux autres formateurs , si vous pouviez refaire un tuto du même genre mais mieux expliqué et d'une résolution inférieure à 4000x2500px alors je suis acheteur ! Le point posisitif reste le prix qui est raisonable faut l'admettre. "

par durandal
(a acheté ce tuto - 20 novembre 2010)

" ok , c bon j'ai du m'adapé et j ai réussi a contourné le probléme , comme quoi le css commence a rentré :P

si jamais :
css :
/* BARRE SEPARATRICE CONTENT */
#barre-separ
{
background-color:#7f7e7e;
height:1px;
background-position:center;
margin:30px 0 20px 0;
}


html :

<div id="barre-separ" class="grid_16">
</div> "

par durandal
(a acheté ce tuto - 20 novembre 2010)

" hello , j'ai un probléme pour la bar-sepa ( tu la écrit barre-spar) et tu le code en bar-sepa dans le css et le html , pourtemps sa fonction cher toi , mais pas cher moi et sa m intéroge :/ "

par mediaboost
(a acheté ce tuto - 13 novembre 2010)

" bien pour les débutants ...

manque d'explications par moment notamment sur le framework 960 grid "

par samoray
(n'a pas acheté ce tuto - 12 novembre 2010)

" "Merci beaucoup pour ce nouveauté du tutoriel. Il est très bien expliqué, et sa m'aide beaucoup
Merci encore. " "

par sysnetpro
(a acheté ce tuto - 29 octobre 2010)

" Bonjour , j ai acheté le premier tuto je le trouve tres bien pour le deuxieme de meme sauf la résolution je suis tres deçu à ce niveau là car une bonne partie du tuto je suis rester devant mon ecran entrein de bavé. comme un chien ^^.
Pour ma part je suis aussi formateur sur un autre domaine biensure, quand je fais des tutos je fait tres attentions à la résolution donc ....
PS: Ce tuto est tres bien mais pour moi il n'ai pas exploitable dans ces conditions là. "

par franz666a voté :
(a acheté ce tuto - 24 octobre 2010)

" Edit :

http://www.thomaslanciaux.pro/jquery/jquery_carousel.htm "

par franz666a voté :
(a acheté ce tuto - 24 octobre 2010)

" Bonjour,
Apres le super tuto photoshop je m'attaque au HTML, apparemment quelques problemes de visibilité pour les codes, vous parlez du fichier réalisé lors du tuto, avez vous mis un dossier en ligne avec les codes ? Si oui, ou puis-je le trouver ?
Petit probleme chez moi, le lien pour le carousel Jquery est mort !
Merci d'avance

F. "

par durandal
(a acheté ce tuto - 22 octobre 2010)

" j ai trouver c'est bon :D

{ } "

par durandal
(a acheté ce tuto - 22 octobre 2010)

" hello , j ai reprit ton tuto , et je suis dsl pour les ancien commentaire :/
je en suis presque a la moitier et il me plait énormément ;)

par contre , comment on ouvre la mini fenetre en css , pour pc se n'est pas alt-<
je vais essayer de voir si dans les commentaire sa a déga été résolu "

par kolyyb
(a acheté ce tuto - 14 octobre 2010)

" Bonjour,

oui je vosi bien le concept
on definit le carré general et ensuite on definit des sous parties (les coins du carré)

je vais essayé de mettre ça en pratique.

Merci pour les explications.

Karine

"

par bpdesign
(auteur de ce tuto - 12 octobre 2010)

" Non pour le premier vous mettez cela dans la balise "body" (regardez dans la css du site)

Pour le second oui et non si vous voulez il vous faut découper le grand carré en 4 comme précédemment dit. Mais ces 4 parties sont comprises dans ce que tu appelles " #container_content ".

En gros:
#container_content = grand carré
#container_content_left = gauche
#container_content_top = haut
#container_content_right = droite
#container_content_bottom = bas

suis-je clair? "

par kolyyb
(a acheté ce tuto - 12 octobre 2010)

" Donc on aurait par exemple quelquechose dans ce gout là :

#container_pricipal (le site entier)
{
background-color : #ccc;
}

#container_content (le grand carré)
background : url("img/cadre_ombre_gauche.png) no-repeat
}

Karine "

par maximexam
(a acheté ce tuto - 12 octobre 2010)

" Bon ça fonctionne, moi perso je n'ai pas vraiment aimé cette formation. Je trouve que avec cette formation, on peu seulement découper et intégrer cette template mais ça ne nous aide pas vraiment si on veux découper et intégrer une autre template avec tout les bugs et tout. Voilà. "

par maximexam
(a acheté ce tuto - 12 octobre 2010)

" Ça ne fonctionne pas la vidéo ???? "

par bpdesign
(auteur de ce tuto - 11 octobre 2010)

" @ campana18

Normalement oui car nous utilisons un framework (960 Grid System) initialement prévu pour tout navigateurs web. "

par bpdesign
(auteur de ce tuto - 11 octobre 2010)

" Alors il faut définir 2 choses distinctes:

1) le fond gris clair se définit simplement par le css suivant:

background-color: #CCC;

2) le fond général du site c'est plus compliqué si tu veux l'ombre autour (tu peux très surement le faire en CSS 3)

Sinon, il faut que tu créais dans ton conteneur principal du site plusieurs partie HTML avec chacune leur CSS et donc le "background", je m'explique:

imagine un grand carré qui contient ton site et plus précisément dans ma vidéo ce que j'appelle le "content". C'est simple dans un carré il y a 4 côtés: haut, droit, bas, gauche. En fait tu vas découper le tout et appliquer au niveau des extrémités justement.

- Commence par le côté gauche et insère ton "background-image"
- Ensuite le haut du carré toujours avec "background-image" et ajoute-y "background-color" (blanche dans l'exemple que tu m'as fournis)
- Le côté droit par la suite comme le gauche
- Puis le bas comme les côtés.

Petite astuce, découpes tes images d'une hauteur de 1px pour celles du côté et en largeur pour les côtés haut et bas, cela évite des images trop lourdes, il te suffit juste de dupliquer l'image de fond en x ou y suivant encore une fois si c'est le côté ou le haut / bas.

Si tu ne comprends pas tout, je t'invite à venir me parler via facebook.

Amicalement, "

par campana18
(a acheté ce tuto - 11 octobre 2010)

" J'aurais souhaité savoir si cette était compatible avec Internet Explorer ? "

par kolyyb
(a acheté ce tuto - 11 octobre 2010)

" Bonjour,

Excellent tuto !!

J'aimerais faire un effet de double background sur mon site, je veux dire avoir un fond uni general + un fond pour le corps du site web comme ce site par exemple :
http://www.alsacreations.com/apprendre/

il a un fond gris clair et un fond blanc pour le corps général du site avec cet effet d'ombre autour du cadre, Vous voyez ?.
Comment puis je m'y prendre ?

Karine "

par bpdesign
(auteur de ce tuto - 10 octobre 2010)

" Oui comme dit plus haut, petit problème de visibilité sur ce tuto... Je vos conseille donc de vous fiez aux pièces jointes lors de la réalisation du tuto pour plus de facilité d'exécution.

Amicalement. "

par campana18
(a acheté ce tuto - 09 octobre 2010)

" Tuto bien réalisé mais ou sont les zooms pour le code HTML ??? "

par durandal
(a acheté ce tuto - 05 octobre 2010)

" hello , ( hier j avais la grippe donc dsl si j été un peut rude xD )
donc ouai je pense que je vais quand meme essayer de le refaire , mais sinom le tuto est bon , tu explique bien , c'est just que par exemple que la part 1 , tu écrivais en plus gros a coter avec ton programme pour engregistrer , dommage que tu ne l ai pas fais dans la parti 2 :/ "

par bpdesign
(auteur de ce tuto - 04 octobre 2010)

" Oui la difficulté évoquée plus haut c'est à dire mon 27" qui gène un peu la lisibilité du tuto. Mais si on est courageux on s'aide de ce que j'ai fais en directe. Ensuite comme je l'ai déjà dis je ne vous apprends pas à faire du code mais à coder le template. Désolé si cela vous déçoit.

Bonne continuations et bon courage si demain vous avez plus d'envie pour le tuto ;) "

par durandal
(a acheté ce tuto - 04 octobre 2010)

" hello , désolé mais réélement dessus , tout se qui est codage on arrive pas a lire et on comprend quedal , trop de pixel..
j ai meme pas u le courage de finir la lecture du tuto..
peut etre que demain je recommencreai , mais se soir en tout cas je suis asser dessus. "

par bpdesign
(auteur de ce tuto - 03 octobre 2010)

" Bonjour, OK j'espère bien qu'elle vous plaira quoi qu'il arrive après... Mais merci de me prévenir ;) "

par durandal
(a acheté ce tuto - 03 octobre 2010)

" Hello , je vien d acheter la parti 1 , j'éspère quelle sera a la hauteur de mes attente :)
et si elle est tu pourra te faire 4 crédit en + ;)

je veux etre concepteur en multimédia , et je veux connaitre le web avant d entrer en cours pour etre le best :P "

par damienlvkaa voté :
(a acheté ce tuto - 10 septembre 2010)

" Bien entendu... excusez moi! ;-) "

par bpdesign
(auteur de ce tuto - 10 septembre 2010)

" je vous invite à poursuivre à discussion sur le forum / Onglet Web / topic au nom du tuto "

par damienlvkaa voté :
(a acheté ce tuto - 10 septembre 2010)

" Je ne m'arrête plus... désolé.
En fait mes barres séparatrice ont le même code css... pourtant, elle ne sont pas centrer de la même manière... L'une est un peu trop à droite. "

par damienlvkaa voté :
(a acheté ce tuto - 10 septembre 2010)

" Ah oui, j'ai encore une petite question... je n'ai pas encore bien compris comment déplacert le caroussel (left ou right)... je ne trouve pas la ligne de code...
;-) "

par damienlvkaa voté :
(a acheté ce tuto - 10 septembre 2010)

" J'ai pris beaucoup de plaisir à le réaliser ! "

par damienlvkaa voté :
(a acheté ce tuto - 10 septembre 2010)

" Merci pour la marge !! J'ai dut faire une fausse manipulation !!! Tout est rentré dans l'ordre.
Par contre pour mes boutons "en savoir +", j'ai bien copier le code plusieurs fois... mais mon bouton s'aligne en fonction de la quantité de mon texte! J'aimerai pourvoir garder mes boutons sur la même ligne (même si mon texte diffère) ..

Merci beaucoup et encore bravo pour ce tutoriel !

"

par bpdesign
(auteur de ce tuto - 10 septembre 2010)

" 1/ pour le content footer insérez lui une margin left (si vous voulez le ramener sur votre gauche) ou right (si vous voulez le ramener sur votre droite) comme ceci:

margin-left: -10px;

La valeur 10 est bien sur mise pour vous illustrez la chose, par contre le "-" lui est très important car il va vous permettre de recentrer votre image manuellement.

2/ Pour les boutons "en savoir plus" l'alignement devrait être le même puisque l'on utilise la même CSS pour chacun des 3 cadres. Assurez-vous d'avoir bien dupliqué les balises HTML de ces éléments.

Amicalement, "

par damienlvkaa voté :
(a acheté ce tuto - 10 septembre 2010)

" Bonjour et merci beaucoup pour ce magnifique tuto que je viens tout juste de finir !!! Il est vraiment très bien réalisé! Clair concis précis !!! ;-) !

Par contre, j'ai n tout petit problème... (je n'ai pas encore bien tout compris)...
Je trouve que mon footer n'est pas très bien centrer? j'ai essayer de modifier mon content-footer en lui inserant une marge... mais en vain.

Ah oui... je n'arrive pas non plus à aligner tout mes boutons "en savoir plus"!!

Est ce que quelqu'un pourrai éclairer ma lanterne??

Merci infiniment!!
DamienLvka
"

par ArC3Nik
(a acheté ce tuto - 02 septembre 2010)

" Très bon Tuto dans l'ensemble !
Ces vraie que parfois il est un peut difficile de lire le code tapé, mais quand tu zoom un peut ces parfait :)

Bonne continuation "

par bpdesign
(auteur de ce tuto - 29 août 2010)

" Non vous n'êtes en aucun points dur, c'est votre ressentit et j'en prends note pour la suite. Je ne fais des tutos que depuis début juillet, alors il peut parfois s'avérer que ceux-ci tournent par moment au "bordélique". La fatigue aussi d'enregistrer 3h durant et avec quelques reprises le tuto ;) "

par sakurasana voté :
(a acheté ce tuto - 29 août 2010)

" Bonjour! Je vais être dur: partie2 un peu bordellique, mais toujours très bien! Avec un peu d'effort, cela accéderait à l'excellence!! Bonne continuation! "

par ethana voté :
(a acheté ce tuto - 24 août 2010)

" Bonjour à tous,

Pour commencer je vous remercie beaucoup pour le tuto précédent il est vraiment bien détaillé est le template me plait beaucoup, je viens d'acheter celui-ci d'ailleurs je vous encourage a faire de même j'ai hate de mis mettre encore merci vous faite du bon travail
vous faciliter est encourager de nombreux débutant comme moi. Je vous donnerai mon avis sur ce tuto, voila un petit remerciement car je ne l'avais pas fait sur le premier.

Bon courage à tous est bonne dégustation a consommer sans modération

Vive BPdesign xD "

par bpdesign
(auteur de ce tuto - 23 août 2010)

" Bien sur car si vous y êtes arrivé pour le 1er il n'y aucunes excuses plausibes pour ne pas arriver le second ^^! Plus sérieusement, j'essaie d'expliquer un maximum les codes et si vraiment vous ne comprenez pas un point du tuto je serai à votre disposition sur la page commentaire de celui-ci voir par mail ou mon site web. "

par kvc695a voté :
(a acheté ce tuto - 23 août 2010)

" Bonjour, je suis en cours de finalisation du 1er tuto sur la réalisation de la maquette avec photoshop. Il est vraiment super.
Je n'y connaissais pas grand chose avant à Photoshop, ce tuto, de par sa qualité et sa sobriété, m'accompagne prograssivement dans cet apprentissage.
La suite logique est la construction du site web à partir de la maquette. Toutefois, n'y connaissant rien à Dreamweaver, est-il adapté ?
Merci par avance. "

par Dutduta voté :
(a acheté ce tuto - 23 août 2010)

" Merci beaucoup pour la suite du tutoriel. Il est une fois de plus très bien expliqué, je n'ai plus qu'a me mettre au boulo.
Merci encore. "

par Jasse29a voté :
(a acheté ce tuto - 22 août 2010)

" Re-,

Pour ce qui est des explications, le sens de ma remarque n'avait qu'un but : vous inciter à faire d'autres tutoriels de même qualité approfondissant certains points. "

par bpdesign
(auteur de ce tuto - 22 août 2010)

" Oui comme un autre utilisateur vous faîtes le même constat...La raison est très simple, je travaille sur une résolution d'écran de 27 " en 2560 x 1440. Lorsque je zoomais lors de l'enregistrement vidéo, la vision face à l'écran était plus que bonne et lisible. Le fait est qu'avec le passage sous vidéo, cela agrandi le champ de vision et donc abaisse votre visibilité.

Je vous suggère de travailler avec à vos côtés le fichier réalisé lors de ce tuto pour vous en référer. Cela vous permettra une meilleure compréhension.

Pour les explications plus approfondit, je ne peux malheureusement pas vous réaliser un tutoriel d'apprentissage sur le css, l'html, le jquery, etc... J'explique ici comment passer d'une maquette psd à un environnement html / css. J'essaie d'en expliquer un maximum et surtout de vous faire comprendre ce que vous faîtes, ce qui pour moi est primordial. "

par Jasse29a voté :
(a acheté ce tuto - 22 août 2010)

" Bonjour,

Je viens de terminer ce tutoriel intéressant. On y apprend de nombreuses astuces et quelques bons conseils pour la mise en forme d'un framework qui soit "actuel", notamment avec la mise en place d'un slideshow et de l'intégration du module googlemap.

Par contre, il n'est pas toujours évident de pouvoir lire ce que l'auteur écrit car même si la vidéo est de qualité la résolution fait qu'on se retrouve avec une police toute petite à l'écran. Enfin on y arrive quand même. Quelques explications plus approfondies sur l'utilisation des librairies employées au cours de ce tutoriel auraient été bienvenues même si je comprends que ce tutoriel est déjà long.

En conclusion, un tutoriel qu'il est très intéressant à suivre et qui est facilement transposable à ses propres maquettes .psd. Du bon travail donc. "

 

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 16 minutes a été acheté 1519 fois et a reçu une note moyenne de 4/5.

Ce tuto a été publié le 20 août 2010 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 !