Proc d s de mise en forme
Download
1 / 112

- PowerPoint PPT Presentation


  • 81 Views
  • Uploaded on

Procédés de Mise en forme . Les Feuilles de style en Cascade C.S.S ( C ascading S tyle S heet). Alain Gély (gely@isima.fr) – Stage CIES « Initiation au web » - 2005. Les Feuilles de style en Cascade C.S.S ( C ascading S tyle S heet) références www.w3c.org

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about '' - satya


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Proc d s de mise en forme

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


Proc d s de mise en forme

Les Feuilles de style en Cascade

C.S.S

(Cascading Style Sheet)

références

www.w3c.org

www.pompage.netwww.openweb.eu.org


Les c s s
Les C.S.S

  • Permettent de séparer le fond de la forme

  • Assurent une compatibilité plus grande

  • Permettent une maintenance facilitée

  • Les CSS par l’exemple

    Exemple 1 - Exemple 2 - Exemple 3


Proc d s de mise en forme

3 pages web au contenu identique…

… mais à la présentation différente

  • Code de la page HTML (presque) identique dans les trois cas

  • Les C.S.S gèrent la mise en page

  • Quelques exemples de mise en page :

    http://www.csszengarden.com/


C s s une cascade de style
C.S.S : Une cascade de style

  • Dans les balises

  • Mais aussi…

    • Dans la page

    • Dans un fichier de style

<p style="text-align: right; color: black" > Les feuilles de style permettent de gérer la mise en page des divers éléments d’une page web </p>


La balise style
La balise <style>

<pstyle="text-align: right; color: black" > Les feuilles de style permettent de gérer la mise en page des divers éléments d’une page Web </p>

<pstyle="text-align: right; color: black" > Bien sur, une page Web peut être composée de nombreux paragraphes, comme n’importe quel texte.</p>

<pstyle="text-align: right; color: black" > Mais alors, il devient fastidieux de devoir saisir à nouveau toutes les informations de style ! </p>

<pstyle="text-align: right; color: black" > Heureusement, les CSS nous permettent d’éviter ce travail inutile… </p>

Mettons le style une fois pour toute dans la page :

La balise <style>


La balise style1
La balise <style>

<html>

<head>

<style type="text/css" title="mes_styles" media="all" >

p { text-align: right; color: black }

</style>

</head>

<body>

<p> Les feuilles de style permettent de gérer la mise en

page des divers éléments d’une page Web </p>

<p> Bien sur, une page Web peut être composée de nombreux

paragraphes, comme n’importe quel texte.</p>

<p> Mais alors, il devient fastidieux de devoir saisir à

nouveau toutes les informations de style ! </p>

<p> Heureusement, les CSS nous permettent d’éviter ce

travail inutile… </p>

</body>

</html>


La balise style2
La balise <style>

<style

type="text/css"

title="mes_styles"

media="all" >

p

{

text-align : right;

color : black

}

</style>

Voyons <style>

plus

en

détail


La balise style3
La balise <style>

<style

type="text/css"

title="mes_styles"

media="all" >

p

{

text-align : right;

color : black

}

</style>

Les informations de la balise sont de type texte

(optionnel)


La balise style4
La balise <style>

<style

type="text/css"

title="mes_styles"

media="all" >

p

{

text-align : right;

color : black

}

</style>

Nom donné (choisi) aux informations de style

(optionnel)


La balise style5
La balise <style>

<style

type="text/css"

title="mes_styles"

media="all" >

p

{

text-align : right;

color : black

}

</style>

Indique à quel média s’applique la feuille de style.

(optionnel)

  • all

  • screen

  • print

  • projection

  • tv

  • braille


La balise style6
La balise <style>

<style

type="text/css"

title="mes_styles"

media="all" >

p

{

text-align : right;

color : black

}

</style>

élément pour lequel on défini le style

délimiteurs de début et de fin de style


La balise style7
La balise <style>

<style

type="text/css"

title="mes_styles"

media="all" >

P

{

text-align : right ;

color : black

}

</style>

propriété

valeur pour cette propriété


La balise style8
La balise <style>

<style

type="text/css"

title="mes_styles"

media="all" >

P

{

text-align : right ;

color : black

}

h1

{

text-align : center ;

}

</style>

Il est possible de définir le style de plusieurs éléments


