Procédés de Mise en forme Les Feuilles de style en Cascade C.S.S (Cascading Style Sheet) Alain Gély – Stage CIES « Initiation au web »

Présentation au sujet: "Procédés de Mise en forme Les Feuilles de style en Cascade C.S.S (Cascading Style Sheet) Alain Gély – Stage CIES « Initiation au web »"— Transcription de la présentation:

1 Procédés de Mise en forme Les Feuilles de style en Cascade C.S.S (Cascading Style Sheet) Alain Gély (gely@isima.fr) – Stage CIES « Initiation au web » - 2005

2 Les Feuilles de style en Cascade C.S.S (Cascading Style Sheet) références www.w3c.org www.pompage.net www.openweb.eu.org www.pompage.net www.openweb.eu.org

3 Les C.S.S Permettent de séparer le fond de la forme Permettent de séparer le fond de la forme Assurent une compatibilité plus grande Assurent une compatibilité plus grande Permettent une maintenance facilitée Permettent une maintenance facilitée Les CSS par lexemple Les CSS par lexemple Exemple 1Exemple 1 - Exemple 2 - Exemple 3 Exemple 2Exemple 3 Exemple 1Exemple 2Exemple 3

4 3 pages web au contenu identique… … mais à la présentation différente Code de la page HTML (presque) identique dans les trois cas Code de la page HTML (presque) identique dans les trois cas Les C.S.S gèrent la mise en page Les C.S.S gèrent la mise en page Quelques exemples de mise en page : Quelques exemples de mise en page : http://www.csszengarden.com/

5 C.S.S : Une cascade de style Dans les balises Dans les balises Mais aussi… Mais aussi… Dans la page Dans la page Dans un fichier de style Dans un fichier de style Les feuilles de style permettent de gérer la mise en page des divers éléments dune page web

6 La balise La balise Les feuilles de style permettent de gérer la mise en page des divers éléments dune page Web Bien sur, une page Web peut être composée de nombreux paragraphes, comme nimporte quel texte. Mais alors, il devient fastidieux de devoir saisir à nouveau toutes les informations de style ! Heureusement, les CSS nous permettent déviter ce travail inutile… Mettons le style une fois pour toute dans la page : La balise La balise

7 p { text-align: right; color: black } Les feuilles de style permettent de gérer la mise en page des divers éléments dune page Web Bien sur, une page Web peut être composée de nombreux paragraphes, comme nimporte quel texte. Mais alors, il devient fastidieux de devoir saisir à nouveau toutes les informations de style ! Heureusement, les CSS nous permettent déviter ce travail inutile…

8 La balise La balise <style type= " text/css " title= " mes_styles " media= " all " > p { text-align : right; color : black } Voyons Voyons plusendétail

9 La balise La balise <style type= " text/css " title= " mes_styles " media= " all " > p { text-align : right; color : black } Les informations de la balise sont de type texte (optionnel)

10 La balise La balise <style type= " text/css " title= " mes_styles " media= " all " > p { text-align : right; color : black } Nom donné (choisi) aux informations de style (optionnel)

11 La balise La balise <style type= " text/css " title= " mes_styles " media= " all " > p { text-align : right; color : black } Indique à quel média sapplique la feuille de style. (optionnel) all all screen screen print print projection projection tv tv braille braille

12 La balise La balise <style type= " text/css " title= " mes_styles " media= " all " > p { text-align : right; color : black } élément pour lequel on défini le style délimiteurs de début et de fin de style

13 La balise La balise <style type= " text/css " title= " mes_styles " media= " all " > P { text-align : right ; color : black } propriété valeur pour cette propriété

14 La balise La balise <style type= " text/css " title= " mes_styles " media= " all " > P { text-align : right ; color : black } h1 { text-align : center ; } Il est possible de définir le style de plusieurs éléments

15 feuille de style externe et si le site possède plusieurs pages ? et si le site possède plusieurs pages ? On crée une feuille de style externe, liée à chaque page Web qui lutilise < link rel= " stylesheet " href= " style.css " type= " text/css " media= " screen " >

