Conception de sites web dynamiques

TP4 - Feuilles de style CSS

Votre travail doit être accessible dans votre répertoire ~public_html/TP4/ , 48h avant le prochain TP. Les TP non accessibles via le web ne sont pas corrigés. 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 la page d'accueil d'un journal (existant ou imaginaire). Dans la feuille de style, arrondissez les coins des blocs, puis :

Header

L'en-tête de la page contiendra le logo du journal et son nom ou, si celui-ci apparaît assez clairement dans le logo, son objet, ou encore sa devise.

Nav

Le menu sera composé de la liste des liens vers les rubriques. Celle-ci sera organisée soit sous forme d'une liste non ordonnée (en désactivant les puces), soit sous forme d'un tableau (avec des bordures invisibles).

Les titres de rubrique doivent être assez courts pour tenir sur une ligne chacun. Le passage de la souris sur un lien doit permuter les couleurs de police et de fond de ce lien.

Utilisez l'attribut title pour préciser par une info-bulle le contenu de chaque rubrique.

Article

Les articles correspondent aux actualités les plus récentes. Pour chaque article :

Aside

Footer

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

page_web
Figure 1