Feuille de style externe
feuille de style externe

  • et si le site possède plusieurs pages ?

    On crée une feuille de style externe,

    liée à chaque page Web qui l’utilise

<html>

<head>

< link rel="stylesheet"

href="style.css"

type="text/css"

media="screen" >

</head>


Lier une feuille de style externe
Lier une feuille de style externe

<html>

<head>

< link rel="stylesheet"

href="style.css"

type="text/css"

media="screen" >

</head>

c’est une feuille de style qui est liée


Lier une feuille de style externe1
Lier une feuille de style externe

<html>

<head>

< link rel="stylesheet"

href="style.css"

type="text/css"

media="screen" >

</head>

Ou se trouve la feuille de style ?

Ici, dans le fichier style.css

du répertoire courant


Lier une feuille de style externe2
Lier une feuille de style externe

<html>

<head>

< link rel="stylesheet"

href="style.css"

type="text/css"

media="screen" >

</head>

Une feuille de style, c’est un fichier texte


Lier une feuille de style externe3
Lier une feuille de style externe

<html>

<head>

< link rel="stylesheet"

href="style.css"

type="text/css"

media="screen" >

</head>

Pour quel média la feuille de style est-elle valable ?

(optionnel, par défaut : tous)


Le fichier style css
le fichier style.css

  • Il comporte les informations de style sur les différents éléments

Fichier « style.css »

P

{

text-align : right ;

color : black

}

h1

{ text-align : center }


Des styles en cascade
des styles en cascade

Mais au fait, pourquoi

« en cascade »

?


1 re cascade
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

du – prioritaire

au + prioritaire

balise <style> s’une page

attribut style dans une balise


Quelques propri t s pour commencer
Quelques propriétés pour commencer ?

Après cette présentation générale,

voyons quelques exemples…

  • body

  • p

  • h1, h2, h3, h4, h5, h6


Proc d s de mise en forme
body

  • Couleur du texte & du fond

  • Placer une image de fond

  • Rajouter des marges


Un peu de couleur
Un peu de couleur…

  • color

    la propriété color permet de fixer la couleur du texte.

  • Comment manipuler les couleurs ?

    • liste de couleur standard

    • Un code hexadécimal long #00FF45

    • Un code hexadécimal court #0F3

    • Un code rgb, de 0 à 255 rgb(0,0,100)

    • un code rgb, en pourcentage rgb(10%,10%,30%)

    • transparent


Un peu de couleur suite
Un peu de couleur (suite)

  • Liste des couleurs standard :

    aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow


Un peu de couleur de fond
Un peu de couleur (de fond)

  • 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

}


Une image de fond
Une image de fond

  • background-image

    permet de spécifier une image de fond

  • background-repeat

    l’image de fond doit-elle être répétée ?

  • background-position

    Où placer l’image de fond ?

  • background-attachment

    L’image de fond bouge-t-elle en même temps que la page ?


Proc d s de mise en forme

  • background-repeat

    • repeat

    • no-repeat

    • repeat-x

    • repeat-y

background-position

background-attachment


Proc d s de mise en forme

background-repeat

repeat-x

no-repeat

repeat

repeat-y


Positionnement fixe ou mobile

bla bla bla blabla bla bla bla

bla bla bla blabla bla bla bla

bla bla bla blabla bla bla bla

bla bla bla blabla bla bla bla

bla bla bla blabla bla bla bla

bla bla bla blabla bla bla bla

bla bla bla blabla bla bla bla

positionnement fixe ou mobile

background-attachment

bla bla bla blabla bla bla bla

bla bla bla blabla bla bla bla

bla bla bla blabla bla bla bla

bla bla bla blabla bla bla bla

bla bla bla blabla bla bla bla

bla bla bla blabla bla bla bla

bla bla bla blabla bla bla bla

background-attachment: scrool;

(valeur par défaut)

background-attachment: fixed;


Proc d s de mise en forme

Mais au fait, comment avoir une image au milieu ?

background-position : x y

Détermine la position de l’image de fond

par rapport au coin supérieur gauche


Exemples de positionnement
Exemples de positionnement

background-position: 50% 50% ;

background-position: 100% 100%;

background-position: 10px 10px;

background-position: 0% 100%;


Exemples de positionnement1
Exemples de positionnement

background-position: 50% 50% ;

