Tuto mise en page CSS avec KompoZer, tutoriel & guide de travaux pratiques en pdf.
Concevoir le bloc principal de mise en page
Comme indiqué à la page précédente, chacune des zones de la page web type est définie dans un bloc <div>. Nous allons mettre en place l’ensemble des blocs qui constituent la page. Il y aura :
• Un bloc » conteneur » qui permettra de positionner l’ensemble du document sur la page.
• Un bloc pour l’en-tête.
• Un bloc pour le menu.
• Un bloc pour le texte du document.
• Un bloc pour le pied de page. Chacun des ces blocs sera muni d’un » identificateur » (id) qui permettra aux logiciels (KompoZer et navigateur ensuite) de les reconnaître. Dans cette séquence, nous allons mettre le bloc principal en place et lui conférer quelques caractéristiques de style.
Mise en place du bloc » conteneur » Ce bloc contiendra les autres blocs et pourra, éventuellement, être muni de directives de style spécifiques.
• Ouvre un nouveau document dans KompoZer. Au moment où ce document est généré, le curseur de texte se trouve sur la première ligne de la page. Nous allons y introduire un bloc vide.
• Dans la liste déroulante des styles de la barre d’outils de mise en forme, choisis le dernier item Conteneur générique (div). La création du bloc est matérialisée par l’apparition de la balise <div> dans la barre d’état, au bas de l’écran.
• Clique droit sur cette balise et choisis la commande Propriétés avancées. Une boîte de dialogue à plusieurs onglets apparaît.
• Dans l’onglet Attributs HTML, choisir l’attribut id et lui donner la valeur conteneur.
• Clique sur le bouton OK. Le bloc » conteneur » est en place. En CSS, l’id permet d’identifier un bloc de manière unique. Il ne peut pas y avoir deux blocs munis du même id dans une page.
Styler le bloc » conteneur «
L’éditeur CSS va nous permettre de mettre ce premier bloc en forme. Un bloc muni d’un » id » peut recevoir des directives de style qui lui sont propres.
• Dans l’éditeur CSS de KompoZer, crée une nouvelle feuille de style incorporée. La feuille de style s’appliquera à tous les médias ( » all « ) et portera le nom » MaFeuilleCss « .
• Clique sur le bouton Règle afin de créer une nouvelle règle.
• Il s’agit d’une règle à appliquer à tous les éléments d’un type. Le type est #conteneur
Le signe # indique expressément que nous faisons référence au bloc dont l’id est conteneur.
• Clique sur le bouton Créer la règle de style.
• Dans l’onglet Bordure, Style Plein, épaisseur 1px, couleur au choix ;
• Dans l’onglet Boîte, choisir une largeur de 90% ;
• Choisir une marge gauche de 5% (de cette manière, le
4/16 http://info.sio2.be/kpz/3
Mise en page CSS avec KompoZer
» conteneur » sera centré sur la page) ;
• Dans l’onglet Fond, choisis une couleur claire.
• Clique sur le bouton Fermer pour terminer la définition de style pour le bloc conteneur. Le bloc conteneur est maintenant parfaitement visible sur la page. La couleur peut être différente de celle de l’illustration ci-dessous, en fonction de ton choix.
