31 octobre 2012 Grégory Petit

La mise en page

31 octobre 2012Grégory Petit

http://lrcm.com.umontreal.ca/greg/COM2580/

La semaine dernière …Les feuilles de styles, ça sert à quoi?

Les règles CSS

Gestion dans Dreamweaver

Attributs de formatage

Et donc on fait quoi aujourd’hui?

Les éléments de mise en page

Les attributs CSS de mise en page

L’utilisation des tableaux

L’utilisation des DIVS

Les éléments de mise en page

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

Type de contenuDes menus

Des têtes de page

Des pieds de page

Des corps de page

Des barres de recherche

Des fils d’Ariane

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

menu2 menus grand max!

Vous pouvez aussi utiliser des sous-menus!

Tête de pageC’est toujours la même dans tous le site.

Elle contient généralement :Un logoLe nom du siteLa chose/personne/entreprise présentée par le

siteDes infos basiques comme les moyens de

contactUne barre de recherche…

Pied de pageIl contient des fois un menu … à éviter!

Sinon il contient généralement :Un lien vers les mentions légales du siteUn lien vers la chartes confidentialitéLe copyrightLe nom de la personne/société ayant fait le siteDes informations de contactsD’autres liens que personne ne lit jamais …

Corps de pageC’est le contenu de la page en elle-même.

C’est souvent la seule partie du site qui change en fonction de la page du site qui est affichée.

Barre de rechercheSouvent 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"

Fil d’ArianePermet de savoir où est rendu l’usager dans

le site.

Ça ressemble à ça:

Très utile dans les sites contenant de nombreux menus et sous-menus.

Les attributs CSS de mise en page

RappelVous pouvez appliquer un attribut CSS à

n’importe quel élément Web.

Attention à l’attribut text-align qui ne s’applique qu’à du texte pour centrer une image, placer l’image dans un paragraphe, tableau ou div et appliquer sur eux l’attribut.

Taille des éléments Web

Marges des éléments Web

Position des éléments Web

L’attribut CSS floatSi 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 l’image n’était pas flottante, le paragraphe se serait retrouvé directement en dessous de l’image car c’est un élément bloc.

L’attribut CSS floatL’attribut float peut prendre comme valeur

gauche ou droite.

Pour qu’un élément frère ou sœur ne flotte pas autour d’une élément ayant un attribut float, il faut lui mettre un attribut CSS clear.

L’attribut CSS floatIl faut mettre les éléments avec l’attribut

float avant les éléments qui vont flotter autour.

Ici, les fraises et les litchis ont été ajoutés avant le paragraphes.

Position des éléments Web

L’attribut CSS positionIl 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 d’affichage http://www.w3schools.com/cssref/playit.asp?filename=playcss_position

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

Placement et clipPlacement

Permet tout simplement de positionner l’élément lorsque l’attribut position est non statique,

Son comportement dépend donc de la valeur de position.

ClipPermet de rogner un élément.Peu utilisé … on utilise plutôt les attributs de

tailles pour jouer avec la dimension des éléments.

Bordure des éléments Web

Attributs fixes ou relatifs?Les attributs relatifs s’adapteront par rapport à la taille de la

fenêtre du fureteur et de la taille de l’écran de l’usager (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 s’adapteront pas à la taille de la fenêtre du fureteur ou la taille de l’écran de l’usager.

C’est à vous de choisir quel type d’attributs utiliser en fonction du contenu de votre site.

L’utilisation des tableaux

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.

Tableaux pour la mise en pageEn fait, on peut mettre n’importe 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 d’autres tableaux!

Dans un tableau de mise en page, on ne met pas d’entête, on ne fusionne pas les cellules et on met généralement pas de bordure aux cellules.

Tableaux pour la mise en pageLes 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.

Tableau pour la mise en pageC’est bien beau tout ça, mais il faut

généralement éviter de faire la mise en page en utilisant des tableaux…

L’utilisation des DIV

DIV pour la mise en pagePour la mise en page, le standard est d’utiliser les

divs plutôt que les tableaux. Néanmoins, les tableaux restent toujours beaucoup utilisés.

L’utilisation des divs rend le code HTML généré plus clair.

Pour mettre des divs à gauche ou à droite, on utilise l’attribut CSS float.

Attention, l’attribut CSS vertical-align ne fonctionne pas pour les div!

Atelier

Ça doit ressembler à :

Il faut une version avec les tableaux, et une version avec les divs

Des questions???

Merci de votre attention!

A la semaine prochaine!

gregory.petit@umontreal.cahttp://lrcm.com.umontreal.ca/greg/COM2580/