Faire son site et le publier

Kompozer et CSS

Mise en forme avec CSS : Les blocs

Nous allons mettre en place une page web type, très simple, contenant les zones habituelles :

une zone d'entête qui indique l'objet général de la page
une zone de menu qui permet d'accéder aux autres pages du site 
une zone de contenu qui présente les informations essentielles de la page
une zone de pied-de-page sur laquelle on trouvera, par exemple, des informations techniques (adresse de la page, date de mise à jour, adresse de l'auteur...)

Nous allons montrer que cette page type peut, avec le même contenu HTML, se présenter de différentes façons, selon les directives de styles qui lui sont appliquées.
Menu à gauche ou à droite ou encore menu horizontal.

1 - Pour se rendre compte de ce que nous allons faire

Créer une nouvelle page et, dans l'onglet Source, remplacer tout le contenu par le code :

Visualisation des div dans la page<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Mise en forme CSS</title>
</head>
<body>
<div id="entete">      
<h1>Entête</h1>
</div>
<div id="menu">
<h1>Détails</h1>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
<div id="texte">
<h1>Contenu</h1>
<h2>Le titre</h2>
Le texte
</div>
<div id="pied">Pied</div>
</body>
</html>

Visualiser dans l'onglet Normal : chaque div apparaît dans Kompozer encadré par un pointillé rouge.
Ne pas sauvegarder. Fermer cette page.

2 - Création de la structure avec le conteneur générique (div)Conteneur générique (div) pour créer la structure

Ouvrir un nouveau document dans KompoZer. Dans ce document, noter sur 4 lignes différentes : 

En-tête  
Menu    
Texte     
Pied       

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.

Dans la barre d'état clic sur <div>                            dans l'éditeur des Propriétés avancées on identfie chaque div par une ID unique

Dans le body les 4 blocs sont maintenant identifiés.

<body>
<div id="entete">En-tête</div>
<div id="menu">Menu</div>
<div id="texte">Texte</div>
<div id="pied">Pied</div>
</body>

3 -  L'enveloppe de protection 

Comme nous nous proposons de centrer notre site, une enveloppe de protection qui englobe toutes les autres zones nous rendra la tâche plus aisée pour une mise en page avec CSS. Nous appelerons cette enveloppe  wrapper.
Dans le code source, en travaillant dans l'Editeur, nous allons rajouter cette instruction dans le body. 

<body>
<div id="wrapper">
<div id="entete">En-tête</div>
<div id="menu">Menu</div>
<div id="texte">Texte</div>
<div id="pied">Pied</div>
</div>
</body>

Il est aussi possible d'éviter de mettre une enveloppe en centrant directement le body. Il faut simplement savoir :

4 - Identifier les blocs et les positionner (=styler les blocs)

Bloc "wrapper"

Un bloc <div> muni d'un " id " peut recevoir des directives de style qui lui sont propres.
Avec CaScadeS créer une nouvelle règle.

Bloc "en_tête"
Blocs "menu" et "texte"

Le bloc Menu aura une largeur de 150 px, couleur claire #99ff99,  sera déclaré flottant à gauche. Le texte de la page s'écoulera le long du bloc en occupant la place disponible. Aller dans l'Onglet Boite.

Le bloc Texte aura une couleur claire différente #ccffff et une marge gauche de 150 px. Ainsi le texte ne coulera pas sous le menu, il restera toujours à droite du menu.

Bloc "pied-de-page"

Le bloc Menu étant flottant à gauche, la suite du document se positionne donc en "coulant" le long de ce bloc, y compris le pied de page.
Le pied de page doit se dégager de ce flottement et reprendre sa place normale  sous le bloc Menu.
Dans l'onglet Boite : 

Voir, dans le head, le code source généré pour les 4 blocs contenus dans wrapper dans cette  feuille de style incorporée.
Avec Kompozer, modifier le code source pour avoir le menu à droite


Menu à gauche Menu à droite
Menu à gauche Menu à droite
#entete {
  border: 1px solid #ffcc00;
  background-color: #ffffcc;
}
#menu {
  float: left;
  width: 150px;
  background-color: #99ff99;
}
#texte {
  margin-left: 150px;
  background-color: #ccffff;
}
#pied {
  clear: left;
  background-color: #ffcccc;
}
#entete {
  border: 1px solid #ffcc00;
  background-color: #ffffcc;
}
#menu {
  float: right;
  width: 150px;
  background-color: #99ff99;
}
#texte {
  margin-right: 150px;
  background-color: #ccffff;
}
#pied {
  clear: right;
  background-color: #ffcccc;
}

Si on supprime float, width, margin et clear, les 4 blocs prendront toute la largeur possible et seront disposés les uns sous les autres.

5 - Mise en forme des blocs avec Cascades

Le sélecteur universel  : * {margin:0; padding:0}
Les avis sont partagés sur l'utilité de placer au début de la feuille de style un sélecteur universel mettant le margin et le padding à zéro. . Cette méthode est pratique pour contrôler le rendu mais  elle annule toutes les valeurs par défaut des navigateurs et des utilisateurs ce qui est justement le principe de la cascade.

En tête

L'en-tête est un élément important de la page. Elle indique le titre du site. Nous choisirons donc le niveau Titre 1qui est réservé au titre de première importance. Sans <h1> les robots ne pourront pas indexer correctement notre site.
Il ne faut surtout pas que l'en tête soit une image

Texte

