TP3 : CSS

Ce TP est à terminer avant le jeudi 14 février à 12h.

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.

Pour valider une page de css: http://jigsaw.w3.org/css-validator/ . Vous pouvez également voir les erreurs sur la console d'erreurs du navigateur (outils / Développeur web / console d'erreurs)

L'ajout d'un souligné (ou tout autre caractère) devant le nom des propriétés permet d'en iniber l'action. Cela peut être plus pratique que de supprimer la ligne si l'on cherche à supprimer l'effet temporairement.

Vous pouvez déterminer la couleur de n'importe quel objet sur votre écran en lançant le programme gcolor2 à partir d'un terminal. Cliquez ensuite sur le bouton "pipette" et sur la couleur que vous souhaitez déterminer. La valeur RGB et hexadécimale vous est alors donnée.
Sinon, ajouter le module colorzilla au navigateur firefox, et utiliser la pipette en bas à gauche pour recupérer la couleur d'un pixel sur l'écran.

Exercice

On souhaite réaliser un site web simple de journal, composé d’une page par article et d'une page de sommaire listant les articles, avec un lien sur chacun, sur le modèle de la figure 1. Le bandeau supérieur est un tableau de liens vers des rubriques du journal (ces liens renverront vers la page courante dans cet exercice). La mise en page sera définie par deux feuilles de style : l'une pour la visualisation sur écran, l'autre pour l'impression en noir et blanc.

Dans les fichiers CSS, vous préciserez par un commentaire succinct l'objectif de chaque règles de style

Définir la feuille de style écran de ce site web, selon les spécifications suivantes :

Ecrire les pages html du sommaire et d’un article en faisant appel à la feuille de style ainsi définie. Vous pouvez écrire les articles en générant du faux texte "ipsum lorem" automatiquement

Définir une feuille de style adaptée à une impression économe sur imprimante noir et blanc. Cela implique de

Intégrer cette possibilité dans les pages html. Tester grâce à la fonction "aperçu avant impression" du navigateur.

Fig. 1 : mise en page du sommaire.