Créer un site web à menus multiples

Cet exercice va vous guider pas-à-pas pour réaliser une trame de site relativement simple (un sommaire à gauche et une page droite) qui pourra pointer vers plusieurs sous-sites identiques. cel permet de créer plusieurs grandes rubriques (4 dans notre exemple mais cela peut être plus) et de pointer vers d'autres sous-rubriques avec leurs sous-menus.

A. Création du jeu de cadre principal

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

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

B. Création du jeu de cadres

Ouvrir index.html.
Cliquer sur l'onglet Editeur de cadre.
Ouvrir l'onglet Cadres de la palette.
Glisser un cadre simple : Jeu de cadres : deux col., col. droite variable.
Enregistrer.

C. Création du Sommaire et de l'Accueil

Cliquer sur le bouton droit (ou Ctrl-Clic sur Macintosh) et aller sur Créer > Nouvelle page.
Il la nomme par défaut sans titre.html. La renommer sommaire.html.
Ouvrir le fichier sommaire.html et y écrire Sommaire.
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.
Cliquer sur le bouton droit (ou Ctrl-Clic sur Macintosh) et aller sur Créer > Nouveau dossier.
Le renommer Ressources.
Enregistrer le site par Ctrl-S ou (Pomme-S sur Macintosh).

D. Création des liens des sommaires et Accueil

Ouvrir la page (le jeu de cadre) index.html.
Sélectionner le cadre de gauche et le nommer Sommaire.
Dans l'inspecteur, utiliser l'« escargot » du menu URL pour lien ce cadre avec le fichier sommaire.html.
Lui attribuer une largeur de 160 pixels.
Sélectionner le cadre de droite et le nommer Droite.
Dans l'inspecteur, utiliser l'« escargot » du menu URL pour lien ce cadre avec le fichier accueil.html.

Enregistrer la page par Ctrl-S ou (Pomme-S sur Macintosh) et fermer la page.

Code
Html
des
frames

<html>

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

</html>

Enregistrer le site par Ctrl-S ou (Pomme-S sur Macintosh).

E. Création des sous-dossiers

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

F. Création des sous-sites

Aller dans le bureau, ouvrir le dossier SiteCadresMultiples Dossier puis le dossier SiteCadresMultiples.
Copier les fichiers accueil.html, sommaire.html et index.html.
Ouvrir le dossier Dossier1 et y copier les fichiers accueil.html, sommaire.html et index.html.
Faire la même chose dans les dossier Dossier2, Dossier3 et Dossier4.
Retourner dans le site et aller sur Site > Rafraîchir la vue. Les fichiers apparaîssent dans la fenêtre du site.
Enregistrer le site par Ctrl-S ou (Pomme-S sur Macintosh).

G. Lier les sous-dossiers

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

H. Faire un retour au menu principal

Ouvrir le fichier sommaire.html du Dossier1.
Écrire [retour au menu principal] sous le mot Sommaire.
Sélectionner retour au menu principal et le lier avec le fichier index.html de la racine du site.
Dans le menu déroulant de la fenêtre cible, choisir _top.
Copier [retour au menu principal] et coller sur tous les 3 fichiers sommaire.html des Dossier2, Dossier3 et Dossier4.

Essayer. Normalement, si tout vas bien, en cliquant sur les liens Dossier 1, Dossier 2, Dossier 3 et Dossier 4 on doit cahnger de menu et de page d'accueil et en cliqant sur le lien retour au menu principal, on doit revenir au menu principal.

oOo