Introduction Aux Systèmes dInformation et Multimédia T. Bourdeaudhuy S. Collart-Dutilleul P. Kubiak IG 2 I - Saison 2006/2007 (X)HTML / Pages Web Statiques.

Présentation au sujet: "Introduction Aux Systèmes dInformation et Multimédia T. Bourdeaudhuy S. Collart-Dutilleul P. Kubiak IG 2 I - Saison 2006/2007 (X)HTML / Pages Web Statiques."— Transcription de la présentation:

1 Introduction Aux Systèmes dInformation et Multimédia T. Bourdeaudhuy S. Collart-Dutilleul P. Kubiak IG 2 I - Saison 2006/2007 (X)HTML / Pages Web Statiques Timothy Berners-Lee

2 Feuilles de Style en Cascade

3 ISIM 1 – Pages Web Statiques 3T. Bourdeaudhuy – IG 2 I Saison 2006-2007 TEST QCM en début de séance 15 minutes

4 Introduction

5 ISIM 1 – Pages Web Statiques 5T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Kezako ? HTML = outil de structuration de documents –On indique le sens des éléments (titre, chapitre, citation, …) –Le HTML permet aussi de spécifier une mise en forme, mais : –ce nest pas son objectif initial –Le rendu sera différent suivant les navigateurs CSS1 (W3C/1996) = outil de mise en forme de documents –Fichier texte séparé (1 seul téléchargement requis) –Spécification de la forme des éléments (un titre est centré en haut de la page, une citation est en italique, …) CSS2 (W3C/1998) = –CSS1 + formatage en fonction du périphérique daffichage (pda, imprimante,…)

6 ISIM 1 – Pages Web Statiques 6T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Ressources Recommandations W3C –http://www.w3.org/TR/ –Traduction FR : http://www.w3.org/2003/03/Translations/byLanguage?language=frhttp://www.w3.org/2003/03/Translations/byLanguage?language=fr Tutoriels –http://tecfa.unige.ch/guides/css/pointers.htmlhttp://tecfa.unige.ch/guides/css/pointers.html –http://fr.selfhtml.org/css/proprietes/index.htmhttp://fr.selfhtml.org/css/proprietes/index.htm Editeurs –http://www.w3.org/Style/CSS/#editorshttp://www.w3.org/Style/CSS/#editors Validation des feuilles de style –http://jigsaw.w3.org/css-validator/http://jigsaw.w3.org/css-validator/ Implementation CSS dans IE et Mozilla –http://www.quirksmode.org/css/contents.htmlhttp://www.quirksmode.org/css/contents.html Exemple pratique –Site CSS ZEN GARDEN http://www.csszengarden.com/tr/francais/http://www.csszengarden.com/tr/francais/

7 ISIM 1 – Pages Web Statiques 7T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Différents types de style Style en ligne –Utilisation dun style pour une étiquette donnée à lintérieur même du –document –Ecriture dans létiquette même Style de document –Utilisation de styles pour toutes les étiquettes dun document donné –Définition au début dun document Style externe (Feuille de style) –Définition dans un fichier à part : utilisable par plusieurs documents –Extension.css

8 ISIM 1 – Pages Web Statiques 8T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Principe de base Une feuille de style est composée dun ensemble de règles qui sappliquent à un ou plusieurs éléments Chaque ligne est composée de –un sélecteur : sur quel(s) élément(s) sapplique la règle –des propriétés : conditions du rendu physique (style, police, … ) –des valeurs : correspondent aux valeurs prises par les propriétés Le nombre de couples propriété – valeur est illimité Exemple : b { color : red; font-size : 14p } /* Commentaires */

9 ISIM 1 – Pages Web Statiques 9T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Style en ligne titre 1 A éviter : ne respecte pas la séparation contenu/contenant

10 ISIM 1 – Pages Web Statiques 10T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Style interne h1 {font-family:helvetica; font-size:14px; font-style:italic; } Titre 1 Titre 2 Déclaration dans

11 ISIM 1 – Pages Web Statiques 11T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Style externe Titre 1 Titre 2 Dans ce fichier : uniquement des déclations CSS

12 ISIM 1 – Pages Web Statiques 12T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Priorités Cf. « Cascading » style sheets Plusieurs spécifications peuvent sappliquer à un même élément Dans ce cas, les priorités sont dans lordre croissant : –Style externe < style interne < style en ligne Ne pas écrire de texte directement au niveau body –Ecrire tout texte au moins dans un paragraphe Il existe des balises spécifiques pour utiliser les feuilles de style –div : peut contenir les autres balises –span : changer une séquence de caractères à lintérieur dune balise

