Créer un webdesign e-commerce – 3/3 Intégration HTML5/CSS3

Créer un webdesign e-commerce –  3/3 Intégration HTML5/CSS3

Programme : Photoshop

Langage : HTML5, CSS3, jQuery

Difficulté : Intermédiaire

Temps estimé : 8 heures

Télécharger les fichiers sources
Vous devez être logués ou enregistrés pour télécharger !

Arnaud STECKLE vous montre comment intégrer un design de site e-commerce avec du HTML5/CSS3 codé « à la main ».

Bonjour à tous ! Bienvenue dans la troisième partie de notre tutoriel e-commerce. Après avoir vu ensemble toute la phase d’organisation et de réflexion créative, la création du design avec Photoshop, nous allons à présent construire notre page d’accueil à partir du PSD. Allons-y c’est reparti pour la dernière ligne droite !

Demo Flash
 

00 – Comment s’organiser ?

Pour revenir sur le déroulement global du projet, nous sommes à l’étape précédant le développement final du site basé probablement sur un CMS e-commerce comme Prestashop ou Magento par exemple. Je rappelle en même temps que le développement ne sera pas traité dans ce tutoriel. Nous allons simplement créer une intégration dite « statique », qui pourra être remise à un développeur pour la rendre dynamique.

Souvenez-vous, dès le début du projet nous avons décidé d’utiliser HTML5 et CSS3 pour créer la page d’accueil et donc tout le site Fine Cookies. C’est un choix évident aujourd’hui pour ce type de site dans le sens où HTML5 est massivement utilisé. Vous verrez que même si la spécification n’est pas officiellement validée, nous utiliserons des balises simples et adaptées pour construire notre squelette.

Nous utiliserons CSS3 pour simplifier la mise en forme de certains éléments, en utilisant des propriétés de basiques comme pour rendre des coins arrondis ou encore faire des animations au survol. Bien entendu, tous les navigateurs (hum surtout Internet Explorer 8 et 9 ;) ) ne supporterons pas ces différentes propriétés. Même sans CSS3, le site devra rester accessible à 100% et fonctionnel pour les navigateurs plus anciens (jusqu’à Internet Explorer 8). Nous allons voir ensemble comment faire face aux différents problèmes que l’on peux rencontrer lors de l’intégration.

Il n’y a pas de méthode « standard » pour intégrer un site web. Il y a bien entendu des principes de base à respecter, mais chacun possède sa propre méthodologie. Pour une compréhension optimale du tutoriel par le plus grand nombre, nous allons coder « à la main », sans pre-processeur CSS (comme Sass ou Less par exemple). Je ne vais pas revenir sur les bases de l’HTML5 et du CSS3, ce tutoriel suppose que vous possédez déjà un niveau intermédiaire. Voici comment nous allons procéder :

Processus :

  1. Découpage des images avec Photoshop.
  2. Création du squelette HTML.
  3. Création du CSS.
  4. Test et débogage final.

Pré-requis :

Fine Cookie Arbo fichiers

Je vous propose de créer 3 dossiers pour y ranger les fichiers CSS, les images, ainsi que les fichiers Javascript. Le fichier HTML sera quant à lui situé à la racine.

Le suspense a assez duré, c’est parti allons-y !

01 – Découpage des images avec Photoshop

Le découpage permet d’isoler les images qui constituent le site. Il suffit d’enregistrer les images dont vous avez besoin pour reproduire au pixel près la maquette Photoshop en CSS. Pour se faire, utilisez les outils de sélection et de recadrage. (Personnellement je préfère éviter l’outil Tranche).

Pensez à enregistrer les images en passant par Fichier > Enregistrer pour le web et les périphériques. À cette étape, projetez-vous déjà dans la future mise en page CSS. Réfléchissez bien à quelles images vous allez découper, quels éléments graphiques devez-vous prévoir pour les fonds par exemple et aussi à quels éléments peuvent être rendus en pur CSS.

Très important, utilisez toujours le format d’image le plus adéquat, avec l’image la plus optimisée possible.  J’entends par là des images légères, en .png si il est nécessaire d’avoir un fond transparent, en .gif si l’image comporte un faible nombre de couleurs, en .jpg si c’est une photo. C’est une des contraintes de l’intégration qu’il ne faut pas prendre à la légère.

Fine Cookie images découpées

Ci-dessus, toutes les images découpées et prêtes à l’emploi pour l’intégration. Elles sont placées dans un dossier images.  Dans ce dossier images, vous pouvez voir un dossier « produits ». Ce dossier contient les photos des produits présents sur le site :

Fine Cookie images découpées

Il est temps à présent de réfléchir à la structure HTML de notre page d’accueil.

02 – Création du squelette HTML

Ah nous y voilà ! Le squelette ! Comment procéder ? Quels éléments HTML5 allons-nous utiliser pour regrouper des éléments de même type ? Pour afficher correctement un titre ? Je vous conseille de prendre la maquette sous les yeux, afin d’analyser les différents blocs principaux. Après réflexion, on peux en déduire dans les grandes lignes un découpage de la façon suivante :

Fine Cookie - Zoning intégration

En utilisant cette méthode nous pouvons déjà apercevoir la structure de base de notre futur site web. Nous verrons en détail les différentes balises tout au long du processus d’intégration. Commençons par le haut de page pour descendre progressivement tout au long du site.

Le markup HTML de base :


<meta charset="utf-8" />
<meta name="description" content="Fine Cookies est la boutique en ligne du tutoriel Living Tuts" />

Fine Cookies, boutique en ligne
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]--><script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

 	<link href="http://fonts.googleapis.com/css?family=Overlock:400,700" rel="stylesheet" type="text/css" /> 	<link href="http://fonts.googleapis.com/css?family=Cookie" rel="stylesheet" type="text/css" /> 	<link href="http://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet" type="text/css" />

 	<link href="css/reset.css" rel="stylesheet" media="screen" /> 	<link href="css/style.css" rel="stylesheet" media="screen" /> <!--[if IE]>
  		<link rel="stylesheet" media="screen" href="css/ie.css"/>
  <![endif]-->
 	<link href="images/favicon-fine-cookie.gif" rel="shortcut icon" type="image/x-icon" />

Vive le doctype HTML5 ! Vous le connaissez maintenant mais il fait toujours plaisir à voir ! Simple à retenir, écrit en 5 secondes, voilà qui est efficace. C’est ainsi que débute une page HTML. Je précise ensuite l’encodage de la page en UTF-8 avec la balise meta charset. On remarque également sur cette balise que l’écriture est raccourcie par rapport a une balise Meta XHTML.

J’appelle ensuite un script Javascript conditionnel,  activé si le site est ouvert sur Internet Explorer 9 ou une version précédente. Ce script permet de contourner quelques problèmes liés à l’HTML5 : les anciens navigateurs ne reconnaissent pas les nouvelles balises (comme <nav> et <header> par exemple). Ce script permet de forcer le navigateur à reconnaître les balises et ainsi assurer la compatibilité du site.

Je charge également la librairie JQuery et un fichier Javascript personnel : hoverClass.js qui va permettre de gérer des effets de survol. Nous allons écrire ensemble ce fichier en fin de tutoriel. Suivent ensuite différentes balises <link> pour charger les polices utilisées sur le site depuis le service en ligne gratuit Google Fonts. Avec ces balises, les polices sont chargées directement dans votre site sans avoir besoin de stocker la police en local. C’est un gain de temps dans l’écriture future de votre CSS.

Attention tout de même, si un jour les serveurs Google Fonts sont HS, plus de polices sur votre site ! N’ayez crainte nous avons à faire à Google quand même ! ;)

Début du header et le sous-menu :

Nous entrons à présent dans le corps de notre page HTML. C’est n’est pas une image, c’est bien suite à la fermeture précédente de la balise <head> que nous ouvrons le <body> pour y construire le haut de notre site. Ici le header va englober tout le haut du site, avec les deux menus, et la partie de mise en avant produit. Vous allez comprendre pourquoi un peu plus tard dans la partie CSS… Rien n’est fait par hasard ;).

Allons-y, utilisons la balise HTML5 <header>. Cet élément est décrit comme un conteneur pour « un groupe d’outils d’introduction ou de navigation ». C’est donc exactement ce qu’il nous faut :

