Créer un site web : Découpage

Mercredi 04 Juin 2008 :: Tutoriel xHTML-CSS


Voici la première partie d'un long tutoriel consacré à la réalisation d'un site Web. Pour ce tutoriel j'ai utilisé le template créé par Manu36back à l'occasion du Template Contest.

Durée : 16min 20sec

Fichier :

Description : Dans ce tutoriel vidéo vous apprendrez découper une maquette (dans ce cas là un PSD) en vu de l'utiliser ensuite pour réaliser le codage du site. Au programme : Recadrage, Transformations diverses et enregistrement Web.

Vidéo : (137 Mo)

 

Vos commentaires

44

Laisser un commentaire...


julien
Vendredi 08 Août 2008 à 14:20:18
Félicitations pour ce super tuto je suis d'ailleurs étonné que tu n'ai pas plus de remerciement car tes tutoriaux sont d'excellente qualité bien au dessus de la plupart de ceux que l'ont peut trouver et en plus tout ca avec beaucoup de modestie.
Un énorme BRAVO
Vendredi 08 Août 2008 à 19:37:21
Dans le prochain tutoriels vous voulez que je commence directement le codage ou que je commence par expliquer les bases de l'HTML et du CSS ?
raph
Vendredi 08 Août 2008 à 19:37:28
Par le commencement,

Il est possible d'avoirs un tutoriel sur la création d'une page php
Vendredi 08 Août 2008 à 19:37:36
La création d'une page php suppose de bonne connaissance en HTML et en Algorithme donc ce n'est pas pour tout de suite car c'est assez complexe à expliquer...
Pouti
Vendredi 08 Août 2008 à 19:37:44
Salut Raton Laveur déjà merci pour tous ce que tu fais tu fait de belle chose enfin de magnifique tuto je les comprends direct en plus de sa vidéo non c'est le site qui propose des vidéo gratuit chapo j'espère que le blog aura long vie.

Moi j'aimerais que tu commence par le codage l'explication, enfin je veut dire après avoir fait le design mettre en place le css. Car c'est dans sa que je bloque a l'heure actuel vivement le prochaine tuto Merrrrrrrrci.
julg7
Vendredi 08 Août 2008 à 19:37:54
Beau travail ! Vivement le prochain
Sylv1
Vendredi 08 Août 2008 à 19:38:10
Tu peut expliquer le XHTML et le CSS en utilisant des exemples de codage Super ton premier tuto vidéo. Vivement les prochains.
julbut
Vendredi 08 Août 2008 à 19:38:59
C'est ce que je cherche depuis longtemps ... après le découpage comment mettre les éléments sur une page web !!
C'est génial le travail que tu as fait !
Commence par le commencement je pense enfin ... tu vois c'est toi le chef ;-)

Merci encore ... allez j'y retourne moi !
Pers0nne
Vendredi 08 Août 2008 à 19:39:07
Hey !

Franchement, top le tuto. Comme les autres d'avant
Vivement les prochains.

Bonne continuation.
Bye.
Guillaume
Vendredi 08 Août 2008 à 19:39:19
J'ai hâte de voir la suite car c'est le codage qui m'intéresse plutôt que le découpage photoshop. Mais bravo quand même pour cette très bonne vidéo.

Et puis au fait, comment fais tu Mr Raton Laveur pour afficher les titre des articles en fonction des catégories ( une enceinte pour la section musique, ton logo pour tes messages perso....). C'est quelque chose que je souhaite faire depuis longtemps mais j'ai jamais réussi. Merci !
Zfnix
Vendredi 08 Août 2008 à 19:39:26
Bonsoir,

Félicitation pour ce site et merci pour ces tuto très intéressant et clairement expliqués.

Bonne continuation..
Vendredi 08 Août 2008 à 19:39:34
@Guillaume : J'ai du rajouter un classe et une fonction à Dotclear. Je t'invite à me contacter par mail pour que je t'envois la méthode.
LeLoup
Vendredi 08 Août 2008 à 19:40:20
Je vais faire mon rabat-joie, mais bon, il faut bien hein, sinon c'est pas rigolo. Il y a donc quelques petits soucis avec ce template:

