AccueilAccueil  FAQFAQ  RechercherRechercher  S'enregistrerS'enregistrer  MembresMembres  GroupesGroupes  ConnexionConnexion  

Partagez | 
 

 [Cours & Questions] Drag' ♥

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Aller à la page : Précédent  1, 2, 3
AuteurMessage
Ella'

avatar

Féminin
Nombre de messages : 4063
Age : 24
Logiciel de Création : Suite Adobe, Sketch, Suite Affinity
Date d'inscription : 19/02/2008

MessageSujet: Re: [Cours & Questions] Drag' ♥   Lun 08 Oct 2012, 09:46

* La rattrape *

Citation :
Je sais qu'on les trouve dans le panneau d'administration, onglet affichage, partie gestion des couleurs, onglet feuille de style CSS. On peut en faire plusieurs il me semble. Elles servent à gérer l'apparence du forum (police d'écriture, couleurs, images, apparence de la PA...). C'est aussi dans ces lignes de codes que l'on peut modifier le nom de la chatbox, installer un QEEL et autres onglets qui sortent du côté de l'écran.

Niveau forum t'as tout compris n_n

Mais plus généralement, pour n'importe quel type de site / forum / pages web ... C'est tout ce qui touche à l'apparence, les couleurs, la mise en page. Toutes ces choses sont gérées seulement par le CSS, et il vaut mieux éviter de les utiliser via du HTML.

Donc par exemple, tout ce qui est <b>bold</b>, <i>italique</i>, et même <center> </center> sont à bannir de ta manière de coder car c'est vraiment des propriétés touchant à l'apparence.

Les seules choses "autorisées" (entre " " car bold, italique, center.. Sont des propriétés qui marchent, pas de soucis pour ça, mais disons que je trouve que ça manque de rigueur au niveau du codage) sont <em>emphasis</em> et <strong>strong</strong>.
    <em> emphasis </em> permet de donner une importance au texte. Emphasis signifie accentuation, insitance. C'est un texte qui sera mis en italique par défaut, mais la propriété em est modifiable par le CSS (dont tu peux très bien avoir un texte qui n'est pas en italique, mais avec un fond vert et en taille 42 si tu veux x) )
    <strong> strong </strong> permet de mettre le texte encore plus en relief que <em>. Strong signifie fort. C'est un texte qui sera mis en gras par défaut, mais la propriété est elle aussi modifiable.

Ces deux balise ont certes des attributs visuels, mais il me semble qu'elles ont un intérêt au niveau du référencement, et plus de logique au niveau de la sémantique.


Bon, revenons au CSS.
CSS veut dire Cascading Style Sheets, soit "feuille de style en cascade". Cette feuille de style fournit la mise en forme et l'apparence des éléments de ta page HTML. LE principe de ces feuilles de style est qu'elles sont utilisables sur autant de pages web que tu souhaites. Tu peux utiliser plusieurs feuilles de style pour une même page, c'est pour ça qu'elles sont appelées "en cascade".
Si tu as différentes propriétés CSS pour le même élément HTML, elles se cumuleront, et si deux propriétés se contredisent c'est généralement le dernier style de ta feuille de style qui est pris en compte par le navigateur.

Une feuille de style est composée d'élément #id, .class ou avec juste le nom de la balise, comme a, img, h1 ...

Le class="titre_de_class" renvoie à des propriétés CSS de ta feuille de style ( alors que le style="propriété:valeur;" est pour intégrer directement le style à ton élément, c'est ce que tu faisais jusqu'à présent).
Tu retrouveras aussi le id="nom_de_l_id" qui ressemble un peu au class="nom_de_class" dans le fait qu'il fait appel à des propriétés externes.

C'est via les class et les id que tu as besoin d'utiliser les feuilles de style se présentant sous cette forme :

Code:
.titre_de_class {
propriete1:valeur;
propriete2:valeur;
propriete3:valeur;
}

ou encore

#titre_de_l_id {
propriete1:valeur;
propriete2:valeur;
propriete3:valeur;
}
La différence entre id et class est que l'id ne peut être utilisée qu'une seule fois dans une page web ( par exemple si tu veux afficher ton header, tu n'auras besoin de cette propriété qu'une seule fois ) alors que la class peut être réutilisée 36 fois dans ta page si tu le souhaites.

Dans la feuille de style il y a une seule différence à faire quand tu écris des propriétés de class ou d'id :
• Tu mets un . avant le titre de ta class.
• Tu mets un # avant le titre de ton id.


