\[Tutoriel\] Apprendre le web design

nicolasAR - 9 février 2011 à 00:20

Bonjour à tous.
En voyant le tutoriel non fini de Sainior sur le web-design, j'ai pris la décision d'en faire un.
Pour que ce tutoriel vous soit utile dans vôtre apprentissage des languages du web, il faut que vous partiez un peu du tutoriel grace aux bases que je vais vous donner.
A chaque fois, vous aurez plusieurs choix, à vous de tout mettre en place, afin que le mértie du design revienne à VOUS, et non pas à moi !
Vous noterez que ce tutoriel s'adresse aux personnes ayant déjà quelques conaissances (que j'approfondirais) dans le xHtml / html, et le css, et que nous ne parlerons en aucun cas du contenu de votre site et encore moins de contenu dynamique.
Dans ce tutoriel, je vous apprendrais aussi à utiliser les nouveaux outils qu'offrent les standars du web : le CSS3 et le html5, mais ce-ci ne sera qu'au dernier chapitre.

Tout d'abord, qu'est-ce que le html (.html)?
Le html (Hypertext Markup Language) est un language descriptif ou structural (au choix du client). C'est à dire qu'il ne modifie pas le contenu, mais il le structure.

Et le CSS (fichier : .css)?
Le CSS (cascad style sheets files), est quand a lui un format de présentation. C'est à dire que grace à la structure que vous aurez au préalablement créé, vous pourez la présenter (design).

Matériel requis :

Un cerveau.

Un ordinateur.

Un navigateur webs (voir plusieurs pour les tests de design)

Notepad ++ ( ici pour télécharger )

Du temps

Pourquoi vous conseille-je plusieurs navigateur web ?
Tout simplement par-ce que le CSS se gère au niveau du navigateur, donc selon les versions et les logiciels, les navigateurs les affichent différement. Surtout IE (internet explorer) qui, microsoft oblige, à toujours un train de retard par rapport aux standards du web.

Pourquoi Notepad ++ ?
Notepad ++ est un logiciel de traitement de texte, conçu pour les développeurs web. Biensûr, vous pouvez très bien utiliser Word, ou encore bloc note ! Mais Notepad++ à un avantage : il colorie le texte selon ce que vous écrivez et quel language vous écrivez!
Bref, je vous passe les détails, mais c'est un logiciel avec beaucoup de potentiel !

PREMIER CHAPITRE : Conception du site.

==> Première partie : Du html ...
->Par-ce qu'il faut bien un début
Etant donné que je considère que vous avez au moins les bases en xhtml / html, je ne vais pas vous redire ce que vous êtes censé savoir.
Toutes fois, pour suivre correctement ce chapitre et les chapitres suivants, vous devez savoir ce qu'est qu'un attribut & une balise, et vous conaissez déjà les doctypes.

Bref, ouvrez Notepad++ si ce n'est pas déjà fait.
Vous avez un nouvel onglet, prêt à être remplis ! Allez dans l'onglet ,, Langage " de la barre d'outils.
Choisissez H -> HTML.
Ainsi, votre code se coloriera tout seul lorsque vous écriverez ! Très pratique lorsque les documents font plus de 1000 lignes, et surtout beaucoup plus confortable à la lecture !

Ecrivez-y le doctype (déclaration du type de document) à la norme xHtml.

<!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>
					   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
				   </head>
				   <body>
				   </body>
				</html>

Ce n'est pas la première fois que vous rencontrez ce texte, donc je ne l'expliquerais pas.
Enregistrez ce fichier (Fichier -> enregistrer), mettez lui un nom, qu'importe. Veillez à ce que l'extension soit bien .html, sinon choisissez la dans la liste qui se présente à vous!
->écortiquons, décortiquons...
Maintenant, je vous donne rendez-vous sur l'acceuil du site de pokémon-trash. Nous allons le décortiquer.
Sur les cotés droite et gauche : deux menus. Sur la droite, des liens vers d'autres pages internes ou externes au site. Sur la gauche, d'autres liens, et un affichage du pokédexe. Ce sont deux blocs. Donc, deux blocs menus.
Entre ces deux blocs, nous avons un ensemble : les liens vers les minis-sites sur pokémon, les news, ext. C'est le bloc corps.
Au dessus de ces trois blocs, l'en-tête (header). Et tout en bas, le corpight : le pied-de-page (footer).

