Université de Nice Sophia Antipolis
2012-2013
Licence 1 Info, Maths-Info, Maths
Retour sur la page du cours

Introduction au Web
TP Styles CSS2
- ENONCE -

L'ensemble de vos pages doit rester valide. N'oubliez pas de faire une page d'accueil pour ce td : créez un répertoire css, placez-y un fichier index.html que vous compléterez au fur et à mesure, et mettez un lien depuis votre page d'accueil pour le cours intro web.

Vous placerez vos styles dans des fichiers indépendants des fichiers html fournis.

Une première page


Récupérez le fichier css_exo1.html et mettez-le sur votre site.

Modification de style

Listes non ordonnées : Modifiez les styles des listes non ordonnées pour que la puce soit un carré.
Acronym : Modifier les styles des Acronymes pour qu'ils soient sur fond vert pâle, écrits en vert foncé avec une police de caractère grasse.

Note : si vous ne voyez pas comment trouver une couleur verte pâle, et une verte foncée, vous pouvez utiliser la palette de gestion des couleurs d'un éditeur de texte ou d'un éditeur d'image

Listes de définition (<dl>, <dt> et <dd>) : Modifiez les styles concernant les listes de définition pour que :
- l'ensemble des définitions soit encadré par un cadre orange pointillé de 4 pixels d'épaisseur
- que les termes définis soient en gras
- que les définitions doivent être en italique

Listes ordonnées : Modifiez les styles des listes pour que :
- les listes ordonnées de premier niveau soient numérotées en chiffres romains majuscules
- les listes ordonnées de deuxième niveau (i.e. imbriquées dans une autre <ol>) soient numérotées par des lettres grecques minuscules
- les listes ordonnées de troisième niveau soient numérotées par des lettres latines minuscules

Class et Pseudo-class

Note : la numérotation automatique en CSS n'est pas prise en compte par internet explorer.

Numérotation automatique : Faites en sorte que les numéros des titres de niveaux 1, 2 et 3 correspondent à la numérotation des listes ordonnées que nous avons fixée ci-dessus, comme par exemple que les h1 aient la même numérotation que les ol de premier niveau.
Cette numérotation doit être automatique et les numéros doivent recommencer au début avec les titres de niveaux supérieurs.

