Creatitude

Mardi 27 juin 2006 2 27 /06 /Juin /2006 09:00

Générateurs en tout genre

Voici une nouvelle rubrique : sites web Dans cette catégorie, je vous présenterai de façon succinte un site web qui peut vous apporter des petites déco sympa pour votre blog ou votre site. Pour l'inaugurer, voici un site très sympa de générateurs.

C'est quoi un générateur ? c'est un module qui permet de créer des animations que l'on peut télécharger mais (et surtout) de créer (donc générer) les codes HTML à inclure dans votre page ! Pourquoi se casser la tête n'est-ce pas ?

Le site s'appelle "Générateur de Smileys" mais en fait il y a plein d'autres modules qui vous permettent de créer des glitters (texte avec un fond qui scintille), des textes en couleur dégradé (si vous voulez voir ce que cela donne, allez sur http://spaces.msn.com/akoflu et le billet "on est en 8e" dans le blog), etc.

Plus
- Email
- Lien
- Imprimer

Par Ako - Publié dans : Sites web
Ecrire un commentaire - Voir les 0 commentaires

Dimanche 25 juin 2006 7 25 /06 /Juin /2006 11:48

Mettre une image dans votre blog

Avant de commencer quoi que ce soit, il faut d'abord héberger son image sur un serveur web. Certains peuvent se demander pourquoi ? L'accessibilité ! A moins d'avoir transformé son PC en serveur local, la plupart du temps, à la fin de son utilisation, nous éteignons notre PC. Donc plus de connexion internet. Donc plus de photos sur le blog.

Il existe énormément de site qui propose gratuitement ce genre de service mais bien souvent, les tailles de fichiers sont limités. Moi j'en utilise trois pour mes deux blogs (celui-ci et sur MSN: http://spaces.msn.com/akoflu) :

- ImageShack (site américain, pas de limitation d'espace, image de taille de 1,5 Mo max)

- Grafx-Upload (site français, image d'une taille de 1 Mo max)

- File lodge (site anglais, 50 Mo d'espace)

Après avoir créé votre compte, télécharger (upload) votre image sur le site et récupérer l'adresse de votre image (attention, vérifier bien que celle-ci se finisse par jpg ou gif ou png)

Dans votre billet, que vous passerez en code HTML à l'endroit où vous souhaitez voir votre image, insérer la balise "img" soit :

Pour over-blog, il y a la possibilité de passer par la fonction "mettre une image" pour télécharger l'image sur le site puis la mettre dans l'article à l'endroit où on veut.

C'est simple. L'écran se divise en deux : en haut, les fonctions basiques pour télécharger l'image et en bas, le dossier où sont montrés vos images. Une fois téléchargée, cliquez sur votre image et choisissez l'emplacement où vous souhaitez la mettre.
Si vous voulez qu'elle apparaisse à un endroit précis dans le texte, choisissez de la mettre à un endroit, validez, la photo se trouve alors dans votre billet. Puis,mettez votre curseur sur l'image et cliquez UNE seule fois dessus : l'image doit être entouré de petits carrés.
Remettez votre curseur sur l'image, appuyez sur le bouton droit et tout en le maintenant enfoncé, faites glisser la photo là où vous souhaitez qu'elle apparaisse !

Plus
- Email
- Lien
- Imprimer

Par Ako - Publié dans : Image, Audio
Ecrire un commentaire - Voir les 0 commentaires

Vendredi 23 juin 2006 5 23 /06 /Juin /2006 16:46

Attributs de mise en forme de l'arrière-plan

Voici quelques attributs utiles pour ceux qui veulent ou voudront un jour faire quelques manip' pour modifier le fond de leur blogger

background

Pour définir la couleur du fond de la page
Elle s'intègrera alors dans la feuille de style lors de la définition du corps de la page (body) dans la section "/* global"

Pour colorier le fond d'un paragraphe, une ligne ou une partie de texte
Dans ce cas l'attribut sera inséré dans la partie "body" du code source de votre page et sera associé à une balise :

- "p" pour colorier un paragraphe ou une ligne, une phrase :
<p style="background-color: la valeur de la couleur;"> le texte à colorier;</p>
- pour colorier une partie d'un texte:
<span style="background: valeur de la couleur";>le texte à colorier</span>

background-image

Avant toute chose, il faut héberger l'image sur un serveur web (qui fait l'objet d'un billet spécifique).

Pour placer une image en fond de page
L'attribut sera défini dans la mise en forme générale de la page, c'est-à-dire la mise en forme "body" de la section "global". Généralement cette mise en forme figure en tête du modèle.
Comme c'est une image (gif ou jpg), on utilisera son adresse (url). L'attribut s'écrira alors:
background: url(adresse de votre image);

attention :
- ne mettez pas d'espace entre url et (
- pensez également à définir une couleur pour les internautes qui auraient des problèmes avec leur navigateur.

background-repeat

Pour répéter une image en fond de page
L'image que vous utilisez est bien souvent trop petite par rapport à la taille de la page, c'est le cas notamment des fichiers de texture. L'astuce consiste donc à faire répéter l'image.

Les valeurs utilisées :
- repeat : l'image se répète horizontalement et verticalement
- no-repeat : l'image n'est affichée qu'une fois (valeur par défaut)
- repeat-x : répéter horizontalement
- repeat-y : répéter verticalement

on écrira alors l'attribut :
background: url(adresse de l'image) la valeur de repeat;

Compte tenu de l'utilisation d'image en bordure, il faudra également penser à créer des marges pour le texte si celui-ci est rogné. L'attribut utilisé sera alors "margin" (vu dans le billet "marges et bordures").

background-attachment

Il permet de définir si une image doit rester fixe ou non lorsque l'internaute fait défiler la page.
Par défaut, le paramètre est "scroll". Autrement dit, quand vous faites défiler la page, l'image disparaît au fur et à mesure.
Pour que l'image reste à son emplacement lors du défilement de la page, il suffit de spécifier dans la mise en forme :
background-attachment: url(adresse de l'image) fixed;

background-position

Pour définir avec précision l'emplacement d'une image dans une page qui par défaut sera toujours en haut à gauche.

Les valeurs peuvent être exprimé en pourcentage ou en valeur relative (top, center, bottom, right, left)

Aussi pour une image :

en haut, à gauche : top left ou 0% 0%

en haut, centré : top center ou 0% 50 %

en haut, à droite : top right ou 0% 100%

centre, gauche : center left ou 50% 0%

centre, centre : center center ou 50% 50%

centre, droite : center right ou 50% 100%

bas, gauche : bottom left ou 100% 0%

bas, centre : bottom center ou 100% 50%

bas, droite : bottom right ou 100% 100%

Plus
- Email
- Lien
- Imprimer

Par Ako - Publié dans : attributs (CSS)
Ecrire un commentaire - Voir les 0 commentaires

Vendredi 23 juin 2006 5 23 /06 /Juin /2006 16:42

Attributs de mise en forme du texte

Voici quelques attributs que vous pouvez utilisez pour créer quelques effets sur votre texte

color

Pour modifier la couleur du texte (à ne pas confondre avec "background" qui modifie la couleur du fond)
deux valeurs au choix :
- couleur standard : on peut écrire le nom de la couleur choisie en anglais (white, blue, red,...)
- ou écrire sa valeur hexadécimale (ex: #FFFFFF pour le blanc) que l'on peut générer dans des logiciels comme Paint Shop Pro.

letter-spacing

Pour modifier l'espacement entre les lettres. Il se définit par des valeurs en px, mm, cm.

word-spacing

Sur le même principe que "letter-spacing" mais là, il s'agit de l'espacement entre les mots.

text-transform

Pour choisir un texte tout en minuscule, tout en majuscule ou mettre la première lettre de chaque mot en majuscule. Les valeurs seront alors :
- lowercase : tout en minuscule
- uppercase : tout en majuscule
- capitalize : la 1ère lettre de chaque mot en majuscule

text-decoration

Pour souligner le texte. Les valeurs sont :
- overline : souligné dessus
- line-through : barré
- underline : souligné
- none : pour annuler tout soulignement

Plus
- Email
- Lien
- Imprimer

Par Ako - Publié dans : attributs (CSS)
Ecrire un commentaire - Voir les 0 commentaires

Vendredi 23 juin 2006 5 23 /06 /Juin /2006 16:36

Attributs de mise en forme de la police

Voici quelques attributs qui peuvent être mis dans une feuille de style CSS pour définir une présentation de texte.

font-family

Pour définir la police du texte
Si vous choisissez une police particulière, il est recommandé de définir une liste de police afin de permettre à l'internaute d'avoir un rendu au maximum conforme à vos désirs. Pensez que tout le monde n'a peut-être pas la police que vous avez choisie !
Si le nom de votre police contient un espace, mettre son nom entre guillemets.

font-size

Taille de la police
Différents types de valeur peuvent être utilisée : pt (point, critère utilisé dans Word), px (pixel), valeur relative (smaller, medium, larger),...
Le plus simple est d'utiliser le point (pt) car le plus courant dans les traitements de texte, etc.
NB : 12 pt = 16px

font-style

"italic" pour écrire en italique

font-variant

pour écrire en petites lettres capitales : "smallcaps"

font-weight

pour écrire en gras

Cette fonction permet d'utiliser un gras plus ou moins appuyé avec des valeurs allant de 100 à 900 (mais le résultat est mitigé).
on peut spécifier aussi par : normal, bold, bolder, lighter

Plus
- Email
- Lien
- Imprimer

Par Ako - Publié dans : attributs (CSS)
Ecrire un commentaire - Voir les 0 commentaires

Liens

Recommander

Recherche

Edito

Générateurs en tout genre

Mettre une image dans votre blog

Attributs de mise en forme de l'arrière-plan

Attributs de mise en forme du texte

Attributs de mise en forme de la police

Calendrier

Catégories

Articles récents

Sites