Dans ce tuto Dreamweaver nous allons aborder l'intégration d'un blog en HTML 5 et CSS 3, full responsive. Celui-ci est la suite du tutoriel Créer un portfolio full responsive en html5 et css3. Le responsive est une technique qui permet d'adapter un site internet sur plusieurs plateformes et écrans comme l'ordinateur, les tablettes ou encore smartphones. Nous étudierons ensemble plusieurs points :

  • Media Queries (css3)
  • Tansitions (css3)
  • Font "em" et width "%"
  • préfixes -moz-, -webkit-, ... (css3)
  • :after et :last-child (css)
  • balises blockquote, figure, hgroup, ... (html5)
  • placeholder, required (html5)

N'hésitez pas à noter et donner votre avis. Je reste à votre entière disposition pour vous aider à réaliser intégralement et avec un rendu professionnel ce tutoriel. Dreamweaver est utilisé dans cette formation mais vous êtes libre d'utiliser l'éditeur de code de votre choix, cela ne posera pas de soucis.

Jetez un oeil à ces autres tuto Dreamweaver CS5

Découper et intégrer une maquette de site webDécouper et intégrer une…
Cette formation est consacrée au découpage et à l'intégration…

Créer une playlist administrable pour le player audio HTML5Créer une playlist administrable…
Dans cette formation vidéo, vous allez apprendre à créer…

Créer et personnaliser un player audio HTML5 de A à ZCréer et personnaliser un…
Dans cette formation vidéo, vous allez apprendre à créer…

Créer un portfolio full responsive en HTML5 et CSS3Créer un portfolio full responsive…
Voici une formation pour apprendre à créer un portfolio full…

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…

Créer un site internet responsive webdesign en HTML5Créer un site internet responsive…
Dans ce tuto Dreamweaver et HTML5, de plus de 3h nous allons…

Dreamweaver CS5, Formation complèteDreamweaver CS5, Formation…
Formation Dreamweaver CS5 de 18h20, pour apprendre à créer…

Découper et intégrer une page d'accueil de site internetDécouper et intégrer une…
Ce tutoriel est la suite du tuto créer une page d'accueil de…

Cette formation contient 6 leçons en vidéo pour une durée totale de 2h16.
Voici le programme complet abordé au cours de cette formation :

  • Partie 100:26:33 
  • Partie 200:31:36 
  • Partie 300:11:26 
  • Partie 400:44:19 
  • Partie 500:20:46 
  • Partie 600:02:10 

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

Tutos bien expliqués est très simples merci

J'ai appris pas mal de choses avec ce formateur. Merci

Les choses deviennent beaucoup plus simples avec tes tuto

Très bon formateur! C'est vraiment un plaisir d'apprendre avec lui...Merci!

De très bonnes formations, bien réalisées, compréhensibles, que du bonheur.

Lire les autres témoignages

 

D'autres tuto de bpdesign

Créer un portfolio full responsive en HTML5 et CSS3Créer un portfolio full responsive en HTML5 et CSS3
Voici une formation pour apprendre à créer un portfolio full reponsive en HTML 5 et…

Créer un site internet responsive webdesign en HTML5Créer un site internet responsive webdesign en HTML5
Dans ce tuto Dreamweaver et HTML5, de plus de 3h nous allons voir comment réaliser un…

Effet 3d Relief sous PhotoshopEffet 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 portfolioDé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…

voir tous les tuto de bpdesign

Notes attribuées par les utilisateurs (6 votes)

Note moyenne des utilisateurs  

Votez pour ce tuto


 

Les avis / Questions des utilisateurs (13)

par AGZORa voté :
(a acheté ce tuto - 20 avril 2013)

" Bonjour,
Tuto fini, bien sympathique.
Mais comment poster les articles? c'est seulement un template? dois-t on refaire toute la page?
Et les commentaire ? C'est pas Dynamique je ne comprend pas... C'est un model quoi ? "

par MatthieuMomixa voté :
(a acheté ce tuto - 07 avril 2013)

