Faire son site et le publier

Kompozer et CSS

Mise en forme avec CSS : Exercice de positionnement

Création du dossier de site

Pour voir l'exercice terminé : http://pagesperso-orange.fr/argaud/sortiesBota/index.html

Pour télécharger textes et images : http://josar.free.fr/Telechargements

Création de la page Accueil

Structure de la page d'accueil
La structure
body {
  width: 900px;
  margin-top: 0px;
  margin-left: auto;
  margin-right: auto;
  font-family: Arial,Helvetica,sans-serif;
  background-image: url(images/commun/FdBody.png);
  background-repeat: repeat-y;
}
#EnTete {
  width: 900px;
  height: 100px;
  background-repeat: no-repeat;
  background-image: url(images/commun/canigou.jpg);
}
#Corps {
  width: 800px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 10px;
}
#Pied {
  width: 900px;
  height: 76px;
  background-repeat: no-repeat;
  background-image: url(images/commun/vingrau.jpg);
}
Le contenu

La structure de la page étant en place ainsi que les arrière-plans il ne nous reste plus, pour cette page, qu'à incorporer le contenu.

p {
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  background-color: #ff99ff;
  text-align: justify;
}
.blocFonce {
  background-color: #666666;
  background-repeat: repeat-y;
  background-image: url(images/commun/FdBlocFonce.png);
}
.blocClair {
  background-color: #e9ecf4;
}

Nous rappelons qu'un sélecteur de class peut s'appliquer à tous les éléments d'un même type et peut être utilisé plusieurs fois dans une page. Dans le code css, au lieu d'un dièse il sera précédé par un point.

code html de la div Corps
#Pied a {
  font-family: Arial,Helvetica,sans-serif;
  font-style: italic;
  text-align: center;
  color: #ddeafc;
}
#Pied a:hover {
  color: #f8feff;
}

code html de la div pied

Création de la page Montoulié

Les 4 pages Montoulié, Madeloc, Alaric et Bugarach auront la même structure que la page Accueil, les mêmes div EnTete et pied ; il n'y aura que la div Corps qui va changer et nous nous efforcerons de faire une mise en page en mosaïque différente pour chaque page afin de nous exercer au positionnement des éléments.

La page Accueil étant ouverte dans Kompozer :

Premier bloc clair :  2  paragraphes de texte
2 blocs de paragraphe dans un div
2 paragraphes côte à côte
Bloc suivant foncé
bloc 2 arrière plan foncé

Sur un arrière plan foncé ce bloc contiendra un premier paragraphe de texte, une liste à puces, un deuxième paragraphe de texte et une image. Pour homogénéiser le fond de tous ces éléments nous créons une div et nous lui attribuons la class blocFonce.
L'image sera flottante à droite par l'attribution de la class ImgDroite.
Dans Cascade, nous ajustons visuellement la hauteur de la div à celle de l'image.

Un titre de niveau h3

Nous avons stylé h3 pour qu'il dégage des 2 côtés ce qui évite d'insérer le paragraphe .degage

Bloc suivant clair

Ce bloc clair contiendra un paragraphe de texte et une liste à puces.
Nous les insérons dans une div à laquelle nous attribuons la class blocClair

Bloc suivant foncé
2 images dans le div

Dans un paragraphe ou plutôt un div blocFonce nous insérons la première image flottante à gauche et la deuxième image flottante à droite
Nous ajustons la hauteur de la div à celle des images.
Penser au dégagement en insérant dans le code à la suite de cette div : <p class="degage"></p>

.imgGauche {
  float: left;
  margin-right: 10px;
}
    .imgDroite {
  float: right;
  margin-left: 10px;
}

code html du duv avec 2 images

Les 2 derniers paragraphes seront traités comme les 2 premiers (2 blocs clairs côte à côte)
Les div Corps des autres pages seront traitées dans le même esprit de mosaïcage.

Voir aussi l'excellent tuto du site du zéro : Apprenez à créer votre site Web  sans passer par Kompozer.

Haut de page

Jos Argaud - Mise à jour 01/01/2010  Pour m'écrire  Document made with KompoZer