Identification des éléments nécessaires
Nous prenons ici pour exemple un site assez classique dans sa structure que voici avec ses éléments identifiés :
Après avoir identifié les différents blocs comme dans l’image ci-dessus, on peut en déduire une structure html en adoptant quelques règles simples :
les blocs d’information sont listés dans le html du haut de la page vers le bas de la page, car c’est dans ce sens que sera affichée la page par le navigateur
la sidebar est autant que possible écrite sous le contenu principal pour lui donner un ordre prioritaire. Il s’agit d’une règle de bonne pratique, pas une obligation.
On va placer du contenu fictif dans cette page. Une fois que l’on construira le thème avec Wordpress, le contenu factice sera remplacé par les "templates tags" qui nourriront la page avec le contenu provenant de la base de données.
Wrapper, header
Une fois ces éléments identifiés, on peut démarrer une page html. Pour cet exemple encore, on choisira une norme XHTML 1 transitionnel. On démarre avec Smultron (ou Fraise) comme ceci :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
</body>
</html>Une feuille de style est directement associée, avec pour nom style.css.
On va englober l’ensemble du code dans un div portant l’id "wrapper". C’est un habitude d’intégrateur : le wrapper permet de limiter la largeur de l’ensemble de la page, ou de centrer la page facilement.
<div id="wrapper">
<div id="header">
<h1><a href="./">Nom du site</a></h1>
</div>
</div>On place à l’intérieur le header, pour y placer le nom du site dans la balise h1. H1 désigne le titre principal du site, je préfère y placer personnellement le titre d’un article, mais il se trouve qu’y mettre le nom du site est un comportement standard de Wordpress. Je m’y plie donc.
Navigation
Selon les cas, on placera la barre de navigation (si elle existe) dans le header ou sous le header. Dans le cas présent, on peut la placer dans le header, on obtient donc ceci :
<div id="wrapper">
<div id="header">
<h1><a href="./">Nom du site</a></h1>
<div id="site-navigation">
<ul>
<li><a href="./">Home</a></li>
<li><a href="./">Work</a></li>
<li><a href="./">Me</a></li>
<li><a href="./">Journal</a></li>
<li><a href="./">Let's talk</a></li>
</ul>
</div>
</div>
</div>Si le menu de navigation comporte deux niveaux, on aura une deuxième liste (ul + li) à l’intérieur des "li" du premier niveau.
Un élément non-standard
Ce layout comporte un élément assez inhabituel, un titre de section que nous avons appelé "page-header". Ajoutons le entre la navigation et le main, là ou il apparait dans la page :
<div id="page-header">Work</div>Main
On trouve dans la partie principale de cette page trois choses : un diaporama (que l’on réduira à une image pour cette démo), un texte principal et de l’information secondaire. On codera comme suit :
<div id="main">
<img id="image-principale" src="bigimage.jpg" />
<div id="texte">
<h2 class="case-title">Down With Webster</h2>
<p class="ingress">A website I designed while freelancing in September/October 2009 for the upcoming band from Canada, Down With Webster, that recently signed with Motown/Universal in USA.
</p>
<p>The site itself works as a more personal communication tool for the band members and includes a blog, twitter and flickr feed and the opportunity for their fans to comment on their blog posts.
</p>
</div>
<div id="information">
<h4>Responsibilities</h4>
<p>Design</p>
<h4>Timeframe</h4>
<p>September 2009 — October 2009</p>
</div>
</div>Le titre de l’article est placé dans un h2, les sous-titres dans des h4. Pour le reste, on a un div "texte" contenant une série de paragraphes.
Sidebar
Comme annoncé, la sidebar arrive après le main, bien que dans le sens de lecture gauche-droite, elle soit placée avant. Il s’agit d’une liste contenue dans un div, chaque li contenant une image, un titre en h4 contenant un lien et un texte en un seul paragraphe. Nous avons ajouté un "clearer", inutile sémantiquement, mais qui sera utile pour la mise en page. Une entorse aux recommandations du W3C, donc.
<div id="sidebar">
<ul id="work_list">
<li class="current">
<img src="fichiers/work-thumb.png">
<h4>Down With Webster</h4>
<p>Website designed for Down With Webster while freelancing for 45royale, Inc.</p>
<div class="clearer"></div>
</li>
<li>
<a href="/portfolio/dokus/"><img src="fichiers/lite_port_____.png"> </a>
<h4><a href="/portfolio/dokus/">Dokus</a></h4>
<p>Web application for small business with invoicing, task and project management. </p>
<div class="clearer"></div>
</li>
<li>
<a href="/portfolio/kompani-linge/"><img src="fichiers/thumb-port.png"></a>
<h4><a href="/portfolio/kompani-linge/">Kompani Linge</a></h4>
<p>A different production agency with love for theater and drama and an intention of creating good art, peace and change.</p>
</li>
<li>
<a href="/portfolio/noko-jeans/"><img src="fichiers/thumb-port.png">
</a><h4><a href="/portfolio/noko-jeans/">Noko Jeans</a></h4>
<p>Noko Jeans is jeans from North Korea.</p>
</li>
<li>
<a href="/portfolio/ic-finance/"><img src="fichiers/thumb-port.png">
</a><h4><a href="/portfolio/ic-finance/">IC-Finance</a></h4>
<p>IC-Finance offers accounting through simple web applications.</p>
</li>
</ul>
</div>Footer
Un footer termine assez classiquement la page :
<div id="footer">
<p id="footer-copy">© 2009 </p>
<p id="footer-contact"><a href="http://www.twitter.com" title="Stalk me on Twitter!">Twitter</a> — <a href="/about/" title="About me">About me</a> — <a href="/contact/" title="Let's talk">Contact</a></p>
<p id="quote">I'm not here just to deliver, I'm here to impress.</p>
</div>Voilà
Le code est maintenant terminé. Analysé par Firebug sur Firefow, ça donne ça :
La page html complète peut être téléchargée ci-joint. On peut maintenant passer au codage de la CSS dans l’article suivant.