13 ISIM 1 – Pages Web Statiques 13T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Classes Dans le cas ou les balises dun même type ne sont pas toutes concernées par le style –Faire des styles en ligne : difficulté de maintenance –Déclarer des sous classes de la balise Classes dune balise –Déclaration nom.classe {…} –Utilisation Exemple h1.section {color:red;} …

14 ISIM 1 – Pages Web Statiques 14T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Identificateur Unique Dans le cas ou les classes ne sont pas suffisantes Identificateur unique : –Déclaration #id {…} –Utilisation Exemple #style1 {color:green;} Titre 1 Titre 2

15 ISIM 1 – Pages Web Statiques 15T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Héritage de propriétés Si elles ne sont pas redéfinies, les propriétés qui sappliquent à une balise sappliquent également aux sous-classes.class et sous-éléments.id de cette balise Ex : – h1 { color:red} – h1.test {text-decoration:underline} Une balise utilisée dans une balise hérite de certaines de ses propriétés Ex : –body {color:red} Parfois : prise en compte de lordre des spécifications

16 ISIM 1 – Pages Web Statiques 16T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Pseudo-classes a:linkLien non visité a:visitedLien visité a:activeLien actif a:hoverPassage de la souris sur le lien a:focusLien sélectionné par tabulation :first-line, :first-letter, :first-child –Pseudo-formats pour les paragraphes :before, :after –Pseudo-formats pour le texte généré automatiquement –Numérotation automatique Ex : –td.Prix:before { content:"Prix: "; } –td.Prix:after { content:",- EUR"; } –td.Produit:after { content:" "attr(title); }

17 ISIM 1 – Pages Web Statiques 17T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Sélecteurs Sélecteur universel : * * {border: 1px red solid} Sélecteur d'élément : E h1 {color: yellow; font-weight: bold} Plusieurs sélecteurs E1, E2, E3 h1,h2 {color: yellow; font-weight: bold} Sélecteur d'identificateur : #id #myname {color: yellow; font-weight: bold} Sélecteurs de classe :.class E.class.header {background-color: black; color: white} Pseudo-classes : E:link E:visited E:active E:hover E:focus a:link {color: red}

18 ISIM 1 – Pages Web Statiques 18T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Sélecteurs CSS2 Sélecteur de descendance : E F (descendant) E > F (enfant direct) E:first-child ul ul {font-size: small} Sélecteur de voisinage : E + F (éléments frères) div + p {margin-top: 2em} Sélecteur d'attribut : E[att] E[att="val"] E[att~="val"] note[severity="warning"] {color: red; font-size: 16pt}

19 ISIM 1 – Pages Web Statiques 19T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Unités Les unités relatives : –em: la valeur du 'font-size' (largeur du m) –ex: la hauteur du x dans la fonte –px: pixels, relatif à la définition de l'écran –%: pourcentage Les unités absolues : –in: inches -- vaut 2.54 centimètres –cm: centimètres –mm: millimètres –pt: points -- vaut 1/72ème de inch –pc: picas -- vaut 12 points

