Acheter

Réaliser une grille de repères

de : Comprendre et utiliser les CSS

Cette vidéo est uniquement disponible pour les personnes qui possèdent un compte utilisateur video2brain. Créez dès maintenant votre compte utilisateur gratuit et sans engagement et accédez à cette vidéo ainsi qu'à de nombreuses autres !

S'enregistrer

À propos de cette vidéo

Pour nous aider à mieux caler les visuels et comprendre les mécaniques lors du positionnement, nous allons mettre en place une grille de repères. Il en existe sur le web et vous pouvez également en créer une qui corresponde encore plus à vos attentes.

Un extrait de : Comprendre et utiliser les CSS

La gestion du visuel et de l’apparence d’un site à l´aide de CSS soulève souvent les mêmes questions. Le site sera-t-il compatible avec l’ensemble des navigateurs ? Comment se comporteront le contenu et l’affichage en cas de redimensionnement de la fenêtre du navigateur ? Comment obtenir tel ou tel résultat visuel ? Bref, la liste est longue et bien connue. L’idée de cette formation vidéo est de procéder à une exploration des outils de base des CSS pour mieux en comprendre les interactions et être mieux préparé à les utiliser.

EUR 49,95

10h30

Acheter

Formations similaires

Avant d'aborder le sujet des CSS, il est toujours bon de faire un tour d'horizon des acteurs majeurs de ce secteur, les langages ou les technologies, ainsi que les outils nécessaires pour travailler dans de meilleures conditions.

Avant de commencer
- Au cours de cette étape nous définirons les objectifs de l'ensemble de ces chapitres et nous présenterons le plan de travail que nous allons suivre.
  
  Objectifs et présentation
  
  07:46
- Utiliser les CSS fait partie d'un processus global de séparation de contenu, de visuel et de fonctionnel. Le tout se regroupe dans l'utilisation des standards du web.
  
  Séparation de contenu, de visuel etc.
  
  03:27
- Prenons le temps de regarder ces standards, de comprendre qui ils sont et le rôle de chacun.
  
  Les standards et l'univers des CSS
  
  08:14
- Voici une présentation d'une partie des outils disponibles sur le marché. Autant du côté propriétaire que OpenSource, ces outils éditeurs de code ou éditeurs graphiques doivent nous apporter le maximum de flexibilité et d'échange.
  
  Les outils de création nécessaires
  
  04:26
- Avant de commencer à explorer les CSS, nous installerons un environnement de travail et nous calerons les préférences de base afin d'optimiser la communication inter-applications.
  
  Installation de l'environnement
  
  14:08
- Pour nous aider à mieux caler les visuels et comprendre les mécaniques lors du positionnement, nous allons mettre en place une grille de repères. Il en existe sur le web et vous pouvez également en créer une qui corresponde encore plus à vos attentes.
  
  Réaliser une grille de repères
  
  04:04
- Bien que cela paraisse évident, il est toujours intéressant de faire la ronde des navigateurs et de les installer afin de pouvoir tester sur plusieurs configurations de plateforme.
  
  Les navigateurs
  
  17:58
- Controversés pour certains, incontournables pour d'autres, les validateurs, qu'ils soient de code ou de navigateur, permettent quoiqu'il en soit de se donner une idée de la validité de nos pages ou de nos applications.
  
  Les validateurs
  
  06:57
- Nous avons parfois du mal avec CSS2 et on parle de CSS3 ? Qu'en est-il ? N'oublions pas que CSS3 a vu sa première Draft en 2001.
  
  Utiliser CSS3 dès aujourd'hui ?
  
  04:09
Base d'un bon travail CSS, tout commence par le HTML. Il doit être structuré et il doit refléter la nature du contenu de la page. Nous ne pouvions pas aborder les CSS sans passer par une petite synthèse récapitulative des principaux points.

Synthèse récapitulative HTML
- On entend souvent parler de HTML ou de xHTML, de transitionnal ou de strict. Qu'en est-il ? Lequel utiliser et pourquoi ?
  
  Document HTML - xHTML
  
  13:53
