Médiaforma

All posts tagged pied de page

Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans la section précédente, vous avez appris à utiliser les balises <div> pour créer des blocs indépendants les uns des autres. Nous allons maintenant utiliser trois balises <div> pour créer une page Web comportant un bandeau supérieur, une zone centrale et un pied de page.

Le code HTML est très simple. Après avoir fait référence à la feuille de styles styles7.css via une balise <link>, trois balises <div> sont définies les unes à la suite des autres. Pour les différentier, nous affectons un identifiant unique à chacune d’entre elles : bandeau, contenu et pied. Pour ne pas laisser les balises <div> vides, nous y ajoutons un peu de texte.

Si vous vous demandez d’où vient le texte de la balise d’identifiant contenu, j’ai simplement fait un copier-coller depuis le site http://lipsum.com :

Passons à la feuille de styles. Vous vous en doutez, elle contient les styles relatifs aux identifiants bandeau, contenu et pied. Ici, nous nous contentons de définir la largeur, la hauteur et la couleur d’arrière-plan de chaque élément :

Les codes de couleur hexadécimaux ont été créés sur le site http://www.code-couleur.com/.

Affichons la page div2.html dans Internet Explorer. Le résultat est bien conforme à ce qui était attendu :


Pour créer un nouvel en-tête, sélectionnez l’onglet INSERTION dans le ruban, cliquez sur l’icône En-tête dans le groupe En-tête et pied de page et sélectionnez l’un des en-têtes prédéfinis.

D’une façon équivalente, pour créer un pied de page, sélectionnez l’onglet INSERTION dans le ruban, cliquez sur l’icône Pied de page dans le groupe En-tête et pied de page et sélectionnez l’un des pieds de page prédéfinis.

Pour modifier l’en-tête que vous venez d’insérer, cliquez sur l’icône En-tête dans le groupe En-tête et pied de page et sélectionnez Modifier l’en-tête dans le menu. Toutes les commandes de mise en forme au niveau caractère et paragraphe peuvent être utilisées. Vous pouvez également faire appel à l’onglet Création. Grâce à lui, vous pourrez, par exemple, insérer les numéros des pages, la date et l’heure, des images et/ou des cliparts.

Remarquez également l’icône QuickPart, qui vous permet d’accéder aux propriétés du document et aux insertions automatiques. Si vous sélectionnez Organisateur de blocs de construction dans le menu, vous avez accès à plusieurs objets préformatés qui donnent un aspect professionnel à votre document. Ces objets sont appelés “blocs de construction”. Vous pouvez les personnaliser pour qu’ils s’intègrent parfaitement dans vos documents.