20 ISIM 1 – Pages Web Statiques 20T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Couleurs Il existe une liste de couleurs prédéfinies –aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow et orange Exemples : em {color: #ff0000} /* #rrvbb */ em {background-color: rgb(255,0,0)} /* intervalles entiers 0 - 255 */ em {background-color: rgb(100%, 0%, 0%)} /* intervalles réels 0.0% - 100.0% */

21 ISIM 1 – Pages Web Statiques 21T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Alignement et contrôle de paragraphe text-indent : longueur –retrait à la première ligne dun paragraphe line-height : longueur –interligne vertical-align : top, middle, bottom, baseline, sub, super, text-top, text-bottom –Alignement vertical text-align : left, center, right, justify –Alignement horizontal white-space : normal, pre, nowrap –Césure

22 ISIM 1 – Pages Web Statiques 22T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Background background-color : couleur –Transparent par défaut background-image:url([URI]) background-repeat :repeat, no-repeat, repeat-x, repeat-y background-attachement : scroll, fixed, background-position : position de larrière-plan –verticalement : top, center, bottom –horizontalement : left, center, right –verticalement ou horizontalement : longueur

23 ISIM 1 – Pages Web Statiques 23T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Texte font-family : 'helvetica', 'arial', ''verdana', 'times', 'courier' et/ou une famille générique 'serif', 'sans-serif', 'cursive', 'fantasy' et 'monospace'. font-style : valeurs 'normal', 'italic', 'oblique' font-variant : valeurs 'normal' ou 'small-caps' font-size : longueur, xx-small', 'x-small', 'small', 'medium', 'large', 'x-large', 'xx-large', smaller, larger font-weight : valeurs 'normal', 'bold', 'bolder', 'lighter', '100', '200', '300', '400', '500', '600', '700', '800', '900 font : ['font-style' 'font-variant' 'font-weight'] 'font-size' [ /'line-height'] 'font-family'

24 ISIM 1 – Pages Web Statiques 24T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Texte font-stretch : wider narrower condensed semi- condensed extra-condensed ultra-condensed expanded semi-expanded extra-expanded ultra-expanded normal word-spacing : longueur letter-spacing : longueur text-align : left, right, center, justify text-decoration : underline, line-through, overline, blink, none text-transform : uppercase, lowercase, capitalize text-shadow : couleur (ombrage)

25 ISIM 1 – Pages Web Statiques 25T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Boîtes À chaque élément du document est associée une boîte qui possède –des marges (margin) –une bordure (border) –du remplissage (padding) –un contenu (content) Des propriétés CSS contrôlent ces paramètres dans les quatre directions : –margintop', 'marginright', 'marginbottom','marginleft' et 'margin' –paddingtop', 'paddingright', 'paddingbottom', 'paddingleft' et 'padding

26 ISIM 1 – Pages Web Statiques 26T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Anatomie dune boîte

27 ISIM 1 – Pages Web Statiques 27T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Assemblage des boîtes Les boîtes des éléments successifs de la structure se juxtaposent avec fusion des marges verticales contiguës

28 ISIM 1 – Pages Web Statiques 28T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Bordures Épaisseur –border-top-width, border-right-width, border-bottom-width, border-left-width, border-width Couleur –border-top-color, border-right-color, border-bottom-color, border- left-color, border-color Style –border-top-style, border-right-style, border-bottom-style, border- left-style, border-style –Valeurs : none / hidden / dotted / dashed / solid / double / groove / ridge / inset / outset Raccourcis –border-top, border-bottom, border-right, border-left, border

29 ISIM 1 – Pages Web Statiques 29T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Listes & Tableaux list-style-type: circle, disc, square list-style-image: URL ou chemin list-style-position : inside ou outside caption-side –Position d'un titre de tableau table-layout –largeurs fixe/variable border-collapse –modèle de bordure border-spacing –Espace entre les bordures dans un tableau avec quadrillage empty-cells –Affichage ou non-affichage de cellules vides

30 ISIM 1 – Pages Web Statiques 30T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Curseurs Seule propriété pouvant être changée au niveau de la fenêtre daffichage –auto = curseur automatique (réglage normal). –default = curseur standard indépendant de la plate-forme. –crosshair = curseur de la forme d'une simple croix. –pointer = curseur de la forme d'une flèche. –move = curseur de la forme d'une croix signalant la possibilité de déplacer l'élément. –n-resize, ne-resize, e-resize, se-resize, s-resize, sw-resize, w-resize, nw- resize (nord, etc) –text = curseur sous une forme qui symbolise du texte normal. –wait = curseur sous la forme d'un symbole signalant l'attente. –help = curseur sous forme d'un symbole qui signale de l'aide pour l'élément. –url([fichier]) = curseur au choix, [fichier] doit être un graphique GIF ou JPG.

31 ISIM 1 – Pages Web Statiques 31T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Scrollbars scrollbar-base-color –couleur de base des barres de défilement scrollbar-3dlight-color –couleur pour les effets de relief (3D) scrollbar-arrow-color –couleur pour les pointeurs de défilement scrollbar-darkshadow-color –couleur pour les ombres scrollbar-face-color –couleur pour la surface scrollbar-highlight-color –couleur pour le bord haut et le bord gauche scrollbar-shadow-color –couleur pour le bord droit et le bord du bas scrollbar-track-color –couleur pour la barre de défilement non-cachée par le pointeur de défilement

32 ISIM 1 – Pages Web Statiques 32T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Positionnement Le positionnement est réalisé par la combinaison des règles suivantes : position définit la boîte bloc qui sert de repère (containing block) –'static' : positionnement normal –'relative' : par rapport au conteneur (décalages de la position static) –'absolute' : par rapport au conteneur du conteneur –'fixed' : par rapport à la fenêtre (pas de scrolling) left, right, top, bottom fixent un des bords de la boîte par rapport à la boîte racine. width, height, min-width max-width min-height max-height fixent les dimensions de la boîte Exemples : –http://tecfa.unige.ch/guides/css/ex/boxing1.htmlhttp://tecfa.unige.ch/guides/css/ex/boxing1.html –http://www.brainjar.com/css/positioning/http://www.brainjar.com/css/positioning/

33 ISIM 1 – Pages Web Statiques 33T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Positionnement overflow –Passage d'élément au contenu trop important direction : ltr, rtl –Sens de lecture (de gauche à droite ou droite à gauche) z-index : entier –Position de la couche en cas de superposition (max = devant) visibility : visible, hidden –Affichage ou non affichage avec réservation de place clip : haut droite bas gauche – Limiter le domaine d'affichage Display –Block : une nouvelle ligne est créée (P, DIV, TABLE) –Inline : pas de nouvelle ligne –None : pas daffichage –Dautres sont disponibles : list-item, table-xxx …

34 ISIM 1 – Pages Web Statiques 34T. Bourdeaudhuy – IG 2 I Saison 2006-2007 CSS2 : Media Types La présentation peut varier selon les média : –aural, braille, embossed, handheld, print, projection, screen, tty, tv Définition de feuilles alternatives selon les média : Persistante : Par défaut : Alternative : Il est également possible dutiliser @media print

35 Exercices

36 ISIM 1 – Pages Web Statiques 36T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Textes encadrés Un texte « encadre_a_droite » est un texte encadré dont la bordure droite est plus prononcé –Le fond sera gris, –La bordure droite noire, 5px –Autres bordures pointillées 1px –Utiliser une balise p en mode inline et block Attention à lordre des spécifications Utiliser cela pour tester les propriétés « margin » Comparer le résultat dans des navigateurs différents

37 ISIM 1 – Pages Web Statiques 37T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Arrière-plan Mettre le logo de lIG2I en image de fond –En haut à gauche –Positionnement absolu Deuxième version –Il ne bouge pas quand on scrolle Troisième version –Il se répète sur toute la page Tester en définissant limage comme fond de la balise body ou comme fond dune balise div bien placée –Comparer Firefox/IE6 : différences ? –Cf. http://www.quirksmode.org/css/contents.htmlhttp://www.quirksmode.org/css/contents.html

38 ISIM 1 – Pages Web Statiques 38T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Liens hypertextes « extraordinaires » Encadrés et allumés lorsque lon passe dessus –Changement de la casse –Texte en gras –Curseur différent Spécifiques pour les mails Rouge en cas de sélection par tabulation

39 ISIM 1 – Pages Web Statiques 39T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Images cliquables Reproduire le comportement des zones cliquable dimages à laide de css –Amélioration : Quand on passera sur une zone, elle sagrandira ! Comment faire ? –Un div a pour arrière plan limage complète –Plusieurs liens sont créés dans le –Leurs propriétés de taille les font se superposer à limage –Les pseudo-classes « hover » modifient les les arrières-plans des liens

40 ISIM 1 – Pages Web Statiques 40T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Structure de Navigation Transformer un ensemble de liens en un « menu » à gauche et en une « bannière » en haut –Utiliser une structure de liste Définir un format pour les actualités et le formulaire de recherche Définir un pied de page Définir trois feuilles de style –Principale –Flashy (couleurs vives) –Print (pour impression : ne pas afficher menus)

41 ISIM 1 – Pages Web Statiques 41T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Exercice pratique On fournit un texte brut Définir la sémantique des données Définir une feuille de style respectant la sémantique http://www.w3.org/Style/Examples/011/firstcss.fr.html http://bluerobot.com/web/layouts/index.html http://www.glish.com/css/

42 ISIM 1 – Pages Web Statiques 42T. Bourdeaudhuy – IG 2 I Saison 2006-2007 Crédits http://wam.inrialpes.fr/courses/CSSAmaya-Avr04

43 ISIM 1 – Pages Web Statiques 43T. Bourdeaudhuy – IG 2 I Saison 2006-2007 A ajouter CSS modulaires –@import Remplacer la structure tableau par autre chose Menu qui ne bouge pas avec la page