communauté francophone de joueurs sims
 
AccueilAccueil  Le site  Chaine You Tube  S'enregistrerS'enregistrer  ConnexionConnexion  Dernières imagesDernières images  RechercherRechercher  
-15%
Le deal à ne pas rater :
(Adhérents Fnac) LEGO® Star Wars™ 75367 Le croiseur d’assaut de ...
552.49 € 649.99 €
Voir le deal

Partagez
 

 [Apprenti] Créer un cadre avec image et texte

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Admin
Fuyaya
Fuyaya
Admin
Féminin Date d'inscription : 29/09/2009
Age : 44
Localisation : Aubais

[Apprenti] Créer un cadre avec image et texte Empty
MessageSujet: [Apprenti] Créer un cadre avec image et texte   [Apprenti] Créer un cadre avec image et texte EmptyLun 17 Sep 2012, 18:27

Bonjour,

Nous allons voir un cas pratique qui peut vous servir à customiser vos posts ou vos signatures sur le forum, celle de Cam en est un exemple :

Mon petit chou, sois trognon va feuilleter le règlement
Et avant de sollliciter assistance , prends de la graine ici

Attention, si tu plantes tes racines dans un tuto au lieu d'ouvrir un nouveau sujet, je devrais t'effeuiller.




Avant de commencer, il est bon de savoir de quoi nous allons parler, en occurrence le HTML et le CSS. Donc je vous conseille de lire ceci : Vous avez posté dans ce sujet. [Fiche] HTML et CSS qu'est-ce que c'est ?

C'est un tuto spécifique et non pas généraliste. Nous allons donc voir et définir les éléments nécessaires et apprendre quelques mots de CSS qui nous seront utiles dans ce cas précis.

1. Le matériel nécessaire :

Le but du jeu est de créer un cadre qui contienne une image. En toute logique il nous faut une image.

La programmation nous permet de faire peu de cadres différents et visibles partout. Donc facilitons nous la vie et créons une image qui soit elle même un cadre, il nous restera à placer les éléments par la suite à l'intérieur de celui-ci.

J'ai donc créé ma signature sur mon logiciel de graphisme, ce qui me permet de visualiser le rendu désiré. Comme je veux un effet de transparence, j'ai choisi un format png.

[Apprenti] Créer un cadre avec image et texte 1

Afin de connaître la taille exacte de mon cadre je vais dans document et je clique sur l'image, les dimensions me sont données

[Apprenti] Créer un cadre avec image et texte 2

Donc les informations importantes à l'issue de ce travail préalable :
- largeur du cadre : 620px
- hauteur du cadre : 176px
- taille de la police : 20px
- couleur de la police : #090937
Le code couleur qui nous intéresse est le code hexadécimal soit 6 chiffres précédés du symbole #

A présent je peux héberger mon image sur le serveur de mon choix et récupérer son adresse URL :

Code:
https://dl.dropbox.com/u/65254322/Tutoriels/web_cadre_image/fond.png


Dernière édition par Fuyaya le Mar 18 Sep 2012, 13:52, édité 3 fois
Revenir en haut Aller en bas
http://fuyaya.tumblr.com/
Admin
Fuyaya
Fuyaya
Admin
Féminin Date d'inscription : 29/09/2009
Age : 44
Localisation : Aubais

[Apprenti] Créer un cadre avec image et texte Empty
MessageSujet: Re: [Apprenti] Créer un cadre avec image et texte   [Apprenti] Créer un cadre avec image et texte EmptyMar 18 Sep 2012, 12:35

2. Le code HTML :

Notre but est donc d'avoir un espace dans lequel on peut écrire du texte et auquel on peut assigner un fond.

Nous allons utiliser une div, qui est une section ou espace qui va être créé par l'utilisation de ce code.
La div est de type block cela signifie qu'il peut avoir des marges intérieures et extérieures, un arrière plan, etc... Si on rajoute un autre élément il se mettra en dessous de lui et non pas à côté.

Voici le code pour créer une div :

Code:
<div></div>

On va vouloir écrire du texte à l'intérieur de cette division, un texte c'est un paragraphe. Il existe justement une balise correspondant à un paragraphe et qui est de type block elle aussi :

Code:
<p>mon texte</p>

Dans un paragraphe on veut parfois revenir à la ligne pour mettre en valeur ce que l'on écrit. Il existe une balise pour cela qui se met à la fin de la ligne:

Code:
ma phrase<br />

