[Tutoriel] Design et graphismes de site web

Pages: [1]

Sainior

  • Membre
  • 6362 posts
27 novembre 2010, 21:50
Hello all !

Aujourd'hui, sur un petit air de Crystal Castles, on va apprendre à faire un beau petit design pour un site web. Je vous conseille de tout faire au fur et à mesure pour bien comprendre, ne vous inquiétez pas, je pars du principe que vous n'y connaissez rien, donc ce sera détaillé :) Ready ?

Sommaire :

-Matériel requis
-Mise en place & explications
-Le fond
-Header & Footer
-Le(s) menu(s)
-Les news
-Le mot de la fin
-Annexes


Matériel Requis :

J'utiliserai la version portable d'Adobe Photoshop CS5 pour ce tutoriel. Les boutons et fonctions décrits et expliqués seront donc uniquement disponibles sur ce logiciel. Il vous faudra également le logo ou la mascotte de votre site web. On va aussi utiliser le xHTML couplé au CSS, pour avoir un beau rendu qui soit moins lourd, plutôt qu'avec des centaines d'images inutiles. Téléchargez donc Notepad++ si vous ne l'avez pas.



Mise en place et explications :

Okay, alors, pour information, ce cours ne partira pas dans des détails très profonds au niveau du CSS et du HTML. Je considère que vous avez les bases. Si ce n'est pas le cas, pas d'inquiétude, je mettrai des commentaires suffisamment explicites pour que vous compreniez.

Ouvrez votre Notepad++. Réglez le langage sur "HTML" (onglet situé en haut de la fenêtre). Placez dans ce nouveau fichier la banalité suivante :

Code: [Sélectionner]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
   <head>
       <title>Titre du site</title> <!-- C'est ce qu'affichera le navigateur dans l'onglet -->
       <link rel="stylesheet" media="screen" type="text/css" title="Mon design" href="design.css" />
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   </head>
   <body>
<!-- On inscrira ici le contenu de votre site -->
   </body>
</html>

Les commentaires sont inscrits entre <!-- et -->. Une fois copier/coller, vous êtes prêt à travailler dans ce fichier. Mettez-y votre contenu minimum, je ne vous ferez pas la liste des balises existantes, ni des explications approfondies (si vous n'y connaissez vraiment rien de rien, je vous conseille de lire ceci). Pour l'exemple, je vais mettre ce qui suit :

Code: [Sélectionner]
<body>
      <h1>Exemple du tutoriel de webdesign</h1>
     
        <p>Bienvenue dans ce super tutoriel !</p>
</body>
Ensuite, créez un nouveau document, langage "CSS". C'est dans ce document qu'on va faire le design, pour rappel.
 

EDIT : Je reprends le cours d'une différente manière, étant donné que je n'avais plus le temps de le terminer.
« Modifié: 28 décembre 2010, 15:46 par Sainior »

Max

  • Membre
  • 12928 posts
27 novembre 2010, 23:08
Oui, c'est pas mal.
Sa ne joue pas trop dans la complexité, mais c'est bon a savoir!
Sa vise une autre catégorie de personne et ca c'est cool

édit: tu peut le mettre dans la bibliothèque partie tutos de trash :boogyfr:
je suis sur iPod et c'est pas très pratique :you:
« Modifié: 27 novembre 2010, 23:09 par Max 68 »

Weby

  • Invité
27 novembre 2010, 23:18
Plus un fond est léger, meilleur sera ton référencement, et plus rapide sera le chargement de ta page, tu sauras.


Ensuite, avoir une hauteur fixe pour un site web, ça craint. Tu fais quoi de tous les netbooks qui ont une résolution < 1024x768 ? De plus, la résolution la plus utilisée encore actuellement (et je le déplore), c'est effectivement le 1024x768. Mais pense bien qu'il y a les bords de fenêtre, les scrollbar, etc etc. La largeur de ton site ne devrait pas dépasser 950px, ou alors faire un site à largeur dynamique, mais pour ça, ton fond craint.

La seule application de ton fond, c'est éventuellement un popup de pub, qui lui aura une largeur/hauteur fixe, mais que de toute façon on s'en fout, parce que tout le monde bloque et/ou ferme dans la seconde...

Mise à part ça, c'est une bonne idée.

Sainior

  • Membre
  • 6362 posts
27 novembre 2010, 23:25
Citation de: Webig Brother le 27 novembre 2010, 23:18
Ensuite, avoir une hauteur fixe pour un site web, ça craint. Tu fais quoi de tous les netbooks qui ont une résolution < 1024x768 ? De plus, la résolution la plus utilisée encore actuellement (et je le déplore), c'est effectivement le 1024x768. Mais pense bien qu'il y a les bords de fenêtre, les scrollbar, etc etc. La largeur de ton site ne devrait pas dépasser 950px, ou alors faire un site à largeur dynamique, mais pour ça, ton fond craint.

Okay, mais il faut bien je prenne une largeur et une hauteur pour faire le design, non ? C'est parce que le 1024*768 est le plus utilisé que je l'ai pris pour le tuto'. Après, je ne sais pas faire un site à largeur dynamique, il faudra que je vois ça.

EDIT : ce tuto n'est là que pour apprendre les bases du design ; après, libre à vous de modifier ce que vous voulez.
« Modifié: 27 novembre 2010, 23:28 par Sainior »

Weby

  • Invité
27 novembre 2010, 23:46
Perso, j'utilise rarement une image en background, mais si tu veux en utiliser une, fais-le du style pokemonespace.com, c'est magnifique je trouve, et c'est très "mode".

Largeur maximale, comme j'ai dit: 950px pour du 1024x768, et pour une bannière du genre pokemon-espace, hauteur max, 500px.

Sinon, rien ne t'empêche de faire un simple dégradé léger en hauteur, image de 1x500px largement suffisante :)

-S@M-

  • Membre
  • 5367 posts
30 novembre 2010, 17:09
Sinon un ptit truc qui marche bien, un dégradé radial non centré dans des tons ressemblants en 750 x 750 et tu double la taille de la bg image (sur un dégradé ca se voit pas) et comme bg color tu met la deuxième couleur du dégradé.

LiguaTreeX

  • Membre
  • 1357 posts
29 décembre 2010, 17:45
Spoiler
Citation de: Sainior le 27 novembre 2010, 21:50
Hello all !

Aujourd'hui, sur un petit air de Crystal Castles, on va apprendre à faire un beau petit design pour un site web. Je vous conseille de tout faire au fur et à mesure pour bien comprendre, ne vous inquiétez pas, je pars du principe que vous n'y connaissez rien, donc ce sera détaillé :) Ready ?