" Comme pour les autres tuto qui accompagnent celui-ci, bon formateur, bonne compréhension, je suis novice mais j'arrive à suivre (pause, revenir 5 secondes en arrières, play).
J'ai pu réaliser mon site grâce à plusieurs tuto de bpdesign.
Merci :) "

par bpdesign
(auteur de ce tuto - 07 février 2013)

" Hello Inti, malheureusement je ne gère pas l'appellation des titres mais bien des descriptifs. Il vous aurait alors fallu lire le descriptif du tutoriel pour le savoir... "

par Intia voté :
(a acheté ce tuto - 05 février 2013)

" Il me semblait avoir acheté tout le tuto "Créer un blog full responsive en HTML5" et dans la partie 1 on mentionne qu'il aurait fallut acheter un autre tuto qui n'est pas audiblement définit. J'ai donc acheté en plus "Créer un site internet responsive webdesign en HTML5". Mais là aussi il est mentionné qu'il fallait acheter un autre turo sans le nommer. On parle de partie 1 et d'autres parties. Pas très très clair car dans les titres des tutos achetés il n'est pas mentionné partie 1, partie 2, etc. "

par bpdesign
(auteur de ce tuto - 20 janvier 2013)

" merci beaucoup pour ton retour ;) "

par raikal7a voté :
(a acheté ce tuto - 18 janvier 2013)

" une fois de plus merci pour ce tuto vraiment très clair "

par farnots
(n'a pas acheté ce tuto - 08 novembre 2012)

" Merci beaucoup pour ta réponse très rapide, et donc je vais me rabattre sur l'autre tuto ;) "

par bpdesign
(auteur de ce tuto - 08 novembre 2012)

" @farnots,

hello si tu veux apprendre les techniques, il te faut commencer par http://fr.tuto.com/dreamweaver/creer-un-site-internet-responsive-webdesign-en-html5-dreamweaver,33793.html

Ensuite nous apprenons à varier le responsive web design suivant différents types de pages. Dans cette formation nous abordons 2 styles de pages : blog et page article.

Tu peux suivre le tuto avec n'importe quel éditeur de texte ;) "

par farnots
(n'a pas acheté ce tuto - 08 novembre 2012)

" Bonjour j'ai plusieurs questions au sujet de ce tuto.
Tout d'abords quel est la différence entre celui ci et l'autre tuto sur le portfolio (http://fr.tuto.com/dreamweaver/creer-un-portfolio-full-responsive-en-html5-et-css3-dreamweaver-html-css,36672.html ) hormis sur le type de site sur lequel on travail. Quel est le plus complet, les techniques sont elles différents ?

Et sinon est il necessaire d'utiliser dreamweaver ou si un éditeur de code comme Sublime Text 2 suffit.

Je vous remercie par avance pour votre réponse. "

par lolo301187a voté :
(a acheté ce tuto - 01 novembre 2012)

" Excellent tutoriel ! Vraiement très intéressant et très bien expliqué.
Vivement la suite ! "

par lolodena voté :
(a acheté ce tuto - 30 octobre 2012)

" Un super tuto comme à l'accoutumée. Vivement la suite, j'ai hâte de dévorer le prochain opus ! "

par bpdesign
(auteur de ce tuto - 28 octobre 2012)

" Hello dans ce tutoriel on s'intéresse à la création html5/css3 du blog et surtout du rendu "responsive web design", c'est à dire la version statique. Nous n'abordons pas la version dynamique avec php. "

par doctor-pixel
(n'a pas acheté ce tuto - 27 octobre 2012)

" comment est géré le blog ??

entièrement par du code Php généré avec Dreamweaver ???? "

 

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

Ce tuto a été publié le 27 octobre 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 Intégration.

Tous les fichiers sources sont fournis avec cette formation. Ces derniers vous permettront de reproduire les manipulations expliquées dans cette formation.

Cette formation qui se présente sous la forme de plusieurs vidéos, 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 !