- Quel sera le futur du HTML ? xHTML 2 du w3c ou (x)HTML 5 de whatwg ? La réponse est tombée ! (x)HTML5 sera la nouvelle mouture de notre structurateur de contenu.
  
  xHTML 2 ou HTML 5 ?
  
  05:23
- Premier élément de la page HTML : le Doctype. Il donne le tempo et la mesure. Basculons en mode Quirk ou affrontons de plein fer les standards.
  
  DOCTYPE
  
  12:27
- On parle souvent de balise h1, h2, de p, de a, de li. Qu'en est-il de q, cite, pre, dfn, et tant d'autres. Comment les connaître et les découvrir ?
  
  Les balises HTML et leur familles
  
  14:16
- Structurer un document, c'est avant tout définir l'ensemble des éléments et préférences qui le compose en usant de balises appropriées.
  
  La nature du contenu de la page
  
  10:27
- Des balises sont oubliées mais ne sont pas obsolètes, d'autres apparaissent et ne seront pas reconduites dans la prochaine version du HTML. Certaines donnent l'impression de double-emploi et pourtant !
  
  Les balises
  
  08:34
- Structurer, c'est aussi une affaire d'architecture. Comment notre page et notre site doivent-ils se construire ? Visuel puis structure ou structure que l'on habille ?
  
  La structure globale des pages et du site
  
  12:14
- On parle souvent de pages blanches et de sites qui se construisent, mais on oublie que bien souvent nos clients ont déjà du contenu en ligne qu'il serait dommage de ne pas utiliser. Par contre le HTML aura forcément besoin d'un petit coup de fraîcheur.
  
  Nettoyage HTML
  
  11:08
Nous avons exploré les bases principales et redéfini les termes pour le HTML, nous allons maintenant faire de même pour les CSS.

Synthèse récapitulative CSS
- Bien que cela semble nouveau, les CSS3 ont proposé une première version Draft en 2001. Que nous propose CSS3 de si alléchant ?
  
  CSS3 : Quoi de neuf sous le capot ?
  
  10:24
- Les balises sont soit de type Bloc, soit de type Inline. Commençons par explorer les modes de fonctionnement du modèle de boîte et testons ses réactions en fonction des contextes et des navigateurs.
  
  Boîte de type Bloc
  
  11:32
- Procédons de même avec les éléments de type Inline. On sous-estime ou on méconnaît parfois les possibilités de ces types d'éléments.
  
  Boîte de type Inline
  
  05:16
- Bien comprendre et utiliser les diverses unités va souvent nous permettre de mieux appréhender le changement de typo par l'utilisateur ou la gestion et le comportement de l'interface lorsque l'internaute redimensionne son écran ou sa fenêtre.
  
  Les diverses unités
  
  15:20
- Les valeurs attribuées aux propriétés peuvent revêtir différentes formes en passant par des valeurs décimales, des valeurs hexadécimales, des valeurs de chaînes, etc. Nous allons explorer diverses possibilités qui peuvent parfois nous ouvrir des portes et souvent nous faciliter la vie.
  
  Divers types de valeurs d'unité
  
  08:08
- Au cours de ce tutoriel vidéo nous allons explorer le comportement de nos typographies en fonction des unités de description utilisées, des navigateurs et de l'interaction de l'utilisateur sur la taille d'affichage des textes pour un meilleur confort de lecture.
  
  Unités utilisées pour la typographie
  
  10:03
- En fonction de l'étape précédente nous allons mettre en place une approche pour initialiser la valeur référence de base pour les tailles de nos textes. Nous mettrons également en évidence l'utilisation des propriétés prédéfinies de font-size ainsi que les pièges que peuvent faire ressortir des imbrications trop complexes et qui utilisent des valeurs proportionnelles.
  
  Unités de base et propriétés prédéfinies
  
  08:18
- Afin de mieux contrôler le comportement et l'affichage de nos pages par divers navigateurs, il est préférable de prendre en main l'intégralité des propriétés d'affichage et donc de réinitialiser les valeurs par défaut utilisées par chaque navigateur.
  
  La feuille de réinitialisation par défaut
  
  09:36
- Il existe deux manières d'écrire la syntaxe de nos déclarations CSS : la forme courte et la forme longue. Chacune possède ses avantages et ses inconvénients.
  
  Ecriture courte VS écriture longue
  
  07:44
