Mise en page CSS avec KompoZer

Autres mises en page

Mise en pageDonc, vous disiez ? Pas grand chose à faire pour changer la mise en page ?

Effectivement, quelques petites modifications dans la feuille de style.

Rappelons que l'idée est de produire une toute nouvelle mise en page sur le modèle de l'illustration ci-contre et qui a déjà été présentée plus tôt dans cette leçon.

Reprenons la feuille de style intégrée actuelle dans laquelle nous allons supprimer les éléments qui ne sont pas utiles pour la mise en page (les couleurs ne sont pas importantes).

<style title="MesStyles" media="all" type="text/css">
#entete {
width: 100%;
}
#menu { float: left;
width: 150px;
}
#texte { margin-left: 150px;
}
#pied { clear: left;
}
</style>

Seulement deux objets sur les cinq qui sont décrits doivent être modifiés :

  • Dans la zone de texte suivante, écris les modifications à réaliser pour changer la mise en page. Propose ensuite tes idées au professeur.

  • Quand ta proposition est approuvée, réalise la modification :
    • dans l'onglet Source de KompoZer ou
    • dans l'éditeur CSS KaZcadeS.
  • Enregistre le document modifié sous le nom modele2.html.

Réaliser la troisième présentation est encore plus simple.

  • Ouvre le document modele.html et vérifie qu'il se présente bien comme sur l'illustration ci-dessous, sans autre annotation qui pourrait introduire des difficultés qui seront abordées plus loin.

Aspect de la page

  • Modifie la feuille de style incorporée pour obtenir la présentation illustrée ci-dessous.

Présentation modifiée

  • Enregistre le nouveau document sous le nom modele3.html.

Quand ton document est enregistré et que les nouvelles mises en page fonctionnent, passe à la page suivante.

Page suivante

Dernière modification 15/10/2007
Ecrire