Bon, maintenant il serait peut être temps que vous passiez réellement à la pratique. Non, vous n'allez pas vous lancer au hasard, j'ai fais une page "modèle" que j'ai nommée Album, pour vous faire une idée de ce qui vous attends, vous pouvez déjà l'ouvrir en cliquant ici : Album.
Vous chargez les photos, que vous placerez dans un dossier. Vous créez une nouvelle page, par la commande "pomme+N", vous lui donnez un titre (vous savez, en haut à gauche, à côte du petit fichier), vous l'enregistrez. Ensuite vous copiez le texte de ma page, vous le coller dans votre nouvelle page, et vous enregistrez (cmd+S).
Regardez le format de mes trois titres, donnez le même format à vos titres (souvenez-vous <h1> </h1>). À l'endroit où devront venir les photos, créez des paragraphes (touche "entrée").

Vous avez maintenant besoin de la palette Objets. Cliquez sur l'icone portant un point d'interrogation (voyez quand le pointeur la survole, sa fonction apparaît dans le bas de la palette), puis faites-la glisser à l'emplacement qui lui est destiné (vous pouvez aussi faire un double clic sur l'icone).


L'icone est sélectionnée. La palette Inspecteur s'est transformée en Inspecteur d'image. La zone Source contient le texte Empty reference! ce qui signifie que vous n'avez pas encore défini l'image. Cliquez sur le bouton portant un dossier.
Recherchez le fichier "abbesses.jpg" que vous avez rangé dans un dossier. Une fois la photo dans le texte, cliquez sur aperçu dans le haut de la page, et voyez le résultat.


Les références de l'image
Les images ne sont pas enregistrées directement dans le document HTML. GoLive se contente d'établir une référence vers les images.


Cette information est enregistrée dans la balise <img>. dans cet exemple, l'instruction HTML est la suivante :
<img src="TP_gif/album/abbesses.jpg" width="358" height="236" border="2" alt="Place des abbesses">. L'attribut src signifie source. Il est suivi du nom du dossier TP_gif, de l'autre dossier album, et du nom de l'image (c'est-à-dire du nom de l'image et du chemin pour y accéder). Les attributs widht et height définissent la largeur et la hauteur de l'image. L'attribut border défini le cadre que j'ai appliqué à l'image, il est de 2 pixels, et l'attribut alt est le texte de remplacement ou alternatif. GoLive récupère ces informations directement dans l'image et les met en place automatiquement.


Vous allez devoir maintenant ajouter un cadre à cette photo et un texte de remplacement. La palette Inspecteur vous donne accès à toutes ces possibilités.
Pour placer un cadre autour de l'image, vérifiez que la case à cocher Bord est activée, puis indiquez l'épaisseur du cadre dans la zone correspondante, dans ce cas 2. Par défaut, cette valeur est à 0 (border="0").
Le texte de remplacement (alternatif) est important dans le cas d'une connexion lente, pendant que l'image est transférée, le surfeur peut savoir ce que l'image contiendra. S'il a désactivé l'affichage des images, un texte de description sera affiché.


Sur cette page, vous remarquerez que la deuxième image est décalée, et que le texte s'est placé à côté. Je ne vais pas vous demander de le faire, car c'est pas mal de chipo, surtout quand il y a plusieures images. Mais regardez, quand vous cliquez sur l'image, l'Inspecteur affiche un article "Alignement" à côté duquel se trouve un menu déroulant. Amusez-vous à changer l'alignement. Vous pouvez jouer entre l'alignement de l'image et l'alignement du texte (les trois boutons en haut de la page.


Vous constatez que images et textes ne se mettent jamais où vous le désirez.
Quelques infos à ce sujet : un objet graphique se comporte d'emblée comme un (grand) caractère. Si vous tapez un texte à sa suite, celui-ci se place automatiquement à sa bordure inférieure. La suite du texte passe éventuellement au-dessous de l'image, dans la ligne suivante.
Vous souhaitez que le texte commence en haut de l'image, et "coule" autour de celle-ci. Sélectionnez l'image, puis passez dans la palette Inspecteur, et modifiez la sélection de la liste déroulante Alignement. Choisissez la valeur Gauche. Le texte a changé de place et "coule" autour du cadre. Ce comportement est induit par l'attribut align="left". Vous pouvez naturellement choisir l'alignement Droite. dans ce cas le texte se place automatiquement à gauche de l'image. Pour revenir au comportement initial, sélectionnez l'option Par défaut. L'image se comporte à nouveau comme un grand caractère. Cette méthode présente cependant un inconvénient : vous ne pouvez pas positionner l'image de manière absolue. Ce résultat ne peut en principe être obtenu qu'avec des tableaux. GoLive possède une autre méthode pour positionner les objets de manière précise. On va y venir, d'ici là...
Amusez-vous bien... :-)