</pre>
<header><!--Début du haut de page-->
<div id="headContent">
<ul id="topLinks">
	<li> <span>Langue</span>
 <a href="#"><img title="Français" alt="Français" src="images/icon-fr.gif" /></a>
 <a href="#"><img title="English" alt="English" src="images/icon-gb.gif" /></a></li>
	<li><img title="Utilisateur" alt="Utilisateur" src="images/icon-user.png" />
 <a href="#">Connexion</a></li>
	<li id="panier"><img title="Panier" alt="Panier" src="images/icon-cart.png" />
 <a href="#">Mon panier (0)</a></li>
</ul>

Je déclare pour commencer une div#headContent pour servir de conteneur principal en plus du <header>. Certes en HTML cela peux paraitre inutile, nous avons <header> qui sert de conteneur. Mais vous allez voir à quel point cette petite <div> nous sera utile pour notre mise en page CSS.

La liste ensuite sert de base au petit menu en haut à droite du site. Souvenez-vous :

Fine Cookies

Le logo et le menu principal :

Dans l’ordre des choses, nous allons créer une structure pour notre logo et le menu principal. Le logo est déclaré avant le menu pour le placer plus logiquement par-dessus le menu principal en CSS. Pour le menu du site justement, j’utilise l’élément HTML5 <nav> pour contenir la liste de liens de navigation du site. J’aurai pu l’utiliser tout à l’heure sur le petit menu du haut, le résultat aurait été sémantiquement correct. Je préfère cependant clarifier les choses en le réservant à cette navigation principale.

<a id="logo" href="#">
  <img title="Fine Cookies" alt="Fine Cookies" src="images/logo-fine-cookies.png" />
</a></pre>
<nav><!--Dédut Menu Principal-->
<ul>
	<li><a href="#">Accueil</a></li>
	<li><a href="#">Nos biscuits</a></li>
	<li id="navFirst"><a href="#">Notre histoire</a></li>
	<li id="navSecond"><a href="#">Secrets de fabrication</a></li>
	<li><a href="#"> Nous contacter</a></li>
</ul>
</nav>
<pre><!--Fin menu Principal-->

Deux petites particularités a relever ici, les id sur deux éléments de la liste. Ils vont nous servir plus tard à séparer correctement le liens du menu de part et d’autre du logo. Fine Cookies C’est une solution pour avoir une sémantique propre, en conservant tous les liens du menu dans la même liste. 

Le bloc de mise en avant produit et la fin du header :

Il est déjà plus que temps de finaliser notre header. Dernier élément à inclure, le bloc de mise en avant des produits. Il s’agit ici de déclarer les bonnes images et les bons éléments de texte, au bon endroit, pour pouvoir les placer correctement en CSS. On commence d’abord par la partie gauche, la tour de cookies, puis on déclare un bloc (#infosVisu) pour la partie de droite avec le texte.

</pre>
<div id="bigVisuel">
<img id="cookieTour" title="Massiv Pepit Cookie" alt="Massiv Pepit Cookie" src="images/img-cookie-tour.png" />
<div id="infosVisu">
<h1 class="fredokaFont">Massiv pepit
 <span>Pour les amoureux du chocolat</span></h1>
Découvrez le cookie Massiv Pepit, avec sa recette unique aux pépites de chocolat tellement généreuses que vous ne pourrez plus vous en passer !

 <img id="pepites" title="70% Cacao" alt="70% Cacao" src="images/img-pepites.png" />
 <a class="fredokaFont hoverBtn" id="btnGoCart" href="#">Miam, j’en profite !</a></div>
</div>
<pre>
<!--Fin du haut de page-->

La div#bigVisuel sert de conteneur au bloc. Nous allons nous en servir pour mettre la planche de support en image de fond en CSS. La div#infosVisu représente la partie droite. Comme nous pouvons le voir, elle contient les éléments texte, le visuel des pépites et le bouton d’ajout au panier. Celui-ci possède une classe .hoverBtn. Vous allez comprendre à quoi elle sert à la fin du tutoriel ;). Bloc mise en avant produit

Début du contenu principal et bloc nouveaux produits :

Toujours en suivant notre cheminement, nous arrivons au niveau du bloc présentant les nouveaux produits. Changement radical après le header : nous sommes sur fond blanc. Chose importante à prendre en compte dans notre sémantique car nous attaquons une nouvelle partie. Nous sommes en présence de quatre individus de type cookies, alignés sur la même ligne. Que faire ? Je propose de créer un élément HTML5 <section> pour pouvoir les garder groupés. Rappel sur <section> : c’est un élément utilisé pour regrouper du contenu de manière thématique. Les produits présentés dans cette partie sont apparentés donc <section> est parfaitement adapté. Jetons un œil au code pour y voir plus clair :

</pre>
<div id="content"><section id="nouveauxProduits">
<h2 class="fredokaFont"><span>Si bons, si croustillants, craquez pour nos nouveaux biscuits</span></h2>
<article><a href="#"><img title="So Delicious" alt="So Delicious" src="images/produits/prod-big-sodelicious.jpg" /></a>
<h3 class="fredokaFont"><a href="#">So’ delicious</a></h3>
<a href="#">23€</a> les 500g

Totalement croustillant, le cookie So’delicious vous transportera dans cet élan de saveur, laissez-vous (...)</article><article><a href="#"><img title="Nature Spirit" alt="Nature Spirit" src="images/produits/prod-big-naturespirit.jpg" /></a>
<h3 class="fredokaFont"><a href="#">Nature Spirit</a></h3>
<a href="#">10€</a> les 500g

Juste quelques pépites de chocolat pour vous faire subtilment frissonner à chaque bouchées.</article><article><a href="#"><img title="Butter & Pecan" alt="Butter & Pecan" src="images/produits/prod-big-butterandpecan.jpg" /></a>
<h3 class="fredokaFont"><a href="#">Butter & Pecan</a></h3>
<a href="#">15€</a> les 500g

Simple, bon et essentiel, le cookie Butter & Pecan sans chocolat est idéal pour se faire plaisir en été.</article><article><a href="#"><img title="Cookie Dingler" alt="Cookie Dingler" src="images/produits/prod-big-cookiedingler.jpg" /></a>
<h3 class="fredokaFont"><a href="#">Cookie Dingler</a></h3>
<a href="#">30€</a> les 500g

Le cookie libéré ! Ne pas le laisser tomber, il est si fragile. À déguster du bout des doigts.</article>
<div class="cl"></div>
</section>

Quelques précisions :

  • div#content : on déclare un bloc pour le contenu global du site.
  • section#nouveauxProduits : la section qui va présenter les nouveaux produits.
  • article : élément HTML5 qui permet de contenir toute forme de contenu « autonome ». Pour faire simple, utilisez cet élément pour du contenu pouvant être lu hors du contexte de la page, sans perdre son intégrité. Dans notre cas, les différents cookies peuvent être considérés comme des éléments <article>. Il contiennent chacun l’image du produit avec un lien, un titre de niveau <h3>, un paragraphe pour le prix et un autre pour la description.
  • div.cl : une div générique qui va nous permettre en CSS de remettre les éléments en float, dans le flux de la page. Elle sera utilisée plusieurs fois dans notre squelette.

Souvenez-vous de la maquette :

Bloc nouveaux produits

L’argumentaire Fine Cookies :

Cette partie est assez similaire à la précédente. 4 blocs, contenus dans un bloc parent. La structure de base va donc être quasiment la même. Un élément <section> contenant des <article>.
Attention, par contre l’argumentaire comporte plus d’images que la partie précédente. Il faut tenir compte à la fois des numéros sous les images mais aussi des flèches entre les blocs. Comment faire pour intégrer tout cela facilement ? Regardez le code ci-dessous :

</pre>
<section id="presFinecookie">
<div id="presInt">
<h2 class="fredokaFont">Pourquoi sont-ils si savoureux ?  <span>Découvrez notre secret...</span></h2>
<article><img title="Des ingrédients soigneusement sélectionnés" alt="Des ingrédients soigneusement sélectionnés" src="images/img-1-ingredients.jpg" />
 <span class="number fredokaFont">1</span>
<h4 class="fredokaFont">Des ingrédients soigneusement sélectionnés</h4>
Fine Cookies prend le plus grand soin lors de la sélection de la matière première pour une qualité iréprochable du produit fini.</article><article><img title="Des recettes uniques depuis 1989" alt="Des recettes uniques depuis 1989" src="images/img-2-recettes.jpg" />
 <span class="number fredokaFont">2</span>
<h4 class="fredokaFont">Des recettes uniques depuis 1989</h4>
Toutes nos recettes sont basées sur les écrits légendaires de Don Cook, le fondateur même du Cookie à Paris en 1989.</article><article><img title="Une prépation 100 % à la main par nos patissiers" alt="Une prépation 100 % à la main par nos patissiers" src="images/img-3-preparation.jpg" />
 <span class="number fredokaFont">3</span>
<h4 class="fredokaFont">Une prépation 100 % à la main par nos patissiers</h4>
Pour garantir le meilleur résultat possible nos patissiers diplômés  préparent nos biscuits à la main. Du façonnage à la mise au four.</article><article><img title="C’est surtout grâce à vous !" alt="C’est surtout grâce à vous !" src="images/img-4-merci.jpg" />
 <span class="number fredokaFont">4</span>
<h4 class="fredokaFont">C’est surtout grâce à vous !</h4>
Vous avez élu Fine Cookies meilleures recettes de cookie en 2011. Grâce à vous, Fine Cookies est devenue la référence absolue du cookie dans le monde entier !</article>
<div class="fleches"></div>
<div class="cl"></div>
</div>
<div id="downFleche"></div>
</section>
<pre>

Nous avons plusieurs choses à voir ensemble sur cette partie. Faisons simple :

      • section#presFinecookie va nous permettre de faire passer le site en fond rouge en affichant un background spécifique.
    • h2.fredokaFont est une classe générique qui sera utilisée en CSS. Elle permettra de charger la police Fredoka One lorsqu’elle est nécessaire. Nous l’avons déjà utilisée plus haut.
    • span.number nous permet d’afficher le numéro sous la photo. Il est possible de générer la totalité du fond en CSS3, mais j’ai tout de même privilégié une image à cet endroit pour des raisons pratiques.
    • div.fleches est une div vide pour servir de support à un background-image contenant un sprite avec les flèches entre les images.
    • div#downFleche va nous permettre d’afficher la flèche centrée en bas du bloc.

Fine Cookies Vous êtes prêt à présent pour enchainer sur la partie « basse » du site, avec les produits du catalogue, les arguments de réassurance et les réseaux sociaux ! :) Dernière grosse étape avant de passer au footer.