Sommaire :

-Matériel requis
-Mise en place & explications
-Le fond

-Header & Footer
-Le(s) menu(s)
-Les news
-Le mot de la fin
-Annexes


Matériel Requis :

J'utiliserai la version portable d'Adobe Photoshop CS5 pour ce tutoriel. Les boutons et fonctions décrits et expliqués seront donc uniquement disponibles sur ce logiciel. Il vous faudra également le logo ou la mascotte de votre site web. On va aussi utiliser le xHTML couplé au CSS, pour avoir un beau rendu qui soit moins lourd, plutôt qu'avec des centaines d'images inutiles. Téléchargez donc Notepad++ si vous ne l'avez pas.



Mise en place et explications :

Okay, alors, pour information, ce cours ne partira pas dans des détails très profonds au niveau du CSS et du HTML. Je considère que vous avez les bases. Si ce n'est pas le cas, pas d'inquiétude, je mettrai des commentaires suffisamment explicites pour que vous compreniez.

Ouvrez votre Notepad++. Réglez le langage sur "HTML" (onglet situé en haut de la fenêtre). Placez dans ce nouveau fichier la banalité suivante :

Code: [Sélectionner]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
   <head>
       <title>Titre du site</title> <!-- C'est ce qu'affichera le navigateur dans l'onglet -->
       <link rel="stylesheet" media="screen" type="text/css" title="Mon design" href="design.css" />
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   </head>
   <body>
<!-- On inscrira ici le contenu de votre site -->
   </body>
</html>

Les commentaires sont inscrits entre <!-- et -->. Une fois copier/coller, vous êtes prêt à travailler dans ce fichier. Mettez-y votre contenu minimum, je ne vous ferez pas la liste des balises existantes, ni des explications approfondies (si vous n'y connaissez vraiment rien de rien, je vous conseille de lire ceci). Pour l'exemple, je vais mettre ce qui suit :

Code: [Sélectionner]
<body>
      <h1>Exemple du tutoriel de webdesign</h1>
     
        <p>Bienvenue dans ce super tutoriel !</p>
</body>
Ensuite, créez un nouveau document, langage "CSS". C'est dans ce document qu'on va faire le design, pour rappel.
 

EDIT : Je reprends le cours d'une différente manière, étant donné que je n'avais plus le temps de le terminer.
1. Arrête de modifier le poste initial
2. Ouais mais tu renvoi a un autre site :S
3. Sa serai bien que tu expliques le principe du SQL :)
PS: T'as pas parlé de la structure non-plus:


Bon je vais faire tous ça quand j'aurais le temps.
« Modifié: 29 décembre 2010, 18:07 par Man-X »

Sainior

  • Membre
  • 6362 posts
29 décembre 2010, 18:42
Le SQL n'a rien à voir, mdr. Quant au post initial, le premier jet que j'avais fait ne rendait pas bien, c'était pas ce que je voulais. Et je renvoie sur un autre site pour ceux qui ne connaissent rien du tout au xHTMl et au CSS. C'est horrible ce que M@téo21 fait dans son tuto', niveau design. Moi, c'est un cours de graphisme pas de prog'.
« Modifié: 29 décembre 2010, 18:44 par Sainior »

Weby

  • Invité
29 décembre 2010, 19:00
Disons qu'un site arborant TON design se verra rapidement "zappé" par l'utilisateur Weby.

Sainior

  • Membre
  • 6362 posts
29 décembre 2010, 19:20
C'est-à-dire ?

Weby

  • Invité
29 décembre 2010, 20:16
Bah c'était moche pour un site, mais je crois l'avoir déjà dit.

Sainior

  • Membre
  • 6362 posts
29 décembre 2010, 20:22
Oui, c'est aussi pour ça que je le refais.

Pages: [1]    En haut ↑