Par exemple, dans notre page web on a une div :
Code:
<div> blabla </div>
Si tu avais voulu lui donner un style, jusqu'à présent tu aurais fait :
Code:
<div style="height:150px; background-color:#006699; color:#ffffff; text-align:center; font-size:15px; border:5px double #ffffff;margin:auto; overflow:auto;">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tincidunt diam eget urna bibendum sit amet rutrum orci ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer dapibus ullamcorper bibendum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer convallis tincidunt dignissim. Aliquam quis massa lorem, in egestas orci. Aliquam erat volutpat. Sed imperdiet lacus vel nulla dictum sit amet sagittis quam consectetur. Curabitur convallis aliquet arcu, vel varius felis ultricies a. Etiam euismod est risus. Nullam placerat cursus dictum. In dapibus fringilla massa, at suscipit mi accumsan sit amet.

</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tincidunt diam eget urna bibendum sit amet rutrum orci ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer dapibus ullamcorper bibendum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer convallis tincidunt dignissim. Aliquam quis massa lorem, in egestas orci. Aliquam erat volutpat. Sed imperdiet lacus vel nulla dictum sit amet sagittis quam consectetur. Curabitur convallis aliquet arcu, vel varius felis ultricies a. Etiam euismod est risus. Nullam placerat cursus dictum. In dapibus fringilla massa, at suscipit mi accumsan sit amet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tincidunt diam eget urna bibendum sit amet rutrum orci ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer dapibus ullamcorper bibendum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer convallis tincidunt dignissim. Aliquam quis massa lorem, in egestas orci. Aliquam erat volutpat. Sed imperdiet lacus vel nulla dictum sit amet sagittis quam consectetur. Curabitur convallis aliquet arcu, vel varius felis ultricies a. Etiam euismod est risus. Nullam placerat cursus dictum. In dapibus fringilla massa, at suscipit mi accumsan sit amet.


Mais avec une feuille de style, tu dois enlever toutes les propriétés de style pour aller les mettre dans le CSS.
La seule chose à faire, est de trouver un "titre" à ton style. Ici nous le nommerons divtest.
Comme c'est un style que nous pourrons ré-utiliser plus tard, on utilise une class="divtest".

On obtient donc
Code:
<div class="divtest"> blabla </div>
Et il ne reste plus qu'à ajouter les propriétés de divtest dans le CSS:

Code:
.divtest{
   height:150px;
   background-color:#006699;
   color:#ffffff;
   text-align:center;
   font-size:20px;
   border:5px double #ffffff;
   margin:auto;
}

Voilà, beaucoup de choses pour aujourd'hui, j'espère que j'ai été assez claire n_n Pose des questions si c'est pas le cas ;)


Dernière édition par Ella' le Dim 21 Oct 2012, 15:36, édité 1 fois
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Dragibus
Admin Bonbon
Admin Bonbon
avatar

Féminin
Nombre de messages : 4117
Age : 20
Logiciel de Création : Gimp
Date d'inscription : 07/04/2010

MessageSujet: Re: [Cours & Questions] Drag' ♥   Dim 21 Oct 2012, 11:08

Bon, déjà je viens seulement de voir que tu avais répondu, et ensuite je vais relire ça deux trois fois et noter mes questions au fur et à mesure afin de tout comprendre Smile. Merci d'avoir pris le temps de m'expliquer tout ça Ella ♥.

_______________________

Si quelqu'un passe par ici (en particulier La Krenouille, Ella, Matti, Fairling ou encore Ténèbres) sachez que je suis heureuse de toutes vous avoir connues et que je suis toujours nostalgique quand je passe sur GCL, ma boîte mp vous est ouverte pour rapidement prendre des nouvelles. Je vous souhaite le meilleur ♥
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Ella'

avatar

Féminin
Nombre de messages : 4063
Age : 24
Logiciel de Création : Suite Adobe, Sketch, Suite Affinity
Date d'inscription : 19/02/2008

MessageSujet: Re: [Cours & Questions] Drag' ♥   Dim 21 Oct 2012, 15:36

D'accord pas de soucis, prends ton temps Smile

Je viens de remarquer une erreur dans mon poste précédent : j'ai écrit <strong>strong</> au lieu de <strong>strong</strong> n_n
J'édite tout de suite !
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Dragibus
Admin Bonbon
Admin Bonbon
avatar

Féminin
Nombre de messages : 4117
Age : 20
Logiciel de Création : Gimp
Date d'inscription : 07/04/2010