Si l'on schématise cela donnerait cela :

Sachez que presque tous les élèments (ou blocs) sont optionnels, sauf le corps, puisque c'est la que se trouve le contenu principal de la page !

->On se rappelle ses cours, et l'on commence à coder !
Nous allons donc mettre tout cela en code ! J'ai parlé de bloc, c'est exactement le cas en progammation ! Allez, rappellez vous, les deux types de balises : in-line et bloc !
(pour ceux qui ne savent pas : les in-lines se mettent entre des balises de type bloc !)
Il ya différentes balises blocs, mais pour le design, nous utilserons les balises blocs

. Elles n'affichent rien, ce qui est pratique, puisqu'elles sont donc invisibles !

Alors comptons, combien de blocs voullons nous mettre ? 1 pour l'header, 1 pour le footern, 1 pour le corps, 2 pour les menus, donc 5 blocs !
Alors c'est parti !

Si vous avez tout bien fait (pour parler français hum), vous aurez cela :

<!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>
					   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
				   </head>
				   <body>
						<div></div>
						<div></div>
						<div></div>
						<div></div>
						<div></div>
				   </body>
				</html>

Vous avez tout bon? C'est parfait !
(Rappel : lorsque l'on ouvre une balise, on la referme !)
Comme vous pouvez le constater, les balises sont toutes pareilles, on ne peut pas travailler dessus avec le css sans toutes les affecter !
C'est pour cela, que nous avons au choix deux attributs : les classe & les id. Les deux reviennent au même, à quelques détails prêts, mais ça c'est pour plus tard.
Nommez le premier

,, header ", le second ,, menu_l ", le troisième ,, corps ", le quatrième ,, menu_r ", le cinquième ,, footer ", à l'aide de l'attribut classe ou ID, comme vous voulez.
Au final, j'obtiens :

<!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>
					   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
				   </head>
				   <body>
						<div id="header"></div>
						<div id="menu_l"></div>
						<div id="corps"></div>
						<div id="menu_r"></div>
						<div id="footer"></div>
				   </body>
				</html>

Voila, nous sommes donc prêts à coder en css !
->Appliquer du css au html
Pour appliquer du css, vous avez plusieurs choix :
A une balise, dans l'header du fichier, ou depuis un autre fichier.
Pour ajouter du code à une balise, il suffit d'ajouter l'attribut ,, style " à la balise, toutes fois, la balise sera la seul à être affectée par ce que vous y écrirez ! C'est fortement déconseillé, mais parfois, cela peut être très utile !
Pour l'ajouter dans l'header il suffit d'écrire votre css entre les balise .
Pour la troisième, il faut ajouter la balise

==> Seconde partie : ... au CSS !
->Revoyons les bases...
Sur Notepad++, créez un nouveau fichier. Dans le menu language, choisissez CSS.
Schématiquement, un fichier CSS ressemble à ce-ci :


				balise1
				\{
					propriete: valeur;
					propriete2: valeur;
					ext...
				\}
				balise2
				\{
					propriete: valeur;
					propriete2: valeur;
					ext...
				\}
				balise3
				\{
					propriete: valeur;
					propriete2: valeur;
					ext...
				\}
				balise4
				\{
					propriete: valeur;
					propriete2: valeur;
					ext...
				\}

Nous verrons les propriétés css dans la partie suivante.
Pour attribuer du css à une balise, il suffit de notter le nom de la balise. N'oubliez pas que lorsque vous attribuer du css à une balise, toutes les balises du même nom seront concernées par le css écrit !
Par exemple, si je veux que toutes mes balises

soient toutes centrées j'écris :


				p
				\{
					text-align: center;
				\}

Si l'on veut appliquer un style à plusieurs balises, il suffit de séparer les noms des deux balises par une virgule:


				p, div
				\{
					color: red;
				\}

->Ca commence !
Pour dire : je veux que toutes les balises ayant pour attribut l'id ,, corps " soient centrées, il suffit de mettre le nom de l'id avec un dièse devant à la place du nom de balise.


				#corps
				\{
					text-align: center;
				\}

Pour dire : je veux que toutes les balises ayant pour attribut la classe ,, corps " soient centrées, il suffit de mettre le nom de la classe avec un point devant à la place du nom de balise.


				.corps
				\{
					text-align: center;
				\}

Il peut arriver aussi parfois que l'on veuille dire : Je veux que toutes les balises

situées à l'interieur d'une balise

soient en rouge, il suffit de mettre les noms des deux balises séparées par un espace.
Cela s'appelle l'imbrication. Sauf, que l'on lit le tout de droite à gauche autrement dit:


				div p
				\{
					color: red;
				\}

Si l'on avait mit p div, cela aurait donné : toutes les balises div situées à l'interieur d'une balise p.

Voila, ce fût le premier chapitre, si vous avez survécut, vous pouvez continuer, sinon n'hesitez pas à tout relire !
Nous allons donc maintenant commencer véritablement le design, puisque nous avons revu toutes les bases !
Pendant ce tutoriel, j'utiliserais photoshop CS4 portable, mais ce tutoriel étant juste à but de webdesign, je ne vous expliquerais en rien la création de mes images.
SECOND CHAPITRE : Création du site.
==> Première partie : Cahier de charges.
->éfinition. Un cahier des charges vise à définir simplement les " spécifications de base " d'un produit ou d'un service à réaliser.
Autrement dit : on y décrit tout le projet, qui en est le commanditeur, ext.
En informatique, notament dans le webmasterisme, le cahier de charge définit le design, les couleurs, et tout ce qui s'apporte au design!
->Création du CDC pour le design.
Notre but : nous devons créer le design du site d'une association défandant les droits des pokémons.
Thême du design : les pokémons.
Couleurs générales du design : le design devra être sobre, et relativement neutre. Toutes fois, il devra se rapporter aux pokémons.
Objectifs : réaliser un design simple et agréable à regarder.

Note : vous remarquerez que ce CDC n'a pas été rédigé comme un véritable CDC, il n'a donc aucune valeur juridique.
==> Seconde partie : Designons, designons...
->Ce que je vais faire. Pour ce design, je me baserais sur les pokémons électriques, notament les pré et post-évolutions de pikachu.
Je ferais une bannière en 950x200p. J'utiliserais le plan que nous avons fait plus haut. Je ferais un design fixe (taille fixée), et je vous inviterais à faire de même, car c'est plus simple à faire qu'un design extensible.
Si toutes-fois vous souhaitez faire un design extensible, je vous apprendrais à le faire dans les derniers chapitres.
Nous utiliserons les normes CSS2 et HTML4, je vous apprendrais le HTML5 et CSS3, plus tard !
->C'est le début !
Nous allons commencer par l'header. Pour cela, je vous demanderais de créer une image en 950x200 px. C'est important pour la suite.
Pour ma part je travaillerais avec cette image de ma création. Notez bien qu'elle est faite à l'ava-vite juste pour l'exemple du tutoriel !

Nous allons donc placer cet élément dans l'header. Pour cela deux options : soit l'intègrer à l'aide d'une balise ou bien grace au css.
Le but étant de vous apprendre le css, nous choisirons donc l'option 2.
Etant donné que j'ai choisi un attribut ID pour le repérage, je mettrais un dièse devant le nom de l'id, mais si vous avez choisi une classe, il suffit de mettre un point a la place du dièse.
Réfléchisons: Nous voulons que l'image soit dans l'élément header. Elle servira d'image de fond (propriété : background-image:url(lien vers votre image).


				#header
				\{
					background-image: url(header.png);
				\}

Or, si vous testez ce code, vous remarquerez que rien ne s'affiche. En réalité, si, sauf que vous ne le voyez pas, car le bloc ne contient rien. Pour parer ce problème, nous devons renseigner les dimmensions que nous voulons (ici, celles de l'image).
On utilisera pour ce fait, les propriétés width et height (respectivement longueur et hauteur).


				#header
				\{
					background-image: url(header.png);
					width: 950px;
					height: 200px;
				\}

