Un design web [part 1]
Comment fait on design?
Il existe plusieurs façon de créer un design, grâce à la fonction float du css ou grâce aux tableau (le prochain cours).
Le xhtml
Nous commençons par le xhtml:
- Code: Tout 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>Mon premier design</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
</body>
</html>
Bon, notre site sera en 4partit:
- Une bannière
- un menu principal
- Le texte principal
- Information du site
Comme ceci:
- Code: Tout 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>Mon premier design</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="banniere">
</div>
<div id="menu">
</div>
<div id="texteprin">
</div>
<div id="info">
</div>
</body>
</html>
Il faut remplir tous sa non?
- Code: Tout sélectionner
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Mon premier design</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="theme.css" rel="stylesheet" type="text/css" title="Theme du site" />
</head>
<body>
<div id="banniere">
</div>
<div id="menu">
<a href="index.html">acceuil</a><br />
<a href="/blog">blog</a><br />
<a href="/forum">forum</a><br />
</div>
<div id="texteprin">
<h1>Bienvenue, sur mon site!</h1>
<p>Bienvenue sur monsupersite.com , mon site vous propose des news qui m'ont marquez, mais surtout mon blog! Je vous propose aussi mon petit forum, où vous pourrez parlez des debats...enfin bref, merci de votre visite!</p>
<h2>Le créateur</h2>
Le créateur c'est moi! Un gars comme vous, sauf que moi, j'ai eu LE SITE où l'on peut apprendre le xhtml/css (et bientot le php), facilement! Enfin bref, le truc qui tue de la mort et qui rend jaloux les copains d'ecoles!
<h2>Remerciment</h2>
Je remercie le rotveller de ma voisine pour m'avoir encouragé à lire les tutos disponible sur ce site, ainsi, je peut enfin dire ce que je vis...aidez moi! Les bébé rotveller on envahit ma chambre, ceci est un SOS! (c'est une blague, évidemment...).
</div>
<div id="info">
<p>Copyright © monsupersite.com .<br />
<a href="#banniere">Il n'y à plus rien à lire, cliquez ici pour remonter!</a></p>
</div>
</body>
</html>
Ici, Un lien vers un ancre,
- Code: Tout sélectionner
<a href="#banniere"></a>
Un lien vers un ancre, est un lien interne à une page, comme le css "#" veut dire id et "banniere", lorsceque on click, le navigateur nous amène à l'endroit où il y a l'id qui à pour nom bannière. Enfin bref, à part sa rien de nouveau!Je vous avoue que si vous testez, c'est très laid... mais le css est là pour nous aider!
Le css
- Code: Tout sélectionner
body
{
background-image: url("http://www.enregistrersous.com/images2/112553745120071211095246.jpg");
width: 800px;
margin:auto;
margin-top: 20px;
margin-bottom: 20px;
}
Ne vous inquiétez pas, c'est prévue, je vais tous vous expliquer!
Alors margin: auto permet au navigateur internet de centrer la balise, au milieu de la page (très pratique)
background-image, lui permet de mettre une image en fond!
width Trés important! On indique la largeur que doit faire le site, ici, j'ai mis 800px.
Alors margin: auto permet au navigateur internet de centrer la balise, au millieu de la page (trés pratique)
margin-top: permet de créer une marge entre le premier élément du site, au bord haut du navigateur, ici 20px.
margin-bottom: Idem, mais pour le bord bas.
Bon, la suite maintenant!
- Code: Tout sélectionner
#banniere
{
width: 800px;
height: 120px;
background-image: url("banniere.jpg");
}
à quoi peut servir height? Bah tous simplement à dire la hauteur!
- Code: Tout sélectionner
#menu
{
margin-top: 20px;
width: 100px;
float: left;
background-color: #ffffff;
}
Ici, le margin-top evite, que le menu soit coller à la bannière.
float? c'est quoi?
float permet de faire flottez un objet, à gauche ou à droite (left = gauche et right = droite!) On positionne un objet flottant grâce à margin-top (ou bottom) et margin-left (ou right)(nous allons le voir tout à l'heure)!
Ici, il n y a pas de margin-left, car il ce positionne bien, sans lui!
- Code: Tout sélectionner
#texteprin
{
margin-top: 20px;
width: 650px;
margin:auto;
margin-left: 150px;
background-color: #ffffff;
}
margin-left, permet de donnez une marge pour que le menu ne ce colle pas au texte principal
- Code: Tout sélectionner
#info
{
margin:auto;
text-align: center;
background-color: #ffffff;
}
text-align: center; permet de centrez le texte.
Voila c'est finit!
Donc un petit intégral du css entier
- Code: Tout sélectionner
body
{
margin:auto;
background-image: url("http://www.enregistrersous.com/images2/112553745120071211095246.jpg");
width: 800px;
margin:auto;
margin-top: 20px;
margin-bottom: 20px;
}
#banniere
{
width: 800px;
height: 120px;
background-image: url("banniere.jpg");
}
#menu
{
margin-top: 20px;
width: 100px;
float: left;
background-color: #ffffff;
}
#texteprin
{
margin-top: 20px;
width: 650px;
margin:auto;
margin-left: 150px;
background-color: #ffffff;
}
#info
{
margin:auto;
text-align: center;
background-color: #ffffff;
}
Ainsi, nous avons créer un design, mais le prochain cours, sera aussi de créer un design, mais d'une autre façon (plus simple, à condition d'être concentré, et de ne pas nous mélanger les pinceaux!). Bon ceci, bref, @+ (il m'aura fallut, 2jour pour l'écrire, et tester tous les codes
)
Merci.
