[Exercice] Page d'accueil de Microsoft conforme aux standards

Bonjour à tous,

Etant informaticien de métier, mais novice dans le domaine des standards, j'ai décidé de m'y mettre depuis peu. Comme exercice, j'ai eu envie de prendre un site web existant, et de le refaire mais en étant conforme aux standards (tout en restant le plus proche possible de l'original). C'est en fait cet article qui m'a donné l'idée, ainsi que le chapitre du livre d'Eric Meyer dans lequel il refait un site conforme.

J'ai donc choisi la page d'accueil du site de Microsoft France (oui comme dans l'article ci-dessus, pas très original, mais bon). Notez qu'il faut visiter le site avec IE pour qu'il s'affiche dans les meilleures conditions.

Déjà quelques questions se posent, et j'aimerai vous demander votre avis.

1) Structure globale

Pour l'instant j'ai défini la structure globale ci-dessous :

<div id="page">
  <div id="header">
  </div>
  <div id="content">
    <div id="menu">
    <!-- ici le menu -->
    </div>
    <div id="main">
    <!-- ici le contenu principal, avec un <div> pour chaque section, ainsi qu'un <div> pour chaque produit -->
    </div>
    <div id="sidebar">
    <!-- ici la barre latérale avec les catégories "actualités", "téléchargements" et "support" -->
    </div>
  </div>
  <div id="footer">
  </div>
</div>

Qu'en pensez-vous ?

2) Menu

En ce qui concerne le menu, j'ai choisi la structure ci-dessous :

<h2>Produits</h2>
  <ul>
    <li>Windows</li>
    <li>Office</li>
    ...
  </ul>
<h2>Ressources</h2>
  <ul>
    <li>Evénements & Webcasts</li>
    <li>Support</li>
    ...
  </ul>
...

Utiliser l'élément h2 pour les catégories de menu vous semble-t-il adéquat ? Idem, pour les menus en eux-mêmes, une liste non ordonnée vous semble-t-il être la meilleure solution ?

3) En-tête

J'ai un peu de mal à structurer l'en-tête. C'est surtout le fait qu'il soit "coupé" en deux (horizontalement, avec en haut les liens vers l'accueil et le plan, et en dessous le logo et une zone de recherche) qui me gêne.

Moi je vois quelque chose du style :

<div id="header">
  <div id="header1">
    <p id="country">France</p>
    <p id="links">Accueil | Plan du site</p>
  </div>
  <div id="header2">
    <p id="logo"><img ... /></p>
    <p id="search"><input .../></p>
  </div>
</div>

Ce qui me gêne, c'est l'utilisation de trois <div>, je ne trouve pas ça très correct sémantiquement. Aussi les deux <p> dans chaque section, quelque chose me gêne, mais je ne vois pas quoi mettre d'autre (des <div> encore ?).

Voilà, c'est tout pour le moment.

D'avance merci pour vos suggestions !
Modifié par goetzilla (10 May 2005 - 13:07)

Salut goetzilla et bienvenue parmis nous

Cet exercice est très intéressant (d'ailleurs à mon avis, tu ne dois pas être le premier à tenter l'expérience) !

Je ne peux pas me pencher dessus, mais cela pourrait presque faire l'objet d'un coucours ou d'un jeu

Raphael a écrit :
Salut goetzilla et bienvenue parmis nous

Merci ! Ca fait un moment que je visite ce site, mais je ne suis encore jamais intervenu.

Raphael a écrit :
Je ne peux pas me pencher dessus, mais cela pourrait presque faire l'objet d'un coucours ou d'un jeu

Moi c'est surtout pour apprendre que j'ai eu envie de faire ça. Je me trompe peut-être mais j'ai l'impression que c'est plus formateur que de me dire que je vais construire un site de a à z pour apprendre.