- Il n'est pas valide XHTML 1.0 Strict
lien

- La mise en page foire complètement avec IE6
Vendredi 08 Août 2008 à 19:40:40
Héhé, Manu a remodifié le code par la suite mais celui que je vais donner aux utilisateur est entièrement valide au W3C strict.
Pour IE6 j'ai abandonné depuis longtemps.. Si on doit se préoccuper des navigateur "fantomes" on ne s'en sort pas (même si IE6 a encore pas mal d'utilisateur)...
yanoo
Vendredi 08 Août 2008 à 19:46:16
tres bien fait tes tutos,chapeau tres belle realisation.Mais dans celui la sur les decoupes avec photoshop pourquoi ne pas utiliser l'outil tranche qui est fait pour ca?
Bonne continuation.
Vendredi 08 Août 2008 à 19:46:31
L'outil tranche ne permet pas de découper les images comme je le souhaite (peut être que je ne sais pas bien l'utiliser) avec des images de différents types avec certaines images nécessitant des transparences.
issaid
Vendredi 08 Août 2008 à 19:46:49
Bonjour,
je vous remercie beaucoup pour votre tuto, c'est bien expliquè (y);
aufait, je voulais demander comment proceder a la decoupe des rectangle avec un contour progressif, j'en ai trop sur une seule maquette, et aussi comment faire avec un background transparent, ca veut dire que le background de la page ne se cache pas, et reste visible avec une transparence
Merci
j'espere que je suis pas entrain de trop vous deborder
Cordialement Issam ^_^
Tom
Vendredi 08 Août 2008 à 19:47:07
Hello M'sieu Raton, pour un calque avec une forme dessus tu peu pixelliser avec un clic droit sur le calque mais les options de fusion ne serons pas aplati.

Merci pour ces tuto c'est très instructif même pour les non débutant !! :D

A bientot, Tom.
Mercredi 13 Août 2008 à 06:06:57
Oui, je suis du même avis que Julien cela fait peut-être peu de temps que je connais ton site mais tes tutoriaux sont U.L.T.R.A claire C'est le 3eme que je suis et jusque là je comprend tous vraiment Bravo !
Yo@n
Mercredi 13 Août 2008 à 12:08:04
Vraiment bravo pour la qualité de ce tuto, je vais recommander ton site aux personnes débutantes qui veulent tout apprendre depuis le début. Bonne continuation à toi.
tempo
Samedi 16 Août 2008 à 01:35:26
Un grand merci pour tous vos tutos.

C'est super clair !

Bravo et merci encore.

J'attends les prochains avec impatience.
biohazard01
Samedi 23 Août 2008 à 11:29:47
Merci beaucoup pour ce tuto, trés claire et bien expliqué. j'espere que tu continueras.
Lundi 25 Août 2008 à 17:43:17
Merci beaucoup pour ce tuto.
C'est clair et précis.
Bravo pour ce partage de savoir
Tenshu
Dimanche 31 Août 2008 à 23:51:19
Merci enormement pour ce tuto très très bien fait !
Dimanche 07 Septembre 2008 à 18:38:59
ce tuto est absolument génial merci
nocif
Vendredi 12 Septembre 2008 à 01:06:08
Comment dire ...
Ce tuto devrait etre partout car pour une personne qui cherche a decoupe un template il n y a rien de mieu.
j'ai passer des heures à lire des tutos mais en 1h passée ici j ai compris tout ce que j avais lu auparavant car sans la video je comprenais a moitier.

