Cr�er son site Gratuitement : Service / Outils webmaster gratuit
Mon Site Gratuit
Contactez nous
Nos partenaires
Scripts
Tutoriaux
Nos services
Forums
Accueil
[3/derniere etape] Codons notre design[3/derniere etape] Codons notre design
 
[3/derniere etape] Codons notre design

HTML | [3/derniere etape] Codons notre design

Script crée par boulledogue le 30-05-2008.

SocialTwist Tell-a-Friend

Apprenez à coder un design, regardez les codes html & css de base et codez le design que vous avez fait ici: http://www.monsitegratuit.com/tutoriaux/tutoriel.php?tuto=63

Bonjour bonjour tout le monde!
Bienvenue à la troisième étape de mon tuto qui vous apprends à faire un site web de A à Z.

Résultat final

http://desopilo.o-n.fr/creer_site_web/creer_site_web

Totalité du topic

[1 étape] Créer son design web
[2 étape] Découper son site web
[3/derniere etape] Codons notre design

Codons notre design web!


Voilà, vous avez vos images, placées dans un dossier "image".
Codage:


Nous allons coder notre design. Vérifiez que vous avez les éléments suivants:
images/background.jpg
images/background_header.jpg
images/footer.jpg
images/onglet.jpg


Dès que vous avez ceci, nous pourrons commencer.

Ca y est? OK on y va! :p
Créez le fichier index.html à la racine de votre site, ainsi qu'un fichier nommé style.css, lui aussi à la racine de votre site.

Occupons nous d'index.html:


Page de base:


Code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" />
<title>MonSiteGratuit.com by The stupid man du coin dla rue</title>
</head>
<body>
</body>
</html>



Modifiez ce qu'il y a entre head et /head en ajoutant:


Code :
<style type="text/css">
<!--
body {
margin-left: 370px;
}
-->
</style>



Ajoutons les boutons:

Placez ceci entre <body> et </body>:

Code :

<div id="site"><ul class="menu">
<li><a href="#"><b>Accueil&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b></a></li>
<li><a href="#"><b>Tutoriaux&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b></a></li>
<li><a href="#"><b>Scripts&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b></a></li>
<li><a href="#"><b>Partenaires&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b></a></li>
<li></li>
</ul><h1>MonSiteGratuit.com</h1>
<h2>tuto by Boulledogue</h2>
<div id="contenu">
<div class="menu_gauche">
<a href="#"><b>l'Accueil</b></a><br>
<a href="#"><b>Les Tutoriaux</b></a><br>
<a href="#"><b>Les Scripts</b></a><br>
<a href="#"><b>Les Partenaires</b></a><br>
</div><div class="texte">
<h3>Bienvenue sur MonSiteGratuit.com!</h3>
<p>&nbsp;</p>
<p>Texte, que du texte et encore que du texte!Texte, que du texte et encore que du texte!Texte, que du texte et encore que du texte!Texte, que du texte et encore que du texte!Texte, que du texte et encore que du texte!Texte, que du texte et encore que du texte!Texte, que du texte et encore que du texte!Texte, que du texte et encore que du texte!Texte, que du texte et encore que du texte!Texte, que du texte et encore que du texte!Texte, que du texte et encore que du texte!Texte, que du texte et encore que du texte!Texte, que du texte et encore que du texte!Texte, que du texte et encore que du texte!Texte, que du texte et encore que du texte!Texte, que du texte et encore que du texte!Texte, que du texte et encore que du texte!Texte, que du texte et encore que du texte!Texte, que du texte et encore que du texte!Texte, que du texte et encore que du texte!<br />
Lores ipsum dolor sit amet que j'ai oublié la suite! Lores ipsum dolor sit amet que j'ai oublié la suite! Lores ipsum dolor sit amet que j'ai oublié la suite! Lores ipsum dolor sit amet que j'ai oublié la suite!<br />
</p>
<h3>Et bien plus!</h3>
<p><br />
Et vous vous connaissez la suite? Et vous vous connaissez la suite? Et vous vous connaissez la suite? Et vous vous connaissez la suite?Et vous vous connaissez la suite?Et vous vous connaissez la suite?Et vous vous connaissez la suite?Et vous vous connaissez la suite?Et vous vous connaissez la suite?Et vous vous connaissez la suite?Et vous vous connaissez la suite?Et vous vous connaissez la suite?Et vous vous connaissez la suite?Et vous vous connaissez la suite?Et vous vous connaissez la suite?Et vous vous connaissez la suite?Et vous vous connaissez la suite?Et vous vous connaissez la suite?Et vous vous connaissez la suite?Et vous vous connaissez la suite?Et vous vous connaissez la suite?Et vous vous connaissez la suite?Et vous vous connaissez la suite?Et vous vous connaissez la suite?Et vous vous connaissez la suite?Et vous vous connaissez la suite?Et vous vous connaissez la suite?Et vous vous connaissez la suite?Et vous vous connaissez la suite?Et vous vous connaissez la suite?Et vous vous connaissez la suite?Et vous vous connaissez la suite?Et vous vous connaissez la suite?Et vous vous connaissez la suite?Et vous vous connaissez la suite?Et vous vous connaissez la suite?Et vous vous connaissez la suite?Et vous vous connaissez la suite?Et vous vous connaissez la suite?Et vous vous connaissez la suite?Et vous vous connaissez la suite?Et vous vous connaissez la suite?Et vous vous connaissez la suite?</p>
</div></div>
<div id="footer">Copyright gros crétin.com</div></div>