background-position: 100% 100%;

?

background-position: 10px 10px;

background-position: 0% 100%;


Mesures en c s s
Mesures en C.S.S

  • % (pourcentage)

    • la taille / position de l’élément est calculée de façon relative

  • px (pixel)

    • Le pixel est la plus petit unité de l’écran

  • em

    • 1em = 100%, 1.2em = 120%, …

  • pt

    • correspond à une unité d’imprimerie


Mesures en c s s1
Mesures en C.S.S

! Préciser l’unité de mesure est obligatoire !

sauf pour la valeur 0, identique quelque soit l’unité 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 d’erreur, la propriété erronée est ignorée


Un peu de marge
Un peu de marge…

bla bla bla blabla bla bla bla

bla bla bla blabla bla bla bla

bla bla bla blabla bla bla bla

bla bla bla blabla bla bla bla

bla bla bla blabla bla bla bla

bla bla bla blabla bla bla bla

bla bla bla blabla bla bla bla

margin : 1em ;

margin-right : 1em ;

margin-left : 2em ;

margin-right : 0.9em ;

margin-bottom : 2em;

Nous reviendrons sur les marges un peu plus tard…


Quelques propri t s sur les fontes
Quelques propriétés sur les fontes

  • font-size

    • permet de fixer la taille de la police

    • les unités de mesures vues précédemment sont utilisables

    • il existe aussi des tailles relatives prédéfinies :

      • xx-small

      • x-small

      • small

      • medium,

      • large,

      • x-large,

      • xx-large,

      • larger,

      • smaller


Quelques propri t s sur les fontes1
Quelques propriétés sur les fontes

  • font-family

    • permet de spécifier le type de police que l’on souhaite afficher

    • ! Toutes les polices ne sont pas disponibles sur tous les ordinateurs !

    • Il est possible de spécifier plusieurs polices, dans l’ordre ou l’on souhaite les utiliser


Quelques propri t s sur les fontes2
Quelques propriétés sur les fontes

  • font-family

    • familles de polices génériques :

      • serif,

      • sans-serif,

      • monospace,

      • cursive,

      • fantasy.

exemple :

font-family : "times new roman", serif, sans-serif


Quelques propri t s sur les fontes3
Quelques propriétés sur les fontes

  • font-weight

    • précise le niveau de gras de la police :

      • normal,

      • bold,

      • 100, 200, ...

  • font-style

    • précise le style de fonte :

      • normal

      • italic

      • oblic

exemple : afficher du texte en italique et en gras

font-weight : bold ;

font-style : italic ;


Quelques propri t s sur les fontes4
Quelques propriétés sur les fontes

  • font-variant

    • utilise une fonte normale ou en petite capitale :

      • normal,

      • small-caps.

  • font

    • raccourci permettant de tout spécifier

exemple : utilisation du raccourci font

font : italic bold 1em cursive ;


Quelques propri t s sur les textes
Quelques propriétés sur les textes

  • text-align

    • permet de gérer l’alignement du texte

      • right,

      • left,

      • center,

      • justify.

  • text-decoration

    • comment doit apparaître le texte

      • none (aucun)

      • underline (souligné)

      • overline (surligné)

      • line-through (barré)

      • blink (clignotant)


Quelques propri t s sur les textes1
Quelques propriétés sur les textes

  • text-transformation

    • on peut appliquer des transformations au texte

      • capitalize (1ere lettre de chaque mot en majuscule)

      • uppercase (transformer en majuscule)

      • lowercase (transformer en minuscule)

      • none (aucune)

  • text-indent

    • Indentation de début de paragraphe

exemple :

P {

text-transformation : lowercase ;

text-indent : 1em;

}


Ah oui au fait
Ah oui, au fait …

h1 {text-decoration : underline }

h2 {text-decoration : underline }

h3 {text-decoration : underline }

h4 {text-decoration : underline }

h5 {text-decoration : underline }

peut s’écrire …

h1,h2,h3,h4,h5,h6 {text-decoration : underline }


2 me cascade
2ème Cascade

styles définis en cascade

Imbrication des éléments

<html>

<head>

</head>

<body>

<h3>Un titre</h3>

la, un petit texte exemple, mais sans paragraphe

<p>La, un autre petit texte, <strong>mais qui fait parti d’un paragraphe</strong></p>

