Compléments CSS

Licence professionnelle ATC Webmestre

Alexandre NiveauFabrice Maurel

Enseignement des technologies du Web

 

Compléments CSS

Notes de cours

  • Compléments CSS
    • Préfixes constructeurs
    • Détection de fonctionnalités CSS (et JS)
    • CSS resets et normalize.css
    • Pré-processeurs CSS

Travail personnel

Objectifs

De nouveau, pas d'exercice d'application du cours pour ce TP, mais un petit exercice de reproduction pour vous exercer (moins long que celui de l'examen sur machine). Si vous préférez, vous pouvez aussi…

  • choisir et traiter un sujet d'examen dans les annales
  • commencer ou continuer votre mini-site
  • ou bien vérifier que son ergonomie est correcte (ou critiquer celle des autres)
  • finir les exercices des TP précédents
  • ou encore vous pencher sur les corrigés des TP précédents…

Exercice 1 — Reproduction d’un modèle

On vous donne une image d'une page web, version simplifiée d'une page du site WikiHow.

Exemple de page à réaliser
Capture d'écran de la page
(Cliquer pour voir en taille réelle ; attention, le fond noir qu'affiche Firefox ne fait pas partie de l'image !)

Comme d'habitude, on vous demande de créer le code HTML et CSS permettant de reproduire ce modèle, en portant une attention particulière à la catégorisation des images : quelles sont celles qui font partie du contenu (et vont donc dans le HTML) celles qui sont purement présentationnelles (et vont donc dans le CSS), et celles pour qui c'est ambigu (et vous avez donc le choix) ?

Archive et organisation des répertoires

Télechargez cette archive et extrayez le contenu sur votre espace web :

--wikihow/
|-- fichiers/
|   |-- textes.txt
|   |-- logo.png
|   `-- etc.
`-- rendu/
    |-- images/
    |-- index.html
    `-- skin/
        |-- images/
        `-- screen.css

Les images nécessaires et les textes (fichier textes.txt) sont contenus dans le répertoire fichiers. Vous réaliserez le travail dans le répertoire rendu, en séparant bien les images de contenu (répertoire rendu/images) des images de style (répertoire rendu/skin/images).

Informations complémentaires

La font stack utilisée pour toute la page est "TeX Gyre Heros", Helvetica, Arial.

La largeur de la « colonne » centrale est 760px. Pour le reste des tailles (police, marges, paddings…) faites au mieux, on regardera l'effet global, pas le nombre de pixels. Néanmoins, pour vous éviter de trop tâtonner, les différentes tailles de police utilisées sont 10px, 12px, 13px, 16px, 18px, 20px, 35px.

Les couleurs de fond sont le blanc, le vert #93B874, le gris clair #F6F5F4, et le gris foncé #ECEBE8. Les bordures sont en gris #E5E5E5 ou en vert #89AC6C (menu).

La couleur de base du texte est #545454 (brun très sombre). Les autres couleurs de texte sont le blanc (pied de page), le gris #737373 (fil d'Ariane), le noir #242424 (titres), et le vert très sombre #336633 (liens).

Encore une fois, gardez en tête que le plus important est d'avoir un résultat fonctionnel minimal, et autant que possible du HTML sémantique.