16 Lier une feuille de style externe < link rel= " stylesheet " href= " style.css " type= " text/css " media= "s creen " > cest une feuille de style qui est liée

17 Lier une feuille de style externe < link rel= " stylesheet " href= " style.css " type= " text/css " media= " screen " > Ou se trouve la feuille de style ? Ici, dans le fichier style.css du répertoire courant

18 Lier une feuille de style externe < link rel= "s tylesheet " href= " style.css " type= " text/css " media= " screen " > Une feuille de style, cest un fichier texte

19 Lier une feuille de style externe < link rel= " stylesheet " href= " style.css " type= " text/css " media= " screen " > Pour quel média la feuille de style est-elle valable ? (optionnel, par défaut : tous)

20 le fichier style.css Il comporte les informations de style sur les différents éléments Il comporte les informations de style sur les différents éléments P { text-align : right ; color : black } h1 { text-align : center } Fichier « style.css »

21 des styles en cascade Mais au fait, pourquoi « en cascade » ?

22 1 ère Cascade styles définis en cascade du plus éloigné au plus proche Que se passe-t-il en cas de redéfinition en cascade ? feuille de style externe balise sune page attribut style dans une balise du – prioritaire au + prioritaire

23 Quelques propriétés pour commencer ? Après cette présentation générale, voyons quelques exemples… body body p h1, h2, h3, h4, h5, h6 h1, h2, h3, h4, h5, h6

24 body Couleur du texte & du fond Couleur du texte & du fond Placer une image de fond Placer une image de fond Rajouter des marges Rajouter des marges

25 Un peu de couleur… color color la propriété color permet de fixer la couleur du texte. Comment manipuler les couleurs ? Comment manipuler les couleurs ? liste de couleur standard liste de couleur standard Un code hexadécimal long #00FF45 Un code hexadécimal long #00FF45 Un code hexadécimal court #0F3 Un code hexadécimal court #0F3 Un code rgb, de 0 à 255 rgb(0,0,100) Un code rgb, de 0 à 255 rgb(0,0,100) un code rgb, en pourcentage rgb(10%,10%,30%) un code rgb, en pourcentage rgb(10%,10%,30%) transparent transparent

26 Un peu de couleur (suite) Liste des couleurs standard : Liste des couleurs standard : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

27 Un peu de couleur (de fond) background-color background-color la propriété background-color permet de fixer la couleur de fond de la page. body { background-color : rgb(0,0,0) ; color : white }

28 Une image de fond background-image background-image permet de spécifier une image de fond background-repeat background-repeat limage de fond doit-elle être répétée ? background-position background-position Où placer limage de fond ? background-attachment background-attachment Limage de fond bouge-t-elle en même temps que la page ?

29 background-image none url() background-repeat repeat no-repeat repeat-x repeat-y background-position background-attachment

30 background-repeat no-repeat repeat-x repeat-y repeat

31 background-attachment: scrool; (valeur par défaut) background-attachment: fixed; bla bla bla blabla bla bla bla positionnement fixe ou mobile background-attachment

32 Mais au fait, comment avoir une image au milieu ? background-position : x y Détermine la position de limage de fond par rapport au coin supérieur gauche

33 background-position: 50% 50% ; background-position: 100% 100%; background-position: 10px 10px; background-position: 0% 100%; Exemples de positionnement

34 background-position: 50% 50% ; background-position: 100% 100%; background-position: 10px 10px; background-position: 0% 100%; Exemples de positionnement ?

35 Mesures en C.S.S % (pourcentage) % (pourcentage) la taille / position de lélément est calculée de façon relative la taille / position de lélément est calculée de façon relative px (pixel) px (pixel) Le pixel est la plus petit unité de lécran Le pixel est la plus petit unité de lécran em em 1em = 100%, 1.2em = 120%, … 1em = 100%, 1.2em = 120%, … pt pt correspond à une unité dimprimerie correspond à une unité dimprimerie

36 Mesures en C.S.S ! Préciser lunité de mesure est obligatoire ! ! Préciser lunité de mesure est obligatoire ! sauf pour la valeur 0, identique quelque soit lunité utilisée background-position: 50% 50% ;// Valide background-position: 10px 50% ;// Valide background-position: 0 50% ;// Valide background-position: 10 50% ;// Non Valide En C.S.S, en cas derreur, la propriété erronée est ignorée

