Un aiguillage pour les navigateurs. Comme vous le savez, les navigateurs affichent les pages chacun de manière légèrement différente. Si vous souhaitez imposer une mise en page homogène et très précise, il faudra créer deux versions de votre page, l'une destinée spécifiquement à Internet Explorer, l'autre optimisée pour Netscape. Cet exmple implique donc la création de deux pages. L'aiguillage sera installé dans la page Internet Explorer. Si votre visiteur utilise Netscape, il faudra basculer vers la page netscape.html. Dans le cas contraire, il pourra continuer dans la page internetexplorer.html |
|||||||||||||||||||||||
Affichez l'en-tête. Pour cela, cliquez sur le bouton En-tête, c'est-à-dire sur la petite flèche placée dans la bordure gauche de la fenêtre du document. |
|||||||||||||||||||||||
![]() |
|||||||||||||||||||||||
Passez sous l'onglet SmartObjets de la palette Objets, c'est-à-dire sous le second onglet, puis faites glisser l'icone Routeur du navigateur dans l'en-tête. Cett icone est la dernière de l'ensemble. |
|||||||||||||||||||||||
![]() |
|||||||||||||||||||||||
Sélectionnez cette icone, puis passez dans la palette Inspecteur. Désactivez la case à cocher automatique de la rubrique Prise en charge des navigateurs. Vous pouvez alors désactiver les cases à cocher correspondant aux navigateurs auxquels la page n'est pas destinée, et conserver les autres. Il faut maintenant définir la page vers laquelle doivent être dirigés les visiteurs dont le navigateur vient d'être désactivé. Il s'agit de la page netscape.html, que vous pouvez désigner dans la zone Lien alternatif. Et voilà, le routeur de navigateurs est prêt. |
|||||||||||||||||||||||
![]() |
|||||||||||||||||||||||
|
|||||||||||||||||||||||
Date de modification : idéale pour les mises à jour. Voici une fonction intéressante, et disponible directement, la date de mise à jour. Faites glisser l'icone Date et heure dans la vue Mise en page. La date courante sera affichée automatiquement. Il y a quelques réglages des formats disponibles dans l'Inspecteur. |
|||||||||||||||||||||||
![]() |
|||||||||||||||||||||||
|
|||||||||||||||||||||||
Effet OnMouseover. Lorsque le pointeur de la souris passe au-dessus d'une image, celle-ci subit une mutation, ou se trouve remplacée par une autre image. Lorsque le pointeur de la souris la quitte, le premier graphisme est à nouveau affiché. Ce mécanisme s'appuie sur le mot clé OnMouseover. Vous avez besoin d'images de dimensions identiques, deux ou trois suivant ce que vous désirez faire. Pour la version simple, deux images suffiront. J'ai préféré en mettre trois, la première (Standard), celle qui est affichée sur la page ; la deuxième (Survol), celle qui s'affichera quand le curseur passera dessus ; la troisième (Clic), celle qui s'affichera au moment du clic. Palette Objets, onglet SmartObjets. Faites glisser l'icone Image de bouton à l'endroit où vous voulez placer le bouton. L'icone sélectionnée, passez dans l'Inspecteur, cliquez sur l'incone au-dessous de Standard, et sélectionnez une image après avoir cliquer sur le dossier de la case Empty Reference. Une fois l'image en place, cliquez sur l'icone en-dessous de Survol, activez la case à cocher à droite de la zone Reference, et aller chercher l'image suivante. refaites la même démarche pour l'icone sous Clic. Maintenant indiquez l'adresse pour le lien hypertexte, dans la case URL. Et voilà, votre bouton est terminé, plus simple, ce serait difficile :-) |
|||||||||||||||||||||||
![]() |
|||||||||||||||||||||||
![]() |
|||||||||||||||||||||||
Maintenant, vous pouvez essayer mon bouton à moi, que j'ai fais avec mes mimines pleines de doigts, et qui va vous expédier sur la page Index... n'oubliez pas de revenir, c'est pas terminé ! |
|||||||||||||||||||||||
![]() |
|||||||||||||||||||||||
|
|||||||||||||||||||||||
Préchargement des images. Si les images utilisées sont un peu "lourdes", il est intéressant de les précharger, pour ce faire, ouvrez l'en-tête du document, et faites s'y glisser l'icone Elément d'en-tête Action, depuis la palette Objets, onglet SmartObjets. |
|||||||||||||||||||||||
![]() |
|||||||||||||||||||||||
![]() |
|||||||||||||||||||||||
![]() |
|||||||||||||||||||||||
Sélectionnez l'icone, puis allez dans la palette Inspecteur. Sélectionnez l'entrée OnLoad, dans la zone Exéc. puis cliquez sur le bouton Action, et activez la commande Image/Précharger des images. Sélectionnez la première image. Faites glisser une deuxième Action d'en-tête dans la zone d'en-tête, puis procédez de la même manière pour le deuxième image, et recommencez le même processus pour la troisième image. |
|||||||||||||||||||||||
![]() |
![]() |
||||||||||||||||||||||
|
|||||||||||||||||||||||
En bas de page, vous trouverez quelques éléments de site, des boutons, des bullets, des fonds, je n'ai affiché qu'un petit échantillonnage, mais vous pouvez charger le dossier complèt. |
|||||||||||||||||||||||
Pour la suite de nos bricolages webiques, on va changer de page, aller zou... |
|||||||||||||||||||||||
![]() |
|||||||||||||||||||||||
|
|||||||||||||||||||||||
![]() |
|||||||||||||||||||||||
![]() |
|||||||||||||||||||||||
![]() |
![]() |
||||||||||||||||||||||
![]() |
|||||||||||||||||||||||
![]() |
|||||||||||||||||||||||
![]() |
![]() |
||||||||||||||||||||||
![]() |
|||||||||||||||||||||||
![]() |
|||||||||||||||||||||||
![]() |
|||||||||||||||||||||||
![]() |
![]() |
![]() |
|||||||||||||||||||||
![]() |
|||||||||||||||||||||||
![]() |
![]() |
||||||||||||||||||||||
![]() |
|||||||||||||||||||||||
![]() |
|||||||||||||||||||||||
![]() |
![]() |
||||||||||||||||||||||
![]() |
![]() |
||||||||||||||||||||||
![]() |
|||||||||||||||||||||||
![]() |
|||||||||||||||||||||||
![]() |
![]() |
||||||||||||||||||||||
![]() |
![]() |
||||||||||||||||||||||
![]() |
![]() |
![]() |
![]() |
||||||||||||||||||||
![]() |
|||||||||||||||||||||||
Quelques éléments de site : buttons, bullet, background, le tout stuffité, ça fait dans les 700ko : l'archive. |
|||||||||||||||||||||||