Serie3 TD N°1

Alain Boivin
C2i
TD N°3
Décompresser l'archive vin.zip dans un dossier « vin ».
Ce dossier « vin » sera la racine de votre site, il contient les sous-dossiers « images », « textes » et
« documents » qui eux-mêmes contiennent tous les éléments nécessaires à la réalisation du site.
30. Ouvrir la page « modele.html ». Charger le style « modèle vin ».
Activer Format – Styles – Charger puis choisir dans la catégorie « par défaut » le style.
Appliquer à la première ligne du tableau et à celles contenant une image, le style « Contenu de tableau
centré » ; aux cellules contenat du texte le style « Contenu de tableau ».
Créer les styles suivants:
« Contenu de tableau droit»: basé sur « Contenu de tableau » avec un alignement à droite.
« Contenu de tableau centré »: basé sur « Contenu de tableau » avec un alignement centré.
Enregistrer la page, puis l'enregistrer comme modèle de document sous le nom modèle vin ( qui
remplacera le précédent modèle ).
Ouvrir dans OpenOfficeDocumentHTML la page « cepage.html ».
31. Dans cette page « cepage.html », insérer un repère de texte ( une ancre ) devant le nom du cépage qui
figure dans la cellule de gauche des lignes 3 à 6 [ L'Aligoté, Le Chardonnay, Le Pinot noir et Le Gamay
(noir à jus blanc) ].
Les noms donnés à ces ancres seront respectivement Al, Ch, Pi et Ga.
32. Créer cette page cepage.html un lien ayant pour source le mot « aligoté » contenu dans la deuxième ligne
du tableau et dont la cible soit l'ancre « Al ».
Pour créer un lien en choisissant la fenêtre d'affichage de la cible:
Ne pas indiquer de Chemin (la cible est dans même page)
Sélectionner l'origine du lien; Activer Insertion – Hyperlien
Cliquer sur l'icône « Cible dans le document » et choisir l'ancre
Choisir dans Paramètres supplémentaires - Cadre l'item
Cliquer sur Appliquer puis Fermer la boîte de dialogue ou créer un autre lien
Créer ensuite trois liens selon le même principe dont les origines sont « chardonnay », « pinot noir » et
« gamay » et les cibles respectives, les ancres « Ch », « Pi » et « Ga ».
Enregistrer puis tester les liens.
Créer une nouvelle page à partir du modèle de document « modèle » et l'enregistrer comme page d'accueil
du site.
La page sera nommée « Vins de Bourgogne » et sa largeur sera de 27 cm.
33. Insérer dans cette page un cadre qui sera nommé « Haut », dont le contenu sera la page « Haut.html », la
barre de défilement et la bordure seront désactivées. Les écarts avec le contenu seront nuls.
34. Les propriétés du cadre « Haut » seront modifiées de la manière suivante: largeur : 26 cm,
hauteur : 3,6 cm, ancré à la page; la position du cadre sera 0 cm à gauche et vers le haut.
35. Insérer dans cette page un second cadre qui sera nommé « Bas », dont le contenu sera la page
« Accueil.html », la barre de défilement sera activée et la bordure sera désactivée. Les écarts avec le
contenu seront nuls.
Les propriétés du cadre « Bas » seront modifiées de la manière suivante: largeur : 26 cm, hauteur : 18 cm,
ancré à la page; la position du cadre sera 0 cm à gauche et 3,6 cm vers le haut.
36. Créer dans la page « haut.html » (qui apparaît dans le cadre « Haut » de la page « Index.html ») un lien
ayant pour source « Les Cépages » et dont la cible soit la page « cepage.html » qui sera affichée dans le
UFR Sciences Humaines
Université de Bourgogne
Alain Boivin
C2i
cadre « Bas » de la page « index.html ».
Créer des liens ayant pour sources: « Les Appellations »; « Les Régions »; « La Production » et l'image
placée dans la cellule la plus à gauche; et pour cibles respectives les fichiers enregistrés dans le dossier
« documents » du site : « Appell.sxw »; « regions.sxi »; « prod.sxc » et la page « accueil.html »
enregistrée à la racine du site. Les cibles seront toutes affichées dans le cadre « Bas » de la page
« Index.html ».
37. Créer dans la page « haut.html » ( qui apparaît dans le cadre « Haut » de la page « Index.html » ) un lien
ayant pour source « Ecrivez-nous » et dont la cible soit votre adresse e-mail ( par exemple :
« [email protected] » ) qui sera affichée dans le cadre « Bas » de la page « index.html ».
38. Vérifier le fonctionnement du site.
Compresser le dossier « vin » à l'aide de PowerArchiver en nommant l'archive « Votrenom_Vin ».
UFR Sciences Humaines
Université de Bourgogne