</body>

</html>

<html>

<head>

<body>

<h3>

<p>

<strong>

les styles non redéfinis sont répercutés dans tous les éléments contenus

D.O.M : Document Object Model


Changer le style
Changer le style

Comme dit précédemment …

p {text-decoration : underline }

strong {text-decoration : underline }

peut s’écrire …

p,strong {text-decoration : underline }


Proc d s de mise en forme

Mais attention …

p strong {text-decoration : underline }

possède un autre sens :

Le style n’est appliqué à strong que s’il est imbriqué dans une balise p

Exemple …

p>strong {color : red}

<p>La couleur<strong>rouge</strong>

est appliquée ici,

mais aussi <del><strong>la</strong></del></p>

<strong>Mais pas la</strong>

<p>

<strong>

<del>

<strong>


Proc d s de mise en forme

De même …

p>strong {text-decoration : underline }

Le style n’est appliqué à strong que s’il est descendant direct de p

Exemple …

p>strong {color : red}

<p>La couleur<strong>rouge</strong>

est appliquée ici,

mais pas <del><strong>la</strong></del></p>

<p>

<strong>

<del>

<strong>


Proc d s de mise en forme

De même …

p+strong {text-decoration : underline }

Le style n’est appliqué à strong que s’il suit immédiatement une balise p

Exemple …

p {text-indent : 1em}

p+p {text-indent : 0}

Le premier paragraphe d’un texte sera indenté,

mais pas les suivants


Pseudo l ments pseudo classes
Pseudo-éléments & Pseudo-classes


Les pseudo l ments
Les Pseudo-éléments

  • Un pseudo-élément est une caractéristique qui permet de rajouter du détail de style.

  • On reconnaît un pseudo-élément à l’utilisation de « : » dans la définition du style correspondant

  • Quelques exemples ?


Quelques pseudo l ments
Quelques pseudo-éléments

  • :first-letter

    • ne s’applique que sur la première lettre de l’ensemble

  • :first-line

    • ne s’applique que sur la première ligne de l’ensemble

On peut préciser (ou pas) à quel élément appliquer le pseudo-élément

P:first-letter { color : red; font-size : large };

:first-letter { color : red; font-size : large };


Les pseudo classe
Les Pseudo-classe

  • Une pseudo-classe est très similaire à un pseudo-élément.

  • On parle de pseudo-classe quand un objet peut avoir différents états

  • Un exemple ?


Les pseudo classe liens
Les Pseudo-classe liens

  • Un lien peu avoir plusieurs états

    • Visité

    • Actif

    • Pointé par la souris

  • Les pseudo-classes permettent de donner des styles différents à ces différentes classes de liens.


Proc d s de mise en forme

  • :link

    • s’applique à un lien actif (avant visite)

  • :visited

    • s’applique à un lien visité

  • :active

    • au moment ou le lien est activé

  • :hover

    • lorsque la souris est sur le lien

  • :focus

    • lorsque le focus est sur le lien (tabulation par exemple)


Des classes et des id
Des classes et des ID

(parce que s’il y a des pseudo-classes,

c’est bien qu’il doit y avoir des classes…)


Les classes
Les classes

(Où certains éléments veulent se la jouer différent…)

  • Et si certains types d’éléments devaient être affichés différemment ?

  • exemple : Le chapeau d’un article

Ceci est le premier paragraphe de l’article, qui nous sert de chapeau. C’est un paragraphe, on ne peut lui ôter ça, mais on aimerait bien pouvoir l’afficher différement, histoire que ça soit plus drôle.

Et puis ceci est un paragraphe tout ce qu’il y a de plus banal, rien de bien exaltant

Et celui-ci aussi est un autre paragraphe plutôt ennuyeux


Et bien c est possible
Et bien, c’est possible !

(Et c’est la classe !)

  • il existe un attribut class

  • Applicable à tous les éléments

  • permettant de spécifier un style particulier

<p class="chapeau">Ceci est le premier paragraphe de l’article, qui nous sert de chapeau. C’est un paragraphe, on ne peut lui ôter ça, mais on aimerait bien pouvoir l’afficher différement, histoire que ça soit plus drôle.</p>

<p> Et puis ceci est un paragraphe tout ce qu’il y a de plus banal, rien de bien exaltant</p>

