Partagez | 
 

 [Tuto HTML + CSS] Faire l'interface graphique de son site

Voir le sujet précédent Voir le sujet suivant Aller en bas 
avatar

Miettes

Doyenne

Bons Points (BP) : 174
MessageSujet: [Tuto HTML + CSS] Faire l'interface graphique de son site   Lun 16 Mar - 13:08
Bonjour,

Voici la seconde partie de notre tutoriel pour réaliser une interface graphique rapidement.

Ouvrer un logiciel de traitement de texte style WordPad.

Nous allons créer 2 pages : une page html et une page CSS. Dans la première, nous allons mettre tout ce qui est contenu de votre site. Dans la seconde, nous allons travailler toute la mise en page.




A] La page html

1/ Recopier ceci en haut de votre page
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=iso-8859-1" />
<title>Document sans nom</title>
</head>

<body>
</body>
</html>

2/ Mettez le titre de votre page entre les balises \"title\"
3/ Enregistrer votre fichier sous le nom « index.html »

Nous allons maintenant organiser notre page grâce à des blocs (appelé « div » en html). Nous aurons 5 blocs : le premier pour le conteneur (cadre du centre), le second pour la bannière, le troisième pour le menu de navigation, le quatrième pour le contenu (là où sera le texte de notre page) et le cinquième pour le copyright.

Tout ce que nous allons ajouter maintenant va être mis entre les balises « body »

4/ Installons tout d’abord notre conteneur.
Ajouter le code suivant.
Code:
    <div id="conteneur">
   
   </div>

5/ Le reste des éléments se trouve dans le conteneur. Nous allons devoir mettre la suite entre cette balise « div ». Nous allons procéder de la même façon pour la bannière, le menu, le contenu et le copyright. Voici le code.
Code:
    <div id="conteneur">
      <div id="banniere">
         <!-- voici le bloc où sera mise à la bannière -->
      </div>

      <div id="menu">
         <!-- voici le bloc menu -->
      </div>

      <div id="contenu">
         <!-- voici le bloc du contenu de la page -->
      </div>
      
      <div id="copyright">
         <!-- voici le bloc du copyright -->
      </div>
   
   </div>

Remarque :
Code:
<!-- ceci est un commentaire et n'apparaitra pas sur le site -->

3/ Nous allons maintenant y mettre un peu de texte pour voir ce que ça donne. Dans le bloc « menu » ajouter quelques liens fictifs. Pour cela mettre ce code :
Code:
          <a href="#" title="lien 1">Lien 1</a>  |  <a href="#" title="lien 2">Lien 2</a>  |  <a href="#" title="lien 3">Lien 3</a>  |  <a href="#" title="lien 4">Lien 4</a>

4/ Ajouter maintenant du texte dans le bloc « contenu » (n’oublie pas les balises de paragraphes \"p\" pour que cela soit plus joli)

5/ Ajouter du texte dans le bloc « copyright » (mettez ce texte entre les balises \"p\")

Si vous visualisez votre page, vous devriez avoir ça : clic
Pas terrible hein ? Bossons donc la mise en page.


B] La page CSS

1/ Créer un nouveau document que vous allez enregistrer avec le nom “style.css”

2/ Nous allons d’abord travailler le fond de notre page. Pour cela, ajouter le code suivant :
Code:
 body{
   background-color: #723f15;
}

Ici, nous donnons au corps de notre page, une couleur de fond marron.

2/ Ajoutons notre conteneur. Nous voulons que celui-ci soit centré, et nous voulons qu’il fasse une largeur de 800 px de large, ainsi, il s’adaptera à tous les écrans. Nous allons aussi lui imposer une hauteur minimum de 600px, mais si la page est plus haute elle s’adaptera automatiquement. Nous allons également lui mettre une couleur de fond et une bordure blanche en pointillé (dotted en anglais). Il nous faut donc mettre ce code :
Code:
 #conteneur{
   width: 800px;
   min-height: 600px;
   height: auto;
   margin: auto;
   border: 1px white dotted;
   background-color: #b18e59;
}