Créez le style pour que les paragraphes "important" :
- s'affichent en rouge dans un cadre(bordure) bleu d'épaisseur 2 pixels, avec un fond gris #dddddd
- soient inscrits (le texte doit être contenu) dans un rectangle de largeur 8 cm et de hauteur 2.5cm
- possèdent des marges externes de 1cm et des marges internes de 0.5cm.
- ne débordent pas du cadre(espace d'affichage) avec ou sans scrollbar
- lorsque la souris passe dessus, le texte caché devienne visible (pour l'exemple, inutile avec les scrollbars).

Ajoutez une numérotation automatique à ces paragraphes "important". Faites en sorte que cette numérotation recommence avec chaque titre de niveau 2. Vérifiez en copiant collant ce paragraphe dans le fichier.
Finalement, ajoutez (toujours de manière automatique) le numéro du chapitre (titre 1, grand chiffre romain) et le numéro de section (titre 2, lettre grecque) en plus de la numérotation automatique pour les paragraphes "important".

En utilisant l'attribut 'first-letter', modifier le style des éléments des listes (li) pour que la première lettre soit deux fois plus grosse et de couleur orange.
Toujours en utilisant l'attribut 'first-letter', modifier le style des éléments paragraphe pour que la première lettre soit deux fois plus grosse et de couleur orange.

Mise en page : première partie

Téléchargez la page css_exo2.html et installez-la sur votre site web (répertoire css).
Regardez le code source de la page. Il y a déjà des noms de class pour les div. Observez aussi la position de ces div dans le texte. Avec le css, nous allons complétement changer la physionnomie de la page sans changer le code html.
A la fin, la page ressemblera à cela cet aperçu dont le fait qu'il soit sur 2 pages ne doit pas vous perturber.

Nous allons commencer par placer l'entête en haut de la page. L'entête est fournie dans le fichier html. C'est la div de class "header". Elle est en bas du fichier html.
En utilisant la propriété position, placez cette div en haut, qu'elle reste toujours en place même si on utilise la barre de défilement. Elle doit occuper toute la largeur de la page et faire 2 ligne de haut (2.4 em). Changez sa couleur de fond pour du gris et changez la couleur de son texte en blanc.

Nous allons continuer en plaçant les pieds de page en bas de la page. Les pieds de page sont déjà inclus. C'est la div de class "footer". Elle est en haut du fichier html.
En utilisant la propriété position, placez cette div en bas, qu'elle reste toujours en place même si on utilise la barre de défilement. Elle doit occuper toute la largeur de la page et faire 2 ligne de haut (2.4 em). Changez sa couleur de fond pour du gris et changez la couleur de son texte en blanc.

A ce stade, la mise en page est assez avancée. Cependant, notre entête et nos pieds de page masquent une partie du texte. Nous allons remédier à ce problème

En utilisant les marges (externes) sur la div qui contient tout le reste de la page (c'est-à-dire tout le corps sauf l'entête et les pieds de page. C'est d'autant plus visible que l'indentation du fichier nous aide à mieux percevoir cette organisation). Si vous n'avez pas encore trouvé, cette div est celle dont la class est "container".

Il ne nous manque plus grand chose pour atteindre l'objectif illustré par le fichier exo2.pdf. Il faudrait que le texte "Texte à gauche de la page" (ils sont dans des balises div de class "left") soit bien à gauche et que le reste soit bien à droite de la page.

En utilisant les marges et les propriétés float, width et margin pour bien répartir les divs sur les côtés de la page. Les divs droite de la page occupent 80% de la largeur de la page, celle de gauche 20%.
Changez l'apparance des div de class "content" pour qu'elles soient sur un fond #BBFFFF . Changez aussi l'apparance des div de class "left"pour qu'elles aient une couleur de fond gris clair.

Voyez-vous maintenant l'utilité des div ?

Mise en page : seconde partie

À l'aide d'un tableau

Reprenez le fichier de l'exercice 1, "votre" css_exo1.html. Vous allez réorganiser un peu le fichier html, en découpant le contenu du document (ce qu'il y a entre la balise "<body>" et "</body>") en deux parties, à l'aide d'un tableau qui n'a qu'une ligne et deux colonnes.
Dans la première cellule (td), vous placerez le menu (les liens internes). Dans la seconde cellule (td), placez le reste du document.
Finalement, en plus du premier fichier style (de la première question), ajoutez un lien (link) dans l'entête vers un autre fichier style, que vous pouvez appeler "exo3.css". C'est dans ce fichier "exo3.css" que vous répondrez à la question suivante.
Pour l'instant, le menu (liens internes) est au milieu de la page. Nous allons faire en sorte qu'il reste toujours en haut et à gauche de la page. (Ceci ne fonctionnera pas avec internet explorer 6, mais avec internet explorer 7, firefox, opéra, etc.).
Attribuez un style à la cellule de gauche et un autre style à la cellule de droite (par exemple avec une classe css).

Nous allons commencer par modifier le style de la cellule de gauche.
Pour que le menu soit toujours en haut à gauche, il faut en modifier la position. Regardez la propriété position de css, et utilisez-là pour que le menu soit effectivement placé comme désiré.
Le menu (à gauche) doit ètre sur fond gris, et prendre toutes la hauteur de la page.
Il y a un problème de taille : fixez la largeur de la colonne de gauche (par exemple à 30ex, ce qui signifie la largeur occupé par 30 caractère "x").

Maintenant, c'est le texte de la colonne de droite (tout ce qui n'est pas le menu) qui est en partie masqué. Pour remédier à cela, vous devez préciser une marge (interne ou externe selon où vous appliquez la mise en forme CSS). Choisissez bien cette marge.

Avec des div

Refaites la même chose avec des balises "div" à la place d'utiliser un tableau.

Tableaux

Dans un nouveau fichier (tab1.html) faites un tableau qui ressemble à table1.png.
Un fichier html source est disponible dans le ficher exo_tab1.html (les classes css sont déjà attribuées aux balises).

Dans un nouveau fichier (tab2.html) faites un tableau qui ressemble à table2.png
L'image est disponible via le logo de l'UNS sur le site du departement info
Un fichier html source est disponible dans le ficher exo_tab2.html (vous devez attribuer les classes css aux balises).

Valid HTML 4.01 Strict

Valid CSS!