1.Conception graphique du site 'Algoma' par la technique des tableaux Réalisez la page d'accueil du site suivant le modèle et les images ressources fournis.

Présentation au sujet: "1.Conception graphique du site 'Algoma' par la technique des tableaux Réalisez la page d'accueil du site suivant le modèle et les images ressources fournis."— Transcription de la présentation:

1 1.Conception graphique du site 'Algoma' par la technique des tableaux Réalisez la page d'accueil du site suivant le modèle et les images ressources fournis dans les diapositives suivantes, en utilisant la technique des tableaux en HTML. 2.Images réactives (cours Javascript) Les images du menu de navigation réagissent lors du passage de la souris au-dessus et se transforment suivant les indications données ci-après. Développez et optimisez le code javascript permettant de réaliser cet effet.

2 home01.jpg 42x420 home02.jpg 283x184 home03.jpg 283x26 home05.jpg 233x299 home04.jpg 212x420 home06.jpg 233x121 button01.jpg 283x33 onbutton01.jpg 283x33 button02.jpg 283x27 onbutton02.jpg 283x27 button03.jpg 283x29 onbutton03.jpg 283x29 button04.jpg 283x26 onbutton04.jpg 283x26 button05.jpg 283x31 onbutton05.jpg 283x31 button06.jpg 283x29 onbutton06.jpg 283x29 button07.jpg 283x35 onbutton07.jpg 283x35 Menu de navigation par images réactives

3 home02.jpg 283x184 home01.jpg 42x420 home06.jpg 233x121 home04.jpg 212x420 home03.jpg 283x26 home05.jpg 233x299 button01.jpg 283x33 button02.jpg 283x27 button03.jpg 283x29 button04.jpg 283x26 button05.jpg 283x31 button06.jpg 283x29 button07.jpg 283x35 Réarrangement des images

4 home01.jpg home02.jpg home03.jpg home04.jpg home05.jpg home06.jpg Largeur colonnes Hauteur ligne Identification des lignes et des colonnes du tableau

5 42283212233 184 115 95 26 4 lignes 4 colonnes Découpage en lignes et en colonnes

6 42283212233 184 115 95 26 4 lignes 4 colonnes Espace occupé par les images dans ces lignes et colonnes: fusion de cellules Fusion sur 4 lignes Fusion sur 2 lignes

7 42283212233 184 115 95 26 Programmation d'une ligne définissant la largeur des colonnes et de hauteur 1 pixel, dont les cellules contiennent une image transparente (ex. clearpixel.gif, image de 1px par 1px), mais où l'on force la largeur de l'image à celle de la colonne!

8 42283212233 184 115 95 26 Programmation de la 1ière ligne Attention: dans les lignes suivantes, la somme des cellules (et donc des colonnes) doit être une constante. Dans ce calcul, il faudra tenir comptes des cellules déjà définies dans les lignes précédentes par une fusion rowspan!

9 Résultat : Rajoutons l'attribut valign="top" dans les balises :

10 42283212233 184 115 95 26 Programmation de la 2ième ligne Mauvaise répartition des surfaces des cellules Ici, on ne définit qu'une seule cellule (ou colonne), car les autres ont déjà été définies dans les lignes précédentes par la fusion rowspan!

11 42283212233 184 115 95 26 Programmation de la 3ième ligne Mauvaise répartition des surfaces des cellules Ici, on ne définit qu'une seule cellule (ou colonne), car les autres ont déjà été définies dans les lignes précédentes par la fusion rowspan!

12 42283212233 184 115 95 26 Programmation de la 4ième ligne Mauvaise répartition des surfaces des cellules Ici, on ne définit qu'une seule cellule (ou colonne), car les autres ont déjà été définies dans les lignes précédentes par la fusion rowspan!

13 Alternative: calibrer les hauteurs de lignes, comme nous avions calibré les largeurs de colonnes! Ligne de calibrage des colonnes

14 Puis, enfin insertion d'un tableau pour les liens dans la cellule définie en ligne 2 La ligne 2 est remplacée par :