Remontée du catalogue :

Quels éléments utiliser pour les produits du catalogue ? Nous pouvons par exemple reprendre un structure <section>, <article>. Pour changer quelque peu et voir d’autres manières de procéder, j’ai choisi ici d’utiliser principalement des <div> classiques. Fine Cookies Il s’agit ici de bien déclarer les blocs pour faire une correcte grille de produits. D’après la maquette, nous sommes en présence de 6 blocs de produits, 5 petits et 1 bloc de taille plus importante. Rien qu’en analysant visuellement le design, nous pouvons en déduire qu’il faudra utiliser des classes différentes. Il convient également de penser aux éléments de survol : ce qui signifie de déjà prévoir les éléments HTML adéquats. En résumé :

      • Un bloc conteneur global #bottomPage.
    • Un bloc d’alignement à droite #catalogue.
    • Un titre et des blocs produits h2, .produitMin et .produitBig.

 

</pre>
<div id="bottomPage">
<!--Début #bottomPage-->
<div id="catalogue">
<h2>Tout ce qu’il faut pour vous faire plaisir</h2>
<div class="produitMin">
<a href="#"><img title="Cacao Friese" alt="Cacao Friese" src="images/produits/prod-min-cacao-friese.jpg" /></a>
<div class="hoverBox">
<h3 class="fredokaFont"><a href="#">Cacao Friese</a></h3>
 <span><a href="#">23€</a> les 500g</span></div>
</div>
<div class="produitMin">
<a href="#"><img title="Marble Pave" alt="Marble Pave" src="images/produits/prod-min-marblepave.jpg" /></a>
<div class="hoverBox">
<h3 class="fredokaFont"><a href="#">Marble Pave</a></h3>
 <span><a href="#">13€</a> les 500g</span></div>
</div>
<div class="produitMin">
<a href="#"><img title="Shelly Foam" alt="Shelly Foam" src="images/produits/prod-min-shellyform.jpg" /></a>
<div class="hoverBox">
<h3 class="fredokaFont"><a href="#">Shelly Foam</a></h3>
 <span><a href="#">10€</a> les 500g</span></div>
</div>
<div class="produitBig">
<a href="#"><img title="Sugar Pallet" alt="Sugar Pallet" src="images/produits/prod-big-sugar-pallet.jpg" /></a>
<div class="bighoverBox">
<h3 class="fredokaFont"><a href="#">Sugar Pallet</a></h3>
 <span><a href="#">18€</a> les 500g</span></div>
</div>
<div class="produitMin">
<a href="#"><img title="Marbre Duo" alt="Marbre Duo" src="images/produits/prod-min-marbreduo.jpg" /></a>
<div class="hoverBox">
<h3 class="fredokaFont"><a href="#">Marbre Duo</a></h3>
 <span><a href="#">13€</a> les 500g</span></div>
</div>
<div class="produitMin">
<a href="#"><img title="Strawfilled" alt="Strawfilled" src="images/produits/prod-min-straw.jpg" /></a>
<div class="hoverBox">
<h3 class="fredokaFont"><a href="#">Strawfilled</a></h3>
 <span><a href="#">23€</a> les 500g</span></div>
</div>
<div class="cl"></div>
 <a class="fredokaFont hoverBtn" id="catLink" href="#">Voir le catalogue</a></div>

Décortiquons ensemble cette partie. Le premier bloc #bottomPage permet ici de définir la partie basse de notre site. Il permet aussi et surtout de revenir sur un fond de page blanc. Le bloc #catalogue suivant, nous permettra d’aligner le bloc à gauche. Vous pouvez voir que la structure des petits blocs est assez similaire. Le bloc de plus grande taille est différencié par une classe CSS spécifique .produitBig.

Fine Cookies

Fine Cookies

Petite précision par rapport au div.hoverBox. Il s’agit de blocs cachés qui apparaissent au survol de la souris. Ils contiennent le nom du produit ainsi que son prix. Grâce aux CSS3, nous allons voir qu’il est très facile de créer une petite animation sympathique au survol.

Fine Cookies

Bloc avantages :

Concentrons-nous à présent sur la partie droite présentant les avantages de commande chez Fine Cookies. C’est une partie complémentaire qui ne présente pas les produits, ni la société en elle-même. Sémantiquement il existe un élément HTML5 pour ce genre de partie, il s’agit de <aside>. Cet élément doit être utilisé pour du contenu indirectement apparenté. Pour savoir s’il convient d’utiliser <aside> ou non, demandez-vous si le contenu de l’élément peut être retiré sans affecter le sens du contenu principal du document ou de la section. C’est le cas pour notre partie.

Visuellement, il s’agit de trois étiquettes alignées, avec du texte, une image et un lien pour en savoir plus. Un titre principal englobe le tout. Nous allons utiliser une liste pour aligner facilement les blocs. Chaque <li> de cette liste contiendra un titre <h6> avec une image et un lien. Rien de bien compliqué sémantiquement pour cette partie. Voyez par vous même :

</pre>
<aside id="avantages">
<h5 class="cookieFont"><span>Savourez en toute liberté</span></h5>
<ul>
	<li>
<h6 class="fredokaFont">Livraison assurée dans 80 pays</h6>
 <img title="Livraison assurée dans 80 pays" alt="Livraison assurée dans 80 pays" src="images/img-etiquette-planete.png" />
 <a href="#">Trouver un point relais</a></li>
	<li>
<h6 class="fredokaFont">Dégustez-les chez vous en 24h chrono !</h6>
 <img title="Dégustez-les chez vous en 24h chrono !" alt="Dégustez-les chez vous en 24h chrono !" src="images/img-etiquette-box.png" />
 <a href="#">Commander maintenant</a></li>
	<li>
<h6 class="fredokaFont">100 points = -20% sur votre commande</h6>
 <img title="100 points = -20% sur votre commande" alt="100 points = -20% sur votre commande" src="images/img-etiquette-ticket.png" />
 <a href="#">Trouver un point relais</a></li>
</ul>
<div class="cl"></div>

Fine Cookies

Bloc réseaux sociaux :

Également contenu dans notre <aside>, les liens vers les réseaux sociaux. Il s’agit simplement de deux liens au sens propre, possédant chacun un identifiant. L’aspect du lien sous la forme de gros bouton arrondi va être entièrement géré en CSS.

</pre>
<div id="socialBox"><a class="fredokaFont hoverBtn" id="fbLien" href="#">Rejoignez-nous sur Facebook</a>
 <a class="fredokaFont hoverBtn" id="twitterLien" href="#">Suivez-nous sur Twitter</a></div>
<div class="cl"></div>
<pre><!--Fin #bottomPage-->

