La première action que nous allons réaliser aura pour objectif de nous aider à bien structurer notre page HTML.
Réorganiser les calques
Certains graphistes organisent le contenu de leur maquette en la pensant déjà pour l’intégration. Les calques sont alors déjà organisés en dossiers de contenu qui contiennent tous les calques d'une section donnée. Par exemple, vous retrouverez certainement un dossier “header” englobant les calques dédiés au haut de page de votre site. Le dossier d’en dessous contiendra le contenu qui suivra dans la page (la première section) et ainsi de suite. Dans notre cas, Blaz a créé un dossier <header> et un dossier <footer>. Top !
Pour autant, nous pouvons remarquer qu’ils ne sont pas du tout dans le bon ordre. Je vous conseille de prendre 5 minutes pour réorganiser les calques pour qu’ils suivent l’ordre de votre page HTML. Ce sera ainsi plus facile de vous y retrouver quand vous coderez.
Si votre maquette n’inclut pas de dossiers, je vous conseille de regrouper les calques en dossiers pour une meilleure organisation.
Pour ajouter un dossier, cliquez sur la petite icône en forme de dossier située en bas à droite du panneau “Calques”.
Faire connaissance avec la maquette
Prenez le temps de parcourir les éléments en désactivant et en réactivant les calques. Vous verrez ainsi l’ordre de priorité ainsi que la structure de votre maquette. Cela vous aidera à organiser votre HTML.
Amusez-vous également à distinguer les différents formats de contenu : texte, image, dégradé, forme géométrique… En général je réalise une première esquisse, sur une feuille de papier, des éléments de la maquette que je “traduis” en HTML. Je vais du global au particulier, c’est-à-dire de l’élément le plus grand à l'élément le plus petit. J’en profite pour ajouter quelques éléments qui ne font pas vraiment partie de la maquette, comme la future balise <ul> pour les listes ou la <form> pour les formulaires.
Vous remarquerez, si vous regardez mes esquisses, que les proportions ne sont pas respectées à la lettre. Ce n’est pas grave, car le principal pour l'instant est de bien reconnaître les éléments qui seront intégrés en HTML. Nous allons nous intéresser aux proportions et aux tailles dans le prochain chapitre !
