31 octobre 2012 Grégory Petit

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

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

2 La semaine dernière … Les feuilles de styles, ça sert à quoi? Les règles CSS Gestion dans Dreamweaver Attributs de formatage

3 Et donc on fait quoi aujourdhui? Les éléments de mise en page Les attributs CSS de mise en page Lutilisation des tableaux Lutilisation des DIVS

4 Les éléments de mise en page

5 Que retrouve-t-on globalement dans les sites Web?

6 Type de contenu Des menus Des têtes de page Des pieds de page Des corps de page Des barres de recherche Des fils dAriane

7 Les menus Il y en a des fois partout! En haut À gauche À droite (à éviter!) Trop de menus tue le menu! Préférez une architecture simple avec un seul menu 2 menus grand max! Vous pouvez aussi utiliser des sous-menus!

8 Tête de page Cest toujours la même dans tous le site. Elle contient généralement : Un logo Le nom du site La chose/personne/entreprise présentée par le site Des infos basiques comme les moyens de contact Une barre de recherche …

9 Pied de page Il contient des fois un menu … à éviter! Sinon il contient généralement : Un lien vers les mentions légales du site Un lien vers la chartes confidentialité Le copyright Le nom de la personne/société ayant fait le site Des informations de contacts Dautres liens que personne ne lit jamais …

10 Corps de page Cest le contenu de la page en elle-même. Cest souvent la seule partie du site qui change en fonction de la page du site qui est affichée.

11 Barre de recherche Souvent en haut à droite Mais des fois autre part en haut Toujours à la même place, peu importe la page du site Peut contenir un lien "Recherche avancée"

12 Fil dAriane Permet de savoir où est rendu lusager dans le site. Ça ressemble à ça: Très utile dans les sites contenant de nombreux menus et sous-menus.

13 Les attributs CSS de mise en page

14 Rappel Vous pouvez appliquer un attribut CSS à nimporte quel élément Web. Attention à lattribut text-align qui ne sapplique quà du texte pour centrer une image, placer limage dans un paragraphe, tableau ou div et appliquer sur eux lattribut.

15 Taille des éléments Web

16 Marges des éléments Web

17 Position des éléments Web

18 Lattribut CSS float Si un élément Web possède un attribut CSS float, ses éléments frères et sœurs vont flotter autour de lui. Ici, on a une image avec un attribut float et un paragraphe. Si limage nétait pas flottante, le paragraphe se serait retrouvé directement en dessous de limage car cest un élément bloc.

19 Lattribut CSS float Lattribut float peut prendre comme valeur gauche ou droite. Pour quun élément frère ou sœur ne flotte pas autour dune élément ayant un attribut float, il faut lui mettre un attribut CSS clear.

20 Lattribut CSS float Il faut mettre les éléments avec lattribut float avant les éléments qui vont flotter autour. Ici, les fraises et les litchis ont été ajoutés avant le paragraphes.

21 Position des éléments Web

22 Lattribut CSS position Il peut prendre une de ses 4 valeurs : absolute : positionné relativement par rapport au prochain élément parent non statique fixed : positionné relativement par rapport à la fenêtre du navigateur relative : positionné relativement par rapport à lélément parent static : valeur par défaut – suit le flux normal daffichage http://www.w3schools.com/cssref/playit.asp?filename=playcss_position

23 Les attributs CSS z-index et overflow z-index (valeur numérique): Pour les éléments frères et sœurs se superposant, un élément avec un z-index plus élevé sera devant les autres, Peut avoir une valeur négative. overflow : Décide du défilement de lélément, Pratique pour rajouter des barres de défilement à un élément, http://www.w3schools.com/cssref/playit.asp?filename=playcss_overflow

24 Placement et clip Placement Permet tout simplement de positionner lélément lorsque lattribut position est non statique, Son comportement dépend donc de la valeur de position. Clip Permet de rogner un élément. Peu utilisé … on utilise plutôt les attributs de tailles pour jouer avec la dimension des éléments.

25 Bordure des éléments Web

26 Attributs fixes ou relatifs? Les attributs relatifs sadapteront par rapport à la taille de la fenêtre du fureteur et de la taille de lécran de lusager (pour les pourcentage), ou de la taille de police de caractère (pour les em). Les valeurs de hauteur en pourcentage ne fonctionnent pas vraiment pour la hauteur des cellules et la hauteur globale des tableaux. En fait, les pourcentages fonctionnent seulement si lélément parent à une taille fixe. Les attributs fixes (px, cm, pt, etc.) ne sadapteront pas à la taille de la fenêtre du fureteur ou la taille de lécran de lusager. Cest à vous de choisir quel type dattributs utiliser en fonction du contenu de votre site.

27 Lutilisation des tableaux

28 Ce que vous savez déjà Vous savez utiliser les tableaux pour faire afficher des données. Vous pouvez jouer sur la taille des lignes, colonnes et cellules. Il y a deux types de cellules : les données et les entêtes.

29 Tableaux pour la mise en page En fait, on peut mettre nimporte quel élément Web dans une cellule de tableau! On a déjà mis des images, des listes, des paragraphes, etc. Mais on peut mettre aussi des div, des formulaires, et même dautres tableaux! Dans un tableau de mise en page, on ne met pas dentête, on ne fusionne pas les cellules et on met généralement pas de bordure aux cellules.

30 Tableaux pour la mise en page Les cellules agissent un peu comme des div en fait. Il faut donc jouer sur la taille des cellules. Pour le positionnement, il faut suivre la logique des tableau. Par exemple, si on veux un pied de page, un corps de page et un pied de page, on peut créer un tableau de 3 lignes et 1 seule colonne.

31 Tableau pour la mise en page Cest bien beau tout ça, mais il faut généralement éviter de faire la mise en page en utilisant des tableaux…

32 Lutilisation des DIV

33 DIV pour la mise en page Pour la mise en page, le standard est dutiliser les divs plutôt que les tableaux. Néanmoins, les tableaux restent toujours beaucoup utilisés. Lutilisation des divs rend le code HTML généré plus clair. Pour mettre des divs à gauche ou à droite, on utilise lattribut CSS float. Attention, lattribut CSS vertical-align ne fonctionne pas pour les div!

34 Atelier

35 Ça doit ressembler à : Il faut une version avec les tableaux, et une version avec les divs

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