<!--Fin #content-->

Après avoir écrit les liens, il faut bien penser à fermer la balise <aside>, puis le conteneur du bas de page, pour enfin fermer le #content. Fine Cookies Ouf ! Le plus gros de notre squelette est terminé ! Courage, il reste le pied de page, encore une vingtaine de lignes HTML a écrire avant de passer au CSS !

Le pied de page :

Quoi de plus adapté pour un pied de page que la balise HTML5 <footer> ? Cet élément est destiné à contenir des informations au sujet de l’élément qui le contient (ici <body>). Il va s’agir d’informations de copyright, de contact et de liens vers d’autres contenus. Rappel <footer> : la particularité de cet élément est qu’il peut être utilisé pour la totalité du document comme ici, mais il peut-être également utilisé à l’intérieur de <section> par exemple. Avant de déclarer le footer, nous allons juste placer une <div> qui contiendra le logo Fine Cookies, présent en rappel dans le footer. C’est parti pour le code :

</pre>
<div id="preFoot"><img title="Fine Cookies" alt="Fine Cookies" src="images/logo-fine-cookies.png" /></div>
<footer>
<div id="footContent">
<div id="address">
<ul>
	<li id="bigText">Venez nous rendre visite !</li>
	<li>Fine Cookies Shop</li>
	<li>14 rue Thomas Knoll</li>
	<li>77830 Toshop</li>
	<li id="tel">Tél : 01.00.82.85.09</li>
</ul>
</div>
<div id="legal">Fine Cookies 2012 -  © Copyright
 <a href="http://fr.livingtuts.com/" target="_blank">Living Tuts</a> et <a href="http://webdesignertrends.com/" target="_blank">Webdesigner Trends</a>.

Tutoriel Photoshop + Intégration HTML5, CSS3 - Création : <a href="http://webdesignertrends.com/" target="_blank">webdesignertrends.com</a> - Site et marque fictive.</div>
</div>
</footer>
<pre>

Comme vous pouvez le voir ci-dessus, nous avons une div#address. J’étais tenté d’utiliser la balise <address> en HTML5. Cependant cette balise doit utilisée uniquement pour contacter les auteurs du document cité. On ne doit pas l’utiliser pour l’adresse postale d’une entreprise sans relation avec l’auteur par exemple.

FINECookies-BasFooter

Nous y sommes ! Le squelette HTML de notre page est désormais terminé ! Pour le footer vous devez avoir un résultat assez semblable à celui-ci pour le moment :

Fine Cookie pur HTML

Il est grand temps de passer au style non ?

 03 – Création du CSS

Après tout ce que nous avons traversé ensemble jusque ici, j’en suis presque ému, enfin notre maquette Fine Cookies va prendre vie :). Terminé la maquette statique et sans vie ! Nous approchons du site web finalisé et navigable. Malgré tout le travail accompli jusqu’à présent, il nous reste plusieurs choses à faire. Nous allons voir ensemble comment habiller au mieux notre squelette HTML.

Pour y arriver, nous allons utiliser tous les outils CSS disponibles dans notre arsenal. Je pars du principe que vous avez de bonnes notions de CSS 2.1 et de CSS3, je vais donc simplement commenter le code en expliquant les points critiques. Le CSS3 tiens, parlons-en. Il va surtout nous servir a réaliser des transitions simples et diverses améliorations de mise en page. Assez de blabla, créez un fichier style.css et allez-y !

On commence sur de bonnes bases :

Le reset.css. Base incontournable d’un projet web solide, il va nous permettre de réinitialiser à 0 la valeur de certains éléments HTML, ainsi nous allons éviter les différences d’affichage sur les divers navigateurs. J’utilise personnellement celui de Eric Meyer. Créez un nouveau fichier CSS que vous appelez reset.css et placez-le dans le dossier CSS du site avec le code suivant :

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Pour en savoir plus sur la technique du reset CSS en général (même si je sais que vous la connaissez bien ;)), je vous invite à lire cet article sur Alsacréations.

Les classes de base :

Ouvrez votre fichier style.css, nous allons commencer par quelques classes de base.

/*/////////////////////////////////////////////////////////////////////
1 / DECLARATIONS DIVERSES
/////////////////////////////////////////////////////////////////////*/

.fredokaFont{
font-family: 'Fredoka One', cursive;
}

.cookieFont{
font-family: 'Cookie', cursive;
}

.cl{
clear:both;
}

/*----Petit effet soft les liens en CSS3-----*/
a, a:hover {
-webkit-transition-duration: 0.5s;
-webkit-transition-property: color;
-moz-transition-duration: 0.5s;
-moz-transition-property: color;
-ms-transition-duration: 0.5s;
-ms-transition-property: color;
-o-transition-duration: 0.5s;
-o-transition-property: color;
transition-duration: 0.5s;
transition-property: color;
}

body{
background-color:#eff0e9;
font-family: 'Overlock', cursive;
color:#69696c;
font-size:12px;
}

Je commence avec des classes pour les différentes polices utilisées sur le site. Ainsi nous allons pouvoir utiliser les polices Fredoka One et Cookie partout sans avoir à préciser sans cesse, un font-family spécifique.

Je rappelle que la police est chargée grâce à une balise <link> en HTML, depuis le service Google Font.

Je donne également un effet de survol doux à tous les liens avec la propriété CSS3 Transition que nous détaillerons par la suite. Pensez à bien préfixer les déclarations, car malheureusement elles ne sont pas encore supportées par tous les navigateurs.

Début du header et le sous-menu :

/*/////////////////////////////////////////////////////////////////////
2 / HEADER
/////////////////////////////////////////////////////////////////////*/

header{
height:605px;
background:url(../images/bg-header.gif) top center no-repeat;
}

#headContent{
width:960px;
margin:0 auto;
position:relative;
}

/*-----Liens du haut de page----*/
#topLinks{
width:350px;
float:right;
padding:20px 0 0 0;
}
#topLinks li{
display:inline;
text-align:right;
margin:0 0 0 20px;
font-weight:400;
}

#topLinks span{
margin:0 5px 0 0;
}

#topLinks li img{
vertical-align:top;
}

#topLinks a{
text-decoration:none;
color:#69696c;
}

#topLinks a:hover, #topLinks a:visited, #topLinks a:focus{
color:#e84743;
}

#topLinks #panier{
font-weight:700;
}

#topLinks img{
margin:0 5px 0 0;
}

Souvenez-vous de l’HTML, le header englobe le menu principal, le sous-menu du haut ainsi que le bloc de mise en avant du produit. Je commence par donner une hauteur au header pour y placer l’image de fond rayée et en perspective. Je déconseille de travailler sur des hauteurs fixes pour des fonds, mais c’est indispensable ici à cause de l’effet de perspective du design.

Fine Cookies, image de fond du header

Ci-dessus, une partie de l’image de fond du header.

#headContent défini la zone « utile » de la maquette à 960 pixels de large. Le mini-menu est stylé de manière classique en plaçant la liste en display:inline avec des marges pour séparer les liens.

Le logo et le menu principal :

*-----Logo Fine Cookies----*/

#logo{
width:177px;
display:block;
margin:0 auto;
position:relative;
top:10px;
z-index:2;
}
/*--Léger mouvement animé au survol du logo---*/

#logo:hover{
top:15px;
}

#logo, #logo:hover{
-webkit-transition-duration: 0.5s;
-webkit-transition-property:top;
-moz-transition-duration: 0.5s;
-moz-transition-property: top;
-ms-transition-duration: 0.5s;
-ms-transition-property: top;
-o-transition-duration: 0.5s;
-o-transition-property: top;
transition-duration: 0.5s;
transition-property: top;
}

/*---Menu principal------*/
nav{
position:absolute;
top:45px;
font-size:14px;
color:#29888c;
text-transform:uppercase;
background:url(../images/ombre-nav.png) bottom center no-repeat;
padding:0 0 8px 0;

}

nav ul{
padding:20px;
width:920px;
background:url(../images/pat-menu.gif);
border-bottom:1px solid #959789;
border-radius:4px;

}

nav ul li{
display:inline;
padding:0 14px 0 0;
margin:0 14px 0 0;
background:url(../images/img-sep.png) right center no-repeat;
}

nav ul li:last-child {
background:none;
padding:0;
margin:0;
}

nav ul #navFirst{
background:none;
}

nav ul #navSecond{
padding:0 14px 0 0;
margin:0 14px 0 195px;
background:url(../images/img-sep.png) right center no-repeat;
}

nav a{
color:#29888c;
text-decoration:none;
}

nav a:hover{
color:#e84743;
}

Le placement particulier du logo au centre du menu, m’avait contraint à le déclarer avant la balise <nav> en HTML. Je vais le placer en position:relative par-dessus le menu principal. Pour réussir un placement parfait, je place la navigation en absolu à 45 pixels du haut de la page. Pour mieux comprendre cet empilement de couches, voici une petite vue 3D des éléments dans le navigateur :

Fine Cookies

Le fond du menu est réalisé avec une image de texture répétée, l’ombre est définie par une image de fond. 

Bonne nouvelle, l’arrondi CSS3 avec border-radius n’a plus besoin d’être préfixé ! Les navigateurs évoluent et c’est tant mieux ! Il existe d’ailleurs un intéressant article à ce sujet sur Generated Content.

Comme vous pouvez le voir, les #navFirst et #navSecond permettent de séparer les liens du menu de part et d’autre du logo. Parlons du logo, il est animé au survol grâce aux transitions CSS3. Il est simplement décalé de 15 pixels vers le bas tout en souplesse. Testez, vous verrez ;)


Le bloc de mise en avant produit et la fin du header :

/*/////////////////////////////////////////////////////////////////////
3 / BLOC VISUEL ACCROCHE
/////////////////////////////////////////////////////////////////////*/

/*---Bloc contenant global---*/
#bigVisuel{
width:960px;
height:480px;
margin:0 auto;
background:url(../images/img-planche.png) bottom center no-repeat;
}

/*---Visuel tour de cookie---*/

#cookieTour{
display:block;
float:left;
width:330px;
margin:0 0 0 60px;
}

/*---Texte de complet du visuel---*/
#infosVisu{
width:515px;
float:right;
padding:55px 0 0 20px;
position:relative;
}

#infosVisu h1{
font-size:72px;
color:#e84743;
text-transform:uppercase;
line-height:40px;
}

#infosVisu h1 span{
font-size:53px;
color:#eea914;
text-transform:none;
}

#infosVisu p{
font-size:14px;
font-weight:400;
width:500px;
padding:0 0 0 8px;
line-height:16px;
}

/*----Pepites Choco----*/

#pepites{
position:absolute;
top:216px;
display:block;
width:191px;
}

/*--Bouton J'en profite---*/

#btnGoCart{
display:block;
position:absolute;
left:253px;
top:217px;
width:182px;
height:27px;
text-decoration:none;
text-transform:uppercase;
color:#FFF;
font-size:13px;
padding:13px 0 0 50px;
background:url(../images/btn-gocart.png) no-repeat;
}


75 lignes d’un coup, d’un seul, cela peut paraître beaucoup. En fait, rien de compliqué, détaillons ensemble :

  • #bigVisuel : ce bloc sert de conteneur. Je place la planche comme support à la tour de cookies en background aligné au centre et en bas du bloc.
  • #cookieTour : est la partie gauche contenant simplement l’image des cookies.
  • #infosVisu : est la partie droite avec les textes stylés selon le webdesign.
  • #pepites : visuel des petites de chocolats placées en position:absolute pour sortir le bloc du flux de la page, en le plaçant bien sur la planche.
  • #btnGoCart : un lien avec la propriété display:block pour lui ajouter une image de fond et une taille bien définie.

Au final c’est simple non ? Une petite vue 3D pour y voir plus clair :

Fine Cookie

Félicitation, le haut de page est déjà terminé ! Courage, on continue tout de suite…

Contenu principal:

/*/////////////////////////////////////////////////////////////////////
4 / CONTENU DU SITE
/////////////////////////////////////////////////////////////////////*/

#content{
border-top:1px solid #cacbc0;
background-color:#FFF;
padding:0 0 100px 0; /*--Pour gèrer le logo du bas--*/
}

Pour définir le contenu principal du site, j’utilise une div avec un id#content. Je vais ainsi rendre le fond blanc sur toute la largeur du viewport des internautes, conformément à la maquette. Nous verrons à l’étape du footer à quoi sert le padding ajouté ici.

Bloc nouveaux produits :

/*/////////////////////////////////////////////////////////////////////
Ligne nouveaux produits
/////////////////////////////////////////////////////////////////////*/

#nouveauxProduits{
width:960px;
margin:0 auto;
padding:40px 0;
}

#nouveauxProduits h2{
font-size:20px;
color:#e84743;
text-align:center;
text-transform:uppercase;
background:url(../images/sep-titre-rouge.jpg) center repeat-x;
margin:0 0 10px 0;
}

/*---Astuce pour afficher correctement le fond double trait---*/
#nouveauxProduits h2 span{
background-color:#FFF;
padding:0 10px;
}

/*---Style des blocs de produits---*/
#nouveauxProduits article{
float:left;
width:220px;
text-align:center;
font-size:14px;
margin:0 20px 0 0;
}

#nouveauxProduits article img{
border-bottom:1px solid #e84743;
width:220px; /*--On force l'image en CSS à 220px de large,
mais lors de la dynamisation c'est à redimensionner avec un script--*/
}

#nouveauxProduits article img:hover{
border-bottom:1px solid #981b18;
}

#nouveauxProduits article h3{
color:#e84743;
font-size:16px;
margin:5px 0 15px 0;
}

#nouveauxProduits article h3 a{
color:#e84743;
text-decoration:none;
}

#nouveauxProduits article h3 a:hover{
color:#EEA914;
}

#nouveauxProduits .prix{
font-weight:700;
margin:0 0 15px 0;
}

#nouveauxProduits .prix a{
font-size:15px;
color:#FFF;
background-color:#e84743;
padding:5px;
text-decoration:none;
}

#nouveauxProduits .prix a:hover{
color:#FFF;
background-color:#EEA914;
}

Souvenez-vous de notre élément HTML5 <section> avec l’id #nouveauProduits. Ici je le style comme n’importe quel autre bloc, en lui donnant une largeur fixe et en le centrant dans le navigateur avec margin:0 auto.

Petite parenthèse : savez-vous comment reproduire l’effet graphique des lignes autour du titre en CSS ?

Fine Cookies

La réponse est au-dessus dans le CSS ! Nous avons déclaré en HTML un élément h2 pour le titre. Inclus dans cet h2, un span contenant le texte.

Fine Cookies - Astuce titre

L’astuce consiste à charger l’image des doubles traits en image de fond du h2, puis à ajouter un fond blanc au span pour servir de cache et le tour est joué !

Le reste du CSS est simple à comprendre. Je fais « flotter » les blocs à gauche avec un float:left pour former une ligne. Pour que l’effet fonctionne, il convient de définir une taille fixe aux blocs avec un marge pour les séparer. J’ajoute également divers effets simples en CSS lors du survol. La couleur du prix change par exemple et cela en tout fluidité grâce aux propriétés de transtions CSS3 ajoutées au début du fichier.

Fine Cookies - Nouveau produits

Les différentes couches de cette partie en vue 3D.

L’argumentaire Fine Cookies :

/*/////////////////////////////////////////////////////////////////////
Présentation de l'entreprise
/////////////////////////////////////////////////////////////////////*/
#presFinecookie{
background:url(../images/bg-down-arrow.jpg) #e84743 top center no-repeat;
/*-Wrapper principal rouge-*/
}

#presInt{
width:960px;
margin:0 auto;
padding:35px 0 0 0;
position:relative;
/*-Pour ensuite placer les flèches--*/
}

/*-Titre principal---*/
#presInt h2{
font-size:22px;
color:#FFF;
text-align:center;
margin:0 0 20px 0;
}

#presInt h2 span{
color:#eea914;
text-transform:uppercase;
margin:0 0 0 8px;
}

/*--Mise en page des blocs---*/

#presInt article{
width:220px;
float:left;
margin:0 20px 50px 0;
position:relative; /*-Pour ensuite placer la bulle du numéro--*/
text-align:center;
color:#FFF;
}

#presInt article h4{
font-size:16px;
margin:25px 0 15px 0;
}

#presInt .number{
font-size:18px;
display:block;
width:39px;
height:31px;
background:url(../images/icon-bulle-num.png) no-repeat;
padding:8px 0 0 0;
position:absolute; /*--Placement facile sur l'image du dessus--*/
top:195px;/*--Mesuré sur la maquette PSD---*/
left:97px; /*--Mesuré sur la maquette PSD---*/
z-index:2; /*--Les chiffres restent sélectionnables--*/
}

#presInt article p{
font-size:14px;
}

/*--Fleches entre les arguments---*/
.fleches{
position:absolute;
width:554px;
height:36px;
background:url(../images/sprite-fleches.png) no-repeat;
top:260px;
left:180px;
z-index:0;    /*--Mise à l'arrière plan au même niveau que les images--*/
}

/*---Fleche de "fermeture du bloc--*/

#downFleche{
background:url(../images/img-down-arrow-red.jpg) #FFF bottom center no-repeat;
height:11px;
margin:0 0 25px 0;
}

Visuellement parlant, nous sommes au niveau de la large barre rouge avec les arguments sur les cookies. Les quatres blocs sont placés de la même façon que les précédents, c’est-à-dire en flottants. Les éléments particuliers ici sont les chiffres placés en absolu sur les images, ainsi que les flèches liant visuellement les images.

Pour aller plus dans le détail :

  • #presFinecookie : le conteneur qui permet de placer la flèche du haut en image de fond (bg-down-arrow.jpg).
  • #presInt .number : c’est ainsi que le chiffre est positionné sur les images. Avec une position:absolute et un z-index:2 pour rester cliquable.
  • .fleches : charge une image de fond que je place à nouveau en absolute par dessus les images des arguments. Souvenez-vous, il s’agissait d’une <div> vide en HTML.
  • #downFleche : autre <div> vide vue ensemble tout à l’heure, elle permet ici de charger une petite image de fond pour reproduire la flèche du bas.

Le capture ci-dessous détaille les blocs importants :

Fine Cookies

Remontée du catalogue :

/*/////////////////////////////////////////////////////////////////////
5 / REMONTEE PRODUITS DU CATALOGUE
/////////////////////////////////////////////////////////////////////*/
#bottomPage{
width:960px;
margin:0 auto;
}

#catalogue{
width:480px;
float:left;
}

#catalogue h2{
color:#e84743;
font-size:19px;
text-transform:uppercase;
}

Pour commencer cette partie, je place d’abord la structure de base. Un conteneur principal, #bottomPage pour tous les éléments du bas de page. Ensuite #catalogue pour définir la colonne de gauche qui contiendra les produits. J’enchaine ensuite sur les styles des petits blocs de produits.

Styler un bloc de produits :

/*--Style des "petits" blocs de produits--*/
.produitMin{
float:left;
width:140px;
height:139px;
margin:0 20px 20px 0;
border-bottom:1px solid #e84743;
text-align:center;
color:#FFF;
position:relative;
overflow:hidden; /*--On cache ainsi l'onglet (hover Box) en bas du bloc--*/
}

.produitMin:hover{
border-bottom:1px solid #981b18;
}

Je donne une taille fixe au bloc .produitMin. Carré, il fait pourtant 140 x 139 ? Ce n’est pas un erreur, je prévois simplement un pixel de libre en bas pour ajouter une bordure (border-bottom) comme sur la maquette. Je modifie également la couleur de cette bordure au survol. J’utilise overflow:hidden pour cacher les éléments qui seraient susceptibles de dépasser de la box. Nos petits blocs de produits sont presque terminés. Il est temps de gérer le positionnement du bloc d’informations produit. Vous savez, celui qui doit apparaitre au survol :

Masquer les informations produit :

/*--Positionnement de l'onglet d'infos--*/
.hoverBox{
width:140px;
height:40px;
background:url(../images/bg-hover-product-min.png) no-repeat;
padding:10px 0 0 0;
overflow:hidden;
position:absolute;
top:140px; /*--On place le bloc en bas, pour qu'il soit caché
et ensuite le faire apparaître au survol--*/
}

.hoverBox a{
text-decoration:none;
color:#FFF;
}

.hoverBox h3{
font-size:16px;
}

.hoverBox span{
font-size:14px;
}

C’est une <div> appelée .hoverBox. Je lui donne une taille bien définie de 140px (ce qui correspond à la largeur de la div .produitMin). Je veille bien à lui attribuer la propriété overflow:hidden qui va prévenir les débordement de texte éventuels. Je le place ensuite en position:absolute à 140 pixels du haut, c’est ainsi qu’il va disparaître de l’écran, grâce à la propriété overflow:hidden de .produitMin. Nous obtenons ainsi un beau bloc caché que nous pouvons simuler de la manière suivante :

Fine Cookies

Le tout est bien placé, reste à présent à gérer l’animation au survol.

Gérer l’animation au survol en CSS3 :

/*--Gestion de l'animation de l'onglet ---*/
.produitMin:hover > .hoverBox{
top:90px;
}

.produitMin >.hoverBox, .produitMin:hover > .hoverBox{
-webkit-transition-duration: 0.5s;
-webkit-transition-property:top;
-moz-transition-duration: 0.5s;
-moz-transition-property: top;
-ms-transition-duration: 0.5s;
-ms-transition-property: top;
-o-transition-duration: 0.5s;
-o-transition-property: top;
transition-duration: 0.5s;
transition-property: top;
}

J’utilise une fois de plus une transition CSS3 :

  • Transition-property:top me permet de dire que je vais modifier la propriété top de l’élément ciblé, ici .hoverBox.
  • Transition-duration:0,5s indique la durée de la transition.
  • Avant ça j’indique que si je survole la div.produitMin, je fais monter .hoverBox de 90 pixels.

C’est simple, rapide et sans Javascript ! La transition CSS, permet également l’effet inverse. Une fois que l’utilisateur retire sa souris, .hoverBox rentre gentillement dans sa cachette :)

Fine cookies

Scénario d’animation au survol de la souris.

Comment faire pour le « gros » bloc de produits ?

/*--Style des "gros" blocs de produits--*/
.produitBig{
float:left;
width:300px;
height:299px;
margin:0 20px 20px 0;
border-bottom:1px solid #e84743;
text-align:center;
color:#FFF;
position:relative;
overflow:hidden; /*--On cache ainsi l'onglet (hover Box) en bas du bloc--*/
}

.produitMin:hover{
border-bottom:1px solid #981b18;
}

/*--Positionnement de l'onglet d'infos--*/
.bighoverBox{
width:300px;
height:53px;
background:url(../images/bg-hover-product-big.png) no-repeat;
padding:10px 0 0 0;
overflow:hidden;
position:absolute;
top:300px;  /*--On place le bloc en bas, pour qu'il soit caché
et ensuite le faire apparaître au survol--*/
}

.bighoverBox a{
text-decoration:none;
color:#FFF;
}

.bighoverBox h3{
font-size:16px;
}

.bighoverBox span{
font-size:14px;
}

/*--Gestion de l'animation de l'onglet ---*/
.produitBig:hover > .bighoverBox{
top:246px;
}

.produitBig >.bighoverBox, .produitBig:hover > .bighoverBox{
-webkit-transition-duration: 0.5s;
-webkit-transition-property:top;
-moz-transition-duration: 0.5s;
-moz-transition-property: top;
-ms-transition-duration: 0.5s;
-ms-transition-property: top;
-o-transition-duration: 0.5s;
-o-transition-property: top;
transition-duration: 0.5s;
transition-property: top;
}

La réponse est : exactement la même méthode, mais adaptée avec les bons identifiants et aux bonnes tailles ! C’est à dire en utilisant les bonnes classes, ici .produitBig et .bighoverBox.

Lien vers le catalogue :

/*---Lien catalogue pour en savoir plus----*/

#catLink{
background:url(../images/btn-voir-catalogue.png) no-repeat;
width:140px;
height:20px;
display:block;
color:#FFF;
font-size:13px;
text-align:center;
text-decoration:none;
padding:6px 0 0 0;
float:right;
margin:0 20px 0 0;
}

Pour finaliser cette partie à 100%, il suffit de styler le lien vers le catalogue. J’ajoute l’image de fond découpée au début et je lui donne une taille fixe. Je le positionne avec un float pour qu’il reste aligné à droite de la colonne. La partie du catalogue est terminée ! Voyons ce que donne le rendu 3D, pour bien comprendre l’étendue des couches qui forment cette partie.

Fine Cookies

Il est temps de s’occuper du bloc présentant les avantages de commande chez Fine Cookies.

Bloc avantages :

/*/////////////////////////////////////////////////////////////////////
6 / COLONNE AVANTAGES
/////////////////////////////////////////////////////////////////////*/

#avantages{
width:480px;
float:right;
}

#avantages h5{
font-size:35px;
color:#eea914;
text-align:center;
background:url(../images/sep-titre-orange.jpg) center repeat-x;
margin:0 0 10px 0;
}

/*---Astuce pour afficher correctement le fond double trait---*/
#avantages h5 span{
background-color:#FFF;
padding:0 10px;
}