merci pour ce tuto qui est tres tres clair et qui explique vraiment tout.
bonne continuation
liline
Vendredi 12 Septembre 2008 à 23:21:50
Bravo et merci pour ton coup de pouce... tu m'enlèves une énorme épine du pied ^_^, de plus tu est très pédagogue; c'est captivant ce petit accent chant lol. bonne continuation.
Low'
Samedi 20 Septembre 2008 à 19:14:51
Merci beaucoup pour ce tuto, il est vraiment bien réalisé ! Moi qui n'y comprenais rien j'ai réussi à créer tout ce que je voulais ! Merci beaucoup !!
Jeudi 02 Octobre 2008 à 19:52:42
Un grand bravo pour ce tutoriel très bien fait.
Babou
Jeudi 02 Octobre 2008 à 20:10:05
Super tuto !! Ca marche aussi avec paint n'est-ce pas ?
Shin
Dimanche 05 Octobre 2008 à 14:22:37
Superbe.

De nombreux "trucs" a utiliser sans modération pour gagner de la place sur nos templates. Bien sur ca va être difficile d'apprendre la créativité par tuto mais bon on fera avec ce qu'on arrivera a creer xD.

Viiite je m'en vais dévorer le tuto de placement des éléments en codage xHTML/CSS =))
Leo
Dimanche 19 Octobre 2008 à 15:55:47
Première visite sur ce site et une seule chose à dire ... GENIAL Un grand merci Pour ce tuto complet et très bien expliqué CTRL+D sans hésiter je file regarder les autres merci
Dimanche 19 Octobre 2008 à 22:31:32
Je laisse un commentaire pour te remercier de ce tutoriel.
Je suis webmaster en herbe disons, je sais bien me debrouiller pour tout ce qui est php/html/css et javascript dernierement, mais le design n'est pas mon point fort. Ce que je travaille actuellement et je veux faire des designs web. Et grace a ton tuto j'ai une bonne vision de comment decouper mes elements que je cree.
De plus les elements d'optimisation que tu cites et explique sont vraiment interessant.
Une remarque plutot que d'utiliser une image de hauteur 1pixel pour le fond il aurait ete preferable de ne pas utiliser d'image mais simplement prendre le code couleur du fond et apres en css definir le fond de cette couleur non ?
Lundi 20 Octobre 2008 à 00:27:15
@luuna: Merci,
Pour ce que tu demande ça dépend des cas. Quand je sélectionne l'image de 1 px c'est pour l'effet d'ombre qui entoure le design donc je voulais avoir le blanc du contenu ET l'ombre sur les coté. Sinon, effectivement si tu as une couleur unie il faut mettre le code couleur (ce que je fais pour le fond du body).
Ben
Mardi 21 Octobre 2008 à 19:06:37
Merci à toi pour ton tuto !

A ton avis est-il possible de faire du boulot correct avec juste le version 5.5 de totoshop ?

++
Mardi 21 Octobre 2008 à 20:26:38
@Ben: Normalement oui
kiwi2
Mardi 21 Octobre 2008 à 23:23:16
Salut,
superbe le tuto !
simple question : comment fais-tu pour garder sur ton site le menu tout en haut avec BLOG / PORTFOLIO / RESSOURCES ... tout en navigant sur les pages ?
Mardi 21 Octobre 2008 à 23:31:45
C'est une div en position fixed.
kiwi2
Mardi 21 Octobre 2008 à 23:34:05
Rapide et efficace...
je te souhaite une bonne continuation
Dimanche 26 Octobre 2008 à 19:40:19
Salut !

Merci pour ce tutoriel ! j'ai longtemps cherché à savoir comment créer son propre design, maintenant je sais

( Et bing ! un lecteur de plus ^^ )
Samedi 15 Novembre 2008 à 18:18:11
Merci !

Grâce à toi, j'ai refais le design de mon site : lien
Lundi 17 Novembre 2008 à 16:35:04
Merci beaucoup ! c'est vraiment super bien expliqué, ça permet aux personnes pas très à l'aise avec le design de s'en sortir
mustw
Mardi 18 Novembre 2008 à 17:50:18
Superbe tutoriel ! Un grand merci à l'auteur.
Merci encore.
Mustw
Dorian
Jeudi 20 Novembre 2008 à 10:53:06
Excellente démonstration, ça démystifie la manipulations des outils, super pour un néophyte.

 

Ajouter un commentaire


Vous devez activer javascript.
Se souvenir de mes informations