Mise en forme et langage CSS

1

2

rappel
► <1991

: réseau internet et services ftp, email, telnet -> pas de pages web ► 1991 : html (tim berners lee au CERN) ► 1993 : mosaic, premier navigateur web graphique, ancêtre de netscape

3

évolution
► 1994

: applets java (programmes intégrés aux pages web) ► nécessite un plug-in (logiciel intégré au navigateur)

self-access

4

évolution
► applets

java

 neige.htm

fichiers sur serveur

5

évolution
► applets

java :programmes interactifs

The Geometry Applet manipula math

6

évolution
► 1995

web (interactions page/visiteur, animations,

: javascript dynamise les pages

menus dynamiques).  le code javascript peut être intégré à la page html ou situé dans un fichier séparé (comme java)  exemple : un puzzle interactif

Cliquer sur une image, puis sur une case vide (ciel) pour la déplacer

7

évolution
► 1996

: langage de mise en forme CSS1 (cascading sheets style) ► 2000 : implémentation du CSS1 sur Internet Explorer

8

évolution
► 1996

: Macromedia Flash (adobe depuis 2000)  même principe que java (langage de programmation : actionscript)  orienté multimedia (images vectorielles)  possibilité de faire un site complet uniquement avec flash  nécessite un plug-in  éditeur payant pour créer des animations flash  fichiers assez lourds (longs à télécharger)
►projets

stage (diadoc)

9

► <1995

: :

évolution

 créateurs de site = scientifiques, informaticiens
► 19952000

 maquettistes, infographistes transfèrent les compétences issues du monde de l'édition papier
► 2000

2005 :

 réaction par rapport aux excès de certains sites graphiques  théorisation de l'ergonomie des sites web : web usability ("utilisabilité" ou "ergonomie")

► 2005

coexistence des tendances selon publics et usages (commerce, institutions, art, blog ..)

:

10

évolution
► 2005

: Ajax

 utisation de technologies existantes : javascript, DOM (modèle d'objets du navigateur)  utisation de XMLHttpRequest : objet du DOM créé à l'origine par Microsoft pour Internet Explorer

► Exemples

:

 Complétion automatique de formulaire quasi instantanée (le texte est chargé par XMLHttpRequest )  Menus plus rapides (seuls les textes sont chargés, pas la la page html complète).  exemples du cours\ajax (ouvrir les exemples avec Firefox ..)  http://www.exemple-ajax.com/

Langage CSS
Cascading style sheets

12

HTML et CSS
►Pour

maîtriser l’aspect final à l’écran on utilise un autre langage que le HTML: le langage CSS ►version actuelle : CSS2
 CSS = Cascading Style Sheets = feuilles de style en cascade
►traduction

officielle des spécifications de référence :
http://www.yoyodesign.org/doc/w3c/css2/cover.html

13

HTML et CSS
►Exemple
par tableau)

d'un site sans css ni mise en forme (mise en page

14

HTML et CSS
► On

veut obtenir quelque chose comme

L'ensemble des styles de cette page est stockée dans un fichier musee.css

15

HTML et CSS

Analyse avec IE developer toolbar (module gratuit pour IE et Firefox) : on récupère le code couleur du fond de la page web (propriété de la balise body)

16

HTML et CSS

On applique cette couleur aux trois pages (index.htm, expos.htm, amis.htm)
Avec Dreamweaver

17

HTML et CSS

Le code html est modifié

Il faut coller ce code dans toutes les pages du site

18

HTML et CSS

Même chose pour le fond du tableau
IE developer Toobar

Dreamweaver

19

HTML et CSS

Avec IE dev. Toolbar on peut obtenir toutes les indications de style provenant de la feuille de style et concernant un élément donné de la page

Clic/droit puis "trace style"

Padding = écart entre le contenu et le bord intérieur (du tableau)

20

HTML et CSS

Padding = remplissage (vocabulaire Dreamweaver)

21

HTML et CSS

Police de caractères
IE developer Toobar

Dreamweaver

22

HTML et CSS

Code html (balise FONT)
Notepad++

23

HTML et CSS
► ► ►

Comment modifier toutes les polices de caractères de la page index.htm en une seule opération ? Comment appliquer ces modifications automatiquement aux autres pages ? Réponses (imparfaites) :
 En utilisant l'outil de recherche/remplacement automatique de Dreamweaver sur l'ensemble du site (pas toujours facile)  En utilisant un logiciel de recherche/remplacement automatique qui peut travailler avec plusieurs fichiers texte.

Bonne réponse: utiliser une feuille de style

24

HTML et CSS

Feuille de style musee.css

25

HTML et CSS

Feuille de style musee.css

HTML et CSS
CSS:
►Trois

26

méthodes d'application de style

 ajout d'un attribut "style" dans une balise donnée  ajout d'une section <style> au début du document html : s'applique aux balises du document courant  ajout d'une feuille de style externe (monstyle.css) liée à une ou plusieurs pages html

HTML et CSS
donnée
►attribut

