Faire son site et le publier

Kompozer et CSS

Réaliser une mise en page avec deux menus

Supposons  que nous voulions faire une mise en page classique : un en-tête, un pied de page, deux menus, une grande zone de contenu. C'est possible sans utiliser les tableaux et d'une manière intuitive avec les CSS.

1 - Définir la structure de sa page  : faire les <div>Faire les div ert remplir les menus

2 - Placer les <div> menu de part et d'autre du <div> contenu

Extrairec et créer un style générique

3 - Dégagement du pied-de-page

Les menus empiètent sur le pied de page : il faut les dégager des 2 côtés.

4 - Mise en forme du <div> contenu

Nous allons maintenant remplir la zone de contenu. On s'aperçoit que dès qu'elle est plus longue que les menus, la mise en page part en sucette.

5 - Mise en forme de l'en-tête

6 - Mise en forme des titres  h1  h2  h3

Si, en visualisant avec le navigateur, nous voyons un espace au dessus et au-dessous du div  "header", il convient de mettre à zéro les marges haute et basse du titre h1 car pour les titres, la valeur par défaut n'est pas nulle.
Les titres h1 à h6 sont des éléments de type bloc. Pour leur mise en forme il n'est pas nécessaire de passer par un div. Pour les styler, nous allons passer par l'éditeur de css "Cascades".

L'éditeur de CSS Cascades

8 - Centrer le conteneur principal dans la pageDans Cascades : la feuille de style interne

Dans cette dernière étape nous allons centrer le conteneur principal dans la page.

C'est fini. Sauvegarder par Ctrl+S.

On peut ajouter une règle "html" pour définir une couleur de fond pour toute la page, distincte de celle du conteneur principal (body).

Dans Cascades nous voyons la feuille de style interne (mieux dit :incorporée) que nous venons de créer.
Il sera préférable de transformer cette feuille de style incorporée en une feuille de style externe (= un fichier .css lié à toutes les pages du site) pour une utilisation plus efficace, une maintenance facilitée et des possibilités d'évolutions nombreuses (changer le fond de page de toutes les pages, la couleur des titres, ... en modifiant seulement ce fichier)

Dans le navigateur nous voyons le résultat final.

Résultat dans le navigateur
Haut de page
Jos Argaud - Mise à jour 09/10/2008  Pour m'écrire  Document made with KompoZer  D'après le  tuto de Kaze, accessible sur le forum Geckozone dédié à Kompozer