24 octobre 2012 Grégory Petit

Présentation au sujet: "24 octobre 2012 Grégory Petit"— Transcription de la présentation:

1 24 octobre 2012 Grégory Petit http://lrcm.com.umontreal.ca/greg/COM2580/

2 La semaine dernière… L’élément HTML Passage en revue des éléments Web essentiels

3 Et donc on fait quoi aujourd’hui? Les feuilles de styles, ça sert à quoi? Les règles CSS Gestion dans Dreamweaver Attributs de formatage

4 Les feuilles de styles, ça sert à quoi?

5 Les feuilles de styles On en a déjà parlé sans jamais expliquer ce que c’est. Elles permettent le formatage et la mise en page de la page Web. Le langage utilisé est le CSS : Cascading Style Sheets. Une feuille de style contient plusieurs règles CSS.

6 Dans un site Web Plusieurs fichiers HTML Contenu du site Un ou deux fichiers CSS Format et mise en page du site

7 Trois emplacements différents Dans un fichier CSS à part. À l’intérieur d’un fichier HTML. Dans l’éléments HTML.

8 Les règles CSS

9 Une règle CSS permet d’appliquer un formatage et une mise en page à plusieurs éléments Web du même type. Une règle CSS contient : Un ou plusieurs sélecteurs Un bloc CSS

10 Syntaxe selecteur(s) { bloc CSS } Exemple: h1 { margin: 10px 0 0 10px; padding: 0; font-size : 12px; }

11 Le sélecteur C’est ce qui permet de savoir à quels éléments s’applique la règle CSS. Exemple: h1 { Bloc CSS } Ici, la règle s’applique à tous les entêtes de premier niveau de la page Web. sélecteur

12 Le sélecteur Un sélecteur peut contenir une balise, une classe et un id Balise : a  s’applique à tous les liens Classe :.externe  s’applique à tous les éléments Web appartenant à la classe "externe" (class = "externe") Id : #pied-de-page  s’applique à tous les éléments ayant un id "pied-de-page » (id="pied-de-page")

13 Le sélecteur Le sélecteur peut combiner les 3 facteurs de la diapo précédente en même temps. a#pied-de-page.externe  s’applique à tous les liens ET ayant un attribut classe "externe" ET ayant un id "pied-de-page"  a#pied-de-page / a.externe / #pied-de-page.externe

14 Le sélecteur Le sélecteur peut aussi inclure les éléments Web parents. #menu a  s’applique à tous les liens qui s’ont à l’intérieur d’un élément Web ayant l’id "menu". Accueil On sépare les éléments de parenté avec un espace dans le sélecteur.

15 Ordre de priorité des sélecteurs Certains sélecteurs vont avoir la priorité sur d’autres Code HTML Accueil Un règle CSS ayant comme sélecteur #menu a l’emportera sur une règle CSS ayant comme sélecteur a

16 Ordre de priorité des sélecteurs Si une règle contient plus d’éléments parents qu’une autre, elle est prioritaire. Si 2 règles ont le même nombre d’éléments parents, on regarde le dernier élément et l’ordre de priorité est le suivant: tag#id.class #id.class tag#id #id tag.class.class tag

17 Le bloc CSS Il contient les différents attributs CSS qui vont s’appliquer aux éléments Web identifiés par le sélecteur. h1 { margin: 10px 0 0 10px; padding: 0; font-size : 12px; } Chacun de ses 3 attributs s’applique aux entêtes de niveau 1.

18 Le bloc CSS Syntaxe margin: 10px 0 0 10px; attribut valeur de l’attribut

19 Gestion dans Dreamweaver

20 Le fichier CSS Dreamweaver demande où créer le fichier CSS lors de la création de la première règle. Comme pour les images, il est conseillé de mettre les fichiers CSS dans un répertoire à part sous l’arborescence principale du site.

21 Ajouter une règle CSS Sélectionnez l’élément Web sur lequel vous voulez appliquer une règle

22 Ajouter une règle CSS

23 Type de sélecteur sélecteur simple sélecteur complexe

24 Sélecteur complexe

25

26 Nouveau fichier CSS

27 Fichier CSS existant Dans l’entête du fichier HTML, la liaison se fait comme suit: Dans Dreamweaver, il faut penser à mettre la nouvelle règle dans le fichier existant.

28 Bloc CSS  attributs

29 Boite d’outils Styles CSS Double-cliquez sur un sélecteur pour le modifier.

30 Code CSS

31 Trois emplacements différents Dans un fichier CSS à part. À l’intérieur d’un fichier HTML. Dans l’éléments HTML.

32 CSS à l’intérieur du fichier HTML (à éviter) Balise à l’intérieur de l’entête du fichier HTML …. h1 {color:red;} p {color:blue;} La même chose qu’on retrouve dans les fichiers CSS

33 CSS à l’intérieur d’un élément HTML (à éviter) Attribut "style" à l’intérieur de la balise d’ouverture de l’élément HTML Ceci est une entête! La même chose qu’on retrouve dans le bloc CSS d’une règle CSS

34 Attributs de formatage

35 Attributs CSS Vous pouvez les modifier directement dans la boite à outils Styles CSS. Ou alors en éditant le sélecteur en double- cliquant dessus

36 Catégorie Type

37 Catégorie Fond

38 Catégorie Bloc

39 Autres catégories Les autres catégories font parties de la mise en page. On verra donc ça la semaine prochaine.

40 Atelier

41 Vous devez me faire un truc qui ressemble à ça mais avec seulement 5 règles CSS

42 Des questions??? Merci de votre attention! A la semaine prochaine! gregory.petit@umontreal.ca http://lrcm.com.umontreal.ca/greg/COM2580/