- Nous allons explorer les diverses manières d'apporter du style à nos pages : liaison, importation, imbriquée dans la page ou dans la balise, feuilles de style, feuilles alternatives ou feuilles de conception, etc.
  
  Les feuilles en cascade
  
  21:11
- Quelles sont les règles qui priment ? Comment se hiérarchisent l'information des déclarations, les IDs, les classes, les balises ? Nous allons refaire un tour sur les précédences et voir quels outils Dreamweaver met à notre disposition pour défricher des feuilles complexes.
  
  Le poids des règles
  
  04:01
- Aujourd'hui la séparation contenu / contenant nous permet de libérer et d'adapter beaucoup plus facilement la créativité visuelle en adoptant les CSS. Pourtant beaucoup de sites aujourd'hui utilisent des CSS et donnent une représentation en tableau du contenu.
  
  Mise en page en tableau ou tableau en CSS ?
  
  05:01
Comment positionner les éléments dans l'espace et le volume de la page ? Il existe diverses possibilités qui apportent chacune des avantages et des inconvénients. Nous allons les explorer une à une.

Le positionnement
- Première possibilité : utiliser le flux d'information et simplement jouer avec des toises et entre-toises pour chaque élément afin de les positionner différemment en fonction de leur voisinage. Nous en profiterons pour explorer les éléments de type Bloc et Inline ainsi que les fusions de marge.
  
  Le positionnement par bloc
  
  11:11
- Qu'il s'agisse simplement d'un élément ou d'un bloc plus conséquent ou carrément d'un corps de page entier, il existe diverses techniques qui permettent de centrer le contenu. Attention ! Si verticalement et horizontalement elles peuvent s'approcher de manière identique, parfois certaines propriétés peuvent induire en erreur.
  
  Centrage des blocs et Inline
  
  10:43
- Il n'existe pas que le mode d'affichage de type Inline ou Bloc. Nous avons accès à toute une variété de possibilités. Malheureusement les navigateurs ne les prennent pas toutes en compte.
  
  Le mode display
  
  18:11
- Internet Explorer, entre sa version 5 et 7, possède une propriété haslayout qui permet parfois de nous sortir de l'embarras lors de l'affichage des pages, ou parfois causer un bug, ou du moins un comportement non souhaité. Nous allons mettre ceci en évidence au cours de ce tutoriel vidéo.
  
  La propriété haslayout de IE de 5 à 7
  
  05:31
- Une fonctionnalité CSS qui peut nous aider dans le positionnement distributif, dans la mise en place de nos interfaces trois colonnes et dans bien d'autres situations complexes : le positionnement par floataison. Nous allons en observer ses avantages et ses inconvénients.
  
  Le positionnement par floataison
  
  10:55
- Parfois, les objectifs d'affichage sont compromis par le flux du document, il faut veiller autant que possible à ne pas tomber dans une interaction entre contenu et contenant.
  
  La floataison et le flux du document
  
  05:09
- La floataison d'un élément peut engendrer des comportements inattendus ou du moins non souhaités par le reste du contenu du flux de la page. Il nous faut alors avoir recours à la propriété Clear. Nous allons explorer deux pistes, une en punaisant la propriété dans le contenu et l'autre en utilisant exclusivement les styles.
  
  Le nettoyage de floataison
  
  10:36
- La position relative nous permet de décaler un élément par rapport à sa position dans le flux. Le reste du flux n'en est pas affecté et cela peut souvent nous aider à récupérer des visuels.
  
  Positionnement par position relative
  
  03:48
- Souvent confondu avec un positionnement par rapport à la page, nous allons au cours de ce tutoriel vidéo explorer le positionnement absolu et voir comment le contrôler.
  
  Positionnement par position absolue
  
  04:02
- Bien que cela utilise les expressions d'Internet Explorer, nous allons approcher une manière d'utiliser le positionnement fixe d'un élément au sein d'un flux.
  
  Positionnement par position fixe
  
  11:32
Si l'on s'appuie sur les modèles d'affichage en grille, il est souvent intéressant de se baser sur un Framework qui nous permet de rapidement dresser le gabarit de nos pages. Nous profiterons de ce chapitre pour faire rapidement un tour des outils nous permettant de rapidement créer ces types de mise en pages.