3/ L’en-tête à présent. Nous allons mettre notre image en image de fond. Attention cependant, si l’on veut que l’image apparaisse, il faut lui donner des dimensions Wink Voici donc le code à ajouter.
Code:
 #banniere{
   height: 140px;
   width: 876 px;
   background-image:url(images/banniere.jpg);
   background-position: center;
}

4/ Nous allons refaire la même chose pour la barre de navigation. Mais attention, cette-fois nous allons aussi devoir gérer le texte. Commençons d’abord lui donner des dimensions et préciser la façon dont sera aligné le texte à l’intérieur de ce cadre.
Code:
 #menu{
   height: 30px;
   width: 876px;
   text-align:center;
}
Passons à présent au texte. Dans notre menu, nous n’avons que des liens. En css, ceux-ci sont nommé « a » (comme lorsque vous écrivez en html « a href »). Lorsque vous passez votre souris dessus, nous utiliserons « a :hover » et pour les liens que vous avez visité « a :visited ». Nous allons donc leur donner un style d’écriture, une couleur et une taille. Nous mettrons aussi nos liens en petite capitale (small-caps).
Code:
 #menu a{
   font-family:Georgia, "Times New Roman", Times, serif;
   font-variant:small-caps;
   color: #330000;
   font-size:16px;
   text-decoration:none;
}

#menu a:hover{
   text-decoration: underline;
   color:#CC0033;
}

5/ Continuons notre progression. Nous allons maintenant mettre en page la zone qui contient notre texte. Nous allons donc d’abord régler la taille, puis nous nous occuperons de la mise en page du texte, en modifiant les balises « p ». Notre texte sera ainsi écris en taille 12, en gris, et sera justifié. Nous mettrons aussi une petite marge de chaque coté afin qu’il ne soit pas collé au cadre (padding).
Code:
 #contenu{
   width: auto;
   min-height: 528px;
   height: auto;
   margin-top: -20px;
   padding-top: 20px;
}

#contenu p{
   padding-left: 20px;
   padding-right: 20px;
   text-align:justify;
   color: #666666;
   font-family:Georgia, "Times New Roman", Times, serif;
   font-size:12px;
}

6/ Vous avez bientôt terminé la mise en page de votre site. Il ne vous reste plus que le texte du copyright à mettre en page. Pour celui-ci, nous allons le mettre engris, avec une petite police. Comme précédemment c’est le « p » qu’il faut modifier. Nous allons également centrer le texte et donner des dimensions à la zone.
Code:
 #copyright{
   height: 40px;
   width: auto;
   padding-top: 20px;
   text-align: center;
}

#copyright p{
   font-family:Georgia, "Times New Roman", Times, serif;
   font-size: 10px;
   color:#333333;
}

Voilà, la mise en page de votre site est faite. A présent, il faut relier la page html à la page css. Pour cela, sur votre page html, entre les balises « head » copiez le code suivant :
Code:
 <link rel="stylesheet" type="text/css" href="nomdevotrecss.css"/>

N’oubliez pas d’y ajouter le nom de votre feuille de style Wink

Remarque : si vous souhaitez ajouter un commentaire dans votre feuille de style afin que cela paraisse plus clair, il vous suffit de faire ceci :
Code:
/* votre commentaire */
Ce message n’apparaitra évidemment pas sur votre code.


Si vous avez des questions, je suis à votre disposition




¤Voir la page html fini : clic
¤ Voir le code Css : clic





Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].

Je soussignée, Miettes,  accepte qu'un directeur reposte le tutoriel "Faire l'interface graphique de son site" tel que je l'ai rédigé.
___________________


 

[Tuto HTML + CSS] Faire l'interface graphique de son site

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» INTRO d'un blog overblog en flash
» Comment faire un lien vers un autre site?
» Mise à jour CN 2013.20 Impossible sur Zümo 660....!
» Tuto 5"faire virevolter"
» Tron Legacy ou l'art de créer des logiciels pour les VFX

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage-
Sauter vers:  
Espace Admin du site

©2008-2016 - School Of Progress - Toute reproduction totale ou partielle est interdite.
Design réalisé par Mewyn - Forum hébergé par forumactif.com

Les logos des SoPiens

Nos correspondants