WebSite
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.



 
AccueilAccueilDernières imagesRechercherS'enregistrerConnexion
-50%
Le deal à ne pas rater :
-50% sur les sacs à dos pour ordinateur portable Urban Factory ...
19.99 € 39.99 €
Voir le deal

 

 Créer son site en 4 étapes

Aller en bas 
AuteurMessage
++rammstein++
Administrateur
Administrateur
++rammstein++


Masculin
Nombre de messages : 78
Age : 32
Localisation : Suisse
Âge : 16
Date d'inscription : 15/12/2007

Créer son site en 4 étapes Empty
MessageSujet: Créer son site en 4 étapes   Créer son site en 4 étapes Icon_minitimeDim 16 Déc 2007 - 14:02

Introduction


Ce tutorial a pour but de vous apprendre à créer votre propre site et son
design, avec comme seule image, la bannière (autres images en option).

Voici ce que contiendra votre site :

  • Un menu général à gauche
  • Un sous-menu à droite
  • Votre corps au centre
  • Un pied de page


Voici ce dont vous aurez besoin :

  • Un hebergeur (www.xdir.fr par exemple)
  • Filezilla pour le transfert de vos fichiers sur votre serveur
  • Notepad ou autre éditeur de texte pour le codage du site
  • Une bannière


Exclamation N'oubliez pas de sauvegarder assez souvent votre avancement.

C'est parti Smile
1. La base du site en HTML

Ouvrez votre éditeur de texte.
On va commencer par créer un bloc "conteneur" qui contiendra le site et qui permettra d'aligner le tout parce qu'on l'aura centré :
Code:
<center><div id="conteneur"></div></center>

Quand je ne le préciserai pas, vous insérerez le code dans ce bloc.
Mtn, on va créer un bloc qui contiendra votre bannière :
Code:
<div id="header"></div>

Pour l'instant, on n'inserera rien dans les blocs, tout se mettra dans le CSS.

Ensuite on va créer trois blocs : deux menu et le corps. Je vous conseille de les mettre dans l'ordre suivant :
Code:
<div id="menug"></div>
<div id="menud"></div>
<div id="corps"></div>

Et pour finir cette première partie, nous allons mettre notre pied de page :
Code:
<div id="footer"></div>

Exclamation N'oubliez pas de mettre des sauts a la ligne.

Voici ce que vous devriez obtenir :
Code:
<html>
    <head>
          <title>Mon site</title>
    </head>
    <body>
          <center>
              <div id="conteneur"></div>
                    <div id="menug"></div>
                    <div id="menud"></div>
                    <div id="corps"></div>
                    <div id="footer"></div>
              </div>
          </center>
    </body>
</html>


2. On met de l'ordre dans nos blocs


Après avoir fait un lien depuis votre fichier HTML vers la page CSS :
Code:
<link rel="stylesheet" media="screen" type="text/css" title="Style" href="style.css" />
enregistrez le (personnelemnt je l'ai appelé "index.html") puis ouvrez une nouvelle page vide et enregistrez-la ("style.css").

Cette page contiendra le style du site.

Nous allons commencer par donner une largeur au bloc "conteneur" :
Code:
#conteneur {
    width: 80%;
}

Pour rendre notre site un peu plus beau, on va lui donner une couleur de fond :
Code:
body {
    background-color: black;
}

Variante :
Spoiler:


Puis nous allons donner une hauteur, une largeur et une image du fond au bloc "header" :
Code:
#header {
    width: 500px;
    height: 400px;
    background-image: url("header.png");
}

Et maintenant c'est le plus dur de cette étape 2, positionner nos deux menus et le corps :
Code:
#menug {
    float: left;
    border: 2px solid grey;
    width: 15%;
  height: 340px;
}

#corps {
  border: 2px solid grey;
  height: 340px;
  width: 66%;
  position: center;
}

#menud {
    float: right;
    border: 2px solid grey;
    width: 15%;
  height: 340px;
}

Option :
Spoiler:

Et pour finir cette deuxième étape, on va positionner le pied de page :
Code:
#footer {
    width: 100%;
    border: 2px solid grey;
  height: 20px;
}

Donc voici ce que vous devriez avoir dans votre page CSS :
Code:
body {
    background-color: black;
}

#conteneur {
    width: 80%;
}

#header {
    width: 500px;
    height: 400px;
    background-image: url("header.png");
}

#menug {
    float: left;
    border: 2px solid grey;
    width: 15%;
  height: 340px;
}

#corps {
  border: 2px solid grey;
  height: 340px;
  width: 66%;
  position: center;
}

#menud {
    float: right;
    border: 2px solid grey;
    width: 15%;
  height: 340px;
}

#footer {
    width: 100%;
    border: 2px solid grey;
  height: 20px;
}