37 bla bla bla blabla bla bla bla Un peu de marge… margin : 1em ; margin-right : 1em ; margin-left : 2em ; margin-right : 0.9em ; margin-bottom : 2em; Nous reviendrons sur les marges un peu plus tard…

38 Quelques propriétés sur les fontes font-size font-size permet de fixer la taille de la police permet de fixer la taille de la police les unités de mesures vues précédemment sont utilisables les unités de mesures vues précédemment sont utilisables il existe aussi des tailles relatives prédéfinies : il existe aussi des tailles relatives prédéfinies : xx-smallxx-small x-smallx-small smallsmall medium,medium, large,large, x-large,x-large, xx-large,xx-large, larger,larger, smallersmaller

39 Quelques propriétés sur les fontes font-family font-family permet de spécifier le type de police que lon souhaite afficher permet de spécifier le type de police que lon souhaite afficher ! Toutes les polices ne sont pas disponibles sur tous les ordinateurs ! ! Toutes les polices ne sont pas disponibles sur tous les ordinateurs ! Il est possible de spécifier plusieurs polices, dans lordre ou lon souhaite les utiliser Il est possible de spécifier plusieurs polices, dans lordre ou lon souhaite les utiliser

40 Quelques propriétés sur les fontes font-family font-family familles de polices génériques : familles de polices génériques : serif,serif, sans-serif,sans-serif, monospace,monospace, cursive,cursive, fantasy.fantasy. font-family : "times new roman", serif, sans-serif exemple :

41 Quelques propriétés sur les fontes font-weight font-weight précise le niveau de gras de la police : précise le niveau de gras de la police : normal,normal, bold,bold, 100, 200,...100, 200,... font-style font-style précise le style de fonte : précise le style de fonte : normalnormal italicitalic oblicoblic font-weight : bold ; font-style : italic ; exemple : afficher du texte en italique et en gras

42 Quelques propriétés sur les fontes font-variant font-variant utilise une fonte normale ou en petite capitale : utilise une fonte normale ou en petite capitale : normal,normal, small-caps.small-caps. font font raccourci permettant de tout spécifier raccourci permettant de tout spécifier font : italic bold 1em cursive ; exemple : utilisation du raccourci font

43 Quelques propriétés sur les textes text-align text-align permet de gérer lalignement du texte permet de gérer lalignement du texte right,right, left,left, center,center, justify.justify. text-decoration text-decoration comment doit apparaître le texte comment doit apparaître le texte none (aucun)none (aucun) underline (souligné)underline (souligné) overline (surligné)overline (surligné) line-through (barré)line-through (barré) blink (clignotant)blink (clignotant)

44 Quelques propriétés sur les textes text-transformation text-transformation on peut appliquer des transformations au texte on peut appliquer des transformations au texte capitalize (1ere lettre de chaque mot en majuscule)capitalize (1ere lettre de chaque mot en majuscule) uppercase (transformer en majuscule)uppercase (transformer en majuscule) lowercase (transformer en minuscule)lowercase (transformer en minuscule) none (aucune)none (aucune) text-indent text-indent Indentation de début de paragraphe Indentation de début de paragraphe P { text-transformation : lowercase ; text-indent : 1em; } exemple :

45 Ah oui, au fait … h1 {text-decoration : underline } h2 {text-decoration : underline } h3 {text-decoration : underline } h4 {text-decoration : underline } h5 {text-decoration : underline } h1,h2,h3,h4,h5,h6 {text-decoration : underline } peut sécrire …

46 2 ème Cascade styles définis en cascade Imbrication des éléments Un titre la, un petit texte exemple, mais sans paragraphe La, un autre petit texte, mais qui fait parti dun paragraphe les styles non redéfinis sont répercutés dans tous les éléments contenus D.O.M : Document Object Model

47 Changer le style p {text-decoration : underline } strong {text-decoration : underline } p,strong {text-decoration : underline } peut sécrire … Comme dit précédemment …