<p> Et celui-ci aussi est un autre paragraphe plutôt ennuyeux</p>


Et du cot du style
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 }


Et du cot du style1
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 }

Encore une fois, le style cascade de la classe la plus générale vers une classe particulière

Il est possible de cumuler classe et pseudo-classe

on peut définir une classe sans préciser à quel élément elle s’applique


Les identifiants
Les identifiants

(Appelez moi par mon nom !)

  • On peut définir un identifiant unique pour un élément

  • On peut associer un style à cet identifiant

<p id="chapeau1">Ceci est le premier paragraphe de l’article, qui nous sert de chapeau. C’est un paragraphe, on ne peut lui ôter ça, mais on aimerait bien pouvoir l’afficher différement, histoire que ça soit plus drôle.</p>

<p> Et puis ceci est un paragraphe tout ce qu’il y a de plus banal, rien de bien exaltant</p>

<p> Et celui-ci aussi est un autre paragraphe plutôt ennuyeux</p>


Et du cot du style2
et du coté du style…

P {

color : black;

background-color : white;

}

P#chapeau1 {

font-size : smaller ;

text-align : justify;

}


Et du cot du style3
et du coté du style…

P {

color : black;

background-color : white;

}

P#chapeau1 {

font-size : smaller ;

text-align : justify;

}

. pour classe

# pour identifiant


Mais alors classe ou identifiant
Mais alors, classe ou identifiant ?

  • Un identifiant doit être unique

    • Utilisé pour se référer à un élément particulier

    • informations de position (on y vient, patience…)

  • Une classe peut servir plusieurs fois

    • on peut y mettre les propriétés de style

  • Il est possible de cumuler class et id



Les types de blocs
Les types de blocs

<h3>Titre</h3>

<P>ceci est le premier paragraphe. <em>Cette phrase peut être très importante</em>, mais <strong>celle-ci l’est plus encore</strong></P><h3>Autre titre</h3><h4>titre (encore)</h4><h4>titre (toujours)</h4>

Titre

Ceci est le premier paragraphe

Cette phrase peut être très importante

Mais,

Celle-ci l’est plus encore

Autre titre

Titre (encore)

Titre (toujours)


Deux types d l ments
Deux types d’éléments

  • Les éléments « bloc »

    • Les éléments blocs s’empilent les uns sur les autres

    • Un élément bloc peut contenir d’autres éléments blocs

    • Un élément bloc peut contenir des éléments en ligne

    • exemples : p, h1, h2, h3, h4, h5, h6, div

  • Les éléments « en ligne »

    • Les éléments en ligne se placent les uns à coté des autres

    • Un élément en ligne peut contenir d’autres éléments en ligne

    • Un élément en ligne ne peut pas contenir d’éléments bloc.

    • exemples : em, strong, b, i, span


Deux types d l ments1
Deux types d’éléments

  • Les éléments « bloc »

    • Les éléments blocs s’empilent les uns sur les autres

    • Un élément bloc peut contenir d’autres éléments blocs

    • Un élément bloc peut contenir des éléments en ligne

    • exemples : p, h1, h2, h3, h4, h5, h6, div

  • Les éléments « en ligne »

    • Les éléments en ligne se placent les uns à coté des autres

    • Un élément en ligne peut contenir d’autres éléments en ligne

    • Un élément en ligne ne peut pas contenir d’éléments bloc.

    • exemples : em, strong, b, i, span


Div span
DIV & SPAN

  • Containers génériques.

  • <div> permet de structurer le document

  • <span> permet de changer la mise en page de quelques mots dans un texte

  • <div> est très utilisé pour la mise en page


Exemple d utilisation de div
exemple d’utilisation de DIV

<div id="menu" >

Ici, on peut mettre tout ce qui concerne les menus de navigation.

</div>

<div id="principal" >

Ici, c’est le contenu principal de la page (par exemple)

</div>

<div id ="pied_page" >

Et la, c’est le pied de page, ou on peut mettre les informations légales…

</div>


Les propri t s des boites
les propriétés des boites

(voyons ce qu’il y a en marge…)



Proc d s de mise en forme

prenons l’exemple de cette boite. Elle contient du texte, mais que peut-on dire de plus ?

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

propriété

margin


Proc d s de mise en forme

propriété mais que peut-on dire de plus ?

border

prenons l’exemple 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