Les gabarits de page
- Commençons par définir ce qu'est une grille, comment cela fonctionne, et quels peuvent en être les avantages et les inconvénients.
  
  Qu'est-ce qu'une grille ?
  
  05:16
- Le plus simple reste de mettre en application la mise en pages avec une grille utilisant un Framework. Au cours de ce tutoriel vidéo nous utiliserons un 960px, un Framework parmi tant d'autres !
  
  Premier pas avec 960px
  
  14:46
- Il existe sur le web diverses sources de modèles qui nous permettent de rapidement mettre en place des structures d'interface et de pouvoir ensuite décliner.
  
  Modèles et Templates
  
  02:12
- Couplées à ces structures, les unités de mesure nous permettent d'associer nos interfaces à des comportements particuliers en fonction du redimensionnement de la fenêtre des navigateurs. Il est important de se poser la question sur ce choix de type d'interface.
  
  Les types d'interface
  
  04:18
- Dreamweaver nous propose lui aussi ses modèles de pages qu'il est facile d'utiliser et de personnaliser. Nous allons rapidement brosser le tableau de ces fonctionnalités et en voir le principe d'utilisation.
  
  Utilisation des modèles Dreamweaver
  
  08:55
Les CSS sans les sélecteurs ne seraient qu'à moitié fonctionnels. Voyons quels sont les outils de sélection d'éléments que nous avons à disposition et qui nous permettent bien souvent d'éviter une classite importante.

Les sélecteurs
- Commençons par observer l'ensemble des types d'association, les définitions de balises directes, de balises enfant, d'enfants adjacents, de descendants, etc.
  
  Les divers types
  
  11:57
- En fonction de la manière de les écrire, les sélecteurs ne vont pas avoir la même signification, p.classe est différent de .classe p. Nous allons observer plusieurs combinaisons ainsi que la manière de rendre nos sélecteurs encore plus fins.
  
  Les imbrications
  
  09:00
- Il est également possible de filtrer les sélecteurs en utilisant les attributs des balises que nous souhaitons atteindre. Bien que les navigateurs ne soient parfois pas toujours tous au rendez-vous, il est intéressant de faire un tour d'horizon de ces possibilités.
  
  Le filtrage par attributs
  
  08:08
- Observons tour à tour les comportements et les possibilités que nous offrent les pseudo-classes et les pseudo-éléments.
  
  Les pseudo-classes - partie 1
  
  13:54
- Continuons l'exploration des pseudo-classes et pseudo-éléments, qu'ils appartiennent aux CSS2 ou au CSS3.
  
  Les pseudo-classes - partie 2
  
  24:37
- Bien que cette fonctionnalité d'Internet Explorer soit gourmande en ressources et qu'il ne faille y avoir recours qu'avec une extrême modération, les expressions sont une porte de sortie entre la version 5 et 7 pour atteindre certains comportements CSS non pris en charge par le navigateur.
  
  Les expressions d'Internet Explorer
  
  10:33
- Autres fonctionnalités de sélection propres à Internet Explorer, les commentaires conditionnels nous permettent de ne pas surcharger les classes des autres navigateurs et de ne cibler que la ou les versions d'Internet Explorer souhaitées.
  
  Les commentaires conditionnels
  
  10:47
Sans entrer dans la véritable partie sur le web sémantique en abordant l'ontologie et des langages comme OWL, nous allons voir qu'il peut être intéressant de se poser la question sur la manière de nommer nos classes et IDs.

Sémantique et micro-formats
- Commençons par prendre en compte le fait que l'internaute peut également agir sur les CSS ou sur la mise en pages de nos documents.
  
  Gestion des styles par les navigateurs
  
  05:52
- Il y a plusieurs années Eric Meyer et Simon ont émis l'idée d'une identification de page de manière précise. L'idée d'une signature CSS a fait son chemin.
  
  Idée d'une signature CSS
  
  04:04
- Voyons comment rendre le contenu de nos pages significatifs d'une part structurellement parlant, mais également d'un point de vue sémantique. Nous pourrions peut-être aussi utiliser un vocabulaire contrôlé pour le nommage des zones principales.
  
  Sémantique dans les nommages
  
  05:07