48 p strong {text-decoration : underline } Mais attention … possède un autre sens : Le style nest appliqué à strong que sil est imbriqué dans une balise p p>strong {color : red} Exemple … La couleur rouge est appliquée ici, mais aussi la Mais pas la

49 p>strong {text-decoration : underline } Le style nest appliqué à strong que sil est descendant direct de p De même … p>strong {color : red} Exemple … La couleur rouge est appliquée ici, mais pas la

50 p+strong {text-decoration : underline } Le style nest appliqué à strong que sil suit immédiatement une balise p De même … p {text-indent : 1em} p+p {text-indent : 0} Exemple … Le premier paragraphe dun texte sera indenté, mais pas les suivants

51 Pseudo-éléments & Pseudo-classes

52 Un pseudo-élément est une caractéristique qui permet de rajouter du détail de style. Un pseudo-élément est une caractéristique qui permet de rajouter du détail de style. On reconnaît un pseudo-élément à lutilisation de « : » dans la définition du style correspondant On reconnaît un pseudo-élément à lutilisation de « : » dans la définition du style correspondant Quelques exemples ? Quelques exemples ? Les Pseudo-éléments

53 Quelques pseudo-éléments :first-letter :first-letter ne sapplique que sur la première lettre de lensemble ne sapplique que sur la première lettre de lensemble :first-line :first-line ne sapplique que sur la première ligne de lensemble ne sapplique que sur la première ligne de lensemble :first-letter { color : red; font-size : large }; P:first-letter { color : red; font-size : large }; On peut préciser (ou pas) à quel élément appliquer le pseudo-élément

54 Une pseudo-classe est très similaire à un pseudo-élément. Une pseudo-classe est très similaire à un pseudo-élément. On parle de pseudo-classe quand un objet peut avoir différents états On parle de pseudo-classe quand un objet peut avoir différents états Un exemple ? Un exemple ? Les Pseudo-classe

55 Un lien peu avoir plusieurs états Un lien peu avoir plusieurs états Visité Visité Actif Actif Pointé par la souris Pointé par la souris Les pseudo-classes permettent de donner des styles différents à ces différentes classes de liens. Les pseudo-classes permettent de donner des styles différents à ces différentes classes de liens. Les Pseudo-classe liens

56 :link :link sapplique à un lien actif (avant visite) sapplique à un lien actif (avant visite) :visited :visited sapplique à un lien visité sapplique à un lien visité :active :active au moment ou le lien est activé au moment ou le lien est activé :hover :hover lorsque la souris est sur le lien lorsque la souris est sur le lien :focus :focus lorsque le focus est sur le lien (tabulation par exemple) lorsque le focus est sur le lien (tabulation par exemple)

57 Des classes et des ID (parce que sil y a des pseudo-classes, cest bien quil doit y avoir des classes…)

58 Les classes Et si certains types déléments devaient être affichés différemment ? Et si certains types déléments devaient être affichés différemment ? exemple : Le chapeau dun article exemple : Le chapeau dun article (Où certains éléments veulent se la jouer différent…) Ceci est le premier paragraphe de larticle, qui nous sert de chapeau. Cest un paragraphe, on ne peut lui ôter ça, mais on aimerait bien pouvoir lafficher différement, histoire que ça soit plus drôle. Et puis ceci est un paragraphe tout ce quil y a de plus banal, rien de bien exaltant Et celui-ci aussi est un autre paragraphe plutôt ennuyeux

59 Et bien, cest possible ! il existe un attribut class il existe un attribut class Applicable à tous les éléments Applicable à tous les éléments permettant de spécifier un style particulier permettant de spécifier un style particulier (Et cest la classe !) Ceci est le premier paragraphe de larticle, qui nous sert de chapeau. Cest un paragraphe, on ne peut lui ôter ça, mais on aimerait bien pouvoir lafficher différement, histoire que ça soit plus drôle. Et puis ceci est un paragraphe tout ce quil y a de plus banal, rien de bien exaltant Et celui-ci aussi est un autre paragraphe plutôt ennuyeux

60 et du coté du style… P { color : black; background-color : white; } P.chapeau { font-size : smaller ; text-align : justify; } P.chapeau:first-letter { font-size : 1.2em ; font-weight : bold ; }.petit { font-size : 0.7em }