Occuppons-nous maintenant de style.css


Code :

body {
background-image:url(images/background.jpg);
background-color:cb0101;
margin:0;
padding:0;
width:700px;
}

.menu {
list-style:none;
width:960px; height:57px;
margin:0;
background: url(images/background_header.jpg);
}


.menu li a {
display:block;
float:left;
height:43px;
line-height:43px;
color:#aaa;
text-decoration:none;
font-family:arial, verdana, sans-serif;
text-align:center;
font-size:10px;
text-decoration:none;
padding:0 0 0 0px;
cursor:pointer;
}
.menu li a b {
float:left;
display:block;
padding:0 5px 0 7px;
margin-left: 20px;
}

.menu li a:hover {
color:#fff;
text-decoration:none;
background: url(images/onglet.jpg) ;
}

.menu li a:hover b {
background:url(images/onglet.jpg) no-repeat right top;
}

#contenu
{
background-color:#FFFFFF;
width:1000px;
}

#footer {
background-image:url(images/footer.jpg);
width:1000px;
}

h1 {
color:#FFF;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:24px;
}

h2 {
color:#FFF;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:18px;
}

h3 {
color:#000;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:18px;
}


.menu_gauche {
float:left;
width:230px;

}

.texte {
margin-left: 250px;
margin-bottom: 20px;
padding: 5px;

border: 2px solid black;
}



Tout est personnalisable :-)

Voilà, vous avez maintenant un site web.

Uploader (mettre en ligne)

Il est temps de vous apprendre à mettre votre site sur votre serveur (après vous enverrez le lien a tout le monde^^)
Voici FileZilla, le programme que nous allons utiliser pour mettre vos fichiers sur le serveur distant.
utilisez les donnees que vous avez recu dans le mail de confirmation pour vous connecter via FileZilla. Normalement, il ne s'y trouve aucun fichier ou peut etre un ReadMe, rien de plus.
Maintenant, rentrez les données de votre hébergeur, connectez vous et uploadez les fichiers sur votre serveur!

Le tuto est fini, avis et commentaires en dessous :-D

Résultat final

Le lien:

http://desopilo.o-n.fr/creer_site_web/creer_site_web/
L'image:

http://desopilo.olympe-network.com/creer_site_web/creer_site_web/images/tutofini.jpg

@+
Boulledogue


Poster un commentaire

Commentaire :

*Vous devez être connecté pour pouvoir poster un commentaire
Si vous n'êtes toujours pas inscrit, cliquez ici !

Commentaires

Je suis trop de chez trop content!!!! Quelqu'un a réalisé mon tuto oO Je suis stupéfait, étonné et content! méga content! xD
Sa a le mérite d'être très clair!

Plus sérieusement, on en parlera par msn des améliorations possibles du tuto,
Jsuis connecté jusque 20heures si ...

jeromecold

Salut,
Je suis trop de chez trop content!!!! Quelqu'un a réalisé mon tuto oO Je suis stupéfait, étonné et content! méga content! xD
Plus sérieusement, on en parlera par msn des améliorations possibles du tuto,
Ton résultat est d'une très bonne qualité, améliorable bien sur pui ...

boulledogue

Voilà ce que ça donne de mon coté:

http://img338.imageshack.us/img338/1180/tutoboulledogueky4.jpg

Inspiré d'office 2007 (oui, fallait bien que je trouve un truc!) et fait avec Gimp.

Un conseil Boulledogue: je serais toi, je marquerais les dim ...

jeromecold

Bien sûre que tu peut faire des modif's.
Et puis à n'importe quel moment là.

Tu es un sacré boulledogue toi . . . han ?
Je fais juste lire ton source >> puis déjà il est fonctionnelle.

Je n'ai pas à le vérif ! .

@++

zardoz

Enfin le troisième . . . :p

C'est ok. >>

Je peut étudier là ?.

Salut!
oui, tu peux étudier! Et dis moi si le tuto fonctionne et si je dois faire des modifications car je me suis relu, mais on ne sait jamais^^
@ +
Boulledogue

boulledogue

Enfin le troisième . . . :p

C'est ok. >>

Je peut étudier là ?.

zardoz

Bien et rapide, pas trop de codage à faire pour les débutants bref, tout pour faire son propre kit graphik', bravo

jeromecold

Soumettre un script HTML

*Vous devez être connecté pour pouvoir soumettre un script
Si vous n'êtes toujours pas inscrit, cliquez ici !