27

"style" dans une balise

<BODY> <H1 style="color:blue">La page personnelle de Bach</H1> <P >Jean-Sébastien Bach était un compositeur prolifique. ne s'applique qu'à cette </BODY> section H1 exemples du cours\trois méthodes pour style\css dans ba

HTML et CSS
donnée
►attribut

28

"style" dans une balise

Exemple impossible à reproduire sans CSS (CSS3 text module)

<H1 style="writing-mode:tb-rl">La page personnelle de Bach<H1>

exemples du cours\trois méthodes pour style\css dans ba ne fonctionne pas avec Firefox

HTML et CSS
<style> s'appliquant aux balises du document courant <HEAD>
<STYLE type="text/css"> H1 { color: blue } </STYLE> L'indication de style porte sur tous les titres de niveau 1 (Heading 1) de la page html
►section

29

</HEAD> <BODY> <H1>La page personnelle de Bach</H1>

HTML et CSS
de style externe (monstyle.css) liée à une ou plusieurs pages html.
<head> <title>page liée à monstyle.css </title> <link href="monstyle.css" rel="stylesheet" type="text/css"> </head>

30

►feuille

exemples du cours\troisindique que cette page web utilise les feu méthodes pour style\css avec styles du fichier monstyle.css

HTML et CSS
de style externe (monstyle.css) liée à une ou plusieurs pages web. sélecteur (ici une balise)
body { background-color: #FFFFCC; font-family: Verdana, Arial, Helvetica, sans-serif; valeur font-size: 12px; propriété line-height: 24px; color: #336699; } a{ font-size: 11px; color: #336600; }

31

►feuille

32

HTML et CSS Pour appliquer un style ...

.... à tous les éléments de la page:

le sélecteur universel * agit sur tous les éléments HTML. Pour définir par exemple une couleur rouge par défaut : * { color: #ff0000; } ;

... à toutes les sections correspondant à une balise donnée :
p { color: #0000ff; } ; le contenu de toutes les balises <p> sera bleu, sauf si une autre couleur leur est attribuée par ailleurs de façon plus spécifique (class ou id, voir plus loin)

33

HTML et CSS

... à certaines élément portant un attribut "class=...." :  (code css) p.vert { color: #008000; }
  le contenu de toutes les balises (code html) <p class="vert"> sera vert. Le contenu des autres balises <p> restera bleu (si p { color: #0000ff; } est présent)

34

HTML et CSS

à une instance unique (dans la page html) d'un élément portant un attribut du type "id=..."  p#vert { color: #008000; } ;
   le contenu de la seule balise <p id="vert"> sera vert. Le contenu des autres balises <p> restera bleu ; Une seule balise <p id="vert"> par page html

35

HTML et CSS
►Héritage

:

body { background-color: #FFFFCC; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 24px; la balise <a> est dans la section color: #336699; <body>. Elle en hérite le style : } couleur, police, ... a{ font-size: 11px; color: #336600; }

sauf pour font-size et color qui corrigent les propriétés de body.

36

HTML et CSS

(CSS = cascading sheets style)

ordre de priorité dans la "cascade"
  L'auteur: produit des feuilles de style pour un document source. Prioritaire sur ... ... l'utilisateur: peut modifier la taille des caractères, la couleur de fond par défaut (=couleur des fenêtres windows par ex.), l'affichage ou non de certains éléments (images). Prioritaire sur ... ... l'agent utilisateur: (= navigateur

37

HTML et CSS

Résumé :
Les règles des feuilles de style de l'auteur ont, par défaut, plus de poids que celles de l'utilisateur. Les règles d'un auteur et d'un utilisateur sont prioritaires sur celles de la feuille de style par défaut de l'agent utilisateur. Les feuilles de style importées suivent aussi la cascade, leur poids dépendant de leur ordre d'importation. (c'est la dernière qui l'emporte)

exemple détaillé dans le tutoriel en ligne : web css.doc

CSS : analyser, réutiliser, adapter

38

39

le positionnement CSS
►remplace

le positionnement par les tableaux html ►garde la structure logique des balises html contrairement aux tableaux html. ►mise en page "liquide" (liquid layout), absolue ou fixe. ►plus difficile à maîtriser que les tableaux html ►différence entre les navigateurs  css hacks.

40

le positionnement CSS
►mise

en page "liquide" (liquid layout) :

boîte flottante (le texte coule autour de la boîte) ou ... boîte à positionnement relatif (la position s'adapte à la taille de la fenêtre) boîte à positionnement absolu : position fixe par rapport au coin supérieur gauche de page affichée fenêtre, ou ... boîte à positionnement fixe par

►mise

en page fixe

41

le positionnement CSS
le modèle des boîtes : les boîtes en bloc ►sauf mention contraire :
 elles sont alignées en succession verticale elles occupent la largeur de la fenêtre

42

le positionnement CSS
le modèle des boîtes : les boîtes en bloc

code html : <p class="jaune">bo&icirc;te jaune</p> <p class="verte">bo&icirc;te verte</p>

43

le positionnement CSS
principales balises générant de boîtes en bloc :
►l'élément

générique div  ►les titres h1, h2, h3, h4, h5, h6  ►le paragraphe p ► Les listes et éléments de liste ul, ol, li, dl,dd

44

le positionnement CSS
le modèle des boîtes : les boîtes en ligne ►sauf mention contraire :
elles se succèdent horizontalement elles occupent la largeur de leur contenu

45

le positionnement CSS
le modèle des boîtes : les boîtes en ligne

code html : <span class="jaune">section span </span> <a class="verte">lien hypertexte</a> <p class="rouge">paragraphe</p>

46

le positionnement CSS
principales balises générant des boîtes en ligne:
►l'élément

générique span ; ►le lien hypertexte a ; ►L'image img ; ►les ornements :
u (underline), b (bold), s (strong) i (italic) em (emphasize)

47

le positionnement CSS
les dimensions des boîtes
(http://www.brainjar.com/css/positioning/)

48

le positionnement CSS
les dimensions des boites
(traduction officielle du w3C :
http://www.yoyodesign.org/doc/w3c/css2/box.html)

49

le positionnement CSS
les dimensions des boites

50

le positionnement CSS
.jaune { background-color: #FFFF66; height: 20px; border: 5px dashed #006699; margin: 30px; padding: 50px; } <span class="jaune">section span </span>

51

le positionnement CSS
.verte { background-color: #00CC99; height: 30px; width: 200px; margin: 20px; padding: 20px;

} <a class="verte">lien hypertexte</a>

52

le positionnement CSS
.rouge { background-color: #FF3300; height: 50px; width: 100px; border: 30px solid #CCCC66; padding: 30px; } <p class="rouge">paragraphe</p>

53

le positionnement CSS
Positionnement relatif : la boîte est décalée par rapport à la place qu'elle aurait occupée dans le flux normal #verte { background-color: #00CC99; margin: 10px; padding: 10px; position: relative; top: 10px; } <span class="jaune">jaune</span> <span id="verte">vert</span> <span class="jaune">jaune</span>

54

le positionnement CSS
boîte flottante :
►la

boîte flottante est décalée complétement à gauche (ou à droite) sur sa ligne ►les boîtes suivantes "s'écoulent" autour de la boite flottante

55

le positionnement CSS
boîte flottante : code html <style> #maboîte { float: left; } </style> <img id="maboîte" src="rose.jpg" width="200" height="150"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus suscipit nisl. Sed imperdiet
pour aller plus loin :
http://openweb.eu.org/articles/initiation_float/ ►http://www.brainjar.com/css/positioning/

56

le positionnement CSS
positionnement absolu : le bloc est positionné par rapport au coin supérieur gauche de la fenêtre

57

le positionnement CSS
codes css (positionnement absolu)
#maboîte { position: absolute; left: 387px; top: 59px; }

code html
<img id="maboîte" src="rose.jpg" width="200" height="150">

58

le positionnement CSS
code css
#p1 { position: absolute; left: 51px; top: 62px; width: 313px; }

code html
<p id="p1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus suscipit nisl. Sed imp (...)

59

le positionnement CSS
code css
#p2 { position: absolute; width: 543px; height: 70px; left: 50px; top: 222px; }

code html
<p id="p2">Donec at velit vel purus (...)

60

HTML et CSS
Modification du style d'une balise au survol d'un texte à l'aide de javascript :
►on

crée une section <div> avec les attributs :

 id="masection"  style="visibility:hidden ...".
►Le

texte de la section <div> est donc invisible à l'ouverture de la page web. ► Dans une balise d'ancre (<A>) on place un code javascript qui rend visible la section <div> "masection" au survol de la souris et la rend invisible quand la souris quitte le lien.
►remarque

: un éditeur comme Dreamweaver peut créer le code automatiquement (création de "comportements" Dreamweaver). Le code généré a une meilleure compatibilité avec les navigateurs.

61

HTML et CSS
Modification du style d'une balise au survol d'un texte à l'aide de javascript :

<a href="#" onMouseOver="javascript: masection.style.visibility='visible' " onMouseOut="javascript : masection.style.visibility='hidden' ">L1</a> <div id="masection" style="visibility:hidden; position:absolute; width:88px; height:65px; zindex:1; left: 78px; top: 33px;">Première année de Licence dans le système LMD</div> ►exemples du cours\javascript survol d'un lien\in

62

HTML et CSS
Technique complémentaire : modification du contenu de la balise DIV par code javascript

<p onmouseover="définition.innerText='langag e de description d \'aspect'; définition.style.visibility='visible'" onmouseout="définition.style.visibility='hid den'">CSS</p> ►exemples du cours\effet de survol avec position

► Exercice

mise en page par positionnement css
 tutoriel en ligne "web utilisation du design d'un blog.doc"

63

de réutilisation du design html/css créé par un moteur de blog (blogger) :

Sign up to vote on this title
UsefulNot useful