Les sujets :

Repeignez l'ascenseur !
Et les boutons !
Choisissez la couleur !
Montrez du doigt !
Changez la bordure !
Utilisez les feuilles de style !
Osez le mélange des langages !
Animez vos images GIF !
Gare au déséquilibre !
Remplacez les caractères spéciaux !
Envoyez un message !

Retour page d´accueil.


Repeignez l'ascenseur !

L'ascenseur, là à droite de l'écran, est gris par défaut, donnez-lui des couleurs en harmonie avec celle de votre page.
Dans le paragraphe <STYLE>, vous complétez la définition de <BODY> (le corps de page) :

body
{

vos autres données, par exemple la couleur du fond d'écran :

background-color:#fff0bb;

puis :

scrollbar-face-color:#ffffe0;
scrollbar-track-color:#ffffff;
scrollbar-3dlight-color:#ffffff;
scrollbar-darkshadow-color:#b0b0ff;
scrollbar-arrow-color:#0000ff;
}

face : le curseur
track : la piste du curseur
3dlight : les bords haut et gauche du curseur
darkshadow : les bords bas et droite du curseur
arrow : les flèches, hautes et basses


Et les boutons !

Comme pour l'ascenseur, la couleur par défaut est grise.
Bien sûr, chacun utilise ses boutons préférés, mais dans la balise <INPUT> pour TYPE=SUBMIT ou TYPE=RESET,
on laisse la touche telle quelle !

Changez les caractéristiques de ces touches :

- dans le paragraphe <STYLE>, ajoutez par exemple :

