Maquette modifiable - Tutoriel HTML & CSS

Fermer

Comment utiliser cette maquette modifiable ?

Sur la partie de gauche, vous pouvez modifier le fichier CSS qui est appliqué en permanence à la maquette de site à droite.
Cochez et décochez les cases pour activer et désactiver certaines lignes CSS, afin de voir leur effet.
Le code CSS est généralement prévu pour permettre d'activer les lignes une par unes dans l'ordre.
Généralement, quelques indications sont présentes dans les encadrés "À vous de jouer" de la page Maquette CSS, pour surligner certaines parties du code ou certains groupes de lignes CSS et leur effet combiné.

Si la coche et / ou la décoche de lignes est trop lente, vous pouvez télécharger la version hors-ligne : les modifications de la maquette seront alors quasiment instantanés.

Qu'est-ce que cette page ?

Cette page est prévue en complément de la rubrique Maquette CSS du Tutoriel HTML & CSS de Sébastien Laoût.
La maquette modifiable doit donc être utilisée tout au long de la lecture de cette rubrique.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Catalogue des bateaux - Maquettes Casey Steven &amp; Son</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <!--[if lt IE 8]><link rel="stylesheet" type="text/css" href="ie.css"><![endif]-->
  </head>
  <body>

    <!-- L'entête de la page, affiché tout en haut de l'écran : -->
    <div id="entete">
      <h1>Maquettes Casey Steven &amp; Son</h1>

      <!-- Le menu principal du site, affiché horizontalement, tout en haut de l'écran, juste en dessous de l'entête : -->
      <ul id="menu">
        <li><a href="#"><span>Lien 1</span></a></li>
        <li><a href="#" class="actuel"><span>Lien 2</span></a></li>
        ...
      </ul>
    </div>

    <!-- La page en elle-même, cette division sera utile pour styler le site en CSS : -->
    <div id="page">
      <!-- Le sous-menu, affiché dans une colonne sur la gauche du site : -->
      <ul id="sous-menu">
        <li><a href="#">Lien 1</a></li>
        <li><a href="#" class="actuel">Lien 2</a></li>
        ...
      </ul>

      <!-- Le contenu utile de la page, affiché sur une grande colonne à droite du site : -->
      <div id="contenu">
        <h2>Catalogue des bateaux</h2>

        <h3>Les bateaux qui flottent</h3>
        <p>Lorem ipsum...</p>
      </div>

      <!-- Le pied de page, affiché tout en bas de l'écran. Est à l'intérieur du div "page" pour le CSS : -->
      <div id="pied">
        Paragraphe de copyrights...
      </div>
    </div>

  </body>
</html>