MessageSujet: Re: [Cours & Questions] Drag' ♥   Dim 28 Oct 2012, 10:45

Je suis déterminée ce matin mais je préviens tout de suite, j'étais à un anniversaire hier et je suis rentrée tard donc le démarrage risque d'être difficile. Ne t'affole pas si tu dois me répéter trois fois la même chose ou si je t'écris trois fois la même bêtise x) Je préciserai aussi que j'écoute du Superbus donc ça n'aidera pas à la concentration ^^'.

J'ai donc lu tout ton message avec soin, en notant mes questions et autres problèmes que j'ai pu rencontrer, les voilà :

Je n'ai pas tout compris pour les propriétés strong et emphasis, et elles me rappellent le h1 de la fiche de présentation de GCL donc s'il y a des similitudes n'hésite pas à les utiliser pour me réexpliquer. Pour résumer ce que je n'ai pas compris, il suffit de te dire ce que j'ai cru comprendre :
C'est comme bold et italic mais c'est entièrement modifiable avec le CSS ce qui a pour conséquence de pouvoir annuler la mise ne gras ou en italique ?


Ensuite, j'avais déjà repéré ces #id et class en étudiant des PA comme celles de GCL, mais je ne comprenais pas tout, maintenant je crois que le brouillard se dissipe dans mon esprit.

Par contre, toutes les propriétés comprises dans id et class, je les écris où ? Sur une feuille de style d'un forum quelconque ?

_______________________

Si quelqu'un passe par ici (en particulier La Krenouille, Ella, Matti, Fairling ou encore Ténèbres) sachez que je suis heureuse de toutes vous avoir connues et que je suis toujours nostalgique quand je passe sur GCL, ma boîte mp vous est ouverte pour rapidement prendre des nouvelles. Je vous souhaite le meilleur ♥
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Ella'

avatar

Féminin
Nombre de messages : 4063
Age : 24
Logiciel de Création : Suite Adobe, Sketch, Suite Affinity
Date d'inscription : 19/02/2008

MessageSujet: Re: [Cours & Questions] Drag' ♥   Dim 04 Nov 2012, 13:02

Dragibus a écrit:
Je n'ai pas tout compris pour les propriétés strong et emphasis, et elles me rappellent le h1 de la fiche de présentation de GCL donc s'il y a des similitudes n'hésite pas à les utiliser pour me réexpliquer. Pour résumer ce que je n'ai pas compris, il suffit de te dire ce que j'ai cru comprendre :
C'est comme bold et italic mais c'est entièrement modifiable avec le CSS ce qui a pour conséquence de pouvoir annuler la mise ne gras ou en italique ?

En fait strong et em sont des balises servant à mettre en avant un ou plusieurs mots, ces balises servent avant tout à accentuer un mot. Les navigateurs vont leur accorder plus d'importance dans le référencement, et dans le cas des lecteurs d'écran (pour les personnes handicapées, il faut bien s'adapter) les mots entourés de ces balises seront prononcés avec plus d'insistance pour montrer que ce sont des mots importants qui se détachent des autres. Ces mots encadrés des balises ont aussi un aspect visuel différents des autres, mais ce n'est plus seulement ça (comme c'est le cas avec bold et italic), leur intérêt premier est bien de les mettre en avant. Et comme tu l'as compris leur aspect visuel est modifiable via une feuille de style (mais saches que toutes les balises sont modifiables, même <b> et <i>).

Petite citation d'un article d'AlsaCreation sur le sujet :
Citation :
Et <strong> et <em> dans tout ça ?

Là où le soucis et la confusion commencent, c'est que les navigateurs ont en règle générale adopté un rendu italique pour la balise <em> et une mise en gras pour la balise <strong>. Or, ce choix conventionnel des navigateurs ne repose sur aucune règle établie : dans le futur, ils pourraient très bien décider d'afficher <strong> en taille de caractère agrandie ou <em> avec un retrait à gauche et en couleur, etc.

Il faut reconnaître que les balises <i> et <b> n'apportent aucun sens (sémantique) au document contrairement aux éléments <strong> et <em> qui sont des mises en exergue. Or il faut bien comprendre qu'une mise en italique et une mise en gras n'implique pas forcément que le texte doit être plus important. Si c'est souvent le cas, il ne faut pas penser que les balises sont équivalentes.