.touche{width:75;height:25;color:#ffffe0;background-color:#4040ff;cursor:hand}

- à la balise <INPUT>, vous ajoutez  class="touche", et obtenez :

    au lieu de    

Sur le bouton, vous pouvez mettre une image, avec ou sans texte, en ajoutant à la balise :

style="background-image:url(mon_image)"


Choisissez la couleur !

Les couleurs sont déclarées de deux manières :

  • par une valeur numérique (hexadécimale) : le signe dièse suivi des valeurs de rouge, vert et bleu, comme #BA080F,
        ce qui donne plein pot les 8 couleurs de base :

    #000000  noir #0000FF  bleu #00FF00  vert #FF0000  rouge
    #FFFFFF  blanc #FFFF00  jaune #FF00FF  magenta #00FFFF  cyan

  • par un nom, comme RED pour rouge, facile, mais MEDIUMSPRINGGREEN pour vert-printemps-moyen ?
        alors, voici la liste de 140 noms de couleur avec leur correspondance numérique :



    N'oublions pas la couleur "Transparent" qui, comme son nom l'indique, est transparente !


    Montrez du doigt !

    Le pointeur 'flèche' est remplacé par une main au survol d'un texte précédé de la balise <A>,
    sous réserve qu'un lien HREF soit présent !
    Mais si l'on renvoi à l'exécution d'un programme du genre onclick='monprogramme',
    on ajoute habituellement HREF="#".
    Sans oublier le signe dièse (en son absence on affiche l'explorateur de fichiers !)
    En cliquant, on obtient alors le renvoi en haut de la page active, ce qui n'est pas souhaité en général.

    Une solution est de lancer le programme sous href : href="javascript:monprogramme",
    Une autre solution est de changer le pointeur, avec deux possibilités :

  • dans le paragraphe <STYLE>, on ajoute : .doigt{cursor:hand}
        à la balise où se trouve la fonction onclick, on ajoute class="doigt"

  • à la balise où se trouve la fonction onclick, on ajoute style="cursor:hand", sans modifier le paragraphe <STYLE>

    Ce qui donne : cliquer ici   au lieu de : cliquer ici
    De la même manière, on peut utiliser cette méthode dans une case de tableau, à la balise <TD>

    Exemple avec cursor:hand :  

      Cliquer  

      Exemple avec href et javascript :  

      Cliquer  

    Il existe d'autres pointeurs comme :
    crosshair, default, help, move, wait, text


    Changez la bordure !

    On dispose de 9 styles de bordure, 4 "reliefs" et 4 "traits". Avec, toujours, deux possibilités :

  • dans le paragraphe <STYLE>, en déclarant par exemple : .bordure{border-style:inset}
         et en ajoutant à la balise où se trouve la bordure : class="bordure".

  • directement à la balise où se trouve la bordure, en ajoutant : style="border-style:nom_de_la_bordure",
         avec les noms ci-après.


    Sans oublier none qui permet de supprimer la bordure par défaut !


    Autres caractéristiques : border-color, border-width.

    Toutes ces bordures sont bien sûr applicables aux tableaux, mais aussi aux balises <INPUT> et <TEXTAREA>
    En fait, presque partout où il y a une bordure !


    Utilisez les feuilles de style !

    Bien pratique d'employer les feuilles de style ! Deux possibilités :

  • si le style est propre à la page, entre les balises <HEAD> et <BODY>, on ajoute les données de style :

    <STYLE type="text/css">
    <!--
    Avec ici les données de style.
    -->
    </STYLE>

  • si le style est commun à plusieurs pages, toujours entre les balises <HEAD> et <BODY>, on ajoute :

    <LINK REL="stylesheet" HREF="non_du_fichier_de_style.css" TYPE="text/css">

    Ainsi toute modification de donnée de style n'est faite q'une fois et le corps de page se trouve grandement allégé !


    Osez le mélange des langages !

    Les langages VBScript et JavaScript présentent chacun des instructions spécifiques que l'on peut appeler de l'un à l'autre.

    Exemple :

    En VBScript, les fonctions booléennes ne procèdent que sur un seul bit (vrai ou faux). Si l'on veut travailler sur un octet, par exemple pour tester un bit particulier, on peut faire appel aux fonctions JavaScript :

    <SCRIPT language="JavaScript">
    <!--
    function   et(a,b) { return a & b }
    function   ou(a,b) { return a | b }
    function  oux(a,b) { return a ^ b }
    function decg(a,b) { return a << b }
    // -->
    </SCRIPT>


    Ce qui donnera en VBScript :

    <SCRIPT language="VBScript">
    <!--
    function NomProg()
    ...
    c = et(a,b)
    ...
    end function
    -->
    </SCRIPT>

    Et avec  01000011 et 00000010

    Ou encore décalage gauche de 2 bits de 01000011   soit : 00000001 00001100


    Animez vos images GIF !

    Certains programmes (gratuits) distribués avec un scanner ou une imprimante permettent d'enregistrer au format GIF,
    mais sans les animer !
    Il existe des logiciels gratuits, merci "Le coin des Zexperts" !
    Mais ne le sachant pas avant, je me suis amusé à écrire un programme en VbScript, embarqué dans des pages HTML.

    Il offre quelques possibilités :

    définir le temps d'affichage de chaque image constitutive,
    positionner les images de manière indépendante,
    choisir de restaurer à la couleur de fond ou à l'image précédente,
    choisir entre une palette commune et une palette individuelle,
    raccourcir la palette (à utiliser en connaissance de cause !)

    Il permet également d'extraire les images constitutives d'un Gif animé !

    Je l'ai bêtement appelé   GifAnime Version 1.0.
    Chargez le fichier zip (26,8 k) et amusez-vous !




    Gare au déséquilibre !

    Vous avez écrit une page HTML bien renseignée, avec des messages du genre :
    alt='Le fichier de l'image fait 200 k'
    et vous obtenez :   Le fichier de l
    ou :
    onMouseOver="window.status='Charge l'image au format JPEG';return true"
    et là, bloum, vous avez une erreur !

    Ne chercher pas, c'est l'apostrophe : vous en avez trois par ligne !

    Remplacez celle du message par sa valeur HTML &#39;

    Vous obtenez :
    alt='Le fichier de l&#39;image fait 200 k'
    et :
    onMouseOver="window.status='Charge l&#39;image au format JPEG';return true"

    Ce qui marche un peu mieux !

    Ou alors, re-merci les Zexperts : faites précéder l'apostrophe de l'antislah :

    onMouseOver="window.status='Charge l\'image au format JPEG';return true"

    Cela marche tout aussi bien et c'est plus simple non ?


    Remplacez les caractères spéciaux !

    En français, nous utilisons des caractères accentués que des navigateurs étrangers ne reconnaissent pas forcément !
    Il est alors préférable de donnez leur valeur HTML.

    exemple :
    &eacute; pour é, &euml; pour ë, etc.

    Voici un petit programme VbScript qui vous évitera la corvée du remplacement des lettres (zip 1,4 k).




    Envoyez un message !

     Si vous avez des commentaires, si vous trouvez des erreurs, passez-moi un message :

  • Votre adresse email :
    Votre message :












    © Claude Viou 07/03/2008