Créer des liens. Démarrage 1

Transcription

1 Démarrage 1 Créer des liens WebPlus comporte un large éventail de possibilités de création de liens hypertexte qui facilitent la navigation sur votre site, notamment s'il contient de grandes images. Dans cet exercice, vous apprendrez à : Créer des objets texte et importer des images. Créer des ancres. Créer et modifier des liens hypertexte. Créer des liens hypertexte via des images à liaison automatique.

2 2 Didacticiels Créer des liens hypertexte Dans ce didacticiel, nous examinerons les différentes possibilités de liens hypertexte et nous présenterons quelques fonctionnalités WebPlus utiles. 1 Dans l'assistant de démarrage, choisissez Créer/Créer un site (ou cliquez sur Fichier, puis sur Nouveau). Notre projet se compose d'une page sans contenu. Nous ajouterons du contenu pour présenter l'utilisation des liens hypertexte mais nous ne concevrons pas un site complet. 2 Sélectionnez l'outil Texte artistique, puis faites glisser le pointeur de la souris jusqu'à ce que la taille du texte atteigne 50 points environ. La taille du texte est indiquée dans la barre d'état. 3 Attribuez un titre à la page, placez le texte dans la moitié supérieure. 4 Comme nous allons travailler avec des objets texte plus petits, il vous faudra effectuer un zoom avant. Sur la gauche de la page, créez un objet texte de taille moyenne (env. 24 points) et saisissez le texte "Section 1". 5 Maintenez la touche Ctrl enfoncée, puis faites descendre l'objet par cliquer-déplacer. Relâchez le bouton de la souris pour déposer une copie de l'objet texte sur la page. 6 Recommencez deux fois l'étape précédente pour créer quatre objets texte au total. Modifiez les objets texte pour changer leur titre en Section 1, Section 2, Section 3 et Section 4. 7 Cliquez sur une zone vide de la page pour désélectionner tous les objets. A présent, cliquez et déplacez la souris en diagonale sur les objets et relâchez le bouton de la souris lorsque le cadre de sélection rectangulaire contient tous les objets.

3 Démarrage 3 Faites un clic droit sur le groupe et sélectionnez Style d objet, puis Alignement des objets. 8 Dans la boîte de dialogue Aligner les objets : Sous la catégorie Répartir, choisissez Intervalle régulier vertical. Sous la catégorie Horizontalement, choisissez Gauche. Cliquez sur OK. Il est possible d'ajouter des ancres à tous les objets d'une page, ce qui facilite considérablement la navigation et permet d'accéder rapidement au contenu du site. Vous pouvez inclure des ancres pour les parties importantes de votre site dans les cartes ou les barres de navigation. Pour cela, cochez l'option Inclure l'ancre dans la navigation. (Assurez-vous de donner un titre explicite aux ancres, car c'est ce que vos visiteurs verront.) 9 Sélectionnez l'objet texte Section 1. Dans la barre d'outils verticale, cliquez sur la palette Lien hypertexte, puis sur Ancre (ou faites un clic droit sur l'objet et sélectionnez Ancre). Dans la boîte de dialogue Ancre, saisissez "Section1", puis cliquez sur OK. (Notez que les noms des ancres ne peuvent pas contenir d'espaces). Nous avons ajouté ainsi une ancre à l'un des objets. Mais à quoi sert-elle? Cette opération revient à placer un marquepage dans un livre pour indiquer un endroit que vous souhaitez pouvoir atteindre rapidement. Toutefois, une ancre ne vous mène pas uniquement à une page précise, comme le fait le marque-page, elle permet à un lien hypertexte de vous mener à un emplacement particulier d'une page Web! 10 Répétez l'étape précédente pour chacun des objets texte en nommant les ancres en fonction du nom des sections.