61 et du coté du style… P { color : black; background-color : white; } P.chapeau { font-size : smaller ; text-align : justify; } P.chapeau:first-letter { font-size : 1.2em ; font-weight : bold ; }.petit { font-size : 0.7em } Il est possible de cumuler classe et pseudo-classe on peut définir une classe sans préciser à quel élément elle sapplique Encore une fois, le style cascade de la classe la plus générale vers une classe particulière

62 Les identifiants On peut définir un identifiant unique pour un élément On peut définir un identifiant unique pour un élément On peut associer un style à cet identifiant On peut associer un style à cet identifiant (Appelez moi par mon nom !) Ceci est le premier paragraphe de larticle, qui nous sert de chapeau. Cest un paragraphe, on ne peut lui ôter ça, mais on aimerait bien pouvoir lafficher différement, histoire que ça soit plus drôle. Et puis ceci est un paragraphe tout ce quil y a de plus banal, rien de bien exaltant Et celui-ci aussi est un autre paragraphe plutôt ennuyeux

63 et du coté du style… P { color : black; background-color : white; } P#chapeau1 { font-size : smaller ; text-align : justify; }

64 et du coté du style… P { color : black; background-color : white; } P#chapeau1 { font-size : smaller ; text-align : justify; }. pour classe # pour identifiant

65 Mais alors, classe ou identifiant ? Un identifiant doit être unique Un identifiant doit être unique Utilisé pour se référer à un élément particulier Utilisé pour se référer à un élément particulier informations de position (on y vient, patience…) informations de position (on y vient, patience…) Une classe peut servir plusieurs fois Une classe peut servir plusieurs fois on peut y mettre les propriétés de style on peut y mettre les propriétés de style Il est possible de cumuler class et id Il est possible de cumuler class et id

66 Modèles daffichage en C.S.S Mise en boite…

67 Les types de blocs Titre ceci est le premier paragraphe. Cette phrase peut être très importante, mais celle-ci lest plus encore Autre titre titre (encore) titre (toujours) Titre Ceci est le premier paragrapheCette phrase peut être très importante Mais,Celle-ci lest plus encore Autre titre Titre (encore) Titre (toujours)

68 Deux types déléments Les éléments « bloc » Les éléments « bloc » Les éléments blocs sempilent les uns sur les autres Les éléments blocs sempilent les uns sur les autres Un élément bloc peut contenir dautres éléments blocs Un élément bloc peut contenir dautres éléments blocs Un élément bloc peut contenir des éléments en ligne Un élément bloc peut contenir des éléments en ligne exemples : p, h1, h2, h3, h4, h5, h6, div exemples : p, h1, h2, h3, h4, h5, h6, div Les éléments « en ligne » Les éléments « en ligne » Les éléments en ligne se placent les uns à coté des autres Les éléments en ligne se placent les uns à coté des autres Un élément en ligne peut contenir dautres éléments en ligne Un élément en ligne peut contenir dautres éléments en ligne Un élément en ligne ne peut pas contenir déléments bloc. Un élément en ligne ne peut pas contenir déléments bloc. exemples : em, strong, b, i, span exemples : em, strong, b, i, span

69 Deux types déléments Les éléments « bloc » Les éléments « bloc » Les éléments blocs sempilent les uns sur les autres Les éléments blocs sempilent les uns sur les autres Un élément bloc peut contenir dautres éléments blocs Un élément bloc peut contenir dautres éléments blocs Un élément bloc peut contenir des éléments en ligne Un élément bloc peut contenir des éléments en ligne exemples : p, h1, h2, h3, h4, h5, h6, div exemples : p, h1, h2, h3, h4, h5, h6, div Les éléments « en ligne » Les éléments « en ligne » Les éléments en ligne se placent les uns à coté des autres Les éléments en ligne se placent les uns à coté des autres Un élément en ligne peut contenir dautres éléments en ligne Un élément en ligne peut contenir dautres éléments en ligne Un élément en ligne ne peut pas contenir déléments bloc. Un élément en ligne ne peut pas contenir déléments bloc. exemples : em, strong, b, i, span exemples : em, strong, b, i, span

