Un deuxième site avec des cadres
Que sont les cadres? Un exemple de site simple avec cadres, c'est Orange, un petit cadre à gauche avec un menu et un grand cadre à droite pour afficher les pages. C'est un peu simple, mais combien efficace. Notre modèle sera légèrement différent.
Reprise des fichiers
Nous ne referons pas toutes les pages et pour simplifier, nous nous contenterons de modifier nos pages pour les adapter aux cadres.
Pour cela ouvrez votre Explorateur Windows. Dans la fenêtre (cadre) de gauche, cliquez une fois sur le dossier "internet" du dossier "Mes Documents" et là créez un nouveau dossier appelé "h-m-cadre" (Fichier, Nouveau, Dossier), éventuellement, revoyez la leçon 2. Dans la fenêtre de droite, si vous ne trouvez pas le nouveau dossier en bleu pour le renommer, faites un clic avec le bouton droit de la souris sur "Nouveau Dossier" et sélectionnez "Renommez".
Nous allons y copier les fichiers créés dans les leçons précédentes. Pour cela, cliquez sur le dossier "haute-marne" dans la fenêtre de gauche, cliquez sur un fichier de la fenêtre de droite et ensuite au clavier tapez "Ctrl A" (touche contrôle "Ctrl" plus touche "a" enfoncée ensemble, ceci sélectionne tous les fichiers). Appuyez sur le bouton droit de la souris et sans le lâcher, amener le curseur sur le dossier "h-m-cadre" de la fenêtre de gauche et seulement là, lâchez le bouton. Une fenêtre de choix s'ouvre, sélectionnez "copier".
Reprise du fichier "h-m.htm".
Lancez Claris et ouvrez le fichier "h-m.htm", mais attention, prenez le dans le dossier "h-m-cadre".
Positionnez-vous en bas de page et supprimez la ligne " Retour au menu " et enregistrez le fichier par appuis sur le bouton (3) "Enregistrer". Fermer ce fichier.
Faites de même avec le fichier " h-m-images.htm", supprimez la ligne " Retour au menu " et enregistrez le fichier par appuis sur le bouton (3). Fermer ce fichier.
Ouvrez le fichier "index.htm", et supprimez les trois dernières lignes (celles en bleu) puis cliquez sur "Fichier, Enregistrer sous" et appelez le "accueil.htm". Fermer ce fichier.
Mais vous pouvez penser que votre menu a disparu. C'est vrai, nous allons en créer un nouveau.
Dans Claris, cliquez sur "Fichier, Nouvelle Page" ou utilisez le bouton (1). Insérez dans cette page un tableau, bouton (16), de 3 colonnes, sur 1 rangée et sans contour qui occupe 90% de l'écran (onglet Autres). Si vous ne savez plus, reprenez une des leçons précédentes.
Vous devez utiliser un tableau pour séparer les différents choix car en HTML, on ne peut pas utiliser plus d'un espace entre deux mots comme dans Word. Claris sait le faire, mais c'est un beug, à l'affichage, il n'y aura qu'un seul espace.
Il faut maintenir définir la largeur des cellules.
Double cliquez sur le bord du tableau pour ouvrir la fenêtre "tableau" ou utilisez le bouton (9) depuis le tableau. Cliquez la cellule de gauche, la fenêtre tableau se modifie pour faire apparaître le format des cellules. Dans "Largeur de cellule", définissez le % et non le pixel et prenez une valeur de 33. Procédez de la même manière pour la cellule centrale et mettez la cellule de droite à une valeur de 34.
Dans la cellule de gauche écrivez "situation géographique", dans celle du centre "des images" et dans celle de droite "nous écrire". Vous centrez chaque titre (un centrage par cellule) et le tableau que vous aurez sélectionné au préalable.
Avec le bouton (11) "Option de document", sélectionnez le "fond-cuir.gif" du dossier "images", écrivez "menu" en guise de titre et vous validez le tout par "OK". Maintenant enregistrez le document sous le nom "menu.htm" mais attention, dans le dossier "h-m-cadre" et non "images", fermez le fichier. Nous ferons les liens ultérieurement.
Création du cadre :
Dans Claris faites "Fichier, Nouveau", (n'utilisez pas le bouton (1)), et là choisissez "cadre".
Une fenêtre de cadre s'ouvre. Sélectionnez en deux étapes par les boutons "fichier" et "ouvrir"
- le fichier "menu.htm"
- le fichier "accueil.htm"
Sélectionnez l'orientation "verticale" et validez par "ok".
Votre page s'affiche. Double cliquez dans le cadre supérieur. Une fenêtre "cadre" s'ouvre. Choisissez l'onglet "toutes" et dans la taille prenez 70 Pixels. Donnez-lui le nom "menu". Le champ défilement est mis à non, il est prévu pour l'affichage ou non d'un curseur à droite de l'écran lorsque vous visualiserez ce fichier avec un navigateur Internet.
Comme précédemment, sélectionnez le cadre inférieur. Dans le champ taille, au lieu de Pixel sélectionnez "auto" mais laissez la valeur 50, ce champ doit contenir une valeur. Dans le champ "nom", écrivez "affiche". Fermer la fenêtre cadre.
Ensuite faite un double clic sur la barre grise bordant les deux cadres et dans le champ "Autre HTML" de l'onglet "Autres" ou "Toutes", écrivez "border="0" " . Ainsi la séparation des deux cadres sera invisible lors de l'affichage de votre page. (Si vous le désirez, en fin de leçon vous pourrez essayer de retirer cette phrase, et enregistrer votre document pour constater la différence d'affichage)
Enregistrez le fichier sous le nom "index.htm" avec le bouton "Enregistrer" en ayant donnez le titre "Bonjour de Haute-Marne" et fermez le fichier. (Validez la réécriture de index.htm, car le fichier index existant était l'ancien fichier rapatrié du premier site).
Il faut maintenir rétablir les liens du menu.
Ouvrez le fichier "menu.htm". Avec le bouton (10) "Editeur de lien", nous établissons un lien de "situation géographique" vers "h-m.htm" par le bouton fichier. Mais ici il faut écrire "affiche" dans le champ "cadre cible". Ainsi le lien s'affichera dans le cadre inférieur de l'écran que nous avions appelé "affiche". Si ce champ n'apparaît pas, cliquez en bas de la fenêtre "lien" sur la petite flèche dirigée vers le bas.
De même, établissez le lien de "des images" vers " h-m-images.htm" dans le cadre "affiche" et le lien vers "mailto:toto.titi@orange.fr" pour le courrier. ( Rappelez-vous, @ est obtenu par Alt + 64 du pavé numérique). Pour ce dernier cas, il n'y a rien à saisir dans le "Cadre cible" puisque c'est le programme de gestionnaire de courrier qui va s'ouvrir.
Enregistrez le tout et visualisez le résultat en double cliquant sur le fichier "index.htm" du dossier "h-m-cadre" avec l'Explorateur Windows.
Le résultat est différent par rapport à la leçon 7, à vous de choisir votre type de site.
Maintenant à vous d'essayer de modifier des paramètres pour voir les différences d'affichage.