- Pourquoi ne pas faire appel à l'utilisation de micro-formats pour certaines informations, comme les adresses, les identifications et autre données pouvant être échangées entre applications. Nous mettrons en exemple l'utilisation de vcard pour l'adresse du pied de page et la mise en relation avec Greasemonkey sous Firefox.
  
  Définitions des micro-formats
  
  12:09
- Faisons rapidement le tour de ce que serait l'idée d'un web sémantique et voyons les principaux acteurs : les sources d'informations et la première candidate release du langage OWL.
  
  L'idée du web sémantique
  
  02:32
Seules balises interactives du HTML, les liens peuvent être utilisés de manière assez optimisée pour gérer nos boutons, barres de menus et cartes interactives. Nous allons en explorer quelques applications possibles.

Eléments de liens et boutons
- Les liens possèdent des pseudo-classes et des pseudo-éléments qui favorisent l'interaction avec l'utilisateur et l'ouverture des voies dans une meilleure lisibilité de l'information accessible.
  
  Les pseudo-classes de liens
  
  14:25
- Un lien peut devenir un élément de bouton uniquement en utilisant des couleurs et des CSS. De là à le lier avec d'autres liens pour devenir une barre de menus, il n'y a qu'un pas.
  
  Créer un bouton par couleur et typo
  
  07:24
- Si on substitue les couleurs par des images d'arrière-plan, on peut alors obtenir un bouton plus graphique. Pour gérer le pré-chargement on peut alors jouer des CSS et n'utiliser qu'une seule image.
  
  Créer un bouton par image
  
  08:44
- Il est possible de n'utiliser qu'une seule image pour gérer l'ensemble de nos barres de menus ou d'autres éléments graphiques qui sont interactifs.
  
  Les barres de menus
  
  14:06
- Dans cette optique, on peut poursuivre le principe d'utilisation d'une seule image également pour gérer les cartes-image interactives.
  
  Les cartes-image
  
  14:02
Si l'on regarde de près, tout contenu de page n'est qu'un ensemble de listes. Un paragraphe n'est lui-même qu'une liste de phrases, qui sont elles-mêmes des listes de mots, etc. Donc tout ce qui n'est pas décrit par une balise primaire du HTML peut l'être par des listes. Explorons ces outils !

Les listes d'informations
- Comment utiliser des listes élémentaires UL / OL-LI .zuz ? Quand faire appel à des listes de définitions DL-DT / DD ? Nous allons au cours de ce tutoriel vidéo approcher les mécaniques de chacune.
  
  Gestion des listes
  
  11:56
- Abordons ici une utilisation des listes de définitions qui peut souvent être utile et plus adaptée pour structurer des contenus classiques que l'on trouve souvent armés par des balises DIV, H4 et autre P.
  
  Les listes de définitions
  
  05:49
- Suite au chapitre sur les liens, nous allons voir comment avec quelques points d'ancrage il est possible d'ouvrir les portes du visuel de creatines listes pour les transformer en barre de sélection à onglets.
  
  Les listes à onglets
  
  06:30
- Dès que le menu devient plus complet et complexe, les listes vont s'imbriquer les unes dans les autres. Nous allons voir les mécaniques à mettre en place et les complexités à anticiper d'un point de vue CSS justement pour gérer ces listes imbriquées.
  
  Report de liste sur un menu
  
  15:15
Bien d'autres sujets restent à explorer : les formulaires, la gestion des médias, les diverses destinations des CSS, le DOM Scripting et les CSS, l'accessibilité et les CSS, le XML et XSL, des trucs et astuces ou encore des cas d'étude, et bien plus encore !

Conclusion
- La liste pourrait donner suite à un nouveau volume. Nous espérons que ce premier volume sur les outils de base répondra déjà en partie à vos attentes sur l'utilisation et la compréhension des CSS.
  
  Conclusion
  
  00:49

Réaliser une grille de repères

de : Comprendre et utiliser les CSS

À propos de cette vidéo

Un extrait de : Comprendre et utiliser les CSS

Infos sur la vidéo en cours de lecture