On va vouloir par la suite donner des consignes sur le style à appliquer à notre division et à nos éléments. On va donc donner un identifiant unique à cette div, pour ce tuto on va l'appeler cadre mais quand ce sera à vous pensez à personnaliser le nom.

Donc voici ce que va donner mon code maintenant que je mets tous les éléments les uns dans les autres :

Code:
<div id="cadre">
<p>Essai de texte pour couleur, taille police<br />
& positionnement</p>
</div>

Visualisons cela tout de suite :


Essai de texte pour couleur, taille police

& positionnement




Ca ne ressemble à rien ? C'est normal ! Le HTML c'est la structure, le style c'est avec le CSS
Revenir en haut Aller en bas
http://fuyaya.tumblr.com/
Admin
Fuyaya
Fuyaya
Admin
Féminin Date d'inscription : 29/09/2009
Age : 44
Localisation : Aubais

[Apprenti] Créer un cadre avec image et texte Empty
MessageSujet: Re: [Apprenti] Créer un cadre avec image et texte   [Apprenti] Créer un cadre avec image et texte EmptyMar 18 Sep 2012, 12:57

3. Le code CSS :

Il est temps d'habiller notre cadre, je vais vous montrer ce qui correspond à notre exemple. Si vous voulez plus d'informations ou plus de mots, alors je vous encourage à consulter le tuto d'Illendel qui est une petite bibliothèque d'exemple de ce que l'on peut faire : [Intermediaire] Personnalisation des posts dans un forum

Je vous met le code de base et ensuite je décortique chacun des mots :

Code:
#cadre {
width : 620px;
height: 176px;
background : url('https://dl.dropbox.com/u/65254322/Tutoriels/web_cadre_image/fond.png') no-repeat top left;
}

Donc voici ce à quoi servent chaque mot :
- # : c'est le symbole associé à un identifiant (id)
- width : largeur de l'élément en pixel
- height : hauteur de l'élément en pixel
- background : c'est le mot qui permet en une seule instruction de donner différentes informations sur l'arrière plan. Il y a plusieurs paramètres que je vais vous indiquer. Je vais les numéroter pour vous donner l'ordre, chaque paramètre est séparé par un espace.

Code:
backgroound : 1.couleur 2.adresse de l'image 3.répétition de l'image 4.positionnement;
1. La couleur est facultative, dans mon cas je ne veux pas de couleur car j'ai choisi de la transparence, si je met un code héxadécimal de couleur alors au lieu d'être transparent on verra la couleur.
2. L'adresse URL de votre image se met donc ainsi url('adresse url')
3. Une image peut se répéter de différentes manières
--> no-repeat : pas de répétition
--> repeat-y : se répété selon l'axe des y c'est à dire verticalement
--> repeat-x : se répété selon l'axe des x c'est à dire horizontalement
--> repeat : se répété dans tous les sens

Voici l'aperçu à cette étape :


Essai de texte pour couleur, taille police

& positionnement




Il nous reste donc à intervenir sur le texte. Comme il est de type block on va pouvoir lui donner des marges et d'autres propriétés.
En CSS on a la notion de généalogie, on peut comme pour vos dossiers, vous avez les parents et les enfants. On n'a pas donné un identifiant au paragraphe car on va pouvoir le commander en indiquant sa généalogie. Ce qui correspond si je le mets en phrase : le paragraphe qui est à l'intérieur de mon identifiant cadre

Code:
#cadre p {
width : 500px;
color: #090937;
font-size: 20px;
margin: 90px 10px 10px 100px;
line-height: 14px;
}

- color: c'est la couleur de la police de ce paragraphe
- font-size: la taille en pixel de notre police
- margin: c'est un code raccourci pour indiquer les marges. On donne dans l'ordre : haut droite bas gauche
- line-height: c'est l'espace entre deux lignes, j'ai donné une valeur car je trouvais l'espacement trop important.

Une astuce pour connaitre les marges : mettez à contribution vos logiciels de graphisme, dans mon cas photoshop.

J'utilise l'outil règle :

[Apprenti] Créer un cadre avec image et texte 3

Il faut que votre fenêtre information soit visible, raccourci F8 ou alors dans le menu affichage.
Il ne vous reste plus qu'à mesurer et vous avez les valeurs en pixel dans la partie information.

[Apprenti] Créer un cadre avec image et texte 4


Et voici l'aperçu à présent :


Essai de texte pour couleur, taille police

& positionnement




Il est probable que vous ayez à modifier les valeurs au fur et à mesure, donc pensez à prévisualiser et à corriger au fur et à mesure.


