Webelix.net :: Creer un site web - Xhtml - Réalisation du site en XHTML avec CSS (partie 2)

Vous êtes ici : Home Page

Dossiers

Creer un site web

Xhtml

Realisation site XHTML (2)

Imprimer

Informations Membres

	[195] Posts sur le forum
	[177] Membres inscrits

Il y a en ligne :

0 Membre

0 Invité

Membre en ligne:
Aucun

Partenariat

Vous pouvez aider ce site à évoluer, en contribuant à son développement. Proposez vos idées de cours et/ou dossiers. Rendez-vous dans « Partenariat » pour en savoir plus.

Nom de domaine

Partenaires

Réalisation du site en XHTML avec CSS (partie 2)

Etape 2 - Les Couleurs

Nous allons mettre un peu de couleur à ce site, qui pour le moment est un peu fade.
Reprenons nos 4 couleurs que nous avions choisis dans le projet.

Cadre titre (Zone HEADER) avec un fond : bleu(#0068B4)
Cadre menu (Zone MENU) avec un fond : vert foncé(#88C065)
Cadre page (Zone PAGE) avec un fond : vert clair(#AFD394)
Cadre copyright (Zone FOOTER) avec un fond : marron(#CDBCA3)

Nous les insérons dans notre fichier "style.css":

html, body {margin: 0;padding: 0;}
#container {position: relative;width: 600px;margin: 4px auto;}
#header {position: relative;height: 90px;background-color: #0068B4;}
#menu {float: left;width: 120px;height: 350px;background-color: #88C065;}
#page {float: right;width: 480px;height: 310px;background-color: #AFD394;}
#footer {float: right;width: 480px;height: 40px;background-color: #CDBCA3;}

Cliquez ici pour Voir l'aperçu

Etape 3 - Les Textes

Après avoir créé les zones et les avoir remplies par nos couleurs, nous allons mettre en forme nos textes.

Nos polices que nous allons employer, sont:

Arial de taille 12 pixels, de couleur noir, pour le texte global
Arial de taille 24 pixels, de couleur blanc, pour le titre
Arial de taille 13 pixels, de couleur noir, pour le menu

Ouvrez le fichier "style.css" et tapez ceci:

html, body {font: 12px Arial;margin: 0;padding: 0;}
#container {position: relative;width: 600px;margin: 4px auto;}
#header {position: relative;height: 90px;background-color: #0068B4;}
#menu {float: left;width: 120px;height: 350px;background-color: #88C065;}
#page {float: right;width: 480px;height: 310px;background-color: #AFD394;}
#footer {float: right;width: 480px;height: 40px;background-color: #CDBCA3;}

.style {margin: 4px;}
.titre {position: absolute;top: 30px;left: 20px;font-size: 24px;color: #FFFFFF;}
.nav {font-size: 13px;}

Ouvrez le fichier "index.html" et tapez ceci:

<!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" xml:lang="fr" lang="fr">
<head>
  <title>Mon premier site en XHTML</title>
  <link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>
<div id="container">
  <div id="header">
    <div class="style">
      <span class="titre">Mon premier site en XHTML avec CSS</span>
    </div>
  </div>
  <div id="menu">
    <div class="style">
      <span class="menu"><strong>MENU :</strong></span>
      <ul class="nav">
        <li> Rubrique 1</li>
        <li> Rubrique 2</li>
        <li> Rubrique 3</li>
        <li> Rubrique 4</li>
       </ul>
    </div>
  </div>
  <div id="page">
    <div class="style">
      <p>Contenu de site web</p>
    </div>
  </div>
  <div id="footer">
    <div class="style">
      <span>2005 Copyright by Moi</span>
    </div>
  </div>
</div>
</body>
</html>