Création des pages

Quelques petits conseils avant de commencer :

utilisez l'extension .php au lieu de .html ou .htm pour vos pages (voir les bases du langage PHP).
n'utilisez pas de frames qui posent trop de complications avec les moteurs de recherche,
réfléchissez dès maintenant à structure de votre site : son aperçu, son organisation, son contenu,
voyez aussi les quelques scripts proposés pour savoir lesquels vous souhaitez mettre dans vos pages.

Problèmes rencontrés à ce stade : se posent alors plusieurs problèmes, qui se situent à différents niveaux :

des problèmes matériels : par exemple, un affichage sur écran 15 pouces n'aura pas le même rendu que sur un 17',
des problèmes de configuration : résolution d'écran, javascript et cookies désactivés,
et des problèmes logiciels : chaque internaute dispose de son propre OS (windows 98, windows XP, Macintosh, ...) de son propre navigateur (Internet Explorer, Netscape...) et de ses propres plug-ins (tels que Flash).

Commençons donc par créer les premiers fichiers nécessaires. Pour vous aider dans la création de pages il existe une multitude de logiciels. Personnellement, je vous conseille Dreamweaver... mais vous pouvez également utiliser FrontPage ou tout logiciel que vous préférez utiliser. Avant de vous lancer dans la création des pages, lisez la présentation des langages html et php.

Si vous êtes sûr d'avoir compris ces langages, commencez par créer un fichier d'accueil avec votre logiciel (nommé index.php) et sans vous soucier pour l'instant de tous les scripts créez votre page selon l'aperçu que vous aurez choisi : images, menus...

Une fois l'interface créée on va chercher le code qui sera répété dans chaque page. Dans cet exemple, le menu sera le même pour tout le site. On va donc l'exporter dans un fichier spécifique.

Vous pouvez télécharger l'interface présentée ici ou l'un des autres kits disponibles dans la partie kits graphiques.

D'un point de vue code, voici comment cela va se passer :

<html>
<head>
<title>accueil du site</title>
</head>

<body bgcolor="#FFFFFF" text="#000000">

<table width="100%" border="1" cellspacing="0" bgcolor="#FFF1CF">
<tr>                                                             
<td width="18%">                                                 
    <div align="center">Votre logo</div>                         
  </td>                                                          
  <td width="24%" align="center">                                 
    Menu 1 - Menu 2 - Menu 3                                     
  </td>                                                          
  <td width="58%" align="center">                                 
    Menu, en-t&ecirc;te du site qui sera le m&ecirc;me pour chaque page.
  </td>                                                            
</tr>                                                              
</table>                                                           

<br>

<table width="100%" border="1" cellspacing="0" bgcolor="#FFF1CF">
<tr>
  <td height="142" align="center">
    Retse de la page, diff&eacute;rent pour chacune des pages du site
  </td>
</tr>
</table>

</body>
</html>

Création de l'interface : précédent | suivant : Mise en ligne