TP3 : CSS

Ce TP est à terminer au plus tard 48h avant la prochaine séance.

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 inhiber 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 donnant des conseils aux voyageurs, composé d’une page de sommaire listant (avec des liens) les pays de destination à risques et d'une page par pays. La mise en page sera définie par deux feuilles de style : l'une pour la visualisation sur écran (fichier fourni, à compléter), 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ègle 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 pays, en faisant appel à la feuille de style ainsi définie. Pour le contenu, vous pourrez vous inspirer du site web du Ministère des affaires étrangères.

Définir une feuille de style adaptée à une impression économe sur imprimante noir et blanc. Pour cela,

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

Si vous avez terminé tout ce qui précède avant la fin de la séance :
Au début de la page d'un pays, placez un tableau à 1 ligne contenant des liens internes vers les rubriques de la page. Dans chaque cellule, le lien sera en gras et de couleur claire sur fond sombre ; lors du passage de la souris sur la cellule les couleurs s'inverseront et la police sera normale. Dans la version imprimée de la page, ce tableau n'apparaîtra pas.