4 4 Didacticiels Avant de créer des liens hypertexte, nous devons créer des objets auxquels ajouter les liens hypertextes. 11 Sélectionnez l'outil Texte artistique et cliquez une fois sur la page pour créer un objet texte avec les réglages par défaut (texte de 12 points). Saisissez à nouveau "Section 1". 12 Créez des copies de l'objet comme décrit précédemment (étapes 5 et 6). Modifiez les objets texte pour qu'ils correspondent aux titres de section créés précédemment. 13 Alignez les objets texte sous le titre et sélectionnez-les tous en traçant un cadre de sélection autour. Sous l'onglet Alignement, cliquez sur Centre vertical et Intervalle régulier horizontal. 14 Cliquez sur l'objet texte Section 1 situé en haut de la page pour le sélectionner. Cliquez sur la bordure grise de l'objet pour le sélectionner dans sa totalité (si un curseur clignotant de saisie de texte apparaît, alors le lien hypertexte n'est pas lié à la totalité de la ligne de texte). 15 Cliquez sur la flèche à côté de l'outil Ancre pour afficher à nouveau la palette Lien hypertexte, puis cliquez sur l'outil Lien hypertexte.

5 Démarrage 5 16 Dans la boîte de dialogue Liens hypertextes : Sélectionnez Ancre. Toutes les ancres définies dans le site sont énumérées dans la liste déroulante Ancres. Choisissez l'ancre nommée Section1. Dans le champ Titre, saisissez "Cliquez pour atteindre la Section 1". Cliquez sur OK. 17 Répétez l'étape précédente pour ajouter des liens hypertexte entre les autres petits objets texte et les ancres des titres de sections. 18 Cliquez sur Aperçu HTML pour vérifier le fonctionnement des liens hypertextes et des ancres lorsque la page est affichée dans un navigateur Web. Notez que les titres saisis sont affichés lorsque le pointeur survole un lien hypertexte. Fermez le navigateur lorsque vous avez fini d'explorer vos liens. Pour les longues pages Web munies d'ancres dans la partie inférieure de la page, vous pouvez proposer un lien permettant de revenir au haut de la page. Ce lien se nomme généralement "Haut". Vous n'avez pas besoin d'utiliser une ancre à cette fin. Nous allons vous expliquer comment procéder. L'option Exporter le chemin complet de l'url permet à vos visiteurs d'ajouter votre page à leurs signets. Elle est particulièrement utile si vous utilisez des cadres pour afficher du contenu dans votre site.

6 6 Didacticiels 19 Créez un objet texte, saisissez le mot "haut" et placez-le à l'extrémité inférieure de la page. Il servira de "bouton". 20 L'objet texte étant sélectionné, cliquez sur l outil Lien hypertexte pour ajouter un lien hypertexte à l'objet sélectionné. Cliquez sur l'option Page du site. Dans la liste déroulante Nom de la page, choisissez la page courante et cliquez sur OK. 21 Affichez un aperçu du site pour tester. Nous venons de vous expliquer comment accéder à des emplacements particuliers mais les hypertextes permettent aussi de réaliser d'autres tâches. 22 Cliquez sur le bouton Importer une image. Dans la boîte de dialogue Importer une image, sélectionnez une image de votre choix dans votre bibliothèque d images personnelles. Nous avons choisi l image Ruine.png pour notre exemple. Sélectionnez l'option Lier une image. Cliquez sur Ouvrir.

7 Démarrage 7 Dans l'espace de travail de WebPlus, notez que le pointeur s'est transformé en pointeur Importer une image. Vous pouvez importer l'image à sa taille originale par un simple clic, ou cliquerdéplacer pour définir la taille de l'image. Dans la boîte de dialogue Liens hypertexte : Sélectionnez l'option Image. Dans la liste déroulante Fenêtre ou cadre cible, choisissez Nouvelle fenêtre. Cliquez sur OK. 23 Cliquez juste au-dessous du titre Section 1 sur la gauche de la page et faites glisser le pointeur jusqu'à ce que la hauteur de l'image atteigne la moitié de la distance séparant les titres Section 1 et Section 2. Relâchez le bouton de la souris lorsque vous êtes satisfait de la taille de l'image. 24 Lorsque l'image est sélectionnée, ouvrez la boîte de dialogue Liens hypertexte. 25 Affichez un aperçu du site pour vérifier le fonctionnement de ce type de lien hypertexte. Cliquez sur la vignette de l'image pour accéder à l'image en pleine taille. Vous pouvez paramétrer les options du Titre de l'image (le texte qui apparaît lorsque vous passez votre curseur sur l'image) dans la boîte de dialogue ouverte par le bouton Options d'exportation.

8 8 Didacticiels Vous pouvez utiliser cette méthode de création de liens hypertextes via des images à liaison automatique pour créer une galerie photos en ligne. Les visiteurs pourront cliquer sur les vignettes pour afficher l'image en taille réelle. Lorsque notre site a été publié dans un dossier temporaire pour en permettre l'aperçu, WebPlus a remarqué que la "vignette" redimensionnée était beaucoup plus petite que l'image originale, de sorte qu'il a créé une version beaucoup plus petite pour accélérer le téléchargement de la page. 26 Retournez au projet, faites un clic droit sur la petite image et sélectionnez Propriétés. Vous remarquerez que la vignette est bien plus petite que l'image originale (dans le cas présent, 36 x 54 pixels). La vignette est donc beaucoup plus légère que la photo originale (294 Ko, 570 x 852 pixels). Le téléchargement sera donc beaucoup plus rapide! Nous vous laissons explorer les autres types de liens hypertextes qui permettent de créer des liens vers d'autres adresses Web, adresses , pages de votre site, etc. Les liens hypertexte et les ancres peuvent être visualisés et gérés depuis le Gestionnaire de site, accessible depuis la barre d'outils contextuelle. Pour plus d'informations sur l'utilisation du Gestionnaire de site, voir l'aide en ligne.