SUITE A VENIR

nicolasAR - 9 février 2011 à 23:02

EDIT du 09/02/11 : mise en ligne du début du chapitre 2 + corrections au niveau du chapitre 1.

Max 68 - 9 février 2011 à 23:27

C'est cool, mais Ya le sdz qui fait la meme chose, essaye quelque chose d'inedit...

lVl477l-l13Ll - 10 février 2011 à 07:41

J'ai parcouru le tuto, c'est pas trop mal.

Par contre, quelques petites erreurs :

Par exemple, si je veux que toutes mes balises
soient toutes centrées j'écris :


				p
				\{
					text-align: center;
				\}

Petit emmêlage de pinceaux. :baffan:

Pour dire : je veux que toutes les balises ayant pour attribut l'id ,, corps " soient centrées, il suffit de mettre le nom de l'id avec un dièse devant à la place du nom de balise.

Ouh, malheureux !
L'attribut id sert à identifier de manière unique un élément dans la page.
Ne jamais donner le même id à plusieurs éléments.
Les classes, par contre, tu fais ce que tu veux ; tu peux même en attribuer plusieurs à une balise.

Mais sinon ouais, pourquoi tu t'emmerdes à réinventer la roue ? :hum:

Sainior - 10 février 2011 à 08:56

Je n'ai pas fini le mien par manque de temps (oui, toujours la même excuse :tibia ; en tout cas, je ne voulais absolument pas l'écrire comme ça. Le SdZ est spécialement fait pour ça, comme dit plus haut. Perso', je voulais taper dans l'esthétique, parce que le SdZ... enfin voilà quoi.

