Atelier P8 | Listes de diffusion | Document numérique | Numérisation
Comme souvent, la première opération de structuration consiste à nommer les objets que l'on veut structurer. Lors de la création des calques, Dreamweaver leur a assigné un identifiant (ID) sans grande signification. Nous allons donc remplacer cet identifiant par une dénomination qui ait un sens, pour nous, dans notre travail documentaire. L'identifiant d'un calque (comme d'un autre objet) apparaît dans la palette des propriétés. C'est là que nous pouvons le remplacer (rappel : l'affichage d'une palette est contrôlé à travers le menu "fenêtres").
En fait, ce travail de nommage est déjà largement réalisé. En effet, les calques créés correspondent très exactement à des éléments de notre modèle documentaire. On serait donc tenté de remplacer l'ID de chaque calque par le nom de l'élément lui correspondant dans le modèle documentaire. L'idée est bonne mais on ne peut l'appliquer telle quelle, car il est interdit de donner le même ID à deux calques (c'est bien le moins que l'on puisse attendre d'un identifiant !). Or, nous avons des éléments qui apparaissent dans plusieurs contextes ; par exemple, les éléments "TITRES" sont fréquents. Si l'on donnait l'identifiant "titre" à chaque calque recevant un élément "TITRE" on violerait manifestement la loi d'unicité.
Il va donc falloir ruser. Les trois règles suivantes permettront de s'en tirer facilement, dans la majorité des cas :
Cette opération de "toilettage" terminée, on peut entrer dans le vif du sujet.
En cours de construction du gabarit, on obtient un résultat qui ressemble à l'image suivante :
À la fin de ce processus on aura :
La première opération correspond à une extraction : on extrait du modèle documentaire les éléments nécessaires dans cette vue. En effet, on n'est pas obligé de représenter tous les éléments. Leur intérêt dépend de l'utilisation qui sera faite de cette vue.
La deuxième opération est plus complexe. Elle combine une organisation spatiale des informations à une structuration de ces informations. La première est une expression visuelle de la seconde.
En plaçant un calque est à l'intérieur d'un autre calque, on exprime à la fois l'endroit où doit être affichée l'information et le fait que le calque intérieur appartient au calque englobant. Cette appartenance est une notion structurelle (au sens documentaire). L'imbrication des calques est alors l'expression graphique d'une imbrication structurelle.
Pour le moment, Dreamweaver nous a seulement permis d'exprimer graphiquement l'imbrication. Or, il est possible d'exprimer également l'imbrication structurelle.
Comment Dreameaver figure-t-il l'appartenance structurelle ?
À chaque fois que nous avons créé un calque, nous avons vu que Dreamweaver ajoutait un pictogramme en haut de la page.
Le fait que tous ces pictogrammes se retrouvent à cet endroit signifie que tous les calques appartiennent directement au calque général (un calque préexistant recouvrant toute la page). Ce n'est pas ce que nous voulions exprimer en imbriquant les calques... Nous allons donc indiquer explicitement à Dreamweaver quelle est cette structure implicite. Pour ce faire, nous allons déplacer (glisser-déposer) les pictogrammes des calques.
L'animation suivante montre comment on signifie que le calque destiné à recevoir l'intitulé "Coordonnées" appartient au calque des coordonnées. On procède en deux étapes :
Il existe une variante à cette méthode, moins visuelle mais plus pratique si l'on a l'habitude de manipuler des vues de type" plan". Pour travailler, on va ouvrir la palette des calques (on ouvre cette palette à partir du menu "fenêtres"). Dans l'animation suivante, on indique que le calque "inscription" appartient au calque "coordonnees" et l'on précise qu'il suit logiquement l'intitulé.
Quelle que soit la méthode employée, on remarque que cette opération de restructuration provoque un déplacement du calque; il faudra donc le replacer. La raison en est que la position d'un calque est définie relativement au calque auquel il appartient et non ne manière absolue, sur la page (le calque général).
On répétera l'opération pour tous les calques, jusqu'à ce que l'imbrication structurelle des calques corresponde à leur imbrication graphique. Ceci ne présente aucune difficulté mais peut s'avérer fastidieux, surtout si l'on avait précédemment positionné les calques avec précision.
Dorénavant, on procédera donc différemment. Deux stratégies se présentent à nous.
Première stratégie. On se contente de réaliser un brouillon de maquette, les calques n'étant que sommairement positionnés. On ne les (re)placera avec précision qu'après la restructuration.
Seconde stratégie. Dès la création d'un calque, avant même de le positionner, on définit son appartenance structurelle (glisser-déposer du pictogramme associé).
On peut se demander à quoi sert ce travail supplémentaire ; après tout, la structuration du document était déjà implicitement lisible dans l'organisation visuelle de l'information. On va pourtant voir l'intérêt de la chose.
Avant restructuration, le repositionnement d'un calque englobant obligeait à repositionner manuellement tous les calques visuellement contenus. Après restructuration, le repositionnement d'un calque entraîne automatiquement celui de tous les calques structurellement contenus.
Après restructuration, la palette des calques rend compte de l'imbrication structurelle entre les calques.
La structure définit une hiérarchie de calques. Lorsqu'un navigateur interprète les styles associés à un document, il part du principe que tout élément structurellement inclus dans un autre hérite de ses propriétés. Donc, sauf mention contraire, un calque (un élément de type DIV) hérite du style du calque qui l'englobe. Il en résulte une rationalisation et une simplification phénoménale de la mise en page.
Il existe quatre manières d'affecter la représentation du contenu d'un calque (et plus généralement d'un élément quelconque) :
La mise en forme directe ressemble beaucoup à l'application directe de propriétés typographiques, comme on peut le faire avec un traitement de textes. Cette méthode, rapide et sale (quick and dirty), convient pour la production d'un document isolé, la plupart du temps non structuré. Ce n'est manifestement pas la situation que nous avons à traiter. Restent les deux autres manières de faire.
L'application d'un style d'élément repose sur un mécanisme d'association entre un ensemble de règles de représentation et le nom d'un élément. En toute rigueur, cette technique est l'une des plus puissantes mais elle rencontre encore de sérieuses difficultés de diffusion. C'est celle que nous aimerions appliquer à nos fiches structurées. Elle nous dispenserait d'avoir à inventer des éléments calques qui viennent se substituer aux éléments du modèle documentaire. Ne désespérons pas... Nous verrons un moyen d'arriver au même résultat, par des moyens détournés.
L'application d'un style identifié à un calque exploite un mécanisme d'association entre un ensemble de règles de représentation et l'identifiant (ID) du calque. Nous verrons plus loin comment on procède.
L'application d'un style familial exploite un mécanisme semblable au précédent mais s'appuie un nouvel attribut du calque : sa classe (voir plus loin).
Ces mécanismes peuvent être combinés.
Si l'identifiant (unique) ne doit, par définition, être partagé par aucun autre calque, la classe (CLASS) doit, par destination, être partagée par plusieurs calques. En effet, la classe sert à exprimer l'idée que plusieurs calques (ou éléments quelconques) appartiennent à une même famille. Ainsi, on pourra, par exemple, dire que tous les calques contenant des titres appartiennent à la classe "titre".
Cet exemple nous montre une voie intéressante. En effet, nous avons vu précédemment que l'identifiant de calque ne pouvait correspondre exactement au nom d'élément, en raison de la loi d'unicité. L'attribut de classe ne tombant sous le coup de cette loi, pourquoi ne pas l'utiliser comme marqueur d'éléments ? Comme le suggère l'exemple, on peut construire une analogie stricte entre le fait d'être un élément de type "titre" et le fait d'appartenir à la famille des titres. C'est donc ce que feront, systématiquement.
En nous appuyant sur
nous parviendrons à associer un style à un élément.
Pour y parvenir, nous devrons intervenir directement sur le texte brut de la fiche structurée. En effet, on constate que la palette des "propriétés" de Dreamweaver ne permet pas de modifier facilement l'attribut CLASS. Seul l'attribut ID apparaît. Nous allons donc utiliser un nouvel outil : l'éditeur de balises (tag editor).
Pour définir la classe d'un calque, on commence comme pour définir son identifiant : on sélectionne le calque. Une fois sélectionné, ses propriétés usuelles apparaissent dans la palette, mais pas sa classe. On invoque alors l'éditeur de balise. Il affiche une petite fenêtre contenant le texte de la balise d'ouverture du calque :
En plaçant le point d'insertion (curseur) juste après l'attribut "id", on voit apparaître un menu déroulant proposant d'insérer plusieurs attributs. On choisit l'attribut "class". Ceci provoque l'ajout automatique d'un texte et place le point d'insertion à l'endroit où l'on doit saisir le nom de la classe.
Dans l'animation suivante, on voit comment on procède pour affecter la classe "titre" au calque contenant le titre de l'élément "coordonnées".
Parmi les quatre techniques présentées plus haut, seules les deux dernières vont retenir notre attention. La première est exclue parce qu'elle est inappropriée à notre démarche normative. La seconde est exclue parce que tous éléments du modèle documentaire sont projetés dans un élément HTML unique : DIV.
Nous pouvons donc associer une ou plusieurs règles à un calque particulier en le désignant par son identifiant (ID), ou par sa classe (CLASS), ou par les deux. Soit, mais comment fait-on pour dire à Dreamweaver d'appliquer un style à un identifiant où à une classe ? Un peu de patience...
Pour bien comprendre comment fonctionnent les styles, il faut savoir qu'on ne dispose pas, comme dans MS-Word, d'un réservoir de styles. On ne peut donc pas prendre un style et l'appliquer à quelque chose, qu'il s'agisse d'un calque ou d'une classe. Le langage d'expression des style utilisé ici (CSS) fonctionne différemment. Lorsqu'on crée un style on est obligé de dire à quoi on l'appliquera. On ne peut donc pas créer de style sans préciser, avant toute chose, à quoi il s'appliquera. Nous parlerons donc de "règles" de styles en retenant la définition suivante : une règle de style est un couple décrivant simultanément des caractéristiques de mise en page et à quoi doivent être appliquées ces caractéristiques. Et nous appellerons "feuille de styles", un ensemble de règles de styles. Voyons comment Dreamweaver nous permet de créer une règle de styles...
On fera appel à la palette des styles CSS (cascading style sheets).
Nous travaillerons dans l'éditeur de styles et nous laisserons Dreamweaver appliquer ces styles automatiquement. Pour activer l'éditeur de style on sélectionne le pictogramme ad hoc.
Premier constat : la feuille de styles est vide.
Cela signifie que notre document ne contient aucune règle de style — ce qui peut paraître déroutant pour un utilisateur de logiciel de traitement de textes. On choisit donc de créer un nouveau style. Dreamweaver propose alors de choisir le type de style que l'on souhaite créer. Question stupide puisque, ayant choisi de travailler avec la palette CSS, nous choisirons évidemment CSS (une erreur d'ergonomie...).
Le choix crucial se situe dans le champ "sélecteur". C'est là qu'on indique à quoi devra s'appliquer le style que l'on va créer. Quoi qu'il contienne, nous devons donc remplacer le texte qui y figure par la désignation de la "cible" du style. Si nous voulons créer une règle de style s'appliquant à tous les calques de la classe "titre", nous écrirons ".titre" dans ce champ. Si nous voulons créer une règle s'appliquant au calque dont l'identifiant est "coordonnees", nous écrirons "#coordonnees". C'est aussi simple que cela. Si l'on veut qu'une règle s'applique à une classe, on lui donne pour sélecteur le nom de cette classe précédée d'un point. Si l'on veut qu'elle s'applique à un calque particulier, on lui donne pour sélecteur l'identifiant du calque précédé d'un dièse.
La validation du sélecteur (OK) ouvre sur l'éditeur de styles proprement dit. La présentation des possibilités de cet éditeur sort du cadre de ce support. Retenons simplement qu'il permet de définir une foule de propriétés : la police de caractères, la couleur de fond, la justification, la pose d'un cadre autour du calque... Bref, presque tout ce à quoi nous a habitué un logiciel de traitement de texte.
Une fois le style défini, que faut-il faire pour l'appliquer ? Rien! N'oublions pas qu'un style est indissociable de la règle de style à laquelle il appartient. En créant cette règle nous avons défini à quoi il fallait l'appliquer (le sélecteur). Les règles s'appliquant automatiquement, les styles font de même.
Une règle de style s'applique évidemment au(x) calque(s) désigné(s) par son sélecteur. Cela signifie qu'elle se propage à l'intérieur de tout calque structurellement inclus (d'où l'importance d'avoir structuré les calques). Ainsi, dans l'exemple de document utilisé précédemment, une règle définie pour le calque "coordonnees" s'appliquera aux 5 calques qu'il contient. Si l'on décide que le texte doit être affiché en bleu, tous les textes de ces calques seront bleus.
Dans le même exemple, si nous décidons que tous les calques de la classe "titre" doivent centrer leur texte, l'intitulé "coordonnées" sera centré. Mais il sera également en bleu. Ceci nous montre qu'un calque (généralement tout élément) est sous l'influence de plusieurs règles de styles. Le style effectivement appliqué à un calque sera toujours la résultante de toutes les influences qu'il subit.
Dans l'exemple précédent, les influences étaient complémentaires. L'une portait sur la couleur, l'autre sur l'alignement. Mais on imagine facilement qu'un tel fonctionnement peut engendrer des conflits. Imaginons que la règle portant sur les calques de la classe titre précise que le texte doit être marron... Le conflit est alors réglé sur des conventions de préséance, comme dans un protocole diplomatique bien huilé. En l'occurrence, le texte des titres apparaîtra en marron. La convention est la suivante : une règle désignant explicitement un calque a toujours priorité sur les règles héritées.
Dans un autre ordre d'idées, on peut imaginer d'autres conflits. Ainsi, un calque peut tomber directement sous le coup d'une règle d'identifiant et d'une règle de classe. Le principe étant que la priorité est toujours donnée à la règle plus précise, la règle d'identifiant l'emportera.
Comment faire pour que tous les titres du calque "coordonnees" apparaissent en vert, sans modifier la couleur des autres textes du calque, et sans modifier la couleur des titres des autres calques ?
En l'état actuel de nos connaissances, nous n'aurions d'autre recours que de créer des règles de styles spécifiques pour chaque titre figurant dans ce calque, en utilisant un sélecteur d'identifiant. Mais pourquoi ne pas écrire une règle qui fasse exactement ce que l'on demande ? Nous voudrions disposer d'un sélecteur désignant tous les calques de classe "titre" appartenant au calque d'identifiant "coordonnees". Ce type de sélecteur contextuel existe et s'écrit "#coordonnees Titre".
Grâce à ce mécanisme, notre famille de sélecteurs s'enrichit considérablement. Nous pouvons définir des règles générales, que nous particulariserons suivant des contextes, de plus en plus précis (si on le souhaite).
En reprenant l'exemple précédent,
L'application de ces trois règles ferait que les titres du calque "coordonnees" seraient centrés, en police Arial, corps 18, en vert.
On constate que l'exploitation du potentiel des règles de styles (CSS) repose sur un travail préalable de nommage des calques (éléments) et de structuration du document. Sans ce travail, nous n'aurions pas la possibilité de composer les sélecteurs que nous voulons.
Si la structuration du document semble rigidifier la démarche, on s'aperçoit que l'interprétation dynamique des règles et la propagation des styles offrent, en réalité, une grande souplesse.
On regrettera que le travail de nommage et de structuration réalisé lors de la composition du document structuré ne puisse pas être automatiquement réexploité, sans avoir à réécrire le document. Heureusement, cette limitation n'est que temporaire et liée à un état de diffusion des techniques.
Page réalisée par Asdrad TORRES
Dernière mise à jour : Ven 14 juin 2002