Pour aller directement à une étape de votre travail, utilisez un des liens suivants :
- Création d'un tableau
Essayez de faire une page Web dont la présentation ressemble à celle de la page present.html [http://www.comete.ch/~cep/did/present.html] (vous pourrez toujours tout refaire après le cours ;-).
Sur ma page d'exemple, vous pouvez deviner un tableau avec 2 colonnes et 5 lignes
(voir la page present_full.html [http://www.comete.ch/~cep/did/present_full.html]).
- Pour commencer le vôtre, cliquez sur le bouton "Tableaux" :
Figure 33 : Bouton "Tableau"
Un nouveau tableau de 2 colonnes pour 2 lignes se forme.
- Si vous désirez d'avantage de lignes ou de colonne, vous pouvez l'indiquer dans la fenêtre "Options de l'objet" :
Figure 34 : Fenêtre "Options de l'objet tableau"
- Vous pouvez modifier les paramètres du tableau selon les indications présentées plus haut dans la partie théorique.
- Cliquez sur une cellule pour modifier ses options, la fenêtre des préférences de l'objet passe sur l'onglet "Cellules" :
Figure 35 : Onglet "Cellules" des Options de l'objet tableau
- Entrez le texte ou les images souhaités dans les cellules. Les options courantes de mise en forme restent valables (alignement, etc…)
- Quelques mots sur les images
Claris Home Page possède une bibliothèque d'images que vous pouvez utiliser pour agrémenter vos page.
- Dans le menu Fichier, choisissez "Bibliothèque" -> "images_divers.hlb";
- Choisissez une image qui vous plaît et cliquez dessus avec le bouton droit;
- Choisissez l'option "Insérer dans la page" et indiquez votre fichier index.html
Figure 36 : Insertion d'une image de la bibliothèque
- Fermez la Bibliothèque en cliquant sur la petite croix en haut à droite.
A l'aide du bouton suivant (Figure 37), vous pouvez faire apparaître les options de l'image.
Figure 37 : Bouton "Options de l'image"
Figure 38 : Options de l'image
Vous trouvez :
- Emplacement : chemin d'accès au fichier image spécifié. Vous pouvez modifier ce chemin à l'aide du bouton "Parcourir…". Utile en cas de perte de fichier suite à un déplacement d'un répertoire.
- Texte de remplacement : originellement le texte de remplacement était indispensable pour permettre aux ordinateurs sans browser graphique (tel Lynx) de visualiser le contenu d'un fichier. Depuis cette information a été reprise et est affichée dans les info-bulles.
- Largeur et Hauteur : paramètres soit en pixels soit en pourcentages. Le bouton "Restaurer dimensions" permet de restaurer les dimensions originales. Utile quand la Joconde ressemble finalement à E.T. Pour faire une modification de taille isomorphique, il faut utiliser directement sur une images sélectionnée le carré de sélection situé sur l'angle bas droit, en même temps que la touche Majuscule.
- Bordure : sert à préciser l'épaisseur d'une bordure que l'on peut adjoindre à l'image.
Astuce: lorsque j'utilise une image comme lien, un bord est automatiquement affiché même si la case bordure est vide! Il faut préciser que je veux 0 (zéro) pixel de bordure. Ainsi le bord disparaît…
- Alignement : haut, bas et centré =>
position du texte par rapport à l'image. Gauche et droite =>
position de l'image par rapport au texte.
- Transparence et entrelacement : paramètre qui ne sont utilisés qu'avec les images gif. Possibilité de définir une couleur transparente. Très utile pour tous les boutons et les images devant s'intégrer dans le fond. Voir l'exemple de Titeuf sur la page liens.html.
- Comment faire un lien externe
Le principe est le même que pour le lien interne. Il suffit de taper ou coller l'adresse absolue dans la fenêtre URL :
Figure 39 : Editeur de lien
Faites dans un nouveau fichier "liens.html", une liste de liens externes.
- à utiliser le Net pour trouver des adresses;
- à agrémenter vos liens de commentaires indiquant à votre visiteur ce qu'il trouvera au bout;
- à ordonner vos liens par catégories d'intérêts.
