Référentiel
»

Créer un site web à menu principal haut, à sous-menus à gauche et à partie libre à droite

Cet exercice permet de créer une trame de site web possèdant un menu principal en haut et des sous-menus à gauche avec, suprême rafinement, une partie droite vide pour ne pas polluer la lecture.

A. Création du jeu de cadre principal

  1. Ouvrir GoLive. Il propose de créer une Nouvelle page, de créer un Nouveau site ou d'Ouvrir.
  2. Choisir Nouveau site.
  3. Sélectionner Utilisateur unique > Site vierge.
  4. Le nommer SiteMenuHautP puis cliquer Suivant >.
  5. Cliquer sur Parcourir... et choisir le bureau.
  6. Cliquer sur Terminer.

GoLive va créer sur le bureau un dossier SiteMenuHautP Dossier contenant tous les dossiers necessaires au fonctionnement du site dont le dossier SiteMenuHautP, celui qui contient le fichier index.html. Votre structure de site est prête.

B. Création du jeu de cadres

  1. Ouvrir index.html.
  2. Il n'existe pas de façon élégante de faire ces frames alors... Cliquer sur l'onglet Source, copier la source suivante et la coller dans le fichier index.html.
    <html>

    <head>
    <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
    <title></title>
    </head>

    <frameset border="0" cols="160,640,*" frameborder="no" framespacing="0">
    <frame name="Sommaire" noresize src="(EmptyReference!)">
    <frameset border="0" frameborder="no" framespacing="0" rows="40,*">
    <frame name="Haut" scrolling="no" src="(EmptyReference!)">
    <frame name="Droite" noresize scrolling="yes" src="(EmptyReference!)">
    </frameset>
    <frame name="P" noresize scrolling="no" src="(EmptyReference!)">
    <noframes></noframes>
    </frameset>

    </html>
  3. Ouvrir l'onglet Cadres de la palette. Vous devez obtenir la figure suivante mais plus large.
  4. Enregistrer.

C. Création du Sommaire, de l'Accueil, du menu haut et de la partie droite P

  1. Cliquer sur le bouton droit (ou Ctrl-Clic sur Macintosh) et aller sur Créer > Nouvelle page.
     
  2. Il la nomme par défaut sans titre.html. La renommer sommaire.html.
  3. Ouvrir le fichier sommaire.html et y écrire Sommaire. Enregistrer et fermer.
  4. Cliquer sur le bouton droit (ou Ctrl-Clic sur Macintosh) et aller sur Créer > Nouvelle page. La renommer accueil.html et y écrire Accueil. Enregistrer et fermer.
  5. Cliquer sur le bouton droit (ou Ctrl-Clic sur Macintosh) et aller sur Créer > Nouvelle page.
  6. La renommer haut.html.
  7. Aller dans la palette d'objets Standard et glisser un Tableau dans la page haut.html.
  8. Dans l'inspecteur du tableau, donner les valeurs suivantes :
    Ligne : 1 ; Colonnes : 4 ; Largeur : 320 pixels ; Bord : rien ; Remp. cellule : 3 ; Esp. cellule : rien.
  9. Sélectionner les 4 cellules et dans l'inspeteur des cellules, donner les valeurs suivantes :
    Largeur : 25 pour cent ou 80 pixels.

    Pour information, le tableau mesure actuellement 28 pixels de haut.
  10. Enregistrer et fermer.
  11. Cliquer sur le bouton droit (ou Ctrl-Clic sur Macintosh) et aller sur Créer > Nouvelle page. La renommer p.html. Ce sera la partie vide de droite. Enregistrer et fermer.
  12. Cliquer sur le bouton droit (ou Ctrl-Clic sur Macintosh) et aller sur Créer > Nouveau dossier.
  13. Le renommer Ressources.
  14. Aller sur le bureau et ouvrir le dossier SiteMenuHaut Dossier pour vérifier.
  15. Enregistrer le site par Ctrl-S ou (Pomme-S sur Macintosh).

D. Création des liens vers le sommaire, l'accueil, le haut et P

  1. Ouvrir la page (le jeu de cadre) index.html.
  2. Sélectionner le cadre de gauche et le nommer Sommaire.
  3. Dans l'inspecteur, utiliser l'« escargot » du menu URL pour lien ce cadre avec le fichier sommaire.html.
    Dans le code source, nous lui avons attribué une largeur de 160 pixels.
  4. Sélectionner le cadre inférieur droite et le nommer Droite.
    Dans le code source, nous lui avons attribué une largeur variable.
  5. Dans l'inspecteur, utiliser l'« escargot » du menu URL pour lier ce cadre avec le fichier accueil.html.
    Dans le code source, nous lui avons attribué une largeur de 640 pixels, le maximum conseillé pour un confort de lecture à l'écran.
  6. Sélectionner le cadre supérieur droite et le nommer Haut.
    Dans le code source, nous lui avons attribué une hauteur de 40 pixels.
  7. Dans l'inspecteur, utiliser l'« escargot » du menu URL pour lier ce cadre avec le fichier haut.html.
  8. Sélectionner la ligne qui sépare le cadre Haut et le cadre Droite.
    Dans le code source, nous lui avons attribué les paramètres suivants Taille du bord : 0 ; Cadre du bord : Non.
  9. Le code source devient :

    <html>

    <head>
    <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
    <title></title>
    </head>

    <frameset border="0" cols="160,640,*" frameborder="no" framespacing="0">
    <frame name="Sommaire" noresize src="haut.html">
    <frameset border="0" frameborder="no" framespacing="0" rows="40,*">
    <frame name="Haut" scrolling="no" src="haut.html">
    <frame name="Droite" noresize scrolling="yes" src="accueil.html">
    </frameset>
    <frame name="P" noresize scrolling="no" src="p.html">
    <noframes></noframes>
    </frameset>

    </html>
  10. Enregistrer par Ctrl-S ou (Pomme-S sur Macintosh) et fermer la page.
  11. Enregistrer le site par Ctrl-S ou (Pomme-S sur Macintosh).

