Accueil Images Boîte à outils Liens Contact
 

 

 

 

 

Boîte à outils

Quelques petites astuces

Vous trouverez dans cette section des informations pratiques destinées à vous aider dans la création de votre page ou de vos graphiques. Les réponses courtes et simples sont indiquées directement dans le tableau ci-dessous; celles qui doivent être plus détaillées sont expliquées sur des pages distinctes.

Pour... Il faut...

Diviser facilement une page en plusieurs sections différentes

Consulter les explications sur cette page.

Récupérer des images sur un site

Placer le curseur sur l'image de votre choix, puis cliquer avec le bouton droit de la souris, ce qui fera apparaître un menu contextuel; dans ce menu, cliquer sur "Enregistrer l'image sous...", puis choisir le répertoire de votre disque dur dans lequel devra être enregistrée l'image, et cliquer sur "Enregistrer".

Utiliser une image comme fonds d'écran dans une page web

utiliser le code suivant :

<body background="image.jpg">

image.jpg est à remplacer par le nom de l'image de votre choix.

Empêcher le fond d'écran de se répéter et le maintenir fixe

Configurer le code de fond d'écran comme suit :

<body background="image.jpg" style="background-repeat: no-repeat; background-attachment: fixed">

où 

background-repeat: no-repeat signifie que le fond ne se répète pas

et

background-attachment: fixed signifie que le fond ne défile pas en même temps que le texte.

Ajouter de la musique de fond Ajouter le code suivant :

<EMBED SRC="fichier_son.mid" WIDTH="50" HEIGHT="80" AUTOSTART="true" LOOP="-1">

WIDTH="50" et HEIGHT="80" correspondent aux dimension du panneau de contrôle. Si vous ne souhaitez pas afficher le panneau de contrôle, remplacez ces valeurs par ce code : HIDDEN="true" .

AUTOSTART="true" indique que la musique doit démarrer automatiquement à l'affichage de la page.

LOOP="-1" (il est possible d'indiquer aussi "infinite" au lieu de "-1") indique que la musique doit jouer sans interruption (revient au début automatiquement et joue de nouveau). Si vous souhaitez spécificer le nombre de fois, indiquer la valeur (5, par exemple).

Ajouter des bordures de couleur aux cellules des tableaux Configurer le code de cellule de la manière suivante :

<td style="border-top: 2 solid #CE8E45">

border-top: signifie que la bordure s'applique à la partie supérieure de la cellule (voir l'exemple de la cellule de cette rubrique). Les autres possibilités sont border-right, border-bottom et border-left.

2 solid signifie que la bordure fait 2 pixels de large et qu'elle est pleine

#CE8E45 correspond au code hexadécimal de la couleur de la bordure.

Choisir la couleur du texte

<font color="#FF0000>Texte de couleur rouge</font>
<font color="#0000FF>Texte de couleur bleue</font>
<font color="#000000>Texte de couleur noire</font>

Pour connaître les codes correspondant à chaque couleur, vous pouvez par exemple consulter cette petite pallette de ma composition.

Faire ouvrir les liens dans une nouvelle fenêtre

<a href="http://www.yahoo.fr" target="_blank">

Pour que les liens s'ouvrent toujours dans la même fenêtre, il suffit de donner un nom quelconque à la cible ("target") et de l'attribuer à tous les liens. Exemple :

<a href="http://www.voila.fr" target="_cherche">
<a href="http://www.nomade.fr" target="_cherche">
<a href="http://www.toile.qc.ca" target="_cherche">

Le premier lien cliqué va "créer", c'est-à-dire ouvrir, une nouvelle fenêtre qui s'appelera "cherche"; tous les autres liens s'ouvriront ensuite dans cette fenêtre.

Enlever le soulignement des liens et changer la couleur lorsque la souris passe dessus.

Recopier ce code à l'intérieur des balises <HEAD></HEAD> :

<style TYPE="text/css">
<
!--
A:link {font: 12pt Verdana,sans-serif; text-decoration: none; color: #66CCFF;}
A:visited {font: 12pt Verdana,sans-serif; text-decoration: none; color: #FFCC66;}
A:active {font: 12pt Verdana,sans-serif; text-decoration: none; color: #007171;}
A:hover {font: 12pt Verdana,sans-serif; text-decoration: none; color: #33FF66;}

-->
</style>

Il s'agit de fonctions de feuilles de styles (CSS - Cascading Style Sheet). Le soulignement est désactivé grâce au paramètre text-decoration: none,

Pour personnaliser l'aspect des liens :

Modifier la grosseur des caractères et le type de police (font: xxpt Verdana,sans-serif;)

Indiquer une couleur différente pour chacun des états du lien (color: #XXXXXX;).

À noter : dans Netscape, la fonction A:hover (changement de couleur au passage de la souris) ne fonctionne pas.

Ajouter du texte sur un bouton

Il existe un site qui permet d'effectuer cette opération en ligne gratuitement:

ImageMagick Studio.

Par contre, comme il est en anglais, voici quelques explications sommaires qui vous permettront de l'utiliser facilement.

Dans l'espace intitulé Filename, cliquer sur le bouton Parcourir et aller sélectionner sur votre disque dur le bouton sur lequel vous voulez ajouter du texte.

Cliquer ensuite sur le bouton View. Votre bouton apparaîtra au centre de l'écran, juste en-dessous d'une série d'onglets permettant d'effectuer des retouches graphiques. Cliquer sur l'onglet Annotate.

Dans l'espace intitulé Text, taper le texte à ajouter sur le bouton.

Juste en dessous, l'espace Location and Gravity permet de positionner le texte sur le bouton. Par exemple, pour un texte centré au milieu (avec un bouton de Grenadine/Webdéco, par exemple) entrer les valeurs +0+10 et "Center" dans le menu déroulant juste à droite (pour ajuster plus préciément, modifier les valeur jusqu'à obtention du résultat souhaité).

Attention : avant de cliquer sur annotate, descendre plus bas dans la page pour choisir les options du texte (font, couleur, etc.). Cliquer ensuite sur annotate. Une nouvelle page s'affichera avec le bouton contenant le texte.

Lorsque vous êtes satisfait du résultat, cliquer sur le bouton output dans la série d'onglets de la barre supérieure (deuxième en partant de gauche). Dans l'espace Format, choisir "gif". Si vous n'êtes pas familier avec le graphisme, conserver les options par défaut des autres paramètres.

Cliquer sur le bouton output. Une nouvelle page s'affichera avec le bouton créé aparaissant sur un fond gris. En cliquant dessus, il s'affichera sur une nouvelle page blanche.

Pour le récupérer, procéder comme habituellement quand vous récupérez une image sur le net.

Voilà; il suffit de répéter l'opération pour chaque nouveau bouton sur lequel vous souhaitez ajouter du texte.

Si tout ceci vous semble trop compliqué, vous pouvez également utiliser la méthode expliquée dans le tutorial Ajouter du texte sur un bouton

 
 

 

Accueil Images Boîte à outils Liens Contact

  Hit-Parade 

© Grenadine.net - 1998-2011