Les feuilles de style La mise en page mars 2013 Grégory Petit http://lrcm.com.umontreal.ca/greg/ART6017/

Les feuilles de styles, ça sert à quoi?

Les feuilles de styles 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. Un règle peut s’appliquer à une balise HTML et/ou un élément ayant un ID spécifique et/ou des éléments appartenant à la même classe.

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

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

Les règles CSS

Les règles CSS 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

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

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 titres de premier niveau de la page Web. sélecteur

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")

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 id = "pied-de-page" class = "externe" href = "…" > a#pied-de-page / a.externe / #pied-de-page.externe

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". <div id="menu"> <a href="index.html"> Accueil </a> </div> On sépare les éléments de parenté avec un espace dans le sélecteur.

Ordre de priorité des sélecteurs Certains sélecteurs vont avoir la priorité sur d’autres Code HTML <div id="menu"> <a href="index.html"> Accueil </a> </div> Un règle CSS ayant comme sélecteur #menu a l’emportera sur une règle CSS ayant comme sélecteur a

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

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 titres de niveau 1.

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

Pour résumer Dans un règle CSS, on utilise : Une balise si on veut appliquer la règle à tous les mêmes types d’éléments HTML  Je veux que la taille de tous mes liens soit 12 px Un ID si on veut appliquer la règle un seul élément dans la page  Je veux que la taille d’un seul lien soit 24 px Une classe si on veut appliquer la règle à plusieurs objets du même type d’éléments HTML  Je veux que la taille de plusieurs liens soit 14 px (comme par exemple les liens d’un menu par rapport aux autres liens du site)

Gestion dans Dreamweaver

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.

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

Ajouter une règle CSS

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

Sélecteur complexe

Sélecteur complexe

Nouveau fichier CSS

Fichier CSS existant Dans l’entête du fichier HTML, la liaison se fait comme suit: <link href="styles/atelier.css" rel="stylesheet" type="text/css" /> Dans Dreamweaver, il faut penser à mettre la nouvelle règle dans le fichier existant.

Bloc CSS  attributs

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

Code CSS

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

CSS à l’intérieur du fichier HTML (à éviter) Balise <style> à l’intérieur de l’entête du fichier HTML <head> …. <style type="text/css"> h1 {color:red;} p {color:blue;} </style> </head> La même chose qu’on retrouve dans les fichiers CSS

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 <h1 style="color:blue;text-align:center"> Ceci est un titre! </h1> La même chose qu’on retrouve dans le bloc CSS d’une règle CSS

Attributs de formatage

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

Catégorie Type

Catégorie Fond

Catégorie Bloc

Autres catégories Les autres catégories font parties de la mise en page. On va voir ça tantôt.

Pratique

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

Les éléments de mise en page

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

Type de contenu Des menus Des têtes de page Des pieds de page Des corps de page Des barres de recherche Des fils d’Ariane

Les menus Il y en a des fois partout! Trop de menus tue le menu! 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!

Tête de page C’est 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 …

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 D’autres liens que personne ne lit jamais …

Corps de page C’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 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"

Fil d’Ariane Permet 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

Rappel Vous 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 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 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 float L’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 float Il 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 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 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 clip Placement Clip 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. 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.

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 page En 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 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.

Tableau pour la mise en page C’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 page Pour 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!

Pratique

Ça doit ressembler à ça : (sans tableaux)

Canevas

Canevas 99% des sites gardent la même mise en page et le même formatage sur la majorité de leur page. Plutôt que de refaire à chaque fois chaque page, vous pouvez créer un canevas à partir de la première page que vous venez de faire. Quand on modifie un canevas par la suite, les pages utilisant ce canevas vont automatiquement se mettre à jour.

Transformer une page en canevas

Définir les zones éditables Vous devez identifier les zones éditables de votre canevas. Ce sont les zones dont le contenu changera en fonction des pages de votre site. Vous ne pourrez pas éditer une section d’une page utilisant un canevas si cette section n’a pas été définie comme une zone éditable dans le canevas.

Définir les zones éditables

Définir les zones éditables

Nouvelle page basée sur un canevas

Nouvelle page basée sur un canevas

Fluid grid layout (Mise en forme de grille fluide)

Fluid grid layout C’est un modèle de page HTML Web qui permet de créer un page qui s’adapte à l’affichage. Le modèle crée avec le même contenu des pages pour : Écran classique d’ordinateur Tablette Cellulaire

Fluid grid layout On en fera ensemble si on a du temps. Sinon, un tutoriel est disponible ici : http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/