Chaque page de texte aura sans doute son propre titre. Afin de bien le distinguer du titre principal de la page,
Nous choisirons le niveau Titre 2.

Le texte sera justifié et dans l'onglet boite nous donnerons un espacement gauche et droite de 1 em
Menu

Avec une disposition menu à gauche ou à droite, on peut donner, pour plus de symétrie, à la première ligne du menu le niveau de Titre 2

Résultat de la structure dans le navigateur

Voir l'effet obtenu dans la page Pascal.

Wrapper

Ici, les différentes parties en-tête, menu, texte, pied de page ont juste été habillées de couleurs de fond, mais rien n'empêche d'y ajouter ou de remplacer les couleurs par une image de fond.
On peut même ne pas avoir de couleur ou d'image de fond pour chaque partie et avoir une image générale de fond pour la page totale, l'élément body de html (voir premier exemple) ou une image de fond pour tout le wrapper (voir deuxième exemple).
Pour obtenir ce résultat il faut procéder dans cet ordre :

Voir les exemples:
Forum Geckozone dédié à Kompozer
Atelier Kompozer Club Arobase St Estève

6 - Bloc avec débordement : technique de l'overflow

La méthode consiste à intégrer dans une page web, une boite avec ascenseur.
C'est très facile avec CSS. Dans Cascades créer une règle de style pour le div / onglet boite / Débordement / Auto.
On peut appliquer une image d'arrière plan qui ne défile pas, calée à droite par exemple, avec un texte justifié et un padding droit un peu plus large que l'image de fond. Pour visionner

technique de l'oveflow                   code CSS appliqué à la boite

7 - Mise en forme des blocs avec  la webDev

Exercice : modification de l'aspect d'une page avec la WebDev.
Ouvrir dans Firefox la page tuto_css.html , dérouler le menu CSS de la WebDev et choisir : Éditer les CSS.
Cette page ne contient pas de wrapper, juste un menu et un contenu.

Rappels
Manipulation
  1. Effacer toutes les déclarations css, voici les styles bruts par défaut ...cliquez sur la double-flèche verte pour revenir dans l'état de départ
  2. Ensuite pour chaque ligne commençant par // (mise en commentaire du reste de la ligne), veuillez annuler la mise en commentaire en effaçant les 2 caractères / de début de ligne! Regardez l'effet produit avant de passer à la ligne suivante.
  3. Laissez libre cours à votre imagination, vous ne casserez rien en modifiant ces déclarations
  4. A la fin sauvegarder le nouveau css et visualiser l'effet du changement sur un second fichier

8 -  Exercice de reproduction d'une page publiée sur Internet, grâce aux informations données par la Webdev.

Cet exercice sur fichier pdf MechanicalSpirit est adapté pour Kompozer à partir de l'original conçu sur le Site du zéro pour être réalisé entièrement avec l'éditeur Notepad++.
Voir la page à réaliser

9 - Positionnement

Le positionnement traditionnel est par défaut "dans le flux" : les éléments, blocs ou inline, se suivent les uns les autres.
Le float permet de forcer des éléments à droite ou à gauche des suivants.

Il existe dautres positionnements, utilisés par exemple pour les menus.
Voir à ce sujet le site d'Alsacreations Comprendre le positionnement des balises en CSS
Les positionnements Absolu et Fixé sortent l'élément du flux. C'est à dire qu'il n'a plus d'interaction avec les autres éléments (frères, ancètres) du document en flux courant.

Bouton dissocier du texteNote : Le bouton en forme de punaise "Dissocier du texte" situé à droite de la barre d'outils1 permet de positionner un bloc en position absolute mais il est déconseillé de l'utiliser car il génère du désordre. Il ne faut utiliser les positions "absolute" que si l'on maîtrise parfaitement CSS. Et, dans ce cas,  ce bouton n'est plus utile.

10 - Mises en page flexibles

Les mises en page fixes, calculées en pixels, sont les plus faciles à comprendre surtout pour les débutants.
Leur inconvénient est qu'elles ne s'adaptent pas à la taille de l'écran de l'internaute.
Il est possible d'avoir des mises en page flexibles, s'adaptant à la largeur de l'écran, mais les images doivent conserver leur dimension sinon l'affichage est déplaisant.

Faire un site pour toutes les résolutions d'Alsacreations donne un bon aperçu de ces techniques, leurs avantages et leurs inconvénients.

Mise en page liquide
La largeur des zones div est exprimée en % et dépend des dimensions de la fenêtre du navigateur. Par exemple :
Mise en page élastique avec em
Elles sont sont au début encore plus difficiles à comprendre. Elles se basent sur la taille de la police utilisée.
L'astuce consiste à définir une taille de police de 62,5% pour body et ensuite augmenter la taille de police des autres éléments.
1 em correspond à la taille de police standard. Pour presque tous les navigateur la police standard  est de 16 px.
donc le raisonnement mathématique est simple : 10 est à 16 ce que 62,5 est à 100.
Pour convertir une mise en page basée en pixels en une mise en page utilisant em il suffit de tout diviser par 10 et de remplacer px par em.
Mais les concepteurs de sites rencontrent parfois des surprises avec ces mises en page flexibles car le résultat n'est pas toujours celui escompté.Haut de page
Jos Argaud - Mise à jour 12/03/2009  Pour m'écrire  Document made with KompoZer  D'après le cours d'Yves Mairesse et avec son consentement