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.
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
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.
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 ?
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.
Refaites la même chose avec des balises "div" à la place d'utiliser un tableau.
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).