70 DIV & SPAN Containers génériques. Containers génériques. permet de structurer le document permet de structurer le document permet de changer la mise en page de quelques mots dans un texte permet de changer la mise en page de quelques mots dans un texte est très utilisé pour la mise en page est très utilisé pour la mise en page

71 exemple dutilisation de DIV Ici, on peut mettre tout ce qui concerne les menus de navigation. Ici, cest le contenu principal de la page (par exemple) Et la, cest le pied de page, ou on peut mettre les informations légales…

72 les propriétés des boites (voyons ce quil y a en marge…)

73 prenons lexemple de cette boite. Elle contient du texte, mais que peut-on dire de plus ?

74 Elle possède une certaine marge avec les boites qui la suive et la précède propriété margin

75 prenons lexemple de cette boite. Elle contient du texte, mais que peut-on dire de plus ? Elle possède une bordure blanche, mais qui aurait aussi bien pu être verte, en pointillé ou invisible propriété border

76 prenons lexemple de cette boite. Elle contient du texte, mais que peut-on dire de plus ? Et cette bordure peut être plus ou moins rapprochée du contenu propriété padding

77 border-color border-color gère la couleur de la bordure gère la couleur de la bordure border-width border-width thin, medium, thick thin, medium, thick taille spécifiée taille spécifiée border-style border-style None, hidden, None, hidden, dotted, dashed, solid, double, dotted, dashed, solid, double, groove, ridge, inset, outset groove, ridge, inset, outset propriétés de bordure

78 on peut aussi régler individuellement les différentes bordures on peut aussi régler individuellement les différentes bordures border-top-width border-top-width border-bottom-width border-bottom-width border-left-width border-left-width border-right-width border-right-width font, border Comme pour font, il existe un raccourci border propriétés de bordure (suite)

79 margin margin permet de régler la taille de la marge permet de régler la taille de la marge margin-topmargin-top margin-bottommargin-bottom margin-leftmargin-left margin-rightmargin-right padding padding permet de régler la taille du padding permet de régler la taille du padding padding-toppadding-top padding-bottompadding-bottom padding-leftpadding-left padding-rightpadding-right taille des marges

80 margin : auto margin : auto permet normalement de régler les marges au mieux pour centrer lélément. permet normalement de régler les marges au mieux pour centrer lélément. Malheureuseument, Internet Explorer nest pas de cet avis Malheureuseument, Internet Explorer nest pas de cet avis Des marges automatiques

81 Positionnement C.S.S (Quest ce quon en fait de toutes ces boites ?)

82 Les propriétés de dimension width width Permet de spécifier la largeur dune boite Permet de spécifier la largeur dune boite height height Permet de spécifier la hauteur dune boite Permet de spécifier la hauteur dune boite width height

83 Les propriétés de placement position position absolute Le bloc est placé de façon absolue absolute Le bloc est placé de façon absolue relative Le bloc est placé relativement à la position quil aurait du occuper relative Le bloc est placé relativement à la position quil aurait du occuper static placement par défaut static placement par défaut fixed le bloc est épinglé à lécran (ne fonctionne pas sous Internet Explorer) fixed le bloc est épinglé à lécran (ne fonctionne pas sous Internet Explorer)

84 Les propriétés de placement (2) position position absolute Le bloc est placé de façon absolue absolute Le bloc est placé de façon absolue pour les positions absolute et relative, il existe deux propriétés top top left left qui permettent de spécifier où doit se placer le coin haut gauche du bloc div#toto { position : absolute; top : 50% ; left : 100px; } width height top, left

85 Le placement flottant la propriété float peut prendre trois valeurs la propriété float peut prendre trois valeurs none none left left right right cette propriété indique comment le bloc flotte par rapport aux suivants. cette propriété indique comment le bloc flotte par rapport aux suivants.

86 toto bla bla bla bla bla bla bla bla bla bla bla bla bloc flottant div#toto { float : right }

87 toto bla bla bla bla bla bla bla bla bla bla bla bla bloc flottant div#toto { float : left }

88 toto bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bloc non flottant div#toto { float : none }

