Tuto publié par Ce tuto dédié à l'intégration d'une maquette de blog web 2.0 est la suite du tuto : "Créer une Maquette de Blog Web 2.0". Nous partirons donc du PSD qui a été obtenu dans ce premier tuto, nous le découperons sous photoshop, puis nous l'intégrerons sous Dreamweaver en utilisant les langages HTML, CSS et jQuery.
Pendant près de 5h de formation en vidéo, vous allez abordez les points suivants :
1) Le découpage d'une maquette graphique réalisée sous Photoshop
- Apprendre à anticiper le codage
- Réaliser des sprites
- Savoir découper avec une hiérarchie précise
- Gestion de la fusion de calques et dossiers
- Savoir enregistrer une image avec des parties transparentes
2) Intégration HTML / CSS / jQuery
- Définir un ordre hiérarchique à notre travail
- Définir nos balises HTML dîtes "primaires" à notre design
- Coder des sprites en CSS
- Savoir intégrer du code Javascript
- Relier des pages css et jQuery à un index HTML
- Réaliser une info bulle en 3 temps (html / css / jQuery)
- Savoir coder une barre et un bouton de recherche
- Utilisation du framework 960 GS
Ce tuto est destiné à un public intermédiaire, ayant déjà quelques bases sur Photoshop et Dreamweaver. Les fichiers sources de ce tuto sont fournies, vous pourrez donc aisément suivre et reproduire les manipulations montrées par le formateur. Si vous souhaitez voir le résultat final que vous obtiendrez, visitez cette version du blog en ligne.
Si vous avez des questions, n'hésitez pas à utiliser l'onglet prévu à cet effet. Bonne formation !
Jetez un oeil à ces autres tuto Photoshop CS5, Dreamweaver CS5
Unifier la couleur des cheveux…
Dans ce tuto Photoshop gratuit vous verrez comment harmoniser…
Effet pluvieux
Apprenez à créer un effet pluvieux réaliste, dans ce tuto…
Fluidité : Espace disque…
Dans ce tuto Photoshop gratuit, vous découvrirez comment contourner…
Colorisation manga de A à…
Dans ce tuto Photoshop CS5, vous allez apprendre à coloriser…
Détourer une photo complexe…
Dans ce tuto Photoshop CS5, je vous propose de détourer un…
Créer une maquette de site…
Dans ce tuto Photoshop vous allez pourvoir apprendre et comprendre…
Découper et intégrer une…
Dans cette seconde et dernière partie du tutoriel "Créer une…
Les 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 5 heures 5 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
Créer une Maquette de Blog web 2.0
Apprenez à créer de A à Z une maquette de blog Web 2.0 dans ce tuto Photoshop! Dans…
Découper et intégrer une maquette de site internet web 2.0
Dans cette seconde et dernière partie du tutoriel "Créer une maquette de site internet…
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 texte
Dans ce tuto Photoshop CS5 vous allez apprendre à réaliser un effet typographique,…
Notes attribuées par les utilisateurs (3 votes)
Les avis / Questions des utilisateurs (26)
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 5 heures 5 minutes a été acheté 343 fois et a reçu une note moyenne de 5/5.
Ce tuto a été publié le 15 février 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 Export.
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.
Choisissez parmi 32356 tuto classés dans nos 237 logiciels ou langages informatiques.
(a acheté ce tuto - 26 novembre 2011)
" J'avais peur de me lancer dans une telle entreprise. Cette vidéo me rassure et je vais bientôt commencer à réaliser un site .
Merci à l'auteur .
" tut tut tut " ;-) "
(a acheté ce tuto - 14 novembre 2011)
" Ok merci beaucoup, je vais tester votre solution. "
(auteur de ce tuto - 14 novembre 2011)
" Alors j'ai regardé pour ton problème c'est au niveau de la <div class="bordureInterne"> que ça coince. Dans mon thème j'avais prévu une hauteur définie et du coup non modifiable.
Par contre si tu veux modifier cela il faut que tu découpe le fond en 3 parties:
Partie 1 = "haut" (copie le haut du fond sur 5-8px de haut)
Partie 2 = "centre" (copie le centre sur 1-3px de haut)
Partie 3 = "bas" (copie le bas comme le haut)
Et après on pourrait imaginer:
côté HTML:
------------------
<div class="grid_9 haut"></div>
<div class="grid_9 centre"></div>
<div class="grid_9 haut"></div>
côté CSS:
--------------
.haut {
height: 5px; (si c'est 5px de haut bien entendu)
backgroun:url(chemin image) no-repeat;
}
.centre {
height:auto;
backgroun:url(chemin image) repeat-y;
}
.bas {
height: 5px; (si c'est 5px de haut bien entendu)
backgroun:url(chemin image) no-repeat;
}
-----------
Attention de bien enlever le height de :
.article {
border: 1px solid #CCCCCC;
height: 196px; ----> à enlever
}
Voilà je peux pas faire plus pour le moment. Si tu as encore des soucis contacte moi via mon site internet. "
(auteur de ce tuto - 13 novembre 2011)
" Hello cocolabombe1,
je regarde ça ce soir promis ;) "
(a acheté ce tuto - 12 novembre 2011)
" Bonjour, super tutoriel mais j’essaie d'avoir un height (article) extensible au lieu de les fixé comme c'est le cas et je n'y arrive pas.
Car si le texte est plus grand que les 340px fixé, le cadre ne coïncide plus dedans.
merci "
(a acheté ce tuto - 12 mai 2011)
" c vraimment genial et ca ma vraiment aider mais je ne comprends pas pk la video elle s'arrete au milieu du tuto "
(n'a pas acheté ce tuto - 13 mars 2011)
" Félicitations et merci pour vos tutos, je compte acheter toute votre collection tellement j'en rafole ^^
Vos maquettes sont splendides et vos tutos extrement clairs... J'adore ! "
(auteur de ce tuto - 26 février 2011)
" Bonjour frk74,
je veux bien faire quelques exceptions à la règle, mais sachez que le psd est disponible dans la première partie. Je ne veux pas handicaper votre apprentissage et c'est donc pour la raison que je vous envoie le psd.
Amicalement, "
(a acheté ce tuto - 25 février 2011)
" Bonjour ,
J'ai acheté le Tuto , trés clair, mais dans les source j'ai pas le PSD pour suivre en même temps que toi le slice des éléments .
Est-ce que tu peux me l'envoyer .
Mon email : remplacer at par @
f,ribeau at gmail.com
D'avance merci
"
(auteur de ce tuto - 23 février 2011)
" Salut, pas moi mais j'ai eu vent il y a de cela 1 mois et demi sur FB d'un contributeur qui voulais prendre mon tuto en exemple pour une formation wordpress ;) "
(a acheté ce tuto - 23 février 2011)
" Hello est ce que tu as prévus de nous montrer comment integrer ce theme pour wordpress par exemple ? qu'on puisse l'utiliser facilement ? ^^ merciiiii "
(a acheté ce tuto - 22 février 2011)
" Bonjour,
Cela aurait été sympa de pouvoir retrouvé le .psd sur lequel tu réalises la découpe afin que l'on puisse s'exercé à cette manipulation.
Sinon, le partie intégration est intéressante et permet une très bonne approche même si quelques petites erreurs se sont glissées çà et là mais rien de bien grave. "
(auteur de ce tuto - 20 février 2011)
" Bonjour,
je vous invite tous à rejoindre le topic sur le forum:
http://fr.tuto.com/forums/web/help-tuto-blog-web-2-0-aide-a-la-creation,t713.html "
(a acheté ce tuto - 19 février 2011)
" Salut a toi BPDesign, et encore merci pour ce tuto!
J'ai une question technique sur le codage, mais je sais pas si c'est le bon endroit pour cela... "
(auteur de ce tuto - 19 février 2011)
" Bonsoir dragoneffect, tout à fait ;) "
(a acheté ce tuto - 19 février 2011)
" Ce tuto est compatible avec les logiciels CS4 ? "
(n'a pas acheté ce tuto - 17 février 2011)
" Chrome "
(auteur de ce tuto - 16 février 2011)
" Bug sous quel navigateur? "
(n'a pas acheté ce tuto - 16 février 2011)
" Pas mal de bug sur la démo , c'est dommage ^^ "
(n'a pas acheté ce tuto - 16 février 2011)
" Merci bpdesign pour ces infos :) "
(a acheté ce tuto - 15 février 2011)
" Yessssssssssssss !!!!!
enfin le tuto !! ;o)
je m'y mes ce week end !
Merci BP Design
Karine "
(auteur de ce tuto - 15 février 2011)
" Bonsoir Poki, pour pouvoir administrer votre blog il vous faut faire une dernière manipulation: le PHP. En effet, c'est un peu plus complexe et cela demande des notions qui ne sont pas abordées dans le tuto. Cependant un des membres voulait le passer en wordpress et comptait en faire un tuto aussi.
Après il existe sur la plate-forme des contributeurs qui proposent ce genres de techniques (Grafikart / simpledev...). Je vous conseille de voir autour de vous pour choisir la formation la plus adaptée à vos besoins.
Amicalement "
(n'a pas acheté ce tuto - 15 février 2011)
" Bonsoir, j'ai juste une question concernant ce tuto qui me parait très très très intéressant ; est-il possible, lorsque le blog est terminé, de l'administrer simplement ou faut-il avoir des notions de base ? (Je souhaiterai proposer une solution alternative au wordpress à mes clients, mais il me faut la même facilité d'alimentation du blog par la suite.)
Merci d'avance pour la réponse et merci tout court pour ce tuto que j'acheterai surement bientôt ! "
(a acheté ce tuto - 15 février 2011)
" Ahh je l'attendais avec beaucoup d'impatience celui-là ! De quoi m'occuper pour ce week-end =].
Merci beaucoup ! "
(auteur de ce tuto - 15 février 2011)
" voilà pour la démo online: http://www.bp-design.fr/tutoblog/index.html "
(n'a pas acheté ce tuto - 15 février 2011)
" AAh enfin (l) :D ! "