3. Le site prend forme


Bon si vous êtes un petit peu curieux vous aurez déjà ouvert votre fichier "index.html". Ok a part vos deux blocs de menu, le corps et la bannière, votre site est vide. Ne vous inquiétez pas c'est normal, tout ce qui nous reste à faire c'est insérer les liens et le texte.

Pour commencer, on va insérer le menu général à gauche :
Code:
<p>
<h2>MENU</h2>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Divers</a></li>
</ul>
</p>

On va maintenant mettre le sous-menu à droite :
Code:
<p>
<h2>ACCUEIL</h2>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Présentation</a></li>
<li><a href="#">Membres</a></li>
<li><a href="#">Divers</a></li>
</ul>
</p>

Un peu de texte à l'intérieur du corps :
Code:
<h1>Accueil</h1>
<br />
Un petit peu de texte pour combler les espaces du corps du site.

Et pour finir les droits d'auteur dans le footer :
Code:
<center>Copyright ++rammstein++ | tous droits reservés</center>

Variante :
Spoiler:

Votre code HTML est deja un peu plus long qu'avant :
Code:
<html>
    <head>
          <title>Mon site</title>
        <link rel="stylesheet" media="screen" type="text/css" title="Style" href="style.css" />
    </head>
          <body>
              <center>
                    <div id="conteneur">
                        <div id="header"></div><br />
                        <div id="menug">
                     <p>
                        <h2>MENU</h2>
                        <ul>
                           <li><a href="index.html">Accueil</a></li>
                           <li><a href="#">Services</a></li>
                           <li><a href="#">Forum</a></li>
                           <li><a href="#">Divers</a></li>
                        </ul>
                     </p>                     
                  </div>
                   <div id="menud"><p>
                        <h2>ACCUEIL</h2>
                        <ul>
                           <li><a href="#">Accueil</a></li>
                           <li><a href="#">Présentation</a></li>
                           <li><a href="#">Membres</a></li>
                           <li><a href="#">Divers</a></li>
                        </ul>
                     </p></div>
                   <div id="corps">
                     <h1>Accueil</h1>
                     <br />
                     Un petit peu de texte pour combler les espaces du corps du site.
                  </div><br />
                        <div id="footer"><center>Copyright ++rammstein++ | tous droits reservés</center></div>
                    </div>
              </center>
    </body>
</html>


4. Couleurs & alignement


Bon, notre site est terminé au niveau du codage HTML, il ne reste plus qu'à finaliser le CSS.

Tout d'abord, nous allons redonner de la couleur aux trois titres pour qu'ils soient visibles.
Les deux petits titres :
Code:
h2 {
    color: darkgrey;
}

Et le grand titre :
Code:
h1 {
    color: darkgrey;
}

Mtn il nous faut modifier le code CSS pour le corps, il faut y rajouter une couleur pour le texte, je choisis gris :
Code:
#corps {
   border: 2px solid grey;
   height: 340px;
   width: 66%;
   position: center;
   color: grey;
}

On fait pareil dans le "footer" :
Code:
#footer {
    width: 100%;
    border: 2px solid grey;
   height: 20px;
   color: grey;
}

Il ne reste plus que nos deux menus. Il faut rendre leur puces en couleurs et les liens en couleur aussi. Pour les puces, elles se changent comme du texte, on va donc utiliser la fonction "color" :
Code:
#menug {
    float: left;
    border: 2px solid grey;
    width: 15%;
  height: 340px;
  color: grey;
}
Code:
#menud {
    float: right;
    border: 2px solid grey;
    width: 15%;
  height: 340px;
  color: grey;
}

On va maintenant mettre nos liens en couleur :
Code:
a {
  color: white;
}

Et on va les faire changer de couleur lorsqu'on les survole :
Code:
a:hover {
  color: black;
  background-color: grey;
}

Option :
Spoiler:

Et maintenant il ne reste plus que l'alignement des menus :
Code:
ul {
  text-align: left;
}

Conclusion


Ce tutorial est la preuve que l'on peut faire un site assez bien en peu de temps.
Vous pouvez toujours modifer mon code pour rajouter d'autres choses (par exemple rajouter un 3ème menu en dessus du bloc central).

Ce tutorial est tiré de mon dernier site :
www.site-essai.fr.tc/gz/

Mais dans ce tutorial je ne vous ai pas tout expliqué mais vous savez surement comment le faire (par exemple mettre deux menus a gauche).

Si vous avez des questions, des problèmes ou que vous voyez une erreur, n'hésitez pas à me contacter.





Copyright 2007 ++rammstein++
Revenir en haut Aller en bas
 
Créer son site en 4 étapes
Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
WebSite :: (¯`·._.·[ Web-Designer ]·._.·´¯) :: -[ Tutoriaux ]--
Sauter vers: