Préparation du code HTML

A partir d'une maquette d'une page, on va délimiter les grandes zones principales qui seront mises en forme en CSS par la suite. On prévoit également une version Responsive Design pour l'affichage sur les smartphones.

Il faut connaître le principe général de construction des éléments HTML à travers les balises. Ci-dessous, l'exemple de page.

Figure: Design de la page HTML version bureau

Figure: Version mobile avec le menu caché et affiché

Définir les grandes zones du squelette HTML. Entête (Header) qui contient la navigation (Nav) , la bannière, le contenu principal (Main) et le pied de page (Footer)

1. Header

   <header>
   	<nav id="principale">
   		<ul id="menu">
   			<a href="accueil.html"><li class="items" id="logo"></li> </a>
   			<li class="items active"><a href="#">Accueil</a></li> 
   <!--Préparer cet item "active" pour qu'il soit vu distinctement des autres quand on sera sur la page accueil-->
   			<li class="items"><a href="#">Produits</a></li>
   			<li class="items"><a href="#">Connection</a></li>
   			<li class="items"><a href="#">Contact</a></li>
   		</ul>
   	</nav>
   </header>

   Le header contient une navigation (nav) qui est structuré par une liste. Cette liste sera modifiée en CSS pour arriver au résultat suivant :
   
   
2. Bannière
   La bannière contient une image de fond et 2 titres dont le H2 a l'apparence d'un bouton (class action) :

   <div id="banner">
   		<h1 class="titre1-banner">Nouveaux bracelets,<br>
                                            charges et accessoires</h1>
   		<a href="#" class="class-action"><h2 class="titre2-banner">Voir les nouveautés</h2></a>
   </div>

   Figure: Bannière avec une image de fond

   
   
   

3. Main - Le bandeau des bracelets
   le main démarre par le bandeau des produits bracelets qui est contitué d'une liste d'éléments image

   <main>
   	<ul id="bandeau-bracelets">
   		<li class="bracelet"><a href="#"><img src="bracelet-web/bra1.png"></a></li>
   		<li class="bracelet"><a href="#"><img src="bracelet-web/bra2.png"></a></li>
   		<li class="bracelet"><a href="#"><img src="bracelet-web/bra3.png"></a></li>
   		<li class="bracelet"><a href="#"><img src="bracelet-web/bra4.png"></a></li>
   		<li class="bracelet"><a href="#"><img src="bracelet-web/bra5.png"></a></li>
   	</ul>

   Figure: Liste composée contenant des images en liens

   
   
   

4. Main - Les modules "découvertes"
   Dans une section, on va placer 3 articles contenant du texte. Ces articles sont encadrés par un lien.

   <section id="contenu">
   	<a href="#" class="decouverte">
   		<article class="module1 modules">
   		    <h2>Découvrez le nec plus ultra des applications fitness</h2>
   		    <p>Commencer à explorer</p>
   		</article>
   	</a>
   	<a href="#" class="decouverte">
   		<article class="module2 modules">
   		    <h2>Votre coach électronique</h2>
   		</article>
   	</a>
   	<a href="#" class="decouverte">
   		<article class="module3 modules">
   		    <h2>Découvrez notre façon de redéfinir la forme physique</h2>
   		    <p>La différence DataMoov</p>
   	        </article>
   	</a>
   </section>

   
   
   
5. Footer
   Après le main, on place le footer qui est un parent direct de body. Le footer est constitué d'une nav comprenant une liste d'images pour les réseaux sociaux puis d'un paragraphe avec un lien pour les mentions légales.

   </main>
   <footer>
   	<nav id="menu-bas">
   		<ul id="reseaux-sociaux">
   			<li class="pictosRS"><a href="#"><img src="pictos-RS/facebook.png"></a></li>
   			<li class="pictosRS"><a href="#"><img src="pictos-RS/google-plus.png"></a></li>
   			<li class="pictosRS"><a href="#"><img src="pictos-RS/pinterest.png"></a></li>
   			<li class="pictosRS"><a href="#"><img src="pictos-RS/twitter.png"></a></li>
                        <li class="pictosRS"><a href="#"><img src="pictos-RS/vimeo.png"></a></li>
   			<li class="pictosRS"><a href="#"><img src="pictos-RS/youtube.png"></a></li>
   		</ul>	
   	</nav>
   		<p><a href="#">Mentions légales</a></p>	
   </footer>

   Figure: Le footer composé d'une liste dans la nav