Ce tuto vidéo "Montage HTML/CSS d’une maquette graphique sur Dreamweaver avec Dreamweaver CS6, HTML, CSS 3" fait partie d'une formation complète qui vous permettra de découvrir plus en profondeur Dreamweaver,HTML,CSS. Découvrez sans plus attendre la formation "PACK : Créer un site Internet de A à Z" dans laquelle vous retrouverez cette vidéo et tous les fichiers source utilisés par le formateur.


Voici une formation dédiée à la découpe et au montage HTML / CSS de notre maquette graphique Web réalisée sur Photoshop. Au cours de cette formation nous apprendrons à :

  • Répéter un motif sur l’ensemble de nos pages Web
  • Installer une police (font) personnalisée grâce au CSS3
  • Charter tous les liens, titres, sous-titres… à l’aide de notre feuille de style CSS
  • Installer un slider d’images JQUERY en lecture automatique qui tourne en boucle
  • Créer un effet d’opacité au rollover sur nos images
  • Décliner les autres pages de notre site Web
  • Intégrer un player sur une page
  • Installer une galerie références en JQUERY avec effet de transition Noir-Blanc / Couleur au rollover
  • Intégrer un google map sur la page contact

Bonne formation.

Jetez un oeil à ces autres tuto Dreamweaver CS6, HTML, CSS 3

Administrer votre site vitrine avec WordpressAdministrer votre site vitrine…
Voici la dernière partie consacrée à la création d'un site…

Découpe et intégration Html5 d'une maquette d’un site vitrineDécoupe et intégration Html5…
Voici la suite de la formation "création d'une maquette d'un…

Créer un emailing de A à ZCréer un emailing de A à…
Dans ce tuto Photoshop & Dreamweaver, vous apprendrez à créer…

Créer un thème Wordpress à partir d'une maquette HTMLCréer un thème Wordpress…
Voici la dernière partie (3/3) de la formation consacrée à…

Créer votre site Internet / Portfolio de A à ZCréer votre site Internet…
Dans cette formation Photoshop et Dreamweaver, nous allons apprendre,…

PACK : Créer un site Internet de A à ZPACK : Créer un site Internet…
Voici un pack complet qui vous apprendra à créer un site Internet…

Montage HTML / CSS d'un site Internet ResponsiveMontage HTML / CSS d'un site…
Voici une formation sur le découpage et l'intégration d'un…

Administrer votre site Internet avec PHP et MySqlAdministrer votre site Internet…
Cette formation sera consacrée à la création d'un backoffice…

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

Partagez cet extrait

Lien vers cet extrait : Embed code :

team8.fr , formateur certifié

Bonjour, Damien Graphiste Illustrateur / Directeur artistique - Agence Team8.fr Je suis spécialisé dans la création visuelle d'images numériques, ainsi que dans la conception graphique de sites Internet / HTML / CSS. N'hésitez pas à me poser vos questions concernant les tutos !

Toutes les formations de Team8.fr


Témoignage des clients de team8.fr

De bon tutos qui m'ont permis de progresser

Ce formateur est compétent et compréhensible !

Merci pour la formation

Très bon formateur, très professionnel. Je recommande les yeux fermés !

excellent formateur proposant des tutos vraiment très intéressants! j'ai déjà suivi plusieurs de ses tutos et je pense continuer, j’apprends beaucoup avec ce formateur

Lire les autres témoignages

 

D'autres tuto de team8.fr

Créer une maquette graphique d'un site WebCréer une maquette graphique d'un site Web
Dans ce tuto Photoshop nous allons apprendre à réaliser une maquette graphique de site…

Configurer Google Analytics et vos sitemaps dans WordpressConfigurer Google Analytics et vos sitemaps dans Wordpress
Cette formation en vidéo vous expliquera comment installer Google Analytics sur notre…

Créer votre site Web dans Wordpress sans programmation !Créer votre site Web dans Wordpress sans programmation !
Nous allons à travers ce tuto Wordpress en vidéo, apprendre à créer un site Internet…

Créer votre site Internet / Portfolio de A à ZCréer votre site Internet / Portfolio de A à Z
Dans cette formation Photoshop et Dreamweaver, nous allons apprendre, ensemble, pas à…

voir tous les tuto de team8.fr

Notes attribuées par les utilisateurs (11 votes)

Note moyenne des utilisateurs  

Votez pour ce tuto


 

Les avis / Questions des utilisateurs (34)

par komariannea voté :
(a acheté ce tuto - 16 février 2014)

