Cégep de Sainte-Foy | Techniques d'intégration multimédia

582-104-SF Intégration 1

Leçon 7

Le positionnement CSS

Quelques propriétés CSS utiles

Les CSS3 ont amené un cortège de nouvelles propriétés aujourd'hui très utilisées. La plupart de ses propriétés sont fonctionnelles dans les navigateurs les plus récents, mais il y a des exceptions.

Coins arrondis : border-radius

Nom de la propriété standard: border-radius

Propriété supportée par: http://caniuse.com/#feat=border-radius

Prenons l'exemple d'un paragraphe : la mise est forme des coins ronds de cette note est exécutée par la règle de style suivante :

p { border-radius: 32px; }

See the Pen c08-css3-01 by Sylvain Lamoureux (@slamoureux) on CodePen.

La déclaration raccourcie border-radius:32px produit des coins arrondis avec un rayon de 32 pixels. Elle est l'équivalent de ces quatres déclarations longues :

border-top-left-radius: 32px; border-top-right-radius: 32px; border-bottom-left-radius: 32px; border-bottom-right-radius: 32px;

Ainsi, il est possible de personnaliser le rayon de chacun des coins, comme le montre cet exemple :

border-top-left-radius: 0px; border-top-right-radius: 5px; border-bottom-left-radius: 20px; border-bottom-right-radius: 50px;

En syntaxe raccourcie, cela donne :

border-radius: 0px 5px 20px 50px;

Au rendu, on obtient :

See the Pen c08-css3-01b by Sylvain Lamoureux (@slamoureux) on CodePen.

On peut aller plus loin et préciser un arrondi en X et un arrondi en Y, comme ceci:

border-top-left-radius: 20px 10px; border-top-right-radius: 6px 20px; border-bottom-left-radius: 10px 25px; border-bottom-right-radius: 14px 50px;

Ce qui donne en syntaxe raccourcie :

border-radius: 20px 6px 10px 14px/10px 20px 25px 50px;

Au rendu on obtient :

See the Pen c08-css3-02 by Sylvain Lamoureux (@slamoureux) on CodePen.

Grâce à un choix judicieux de valeur pour width, height et border-radius, cette propriété permet de créer des formes personnalisées comme un cercle :

See the Pen c08-css3-03 by Sylvain Lamoureux (@slamoureux) on CodePen.

Ombre projetée: box-shadow

Nom de la propriété: box-shadow

Propriété supportée par: http://caniuse.com/#feat=css-boxshadow

Il est possible de créer une ombre projetée ou encore une lueur sous un conteneur (type block) comme le montre les exemples qui suivent.

See the Pen c08-css3-04 by Sylvain Lamoureux (@slamoureux) on CodePen.

Les valeurs associées à la propriété box-shadow dans la déclaration
box-shadow: #999 5px 5px 8px;
contrôlent respectivement les paramètres suivants de l'ombre:

  • #999 : couleur
  • 5px : décalage vers la droite (valeur négative vers la gauche)
  • 5px : décalage vers le bas (valeur négative vers le haut)
  • 8px : quantité de flou vers l'extérieur

Cette propriété permet aussi d'obtenir une sorte de lueur qui fait tout le tour de la boîte comme le montre l'exemple précédent (en bas) :

See the Pen c08-css3-05 by Sylvain Lamoureux (@slamoureux) on CodePen.

Où:

  • #999 : couleur de l'ombre
  • 0 : décalage horizontal nul
  • 0 : décalage vertical nul
  • 20px : quantité de flou vers l'extérieur
  • 5px : rayon de l'ombre

Ombre projetée sous le texte: text-shadow

Nom de la propriété standard: text-shadow

Supportée par: http://caniuse.com/#feat=css-textshadow

Il est possible de créer une ombre projetée sous un texte avec CSS3, comme le montre cet exemple:

See the Pen c08-css3-06 by Sylvain Lamoureux (@slamoureux) on CodePen.

Les valeurs associées de la déclaration
text-shadow: #999 4px 4px 5px
contrôlent respectivement les paramètres suivants de l'ombre:

  • #999 : couleur
  • 4px : décalage vers la droite (valeur négative vers la gauche)
  • 4px : décalage vers le bas (valeur négative vers le haut)
  • 5px : quantité de flou vers l'extérieur

La même propriété peut être utilisée pour créer du texte incrusté, comme le montre l'exemple suivant :

See the Pen c08-css3-07 by Sylvain Lamoureux (@slamoureux) on CodePen.