Proc d s de mise en forme

propriété mais que peut-on dire de plus ?

padding

prenons l’exemple 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 s de bordure
propriétés de bordure mais que peut-on dire de plus ?

  • border-color

    • gère la couleur de la bordure

  • border-width

    • thin, medium, thick

    • taille spécifiée

  • border-style

    • None, hidden,

    • dotted, dashed, solid, double,

    • groove, ridge, inset, outset


Propri t s de bordure suite
propriétés de bordure (suite) mais que peut-on dire de plus ?

  • on peut aussi régler individuellement les différentes bordures

  • border-top-width

  • border-bottom-width

  • border-left-width

  • border-right-width

  • Comme pour font, il existe un raccourci border


Taille des marges
taille des marges mais que peut-on dire de plus ?

  • margin

    • permet de régler la taille de la marge

      • margin-top

      • margin-bottom

      • margin-left

      • margin-right

  • padding

    • permet de régler la taille du padding

      • padding-top

      • padding-bottom

      • padding-left

      • padding-right


Des marges automatiques
Des marges automatiques mais que peut-on dire de plus ?

  • margin : auto

    • permet normalement de régler les marges au mieux pour centrer l’élément.

    • Malheureuseument, Internet Explorer n’est pas de cet avis


Positionnement c s s
Positionnement C.S.S mais que peut-on dire de plus ?

(Qu’est ce qu’on en fait de toutes ces boites ?)


Les propri t s de dimension
Les propriétés de dimension mais que peut-on dire de plus ?

  • width

    • Permet de spécifier la largeur d’une boite

  • height

    • Permet de spécifier la hauteur d’une boite

height

width


Les propri t s de placement
Les propriétés de placement mais que peut-on dire de plus ?

  • position

    • absolute Le bloc est placé de façon absolue

    • relative Le bloc est placé relativement à la position qu’il aurait du occuper

    • static placement par défaut

    • fixed le bloc est épinglé à l’écran (ne fonctionne pas sous Internet Explorer)


Les propri t s de placement 2
Les propriétés de placement (2) mais que peut-on dire de plus ?

  • position

    • absolute Le bloc est placé de façon absolue

      pour les positions absolute et relative, il existe deux propriétés

    • top

    • left

      qui permettent de spécifier où doit se placer le coin haut gauche du bloc

top, left

div#toto {

position : absolute;

top : 50% ;

left : 100px;

}

height

width


Le placement flottant
Le placement flottant mais que peut-on dire de plus ?

  • la propriété float peut prendre trois valeurs

    • none

    • left

    • right

  • cette propriété indique comment le bloc flotte par rapport aux suivants.


Proc d s de mise en forme

bla bla bla bla bla bla bla bla bla bla mais que peut-on dire de plus ?

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 bla bla bla bla bla bla bla bla

toto

bloc flottant

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 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 bla bla bla bla bla bla

div#toto { float : right }


Proc d s de mise en forme

bloc flottant mais que peut-on dire de plus ?

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 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

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 bla bla bla bla bla bla bla bla bla bla

bla bla bla bla bla bla bla bla bla bla bla bla bla bla

div#toto { float : left }


Proc d s de mise en forme

bloc non flottant mais que peut-on dire de plus ?

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 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 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 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

div#toto { float : none }


Visualisation c s s
Visualisation C.S.S mais que peut-on dire de plus ?

(Un autre point de vue ?)


La propri t visibility
La propriété mais que peut-on dire de plus ?visibility

  • visibility peut prendre deux valeurs :

    • visible

    • hidden

  • un élement hidden devient invisible, mais la place qu’il occupe à l’écran est tout de même réservée.


Propri t visibility visible
propriété visibility : mais que peut-on dire de plus ?visible

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 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 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 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 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 bla bla bla bla bla


Propri t visibility hidden
propriété visibility : mais que peut-on dire de plus ?hidden

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 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 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 bla bla bla

bla bla bla bla bla bla bla bla bla bla bla


La propri t display
La propriété mais que peut-on dire de plus ?display

  • Displayindique le comportement que doit adopter l’élément

    • none

    • inline

    • block

    • list-item

    • ...

  • none indique qu’il ne faut pas réserver de la place pour cet élément


Javascript un peu d interactivit
Javascript : mais que peut-on dire de plus ?Un peu d’interactivité