" Clair, précis... un peu répétitif dans les lignes de commandes forcément, mais somme toute cela permet de bien capter le processus et de l'intégrer. Pour celles et ceux qui n'ont jamais codé de CSS c'est idéal. "

par multitachea voté :
(a acheté ce tuto - 28 octobre 2013)

" Excellent Tuto, permet d'intégrer parfaitement sa maquete de site web façon structuré "

par illuminaa voté :
(a acheté ce tuto - 09 octobre 2013)

" tuto pas assez fluide, et un peu lassant car trop d'hésitation.
sinon passable "

par formationpseudoa voté :
(a acheté ce tuto - 02 septembre 2013)

" Bon tuto.
Manque juste l'integration du titre et sous-titre dans le slider qui avais été créé dans photoshop "

par team8.fr
(auteur de ce tuto - 29 août 2013)

" Rien :) si c'est une première peut-être que le lien que je viens de vous donner sera un peu plus pédagogique dans le sens ou je vous donne les bases de construction à travers des schémas :) "

par Eriam
(n'a pas acheté ce tuto - 29 août 2013)

" Merci !!

Oui, une dernière question : qu'est-ce que je "perd" à prendre celui que vous m'avez donné par rapport au 2 réunis ? ^-^ "

par team8.fr
(auteur de ce tuto - 27 août 2013)

" Salut eriam,
La partie création du psd ce trouve ici :
http://fr.tuto.com/photoshop/creer-une-maquette-graphique-d-un-site-web-photoshop,35756.html

Et oui dans cette formation on apprend à monter le site.

Cette formation pour debutants peut aussi t'intéresser (la création + le montage sont dans le même tuto) :
http://fr.tuto.com/photoshop/creer-votre-site-internet-portfolio-de-a-a-z-photoshop-dreamweaver,32717.html

Si tu as d'autres questions n'hésitez pas ! "

par Eriam
(n'a pas acheté ce tuto - 27 août 2013)

" Bonjour,
Votre tuto m’intéresse mais je voulais savoir si l'on apprend bien ces 2 choses :
-Construction d'un PSD du site (Construire le design du site)
-ET la conversion de ce design en HTML/CSS (HTML5/CSS3)

Merci d'avance !
"

par team8.fr
(auteur de ce tuto - 14 avril 2013)

" Bonjour, pour l'instant pas de solution pour chrome avec ce js.
Comme je le disais plus bas, les scripts js peuvent rencontrer des problèmes de fonctionnement avec certains navigateurs. Peut-être mettre chrome à jour ? ou attendre une update du logiciel.

Mis à part chrome, tout à l'air de bien fonctionner sur les autres navigateurs.

Je ne manquerai pas de poster un commentaire général si je trouve une solution.

A bientôt,
Damien "

par samellite
(a acheté ce tuto - 14 avril 2013)

" Je rencontre le même problème sur Chrome, avez-vous une solution ?
Merci de la partager pour que tout le monde puisse en bénéficier.
"

par pmoreaua voté :
(a acheté ce tuto - 12 mars 2013)

" présentation très dense et surtout qui va à l'essentiel "

par team8.fr
(auteur de ce tuto - 08 février 2013)

" hello bobdoni; je viens de vous répondre :) "

par bobdoni
(n'a pas acheté ce tuto - 07 février 2013)

" Bonjour !
Je rencontre le même problème que "Hooligirl" sur Chrome, je vous joint ci-dessous mon mail afin d'avoir une réponse, si vous en avez trouvé une.

lori.droel@hotmail.com "

par Hooligirla voté :
(a acheté ce tuto - 25 janvier 2013)

" Merci pour votre réponse rapide. Mon mail est isabelle.curnel@live.fr
"

par team8.fr
(auteur de ce tuto - 24 janvier 2013)

" Bonjour Hooligirl,
Effectivement la transition fonctionne bien sur tous les navigateurs sauf chrome. Il arrive parfois que certains navigateurs soient plus réticents que d'autres...
Peux tu me donner ton mail, si je trouve une solution je n'hésiterai pas !
Bonne journée "

par Hooligirla voté :
(a acheté ce tuto - 23 janvier 2013)

" Très bon tuto, merci beaucoup.

Juste un petit "mais". Lors de la troisième partie sur la page reference, le script JS "galerie" fonctionne très bien sur mozilla mais pas sur chrome. Serait-il possible de remédier à ce problème? "

par jeanchouxxxa voté :
(a acheté ce tuto - 22 janvier 2013)

" super tuto superbe explication
genial pour debuté merci "

par team8.fr
(auteur de ce tuto - 18 décembre 2012)

" Salut dustyv, ok pas de problème :) "

par dustyv
(a acheté ce tuto - 16 décembre 2012)

" Bonjour Team8

Je suis tombé sur vous par hasard via youtube ("
CRÉER VOTRE SITE INTERNET / PORTFOLIO DE A À Z")

Et j'avais déjà posé une question. Mais celui ci + le tuto d'administration a l'air plus dans les formation que je recherche...

Merci pour ce travail
"

par team8.fr
(auteur de ce tuto - 15 novembre 2012)

" La dernière partie est en cours d'upload :)
À très vite ! "

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

" " Très bon Tuto...il va m'être d'une très grande utilité !!

Mais ou est donc le tuto sur PHP + bdd faisant suite à ce tuto ! :-)
Merci ! " "

par team8.fr
(auteur de ce tuto - 18 octobre 2012)

" Bonjour la suite arrive bientôt, Damien est en ce moment à l'hôpital la formation va prendre un peu de retard, il s'en excuse par avance ! "

par Kennah
(a acheté ce tuto - 18 octobre 2012)

" Bonjour! Super tuto, je ne suis qu'un débutant dans ce monde là et j'ai pu réussir sans problème.
A quand la partie 3 , pour avoir la galerie de photo ?

Merci beaucoup :D "

par team8.fr
(auteur de ce tuto - 15 octobre 2012)

" Salut funkyjeff, oui c'est prévu !
Je pourrai faire ces formations à part prochainement sous la forme de petits ateliers.
Au plaisir "

par funkyjeff
(n'a pas acheté ce tuto - 14 octobre 2012)

" bonjour

lorsque la 3ème partie sera prête, ferez vous un prix spécial pour l'ensemble ?

pouvez faire la partie "Installer une galerie références en JQUERY avec effet de transition Noir-Blanc / Couleur au rollover" en tuto a 1 ou 2 euro comme vous avez pu le faire pour "Animer en GIF votre Logo pour le Web" qui existe me semble t il dans cette partie 2 ? idem pour le systeme d'opacité au rollover ?

merci a vous @+ "

par team8.fr
(auteur de ce tuto - 13 octobre 2012)

" Merci pour vos commentaires ;)

La suite arrive bientôt : 3 chapitres / 4 sont achevés.
A bientôt "

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

" Très bon tuto, très bien expliqué comme toujour.
Pour la suite PHP/MYSQL avez-vous une date de prévue?
Merci D'avance ".. "

par isaytooa voté :
(a acheté ce tuto - 10 octobre 2012)

" Pour moi c'est parfait... Faut un peu d'entrainement pour retenir quelques principes.
Toutefois il faut connaître un minimum l'HTML/CSS sinon on risque de se perdre rapidement dans les balises. vivement la suite... "

par team8.fr
(auteur de ce tuto - 28 septembre 2012)

" Bonjour sisisi, pas encore, il sera probablement disponible la semaine prochaine :)
Nous travaillons encore dessus !
A bientôt "

par sisisi
(a acheté ce tuto - 28 septembre 2012)

" Le tuto sur PHP + base de données faisant suite à ce tuto No 36037 est-il déjà en ligne ?

Merci pour la réponse à

chsimond@bluewin.ch "

par team8.fr
(auteur de ce tuto - 28 septembre 2012)

" Salut opommery, merci :-) la suite arrive très prochainement, nous travaillons encore sur les chapitres A+:) "

par opommery
(a acheté ce tuto - 26 septembre 2012)

" Un formateur qui maîtrise sont sujet, pédagogue à souhait, que du bonheur ! Comme Kaliman ^^

Vivement la suite ! ;) "

par team8.fr
(auteur de ce tuto - 26 septembre 2012)

" Salut kaliman, merci pour ton retour ! "

par kalimana voté :
(a acheté ce tuto - 25 septembre 2012)

" Bon ben comme pour les autres tutos de team8.fr : c'est un très bon tuto !
Presque 3 heures de code et d'intégration aurait pu être lassant mais là c'est passer tout seul et en plus on apprend toujours des petits trucs qui facilitent le travail.
Et en plus le résultat est beau ^^ !

Vivement la suite ! "

 

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 CS6, HTML, CSS 3 d’une durée de 2 heures 54 minutes a été acheté 402 fois et a reçu une note moyenne de 5/5.

Ce tuto a été publié le 23 septembre 2012 par team8.fr, formateur certifié par Tuto.com, ayant reçu une note moyenne de 4,7/5 pour l’ensemble de ses vidéos, dans la catégorie Tuto Dreamweaver Intégration.

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 !