Afin d'apprendre les manipulations de base permettant de créer un site, je vous propose la réalisation de quelques pages sur le thème... d'une recette de cuisine.
Vous trouverez ci-dessous toute la marche à suivre, pas-à-pas, pour aboutir à notre page.
Afin que vous disposiez de tout le matériel nécessaire pour la construction de ce site, notamment des images, téléchargez-le. (Cette archive contient également les documents finaux. 140 Ko.)
Voyons tout d'abord le résultat final.
!!! Attention (je ne vous le rappellerai plus dans cette marche à suivre), enregistrez régulièrement votre travail. Par exemple à la fin de chaque étape !!!
(peut aussi être atteint par l'intermédiaire du Menu Format.)
- Cliquer dans la palette sur le bouton Centrer
"250 g de beurre
6 douzaines de grosses moules
1 échalote
2 gousses d'ail
1 botte de persil haché
1 cuil. à soupe de pastis
Sel, poivre."
- Tapez une fois sur la touche Retour.
- Insérez un filet horizontal au moyen de la touche correspondante dans la palette :
- Tapez une fois sur la touche Retour.
- Sélectionnez tout le paragraphe contenant les ingrédients (depuis "250 g" jusqu'à "poivre".).
- Cliquez sur le bouton Italique :
"Ramollir le beurre à température ambiante.", Tapez une fois sur la touche Retour.
"Faire ouvrir les moules dans une marmite.", Tapez une fois sur la touche Retour.
"Les décoquiller. Ne conserver qu'une seule coquille par moule.", Tapez une fois sur la touche Retour.
"Malaxer le beurre avec l'échalote et l'ail hachés, le persil, le pastis.", Tapez une fois sur la touche Retour.
"Saler et poivrer.", Tapez une fois sur la touche Retour.
"Disposer 1 moule par coquille. Farcir avec le beurre. Les disposer au fur et à mesure sur des plats allant au four.", Tapez une fois sur la touche Retour.
"Les mettre à four très chaud, position gril, environ 5 minutes.", Tapez une fois sur la touche Retour.
"Servir aussitôt que le beurre est mousseux.", Tapez deux fois sur la touche Retour.
- Sélectionnez tout le texte, depuis "Ramollir" jusqu'à "mousseux.".
- Cliquez sur le bouton "Entrée non numérotée" :
- Sélectionnez le fichier "fond.GIF". Cliquez sur Ouvrir.
- Validez avec le bouton OK.
- Enregistrez, puis fermez votre page.
- Dans la 1ère cellule, tapez "Quel vin s'accordera au mieux avec ce plat ?".
Sélectionnez "Quel vin s'accordera au mieux avec ce plat ?". Dans le Menu local déroulant, sur la palette, sélectionner Titre 3.
- Cliquez dans la palette sur le bouton Centrer
- Placez votre curseur au bas de cette cellule, à cheval sur la ligne la séparant de la cellule inférieure, vous remarquerez que votre curseur se change en "curseur à deux flèches", que vous utiliserez pour redimmensionner cette cellule en hauteur.
- Dans la deuxième rangée :
1ère cellule, écrivez : "Accord classique..."
2ème cellule, écrivez : "Coup de coeur..."
3ème cellule, écrivez : "Vin de rêve"
4ème cellule, écrivez : "Vin original..."
- Dans la troisième rangée :
1ère cellule, écrivez : "Muscadet de Sèvres-et-Maine B"
2ème cellule, écrivez : "Bordeaux B"
3ème cellule, écrivez : "Mâcon B"
4ème cellule, écrivez : "Beaujolais B"
- Sélectionnez (cliquez dans) la 1ère cellule de la 2ème rangée, dans la partie Cellule de l'Editeur d'objets Tableau, cochez la case Titre. (Voir illustration ci-dessous.)
Faites de même avec toutes les cellules de la 2ème rangée.
- Sélectionnez l'ensemble du tableau en cliquant sur son bord extérieur. Dans la partie inférieure de l'Editeur d'objets Tableau, introduire Marges : 4. (Voir illustration ci-dessous.)
(Cela permet de donner plus d'espace entre les données et la bordure du tableau)
- Au moyen du "curseur à deux flèches", agrandir chaque rangée de façon à obtenir des cellules suffisamment hautes pour que les données s'y placent correctement.
- Dans l'Editeur d'objets Tableau, modifiez éventuellement le contour si vous le souhaitez plus épais. (Si vous adoptez un contour de 0, la bordure du tableau sera invisible. C'est une astuce que l'on emploie souvent lorsqu'on souhaite arranger précisément des objets sur une page : on crée un tableau dans lequel on régle au pixel près la mise en page, puis on rend invisible ses contours.)
- Tapez une touche Retour.
- Cliquez à la dernière ligne de la page.
- Ecrivez : "«Muscadet», mot sonore et chargé d'euphorie qu'un plaisant troubadour semble avoir inventé, certain jour qu'il cherchait dans un livre de vie, un synonyme de gaieté !"
- Tapez une touche Retour.
- Insérez l'image "retour.GIF (voir étape 11 si besoin.) et attribuez-lui le commentaire "Retour sur recette"
- Tapez un espace, puis le mot :"Retour".
- Tapez une touche Retour.
- Enregistrez votre document.
- Ouvrez le document "recette.html"
- Sélectionnez le texte "Quel vin s'accordera au mieux avec ce plat ?", puis cliquez sur le bouton de l'Editeur de lien :
- Dans l'Editeur de lien, cliquez sur le bouton Fichier...
- Sélectionnez le document "vin.html". Validez.
Le lien est maintenant établi. Un visiteur qui cliquera dessus, provoquera l'affichage de notre deuxième page dans son navigateur.
- Enregistrez, puis fermez ce document.
- Ouvrez le document "vin.html"
- Sélectionnez l'image de flèche au bas de la page, puis cliquez sur le bouton de l'Editeur de lien :
- Dans l'Editeur de lien, cliquez sur le bouton Fichier...
- Sélectionnez le document "recette.html". Validez.
Le lien est établi. Vous remarquerez que l'image de flèche est maintenant encadrée d'un rectangle, destiné à le préciser. (Ce rectangle peut être supprimé en spécifiant dans l'Editeur d'objet un Contour de 0.)