S1 - M1105 - Web

Maintenant qu'on sait structurer une page... faisons une page plus jolie.

Attention: ceci est juste un exercice, on reprendra la démarche, étape par étape, avec plus de conseils, au TP-4 pour construire la page d'accueil de votre projet.

On va garder la même structure du HTML qu'à la question précédente.

Le seul changement important est l'ajout du <div id="illustrations">, qui contient trois <div> avec des liens sur des images.

Le reste est identique à la structure de l'exercice précédent. On a juste ajouté un peu de contenu.

Lisez le HTML suivant attentivement et copiez le dans un fichier:

<div id="exterieur">

  <header id="entete"><h1>Mon site à moi</h1></header>
  
  <div id="illustrations">
    <div class="boite" id="boite1">
      <a href="">
        <img width="289" height="175" alt="photo" src="bror.jpg">
      </a>
    </div>
    <div class="boite" id="boite2">
      <a href="">
        <img width="289" height="175" alt="photo" src="nat.jpg">
      </a>
    </div>
    <div class="boite" id="boite3">
      <a href="">
        <img width="289" height="175" alt="photo" src="nas.jpg">
      </a>
    </div>
  </div>
  <div id="milieu">
    <main id="principal">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non diam in neque blandit commodo. Quisque lobortis sollicitudin nisl pulvinar condimentum. Sed est diam, hendrerit id dignissim vel, adipiscing interdum elit. Vivamus a laoreet eros. Pellentesque sollicitudin pretium fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </p>
      <p id="plus"><a href="...">En savoir plus...</a></p>
    </main>

    <nav id="navigation" >
      <ul>
        <li><a href="...">Musique</a></li>
        <li><a href="...">Photos</a></li>
        <li><a href="...">Amis</a></li>
        <li><a href="...">Liens</a></li>
      </ul>
    </nav>
  </div>

  <footer id="bas-de-page">
    <p>
      <span>Contact: moi@exemple.org</span>
      <span>Copyright (c) example.org - 2013</span>
      <span>Librement inspiré du <a href="http://freehtml5templates.com/downloads/free/todo/">template « todo »</a></span>
    </p>
  </footer>

</div>

Dans les pages suivantes, on va essayer d'obtenir ceci:

Images:

Enregistrez les images suivantes:

background.png:

bror.jpg:

nat.jpg:

nas.jpg:

Étapes:

A la page suivante on va construire ensemble le CSS, étape par étape, pour obtenir le résultat voulu.