Conception de sites web dynamiques

TP4 - Feuilles de style CSS

Votre travail doit être accessible dans votre répertoire ~public_html/TP4/ avant le jeudi 21 février à 12h. La feuille de style CSS doit être commentée.

L'objectif de ce TP est de pratiquer l'utilisation des feuilles de style CSS. N'oubliez pas de valider vos codes :

Préparation de l'environnement de travail

Pour ce TP nous allons travailler avec Firefox et son extension Web Developer. La barre d'outil de Web Developer apparaît en allant dans le menu Affichage > Barre d'outils > Web Developer Toolbar. Si celle-ci n'est pas disponible, il faut commencer par l'installer en cliquant sur "Install Now" sur la page de cette extension.

L'éditeur de feuilles de style de Web Developer s'obtient en cliquant sur CSS > Edit CSS. Dans le volet qui s'ouvre doit apparaître le début de la feuille de style associée au document.

N'oubliez pas de sauver régulièrement vos modifications pour les rendre persistantes. Cliquez pour cela sur l'icone disquette au dessus de la feuille de style.


Placement des blocs de texte

Nous allons commencer par placer les différents blocs de texte dans la page web, selon le schéma de la figure 1. Pour tester votre solution, vous ferez une feuille de style CSS commentée définissant les propriétés des blocs et une page HTML5 dans laquelle vous remplirez les blocs avec du faux texte pour l'instant. Donnez des couleurs de fond différentes aux différents types de bloc pour bien les visualiser mais ne faites aucune fioriture (arrondis des angles, ombres etc) à ce stade.

Vous partirez du fichier style.css disponible ici .

Pour le placement des blocs nav, article et aside, plusieurs solutions sont possibles :

Dans tous les cas, faites attention aux paddings et aux marges, et n'oubliez pas que les propriétés de largeur, hauteur et position sont celles du contenu, pas celles du bloc de couleur qui apparaît. Pour bien positionner des boîtes les unes par rapport aux autres, il est conseillé d'utiliser les mêmes unités (px, mm, ou %) pour toutes les boîtes. Les hauteurs doivent être fixées de manière à ce que les bas des 3 blocs au dessus du footer soient alignés.

Remplissage et décoration des blocs

La mise en page ainsi créée va servir à faire une page personnelle (la vôtre ou une imaginaire). Dans la feuille de style, arrondissez les coins des blocs, puis :

Header

Nav

Article

Les articles correspondent généralement aux actualités du sujet de la page. Chaque article aura un titre de type h2 que vous redéfinirez à de telle sorte qu'il apparaisse en gras dans un rectangle arrondi de la même couleur que le bloc article mais en plus foncé, avec une couleur de police claire. Pour pouvoir afficher plus d'info sans nuire à la lisibilité, faites les modifications suivantes sur le style article :

Aside

Mettez ici votre photo et quelques mots de présentation.

Footer

Mettez ici la date de mise à jour, l'adresse du webmaster, les logos indiquant la conformité W3C du code...
page_web
Figure 1