Dans ce tuto Dreamweaver et HTML5, de plus de 3h nous allons voir comment réaliser un site internet en responsive webdesign. Le responsive webdesign permet au site internet d'être correctement visualiser sur différents supports mobiles comme l'iPhone ou l'iPad ou tout autre type d'écran. À l'aide des media queries nous transformeront littéralement les versions "smartphones" du site internet pour adapter de la meilleure des façons l'utilisation finale de l'internaute.
Nous allons aussi nous efforcer de créer la structure du site en HTML5 valide W3C pour un projet "tourné vers l'avenir" et "dans l'air du temps".
Les points suivant seront développés :
- HTML5 (header, nav, article, section, footer, hgroup)
- CSS2 & CSS3
- Image resizing (propriété box-sizing en CSS3)
- Appliquer une image en background cover (background-size en CSS3)
- Réaliser une transition de couleur sur du texte (transition en CSS3)
- Réaliser une partie contact avec vérification de champs (placeholder, required,... en HTML5)
- Les médias queries (screen, min et max-width)
- Les polices texte en em (et non pixel)
- Les tailles en pourcentage (%)
- Créer un menu en select pour les versions smartphones (jQuery)
Ce tutoriel demande un niveau intermédiaire en HTML et CSS pour suivre sans encombres celui-ci. Les fichiers sources sont fournis.
Jetez un oeil à ces autres tuto Dreamweaver CS5
Découper et intégrer une…
Cette formation est consacrée au découpage et à l'intégration…
Créer une playlist administrable…
Dans cette formation vidéo, vous allez apprendre à créer…
Créer et personnaliser un…
Dans cette formation vidéo, vous allez apprendre à créer…
Créer un blog full responsive…
Dans ce tuto Dreamweaver nous allons aborder l'intégration…
Découper et intégrer une…
Dans cette seconde et dernière partie du tutoriel "Créer une…
Dreamweaver CS5, Formation…
Formation Dreamweaver CS5 de 18h20, pour apprendre à créer…
Découper et intégrer une…
Ce tutoriel est la suite du tuto créer une page d'accueil de…
Découper et intégrer une…
Ce tuto dédié à l'intégration d'une maquette de blog web…
Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto Dreamweaver CS5 de 3 heures 12 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
Effet 3d Relief sous Photoshop
Dans ce petit tuto Photoshop CS5 gratuit, en vidéo vous allez apprendre rapidement à…
Découper et intégrer une maquette complète de portfolio
Dans ce tuto Photoshop de plus de 4H30, en vidéo, vous allez apprendre à découper…
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…
Notes attribuées par les utilisateurs (26 votes)
Les avis / Questions des utilisateurs (59)
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 d’une durée de 3 heures 12 minutes a été acheté 604 fois et a reçu une note moyenne de 5/5.
Ce tuto a été publié le 30 juillet 2012 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 Dreamweaver 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 - 25 avril 2013)
" Raa je suis très déçu ! "
(a acheté ce tuto - 25 avril 2013)
" Bonjour, le tuto était super bien parti jusqu'au début de l'interface partie 2 le fait d'avoir sauter la partie menu slide tout ...... je suis perdu, sa ma cassé mon truc je suis bloqué, dégouté !!!!! oui je suis débutant je suit vraiment les tutos à la lettre donc même en prenant ton index impossible de récupérer juste le code qu'il me faut ! en tout que tu explique vraiment bien ! "
(a acheté ce tuto - 19 avril 2013)
" Salut Benoit !
C'est vraiment dommage que tu le prennes comme ça.
J'ai jamais dit que tu étais un imbécile, juste surpris que ton tuto annonce la création d'un site, et que je me retrouve seulement a créer un index.
Nan mais c’est sympa. Le Responsive est Super bien expliqué. C'est l'important.
Mais wtf quand même. :p
Cordialement. "
(a acheté ce tuto - 15 avril 2013)
" Tuto très bien expliqué, je n'avais jamais touché au code et je m'en suis sorti comme un chef merci! "
(auteur de ce tuto - 07 avril 2013)
" wow merci MatthieuMomix, très sympa ce retour! "
(a acheté ce tuto - 07 avril 2013)
" Etant un novice en html5 & CSS, j'ai pu réaliser mon site internet "presque" facilement :)
J'ai du me creuser la tête pour le faire à ma façon, mais ce tuto (et les autres qui le suivent) sont réellement très intéressant, complet, et instructif !
C'est sur que dès fois "google est mon ami" sur certaines chose que je comprenais pas, mais je suis novice :)
Je le conseil vivement, pour apprendre les bases (et même plus) sur le HTML5 & CSS. "
(auteur de ce tuto - 04 avril 2013)
" @severine, Non simplement respecter les balises HTML5 pour que tout soit correctement incorporé et détecté.
Cordialement, "
(a acheté ce tuto - 04 avril 2013)
" super, merci. Y a-t-il quelque chose à savoir concernant l'intégration de vidéos ou de gif animés dans ces formats là ? "
(auteur de ce tuto - 03 avril 2013)
" Hello AGZOR,
je me permets de te dire que je comprends pas ta réaction. Moi aussi j'ai envie de dire WTF quand dans mon descriptif il est marqué:
"Ce tutoriel demande un niveau intermédiaire en HTML et CSS pour suivre sans encombres celui-ci"
Sinon pour les réponses car je suis pas un imbécile :
Webkit = préfixe pour les propriétés CSS qui s'appliquent aux navigateurs Safari et Chrome.
Reset CSS = Permet d'annuler toutes mise en forme par défaut d'un navigateur comme IE ou autre qui pourrait rajouter de base à une page internet une marge, etc...
Cordialement, "
(a acheté ce tuto - 03 avril 2013)
" Va trop vite, n'explique pas la plus part des actions menées. Pourquoi un Reset Css? qu'est ce qu'un webkit? wtf ? C'est un tuto ou un atelier de taff?
Cordialement. "
(a acheté ce tuto - 23 mars 2013)
" Super tuto! Très précis, très clair, rès facile à suivre.
merci !
;) "
(a acheté ce tuto - 27 février 2013)
" salut
c'est bon j'ai trouvé.
je ne sais pas si c'est LA solution mais j'ai resizer le cover de 50% en moins en le nomment différemment et je l'ai écrit dans les medias quiery, dans le html.
voilà
a+ "
(a acheté ce tuto - 27 février 2013)
" bonjour,
lorsque je regarde l'exercice sur iphone et ipad, mon background n'apparait pas.
par contre sur le site mattkersley ca fonctionne bien.
t'aurais une solution pour moi ?
merci,
super tuto sinon ;) "
(a acheté ce tuto - 16 février 2013)
" Super tuto, ai appris beaucoup de choses, mais aurais aimé avoir plus d'infos sur la manière dont ll calcul ses mesures. Merci "
(auteur de ce tuto - 10 février 2013)
" Yes! À toi après d'être plus précis suivant tes objectifs. Par exemple, quand un client veut figurer sur de la tablette tu vas focaliser des dimensions bien définis d'Ipad (rétina ou non), Samsung et Nexus. "
(a acheté ce tuto - 10 février 2013)
" Parfait pour appréhender l'HTML 5 et aux media Queries ;-)
Juste une petite question : Quand je m'amuse à "resizer" ma fenêtre je vois bien les changements de design mais ne faut-il pas être plus carré sur les max et min-width pour s’éviter de se retrouver avec le design sans media queries ???
exemple si ta fenêtre fait entre 496px et 767px !
merci pour tout.
Seb "
(a acheté ce tuto - 24 janvier 2013)
" Parfait, très bien expliqué !
Merci beaucoup pour ce tuto. "
(auteur de ce tuto - 17 janvier 2013)
" Hello BeautifulWeb, merci pour ton retour. En effet il y a surement mieux à faire (comme toujours) mais si le prix vous gène ou la méthode d'apprentissage n'est pas adaptée je vous suggère en effet les livres.
Amicalement, "
(n'a pas acheté ce tuto - 17 janvier 2013)
" Tout de même, quand on pense que pour 16 €, on achète normalement un bouquin sur lequel un rédacteur aura passé plusieurs mois à vérifier chaque point, ce tutoriel est un peu fait à la va-vite !
Plutôt que de parler de "vieux navigateurs" donnez-nous plutôt les versions ! Idem pour les propriétés des balises. Dire que c'est "super bien", ça ne nous avance pas beaucoup ! Et c'est comme ça tout au long du tutoriel !
Vous pourriez notamment couper les passage consacrés à la recherche de coquilles (dribble) ou ceux à taper du code. On pourrait facilement gagner une heure au visionnage.
Bref, de la pédagogie ! "
(a acheté ce tuto - 16 janvier 2013)
" Superbe première partie ! Rien à dire ! De très bonne explication, que du bon ! "
(a acheté ce tuto - 11 janvier 2013)
" un régal... tellement limpide très bonne méthodologie "
(auteur de ce tuto - 07 janvier 2013)
" Hello il te faut simplement ajouter la meta suivante dans ta balise <head> :
meta charset="utf-8" name="viewport" content="width=device-width; initial-scale=1.0"
si tu y arrives pas, regarde mon commentaire du 24/08/12,
amicalement, "
(a acheté ce tuto - 07 janvier 2013)
" c'est bien comme Tuto mais ça n'a pas marché pareil pour moi la liste de selection pour les menus des smartphones "
(a acheté ce tuto - 28 décembre 2012)
" Superbe présentation, j'ai hâte de voir la suite.
Merci. Bonne année 2013 "
(a acheté ce tuto - 13 novembre 2012)
" Très clair, même si parfois un peu rapide à la saisie. "
(a acheté ce tuto - 10 novembre 2012)
" Merci merci merci pour la disponibilité , et la gentilesse . Bpdesign à pris prend le temps de repondre de manière utlra complete par emai à un stade ou j'était resté bloqué dans le tuto . Vraiment utlra pro et disponible . Formateur plus qu'a recommander ! Encore Bravo et merci ! "
(auteur de ce tuto - 06 novembre 2012)
" @berniblue
En effet il s'adresse à des niveaux "intermédiaires" comme écrit dans le descriptif de la fiche du tuto : "Ce tutoriel demande un niveau intermédiaire en HTML et CSS pour suivre sans encombres celui-ci.".
Sinon pour ton problème de bloc, je t'invite à m'envoyer ton fichier en .zip pour que je puisse l'examiner et t'aider à avancer à l'adresse contact[at]bp-design.fr ( [at] = @).
Amicalement, "
(a acheté ce tuto - 06 novembre 2012)
" intéressant et " stylé " le tuto me semblai fort attirant .
Je pense qu'il l'est mais uniquement pour utilisateur ayant déja une SOLIDE BASE , parceque la cadence est ULTRA RAPIDE .
On sent bien que bpdesign est en mode expert , mais le but d'un tuto est d'apprendre au autre , qui plus es , d'autre ayant payé pour une formation .
En deuxème partie de tuto , j'avais beau relire et relire encore , rien à faire , le " bloc blanc " n'apparaissait dans l'interface .
Alors oui , très beau tuto et agréable formateur, mais qui semble vouloir s'adressé à des utilisateurs qui en connaisse autant que lui ?!
Mais ceux là , je ne suis pas certain qu'ils s'ont besoin d'un tuto ... "
(auteur de ce tuto - 13 octobre 2012)
" @ oLord, hello en effet c'est bien CS5 mais tu peux suivre le tuto sans Dreamweaver c'est simplement mon éditeur de code comme Komodo ou autres. "
(n'a pas acheté ce tuto - 13 octobre 2012)
" ah ben c'est CS5 je l'ai sur la navbar de droite ...
Désolé "
(n'a pas acheté ce tuto - 13 octobre 2012)
" Bonjour,
qu'elle est la version de Dreamweaver utilisée pour le tuto ?
Merci "
(a acheté ce tuto - 11 octobre 2012)
" Rien à dire: parfait,
et ça fait toujours plaisir quand c'est une voix jeune
ça fait moins cours à l'école.. "
(a acheté ce tuto - 10 octobre 2012)
" Tres bien expliqué, Parfois un peu vite
J'ai bien aimé la chronologie de l'explication "
(a acheté ce tuto - 14 septembre 2012)
" vraiment cool ce tuto , parfait et efficace, on en apprend beaucoup ! "
(a acheté ce tuto - 04 septembre 2012)
" Super tuto! "
(a acheté ce tuto - 30 août 2012)
" Génial! Très bien expliqué, même moi qui ne connais rien en html5 j'arrive à suivre. "
(auteur de ce tuto - 29 août 2012)
" Hello PascalX, en effet et c'est ce que j'ai proposé à supermichel par exemple juste avant con commentaire :) "
(a acheté ce tuto - 28 août 2012)
" Bonjour,
Tuto sympathique, peut être ajouter une meta sous la balise title :
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Bonne continuation. "
(a acheté ce tuto - 24 août 2012)
" Simple, clair et agréable à suivre. Un bon aperçu des nouvelles balises HTML5 et propriétés CSS3. "
(a acheté ce tuto - 24 août 2012)
" Ok Super, merci pour ta réactivité... tout fonctionne donc je peux maintenant te dire que ton tuto est très bien et je ne suis plus du tout déçu ;o)
Amicalement. "
(auteur de ce tuto - 24 août 2012)
" @supermichel
j'ai la solution!
Dans index.html ajoute au tout début à la meta: meta charset="utf-8" ceci:
name="viewport" content="width=device-width; initial-scale=1.0"
ça devrait donner :
meta charset="utf-8" name="viewport" content="width=device-width; initial-scale=1.0"
Enjoy,
amicalement, "
(auteur de ce tuto - 24 août 2012)
" hello supermichel,
en effet sur certain smartphone la résolution est telle qu'en réalité certaine dépasses des 20". Voilà pourquoi vous devez voir le template comme sur un écran d'ordinateur.
Je me suis rendu compte de cela et je suis sur le chemin de la recherche pour apporter la modification et définir le template sur iphone et autre smartphone comme voulu.
Amicalement, "
(a acheté ce tuto - 24 août 2012)
" Bonjour, j'ai suivi le tuto, malheureusement en testant sur smartphone, rien ne change, or sur les simulateurs responsives (http://mattkersley.com/responsive/) tout semble fonctionner... donc j'avoue être assez déçu, j'ai essayé également sur smartphone l'adresse suivante: bp-design.fr/theme/fuel/index.html, le résultat est le même, ce n'est pas responsive. Suis-je le seul dans ce cas? "
(auteur de ce tuto - 19 août 2012)
" haha! @agon92
Non c'est bien le template Fuel ;-) "
(a acheté ce tuto - 19 août 2012)
" C'est "full" responsive ou "fuel" responsive !!!
A moins que tu carbures au responsive ;-))) "
(auteur de ce tuto - 18 août 2012)
" Bonjour arvacjo, la formation porte sur le responsive web design du coup nous nous concentrons là dessus. Pour le reste dans le menu c'est un exemple comme un autre donc non nous n'avons pas les autres pages dans le tutoriel.
Amicalement "
(a acheté ce tuto - 17 août 2012)
" après avoir fait un premier visionnage, il me semble que la liaisons des liens des différends menu n´est pas contemplé dans cette formations, existe t´il une 2º partis
Mercis
"
(a acheté ce tuto - 14 août 2012)
" super, oups erreur : vraiment SUPER. "
(auteur de ce tuto - 14 août 2012)
" Hello comme tu le dis si bien, je sort ma calculette 1 fois pour expliquer. Les autres fois c'est la même chose donc que faire? Rabâcher 10 fois dessus? Très difficile de satisfaire tout le monde sur le coup... "
(a acheté ce tuto - 14 août 2012)
" Sur la partie Html5 et CSS3 pas de souci, par contre je pense que tu devrais clairement expliquer comment tu trouves tes pourcentages. Tu nous balances des valeurs en pourcentage sans explication. Tu sors en tout est pour tout une fois ta calculatrice.
Il aurait fallu être plus didactique sur cette partie et nous dire que les mesures en pourcentage découlent de la simple opération suivante :
cible divisée par contexte égale résultat.
Exemple une div de 600px dans une div de 960px ça donne 600:960=0,625 soit 62.5%
En gros tu nous montre comment tu pêches un poisson et non comment pêcher un poisson.
Dommage, ça aurait vraiment été un super tutoriel. "
(a acheté ce tuto - 06 août 2012)
" Bon tuto, clair et bien expliqué.
A recommender pour débuter. "
(auteur de ce tuto - 03 août 2012)
" Merci et bonne continuation! ;) "
(a acheté ce tuto - 03 août 2012)
" Génial super explications, allez vite j'attaque la suite ;-) "
(auteur de ce tuto - 02 août 2012)
" Exactement d'où l'utilité des media queries ;) "
(a acheté ce tuto - 02 août 2012)
" Excellent tuto. Juste un truc, je l'ai fais sur un écran 22 pouces pour plus de confort, la vidéo du tuto est sur un macbook pro 15. Pendant longtemps je me suis demandé pourquoi dans le slide la date se collait à côté du titre. C'est une fois que j'ai attaqué la troisième partie sur les media queries que tout est rentré dans l'ordre sur le 22 pouce. "
(auteur de ce tuto - 02 août 2012)
" Hello, nous ne faisons pas de graphisme dans le tuto mais la largeur du conteneur principal est de 960 pixel de large de base. "
(a acheté ce tuto - 02 août 2012)
" Salut,
Je souhaiterai savoir si tu te base sur la grille 960 pour ce tut ?
Merci.
"
(a acheté ce tuto - 01 août 2012)
" AU TOP. Je recommande cette formation à tous ceux qui souhaite se former efficacement en webdesign ! "
(a acheté ce tuto - 01 août 2012)
" Cette formation est Excellente ! Bien entendu il faut connaitre un peu les bases. Mais en tout c'est exactement ce que je cherchais. Encore merci et vivement les prochains tutos ! "