Mais bon, attendons que tu ais fini

nicolasAR - 10 février 2011 à 17:42

Merci pour vos encouragements, quand a la manière d'écriture, il est véridique que cela fait un peu ,, site du zéro ", mais je peux modifier a tout moment la manière dont je vais écrire...
@MAT : J'avoue que je devrais me relire un peu plus, je vais le faire avant de continuer. Quand à ,, inventer la roue " je ne vois pas de quoi tu veux parler :teci:

Max 68 - 10 février 2011 à 18:08

bref, notepad, c'est du caca

Go dreamweaver <3

Sainior - 10 février 2011 à 18:56

Nop, Notepad = win :haulas:

Max 68 - 10 février 2011 à 19:10

même adobe script est mieux :you:

Sainior - 10 février 2011 à 19:16

NotePad suffit amplement ; il colore ton code, t'indique quelles parenthèses/accolades/crochets vont avec quelles parenthèses/accolades/crochets, ainsi qu'un bon choix d'encodage ; plus quelques autres petites choses utiles, comme le remplacement automatique, par exemple.

T'as pas besoin de plus, normalement.

Max 68 - 10 février 2011 à 19:39

Dreamweaver>adobe script=notepad++>bloc-note

lVl477l-l13Ll - 11 février 2011 à 12:36

quand a la manière d'écriture, il est véridique que cela fait un peu ,, site du zéro ", mais je peux modifier a tout moment la manière dont je vais écrire...

On parlait du contenu, que n'importe qui peut retrouver sur le SDZ.

Quand à ,, inventer la roue " je ne vois pas de quoi tu veux parler :teci:

Voir ci-dessus ; tu fais un tuto sur le CSS alors que le SDZ et plein d'autres sites en proposent déjà de très complets.

bref, notepad, c'est du caca

Linking13 - 20 février 2011 à 23:31

Notepad++ c'est pour les gens qui veulent vraiment coder un site.

Ho! Ça sent le bon puriste! <3

Sinon, je ne vois pas non plus l'intérêt de ce tutoriel, puisqu'il en existe déjà un très complet sur le site du Zéro. Je ne dis pas que le tiens est moins complet, et l'intention est louable d'ailleurs, mais voilà... x)

Sasu - 21 février 2011 à 11:17

bref, notepad, c'est du caca

Go dreamweaver <3

Toi, t'es con.
Notepad++ c'est pour les gens qui veulent vraiment coder un site.
DreamWeaver c'est pour les flemmards qui se foutent du code obtenu tant que ça s'affiche à peu près bien.

J'ai déjà eu à déboguer du code produit par DW, c'est une horreur.

C'est pas parce que Dreamweaver c'est du WYSIWYG que c'est de la merde.
Ça peut grandement aider quand on débute. Perso j'ai les deux, mais je commence avec Notepad ++ puis je vérifie avec DW.

Max 68 - 21 février 2011 à 11:20

Nan mais je me sers pas du codage en direct de DW.
Je l'use surtout parce que j'ai l'habitude de son interface maintenant.
Puis quand je me souviens plus de certaines balises

ductives - 18 janvier 2024 à 15:30

I'm sure I can work with graphic designers to help them create the most eye-catching banner possible for your requirements. The success of my most recent initiative has been greatly attributed to https://depositphotos.com/vectors/post-it.html . You'll find many of original ideas to work with if you're trying to develop any kind of design.