Structure d'un site

STRUCTURE

Un site web n'est pas si long à créer. Du temps doit quand même être pris pour bien bâtir la structure du site afin de faciliter la maintenance. Un site bien conçu dès le départ permettra d'ajouter de nouvelle section, changer l'apparence du site... plus aisément. Dès le départ, nous devons penser comment on va découper notre site web: un en-tête, un menu, un sondage, un pied de page, la zone principale... Ensuite, nous devons penser où que ses zones soient affichées et quelles dimensions elles prendront.

Chaque zone devrait être défini à l'aide de la balise <div>. La mise en page à l'aide de tableau est à proscrire. Tant qu'à faire un site web, autant respecter les standards. L'utilisation de div, permet d'alléger le code.
Notre exemple comporte 4 zones: un en-tête, un menu, une zone principale et un pied de page.

Entête

L'entête présenté ci-dessous est celui utilisé pour le site web actuel. Ce script est utilisé pour toutes les pages du site web. Deux variables sont passées au script afin de modifier le tag titre et description.

<?php
function entete($sec_nomsection,$tmp){
?>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
    <head>
      <title><?php  echo $sec_nomsection; ?> - La boîte à prog </title>
      <link rel="stylesheet" type="text/css" href="/screen.css" />
      <meta http-equiv="Content-Language" content="fr" />
      <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
      <meta name="description" content="Site web d'apprentisassge - Cours, tutoriels et lien en programmation ainsi que des critiques de livres: Delphi, Pascal, PHP, Génie logiciel"/>
      <meta name="Keywords" content="<?php  echo $tmp.","; ?> Borland rulez, Delphi, cours, La boite à prog, Tutoriels, Tutoriaux, Système d'exploitation, Tutoriel, Génie logiciel, Interbase, Firebird, Optimisation, Bash" />
    </head>
    <body>
      <div class="conteneur">
        <div id="header">
          <div class="left">
            <img src="/img/logo.gif" alt="logo du site web" />
          </div>
          <div class="right">
            <a href="index">Accueil</a> | <a href="contact">Contact</a> | <a href="contribution">Contribution</a> | <a href="forum">Forum</a><br/>
            <form method="post" action="resultat" id="recherche">
              <div>
              <input class="txtsub" type="text" id="motsclef" name="motsclef" />
              <input type="hidden" name="form" value="recherche" />
              <input class="butsub" type="submit" name="resultat" value="Rechercher" />
              </div>
            </form>
          </div>
          <div class="pied"></div>
        </div>
 <?php
}
?>

Pied de page

Tel que l'entête, le pied de page présenté ci-dessous est celui utilisé pour le site web actuel.

<?php
function piedpage(){
  ?>   
    <br/>
    <div id="footer">   
      <div class="left">
        Webmestre: <a href="mailto:collinm@laboîteaprog.com" title="Courriel du webmestre">Marc Collin</a>
      </div>
      <div class="center">
        <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" height="31" width="88" /></a>
        <a href="http://jigsaw.w3.org/css-validator/"><img width="88" height="31" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!"/></a>
      </div>
    </div>   
  </div>
</body>
</html>
<?php
}
?>

Menu

Pour un menu, plusieurs options peuvent être envisagées, vertical, horizontal, utilisation de liste, javascript... Dans un site web, plusieurs sections peuvent exister, ces sections peuvent être mises dans une base de donnée. Lorsqu'une section sera ajoutée dans la base de donnée, le changement aura lieu directement sur le site web.

function topmenu()
{
  echo'<br/><br/><div class="framemenu"><div class="menu">';
  // Obtient les noms des section de la bd
  $requete = mysql_query("SELECT sec_nosection, sec_nomsection FROM section");
  if ( mysql_num_rows($requete) != 0 )
  {
    // li les sous-sections dispo dans la bd et les affiche - delphi/kylix, asm -->
    while ($ligne = mysql_fetch_assoc($requete))
    {
      $tmp=htmlentities(''.$ligne["sec_nomsection"].'');
      echo'<a href="news'.$ligne["sec_nosection"].'">'.$ligne["sec_nomsection"].'</a>';
    }
  }
  echo'</div></div><br/>';
}

Zone principal

La zone principale est la zone où la majorité de l'information est affichée. C'est la zone qui change le plus... les autres : en-tête, pied de page... changent moins fréquemment. Par exemple sur ce site, la page principale affiche les nouveautés du site. Ensuite si on se dirige dans une section, les nouveautés de la section sont affichées. Les tutoriels, description de livre... sont affiché dans cette section.

Nous avons vu comment structure un site web. Il est possible de diviser les zones de notre site web afin d'avoir différentes zones. Cette pratique est mieux qu'utiliser des frame. Cette approche à l'avantage de fonctionner dans tout navigateur web. L'exemple montré était celui de ce site web.