Introduction
Le but du présent tutoriel est de vous présenter une façon de mettre en place un design qui s'adapte automatiquement aux résolutions des visiteurs. Parmi les contraintes qu'il fallait prendre en compte :
- Compatible avec la majorité des navigateurs (testé avec Firefox 1.5 et 2.x, Internet Explorer 6 et 7, Safari et Opera)
- Respect des standards.
Note : Ne vous attendez pas à voir un design de tueur à la fin. Je me suis uniquement focalisé sur la base, les fioritures s'implémentent ensuite toutes seules. En plus ça permet d'avoir les yeux directement sur le contenu.
Première partie
Structure de base
Avant de se lancer tête baisser dans le code, il convient de réfléchir aux différentes parties dont sera composé votre site. Dans cet exemple, on va prendre un classique :
- Une entête (div#header)
- Le corps de la page à gauche (div#leftcol)
- Le menu à droite (div#rightcol)
- Un pied de page (div#footer)
On pourra bien sur rajouter des éléments comme un menu entre l'entête et le corps, un autre menu, enlever le menu. Bref, profitez que vous en êtes à la création de la structure pour définir au mieux ce que vous voulez.
Code de la page (Monter - Cacher)
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang='fr' xml:lang='fr' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta name="description" content="Comment faire un design extensible ? Tutoriel tiré du site Delistage.net" />
<meta name="keywords" content="mots clés"/>
<meta name="author" content="www.delistage.net"/>
<title>delistage.net • Un design extensible valide XHTML strict et CSS • Partie 1</title>
</head>
<body>
<div id="header">
<h1>Tutoriel delistage</h1>
<h2>Un design extensible valide XHTML strict et CSS</h2>
</div>
<div id="container">
<div id="leftcol">
<h1>Introduction</h1>
<p>
Le but du présent tutoriel est de vous présenter une façon de mettre en place un design qui s'adapte automatiquement aux résolutions des visiteurs. Parmi les contraintes qu'il fallait prendre en compte :<br/>
- Compatible avec la majorité des navigateurs (testé avec Firefox 1.5 et 2.x, Internet Explorer 6 et 7, Safari et Opera)<br/>
- Respect des standards.
</p>
<p>
Note : Ne vous attendez pas à voir un design de tueur à la fin. Je me suis uniquement focalisé sur la base, les fioritures s'implémentent ensuite toutes seules. En plus ça permet d'avoir les yeux directement sur le contenu.
</p>
<h1>Keira Knightley</h1>
<h2>Actrice anglaise</h2>
<p>
<img src="./img/keira-knightley.png" alt="Portrait Keira Knightley" />
N'ayant pas été motivé pour trouver quelque chose en rapport avec le sujet, j'ai préféré prendre une photo au pif d'une de mes actrices préférées et mettre une petite bio histoire de mettre en place les images et avoir du contenu un (beaucoup) plus intéressant que les <strong>lorem ipsum</strong>. ^^'<br/><br/>
Keira Knightley débute sa carrière à la télévision en apparaissant dans de nombreux spots publicitaires. En 1999, elle décroche, à l'âge de seize ans, le rôle de Sabé dans Star wars : épisode 1 - La Menace fantôme. Après ce démarrage fracassant et parallèlement à une carrière télévisuelle (les séries Princess of thieves et Oliver Twist), la jeune femme progresse à son rythme, prenant bien soin de varier les genres.<br/><br/>
Ainsi, en 2001, Keira Knightley est l'une des jeunes vedettes du thriller horrifique The Hole. L'année suivante, elle change radicalement de registre en campant une joueuse de football dans la comédie Joue-là comme Beckham (2002). En 2003, elle monte d'un cran en tenant l'un des principaux rôles du film d'aventures Disney Pirates des Caraïbes, la malédiction du Black Pearl aux côtés de Johnny Depp et Geoffrey Rush. Trois ans plus tard, elle enfilera à nouveau la toilette de l'aristocratique Elizabeth Swann pour les deux autres volets Pirates des Caraïbes, le secret du coffre maudit et Pirates des Caraïbes, jusqu'au bout du monde.<br/><br/>
Sa beauté irradie l'écran comme en témoigne sa prestation dans la comédie romantique Love actually (2003) de Richard Curtis. Hollywood se l'arrache : Keira Knightley prête ainsi ses traits à Guenièvre dans la fresque épique Le Roi Arthur (2004), avant de troquer son arc et ses flèches pour les armes à feu qu'affectionne la chasseuse de primes Domino Harvey. Mais à partir de 2005, la belle se tourne vers un répertoire plus classique, tournant à deux reprises sous la direction du britannique Joe Wright (Orgueil et préjugés, REVIENS-MOI) et goûtant à l'oeuvre d'Alessandro Baricco (Soie).<br/><br/>
Source : <a href="http://www.allocine.com/">Allociné</a>.
</p>
</div>
<div id="rightcol">
<h1>Plan du tutoriel</h1>
<ul>
<li><a href="index.html">1. Structure de base</a></li>
<li><a href="tuto2.html">2. Placement des blocs</a></li>
<li><a href="tuto3.html">3. Mise en page basique</a></li>
</ul>
<h1>Menu 2</h1>
<ul>
<li><a href="#">Lien 1</a></li>
<li><a href="#">Lien 2</a></li>
<li><a href="#">Lien 3</a></li>
</ul>
<h1>Liens</h1>
<ul>
<li><a href="http://www.delistage.net/">delistage</a></li>
<li><a href="http://validator.w3.org/check?uri=referer">XHTML</a></li>
<li><a href="#">CSS</a></li>
</ul>
</div>
</div>
<div id="footer">
2008 © <a href="http://www.delistage.net/">delistage.net</a>
</div>
</body>
</html>
Une fois la structure XHTML prête, on peut constater que la mise en page est vraiment loin de ressembler à quelque chose étant donné que tout est à la suite selon la lecture du flux. Il est temps de placer les différents blocs !
Lire la suite : Placement des blocs
Keira Knightley
Actrice anglaise
N'ayant pas été motivé pour trouver quelque chose en rapport avec le sujet, j'ai préféré prendre une photo au pif d'une de mes actrices préférées et mettre une petite bio histoire de mettre en place les images et avoir du contenu un (beaucoup) plus intéressant que les lorem ipsum. ^^'
Keira Knightley débute sa carrière à la télévision en apparaissant dans de nombreux spots publicitaires. En 1999, elle décroche, à l'âge de seize ans, le rôle de Sabé dans Star wars : épisode 1 - La Menace fantôme. Après ce démarrage fracassant et parallèlement à une carrière télévisuelle (les séries Princess of thieves et Oliver Twist), la jeune femme progresse à son rythme, prenant bien soin de varier les genres.
Ainsi, en 2001, Keira Knightley est l'une des jeunes vedettes du thriller horrifique The Hole. L'année suivante, elle change radicalement de registre en campant une joueuse de football dans la comédie Joue-là comme Beckham (2002). En 2003, elle monte d'un cran en tenant l'un des principaux rôles du film d'aventures Disney Pirates des Caraïbes, la malédiction du Black Pearl aux côtés de Johnny Depp et Geoffrey Rush. Trois ans plus tard, elle enfilera à nouveau la toilette de l'aristocratique Elizabeth Swann pour les deux autres volets Pirates des Caraïbes, le secret du coffre maudit et Pirates des Caraïbes, jusqu'au bout du monde.
Sa beauté irradie l'écran comme en témoigne sa prestation dans la comédie romantique Love actually (2003) de Richard Curtis. Hollywood se l'arrache : Keira Knightley prête ainsi ses traits à Guenièvre dans la fresque épique Le Roi Arthur (2004), avant de troquer son arc et ses flèches pour les armes à feu qu'affectionne la chasseuse de primes Domino Harvey. Mais à partir de 2005, la belle se tourne vers un répertoire plus classique, tournant à deux reprises sous la direction du britannique Joe Wright (Orgueil et préjugés, REVIENS-MOI) et goûtant à l'oeuvre d'Alessandro Baricco (Soie).
Source : Allociné.