Notez bien que pour produire l'effet d'incrustion, un choix judicieux de valeurs pour les propriétés color (couleur des caractères) et background-color (couleur de l'arrière-plan) est important.

Transparence (d'un élément HTML) : opacity

Support pour opacity: http://caniuse.com/#feat=css-opacity

L'opacité (ou la transparence) d'un élément HTML (et son contenu) est contrôlée par la propriété opacity.

La propriété opacity permet d'attribuer un certain degré de transparence à un élément HTML et son contenu, quel que soit cet élément. Le CSS suivant permet d'assigner au paragraphe comportant la classe 'transparent' une opacité réglée à 60% (ou, si vous préférez, une transparence de 40%) :

See the Pen c08-css3_opacity by Sylvain Lamoureux (@slamoureux) on CodePen.

Transparence (couleur d'arrière-plan): rgba, hsla

Le format de couleur rgba permet d'obtenir une couleur d'arrière-plan semi-transparente pour n'importe quel élément HTML.

Le CSS suivant permet d'obtenir une couleur verte avec 50 % d'opacité:

p { background-color: rgba(55, 243, 34, 0.5) }

Le même effet peut être obtenu par le format de couleur hsla:

p { background-color: hsla(114º, 90%, 54%, 0.5) }

Exemple :

See the Pen c08-css3-08 by Sylvain Lamoureux (@slamoureux) on CodePen.

Le format hsla signifie Hue (teinte), Saturation, Lightness (luminosité) et Alpha (transparence). La première valeur demande un nombre entre 0 et 359 (pour déterminer la teinte). Les deux valeurs suivantes indiquent en pourcentage le taux de saturation et de luminosité de la teinte choisie. La dernière représente l'opacité.

Box sizing

Propriété standard: box-sizing

Supporté par : http://caniuse.com/#feat=css3-boxsizing

Le modèle de boîte CSS par défaut est parfois frustrant pour le développeur. En effet, si on déclare une largeur de 200 pixels et une marge interne (padding) de 20 pixels, cet élément aura dans les faits une largeur totale de 240 pixels. Ce n'est pas un problème en soi jusqu'au moment où l'on doive changer la marge interne: il faut alors recalculer la largeur, et éventuellement les valeurs de marge externe et de bordure.

La propriété CSS3 box-sizing avec la valeur border-box permet d'inclure dans la largeur (width) les valeurs de marge interne (padding) et de bordure (border). Sa valeur par défaut est content-box, soit le modèle de boîte courant.

L'exemple suivant montre une comparaison entre deux éléments comportant les mêmes valeurs de width, padding et border, mais dont la valeur de box-sizing est différente:

See the Pen c08-css3-09 by Sylvain Lamoureux (@slamoureux) on CodePen.

Transition

Nom de la propriété standard: transition

Support par les navigateurs: voir le site http://caniuse.com/#feat=css-transitions.

Il est possible de créer des animations simples avec CSS3 qui démarrent lorsque certains événements se déclenchent sur la page.

See the Pen c08-css3_transition01 by Sylvain Lamoureux (@slamoureux) on CodePen.

La propriété transition permet, pour la propriété visée, de passer d'une valeur à une autre de manière graduelle et selon une vitesse définie. Le déclenchement de la transition peut se faire au chargement de la page ou encore à la suite d'une action comme le survol (hover) ou le clic (target) d'un élément.

Les transitions sur les liens sont courantes. Voici un exemple de transition de couleur appliquée sur un lien:

See the Pen c08-css3-10 by Sylvain Lamoureux (@slamoureux) on CodePen.

La propriété transition est en fait composée de quatre sous-propriétés:

  • transition-delay: détermine le délai en secondes (s) avant le démarrage de la transition;
  • transition-duration: détermine la durée de la transtion en secondes (s) ou millisecondes (ms);
  • transition-property: détermine la propriété à animer (valeurs: toutes les noms de propriétés ou le mot-clé all qui permet d'animer plusieurs propriétés à la fois);
  • transition-timing-function: détermine la courbe de vitesse de l'animation (valeurs: ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n) ).
  • le délai, non présent dans l'exemple (s ou ms).
  • Voir aussi la page de W3School consacrée à cette propriété: Transition CSS3

Transform

Nom de la propriété standard: transform

Support par les navigateurs: http://caniuse.com/transforms2d

La propriété transform permet des transformations, des déplacements (translate), des rotations (rotate), des déformations (skew), des changements de taille (scale).

Seuls les éléments de type bloc seront affectés par transform. Pour qu'un hyperlien (<a>) soit affecté il faut donc lui ajouter la déclaration display:block.

.transform { transform: rotate(9deg); }

Il est possible de jumeler cette propriété à la propriété transition pour créer des animations fluides au survol par exemple. Puis, rien ne nous empêche d'ajouter l'animation d'un autre type de transformation, comme le scale :

a:link { transition: all .3s ease; } a:hover { transform: rotate(9deg) scale(1.5); }

Dans l'exemple suivant, l'animation dure 1 seconde: cela permet de rendre plus évident l'effet d'accélération et de décélération engendré par la valeur ease :

See the Pen c08-css3-11 by Sylvain Lamoureux (@slamoureux) on CodePen.

Transform-origin

Nom de la propriété standard: transform-origin

Par défaut, les transformations comme la rotation se font en fonction du centre de l'élément visé. Il est possible de changer le point de référence (origine) de la rotation grâce à la propriété transform-origin, qui s'emploie avec la propriété transform. Il s'agit de préciser des valeur en x et en y (et même en z pour des transformations 3D), comme ceci:

See the Pen c08-css3_transform-origin by Sylvain Lamoureux (@slamoureux) on CodePen.

En plus des mots-clés habituels, des valeurs en pourcentage et en pixels sont aussi acceptées.

Filter

Nom de la propriété standard: filter

Support par les navigateurs: https://caniuse.com/#feat=css-filters

Filter est utilisé pour générer des effets visuels somme le flou, l'échelle de gris, la luminosité...

Dans l'exemple suivant, c'est la pseudo-classe hover qui déclenche les effets au survol de l'un des liens:

See the Pen c07-filter01 by Sylvain Lamoureux (@slamoureux) on CodePen.

La propriété position

Rappel


Les éléments de type bloc et les éléments de type en-ligne

  • Les éléments de type bloc se placent toujours les uns sous les autres par défaut. Par exemple: une suite de paragraphes (<p>) ou les éléments d'une liste (<li>).
  • Un élément bloc occupe par défaut toute la largeur disponible dans son conteneur parent.
  • Les éléments de type en-ligne se placent toujours côte-à-côte afin de rester dans le texte. Par exemple : le renforcement d'une partie de texte à l'aide de la balise <strong>.
  • Les éléments de type en-ligne occupent par défaut la place minimum nécessaire à leur contenu. C'est le cas des éléments <a>, <strong>, <em>, <span>, etc.

Ancêtre, Parents, Enfants, Descendants, Frères

Comprendre l'imbrication des éléments les uns dans les autres est primordial pour comprendre le positionnement.

Chaque document HTML est composé de conteneurs qui peuvent être ancêtres, parents, enfants, descendants ou frères. Ces éléments forment une hiérarchie d'imbrications.

Le flux

Les éléments HTML sont placés les uns après les autres dans le code de la page: c'est ce qu'on appelle le flux du contenu.

Cela signifie que chaque élément est dépendant des éléments frères qui l'entourent.

Par défaut, les éléments bloc et les éléments en-ligne ont un comportement différent dans le flux normal du contenu, comme on l'a vu.

La propriété position

La propriété position est à considérer dès lors qu'il est nécessaire de passer outre le flux normal du contenu pour une mise en page particulière.

Valeurs possibles: static (par défaut), relative, absolute, fixed.

La position statique: position:static

La valeur statique (position:static) correspond à la valeur par défaut de la propriété position, donc la valeur par défaut d'un élément du flux. Il n'y a que peu d'intérêt à la préciser dans le code, si ce n'est dans le but de rétablir dans le flux un élément en particulier parmi une série qui serait positionnée hors du flux.

La position relative: position:relative

La position relative (position:relative) permet de décaler un élément par rapport à une position de référence, soit celle qu'il avait dans le flux.

Les éléments qui le suivent et le précèdent ne sont pas influencés par ce décalage; ils font comme si l'élément est toujours dans le flux, à sa position initiale. En pratique, ce comportement est rarement recherché bien qu'il puisse s'avérer utile dans certaines situations.

Attribuer à un élément une position relative peut par contre être pratique à certains égards, dont:

  • Servir de référence à un élément enfant ou descendant positionné en absolu.
    (Voir plus bas pour le positionnement absolu.) ;
  • Bénéficier de la possibilité d'utiliser la propriété z-index pour gérer des superpositions d'éléments (propriété inopérante pour des éléments du flux). Voir plus bas les détails à propos de z-index.

Dans l'exemple ci-dessous, l'élément strong est en position relative. On utilise les propriété top, right, bottom ou left jumelées à des valeurs en px ou % pour le positionner:

See the Pen c08-pos-01 by Sylvain Lamoureux (@slamoureux) on CodePen.

La position absolue: position:absolute

La position absolue (position:absolute) permet de ne pas dépendre de l'ordre dans lequel les éléments HTML sont déclarés dans le code, contrairement aux flottants (float) que nous avons vus plus tôt.

La position absolue s'affranchit définitivement du cordon liant jusqu'alors intimement contenu et présentation. L'élément étant totalement extrait du flux, il ne dépend plus du tout des éléments qui le côtoient. Il faut voir le positionnement absolu comme étant une méthode radicale (mais puissante) qui retire tout à fait un élément du flux: il n'existe pour ainsi dire plus aux yeux des éléments qui, eux, restent dans le flux.

Rappelons un point important concernant ce mode de positionnement : un élément positionné en absolu se réfère au premier ancêtre positionné qu'il rencontre. À défaut d'ancêtre positionné, la référence du positionnement est la fenêtre du navigateur.

N'étant plus dans le flux naturel, l'élément perd une de ses caractéristiques majeures qui est celle de recouvrir la totalité de la largeur disponible de l'élément parent.

Il est capital de noter qu'un élément bénéficiant d'une position absolue ne bougera pas de sa position initiale tant que l'une des propriétés topbottomleft ou right n'a pas été précisée; il s'agit d'ailleurs là d'un comportement appliquable à toutes les positions :

See the Pen c08-pos-03 by Sylvain Lamoureux (@slamoureux) on CodePen.

La position fixe: position:fixed

Le positionnement fixe (position:fixed) est caractérisée par les points suivants:

  • Lorsque le positionnement est précisé (top, bottom, left, right…), l'élément est toujours positionné par rapport à la fenêtre du navigateur ;
  • L'élément est fixé à un endroit et ne pourra se mouvoir, même en présence d'une barre de défilement. En d'autres termes, la position intiale est fixée au chargement de la page; le fait qu'une éventuelle barre de défilement puisse être utilisée n'a aucune influence sur le positionnement de l'élément: il ne bouge plus de la position initialement définie.

Dans l'exemple ci-dessous, faites défiler le contenu et vous noterez que le texte en jaune reste sur place (cliquez sur « CSS » ou « HTML » pour faire afficher le code et expérimenter) :

See the Pen c08-pos05 by Sylvain Lamoureux (@slamoureux) on CodePen.

Cet autre exemple montre l'utilisation de la position fixe pour « fixer » un menu dans le haut de la page. Faites défiler le contenu : la barre de navigation reste en place.

See the Pen c08-pos04 by Sylvain Lamoureux (@slamoureux) on CodePen.

z-index

La propriété z-index permet de changer la position naturelle des éléments dans l'axe z, c'est-à-dire en profondeur. Prenons l'exemple de trois éléments div placés l'un à la suite de l'autre dans le HTML et positionnés en absolu : le premier élément se trouvera en arrière-plan, et le dernier, au premier plan. Cet ordre ne sera évident dans le navigateur que si les éléments se superposent au moins en partie.

Dans l'exemple ci-dessous, le HTML contient trois div positionnés en absolu qui se superposent partiellement en raison de leurs positions. Sans autre indication, l'ordre de superposition des div suit l'ordre du flux: DIV est arrière plan, DIV3 est au premier plan.

La valeur de z-index permet de modifier cet ordre naturel.

En faisant afficher le code, modifiez la valeur de z-index pour constater l'effet.

See the Pen c08-pos06 by Sylvain Lamoureux (@slamoureux) on CodePen.

Lancez Brackets et ouvrez le dossier tf_cours07_position. Voir en classe pour les instructions.

Le modèle de boite flexible (flex-box): une intro

Flexbox offre un modèle de boite dont les règles et les fonctionnalités s'écartent de celles du modèle de boite traditionnel (display: block, inline, inline-block...).

Les quatre possibilités du modèle de boite flexible sont:

  • distribution des éléments: horizontale ou verticale avec passage à la ligne ou non;
  • alignements et centrages horizontaux et verticaux, justifiés, répartis;
  • réorganisation des éléments indépendamment de l'ordre du flux;
  • gestion de l'espace disponible.

flex-container et flex-item

La structure de base de flexbox repose sur:

  • un flex-container qui génère le contexte d'affichage pour ses enfants, les flex-item;
  • des flex-item qui sont les enfants direct du flex-container.

Un flex-container et n'importe quel éléments HTML affublé d'une déclaration display:flex.

Ses enfants deviennent alors automatiquement des flex-item qui occupent initialement la taille minimale de leur contenu.

Flexbox pour la mise en page

Nous avons vu dans les cours précédents qu'il est possible de placer des éléments de type bloc côte-à-côte à l'aide de la propriété float.

L'utilisation de float dans ce contexte est en vogue depuis des années, mais il s'agit d'un bricolage. En effet, float a d'abord été prévu pour faire flotter des images dans le texte, ni plus ni moins. C'est pourquoi l'utilisation cette propriété pour la mise en page (menus horizontaux, colonnes, etc.) demande un bricolage considérable afin d'éliminer les comportements erratiques qui en découlent.

Depuis quelque temps, des solutions CSS dédiées spéciquement à la mise en page ont été développées, puis implantées dans les navigateurs les plus populaires.

Le modèle de boite flexible en fait partie.

Voyons les bases de ce modèle à partir de cas pratiques.

Utiliser des éléments de liste en tant que flex-item

Prenons l'exemple de la liste d'éléments suivante:

<ul> <li>Clou</li> <li>Vis</li> <li>Écrou</li> <li>Boulon</li> <li>Oeillet</li> </ul>

Voyons comment flexbox permet d'ajuster la disposition des éléments de liste.

Les propriétés du modèle de boite flexible qui sont mises à profit dans les quatre exemples apparaissant plus bas sont les suivantes:

  • display:flex : appliquée sur le flex-container (ul dans l'exemple) afin d'activer le comportement flex-item chez ses enfants (li).
  • flex-direction : apliquée sur le flex-container, elle dicte la direction des flex-item, soit row (rangée), soit column (colonne).
  • flex-wrap : appliquée sur le flex-container, cette propriété permet (wrap) ou empêche (nowrap) le retour à la ligne des flex-item.
  • justify-content : appliquée sur le flex-container, cette propriété gère l'espace autour des flex-item.

See the Pen c07-flexbox01a by Sylvain Lamoureux (@slamoureux) on CodePen.

See the Pen c07-flexbox01d by Sylvain Lamoureux (@slamoureux) on CodePen.

See the Pen c07-flexbox01b by Sylvain Lamoureux (@slamoureux) on CodePen.

See the Pen c07-flexbox01c by Sylvain Lamoureux (@slamoureux) on CodePen.

Ordonner des items de catalogue avec flexbox

Voyons maintenant l'ordonnencement d'éléments de catalogue.

See the Pen c07-filter01 by Sylvain Lamoureux (@slamoureux) on CodePen.

L'approche mobile first

L'approche 'mobile first' (« le mobile d'abord ») repose sur ces fondements :

  • Un site web doit être construit en premier lieu pour les appareils les plus simples et les navigateurs les plus simples, et donc à partir des fonctionnalités les moins exigentes en terme de technologie.
  • Afin de profiter des avantages pratiques et technologiques des appareils les plus sophistiqués, des « couches » de complexité sont ajoutées progressivement au site.

En conséquence :

  • Selon cette approche, les règles de style de base s'adressent aux appareils à petits écrans comme les téléphones mobiles, d'ou l'expression 'mobile first'.
  • Des points de rupture, contrôlés par des requêtes médias, sont ajoutés afin d'augmenter progressivement le degré de complexité de l'interface pour des appareils dont l'écran est plus large.

Étude de cas

Jetons un coup d'oeil sur la maquette suivante qui montre un répertoire de professeurs.

Approche «mobile first»
Appoche Mobile first

L'interface est disposée sur une colonne et est prévue pour de petits écrans dont la largeur est sous les 481 pixels :

  • il s'agit d'une simple série d'articles comprenant un titre (nom du prof) et une image ;
  • cette interface est destinée surtout à des écrans tactiles, comme celui d'un téléphone ou d'une tablette de petite taille par exemple.

Simulation de l'interface sur téléphone intelligent.

interface complète de la version de base.

L'interface suivante est disposée sur deux colonnes et s'adresse à des écrans de taille un peu plus grande, soit d'une largeur située entre de 481 et 800 pixels :

  • la série d'articles est maintenant distribuée sur deux colonnes ;
  • cette interface est destinée surtout à des écrans tactiles, comme celui d'une tablette de taille moyenne par exemple.

Tablettes

L'interface suivante est prévue pour des appareils comportants des écrans plus grands, dont la largeur est de 800 pixels et plus :

  • la série d'articles est sur trois colonnes afin de profiter des résolutions plus grandes;
  • les trois liens du menu principal sont animés: l'opacité passe progressivement à une valeur de 1 au survol du curseur de la souris;
  • les quatre liens de la liste des médias sociaux sont animés: au survol du curseur de la souris, les images s'animent d'une légère rotation, d'une légère augmentation de la taille et d'une augmentation de l'opacité.
Maquette complète
Desktop

Activités d'évaluation

Contrôle de lecture 2

Le contrôle de lecture 2 aura lieu au cours 8, soit le 28 octobre 2019.

Il concerne le contenu des pages Web des leçons 4, 6 et 7.

Questions de révision du cours 7

  1. À partir d'une simple liste non ordonnée comme l'exemple ci-dessous, écrivez les règles de style qui permettent de disposer les éléments de liste à l'horizontal à l'aide du modèle de boite flexible. Ajustez l'alignement des éléments à l'aide de la propriété justify-content.
  2. <ul> <li>Clou</li> <li>Vis</li> <li>Écrou</li> <li>Boulon</li> <li>Oeillet</li> </ul>
  3. Quelle est la largeur en pixels d'un élément div dont les paramètres sont
    div {width:200px; padding:10px; border:2px;}
    considérant que la règle de style de réinitialisation est la suivante
    * {margin:0; padding:0; box-sizing: border-box;}?
    Et quelle est la largeur de cet élément si la règle de réinitialisation est plutôt
    * {margin:0; padding:0; box-sizing: content-box;}?
  4. En développement Web, quel est le nom de l'approche qui repose entre autre sur ce fondement: «Un site web doit être construit en premier lieu pour les appareils les plus simples et les navigateurs les plus simples, et donc à partir des fonctionnalités les moins exigentes en terme de technologie. Afin de profiter des avantages pratiques et technologiques des appareils les plus sophistiqués, des "couches" de complexité sont ajoutées progressivement au site.»
  5. La position absolue permet de ne pas dépendre de l'ordre dans lequel les éléments HTML sont déclarés dans le code. Mais alors, quelle est la référence de positionnement d'un élément auquel on attribue position:absolute?

TP7

Le TP7 a pour objectif d'expérimenter la propriété position et les propriétés de base reliées au modèle de boite flexible.

Documents à remettre

Un dossier rigoureusement nommé comme suit:

  • groupe du lundi 8h : gr2_nominitialeprenom_tp7
  • groupes du lundi 12h : gr1_nominitialeprenom_tp7

Le dossier de remise contient un fichier tp7.html, dossier css contenant un fichier styles.css et un dossier images contenant les images fournies pour le TP7.

Structure de fichiers :

arborescence tp7

Échéancier

Remettez le dossier complet, zippé, sur LÉA, dans l'espace prévu à cette fin, au plus tard:

  • le vendredi suivant le cours, 9h le matin.

Grille d'évaluation (pondération: 4% de la session)

  • @charset "utf-8"; présent et bien écrit: /1
  • Section Réinitialisation complète: /1
  • Section Charte graphique complète: /1
  • Section Page complète: /1
  • Section Entête complète: /1
  • Section Logo et nom du site complète: /1
  • Disposition Menu liens sociaux réussie: /1
  • États Menu liens sociaux bien faits: /1
  • Sprite CSS utilisé correctement pour les liens sociaux: /1
  • Disposition Navigation principale réussie: /1
  • États Navigation principale bien faits: /1
  • États distinct du lien de la page active: /1
  • Mise en forme titre principal: /1
  • Mise en forme des noms de professeurs: /1
  • Mise en forme des articles: /1
  • Positionnement des articles: /1
  • Effet au survol des articles: /1
  • Adaptation deux colonnes: /1
  • Adaptation trois colonnes: /1
  • Mise en forme du pied de page: /1
  • Total: /20

Documents fournis

Téléchargez le dossier zippé: tp7_sources.zip

Travail à faire

L'énoncé suivant est partiel. Voir aussi en classe pour les démonstrations.

À partir des fichiers fournis :

  1. Dézippez le document tp7_sources.zip.
  2. Lancez Brackets et, à partir de Brackets, ouvrez le dossier tp7_sources: vous aurez ainsi accès à tous les fichiers pour le travail.
  3. Faites afficher le document HTML: dans l'élément head, tout de suite après le premier élément meta, insérez le code suivant:
    <meta name='viewport' content='width=device-width; initial-scale=1.0;'>
  4. Faites afficher la feuille de style externe styles.css.
  5. Au tout début de la feuille de style, insérez le code suivant:
    @charset "utf-8";
  6. Affichage de la page dans le navigateur

    tp701
  7. SECTION /* RÉINITIALISATION */
    1. Sous le commentaire /* RÉINITIALISATION */, insérez la règle de réinitialisation suivante:
      * { margin: 0; padding: 0; box-sizing: border-box; /* Fait en sorte que "width" inclut padding et border */ }
      Affichage de la page dans le navigateur

      tp702
  8. SECTION /* CHARTE GRAPHIQUE */
    1. Ajoutez une règle de style avec le sélecteur html et rédigez les déclarations suivantes :
      1. Ajustez la taille des caractères à1em
      2. Ajustez la police à Arial, sans-serif
      3. Ajustez la couleur de la police à #111111
      4. tp703
  9. SECTION /* PAGE */
    1. Dans la section PAGE, ajoutez une règle de style avec le sélecteur d'identifiant #page et rédigez deux déclarations:
      1. Ajustez la largeur du conteneur à 96%
      2. Centrez ce conteneur avec des marges appropriées
      3. tp704
  10. SECTION /* ENTÊTE */
    1. Ajoutez une règle de style avec le sélecteur header
      1. Insérez une déclaration permettant d'ajuster les marges du haut et du bas à 1em
      2. tp705
  11. SECTION /* LOGO ET NOM DU SITE*/
    1. Ajoutez une règle de style dont le sélecteur permet de pointer le mot «TIM» (voir le balisage) et rédigez trois déclarations :
      1. Centrez ce texte
      2. Faites afficher ce texte en gras
      3. Ajustez la taille de ce texte à 4.5em
    2. Ajoutez une règle de style dont le sélecteur permet de pointer le texte « Techniques d'intégration...» (voir le balisage) et rédigez deux déclarations qui permettent de :
      1. Centrez le texte
      2. Ajustez la taille de la police à 1.2em
      3. Logo et nom du site
        tp706
  12. SECTION /* LIENS SOCIAUX */
    1. [VOIR DÉTAILS EN CLASSE] Débutez la mise en forme des liens des médias sociaux en créant une règle de style avec un sélecteur qui pointe la liste de liens des médias sociaux:
      1. Retirez les boulets de la liste
      2. À l'aide des propriétés de boites flexibles, alignez les éléments de liste à l'horizontal et centrez-les
      3. Ajoutez une marge en haut et en bas de la liste
    2. Créez une règle de style avec un sélecteur pointant vers les éléments de liste des médias sociaux:
      1. Rédigez une déclaration permettant d'ajouter une marge entre les éléments de liste
      2. Médias sociaux
        tp707a
    3. Créez une règle de style avec un sélecteur pointant vers les liens des éléments de liste des médias sociaux:
      1. Ajoutez une déclaration afin de placer l'image «social.png» en arrière-plan de ces liens
      2. Pour voir l'image en entier, ajustez la taille en largeur et en hauteur des liens afin de créer une «fenêtre» qui permet d'afficher la totalité de l'image palcée en arrière-plan
      3. Afin que la taille des liens soit prise en compte, changez la valeur de display en block:
      4. Médias sociaux
        tp707a
      5. L'image devrait maintenant être bien visible, mais le texte des liens est maintenant superflu: cachez ce texte en ajustant la taille de la police de caractère à 0:
      6. Médias sociaux
        tp706
    4. Créez maintenant une règle de style pour ajuster la mise en forme des états :link et :visited des liens des médias sociaux:
      1. Ajoutez une déclaration permettant de réduire l'opacité des liens à 40% (opacity: 0.4):
      2. Médias sociaux
        tp707
      3. Ajoutez une déclaration pour ajuster la transition de l'effet au survol
    5. Créez maintenant une règle de style pour ajuster la mise en forme des états :hover et :active des liens des médias sociaux:
      1. Au survol, l'opacité doit etre de 0.7
      2. Au survol, il doit y avoir une animation en rotation (rotate(30deg)) et une diminution en taille (scale(0.9)):
      3. Médias sociaux: effet au survol
        tp707
  13. SECTION /* SPRITES CSS */
    1. Ajustez les images de la liste des médias sociaux à l'aide du principe de sprite CSS et en utilisant le pseudo élément nth-child [Voir démo en classe]
    2. Sprite CSS

      tp708
  14. SECTION /* NAVIGATION PRINCIPALE */
    1. Insérez ces règles de style pour former le menu principal :
      nav ul { list-style: none; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } nav ul li { flex: 0 1 32%; } nav a { text-align: center; display: block; background: #aaa; height: 2.2em; line-height: 2.2em; font-size: 1em; font-weight: bold; color: #000000; text-decoration: none; border-radius: 4px; }
    2. L'allure générale des liens est décrite dans la règle précédente sous « nav a ».
      Créez une autre règle de style pour les états :link et :visited de ces liens, et ajoutez une opacité de 0.5 (opacity: 0.5) pour obtenir ce résultat:
    3. Navigation principale
      tp711a
    4. Maintenant que les états :link et :visited sont décrits, complétez les liens du menu principal en ajoutant une règle pour les états :hover et :active: ils doivent présenter une animation de l'opacité (c'est-à-dire que l'opacité doit passer à 1 au survol) avec une transition.
  15. SECTION /* ÉTAT DU LIEN DE LA PAGE ACTIVE */
    • Trouvez une astuce pour faire en sorte que le lien de la page active, «Professeurs», ait un état différent, comme le montre la maquette.
    • Cette astuce doit aussi couvrir les deux autres pages fictives («Programme» et «Stages»).
    • Pensez à utiliser la classe professeurs qui se trouve dans la balise d'ouverture <body>. Elle permet d'identifier cette page en particulier. Imaginons de plus que les pages fictives Programme et Stages sont aussi identifiées respectivement par les classes programme et stages.
    • Il vous faut créer un sélecteur qui permettra de modifier l'état du premier lien uniquement dans la page Programme, de modifier l'état du deuxième lien uniquement dans la page Professeurs, puis de modifier l'état du troisième lien uniquement dans la page Stages.
  16. SECTION /* TITRE */
    1. Ajoutez les règles de style suivantes pour mettre en forme les titres :

      h1, h2 { font-family: 'Arial Narrow', sans-serif; text-transform: uppercase; } h1 { margin: 3% 0 1% 0; text-align: center; font-size: 1.8em; } h2 { font-size: 1.2em; }
    2. Navigation principale
      tp712b
  17. SECTION /* FICHES DES PROFS */
    1. Ajoutez une règle de style avec le sélecteur article:
      1. Rédigez une déclaration qui ajoute une marge de 2% en haut et en bas de l'article.
      2. Rédigez une déclaration qui ajoute une bordure pleine, grise, d'une largeur de 1px
      3. Rédigez une déclaration qui ajoute une ombre projetée
    2. Ajouter une règle de style avec un sélecteur permettant de viser l'image de l'article et rédigez une déclaration qui donne une largeur de 100% à cette image.
    3. Mise en forme des articles
      tp714b
    4. Effectuez la mise en forme des noms de professeurs en vous inspirant de la maquette :
      1. Créez une règle de style avec un sélecteur pertinent et rédigez des déclarations pour :
        1. Retirer le souligné
        2. Ajuster la position selon la maquette
        3. Ajuster la couleur semi-transparente de l'arrière-plan
        4. Ajuster la couleur du texte
        5. Ajustez la marge intérieure (padding)
        6. Positionnement du nom du prof
          tp713
    5. Créez une nouvelle règle de style (sélecteur article:hover) pour ajouter un effet d'échelle (scale(1.03)) au survol des articles avec une transition.
  18. SECTION /* PIED DE PAGE */
    1. Créez une règle de style pour ajuster le pied de page (footer):
      1. Centrez le texte
      2. Ajoutez du padding tout autour du texte
      Positionnement du pied de page

      tp719a
  19. Section /* ADAPTATION 2 COLONNES */
    1. Ajoutez une requête média conditionnelle à une résolution de 481px et plus :

      @media (min-width: 481px) { .fiches-profs { display: flex; /* Identifie le flex-container */ flex-direction: row; /* Alignement en rangée */ flex-wrap: wrap; /* Permet le retour à la ligne */ justify-content: space-between; /* Distribue l'espace restant de part et d'autre des flex-item */ } article { flex-basis: 49%; /* Ajuste la largeur des flex-item */ } } /* fin adaptation 2 colonnes */
      Adaptation deux colonnes
      tp714
  20. SECTION /* ADAPTATION 3 COLONNES */
    1. Ajoutez une deuxième requête média, mais cette fois, conditionnelle à une résolution de 780px et plus (voir le point précédent pour la syntaxe).
    2. Ajoutez une règle de style avec le sélecteur article et rédigez une déclaration permettant d'ajuster la largeur des articles afin qu'il se côtoient sur trois colonnes, sans espace superflu.
    3. Adaptation trois colonnes
      tp715
  21. Ajoutez un effet qui, au survol d'un article, change l'aspect visuel des autres articles (diminution de taille, ajout de flou, ajout de grisé) [Voir les notes de cours à propos de «Filter»]
  22. Dans le document HTML, ajoutez un favicon à votre page à l'aide d'un élément <link> (l'image se trouve dans le dossier « images »).
  23. Favicon à intégrer

    tp716
    Code à intégrer dans <head>:
    <link rel="icon" type="image/png" href="images/favicon.png">
Haut de page