Je commence comme d’habitude par placer la structure générale du bloc. Il mesure 480 pixels et est placé en flottant à droite du bloc précédent. Je traite le titre avec les doubles traits de la même façon que les autres, en utilisant l’astuce du span contenu dans le h2. Le titre étant en place, je passe au style de la liste.

/*---Style d'un bloc d'avantages----*/
#avantages li{
width:129px;
padding:0 5px;
height:341px;
float:left;
margin:0 20px 0 0;
text-align:center;
display:block;
position:relative;
background:url(../images/bg-etiquette.jpg) no-repeat;
}

#avantages li h6{
font-size:15px;
text-transform:uppercase;
margin:60px 0 30px 0;
color:#29888c;
line-height:18px;
}

#avantages ul li a{
position:absolute; /*Pour que le lien soit toujours placé
en bas même si le titre h6 est plus long*/
bottom:50px;
display:block;
text-align:center;
width:129px;
font-size:12px;
color:#e84743;
}

#avantages ul li a:hover{
color:#eea914;
}

J’ai découpé une image de fond pour les étiquettes, bg-etiquette.jpg. Je la place sur le fond de chacun des éléments li. Une fois placée en float puis en position:relative, j’obtiens le résultat suivant :

Fine Cookies

Je style ensuite le titre et le lien pour qu’ils correspondent à la maquette.

Petite astuce sur le placement du lien en bas du bloc : il est placé en position:absolute. Ainsi il se trouve en dehors du flux du bloc, si le titre du haut devient plus grand, le lien restera collé en bas quoi qu’il arrive  :).

Au final, voilà quelque chose qui ressemble plus à la maquette :

Fine Cookies

Bloc réseaux sociaux :

/*/////////////////////////////////////////////////////////////////////
7 / BLOCS RESEAUX SOCIAUX
/////////////////////////////////////////////////////////////////////*/

#socialBox{
margin:20px 0 0 0;
}

#socialBox a{
display:block;
width:120px;
height:55px;
float:left;
padding:30px 20px 0 80px;
border-radius:4px;
font-size:14px;
text-transform:uppercase;
color:#FFF;
text-decoration:none;
}

#socialBox #fbLien{
background:url(../images/icon-facebook.png) 25px 20px #3b5998 no-repeat;
margin:0 20px 0 0;
}

#socialBox #twitterLien{
background:url(../images/icon-twitter.png) 20px 25px #00aced no-repeat;
}

Souvenez-vous, pour réaliser les deux blocs menant vers Facebook et Twitter nous avons placé deux liens en HTML avec des id. Je les place dans un bloc commun #socialBox pour ainsi leur donner des propriétés CSS communes en les ciblant avec #socialBox a. J’applique comme vous pouvez le voir une taille fixe, en flottant, puis je donne un arrondi commun de 4px aux deux blocs. J’utilise enfin #fbLien et #twitterLien pour charger l’image et la couleur de fond des liens.

Fine Cookies

Le « pre footer » :

Avant de styler le pied de page à proprement parler, nous avons déclaré en HTML un bloc #preFoot qui contient le logo Fine Cookies. Il s’agit de la « planche en bois » qui est présente sur toute la largeur du site, en bas de page. Voilà comment elle est positionnée en CSS :

/*/////////////////////////////////////////////////////////////////////
8 / FOOTER
/////////////////////////////////////////////////////////////////////*/

/*--Barre de bois + logo----*/
#preFoot{
background:url(../images/img-planche-footer.jpg) 0 50px repeat-x;
position:relative;
top:-50px;
margin:0 0 -100px 0;
}

#preFoot img{
display:block;
width:177px;
margin:0 auto;
}

Je pense bien a utiliser un repeat-x sur l’image de fond pour qu’elle occupe toute la largeur de l’écran quelle que soit la résolution de l’utilisateur. Le bloc est positionné en relative avec une marge négative pour créer l’effet de superposition du logo. Celui-ci est placé au centre automatiquement par un margin:0 auto. Il est également décalé du haut grâce au padding ajouté à l’étape du #content. D’après la maquette nous obtenons le résultat suivant :

Fine Cookies

Le footer (ça y est, nous y sommes !) :

/*---Footer---*/

footer{
background:url(../images/bg-rayures.jpg) repeat;
}

#footContent{
width:960px;
margin:0 auto;
text-align:center;
}

#address{
width:300px;
margin:0 auto;
border-radius:4px;
background:url(../images/bg-ombre-address.png) bottom center no-repeat;
padding:0 0 12px 0;
}

#address #bigText{
font-size:16px;
text-transform:uppercase;
font-weight:700;
margin:0 0 20px 0;
}

#address ul{
font-size:14px;
padding:70px 0 5px 0;
background:url(../images/pat-menu.gif) repeat;
}

#address ul li#tel{
margin:15px 0;
}

Dans l’ordre, voilà comment est stylé le pied de page :

  • Je place l’image de fond des rayures sur le pied de page (<footer>).
  • #footContent me permet de définir une zone fixe de 960px pour y placer le contenu.
  • #address est le bloc central du pied de page. Il contient les coordonnées de Fine Cookies. Je lui applique une image de fond pour créer l’ombre sous le bloc. Il est possible de le rendre entièrement en CSS. Dans un souci de compatibilité navigateur, j’ai préféré utiliser une image ici.
  • #adresse ul : la liste qui contient les coordonnées. Je lui applique la même texture que la navigation principale en image de fond.

Une toute dernière chose, la phrase de copyright et l’intégration pourra passer en phase de débug ! :)

Les mentions légales :


/*--Mentions légales----*/

#legal{
margin:30px 0 0 0;
padding:0 0 30px 0;
}

#legal p{
margin:0 0 2px 0;
}

#legal .bold{
font-weight:700;
}

#legal a{
color:#69696C;
text-decoration:none;
}

#legal a:hover, #legal a:visited, #legal a:focus{
color:#E84743;
}

Rien de sorcier pour cette dernière phrase. Juste du style de texte, à la bonne couleur, avec les bonnes polices pour correspondre à la maquette. Voilà le résultat :

Fine Cookies

Félicitations ! L’intégration HTML5/CSS3 est terminée ! Testez sous différents navigateurs pour voir le résultat !

04 – Test et débogage final

Étape importante avant de fournir votre intégration finalisée au développeur. Vérifiez votre code et le rendu sous différent navigateurs. Pas de soucis particulier avec Firefox, Chrome ou Safari mais on peux constater de légers problèmes avec Internet Explorer 8. Je ne parle pas des coins qui ne sont pas arrondis par exemple, ou des transition CSS qui ne sont pas gérées de manière fluide. C’est le cas en effet, mais pas de soucis tant que les informations sont claires, lisibles et correctement utilisables. Certaines propriétés CSS3 ne seront jamais supportées par IE8, nous devons donc faire avec. C’est parti, allons à la chasse aux insectes bugs ! :)

Bug 1 – Visuellement le menu principal est décalé :

Fine Cookie IE

On peux rapidement en déduire qu’il s’agit de problèmes de marges entre les liens. Pour y remédier, je vais créer un fichier CSS dédié à Internet Explorer que je nomme ie.css. La feuille de style est déjà chargée dans le <head> du document HTML. J’ajoute le CSS suivant pour corriger les espaces :

nav ul li{
padding:0 13px 0 0;
margin:0 13px 0 0;
}

nav ul li.last{
background:none;
padding:0;
margin:0;
}

La propriété last-child n’étant pas prise en compte par IE8, j’ai ajouté une classe .last au dernier <li> du menu principal.

Bug 2 – le texte n’est pas cadré correctement dans les liens sociaux :

Fine Cookies
Le texte passe sur deux lignes dans le bloc Facebook. Pour corriger ce problème, je vais modifier la taille de police uniquement sur IE en ajoutant à ma feuille de style conditionnelle :

#socialBox a {
font-size:13px;
}

Finalement ce n’était pas si terrible non ? La chasse au bug est terminée ! Avant de conclure ce tutoriel, je vous propose une petite amélioration Javascript en bonus.

Bonus : amélioration Javascript au survol des images

Pour donner de la vie à notre interface, je vous propose un petit script personnalisé. Souvenez-vous au début du tutoriel nous avons chargé un fichier hoverClass.js. Il va nous permettre de réaliser un fade-in/fade-out au survol des images et des boutons. Il va agir à la fois sur les éléments qui possèdent la classe .hoverBtn mais aussi sur toutes les images qui sont contenues dans un <article>. Voilà comment transcrire cette explication en Javascript :