Dernière édition par Fuyaya le Mar 18 Sep 2012, 13:41, édité 2 fois
Revenir en haut Aller en bas
http://fuyaya.tumblr.com/
Admin
Fuyaya
Fuyaya
Admin
Féminin Date d'inscription : 29/09/2009
Age : 44
Localisation : Aubais

[Apprenti] Créer un cadre avec image et texte Empty
MessageSujet: Re: [Apprenti] Créer un cadre avec image et texte   [Apprenti] Créer un cadre avec image et texte EmptyMar 18 Sep 2012, 13:29

4. Le code pour un forum :

Comme le but du jeu est de l'afficher pour le forum, nous allons mettre le code HTML et CSS ensemble. En effet pour eviter les conflits avec la feuille de style à laquelle vous n'avez pas accès en tant qu'utilisateur, on regroupe tout !

Donc les identifiants sont inutiles, on les retire. Ensuite on va répartir les éléments, ce qui était lié à la division va aller dans la balise de la division et ce qui était lié au paragraphe dans la balise du paragraphe.

On récupéré uniquement ce qui était entre les accolades {} et on le colle dans une indication de style de cette manière
Code:
<balise style="code CSS">le code</fin balise>

Donc pour notre signature, voici à quoi ressemble le code à mettre sur le forum qui regroupe donc HTML & CSS :

Code:
<div style="width : 620px; height: 176px; background : url('https://dl.dropbox.com/u/65254322/Tutoriels/web_cadre_image/fond.png') no-repeat top left;">
<p style="width :500px; color: #090937; font-size: 20px; margin: 90px 10px 10px 100px;">Essai de texte pour couleur, taille police<br />
& positionnement</p>
</div>

-------------------------------
Je me répète mais pour aller plus loin et( découvrir d'autre mots CSS afin de personnaliser votre texte je vous conseille la lecture de ce tuto : [Intermediaire] Personnalisation des posts dans un forum rédigé par Illendel
Revenir en haut Aller en bas
http://fuyaya.tumblr.com/
Admin
Fuyaya
Fuyaya
Admin
Féminin Date d'inscription : 29/09/2009
Age : 44
Localisation : Aubais

[Apprenti] Créer un cadre avec image et texte Empty
MessageSujet: Re: [Apprenti] Créer un cadre avec image et texte   [Apprenti] Créer un cadre avec image et texte EmptyMar 18 Sep 2012, 13:44

Je garde ce post pour les astuces ou compléments d'informations.

J'espère que ce tutoriel vous aura aidé, il ne se limite pas aux signatures, il peut permettre de donner de la vie à vos articles ou autres.

Comme d'habitude vous pouvez nous montrer vos exemples à la suite



MODE D'EMPLOI

N'hésitez pas à remercier l'auteur de ce tutoriel ou à faire partager votre expérience personnelle. Si vous avez créé quelque chose en suivant le tuto pourquoi pas la poster afin de la montrer à l'auteur

-----------------------------------------

Pour d'éventuelles questions, c'est par ici et si vous souhaitez en apprendre plus sur le sujet, rendez-vous dans la salle travaux pratiques

Bonne journée



Dernière édition par Fuyaya le Sam 11 Jan 2014, 22:42, édité 1 fois
Revenir en haut Aller en bas
http://fuyaya.tumblr.com/
Ange gardien
Bettyboopjade
Bettyboopjade
Ange gardien
Féminin Date d'inscription : 25/03/2011
Age : 41
Localisation : Mons (Belgique)

[Apprenti] Créer un cadre avec image et texte Empty
MessageSujet: Re: [Apprenti] Créer un cadre avec image et texte   [Apprenti] Créer un cadre avec image et texte EmptyMar 18 Sep 2012, 14:32

Merci Fu ! [Apprenti] Créer un cadre avec image et texte 822878
Revenir en haut Aller en bas
http://bettyboopjade.canalblog.com/
Grand artiste du pinceau
Lehanna
Lehanna
Grand artiste du pinceau
Féminin Date d'inscription : 07/10/2011
Age : 26
Localisation : Nord (59)

[Apprenti] Créer un cadre avec image et texte Empty
MessageSujet: Re: [Apprenti] Créer un cadre avec image et texte   [Apprenti] Créer un cadre avec image et texte EmptyMar 18 Sep 2012, 19:15

Merci Fuuuu ! Je mets tout ça en pratique dès que j'ai accès à l'ordi. Smile
Revenir en haut Aller en bas
http://lesharpburn.canalblog.com
Débutant des galeries d'art
Bounza
Bounza
Débutant des galeries d'art
Féminin Date d'inscription : 01/04/2012
Age : 28

[Apprenti] Créer un cadre avec image et texte Empty
MessageSujet: Re: [Apprenti] Créer un cadre avec image et texte   [Apprenti] Créer un cadre avec image et texte EmptyVen 21 Sep 2012, 19:28

Super tuto merci =)
Revenir en haut Aller en bas
Débutant des galeries d'art
Minaya
Minaya
Débutant des galeries d'art
Féminin Date d'inscription : 30/11/2009
Age : 110
Localisation : Sur mon fauteuil

