Le dossier Einstein est une grosse partie de notre apprentissage HTML-CSS, par le biais de deux mise en page;
Cet exercice sera long et laborieux car chaque étape sera disséqué, effectué et corrigé; le tous sera entrecoupé de cours et de petit exercices basique pour mettre en application ces nouveaux acquis.
L’essentiel des différents cas de figure que je pourrais rencontrer dans le HTML et CSS va ainsi m’être enseigné.
Si le positionnenement à l’aide du « float » et les différentes positions (absolute, relative et fixed) ont déjà été évoquées, cet exercice me permet d’approfondir et de réviser mes acquis.
Pour la première mise en page, ces connaissances sont nécessaire et suffisantes
J’ai donc à ma disposition un texte, des images, et une image papier du résultat à obtenir.
L’image va ainsi être créé pas à pas avec de multiples consignes.
Dans un premier temps, la mise en page est assez basic car seul le fichier HTML est créé.
C’est ainsi qu’il faut sectionner convenablement le fichier à l’aide de balises « body », « section », « img », « caption », « figcaption », « div »,…. tout en y incorporant des listes à puces, des « id », des « class », des « ancres »,…. et un tableau.
Voici quelques lignes du code HTML structuré et finalisé:
Ainsi que la page exempte de tout CSS:
Puis, j’entame la mise en page à l’aide du CSS:
-les différents liens doivent changer d’état au survole (couleur de texte, couleur de fond, suppression du soulignement)
-le menu de navigation dans la colonne de gauche doit être en position fixe, et la barre noir la plus épaisse devient rouge au survole des liens
-l’image dans la bannière et le fond, sont des images incorporées via le CSS
-le bouton « retour » redirige en haut de la page, et les titres du menu de navigation redirigent à chaqu’un des titres identique de la page
Le reste est visible sur le document papier.
C’est ainsi que je réalise cette page en additionnant un code CSS:
La deuxième mise en page va par la suite être créé.
Les nouveautés sont:
-la création d’un dégradé en fond
-la création de lettrine en début de certains paragraphe
-un menu se déroulant au survole, avec une flèche qui change de sens
-un tableau et des figcaption se déroulant au survole
-une gestion de la vitesse de déroulement en incorporant du « javascript » générer automatiquement
Le reste est visible sur le document papier.
Les pseudo-éléments prennent alors tout leurs sens; j’utilise aussi la propriété « clearfix », très utile pour englober des éléments flottant.
De multiples astuces me sont enseignés tel que l’utilisation des bordures d’un rectangle pour créer des flèches, les générateur de codes pour dégradés, l’importance de laisser un titre h1 pour le référencement même si il est en « display:none » ou « color:transparent »….
Bref j’obtiens ceci à l’aide du résultat final:
jeromeimm02.wordpress.com 