Embed Size (px)
Citation preview
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!
[email protected]://lrcm.com.umontreal.ca/greg/COM2580/
