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 'objets' superposés Identification des styles pour chaque objet Ecriture du code

2 Analyse des calques et définition des styles 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. Image en position absolue. Calque en position absolue, contenant l'image de la barre de navigation.

3 Position des objets (left, top) et dimensions (width, height) (150, 100)Width 450 Height 1000 (10, 30) Width 550 Height 50 (10, 10) (75, 80) (10, 110)

4 Calque principal : main (10, 10) Calque contenu dans main, en position absolue par rapport à main, son conteneur (calque parent). Width 300 Height 40 Image de fond du calque main, avec positionnement précis. Marge dans le calque main Hauteur de ligne Style pour mise en forme du texte, Style pour mise en forme du texte Retrait 1 ière ligne