Le h1 est juste une balise indiquant que c'est le plus gros titre de ta page, c'est un peu la même chose que em et strong car c'est encore utile au niveau du référencement et de l'accessibilité. Si tu veux mettre un titre, choisis un <h1>Titre plutôt qu'un <div class="titre">Titre</div>, c'est plus correct sémantiquement Smile


Citation :
Ensuite, j'avais déjà repéré ces #id et class en étudiant des PA comme celles de GCL, mais je ne comprenais pas tout, maintenant je crois que le brouillard se dissipe dans mon esprit.

Par contre, toutes les propriétés comprises dans id et class, je les écris où ? Sur une feuille de style d'un forum quelconque ?
Les feuilles de style sont toujours à part, dans le cadre de Forumactif tu peux les ajouter directement avec le panneau d'admin, mais si tu veux te compliquer la tâche et faire comme sur un vrai site, tu peux héberger ton style.css et y faire appel sur ton forum avec le code suivant entre les balises <head> et </head>:

Code:
<link href="style.css" rel="stylesheet" type="text/css" />
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Dragibus
Admin Bonbon
Admin Bonbon
avatar

Féminin
Nombre de messages : 4117
Age : 20
Logiciel de Création : Gimp
Date d'inscription : 07/04/2010

MessageSujet: Re: [Cours & Questions] Drag' ♥   Lun 05 Nov 2012, 10:35

Bon, je vais essayer de retenir ce que tu m'as dis pour ces deux propriétés mystérieuses x)

« Par contre, toutes les propriétés comprises dans id et class, je les écris où ? Sur une feuille de style d'un forum quelconque ? »
Je me suis mal exprimée avec cette question. Ce que je voulais savoir, c'est que tout ce que j'écris sur ma feuille de style pour pouvoir utiliser div class "divtest", je dois le mettre dans une feuille de style, justement, mais je peux la mettre sur n'importe quel forum, grâce au lien du div test les propriétés s'appliqueront sur ma div ? Rah je ne trouve pas les mots - -".

Au passage j'ai fait des progrès niveau codage, la PA que j'ai fait pour Horse-Wild je l'ai écrite à la main, du début à la fin ! Il y a quelques bugs mais je suis fière de moi ^^. Breeeef.


_______________________

Si quelqu'un passe par ici (en particulier La Krenouille, Ella, Matti, Fairling ou encore Ténèbres) sachez que je suis heureuse de toutes vous avoir connues et que je suis toujours nostalgique quand je passe sur GCL, ma boîte mp vous est ouverte pour rapidement prendre des nouvelles. Je vous souhaite le meilleur ♥
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Ella'

avatar

Féminin
Nombre de messages : 4063
Age : 24
Logiciel de Création : Suite Adobe, Sketch, Suite Affinity
Date d'inscription : 19/02/2008

MessageSujet: Re: [Cours & Questions] Drag' ♥   Sam 06 Avr 2013, 15:49

Coucou ! Me revoilà d'attaque pour continuer ce cours, enfin si tu en veux toujours un Razz

J'ai commencé la rédaction d'un tuto ici qui prends tout depuis les bases. Je t'invite à le lire si tu es toujours intéressée par ce cours Razz
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Dragibus
Admin Bonbon
Admin Bonbon
avatar

Féminin
Nombre de messages : 4117
Age : 20
Logiciel de Création : Gimp
Date d'inscription : 07/04/2010

MessageSujet: Re: [Cours & Questions] Drag' ♥   Sam 06 Avr 2013, 17:03

Je le lisais au fur et à mesure ce qui fait que je n'avais pas vu ton message x)
Je suis toujours intéressée mais moins active ^^'

_______________________

Si quelqu'un passe par ici (en particulier La Krenouille, Ella, Matti, Fairling ou encore Ténèbres) sachez que je suis heureuse de toutes vous avoir connues et que je suis toujours nostalgique quand je passe sur GCL, ma boîte mp vous est ouverte pour rapidement prendre des nouvelles. Je vous souhaite le meilleur ♥
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Contenu sponsorisé




MessageSujet: Re: [Cours & Questions] Drag' ♥   

Revenir en haut Aller en bas
 
[Cours & Questions] Drag' ♥
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 3 sur 3Aller à la page : Précédent  1, 2, 3
 Sujets similaires
-
» Pleins de questions ...
» Bug avec QCM-drag
» Questions historique et de vocabulaire
» la vie c'comme les cours d'anglais, y'a trop d'faux amis.
» L'affichage de la carte disparaît en cours de navigation

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Graphisme Cat-Life ::  :: Vieux Sujets :: Cours-
Sauter vers: