Réaliser le site Bic à l'aide de calque, avec les éléments suivants: Image de fond: fondBIC.gif (20k) Personnage BIC: bicman.jpg (4k) Barre de navigation,

Présentation au sujet: "Réaliser le site Bic à l'aide de calque, avec les éléments suivants: Image de fond: fondBIC.gif (20k) Personnage BIC: bicman.jpg (4k) Barre de navigation,"— Transcription de la présentation:

1 Réaliser le site Bic à l'aide de calque, avec les éléments suivants: Image de fond: fondBIC.gif (20k) Personnage BIC: bicman.jpg (4k) Barre de navigation, image cliquable: menu2.jpg (4k) Barre de navigation, image cliquable: menu1.gif (14k) Balle: big.jpg (2k) Balle: small.jpg (1k) Procédure: décomposer le document en calques superposés Identification des styles pour chaque calque Ecriture du code

2 Analyse des calques L'image de fond impose le positionnement des calques: 5 calques (3 x balle, 1 x barre de navigation et le calque principal Calque en position absolue. Nom du Style: main Calques (ou directement l'image) en position absolue. Définition du style dans le calque lui même Calque en position absolue. Nom du Style: menu1

3 Position des calques (150, 100)Width 450 Height 1000 (10, 30) Width 550 Height 50 (10, 10) (75, 80) (10, 110)

4 Calque main (10, 10) Calque contenu dans main, en position absolue par rapport à main, son conteneur (calque parent). Nom du style: menu2 Width 300 Height 40 Image de fond du calque main, avec positionnement précis Définition dans le style: main Marge dans le calque main Définition dans le style: main (paramètre PADDING et non MARGIN!) Hauteur de ligne Style pour mise en forme du texte, Définition dans le style: titremain Style pour mise en forme du texte, Définition dans le style: textmain Retrait 1 ière ligne