$(document).ready(function(){
$('article img, .hoverBtn').hover(

function(){
$(this).stop().fadeTo('slow',0.6);
},
function(){
$(this).stop().fadeTo('slow',1);
});
});

Fine Cookies

Pourquoi en Jquery ? Simplement pour vous montrer différentes possibilités et aussi pour conserver cet effet intéressant sur Internet Explorer.

Pour conclure :

Le tutoriel est officiellement terminé ! Je tiens a préciser qu’en intégration, il existe bien entendu plusieurs manières de procéder. Il est donc normal que vous soyez tenté d’utiliser d’autres balises ou méthodes suivant les cas. En tout cas, je reste à votre disposition pour toutes questions. Vous pouvez retrouver l’intégration finale en ligne sur finecookies.fr.

Merci à tous ceux qui ont suivi attentivement les 3 grosses étapes de conception du site Fine Cookies. J’espère que j’ai pu vous fournir une bonne vision de ce que peut être un projet web. En parcourant ensemble la phase d’organisation et de réflexion créative, la création du design avec Photoshop et maintenant cette intégration HTML5/CSS3 vous possédez un panel d’informations considérables pour progresser ou tout simplement vous lancer dans un vrai projet.

Si le tutoriel vous a plus, je compte sur vous pour le partager un maximum avec vos amis graphistes, webdesigners, ou tout simplement curieux ou passionnés du web :).

À bientôt pour un prochain tutoriel ! En attendant retrouvez moi sur mon blog ;).

29 Comments to “Créer un webdesign e-commerce – 3/3 Intégration HTML5/CSS3”

  • Encore un travail formidable !
    Merci pour tout ces conseils, très bonne réalisation, dommage que l’on a pas les fichiers html, css pour décortiquer tout ceci a la loupe. Mais encore bravo.

    Et c’est vraiment génial de partager çà !
    Continuez

    • Merci pour ton soutien Sébastien ! Tu peux avoir les fichiers HTML/CSS si tu te créer un compte gratuitement sur Living Tuts. Les sources sont disponibles en téléchargement au début de l’article ;)

      • Super tuto merci !

        Dans le pack de ressources, il me semble qu’il n’y ait « que » le « FineCookies-Homepage-tutoriel-Livingtuts.psd ».

        Un grand merci pour le travail réalisé en tout cas !

      • Salut !
        Bravo Super tuto !
        Par contre je pense que Sebastien a raison quand il précise que les fichier html et css ne sont pas dispo lorsque l’on telecharge il n’y a que le fichier PSD qu’il y avait dans la partie 2 du tuto !
        Encore bravo ! Trés bien réalisé

        • Bonjour, c’était de ma faute ! Les fichiers sont maintenant les bons et téléchargeables via le même lien. :)

      • Merci, il y a pas de pb :)
        Nickel les gars toujours aussi bon de vous retrouver sur des sujets d’actualité !

  • Comme d’habitude, tu as réalisé un super dossier Arnaud. Bravo :)

  • Salut Arnaud,
    Je suis désolé je suis inscrit sur le site et en lien il y a le fichiers PSD et non les fichiers HTML/CSS :)

    • Bonjour sebastien, c’était de ma faute ! Les fichiers sont maintenant les bons et téléchargeables via le même lien. :)

  • Trés bon tutoriel, pas toujours évidant d’expliquer le découpage et l’intégration sans une petite vidéo

    Les explications sont vraiment claires, bravo

  • Bonjour,

    Des gens on réussi à le finir sans utilisé la source… (partie html ?)
    Car je n’ai plus envie de continué suite à deux trois « erreurs » ou mise en forme vraiment catastrophique !!!

    Sérieusement c’est affolant la mise en forme du codage sur le tuto même, alors que dans le fichier source c’est beau et propre.

    Alors je vais utilisé la source et la retapé car j’ai pas envie de me retrouvé avec un code qui ne fonctionne pas.
    Car à partir de la section « nouveauxProduits » c’est devenue encore plus brouillons, pour les gens avec des soucis de lecture c’est tout simplement presque impossible à lire sans devoir ce concentré.

    Donc à mon avis dans le tuto faudrait édité et mettre au propre…
    Et surtout rajouter les bouts de code qui manque (classe notamment tel que .prix et les p).

    Donc je suis un peu déçu malgré que le tuto est génial en soit, pour quelques erreurs ça ruine tout, je vais devoir utiliser les fichiers sources pour me guidé et non plus le site.
    Avant de vous laissez j’ai aussi une petite remarque sur la partie Design au début j’étais tout content de voir que on parlais d’un plugin Toshop pour faire des repères et d’apres les com en deux trois clique c’était fais…

    En effet en deux trois clique tu à bien les repères mais après j’ai du tout calculé pour avoir le même que les repères du tuto qui en faite était tout simplement des 960gs !

    Mais malgré tout merci pour le tuto, cependant je ne le « suivrai » plus temps que ses « erreurs » ne seront pas corrigé :/
    Car devoir revenir sur ses pas pour corriger des fautes d’un tuto je trouve ça quand même grave et surtout contre productif.

    • Bonjour Nyco,

      Je prends note de tes remarques, mais malheureusement la mise en forme du code est géré par la plate forme du site (WordPress). Les blocs de codes sont dépendants des résolutions d’écrans et aussi de la longueur des lignes. Dans le cadre du tuto, ils servent juste d’ »indications ».

      La meilleure des solution est de télécharger les sources en local pour suivre le tutoriel de manière plus pratique :)

      Par rapport aux « erreurs » ou classes manquantes, il s’agit d’un choix dans la conception du site. Comme on le sait, il n’y a pas de méthode absolue en intégration. Tout en suivant les règles élémentaires, tout le monde a sa façon de faire.

      Pour le 960gs, son utilisation est clairement énoncée au début du tuto, le plug-in Photoshop est une ressource supplémentaire qui pourra servir sur bien d’autres projets. Je l’utilise d’ailleurs tous les jours !

      J’espère avoir répondu à tes questions :)

  • Merci beaucoup ton tutoriel est génial, j’appris beaucoup, j’ai besoin de pratique je veux travailler dans le domaine du web j’étudie en développement web tes tutoriel m’aide beaucoup

  • S.V.P un tutoriel avec responsive design. Merciiii :)

    • C’est une idée qui me trotte dans la tête depuis un petit moment ! Donc pourquoi pas un nouveau tutoriel responsive ces prochains mois ;)

  • Tutoriel très bien réalisé.

    Effectivement, la lecture des parties « Code » est parfois laborieuse.

  • Merci Beaucoup,

    Je suis un débutant, j’ai commencé à travailler avec HTML5 et CSS3,
    C’est un très bon exercice pour moi.
    Très clair et précis. Tuto très réussi.
    Merci.

  • Merci pour ce tutoriel super complet ^^ Bon boulot en tout cas ;)

  • Un grand merci à Arnaud STECKLE et à l’équipe de Living Tuts, pour ce tutoriel complet et attrayant !
    Accro à votre site Internet, je m’amuse comme une folle à m’exercer grâce à vous, dans l’espoir de pouvoir me reconvertir un jour dans le WebDesign…

    Aussi, je me permets de m’indigner sur certains mécontentements (sans citer qui que ce soit – Cf plus haut) car vous faites un travail monstrueux !
    Pour les quelques PETITES erreurs rencontrées, j’ai trouvé cela intéressant car elles permettent de s’introduire encore plus dans le code et permettent par la même occasion, de savoir si nous avons bien compris les bases et le principes de chaque éléments.

    Dans l’impatience de vous lire à nouveau ! ;)
    Thancks !!

    • Merci pour ce commentaire Adelise ! Je n’en demandais pas tant, mais ça fait toujours plaisir ;)

  • super tuto, mais j’aimerais savoir comment se fait l’intégration d’un tel kit avec prestashop, svp

    • Je n’ai pas prévu comme je l’explique plus haut d’intégrer ce template dans un CMS comme Prestashop par exemple.

      Par contre avec cette base déjà intégrée en HTML/CSS il est « facile » de créer un thème pour n’importe quel CMS. Reste juste à posséder les connaissances nécessaires propres à chaque CMS (Smarty pour Prestashop, WordPress etc.) pour utiliser les bonnes variables et le tour est joué !

      Bonne chance !

  • Merciii beaucoup pour vos tutos, ils m’ont beaucoup aidé
    share is life ;)

  • bonjour,
    svp pour la balise pre pourquoi vous l’écrivez à l’inverse ( la balise fermente d’abord puis celle ouvrante)?.
    Merci

Laisser un commentaire