89 Visualisation C.S.S (Un autre point de vue ?)

90 La propriété visibility visibility peut prendre deux valeurs : visibility peut prendre deux valeurs : visible hidden un élement hidden devient invisible, mais la place quil occupe à lécran est tout de même réservée.

91 propriété visibility : visible bla bla bla bla bla bla bla bla bla bla bla

92 propriété visibility : hidden bla bla bla bla bla bla bla bla bla bla bla

93 La propriété display Display indique le comportement que doit adopter lélément Display indique le comportement que doit adopter lélément none none inline inline block block list-item list-item...... none indique quil ne faut pas réserver de la place pour cet élément none indique quil ne faut pas réserver de la place pour cet élément

94 Javascript : Un peu dinteractivité

95 Javascript, cest quoi ? Langage de script exécuté coté client Langage de script exécuté coté client Son fonctionnement dépend du navigateur Son fonctionnement dépend du navigateur Problèmes de portabilité Problèmes de portabilité Mais, Javascript reste un moyen simple dajouter un peu dintéractivité à un site web. Mais, Javascript reste un moyen simple dajouter un peu dintéractivité à un site web.

96 Script dans le Script dans le … <!– /* Votre script ici */ // --> …

97 Script dans le Script dans le … <!– /* Votre script ici */ // --> … Balise précisant lutilisation dun script

98 Script dans le Script dans le … <!– /* Votre script ici */ // --> … Type du script utilisé (ici, javascript)

99 Script dans le Script dans le … <!– /* Votre script ici */ // --> … Début et fin dun bloc de commentaire HTML Marque de commentaire en javascript

100 Script dans le Script dans le … <!– /* Votre script ici */ // --> … Corps du script HTML

101 Script dans un fichier séparé … <script type="text/javascript" src="monscript.js"> … Et cest le fichier monscript.js qui contiendra le code javascript

102 Un premier script simple… window.status = "Stage d'initiation à la création de pages web"; Le script peut être écrit Dans lentête de la page, dans la section, comme vu précédemment. Dans un fichier séparé (par exemple " premier_script.js ")

103 Les fonctions en javascript function affiche(texte) { window.status = texte; }

104 Les fonctions en javascript function affiche(texte) { window.status = texte; } Mot-clé function (ça sinvente pas…)

105 Les fonctions en javascript function affiche(texte) { window.status = texte; } Nom de la fonction

106 Les fonctions en javascript function affiche(texte) { window.status = texte; } Paramètre(s) de la fonction

107 Les fonctions en javascript function affiche(texte) { window.status = texte; } Paramètre(s) de la fonction

108 Les gestionnaires dévènements On peut associer un comportement à certaines balises, via un gestionnaire dévènement. On peut associer un comportement à certaines balises, via un gestionnaire dévènement. onMouseOver onMouseOver onMouseOut onMouseOut onClick onClick onLoad (appliqué à BODY) onLoad (appliqué à BODY) Où que fait-on de nos fonctions…

109 Evènements & fonctions Le gestionnaire dévènement peut exécuter une fonction javascript Le gestionnaire dévènement peut exécuter une fonction javascript Il existe une balise HTML pour les onMouseOut="affiche("");"> définitions

110 Un exemple un peu plus complexe On veut afficher certains éléments au passage de la souris On veut afficher certains éléments au passage de la souris function affichedef(id_element) { var boite = document.getElementById(id_element); boite.style.visibility = "visible"; } function cachedef(id_element) { var boite = document.getElementById(id_element); boite.style.visibility = "hidden"; }

111 Pendant ce temps, dans la page HTML… Prenons lexemple dune définition qui va faire apparaître un autre cadre. Ici, tout ce que je veux afficher ou masquer…

112 Liens utiles Il existe de nombreux scripts déjà prêts Il existe de nombreux scripts déjà prêts http://www.editeurjavascript.com/ - Editeur Javascript http://www.editeurjavascript.com/ - Editeur Javascript http://www.editeurjavascript.com/ http://www.toutjavascript.com/ - Tout Javascript http://www.toutjavascript.com/ - Tout Javascript http://www.toutjavascript.com/