E. Création des sous-dossiers

  1. Faire un double-clic sur le dossier Ressources pour l'ouvrir.
  2. Cliquer sur le bouton droit (ou Ctrl-Clic sur Macintosh) et aller sur Créer > Nouveau dossier.
  3. Le renommer Dossier1.
  4. Faire la même chose pour des nouveaux Dossier2, Dossier3 et Dossier4.
  5. Enregistrer le site par Ctrl-S ou (Pomme-S sur Macintosh).

F. Création des sous-sites

  1. Aller sur le bureau et ouvrir le dossier SiteMenuHaut Dossier puis le dossier SiteMenuHaut.
  2. Copier les fichiers accueil.html, sommaire.html et index.html (pas le haut.html et pas le p.html).
  3. Ouvrir le dossier Dossier1 et y copier les fichiers accueil.html, sommaire.html et index.html.
  4. Faire la même chose dans les Dossier2, Dossier3 et Dossier4.
  5. Retourner dans le site et aller sur Site > Rafraîchir la vue.

    Les fichiers apparaîssent dans la fenêtre du site mais les index.html des sous-dossiers sont tous avec une erreur, un bogue (ou un « bug », genre de blatte ! ) : il leur manque le lien vers le fichier haut.html et vers p.html. Nous allons les recréer.
  6. Ouvrir le fichier index.html du Dossier1.
    Sélectionner le cadre Haut. Dans l'inspecteur, utiliser l'« escargot » du menu URL pour lier ce cadre avec le fichier haut.html.
    Sélectionner le cadre P. Dans l'inspecteur, utiliser l'« escargot » du menu URL pour lier ce cadre avec le fichier p.html.
  7. Faire de même pour les 3 autres Dossier2, Dossier3 et Dossier4. Les bébetes auront disparu...
  8. Enregistrer le site par Ctrl-S ou (Pomme-S sur Macintosh).

G. Lier les sous-dossiers

  1. Ouvrier le fichier haut.html de la racine du site.
  2. Écrire dans les quatres cellules les mots Dossier 1, Dossier 2, Dossier 3 et Dossier 4.
  3. Sélectionner Dossier 1 et le lier avec le fichier index.html du Dossier1 en utilisant l'« escargot » du menu URL de l'inspecteur.
  4. Dans le menu déroulant de la fenêtre cible, choisir _top.
  5. Faire de même pour les mots Dossier 2, Dossier 3 et Dossier 4 avec les fichiers index.html des Dossier2, Dossier3 et Dossier4.

H. Faire un retour au menu principal

Pas besoin de retour au menu principal pour aller vers les sous-menus qui sont toujours présent en haut. Par contre, il peut être interressant de pouvoir retourner à la page d'accueil.

  1. Ouvrir le fichier sommaire.html du Dossier1.
  2. Ajouter 1 après le mot Sommaire.
  3. Aller dans la palette d'objets Standard et glisser un Tableau au-dessus du mot Sommaire de la page sommaire.html du Dossier1.
  4. Dans l'inspecteur du tableau, donner les valeurs suivantes :
    Ligne : 1 ; Colonnes : 1 ; Largeur : 80 pixels ; Bord : rien ; Remp. cellule : 3 ; Esp. cellule : rien.
  5. Écrire Accueil dans la celluleIl est possible, afin de garder le même style — donc avoir une vraie charte graphique — de mettre Accueil dans une cellule identique à celle du menu Haut.
  6. Écrire Sous-menu 1 à Sous-menu 6 sous Sommaire 1.
  7. Sélectionner Accueil et le lier avec le fichier index.html de la racine du site.
  8. Faire de même avec sommaire.html de Dossier 2, Dossier 3 et Dossier 4.
  9. Ouvrir accueil.html de chacun des Dossier 1, Dossier 2, Dossier 3 et Dossier 4. et écrire Accueil 1 pour le premier, Accueil 2 pour le deuxième et ainsi de suite...

I. Vérification

  1. Essayer dans un navigateur. Normalement, si tout vas bien, en cliquant sur les liens Dossier 1, Dossier 2, Dossier 3 et Dossier 4 on doit changer de menu et de page d'accueil.
  2. Pour montrer ce que donne un tel site, un fond gris a été ajouté aux pages sommaire.html, haut.html et p.html.

Il ne reste plus qu'à appliquer un style Css et à remplir les pages. Éventuellement, rajouter un sous-menu Menu 5 ou même un Menu 6.

oOo

Document Bernard Dimet
© PorTices
dimanche 5 mars 2006