Ce tutoriel a pour objet de vous apprendre à démarrer une mise en page CSS depuis Photoshop.
ce tutoriel n'a pas pour but de vous apprendre à utiliser les CSS. Des sites spécialisés existent pour cela comme l'excellent http://css.alsacreations.com/
Vous réaliserez ainsi à titre d'exemple cette page html
Pour suivre ce tutoriel, il est indispensable d'avoir suivi la première partie : Découper un design web
Reprenons notre exemple:
De ce que Photoshop a produit nous ne conservons que l'image du centre. Pour faire le cadre, on "entoure" l'image de la balise la plus neutre ( certains diront la moins sémantique) la balise <div> :
<div> <img> </div>
Ce qui donne cette page minimaliste. Comme rien n'est spécifié en taille, le cadre prend la hauteur minimum, c'est à dire la hauteur exacte de l'image et la largeur maximum.
Spécifions donc des dimensions pour ce cadre en lui rajoutant des propriétés css de hauteur (height) et largeur (width)
On ne voit toujours rien parce que le cadre est blanc sur fond blanc, ajoutons donc notre couleur #8B4E4E
Pour séparer l'image du haut et du coté gauche du cadre, nous rajoutons une marge, toujours grâce au css et le résultat est fidèle au rendu orginal.
(comparer avec la mise en page html)
Il est temps de rentrer dans le vif du sujet et de découper notre design. Comme nous réalisons une mise en page en css, l'html que produit photoshop ne nous intéresse pas. Nous n'allons conserver uniquement les images que nous avons identifiées précédement.
C'est pourquoi nous allons nous contenter d'ouvrir le fichier d'origine dans photoshop et d'utiliser l'Outils recadrement (Crop Tool) raccourci 'C' pour définir toutes nos futures images.
Nous allons ainsi créer toutes les images des titres blancs:
Le but est de laisser un minimum d'applat de couleur sur les images pour optimiser le poids.
Si vous voulez être précis, utilisez la commande Image -> Rogner (Trim) dans les menus du haut.
Vous pouvez procéder ainsi pour générer toutes les images ou si vous voulez vous assurer qu'elles sont bien toutes calés,
utilisez la technique expliquée de cette animation (800ko) :
Dans une mise en page en css, le code HTML représente la structure du document. C'est pourquoi nous allons l'écrire sans penser (ou presque) à la future mise en page.
Ce qui donne cette page
Le titre de la page My bubble Garden est entouré de la balise <h1>
Les deux titres secondaires Introduction et Alors de quoi s'agit-il ? sont entourés de la balise <h2>
Les listes sont entre <ul> et les paragraphes de textes entre <p>
Nous ajoutons juste ensuite quelques id pour pouvoir sélectionner correctement les éléments html : aucun changement apparent
Nous allons maintenant insérer les titres blancs que nous avons créés, nous n'allons pas supprimer le texte pour autant mais nous allons le conserver dans l'attribut Alt="" de notre image.
Puis on rajoute enfin le code css voila c'est finit !