Javascript c est quoi
Javascript, c’est quoi ? mais que peut-on dire de plus ?

  • Langage de script exécuté coté client

  • Son fonctionnement dépend du navigateur

  • Problèmes de portabilité

  • Mais, Javascript reste un moyen simple d’ajouter un peu d’intéractivité à un site web.


Script dans le head
Script dans le <HEAD> mais que peut-on dire de plus ?

<head>

<script type="text/javascript"> <!–

/* Votre script ici */

// -->

</script>

</head>


Script dans le head1
Script dans le <HEAD> mais que peut-on dire de plus ?

<head>

<script type="text/javascript"> <!–

/* Votre script ici */

// -->

</script>

</head>

Balise précisant l’utilisation d’un script


Script dans le head2
Script dans le <HEAD> mais que peut-on dire de plus ?

<head>

<script type="text/javascript"> <!–

/* Votre script ici */

// -->

</script>

</head>

Type du script utilisé

(ici, javascript)


Script dans le head3
Script dans le <HEAD> mais que peut-on dire de plus ?

<head>

<script type="text/javascript"> <!–

/* Votre script ici */

// -->

</script>

</head>

Début et fin d’un bloc de commentaire HTML

Marque de commentaire en javascript


Script dans le head4
Script dans le <HEAD> mais que peut-on dire de plus ?

<head>

<script type="text/javascript"> <!–

/* Votre script ici */

// -->

</script>

</head>

Corps du script HTML


Script dans un fichier s par
Script dans un fichier séparé mais que peut-on dire de plus ?

<head>

<script

type="text/javascript" src="monscript.js">

</script>

</head>

Et c’est le fichier monscript.js qui contiendra le code javascript


Un premier script simple
Un premier script simple… mais que peut-on dire de plus ?

window.status = "Stage d'initiation à la création de pages web";

  • Le script peut être écrit

    • Dans l’entête de la page, dans la section <head>, comme vu précédemment.

    • Dans un fichier séparé

    • (par exemple "premier_script.js")


Les fonctions en javascript
Les fonctions en javascript mais que peut-on dire de plus ?

function affiche(texte)

{

window.status = texte;

}


Les fonctions en javascript1
Les fonctions en javascript mais que peut-on dire de plus ?

Mot-clé function

(ça s’invente pas…)

function affiche(texte)

{

window.status = texte;

}


Les fonctions en javascript2
Les fonctions en javascript mais que peut-on dire de plus ?

Nom de la fonction

function affiche(texte)

{

window.status = texte;

}


Les fonctions en javascript3
Les fonctions en javascript mais que peut-on dire de plus ?

Paramètre(s) de la fonction

function affiche(texte)

{

window.status = texte;

}


Les fonctions en javascript4
Les fonctions en javascript mais que peut-on dire de plus ?

Paramètre(s) de la fonction

function affiche(texte)

{

window.status = texte;

}


Les gestionnaires d v nements
Les gestionnaires d’évènements mais que peut-on dire de plus ?

Où que fait-on de nos fonctions…

  • On peut associer un comportement à certaines balises, via un gestionnaire d’évènement.

  • onMouseOver

  • onMouseOut

  • onClick

  • onLoad (appliqué à BODY)


Ev nements fonctions
Evènements & fonctions mais que peut-on dire de plus ?

  • Le gestionnaire d’évènement peut exécuter une fonction javascript

Il existe une balise HTML pour les

<dfn onMouseOver="affiche("un texte");">

onMouseOut="affiche("");">

définitions</dfn>


Un exemple un peu plus complexe
Un exemple un peu plus complexe mais que peut-on dire de plus ?

  • 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";

}


Pendant ce temps dans la page html
Pendant ce temps, dans la page HTML… mais que peut-on dire de plus ?

Prenons l’exemple d’une

<dfn onMouseOver="afficheElement(mon_element);" onMouseOver="cacheElement(mon_element);">

définition</dfn>

qui va faire apparaître un autre cadre.

<div id="mon_element" >

Ici, tout ce que je veux afficher ou masquer…

</div>


Liens utiles
Liens utiles mais que peut-on dire de plus ?

  • Il existe de nombreux scripts déjà prêts

  • http://www.editeurjavascript.com/ - Editeur Javascript

  • http://www.toutjavascript.com/ - Tout Javascript