michel.pageperso webdesign

Composition d'un site:

Par commodité, j'emploierai le terme site mais celui-ci englobera également le terme blog - qui n'est qu'un site un peu plus interactif - même si, selon les concepteurs/hébergeurs, des différences apparaissent. Le principe reste le même.

Avant de vouloir embellir un site, voyons comment est composé un site.
Un site est généralement composé d'un bloc contenant:
- un haut de page > son entête; pour annoncer le nom du site, et souvent un sous titre
- un menu > sa navigation; voire des sous-menu et sous-sous-menu
- des pages > son contenu; nécessitant des titres, des textes, des annotations, des liens
- un bas de page > sa fermeture
- un style > sa forme; ce que voit le visiteur.

Le design d'un site:

C'est là que nous intervenons. Pour qu'un site soit visité, il doit être agréable à voir et facile d'utilisation. Quelque soit son contenu, si le visiteur ne comprend pas comment passer d'une page à une autre, si la lecture des articles est fatigante; il quittera le site et ne reviendra pas. En plus maintenant, le site doit être visible autant sur un grand écran de bureau que d'un écran plus petit de tablette voir de téléphone. C'est l'objectif de ce travail.

La structure d'un site:

Pour servir d'exemple, nous allons utiliser un site dont sa structure et son contenu ne changerons pas; nous nous contenterons d'intervenir sur sa forme. Ce qui signifie que nous ne modifierons que le style - le fichier CSS (Cascading Style Sheets: feuilles de style en cascade).
Mais commençons par étudier sa structure composée de différents blocs:
- un bloc qui englobera tout le site, le bloc > site
- un bloc pour l'entête, le bloc > haut
- un bloc pour le menu, le bloc > menu
- un bloc pour le contenu, le bloc > ventre
-- un bloc pour les articles, le bloc > article
-- un bloc pour des commentaires mis dans une colonne, le bloc > colonne
- un bloc pour le bas de page, le bloc > bas
Voici le code d'un site de base avec une telle structure:

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=9" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="description" content="Ceci est un exemple de site." />
	<title>Site de base</title>	
</head>
	
<div id="site"><!--début du site-->
	<div id="haut"><h1>Titre du site</h1><p>Sous-titre</p></div>
	<div id="menu"><!--début du menu-->
		<ul><li><a href="">Menu 1</a></li>
			<li><a href="">Menu 2</a>
				<ol><li><a href="">Sous-menu 21</a></li></ol>
			</li>
			<li><a href="">Menu 3</a>
				<ol><li><a href="">Sous-menu 31</a></li><li><a href="">Sous-menu 32</a></li><li><a href="">Sous-menu 33</a></li></ol>
			</li>
		</ul>
	</div><!--fin du menu-->
	<div id="ventre"><!--début du ventre-->
		<div id="article"><!--début de la colonne de droite-->
			<h1>Titre de l'article</h1>
			<p>Paragraphes de l'article</p>
			<div id="lien"><a href="">Lien</a></div>
			<hr />
			<h1>Titre de l'article</h1>
			<p>Paragraphes de l'article</p>
			<div id="lien"><a href="">Lien</a></div>
			<h2>Annotation</h2>
		</div><!--fin de la colonne de droite-->
		<div id="colonne"><!--début de la colonne de gauche-->
			<h1>Titre de la colonne</h1> 
			<p>Paragraphes de la colonne</p>
			<hr />
			<h1>Titre de la colonne</h1> 
			<p>Paragraphes de la colonne</p>
		</div><!--fin de la colonne de gauche-->
	</div><!--fin du ventre-->
	<div id="bas"><!--début du bas de page-->
		<p>Bas de page</p>
	</div><!--fin du bas de page-->
</div><!--fin du site-->
</html>

Pour illustrer au mieux mon propos, voyez un exemple de site avec une telle structure et un contenu léger sans aucun style.

Voir le site d'exemple sans style

Ce fichier HTML servira de base à notre travail; il est dès à présent fonctionnel mais sans aucune mise en valeur (en réalité le navigateur que vous utilisez donne un style minimal). Notez que le site ainsi présenté est visible par tous les terminaux quelques soit la largeur d'écran. Faîtes des essais sur différents supports ou en redimentionnant la fenêtre de votre navigateur.

Prochain exercice: donner à ce site un style simple.

michel.pageperso embellie le web