[Apprenti] Créer un cadre avec image et texte Empty
MessageSujet: Re: [Apprenti] Créer un cadre avec image et texte   [Apprenti] Créer un cadre avec image et texte EmptyVen 21 Sep 2012, 19:58

Ca c'est de la prof ! Clair net et concis, merci pour petit cours théorique Fu [Apprenti] Créer un cadre avec image et texte 571125
Revenir en haut Aller en bas
http://minaya.ek.la
As de l'acrylique
Sucréomiel
Sucréomiel
As de l'acrylique
Féminin Date d'inscription : 03/01/2010
Age : 29
Localisation : Imaginarium

[Apprenti] Créer un cadre avec image et texte Empty
MessageSujet: Re: [Apprenti] Créer un cadre avec image et texte   [Apprenti] Créer un cadre avec image et texte EmptySam 22 Sep 2012, 11:27

Super ! Merci Fu !
Ce tutoriel est très clair et me sera très utile !
Revenir en haut Aller en bas
Grand artiste du pinceau
Maripiou
Maripiou
Grand artiste du pinceau
Féminin Date d'inscription : 29/01/2011
Age : 36
Localisation : Au Sud

[Apprenti] Créer un cadre avec image et texte Empty
MessageSujet: Re: [Apprenti] Créer un cadre avec image et texte   [Apprenti] Créer un cadre avec image et texte EmptySam 29 Sep 2012, 11:24

Merci pour le tuto. Smile
Revenir en haut Aller en bas
http://maripiou.jimdo.com/
Maître du Jeu
Goby03
Goby03
Maître du Jeu
Masculin Date d'inscription : 21/08/2012
Age : 26
Localisation : quelque part en auvergne

[Apprenti] Créer un cadre avec image et texte Empty
MessageSujet: Re: [Apprenti] Créer un cadre avec image et texte   [Apprenti] Créer un cadre avec image et texte EmptySam 29 Sep 2012, 12:37

Merci Fuyaya.
Revenir en haut Aller en bas
http://plaisirdessims.blogspot.fr/
Illustre illustrateur
amylet
amylet
Illustre illustrateur
Féminin Date d'inscription : 07/02/2012
Age : 28

[Apprenti] Créer un cadre avec image et texte Empty
MessageSujet: Re: [Apprenti] Créer un cadre avec image et texte   [Apprenti] Créer un cadre avec image et texte EmptyMar 11 Déc 2012, 08:18

Merci Fuyaya, je cherchais justement comment faire ça [Apprenti] Créer un cadre avec image et texte 822878
Revenir en haut Aller en bas
http://amylet.tumblr.com/
Admin
Fuyaya
Fuyaya
Admin
Féminin Date d'inscription : 29/09/2009
Age : 44
Localisation : Aubais

[Apprenti] Créer un cadre avec image et texte Empty
MessageSujet: Re: [Apprenti] Créer un cadre avec image et texte   [Apprenti] Créer un cadre avec image et texte EmptyMar 11 Déc 2012, 09:30

Avec plaisir Smile
Revenir en haut Aller en bas
http://fuyaya.tumblr.com/
Contenu sponsorisé


[Apprenti] Créer un cadre avec image et texte Empty
MessageSujet: Re: [Apprenti] Créer un cadre avec image et texte   [Apprenti] Créer un cadre avec image et texte Empty

Revenir en haut Aller en bas
 
[Apprenti] Créer un cadre avec image et texte
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» [Apprenti] [Photofiltre 6 et antérieur] Insérer une image dans un cadre
» [Apprenti] [Photofiltre 6 et antérieur] Créer un texte qui défile (en image gif)
» [Apprenti] Faire un cadre transparent
» [Apprenti] Créer un cadre contenant de la transparence
» [Apprenti] Mon premier tableau sans cadre

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Sims Artists :: Apprentissage :: Informatique et Internet :: HTML / CSS-
Sauter vers: