Secrétariat du Conseil du Trésor du Canada
Symbole du gouvernement du Canada
Passer au contenu | Passer aux liens institutionnels

Liens de la barre de menu commune

SCT > DDPI > NSI 2.0 > Boîte à outils de la NSI 2.0

Liens institutionnels

Guide technique pour le modèle de page de la Normalisation des sites Internet du gouvernement du Canada

Table des matières

1.0 Avantages du modèle de page NSI du GC

Le modèle de page de la Normalisation des sites Internet (NSI) du gouvernement du Canada (GC) a été conçu au cours de plusieurs mois pendant l'été 2006 par une équipe d'experts techniques recrutés auprès de diverses institutions gouvernementales. Le modèle de page a pour objet d'améliorer et de normaliser les fonctions de navigation et d'accessibilité des sites Web du GC , tout en évitant aux institutions de devoir développer une solution technique en vue de la mise en oeuvre de la NSI 2.0.

Voici certains des principaux avantages de l'adoption et de l'adaptation du modèle de page NSI du GC par les institutions :

  • le modèle de page est conforme à la spécification XHTML 1.0 Strict et donc rigoureusement compatible avec les technologies adaptées, les dispositifs portatifs, les navigateurs et les moteurs de recherche;
  • le modèle de page a été soumis avec succès à des essais qui ont fait appel à un large éventail de technologies adaptées et d'ensembles navigateur‑plateforme afin de garantir aux Canadiens l'accessibilité aux pages Web, peu importe la technologie qu'ils utilisent;
  • les principaux composants du modèle de page, par exemple la barre de menu commune, le menu latéral et la zone de contenu comprennent des balises d'en‑tête qui simplifient la navigation au moyen de technologies adaptées telles que les lecteurs d'écran;
  • une disposition et une conception sans tableau simplifient la navigation par le client et réduisent la complexité des pages Web;
  • les données de présentation sont centralisées dans des fichiers CSS généraux, ce qui permet de simplifier l'entretien des pages et la mise à jour des sites, et grâce auxquelles les clients peuvent outrepasser le formatage visuel et supprimer les obstacles qui empêchent d'accéder au contenu des pages Web;
  • le modèle de page fait usage de polices à taille variable et d'éléments de navigation textuels qui facilitent l'accès aux pages Web et simplifient la navigation au moyen de technologies adaptées;
  • la fonctionnalité des fichiers CSS qui facilitent l'impression adapte les pages aux imprimantes et prévient l'impression des éléments de page inutiles;
  • la capacité d'extension sans restriction, moyennant des modifications mineures aux fichiers CSS, permettront d'accroître l'accessibilité à l'avenir (la capacité d'extension a été mise à l'essai avec succès dans un large éventail d'ensembles navigateur‑plateforme).

2.0 Introduction aux modèles de page d'accueil

L'usage des modèles de page d'accueil est strictement limité au principal point d'accès d'un site ou sous-site.

2.1 Variantes linguistiques du modèle de page d'accueil

Le modèle de page NSI du GC comprend trois variantes linguistiques distinctes du modèle de page d'accueil : une bilingue, une unilingue, une multilingue. Chacune des variantes linguistiques comprend deux variantes de zone de message.

2.1.1 Modèle de page d'accueil bilingue

L'usage du modèle de page d'accueil bilingue est obligatoire dans les sites Web qui doivent être accessibles simultanément dans les deux langues officielles. Il propose des liens menant au contenu dans les deux langues. Différents modèles qui affichent les langues officielles dans la séquence prescrite sont offerts à l'intention des sites Web des institutions, selon que leur administration centrale est située au Québec ou ailleurs au Canada.

2.1.2 Modèle de page d'accueil unilingue

L'usage du modèle de page d'accueil unilingue est réservé aux sites Web dans lesquels l'offre d'information dans une langue officielle seulement est autorisée. Il comprend un lien menant au contenu dans une langue officielle et un avis bilingue annonçant que le service n'est offert que dans l'une des langues officielles.

2.1.3 Modèle de page d'accueil multilingue

Les institutions peuvent utiliser le modèle de page d'accueil multilingue pour proposer un contenu dans une ou plusieurs langues, qui s'ajoute au contenu offert simultanément dans les deux langues officielles. Il comprend des liens menant au contenu dans des langues supplémentaires sous les liens obligatoires qui mènent au contenu en anglais et en français. Les liens supplémentaires peuvent être configurés en fonction de toute langue dont le contenu est proposé.

2.2 Variantes de zone de message du modèle de page d'accueil

Il existe deux variantes de la zone de message du modèle de page d'accueil : l'une textuelle, l'autre à base d'images.

2.2.1 Modèle à zone de message textuelle (recommandé)

Le modèle comporte une zone de message dont la partie supérieure est à base d'images et la partie inférieure est textuelle. Le texte ne doit pas être incorporé à l'image. Il doit en être séparé et présenté en avant-plan. La partie inférieure textuelle contient le nom de l'institution dans les deux langues officielles.

L'usage du modèle est réservé au principal point d'accès d'un site ou sous-site Web institutionnel.

Nota : L'usage du modèle est recommandé pour une page d'accueil, car la partie textuelle de la zone de message est plus facile d'accès que la zone de message à base d'images seulement.

2.2.2 Modèle à zone de message à base d'images

La zone de message du modèle est occupée au complet par une image. Si le présent modèle est adopté, le texte ne devrait pas y être incorporé, mais plutôt présenté en avant-plan.

L'usage du modèle est réservé au point d'accès principal d'un site ou sous-site Web institutionne.

Nota : L'usage du modèle à zone de message textuelle est recommandé pour les pages d'accueil, car la partie textuelle de la zone de message est plus facile d'accès que la zone de message à base d'images seulement du présent modèle.


Haut de la page

2.3 Exemples de modèles de page d'accueil

2.3.1 Modèles de page d'accueil bilingue

2.3.2 Modèles de page d'accueil unilingue

2.3.3 Modèles de page d'accueil multilingue

3.0 Introduction aux modèles de page de contenu

L'usage des modèles de page de contenu est obligatoire pour toutes les pages sauf le principal point d'accès à un site ou sous-site. Les modèles de page d'accueil doivent être utilisés pour le principal point d'accès.

Le modèle de page NSI du GC comprend trois variantes linguistiques du modèle de page d'accueil. Chacune des trois comprend trois variantes de disposition.

3.1 Variantes linguistiques du modèle de page de contenu

Il existe trois variantes linguistiques du modèle de page de contenu : une pour les sites bilingues, une autre pour les sites unilingues et une troisième pour les sites présentant un contenu dans une ou plusieurs langues autres que l'anglais et le français.

3.1.1 Modèle de page de contenu des sites bilingues et multilingue

L'usage du modèle est obligatoire pour toutes les pages de contenu anglais ou français dans des sites bilingues ou multilingues. Le modèle existe en anglais et en français. Les modèles anglais et français sont unilingues, à l'exception d'un lien dans le menu commun menant au contenu dans l'autre langue officielle.

Les liens menant au contenu dans des langues autres que l'anglais et le français ne doivent pas figurer dans la barre de menu commune des sites multilingues. S'il est nécessaire d'offrir des liens menant à un contenu dans des langues autres que l'anglais et le français, ils doivent être intégrés au menu de gauche ou de droite ou à la zone de contenu.

3.1.2 Modèle de page de contenu des sites unilingues

L'usage du modèle est obligatoire pour toutes les pages de contenu des sites unilingues. Ce modèle existe en anglais et en français. Les modèles anglais et français sont unilingues, à l'exception d'un lien dans la barre de menu commune menant à un avis sur les langues officielles.

3.1.3 Modèle de page de contenu en langues autres que l'anglais et le français

L'usage du modèle est obligatoire pour toutes les pages dont le contenu est présenté principalement dans une langue autre que l'anglais et le français. Il existe des modèles différents à l'usage des institutions, selon que leur administration centrale est située au Québec ou ailleurs au Canada.

3.2 Variantes de disposition du modèle de page de contenu

Il existe trois variantes de disposition du modèle de page de contenu : une à trois colonnes, une à deux colonnes, une à colonne simple.

3.2.1 Modèle à trois colonnes

Le modèle est composé de trois colonnes, soit d'une zone de contenu centrale et de menus latéraux, à gauche et à droite. L'usage du modèle est obligatoire pour la première page de menu du site institutionnel et les premières pages des sous-sites. Toutefois, il peut également servir à des applications Web et aux pages secondaires d'un site Web institutionnel.

Nota : L'usage du modèle à trois colonnes est obligatoire pour les pages principales d'un site Web institutionnel, mais il est recommandé d'utiliser le modèle à deux colonnes pour les pages secondaires, car il offre une plus grande zone de contenu et permet de présenter des pages Web plus brèves.

3.2.2 Modèle à deux colonnes

Le modèle est composé de deux colonnes, soit d'une zone de contenu centrale et d'un menu latéral à gauche. Son usage est recommandé pour toutes les pages secondaires d'un site Web institutionnel. Il permet de présenter des pages Web plus brèves que celles de la disposition à trois colonnes, car il offre une zone de contenu élargie. Le modèle peut également servir à des applications Web.

Nota : Là où il est impossible d'intégrer le contenu au modèle à deux colonnes sans dépasser la largeur de la zone de contenu, le modèle à colonne simple doit être utilisé.

3.2.3 Modèle à colonne simple

Le modèle à colonne simple ne comporte qu'une zone de contenu centrale. Son usage est réservé aux situations où il est impossible d'intégrer le contenu au modèle à deux colonnes des pages secondaires ou des applications Web sans dépasser la largeur de la zone de contenu.


Haut de la page

3.3 Exemples de modèles de page de contenu

3.3.1 Modèles de page de contenu des sites bilingues

3.3.2. Modèles de page de contenu des sites unilingues

3.3.3 Modèles de page de contenu en langues autres que l'anglais et le français

4.0 Introduction aux modèles de page de message de serveur

L'usage des modèles de page de message de serveur est réservé aux messages générés par les serveurs Web et les serveurs d'applications Web.

4.1 Variantes linguistiques des modèles de page de message de serveur

Le modèle de page NSI du GC comprend deux variantes linguistiques du modèle de page de message de serveur, l'une bilingue, l'autre unilingue. 

4.1.1 Modèle de page de message de serveur unilingue

L'usage du modèle est obligatoire pour les messages de serveur des sites unilingues ou de ceux dont la préférence linguistique du client est connue.

4.1.2 Modèle de page de message de serveur bilingue

L'usage du modèle est obligatoire pour les messages de serveur des sites bilingues ou multilingues dont la préférence linguistique du client n'est pas connue. Il existe différents modèles qui présentent les langues officielles dans la séquence prescrite à l'intention des sites Web des institutions, selon que leur administration centrale est située au Québec ou ailleurs au Canada.

4.2 Exemples de modèles de page de message de serveur

4.2.1 Modèles de page de message de serveur unilingue

4.2.2 Modèles de page de message de serveur bilingue

5.0 Téléchargement des modèles de page NSI du GC

Le téléchargement des modèles de page NSI du GC représente un moyen pratique d'obtenir simultanément tous les fichiers à base d'images, CSS et HTML dont vous avez besoin. Vous n'avez qu'à suivre le lien suivant :

6.0 Installation et configuration des modèles

La présente section explique l'installation et la configuration des modèles NSI du GC à l'intention des institutions. Un modèle configuré doit être offert à tous les groupes de création de l'institution. Il est recommandé à chaque institutions d'exécuter le processus une fois afin d'assurer l'uniformité de son site Web.

6.1 Sélection d'un modèle de page d'accueil

Choisissez un modèle de page d'accueil pour l'institution. Par souci d'accessibilité, il est recommandé d'utiliser les modèles à zone de message textuelle plutôt qu'à base d'images.

Le tableau suivant vous permettra de choisir le fichier de modèle de page d'accueil à utiliser :

Langue du site Emplacement de l'administration centrale Variante de zone de message Fichier de modèle
Bilingue Québec Textuelle wp-pa-quebec.html
Images wp-pa-alt-quebec.html
Hors Québec Textuelle wp-pa.html
Images wp-pa-alt.html
Unilingue français s.o Textuelle uniling\wp-pa-ul-fra.html
Images uniling\wp-pa-alt-ul-fra.html
Unilingue anglais s.o. Textuelle uniling\wp-pa-ul-eng.html
Images uniling\wp-pa-alt-ul-eng.html
Multilingue Québec Textuelle multiling\wp-pa-ml-quebec.html
Images multiling\wp-pa-alt-ml-quebec.html
Hors Québec Textuelle multiling\wp-pa-ml.html
Images multiling\wp-pa-alt-ml.html

6.2 Configuration des fichiers à base d'images

  1. Remplacez les fichiers sig-fra.gif et sig-eng.gif dans le répertoire d'images par les images des signatures institutionnelles, sans toutefois modifier les noms des fichiers. Les images doivent être conformes aux exigences suivantes :
    • La signature institutionnelle doit être le seul élément graphique dans l'image.
    • La signature institutionnelle doit utiliser complètement l'espace vertical de l'image, c'est-à-dire que l'image doit être libre d'un supplément d'espace vertical en haut et en bas de la signature institutionnelle.
    • La signature institutionnelle doit être libre d'un supplément d'espace horizontal à la gauche du symbole du drapeau canadien ou des armoiries du Canada.
    • Les signatures institutionnelles qui se servent du symbole du drapeau canadien doivent avoir 20 pixels de haut, sauf dans les cas où un supplément d'espace vertical est nécessaire pour le titre d'usage.
    • Les signatures institutionnelles qui se servent des armoiries du Canada doivent avoir 50 pixels de haut, sauf dans les cas où un supplément d'espace vertical est nécessaire pour le titre d'usage.
  2. Les signatures institutionnelles qui dépassent 260 pixels de largeur doivent être modifiées en largeur et au point de départ du conteneur de liens « saut de navigation ». Les directives se trouvent à la section 6.3.2.17 (Changer la largeur et la position de départ du conteneur de liens « saut de navigation »).
  3. Les signatures institutionnelles qui dépassent 20 pixels de hauteur nécessiteront une modification de l'alignement des images PCIM. Les directives se trouvent à la section 6.3.2.15 (Ajustement de l'alignement des images PCIM).
  4. Remplacez l'image de la page d'accueil dans le répertoire d'images par une image de page d'accueil de l'institution, sans modifier le nom du fichier. L'image de page d'accueil ne doit pas contenir de texte. Pour des motifs d'accessibilité, l'image devra être incorporée au site au moyen de feuilles de style CSS, ce dont traite la section 6.3 (Configuration des fichiers CSS). L'image à remplacer dépendra du modèle de page d'accueil choisi dans la section 6.1 (Sélection d'un modèle de page d'accueil).
    • Zone de message textuelle : Remplacez l'image wp-pa.gif par la nouvelle image de page d'accueil. La nouvelle image doit avoir 600 pixels de largeur et 130 pixels de hauteur. Les présentes directives s'appliquent aux fichiers suivants de modèle de page d'accueil :
      • wp-pa-quebec.html
      • wp-pa.html
      • uniling\wp-pa-ul-fra.html
      • uniling\wp-pa-ul-eng.html
      • multiling\wp-pa-ml-quebec.html
      • multiling\wp-pa-ml.html
    • Zone de message à base d'images : Remplacez l'image wp-pa-alt.gif par la nouvelle image de page d'accueil. La nouvelle image doit avoir 600 pixels de largeur et 250 pixels de hauteur. Les présentes directives s'appliquent aux fichiers suivants de modèle de page d'accueil :
      • wp-pa-alt-quebec.html
      • wp-pa-alt.html
      • uniling\wp-pa-alt-ul-fra.html
      • uniling\wp-pa-alt-ul-eng.html
      • multiling\wp-pa-alt-ml-quebec.html
      • multiling\wp-pa-alt-ml.html
  5. S'il est nécessaire de placer une image en arrière-plan dans la zone de bannière, créez une image à cette fin et sauvegardez‑la dans le répertoire d'images. Elle ne doit pas contenir de texte. Pour des motifs d'accessibilité, l'image devra être intégrée au site au moyen de feuilles de style CSS, ce dont traite la section 6.3 (Configuration des fichiers CSS).

    Nota :     Il est recommandé de placer une couleur plutôt qu'une image en arrière-plan de la zone de bannière. Si le modèle devient extensible à l'avenir, une image d'arrière-plan sera excessivement large si le modèle est rétréci et excessivement étroite s'il est élargi. Sans tenir compte des problèmes posés par l'éventuelle extension du modèle, l'image d'arrière‑plan sera accessible si les exigences suivantes sont satisfaites :
    1. L'image ne doit pas avoir plus de 760 pixels de largeur et 80 pixels de hauteur, sinon elle sera tronquée.
    2. Pour des motifs d'accessibilité, l'image ne doit pas contenir de texte. Certains clients ont de la difficulté à lire du texte incorporé dans une image, car ils ne peuvent fixer la taille de la police ni déterminer les ensembles de couleur d'arrière‑plan et d'avant‑plan. De plus, en évitant d'incorporer le texte à l'image, la même image peut être utilisée dans les pages anglaises et françaises.
    3. La couleur d'arrière‑plan de l'image doit contraster vivement avec le texte en blanc. Sinon, certains clients auront de la difficulté à lire le nom et l'adresse URL de l'institution.
    4. La plus grande partie de l'image doit être de couleur unie, à l'exception des extrémités gauche et droite. Ainsi, tous les clients pourront lire le nom et l'adresse URL de l'institution superposés sur l'image. Si la partie de l'image sur laquelle le nom et l'adresse sont superposés n'est pas de couleur unie, le texte sera difficile à lire.

Haut de la page

6.3 Configuration des fichiers CSS

Le modèle a été développé au moyen de multiples fichiers CSS qui déterminent la disposition et la conception des pages. Nombre d'entre eux ne doivent pas être modifiés, car leur usage garantit que la plupart des navigateurs obtiendront des résultats uniformes.

Les fichiers CSS suivants ne doivent pas être modifiés.

  • css\2col.css : contrôle la disposition des colonnes du modèle à deux colonnes;
  • css\3col.css : contrôle la disposition des colonnes du modèle à trois colonnes;
  • css\base2.css : contrôle la fonction de taille variable de la police de la page de contenu aux fins de la plupart des navigateurs;
  • css\base.css : contrôle la fonction de taille variable de la police de la page de contenu aux fins des navigateurs plus anciens, les classes d'utilitaires et la disposition des éléments du PCIM, de la bannière, de la barre de menu commune, des menus latéraux et du pied de page;
  • css\pf-if.css : contrôle la fonctionnalité d'imprimante du modèle;
  • css\wp-pa.css : contrôle la fonction de taille variable de la police de la page d'accueil aux fins des navigateurs plus anciens et la disposition de la page d'accueil;
  • css\wp-pa2.css : contrôle la fonction de taille variable de la police de la page d'accueil aux fins de la plupart des navigateurs.

Les fichiers CSS suivants peuvent être modifiés :

  • css\base-institution.css : contrôle les propriétés personnalisables de la page de contenu;
  • css\wp-pa-institution.css : contrôle les propriétés personnalisables de la page d'accueil;
  • css\institution.css : contrôle les classes de feuilles de style CSS propres à l'institution. Les classes de feuilles de style CSS utilisées par de nombreuses pages doivent être placées dans ce fichier.

6.3.1 Configuration du fichier css\wp-pa-institution.css

Des feuilles de style CSS déterminent tant la disposition que la conception des modèles de page d'accueil. La présente section offre des directives sur la configuration de certains des éléments visuels des modèles de page d'accueil par la modification du fichier css\wp-pa-institution.css.

6.3.1.1 Changement des couleurs d'arrière‑plan/avant‑plan de la zone de message textuelle (modèle à zone de message textuelle seulement)

Vous pouvez changer les couleurs d'avant‑plan et d'arrière‑plan de la zone de message textuelle des modèles (wp-pa.html et wp-pa-quebec.html) en modifiant les propriétés « background‑color » et « color » de la classe « div.headcontainer »

div.headcontainer {
      background-color: #CC9;
      color: #000;
}

6.3.1.2 Changement de l'image d'arrière‑plan de la zone de message à base d'images

Vous pouvez changer l'image d'arrière‑plan de la zone de message à base d'images en remplaçant le premier élément de la propriété « background » des classes « div.msgarea » et « div.msgareaalt ».

div.msgarea {
      background: url(../images/wp-pa.gif) #69C no-repeat;
}
div.msgareaalt {
      background: url(../images/wp-alt.gif) #696;
}

6.3.1.3 Changement des couleurs d'arrière‑plan/avant‑plan de la zone de message à base d'images

Vous pouvez changer les couleurs d'arrière‑plan et d'avant‑plan de la zone de message à base d'images en modifiant la propriété « color » de la classe « .msgarea h1, msgareaalt h1 » et le deuxième élément de la propriété background des classes « msgarea » et « .msgareaalt ».

.msgarea h1, .msgareaalt h1 {
      text-align: center;
      color: #FFF;
      font-weight: bold;
}
.msgarea {
      background: url(../images/wp-pa.gif) #69C no-repeat;
}
.msgareaalt {
      background: url(../images/wp-pa-alt.gif) #69C no-repeat;
}

6.3.1.4 Changement de la position verticale du texte dans la zone de message à base d'images

Vous pouvez changer la position verticale du texte dans la zone de message à base d'images en modifiant la propriété « padding-top » des classes « div.msgarea h1 » et « div.msgareaalt h1 ».

div.msgarea h1 {
      padding-top: 55px;
}
div.msgareaalt h1 {
      padding-top: 160px;
}

6.3.2 Configuration du fichier css\base-institution.css

Des feuilles de style CSS déterminent tant la disposition que la conception des modèles de page de contenu. La présente section offre des directives sur la configuration de certains des éléments visuels des modèles de page de contenu par la modification du fichier css\base-institution.css.

Nota : Évitez d'apporter des modifications autres que celles que décrit la présente section au fichier css\base-institution.css afin que les navigateurs d'un large éventail d'ensembles navigateur‑plateforme puissent donner des résultats uniformes.

6.3.2.1 Changement de l'arrière‑plan de la zone de bannière

L'arrière‑plan de la zone de bannière peut être modifié par l'ajout d'une couleur ou d'une image.

Nota : Il est recommandé d'ajouter à l'arrière‑plan de la zone de bannière une couleur plutôt qu'une image. Sinon, si le modèle devient extensible à l'avenir, l'image d'arrière‑plan sera trop large lorsque le modèle sera rétréci et trop étroit lorsqu'il sera élargi. De plus, l'image d'arrière‑plan ne sera accessible que si les exigences énoncées dans la section 6.2 (Configuration des fichiers à base d'images) sont satisfaites.

Choix de la couleur d'arrière plan de la zone de bannière
Vous pouvez changer la couleur d'arrière‑plan de la zone de bannière en modifiant la couleur définie relativement à la propriété « background-color » de la classe « div.banner ». La classe « div.banner » est située dans le fichier base-institution.css.

div.banner {
    color: #FFF;
    background-color: #696 no-repeat center center;
}

Choix d'une image d'arrière-plan propre à une langue pour la zone de bannière :
Pour remplacer la couleur d'arrière‑plan par une image d'arrière‑plan propre à une langue, vous devez d'abord exécuter l'étape 5 de la section 6.6.1, Modèle de page de contenu des sites bilingues et multilingues. Vous devez ensuite remplacer l'adresse URL et la couleur d'arrière‑plan définie pour les pages de contenu français et anglais.

  1. Pour les pages de contenu français, modifiez l'adresse URL et la couleur d'arrière‑plan définie relativement à la propriété « background » de la classe div.banner-fra, div.banner-lfcoa-fra. La couleur d'arrière‑plan ne sera visible que sur la surface non occupée par l'image d'arrière‑plan.

    div.banner-fra, div.banner-lfcoa-fra {
        background: url() #FFF no-repeat center center;
    }
  2. Pour les pages de contenu anglais, modifiez l'adresse URL et la couleur d'arrière‑plan définie relativement à la propriété « background » de la classe div.banner-eng, div.banner-lfcoa-eng. La couleur d'arrière‑plan ne sera visible que sur la surface non occupée par l'image d'arrière‑plan.

    div.banner-eng, div.banner-lfcoa-eng {
        background: url() #FFF no-repeat center center;
    }

Nota : Pour que les résultats obtenus à toutes les pages soient uniformes, l'image d'arrière‑plan doit être définie soit par une adresse URL absolue (exemple : http://www.url.gc.ca/images/bbg.jpg), soit par une adresse URL absolue de site (p. ex. /images/bbg.jpg). Vous devez utilisez une adresse URL locale (exemple : file:///C:/images/bbg.jpg ) pour afficher l'image et examiner les pages sur un poste local (aux fins d'essai).

6.3.2.2 Changement de la couleur d'un lien ou d'un lien consulté dans la zone de contenu

Vous pouvez changer la couleur d'un lien ou d'un lien consulté dans la zone de contenu en modifiant les couleurs choisies relativement à la propriété « color » des classes « div.#center a:link » et « div.#center a:visited ».

div.#center a:link {
      color: #039;
}
div.#center a:visited {
      color: #663;
}

6.3.2.3 Changement de la couleur du lien du pied de page

Vous pouvez changer la couleur du lien du pied de page en modifiant les couleurs choisies relativement à la propriété « color » de la classe « div.center div.footer a:link, div.center div.footer a:visited, div.center div.topPage a:link, div.center div.topPage a:visited, div.center p.topPage a:link, div.center p.topPage a:visited ».

div.center div.footer a:link, div.center div.footer a:visited, div.center div.topPage a:link, div.center div.topPage a:visited, div.center p.topPage a:link, div.center p.topPage a:visited {
      color: #039;
      background-color: #FFF;
}

6.3.2.4 Changement des couleurs d'arrière‑plan/avant‑plan des titres de menu latéral

Vous pouvez changer les couleurs d'arrière‑plan et d'avant‑plan des titres de menu latéral en modifiant les couleurs choisies relativement aux propriétés « background-color » et « color » de la classe « div.left h2.nav, div.left h2.nav a:link, div.left h2.nav a:visited, div.left div.h2nav, div.left div.h2nav a:link, div.left div.h2nav a:visited, div.left p.h2nav, div.left p.h2nav a:link, div.left p.h2nav a:visited, div.right h2.nav, div.right h2.nav a:link, div.right h2.nav a:visited, div.right div.h2nav, div.right div.h2nav a:link, div.right div.h2nav a:visited, div.right p.h2nav, div.right p.h2nav a:link, div.right p.h2nav a:visited ».

div.left h2.nav, div.left h2.nav a:link, div.left h2.nav a:visited, div.left div.h2nav, div.left div.h2nav a:link, div.left div.h2nav a:visited, div.left p.h2nav, div.left p.h2nav a:link, div.left p.h2nav a:visited, div.right h2.nav, div.right h2.nav a:link, div.right h2.nav a:visited, div.right div.h2nav, div.right div.h2nav a:link, div.right div.h2nav a:visited, div.right p.h2nav, div.right p.h2nav a:link, div.right p.h2nav a:visited {
      background-color: #696;
      color: #FFF;
text-decoration: none;
}

6.3.2.5 Changement des couleurs d'arrière‑plan/avant‑plan du texte normal du menu latéral gauche

Vous pouvez changer les couleurs d'arrière‑plan et d'avant‑plan du texte normal du menu latéral gauche en modifiant les couleurs choisies relativement aux propriétés « background-color » et « color » de la classe « div.left li.menucontent, div.left div.menucontent, div.left a.menulink ».

div.left li.menucontent, div.left div.menucontent, div.left a.menulink {
      color :#000;
      background-color: #CC9;
}

6.3.2.6 Changement des couleurs d'arrière‑plan/avant‑plan du texte normal du menu latéral droit (modèle à trois colonnes seulement)

Vous pouvez changer les couleurs d'arrière‑plan et d'avant‑plan du texte normal du menu latéral droit du modèle à trois colonnes en modifiant les couleurs choisies relativement aux propriétés « background-color » et « color » des classes « div.right li.menucontent, div.right div.menucontent » et « div.right a.menulink ».

div.right li.menucontent, div.right div.menucontent {
      color: #000;
      background-color: #FFF;
}
div.right a.menulink {
      color: #000;
      background-color: #FFF;
}

6.3.2.7 Changement de la couleur d'arrière‑plan de la barre de divulgation proactive (modèle à trois colonnes seulement)

Vous pouvez changer la couleur d'arrière‑plan de la barre de divulgation proactive au menu latéral gauche du modèle à trois colonnes en modifiant la couleur choisie relativement à la propriété « background-color » de la classe « div.prodis ».

div.prodis {
      background-color: #696;
}

6.3.2.8 Changement de la couleur d'arrière‑plan de la barre de pied de page

Vous pouvez modifier la couleur d'arrière‑plan de la barre de pied de page en modifiant la couleur choisie relativement à la propriété « background-color » de la classe « div.footer div.footerline ».

div.footer div.footerline {
      background-color: #696;
}

6.3.2.9 Changement des bordures tiretées du menu latéral gauche

Vous pouvez changer les bordures tiretées du menu latéral gauche en modifiant la propriété « border-bottom » de la classe « #left .menucontent ».

div.left li.menucontent, div.left div.menucontent {
      border-bottom: 1px dotted #FFF;
      letter-spacing: 1px;
}

6.3.2.10 Changement de la couleur de la bordure de la zone de contenu (modèle à trois colonnes seulement)

Vous pouvez changer la bordure de la zone de contenu du modèle à trois colonnes en modifiant la propriété « border » de la classe « div.blackborder ».

div.blackborder {
      border: solid #000 1px;
}

6.3.2.11 Changement de la couleur de la bordure du menu latéral droit (modèle à trois colonnes seulement)

Pour modifier la bordure du modèle de la bordure du menu latéral à trois colonnes, modifiez la propriété « border » de la classe « div.right li ul.nav, div.right li p.nav, div.right li div.nav ».

div.right li ul.nav, div.right li p.nav, div.right li div.nav {
      border: 1px solid #000;
}

6.3.2.12 Changement de la couleur d'arrière-plan de l'espace libre en dessous des menus latéraux et de la zone de contenu (modèles à deux et trois colonnes seulement)

Vous pouvez changer la couleur d'arrière‑plan de l'espace libre en dessous des menus latéraux et de la zone de contenu en modifiant la propriété « background-color » de la classe « div.colLayout ».

div.colLayout {
      background-color: #FFF;
}

6.3.2.13 Changement de la couleur d'arrière‑plan de la fenêtre de navigateur entourant la page

Vous pouvez changer la couleur d'arrière‑plan de la fenêtre de navigateur entourant la page en modifiant la propriété « background-color » de la classe « body ».

body {
      background-color: #FFF;
      height: 100%;
}

6.3.2.14 Changement de la couleur par défaut des éléments d'en‑tête (de h1 à h6)

Vous pouvez modifier la couleur par défaut des éléments d'en‑tête (« h1 », « h2 », « h3 », « h4 », « h5 » et « h6 » ) en modifiant la propriété « color » de la classe « div.center h1, h2, h3, h4, h5, h6 ».

div.center h1, h2, h3, h4, h5, h6 {
      color: #000;
}

6.3.2.15 Ajustement de l'alignement des images PCIM

Quand la hauteur de l'image de la signature institutionnelle est plus de 20 pixels, l'alignement des images PCIM doit être modifié.

Vous pouvez modifier l'alignement des images PCIM en modifiant la propriété « height » de la classe « div.fip, div.cwm » et la propriété « padding-top » de la classe « div.cwm img ».

div.fip, div.cwm {
      height: 20px;
}
div.cwm img {
      padding-top: 0px;
}

La propriété « height » de la classe « div.fip, div.cwm » doit avoir la même hauteur en pixels que l'image de la signature institutionnelle

La propriété « padding-top » de la classe « div.cwm img » doit être modifiée pour corriger l'alignement vertical entre le mot-symbole « Canada » et la signature institutionnelle.

6.3.2.16 Changement de la couleur par défaut de l'avant-plan, de l'arrière-plan et de la bordure du conteneur de liens « saut de navigation » (lorsqu'il est visible)

Pour changer la couleur par défaut de l'avant-plan, de l'arrière-plan et de la bordure du conteneur de liens « saut de navigation » (lorsqu'il est visible), modifiez les propriétés « border-color », « background-color » et « border-color » dans la classe « div.page div.core div.navaid a:hover, div.page div.core div.navaid a:active, div.page div.core div.navaid a:focus ».

div.page div.core div.navaid a:hover, div.page div.core div.navaid a:active, div.page div.core div.navaid a:focus {
     color: #000;
     background-color: #CC9;
     border-color: #000;
}

6.3.2.17 Changement de la largeur et de la position de départ du conteneur de liens « saut de navigation »

Quand les signatures institutionnelles sont plus larges que la signature institutionnelle du gouvernement du Canada, il faut parfois modifier la largeur et la position de départ du conteneur de liens « saut de navigation » afin que les liens ne chevauchent pas la signature institutionnelle et le mot symbole Canada dans Internet Explorer lorsque JavaScript est désactivé.

Internet Explorer 5.x et 6.x : Pour modifier la largeur du conteneur de liens « saut de navigation » dans Internet Explorer 5.x et 6.x, changez l'attribut « width » dans la classe « * html div.page div.core div.navaid ». Pour modifier la position de départ du conteneur de liens « saut de navigation » Internet Explorer 5.x et 6.x, modifiez l'attribut « padding-left » de la classe « * html div.page div.core div.navaid ».

* html div.page div.core div.navaid {
     width: 450px;
     padding-left: 50px;
 }

Internet Explorer 7.x : Pour modifier la largeur du conteneur de liens « saut de navigation » dans Internet Explorer 7.x, changez l'attribut « width » dans la classe « *:first-child+html div.page div.core div.navaid ». Pour modifier la position de départ du conteneur de liens « saut de navigation » Internet Explorer 7.x, modifiez l'attribut « padding-left » de la classe « *:first-child+html div.page div.core div.navaid ».

*:first-child+html div.page div.core div.navaid {
     width: 450px;
     padding-left: 50px;
 }


Haut de la page

6.4 Installation des fichiers à base d'images et CSS

Copiez le répertoire des fichiers à base d'images et CSS dans un endroit central accessible à partir de toutes les pages Web. Par souci de simplicité d'entretien, toutes les pages Web doivent être liées au même jeu de fichiers à base d'images et CSS.

6.5 Configuration et installation du modèle de page d'accueil

6.5.1 Modèle de page d'accueil bilingue

Les directives qui suivent s'appliquent au modèle de page d'accueil bilingue dont la sélection est décrite à la section 6.1 (Sélection d'un modèle de page d'accueil).

  1. Modifiez tous les chemins d'accès des fichiers à base d'images et CSS du modèle de page d'accueil pour qu'ils mènent aux fichiers à base d'images et aux fichiers CSS dont l'installation est décrite à la section 6.2 (Configuration des fichiers à base d'images) et la section 6.3 (Configuration des fichiers CSS), respectivement. Utilisez à cette fin la fonction de recherche et remplacement. Les chemins d'accès à remplacer sont les suivants :
    1. ../images/
    2. ../css/
  2. Modifiez la largeur, la hauteur et le texte « alt » de l'image de la signature institutionnelle (images/sig-fra.gif ou images/sig-eng.gif ) dans le modèle de page d'accueil.
    1. La largeur et la hauteur établies doivent être conformes à celles des fichiers à base d'images/sig-fra.gif et images/sig-eng.gif.
    2. Le texte « alt » des institutions dont l'administration sociale est située au Québec doit être composé du nom de l'institution en français, d'un espace, d'une barre verticale, d'un autre espace, puis du nom de l'institution en anglais (exemple : alt="Secrétariat du Conseil du Trésor du Canada | Treasury Board of Canada Secretariat").
    3. Le texte « color » des institutions dont l'administration centrale est hors Québec doit être composé du nom de l'institution en anglais, d'un espace, d'une barre verticale, d'un autre espace, puis du nom de l'institution en français (exemple : alt="Treasury Board of Canada Secretariat | Secrétariat du Conseil du Trésor du Canada").
  3. Modifiez le message au‑dessus de l'image dans la zone de texte. Le message doit être bilingue. Lorsque le message doit être masqué, ajoutez « class="hidden" » à l'élément h1. Cette façon de faire permet de rendre le message invisible tout en permettant son utilisation comme équivalent en texte par des technologies adaptées.
    1. Si l'administration centrale de l'institution est située au Québec, le message doit être composé du texte français, d'un espace, d'une barre verticale, d'un autre espace, puis du texte en anglais (exemple :<h1>Bienvenue | <span lang="en" xml:lang="en">Welcome</span></h1>).
    2. Si l'administration centrale de l'institution est hors Québec, le message doit être composé du texte anglais, d'un espace, d'une barre verticale, d'un autre espace, puis du texte français (exemple : <h1>Welcome | <span lang="fr" xml:lang="fr">Bienvenue</span></h1>).
  4. Si vous utilisez le modèle à zone de message textuelle, changez le nom de l'institution qui y figure. Le nom de l'institution doit paraître dans les deux langues officielles.
    1. Si l'administration centrale de l'institution est située au Québec, le nom français de l'institution doit figurer à gauche, le nom anglais, à droite.

      <div class="headtitleLft">Nom de l'institution </div>
      <div class="headtitleRgt" lang="en" xml:lang="en"> Institution Name</div>
    2. Si l'administration centrale de l'institution est hors Québec, le nom anglais doit figurer à gauche, le nom français, à droite.

      <div class="headtitleLft">Institution Name</div>
      <div class="headtitleRgt" lang="fr" xml:lang="fr">Nom de l'institution </div>
  5. Modifiez les chemins des liens suivants du modèle de page d'accueil pour qu'ils mènent aux pages françaises correspondantes de l'institution :
    1. Français
    2. Avis importants
  6. Modifiez les chemins des liens suivants du modèle de page d'accueil pour qu'ils mènent aux pages anglaises correspondantes de l'institution :
    1. English
    2. Important Notices
  7. Chargez les éléments de métadonnées des valeurs appropriées.
  8. Ajoutez le bon titre à l'élément « title » . Le titre doit être bilingue.
    1. Si l'administration centrale de l'institution est située au Québec, le titre doit être composé du texte français, d'un espace, d'une barre verticale, d'un autre espace, puis du texte anglais (exemple : <title>Secrétariat to Conseil du Trésor du Canada | Treasury Board of Canada Secretariat</title>).
    2. Si l'administration centrale de l'institution est hors Québec, le titre doit être composé du texte anglais, d'un espace, d'une barre verticale, d'un autre espace, puis du texte français (exemple : <title>Treasury Board of Canada Secretariat | Secrétariat to Conseil du Trésor du Canada</title>).
  9. Remplacez le nom de fichier du modèle de page d'accueil par celui que le serveur Web de l'institution chargera par défaut (exemple : index.html).
  10. Copiez le modèle de page d'accueil dans le principal point d'accès du site ou sous‑site. Le principal point d'accès est normalement le dossier principal (exemple : www.tbs-sct.gc.ca).

6.5.2 Modèle de page d'accueil unilingue

Les présentes directives s'appliquent au modèle de page d'accueil unilingue dont la sélection est décrite à la section 6.1 (Sélection d'un modèle de page d'accueil).

  1. Modifiez tous les chemins d'accès des fichiers à base d'images et CSS du modèle de page d'accueil pour qu'ils mènent aux fichiers à base d'images et CSS dont l'installation est décrite à la section 6.2 (Configuration des fichiers à base d'images) et la section 6.3 (Configuration des fichiers CSS), respectivement. Utilisez à cette fin la fonction de recherche et remplacement. Les chemins d'accès à remplacer sont les suivants :
    1. ../images/
    2. ../css/
  2. Modifiez la largeur, la hauteur et le texte « color » de l'image de la signature institutionnelle (images/sig-fra.gif ou images/sig-eng.gif) dans le modèle de page d'accueil.
    1. La largeur et la hauteur doivent être conformes à celles des fichiers à base d'images/sig-fra.gif ou images/sig-eng.gif.
    2. S'il s'agit d'un site unilingue français, le texte « color » doit être le nom français de l'institution (exemple : alt="Secrétariat du Conseil du Trésor du Canada").
    3. S'il s'agit d'un site unilingue anglais, le texte « color » doit être le nom anglais de l'institution (exemple : alt="Treasury Board of Canada Secretariat").
  3. Remplacez le message se trouvant au‑dessus de l'image dans la zone de message. Le message doit être dans la même langue que la page. Lorsque le message doit être masqué, ajoutez « class="hidden" » à l'élément h1. Cette façon de faire permet de rendre le message invisible tout en permettant son utilisation comme équivalent en texte par des technologies adaptées.
    1. S'il s'agit d'un site unilingue français, le message doit être en français (exemple : <h1>Bienvenue</h1>).
    2. S'il s'agit d'un site unilingue anglais, le message doit être en anglais (exemple : <h1>Welcome</h1>).
  4. Si un modèle à zone de message textuelle est utilisé, remplacez le nom de l'institution qui y figure. Le nom de l'institution doit être dans la même langue que la page.
    1. S'il s'agit d'un site unilingue français, le nom français de l'institution doit figurer à gauche.<div class="headtitleLft">Nom de l'institution</div>
    2. S'il s'agit d'un site unilingue anglais, le nom anglais de l'institution doit figurer à gauche.<div class="headtitleLft">Institution Name</div>
  5. S'il s'agit d'un site unilingue français, modifiez les chemins d'accès des liens suivants dans le modèle de page d'accueil pour qu'ils mènent aux pages françaises correspondantes de l'institution :
    1. Entrer
    2. Avis importants
  6. S'il s'agit d'un site unilingue anglais, modifiez les chemins d'accès des liens suivants dans le modèle de page d'accueil pour qu'ils mènent aux pages anglaises correspondantes de l'institution :
    1. Enter
    2. Important Notices
  7. Chargez les éléments de métadonnées des valeurs appropriées.
  8. Ajoutez le bon titre à l'élément de « title ». Le titre doit être unilingue.
    1. S'il s'agit d'un site unilingue français, le titre doit être en français (exemple : <title>Secrétariat to Conseil du Trésor du Canada</title>).
    2. S'il s'agit d'un site unilingue anglais, le titre doit être en anglais (exemple : <title>Treasury Board of Canada Secretariat</title>).
  9. Remplacez le nom de fichier du modèle de page d'accueil par celui que le serveur Web de l'institution chargera par défaut (exemple : index.html).
  10. Copiez le modèle de page d'accueil dans le principal point d'accès du site ou sous‑site. Le principal point d'accès est normalement le fichier principal (exemple : www.tbs-sct.gc.ca/).

6.5.3 Modèle de page d'accueil multilingue

Les présentes directives s'appliquent au modèle de page d'accueil multilingue dont la sélection est décrite à la section 6.1 (Sélection d'un modèle de page d'accueil).

  1. Modifiez tous les chemins des fichiers à base d'images et CSS du modèle de page d'accueil pour qu'ils mènent aux fichiers à base d'images et CSS dont l'installation est décrite à la section 6.2 (Configuration des fichiers à base d'images) et la section 6.3 (Configuration des fichiers CSS), respectivement. Utilisez à cette fin la fonction de recherche et de remplacement. Les chemins d'accès à remplacer sont les suivants :
    1. ../images/
    2. ../css/
  2. Modifiez la largeur, la hauteur et le texte « color » de l'image de la signature institutionnelle (images/sig-fra.gif ou images/sig-eng.gif) dans le modèle de page d'accueil.
    1. La largeur et la hauteur établies doivent être conformes à celles des fichiers à base d'images/sig-fra.gif et images/sig-eng.gif.
    2. Si l'administration centrale de l'institution est située au Québec, le texte « color » doit être composé du nom français de l'institution, d'un espace, d'une barre verticale, d'un autre espace, puis du nom anglais de l'institution (exemple : alt="Secrétariat du Conseil du Trésor du Canada | Treasury Board of Canada Secretariat").
    3. Si l'administration centrale de l'institution est hors Québec, le texte « color » doit être composé du nom anglais de l'institution, d'un espace, d'une barre verticale, d'un autre espace, puis du nom français de l'institution (exemple : alt="Treasury Board of Canada Secretariat | Secrétariat du Conseil du Trésor du Canada").
  3. Remplacez le message au‑dessus de l'image dans la zone de texte. Le message doit être bilingue. Lorsque le message doit être masqué, ajoutez « class="hidden" » à l'élément h1. Cette façon de faire permet de rendre le message invisible tout en permettant son utilisation comme équivalent en texte par des technologies adaptées.
    1. Si l'administration centrale de l'institution est située au Québec, le message doit être composé du texte français, d'un espace, d'une barre verticale, d'un autre espace, puis du texte anglais (exemple : <h1>Bienvenue | <span lang="en" xml:lang="en">Welcome</span></h1>).
    2. Si l'administration centrale de l'institution est hors Québec, le message doit être composé du texte anglais, d'un espace, d'une barre verticale, d'un autre espace, puis du texte français (exemple : <h1>Welcome | <span lang="fr" xml:lang="fr">Bienvenue </span></h1>).
  4. Si vous utilisez un modèle à zone de message textuelle, changez le nom de l'institution qui y figure. Le nom de l'institution doit paraître dans les deux langues officielles.
    1. Si l'administration centrale de l'institution est située au Québec, le nom français doit figurer à gauche, le nom anglais, à droite.

      <div class="headtitleLft">Nom de l'institution</div>
      <div class="headtitleRgt" lang="en" xml:lang="en">Institution Name</div>
    2. Si l'administration centrale de l'institution est hors Québec, le nom anglais doit figurer à gauche, le nom français, à droite.

      <div class="headtitleLft">Institution Name</div>
      <div class="headtitleRgt" lang="fr" xml:lang="fr">Nom de l'institution</div>
  5. Modifiez les chemins d'accès des liens suivants du modèle de page d'accueil pour qu'ils mènent aux pages françaises correspondantes de l'institution :
    1. Français
    2. Avis importants
  6. Modifiez les chemins d'accès des liens suivants du modèle de page d'accueil pour qu'ils mènent aux pages anglaises correspondantes de l'institution :
    1. English
    2. Important Notices
  7. Modifiez les chemins d'accès des liens de langue autre que l'anglais et le français pour qu'ils mènent aux pages correspondantes dans l'autre langue.
  8. Chargez les éléments de métadonnées des valeurs appropriées.
  9. Ajoutez le bon titre à l'élément de « title ». Le titre doit être bilingue.
    1. Si l'administration centrale de l'institution est située au Québec, le titre doit être composé du texte français, d'un espace, d'une barre verticale, d'un autre espace, puis du texte anglais (exemple : <title>Secrétariat to Conseil du Trésor du Canada | Treasury Board of Canada Secretariat</title>).
    2. Si l'administration centrale de l'institution est hors Québec, le titre doit être composé du texte anglais, d'un espace, d'une barre verticale, d'un autre espace, puis du texte français (exemple : <title>Treasury Board of Canada Secretariat | Secrétariat to Conseil du Trésor du Canada</title>).
  10. Remplacez le nom de fichier du modèle de page d'accueil par celui que le serveur Web de l'institution chargera par défaut (exemple : index.html).
  11. Copiez le modèle de page d'accueil dans le principal point d'accès du site ou sous‑site. Le principal point d'accès est normalement le fichier principal (exemple : www.tbs-sct.gc.ca/).

Haut de la page

6.6 Configuration des modèles de page de contenu

6.6.1 Modèle de page de contenu des sites bilingues et multilingues

L'usage du modèle est obligatoire pour toutes les pages de contenu anglais et français dans des sites bilingues ou multilingues.

  1. Modifiez tous les chemins d'accès des fichiers à base d'images et CSS dans les fichiers *col-fra.html et *col-eng.html pour qu'ils mènent aux fichiers à base d'images et CSS dont l'installation est décrite à la section 6.2 (Configuration des fichiers à base d'images) et la section 6.3 (Configuration des fichiers CSS), respectivement. Utilisez à cette fin la fonction de recherche et de remplacement. Les chemins d'accès à remplacer sont les suivants :
    1. ../images/
    2. ../css/
  2. Modifiez la largeur, la hauteur et le texte « color » de l'image de la signature institutionnelle (images/sig-fra.gif et images/sig-eng.gif) dans les fichiers *col-fra.html et *col-eng.html.
    1. La largeur et la hauteur établies doivent être conformes à celles des fichiers à base d'images/sig-fra.gif et images/sig-eng.gif. Là où la hauteur est de plus de 20 pixels, il sera nécessaire de modifier l'alignement des images PCIM dont le processus est décrit à la section 6.3.2.15(Ajustement de l'alignement des images PCIM).
    2. Le texte « color » doit être le nom anglais de l'institution (exemple : alt="Secrétariat du Conseil du Trésor du Canada") dans le cas des fichiers *col-fra.html, et le nom français de l'institution (exemple : alt="Treasury Board of Canada Secretariat") dans celui des fichiers *col-eng.html.
  3. Changez le nom de l'institution dans la zone de bannière des fichiers *col-fra et *col-eng.html. Le nom doit être dans la même langue que la page.
    1. Le nom français de l'institution doit figurer dans les pages *col-fra.html (exemple :  <p class="main">Secrétariat du Conseil du Trésor du Canada</p>).
    2. Le nom anglais de l'institution doit figurer dans les pages *col-eng.html (exemple : <p class="main">Treasury Board of Canada Secretariat</p>).
  4. Changez l'adresse URL de l'institution dans la zone de bannière des fichiers *col-fra.html et *col-eng.html. L'adresse URL de l'institution dans la zone de bannière doit être dans la même langue que la page
    1. Dans les pages *col-fra.html, l'adresse URL française de l'institution est suivie de l'adresse anglaise (exemple : <p class="siteuri">sct-tbs.gc.ca</p>).
    2. Dans les pages *col-eng.html, l'adresse URL anglaise de l'institution est suivie de l'adresse française (exemple : <p class="siteuri">tbs-sct.gc.ca</p>).
  5. Lorsqu'il faut utiliser des images distinctes en français et en anglais dans la zone de bannière, vous devez modifier la classe « banner » relative à la zone de bannière des fichiers *col-fra.html et *col-eng.html conformément aux directives ci-dessous afin de permettre la prise en charge des images distinctes. Ce changement fait également en sorte que le nom de l'institution et l'adresse URL sont invisibles tout en permettant leur utilisation comme équivalent en texte par des technologies adaptées.
    1. Dans le cas des pages *col-fra.html, remplacez la classe « banner » par « banner-fra » ou « banner-lfcoa-fra » si la feuille d'érable stylisée est incluse dans l'image.
    2. Dans le cas des pages *col-eng.html, remplacez la classe « banner » par « banner-eng » ou « banner-lfcoa-eng » si la feuille d'érable stylisée est incluse dans l'image.
  6. Modifiez les chemins d'accès des liens suivants des fichiers *col-fra.html pour qu'ils mènent aux pages françaises correspondantes de l'institution :
    1. Accueil
    2. Contactez-nous
    3. Aide
    4. Recherche
    5. Avis importants
  7. Modifiez les chemins d'accès des liens suivants des fichiers *col-eng.html pour qu'ils mènent aux pages anglaises correspondantes de l'institution :
    1. Home
    2. Contact Us
    3. Help
    4. Search
    5. Important Notices
  8. Modifiez, au besoin, les éléments de métadonnées des fichiers *col-fra.html et *col-eng.html.

6.6.2 Modèle de page de contenu des sites unilingues anglais

L'usage du modèle est obligatoire pour toutes les pages de contenu des sites unilingues anglais.

  1. Modifiez tous les chemins d'accès des fichiers à base d'images et CSS dans les fichiers uniling\*col-ul-eng.html pour qu'ils mènent aux fichiers à base d'images et CSS dont l'installation est décrite à la section 6.2 (Configuration des fichiers à base d'images) et à la section 6.3 (Configuration des fichiers CSS), respectivement. Utilisez à cette fin la fonction de recherche et de remplacement. Les chemins d'accès à remplacer sont les suivants :
    1. ../images/
    2. ../css/
  2. Modifiez la largeur, la hauteur et le texte « color » de l'image de la signature institutionnelle (images/sig-eng.gif ) dans les fichiers uniling\*col-ul-eng.html.
    1. La largeur et la hauteur établies doivent être conformes à celles des fichiers à base d'images/sig-eng.gif. Là où la hauteur est de plus de 20 pixels, il sera nécessaire de modifier l'alignement des images PCIM dont le processus est décrit à la section 6.3.2.15 (Ajustement de l'alignement des images PCIM).
    2. Le texte « color » et le nom anglais de l'institution (exemple : alt="Treasury Board of Canada Secretariat").
  3. Changez le nom de l'institution dans la zone de bannière des fichiers uniling\*col-ul-eng.html. Le nom de l'institution doit être en anglais (exemple : <p class="main">Treasury Board of Canada Secretariat</p>).
  4. Changez l'adresse URL de l'institution dans la zone de bannière des fichiers uniling\*col-ul-eng.html . L'adresse URL anglaise de l'institution doit être suivie de l'adresse française (exemple : <p class="siteuri">tbs-sct.gc.ca</p>).
  5. Lorsqu'il faut masquer le nom de l'institution et l'adresse URL, vous devez remplacer la classe « banner » relative à la zone de bannière des fichiers *col-ul-eng.html conformément aux directives ci-dessous. Ce changement fait également en sorte que le nom de l'institution et l'adresse URL sont invisibles tout en permettant leur utilisation comme équivalent en texte par des technologies adaptées.

    Dans le cas des pages *col-ul-eng.html, remplacez la classe « banner » par « banner-eng » ou « banner-lfcoa-eng » si la feuille d'érable stylisée est incluse dans l'image.
  6. Changez le chemin d'accès du lien « Avertissement » des fichiers uniling\*col-ul-eng.html pour qu'ils mènent à l'avis sur les langues officielles.
  7. Modifiez les chemins d'accès des liens suivants des fichiers uniling\*col-ul-eng.html pour qu'ils mènent aux pages anglaises correspondantes de l'institution :
    1. Home
    2. Contact Us
    3. Help
    4. Search
    5. Important Notices
  8. Changez, au besoin, les éléments de métadonnées des fichiers uniling\*col-ul-eng.html.

6.6.3 Modèle de page de contenu des sites unilingues français

L'usage du modèle est obligatoire pour toutes les pages de contenu des sites unilingues français.

  1. Modifiez tous les chemins d'accès des fichiers à base d'images et CSS dans les fichiers uniling\*col-ul-fra.html pour qu'ils mènent aux fichiers à base d'images et CSS dont l'installation est décrite à la section 6.2 (Configuration des fichiers à base d'images) et à la section 6.3 (Configuration des fichiers CSS), respectivement. Utilisez à cette fin la fonction de recherche et de remplacement. Les chemins d'accès à remplacer sont les suivants :
    1. ../images/
    2. ../css/
  2. Modifiez la largeur, la hauteur et le texte « color » de l'image de la signature institutionnelle (images/sig-fra.gif ) dans les fichiers uniling\*col-ul-fra.html.
    1. La largeur et la hauteur établies doivent être conformes à celles des fichiers à base d'images/sig-fra.gif. Là où la hauteur est de plus de 20 pixels, il sera nécessaire de modifier l'alignement des images PCIM dont le processus est décrit à la section 6.3.2.15 (Ajustement de l'alignement des images PCIM).
    2. Le texte « color » doit être le nom français de l'institution (exemple : alt="Secrétariat du Conseil du Trésor du Canada").
  3. Changez le nom de l'institution dans la zone de bannière des fichiers uniling\*col-ul-fra.html. Le nom de l'institution doit être en français (exemple : <p class="main">Secrétariat du Conseil du Trésor du Canada</p>).
  4. Changez l'adresse URL de l'institution dans la zone de bannière des fichiers uniling\*col-ul-fra.html. L'adresse URL française de l'institution doit être suivie de l'adresse anglaise (exemple : <p class="siteuri">sct-tbs.gc.ca</p>).
  5. Lorsqu'il faut masquer le nom de l'institution et l'adresse URL, vous devez remplacer la classe « banner » relative à la zone de bannière des fichier *col-ul-fra.html conformément aux directives ci-dessous. Ce changement fait également en sorte que le nom de l'institution et l'adresse URL sont invisibles tout en permettant leur utilisation comme équivalent en texte par des technologies adaptées.

    Dans le cas des pages *col-ul-fra.html, remplacez la classe « banner » par « banner-fra » ou « banner-lfcoa-fra » si la feuille d'érable stylisée est incluse dans l'image.
  6. Changez le chemin d'accès du lien « Notice » dans les fichiers uniling\*col-ul-fra.html pour qu'il mène à l'avis sur les langues officielles.
  7. Changez les chemins d'accès des liens suivants des fichiers uniling\*col-ul-fra.html pour qu'ils mènent aux pages françaises correspondantes de l'institution :
    1. Accueil
    2. Contactez-nous
    3. Aide
    4. Recherche
    5. Avis importants
  8. Changez, au besoin, les éléments de métadonnées des fichiers uniling\*col-ul-fra.html.

6.6.4 Modèle de page de contenu en langues autres que l'anglais et le français

L'usage du modèle est obligatoire pour toutes les pages de contenu présentées principalement dans une langue autre que l'anglais et le français.

Si l'administration centrale de l'institution est au Québec, les présentes directives s'appliquent aux fichiers multiling\*col-ml-quebec-spa.html. Si elle est hors Québec, les directives s'appliquent aux fichiers multiling\*col-ml-spa.html.
  1. Modifiez tous les chemins d'accès des fichiers à base d'images et CSS dans les fichiers du modèle de page de contenu pour qu'ils mènent aux fichiers à base d'images et CSS dont l'installation est décrite à la section 6.2 (Configuration des fichiers à base d'images) et à la section 6.3 (Configuration des fichiers CSS), respectivement. Utilisez à cette fin la fonction de recherche et de remplacement. Les chemins d'accès à remplacer sont les suivants :
    1. ../images/
    2. ../css/
  2. Changez la langue que précise l'élément « html ». Le code de langue de la page doit être défini pour les attributs « lang » et « xml:lang » (exemple : <html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">).
  3. Modifiez la largeur, la hauteur et le texte « color » de l'image de la signature institutionnelle (images/sig-fra.gif ou images/sig-eng.gif ) dans les fichiers de modèle de page de contenu.
    1. La largeur et la hauteur établies doivent être conformes à celles des fichiers à base d'images/sig-fra.gif et images/sig-eng.gif. Là où la hauteur est de plus de 20 pixels, il sera nécessaire de modifier l'alignement des images PCIM dont le processus est décrit à la section 6.3.2.15 (Ajustement de l'alignement des images PCIM).
    2. Le texte « color » doit être le nom de l'institution dans la langue de la page (exemple : alt="Gobierno de Canadá").
  4. Modifiez le texte « color » de l'image du mot‑symbole du Canada dans les fichiers de modèle de page de contenu. Le texte « color » doit être « Symbole du gouvernement du Canada » dans la langue de la page (exemple : alt="Símbolo del Gobierno de Canadá").
  5. Changez le nom de l'institution dans la zone de bannière des fichiers de modèle de page de contenu. Le nom de l'institution doit être dans la langue de la page (exemple : <p class="main">Gobierno de Canadá</p>).
  6. Changez l'adresse URL de l'institution dans la zone de bannière des fichiers de modèle de page de contenu. L'adresse URL de l'institution dans la zone de bannière doit être dans la langue de la page.
    1. Si l'administration centrale de l'institution est située au Québec, l'adresse URL française de l'institution est suivie de l'adresse anglaise (exemple : (exemple : <p class="siteuri">sct-tbs.gc.ca</p>) dans les pages *col-fra.html.
    2. Si l'administration centrale de l'institution est située hors Québec, l'adresse URL anglaise de l'institution est suivie de l'adresse française (exemple : <p class="siteuri">tbs-sct.gc.ca</p>).
  7. Changez la langue des liens « Saut de navigation ». Ils doivent apparaître dans la langue de la page.

    <a href="#cont">Sáltese al contenido</a>
    <a href="#il">Sáltese las conexiones institucionales</a>

  8. Modifiez l'élément invisible « h1 » du menu latéral gauche. L'élément invisible « h1 » doit être dans la langue de la page (exemple : <h1 class="navaid"><a name="il" id="il">Conexiones institucionales</a></h1>).
  9. Changez les chemins d'accès des liens suivants du modèle de page de contenu pour qu'ils mènent aux pages françaises correspondantes de l'institution :
    1. Accueil
    2. Contactez-nous
    3. Aide
    4. Recherche
    5. Avis importants
  10. Changez les chemins d'accès des liens suivants du modèle de page de contenu pour qu'ils mènent aux pages anglaises correspondantes de l'institution :
    1. Home
    2. Contact Us
    3. Help
    4. Search
    5. Important Notices
  11. Changez au besoin les éléments de métadonnées des fichiers du modèle de page de contenu. Les valeurs de métadonnées doivent être dans la langue de la page. Assurez‑vous que l'élément de métadonnées « dc.language » précise le code de langue de la page (exemple : <meta name="dc.language" scheme="ISO639-2/T" content="es" />).
  12. Changez la langue de l'étiquette « Date de modification | Date Modified  » dans le coin inférieur de gauche. L'étiquette doit être dans la langue de la page (exemple : Fecha modificó : <span class="date">2006-06-22</span>).
  13. Changez la langue des liens « Haut de la page » dans la zone de contenu et le pied de page. Le texte du lien et la valeur du titre doivent être dans la langue de la page (exemple : <a href="#tphp" title="Vuelva a la cima de página "><img class="uparrow" src="../images/tphp.gif" width="19" height="12" alt="" /><br />Cima de página </a>).

Haut de la page

6.7 Configuration des modèles de page de message de serveur

6.7.1 Modèles de page de message de serveur unilingue

L'usage du modèle est obligatoire pour les messages de serveur des sites unilingues ou de ceux dont la langue de préférence du client est connue.

Si la page de message de serveur est unilingue française, les présentes directives s'appliquent aux fichiers srvmsg\srvmsg-fra.html. Si elle est unilingue anglaise, les directives s'appliquent aux fichiers srvmsg\srvmsg-eng.html.
  1. Modifiez tous les chemins d'accès des fichiers à base d'images et CSS dans les fichiers du modèle de page de message de serveur pour qu'ils mènent aux fichiers à base d'images et CSS dont l'installation est décrite à la section 6.2 (Configuration des fichiers à base d'images) et à la section 6.3 (Configuration des fichiers CSS), respectivement. Utilisez à cette fin la fonction de recherche et de remplacement. Les chemins d'accès à remplacer sont les suivants :
    1. ../images/
    2. ../css/
  2. Modifiez la largeur, la hauteur et le texte « color » de l'image de la signature institutionnelle (images/sig-fra.gif ou images/sig-eng.gif) dans le modèle de page de message de serveur.
    1. La largeur et la hauteur établies doivent être conformes à celles des fichiers à base d'images/sig-fra.gif et images/sig-eng.gif. Là où la hauteur est de plus de 20 pixels, il sera nécessaire de modifier l'alignement des images PCIM dont le processus est décrit à la section 6.3.2.15 (Ajustement de l'alignement des images PCIM).
    2. Si la page de message de serveur est unilingue française, le texte « color » est le nom français de l'institution (exemple : alt="Secrétariat du Conseil du Trésor du Canada").
    3. Si la page de message de serveur est unilingue anglaise, le texte « color » est le nom anglais de l'institution (exemple : alt="Treasury Board of Canada Secretariat").
  3. Si la page de message de serveur est unilingue française, changez le chemin d'accès du lien suivant pour qu'il mène à la page française correspondante de l'institution :
    1. Avis importants
  4. Si la page de message de serveur est unilingue anglaise, changez le chemin d'accès du lien suivant pour qu'il mène à la page anglaise correspondante de l'institution :
    1. Important Notices
  5. Ajoutez le bon titre à l'élément de titre. Le titre doit être unilingue. Vous trouverez une liste de titres et de contenus de message utiles sous la rubrique Messages d'erreur communs.
    1. Si la page de message de serveur est unilingue française, le titre doit être en français (exemple : <title>Erreur HTTP 404 - Non trouvé </title>).
    2. Si la page de message de serveur est unilingue anglaise, le titre doit être en anglais (exemple : <title>HTTP Error 404 - Not Found</title>).
  6. Ajoutez le bon titre à l'endroit indiqué dans la zone de contenu. Le titre de la zone doit concorder avec celui qui figure dans l'élément de titre (étape 5). Vous trouverez une liste de titres et de contenus de message utiles sous la rubrique Messages d'erreur communs.
    1. Si la page de message de serveur est unilingue française, le titre doit être en français :
      <h1><a name="cont" id="cont">
      <!-- DEBUT DU TITRE DU CONTENU | CONTENT TITLE BEGINS -->
      Erreur HTTP 404 - Non trouvé
      <!-- FIN DU TITRE DU CONTENU | CONTENT TITLE ENDS -->
      </a></h1>
    2. Si la page de message de serveur est unilingue anglaise, le titre doit être en anglais :
      <h1><a name="cont" id="cont">
      <!-- CONTENT TITLE BEGINS | DEBUT DU TITRE DU CONTENU -->
      HTTP Error 404 - Not Found
      <!-- CONTENT TITLE ENDS | FIN DU TITRE DU CONTENU -->
      </a></h1>
  7. Ajoutez le contenu voulu dans la zone de contenu. Consultez la liste de titres et de contenus de message utiles sous la rubrique Messages d'erreur communs.
    1. Si la page de message de serveur est unilingue française, le contenu doit être en français.
    2. Si la page de message de serveur est unilingue anglaise, le contenu doit être en anglais.
  8. Remplacez la valeur « Date de modification | Date Modified  » du pied de page par la date actuelle (exemple : <span class="date">2006-07-01</span> ). La date doit respecter la forme normalisée des dates numériques de l'ISO (AAAA‑MM‑JJ).

6.7.2 Modèles de page de message de serveur bilingue

L'usage du modèle est obligatoire pour les messages de serveur des sites bilingues et multilingues, là où la préférence linguistique du client est inconnue.

Si l'administration centrale de l'institution est au Québec, les présentes directives s'appliquent aux fichiers srvmsg\srvmsg-quebec.html. Si elle est hors Québec, les directives s'appliquent aux fichiers srvmsg\srvmsg.html.

  1. Modifiez tous les chemins d'accès des fichiers à base d'images et CSS dans les fichiers du modèle de page de message de serveur pour qu'ils mènent aux fichiers à base d'images et CSS dont l'installation est décrite à la section 6.2 (Configuration des fichiers à base d'images) et à la section 6.3 (Configuration des fichiers CSS), respectivement. Utilisez à cette fin la fonction de recherche et de remplacement. Les chemins d'accès à remplacer sont les suivants :
    1. ../images/
    2. ../css/
  2. Modifiez la largeur, la hauteur et le texte « color » de l'image de la signature institutionnelle (images/sig-fra.gif ou images/sig-eng.gif) dans le modèle de page de message de serveur.
    1. La largeur et la hauteur établies doivent être conformes à celles des fichiers à base d'images/sig-fra.gif et images/sig-eng.gif. Là où la hauteur est de plus de 20 pixels, il sera nécessaire de modifier l'alignement des images PCIM dont le processus est décrit à la section 6.3.2.15 (Ajustement de l'alignement des images PCIM).
    2. Si l'administration centrale est située au Québec, le texte « color » doit être composé du nom français de l'institution, d'un espace, d'une barre verticale, d'un autre espace, puis du nom anglais de l'institution (exemple : alt="Secrétariat du Conseil du Trésor du Canada | Treasury Board of Canada Secretariat").
    3. Si l'administration centrale de l'institution est hors Québec, le texte « color » doit être composé du nom anglais de l'institution, d'un espace, d'une barre verticale, d'un autre espace, puis du nom français de l'institution (p. ex. alt="Treasury Board of Canada Secretariat | Secrétariat du Conseil du Trésor du Canada").
  3. Changez le chemin d'accès du lien suivant dans le modèle de page de message de serveur pour qu'il mène à la page française correspondante de l'institution :
    1. Avis importants
  4. Changez le chemin d'accès du lien suivant dans le modèle de page de message de serveur pour qu'il mène à la page anglaise correspondante de l'institution :
    1. Important Notices
  5. Ajoutez le bon titre à l'élément de titre. Le titre doit être bilingue. Consultez la liste des titres et des contenus de message utiles sous la rubrique Messages d'erreur communs
    1. Si l'administration centrale de l'institution est située au Québec, le titre français est suivi d'un espace, d'une barre verticale, d'un autre espace, puis du titre anglais (exemple : <title>Erreur HTTP 404 - Non trouvé | HTTP Error 404 - Not Found</title>).
    2. Si l'administration centrale de l'institution est hors Québec, le titre anglais est suivi d'un espace, d'une barre verticale, d'un autre espace, puis du titre français (p.ex. <title>HTTP Error 404 - Not Found | Erreur HTTP 404 - Non trouvé </title>).
  6. Insérez les titres anglais et français voulus à l'endroit indiqué de la zone de contenu. Le titre de la zone de contenu doit concorder avec celui qui figure dans l'élément de titre (étape 5). Consultez la liste des titres et des contenus de message utiles sous la rubrique Messages d'erreur communs.
    1. Si l'administration centrale de l'institution est située au Québec, le titre de la zone de contenu dans la colonne de gauche doit être en français, et celui de la zone de contenu dans la colonne de droite doit être en anglais.
    2. Si l'administration centrale de l'institution est hors Québec, le titre de la zone de contenu dans la colonne de gauche doit être en anglais, et celui de la zone de contenu dans la colonne de droite doit être en français.
  7. Insérez le contenu voulu dans la zone de contenu. Consultez la liste de titres et de contenus de message utiles sous la rubrique Messages d'erreur communs.
    1. Si l'administration centrale de l'institution est située au Québec, le contenu de la colonne de gauche doit être en français, et celui de la colonne de droite doit être en anglais.
    2. Si l'administration centrale de l'institution est hors Québec, le contenu de la colonne de gauche doit être en anglais, et celui de la colonne de droite doit être en français.
  8. Remplacez les valeurs « Date de modification | Date Modified  » du pied de page par la date actuelle (exemple : <span class="date">2006-07-01</span>). La date doit respecter la forme normalisée des dates numériques de l'ISO (AAAA-MM-JJ).

7.0 Mode d'emploi des modèles de page de contenu configurés

Les groupes de création de l'institution se référeront aux directives de la présente section pour utiliser les modèles de page de contenu dont l'installation et la configuration sont décrites à la section 6.0 (Installation et configuration des modèles). La section 6.5 (Configuration et installation du modèle de page d'accueil) explique l'usage du modèle de page d'accueil.

7.1 Modèle de page de contenu des sites bilingues et multilingues

L'usage du modèle est obligatoire pour toutes les pages de contenu anglaises et françaises des sites bilingues et multilingues.

7.1.1 Sélection des modèles

Choisissez une version française (*col-fra.html) et une version anglaise (*col-eng.html) de l'un des modèles de page de contenu configurés en respectant les exigences suivantes :

  • Le modèle 3col*.html doit être utilisé pour la première page de menu du site institutionnel et les premières pages des sous-sites.
  • Le modèle 2col*.html ou 3col*.html doit être utilisé pour les autres pages du site. Il est recommandé d'utiliser les modèles 2col*.html, car ils permettent d'afficher des pages Web plus brèves que celles du modèle 3col*.html grâce à une zone de contenu élargie. Un modèle 1col*.html doit être utilisé s'il est impossible d'insérer le contenu dans la zone de contenu d'un modèle 2col*.html.
  • Le modèle 2col*.html ou 3col*.html doit être utilisé pour des applications Web. Un modèle 1col*.html doit être utilisé s'il est impossible d'insérer le contenu dans la zone de contenu d'un modèle 2col*.html.

7.1.2 Création d'une page Web à partir des modèles choisis

  1. Faites des copies des modèles choisis et sauvegardez‑les localement, en changeant, au besoin, le nom des fichiers.
  2. Changez les chemins d'accès des liens de sélection de la langue.
    1. À la page française, changez le chemin d'accès du lien « English » pour qu'il mène à la version anglaise de la page.
    2. À la page anglaise, changez le chemin d'accès du lien « Français » pour qu'il mène à la version française de la page.
  3. Chargez les éléments de métadonnées des valeurs voulues.
    1. À la page française, chargez les éléments de métadonnées françaises.
    2. À la page anglaise, chargez les éléments de métadonnées anglaises.
  4. Ajoutez le bon titre à l'élément « title ». Le titre doit être dans la langue de la page.
    1. À la page française, le titre doit être en français (exemple : <title>Bienvenue au Secrétariat du Conseil du Trésor du Canada </title>).
    2. À la page anglaise, le titre doit être en anglais (exemple : <title>Welcome to the Treasury Board of Canada Secretariat </title>).
  5. Changez le fil d'Ariane, au besoin. Tous les éléments du fil doivent être situés entre le code <p class="breadcrumb"> et le code </p> correspondant.
    1. À la page française, tous les éléments du fil d'Ariane doivent être en français anglais, et tous les éléments comprenant un lien doivent mener à des pages françaises.
    2. À la page anglaise, tous les éléments du fil d'Ariane doivent être en anglais, et tous les éléments comprenant un lien doivent mener à des pages anglaises.
  6. Si vous utilisez le modèle 3col*.html ou 2col*.html, garnissez le menu latéral gauche de liens institutionnels. Par souci d'accessibilité, réutilisez la structure existante du menu. Comme l'illustre la structure, des éléments d'en‑tête doivent être utilisés seulement pour grouper les liens, et tous les liens doivent être groupés. Le menu de gauche doit demeurer textuel, et il faut donc éviter d'utiliser des éléments graphiques ou décoratifs. Des changements ne peuvent être effectués qu'entre les codes <div id="left"> et </div>.
  7. Si vous utilisez le modèle 3col*.html, garnissez le menu latéral droit de contenu. Par souci d'accessibilité, réutilisez la structure existante du menu. Comme l'illustre la structure, des éléments d'en‑tête ne doivent être utilisés que pour grouper les liens, et tous les liens doivent être groupés. Des changements ne peuvent être effectués qu'entre les codes <div id="right"> et </div>.
  8. Ajoutez le bon titre à la zone de contenu. Le titre doit concorder avec celui de l'élément de titre (étape 4).
    1. Le titre de la zone de contenu de la page française doit être en français.
      <h1><a name="cont" id="cont">
      <!-- DEBUT DU TITRE DU CONTENU | CONTENT TITLE BEGINS -->
      Bienvenue au Secrétariat du Conseil du Trésor du Canada
      <!-- FIN DU TITRE DU CONTENU | CONTENT TITLE ENDS -->
      </a></h1>
    2. Le titre de la zone de contenu de la page anglaise doit être en anglais.
      <h1><a name="cont" id="cont">
      <!-- CONTENT TITLE BEGINS | DEBUT DU TITRE DU CONTENU -->
      Welcome to the Treasury Board of Canada Secretariat
      <!-- CONTENT TITLE ENDS | FIN DU TITRE DU CONTENU -->
      </a></h1>
  9. Garnissez la zone de contenu du contenu voulu dans la même langue que la page. Le contenu doit débuter après le titre de la zone (</a></h1>) et doit être structuré au moyen de balises d'en‑tête (de « h2 » à « h6 »), s'il y a lieu. La première balise d'en‑tête doit être « h2 », car « h1 » aura déjà servi au titre de la zone de contenu.
    1. Le contenu de la page française doit être en français.
    2. Le contenu de la page anglaise doit être en anglais.
  10. Remplacez la valeur « Date de modification | Date Modified  » du pied de page par la date actuelle (exemple : <span class="date">2006-07-01</span>). La date doit être conforme à la forme normalisée des dates numériques de l'ISO (AAAA-MM-DD).

Haut de la page

7.2 Modèle de page de contenu des sites unilingues anglais

L'usage du modèle est obligatoire pour les pages de contenu des sites unilingues anglais.

7.2.1 Sélection du modèle

Choisissez une version anglaise (uniling\*col-ul-eng.html) de l'un des modèles de page de contenu configurés en respectant les exigences suivantes :

  • Le modèle uniling\3col-ul-eng.html doit être utilisé pour la première page de menu du site institutionnel et les premières pages des sous-sites.
  • Les modèles uniling\2col-ul-eng.html ou uniling\3col-ul-eng.html doivent être utilisés pour les autres pages du site. Il est recommandé d'utiliser les modèles uniling\2col-ul-eng.html, car ils permettent d'afficher des pages Web plus brèves que celles des modèles uniling\3col-ul-eng.html, grâce à une zone de contenu élargie. Un modèle uniling\1col-ul-eng.html doit être utilisé s'il est impossible d'insérer le contenu dans la zone de contenu d'un modèle uniling\2col-ul-eng.html.
  • Les modèles uniling\2col-ul-eng.html ou uniling\3col-ul-eng.html doivent être utilisés pour des applications Web. Un modèle uniling\1col-ul-eng.html doit être utilisé s'il est impossible d'insérer le contenu dans la zone de contenu d'un modèle uniling\2col-ul-eng.html.

7.2.2 Création d'une page Web à partir du modèle choisi

Le procédé qui suit vous permettra de créer une page Web à partir du modèle choisi :

  1. Copiez le modèle choisi et sauvegardez‑le localement en changeant au besoin le nom du fichier.
  2. Garnissez les éléments de métadonnées des valeurs voulues en anglais.
  3. Ajoutez le bon titre anglais à l'élément « title » (exemple : <title>Welcome to the Treasury Board of Canada Secretariat</title>).
  4. Changez le fil d'Ariane, au besoin. Tous les éléments du fil doivent être en anglais, mener à des pages anglaises et être situés entre les codes <p class="breadcrumb"> et </p>.
  5. Si vous utilisez un modèle 3col-eng.html ou 2col-eng.html ,garnissez le menu latéral gauche de liens institutionnels. Par souci d'accessibilité, réutilisez la structure du menu. Comme l'illustre la structure, des éléments d'en‑tête du menu latéral droit doivent être utilisés seulement pour grouper les liens, et tous les liens doivent être groupés. Le menu de gauche doit demeurer textuel, et il faut donc éviter d'utiliser des éléments graphiques ou décoratifs. Des changements ne peuvent être effectués qu'entre les codes <div id="left"> et </div>.
  6. Si vous utilisez un modèle 3col-eng.html, garnissez le menu latéral droit de contenu. Par souci d'accessibilité, réutilisez la structure du menu. Comme l'illustre la structure, des éléments d'en‑tête du menu laté droit doivent être utilisés seulement pour grouper le contenu (y compris les liens), et tout le contenu doit être groupé par un élément d'en-tête. Des changements ne peuvent être effectués qu'entre les codes <div id="right"> et </div>.
  7. Ajoutez le bon titre anglais à la zone de contenu. Le titre choisi doit concorder avec celui qui figure dans l'élément de titre (étape 4).

    <h1><a name="cont" id="cont">
    <!-- CONTENT TITLE BEGINS | DEBUT DU TITRE DU CONTENU -->
    Welcome to the Treasury Board of Canada Secretariat
    <!-- CONTENT TITLE ENDS | FIN DU TITRE DU CONTENU -->
    </a></h1>
  8. Garnissez la zone de contenu du contenu anglais voulu. Le contenu doit débuter après le titre de la zone (</a></h1>) et être structuré au moyen de balises d'en‑tête (de « h2 » à « h6 »), s'il y a lieu. La première balise d'en‑tête doit être « h2 », car « h1 » aura déjà servi au titre de la zone de contenu.
  9. Remplacez la valeur « Date Modified » du pied de page par la date actuelle (exemple : <span class="date">2006-07-01</span>). La date doit être conforme à la forme normalisée des dates numériques de l'ISO (AAAA‑MM‑JJ).

7.3 Modèle de page de contenu des sites unilingues français

L'usage du modèle est obligatoire pour toutes les pages de contenu des sites unilingues français.

7.3.1 Sélection du modèl

Choisissez une version française (uniling\*col-ul-fra.html) de l'un des modèles de page de contenu configurés en respectant les exigences suivantes :

  • Le modèle 3col-ul-fra.html doit être utilisé pour la première page de menu du site institutionnel et les premières pages des sous-sites.
  • Les modèles 2col-ul-fra.html ou 3col-ul-fra.html peuvent être utilisés pour les autres pages du site. Il est recommandé d'utiliser un modèle 2col-ul-fra.html, car il permet d'afficher des pages Web plus brèves que celles des modèles 3col-ul-fra.html, grâce à une zone de contenu élargie. Un modèle 1col-ul-fra.html doit être utilisé s'il est impossible d'insérer le contenu dans la zone de contenu d'un modèle 2col-ul-fra.html.
  • Les modèles uniling\2col-ul-fra.html ou uniling\3col-ul-fra.html doivent être utilisés pour des applications Web. Un modèle uniling\1col-ul-fra.html doit être utilisé s'il est impossible d'insérer le contenu dans la zone de contenu d'un modèle uniling\2col-ul-fra.html.

7.3.2 Création d'une page Web à partir du modèle choisi

Le procédé qui suit vous permet de créer une page Web à partir du modèle choisi :

  1. Faites une copie du modèle choisi, sauvegardez‑la localement et changez le nom du fichier, au besoin.
  2. Garnissez les éléments de métadonnées des valeurs voulues en français.
  3. Ajoutez le bon titre français à l'élément « title » (exemple : <title>Bienvenue au Secrétariat du Conseil du Trésor du Canada</title>).
  4. Changez le fil d'Ariane, au besoin. Tous les éléments du fil doivent être en français, mener à des pages françaises et se situer entre les codes <p class="breadcrumb"> et </p>.
  5. Si vous utilisez un modèle 3col-fra.html ou 2col-fra.html, garnissez le menu latéral gauche de liens institutionnels. Par souci d'accessibilité, réutilisez la structure existante du menu. Comme l'illustre la structure, des éléments d'en‑tête du menu latéral gauche doivent être utilisés seulement pour grouper les liens, et tous les liens doivent être groupés. Le menu latéral gauche doit demeurer textuel, et il faut donc éviter d'utiliser des éléments graphiques ou décoratifs. Des changements ne peuvent être effectués qu'entre les codes <div id="left"> et </div>.
  6. Si vous utilisez un modèle 3col-fra.html, garnissez le menu latéral droit de contenu. Par souci d'accessibilité, réutilisez la structure existante du menu. Comme l'illustre la structure, des éléments d'en‑tête du menu latéral droit doivent être utilisés seulement pour grouper le contenu (u compris les liens), et tout le contenu doit être groupé par un élément d'en-tête. Des changements ne peuvent être effectués qu'entre les codes <div id="right"> et </div>.
  7. Ajoutez le bon titre français à l'endroit réservé à cette fin de la zone de contenu. Le titre de la zone doit concorder avec celui de l'élément de titre (étape 4).

    <h1><a name="cont" id="cont">
    <!-- DEBUT DU TITRE DU CONTENU | CONTENT TITLE BEGINS -->
    Bienvenue au Secrétariat du Conseil du Trésor du Canada
    <!-- FIN DU TITRE DU CONTENU | CONTENT TITLE ENDS -->
    </a>
  8. Garnissez la zone de contenu du contenu français voulu. Le contenu doit débuter après le titre de la zone (</a></h1>), et il doit être structuré au moyen de balises d'en‑tête (de « h2 » à « h6 »), selon le cas. La première balise d'en‑tête doit être « h2 », car « h1 » aura déjà servi au titre de la zone de contenu.
  9. Remplacez la valeur « Date de modification » du pied de page par la date actuelle (exemple : <span class="date">2006-07-01</span>). La date doit être conforme à la forme normalisée des dates numériques de l'ISO (AAAA‑MM‑JJ).

7.4 Modèle de page de contenu en langues autres que l'anglais et le français

L'usage du modèle est obligatoire pour les pages dont le contenu est principalement dans une langue autre que l'anglais et le français.

Si l'administration centrale de l'institution est au Québec, les présentes directives s'appliquent aux fichier multiling\*col-ml-quebec-spa.html. Si elle est hors Québec, les directives s'appliquent aux fichier multiling\*col-ml-spa.html.

7.4.1 Sélection du modèle

Choisissez l'un des modèles de page de contenu configurés en respectant les exigences suivantes :

  • Les modèles multiling\3col-ml*.html doivent être utilisés pour la première page de menu du site institutionnel et les premières pages des sous-sites;
  • Les modèles multiling\2col-ml*.html ou multiling\3col-ml*.html doivent être utilisés pour les autres pages du site. Il est recommandé d'utiliser un modèle multiling\2col-ml*.html, car il permet d'afficher des pages Web plus brèves que celles des modèles multiling\3col-ml*.html, grâce à une zone de contenu élargie. Un modèle multiling\1col-*.html doit être utilisé s'il est impossible d'insérer le contenu dans la zone de contenu d'un modèle multiling\2col-*.html;
  • Les modèles multiling\2col-ml*.html ou multiling\3col-ml*.html doivent être utilisés pour des applications Web. Un modèle multiling\1col-ml*.html doit être utilisé s'il est impossible d'insérer le contenu dans la zone de contenu d'un modèle multiling\2col-ml*.html.

7.4.2 Création d'une page Web à partir du modèle choisi

Le procédé qui suit vous permettra de créer une page Web à partir du modèle choisi :

  1. Faites une copie du modèle choisi et sauvegardez‑la localement en changeant le nom du fichier, au besoin.
  2. Changez les chemins d'accès des liens de sélection de la langue.
    • Changez le chemin d'accès du lien « English » pour qu'il mène à la version anglaise de la page.
    • Changez le chemin d'accès du lien « Français » pour qu'il mène à la version française de la page.
  3. Garnissez les éléments de métadonnées des valeurs voulues qui correspondent à la langue de la page.
  4. Ajoutez le bon titre à l'élément « title ». Le titre doit être dans la même langue que la page (exemple : <title>Bienvenido al Gobierno de Canadá </title>).
  5. Changez le fil d'Ariane, au besoin. Tous les éléments du fil doivent être situés entre les codes <p class="breadcrumb"> et </p>.
    1. Tous les éléments du fil d'Ariane français doivent être en français et tous les éléments assortis de liens doivent mener à des pages françaises.
    2. Tous les éléments du fil d'Ariane anglais doivent être en anglais et tous les éléments assortis de liens doivent mener à des pages anglaises.
  6. Si vous utilisez un modèle multiling\3col-ml*.html ou multiling\2col-ml*.html, garnissez le menu latéral gauche de liens institutionnels. Par souci d'accessibilité, réutilisez la structure existante du menu. Comme l'illustre la structure, des éléments d'en‑tête du menu latéral gauche doivent être utilisés seulement pour grouper les liens, et tous les liens doivent être groupés. Le menu latéral gauche doit demeurer textuel, et il faut donc éviter d'utiliser des éléments graphiques ou décoratifs. Des changements ne peuvent être effectués qu'entre les codes <div id="left"> et </div>.
  7. Si vous utilisez un modèle multiling\3col-ml*.html, garnissez le menu latéral droit de contenu. Par souci d'accessibilité, réutilisez la structure existante du menu. Comme l'illustre la structure, des éléments d'en‑tête du menu latéral droit doivent être utilisés seulement pour grouper le contenu (y compris les liens), et tout le contenu doit être groupé par un élément d'en-tête. Des changements ne peuvent être effectués qu'entre les codes <div id="right"> et </div>.
  8. Ajoutez le bon titre, dans la langue de la page, à la zone de contenu. Le titre de la zone doit concorder avec celui de l'élément de titre (étape 4).
    1. Si l'administration centrale de l'institution est située au Québec :

      <h1><a name="cont" id="cont">
      <!-- CONTENT TITLE BEGINS | DEBUT DU TITRE DU CONTENU -->
      Bienvenido al Gobierno de Canadá
      <!-- CONTENT TITLE ENDS | FIN DU TITRE DU CONTENU -->
      </a></h1>
    2. Si l'administration centrale de l'institution est hors Québec :

      <h1><a name="cont" id="cont">
      <!-- DEBUT DU TITRE DU CONTENU | CONTENT TITLE BEGINS -->
      Bienvenido al Gobierno de Canadá
      <!-- FIN DU TITRE DU CONTENU | CONTENT TITLE ENDS -->
      </a></h1>
  9. Garnissez la zone de contenu du contenu voulu dans la langue de la page. Le contenu doit débuter après le titre de la zone (</a></h1>), et il doit être structuré au moyen de balises d'en‑tête (« h2 » à « h6 »), selon le cas. La première balise d'en‑tête doit être « h2 », car « h1 » aura déjà servi au titre de la zone de contenu.
  10. Remplacez la valeur « Date de modification | Date Modified  » du pied de page par la date actuelle (exemple : <span class="date">2006-07-01</span>). La date doit être conforme à la forme normalisée des dates numériques de l'ISO (AAAA‑MM‑JJ).

Haut de la page

8.0 Classes de feuilles de style CSS utilitaires définies par le modèle

Les classes de feuilles de style CSS utilitaires offrent un moyen de changer la taille des polices, d'aligner le texte et de créer d'autres effets visuels en respectant les fonctions des navigateurs. Vous pouvez utiliser l'une des classes d'utilitaires dans un conteneur en ajoutant l'attribut de la classe à l'élément de conteneur et en indiquant le nom de la classe voulu comme valeur de l'attribut.

Exemple : <p class="alignRight">Texte avec un alignement droit</p>

8.1 Classes de taille de police

Les classes de taille de police permettent de modifier la taille de la police d'un texte, et elles sont d'usage aisé, conformes aux exigences de la NSI et adaptées aux navigateurs. Utilisez-les plutôt que des classes personnalisées (qui font appel aux propriétés de la police ou de la taille de la police) pour appuyer un large éventail d'ensembles navigateur‑plateforme.

Le tableau qui suit énumère toutes les classes offertes et la taille de police qui en résulte :

Nom de la classe Taille de la police pour la plupart des navigateurs Taille de la police pour les navigateurs plus anciens Résultats visuels
fontSize70 70% 7.0 points Taille de police obtenue
fontSize75 75% 7.5 points Taille de police obtenue
smallFont 75% 8.0 points Taille de police obtenue
fontSize80 80% 8.0 points Taille de police obtenue
fontSize85 85% 8.5 points Taille de police obtenue
mediumFont 85% 8.5 points Taille de police obtenue
fontSize90 90% 9.0 points Taille de police obtenue
fontSize95 95% 9.5 points Taille de police obtenue
fontSize100 100% 10.0 points Taille de police obtenue
fontSize105 105% 10.0 points Taille de police obtenue
fontSize110 110% 10.5 points Taille de police obtenue
h6Size 110% 10.5 points Taille de police obtenue
fontSize115 115% 11.0 points Taille de police obtenue
fontSize120 120% 11.5 points Taille de police obtenue
h5Size 120% 11.5 points Taille de police obtenue
fontSize125 125% 12.0 points Taille de police obtenue
fontSize130 130% 13.0 points Taille de police obtenue
h4Size 130% 13.0 points Taille de police obtenue
fontSize135 135% 13.0 points Taille de police obtenue
big 140% 13.5 points Taille de police obtenue
fontSize140 140% 13.5 points Taille de police obtenue
h3Size 140% 13.5 points Taille de police obtenue
fontSize145 145% 13.5 points Taille de police obtenue
fontSize150 150% 14.0 points Taille de police obtenue
h2Size 150% 14.0 points Taille de police obtenue
fontSize155 155% 14.5 points Taille de police obtenue
fontSize160 160% 15.0 points Taille de police obtenue
h1Size 160% 15.0 pt Taille de police obtenue
fontSize165 165% 16.0 points Taille de police obtenue
fontSize170 170% 16.5 points Taille de police obtenue
fontSize175 175% 17.0 points Taille de police obtenue
fontSize180 180% 17.5 points Taille de police obtenue
fontSize185 185% 18.0 points Taille de police obtenue
fontSize190 190% 19.0 points Taille de police obtenue
fontSize195 195% 19.5 points Taille de police obtenue
fontSize200 200% 20.0 points Taille de police obtenue

8.2 Classes de largeur

Les classes de largeur permettent de définir la largeur d'un conteneur, et elles sont d'usage aisé, conformes aux exigences de la NSI et adaptées aux navigateurs.

Le tableau qui suit énumère toutes les classes offertes et les largeurs qui en résultent.

Nom de la classe Largeur
widthFull 98.5%
width95 95%
width90 90%
width85 85%
width80 80%
width75 75%
width70 70%
width65 65%
width60 60%
width55 55%
width50 50%
width45 45%
width40 40%
width35 35%
width30 30%
width25 25%
width20 20%
width15 15%
width10 10%
width5 5%

8.3 Classes de mise en retrait

Les classes de mise en retrait permettent de définir la mise en retrait d'un conteneur, et elles sont d'usage aisé, conformes aux exigences de la NSI et adaptées aux navigateurs.

Le tableau qui suit énumère toutes les classes offertes et la mise en retrait qui en résulte :

Nom de la classe Taille de mise en retrait Résultat visuel
indent1 18 Mise en retrait obtenue
indent2 36 Mise en retrait obtenue
indent3 54 Mise en retrait obtenue
indent4 72 Mise en retrait obtenue
indent5 90 Mise en retrait obtenue

8.4 Classes d'alignement

Les classes d'alignement permettent de définir l'alignement d'objets‑blocs, et elles sont d'usage aisé, conformes aux exigences de la NSI et adaptées aux navigateurs.

Le tableau qui suit énumère toutes les classes offertes et l'alignement qui en résulte :

Nom de
la classe		 Alignement
horizontal		 Alignement
latéral		 Résultat
visuel
alignLeft

Gauche Défaut (baseline) Alignement obtenu
alignCenter

Centre Défaut   (baseline) Alignement obtenu
alignRight

Droite Défaut (baseline) Alignement obtenu
alignTop

Défaut (gauche) Haut Alignement obtenu
alignBottom

Défaut  (gauche) Bas Alignement obtenu
alignTopLeft

Left Haut Alignement obtenu
alignTopCenter

Centre Haut Alignement obtenu
alignTopRight

Droite Haut Alignement obtenu
alignBottomLeft

Gauche Bas Alignement obtenu
alignBottomCenter

Centre Bas Alignement obtenu
alignBottomRight

Droite Bas Alignement obtenu

8.5 Classes enveloppantes

Les classes enveloppantes permettent d'envelopper de texte des objets telles images et tableaux, et elles sont d'usage aisé, conformes aux exigences de la NSI et adaptées aux navigateurs. La classe voulue est appliquée à l'image ou au tableau que le texte doit envelopper.

Le tableau qui suit énumère toutes les classes offertes et l'enveloppe ou l'alignement qui en résulte :

Nom
de la classe		 Enveloppe Alignement
latéral
floatLeft Gauche Défaut (baseline)
floatRight Droite Défaut (baseline)
image-left Gauche Haut du texte (text-top)
image-right Droite Haut du texte (text-top)

Haut de la page

8.6 Classes de listes non numérotées

Les classes de listes non numérotées permettent d'attribuer des puces à des listes non numérotées (« ul »), et elles sont d'usage aisé, conformes aux exigences de la NSI et adaptées aux navigateurs. Il suffit d'appliquer l'une des classes à l'élément « ul » d'une liste non numérotée.

Le tableau qui suit énumère toutes les classes offertes et les puces qui en résultent :

Nom de
la classe		 Type
de puce		 Résultat
visuel
noBullet Aucune
  • Puce obtenue
disc Disque
  • Puce obtenue
square Carré
  • Puce obtenue
circle Cercle
  • Puce obtenue

8.7 Classes de listes numérotées

Les classes de listes numérotées permettent d'attribuer une numérotation aux listes numérotées (« ol »), et elles sont d'usage aisé, conformes aux exigences de la NSI et adaptées aux navigateurs. Il suffit d'appliquer l'une des classes à l'élément « ol » d'une liste numérotée.

Le tableau qui suit énumère toutes les classes offertes et la numérotation qui en résulte :

Nom de
la classe		 Type de
numérotation		 Visual result
lower-alpha Caractère alphabétique minuscule
  1. Numérotation obtenue
upper-alpha Caractère alphabétique majuscule
  1. Numérotation obtenue
lower-roman Chiffre romain minuscule
  1. Numérotation obtenue
upper-roman Chiffre romain majuscule
  1. Numérotation obtenue

8.8 Classes de couleurs

Les classes de couleurs permettent de choisir des couleurs d'avant‑plan et d'arrière‑plan, et elles sont d'usage aisé, conformes aux exigences de la NSI et adaptées aux navigateurs.

Le tableau qui suit énumère toutes les classes offertes et les couleurs qui en résultent :

Nom de la classe Couleur d'avant plan Couleur d'arrière‑plan Résultat visuel
black #000000 Transparent Couleur obtenue
blue #0000FF Transparent Couleur obtenue
deepyellow #FFCC33 Transparent Couleur obtenue
green #009933 Transparent Couleur obtenue
grey #999999 Transparent Couleur obtenue
red #FF0000 Transparent Couleur obtenue
white #FFFFFF Transparent Couleur obtenue
blackBG Couleur par défaut #000000 Couleur obtenue
blueBG Couleur par défaut #0000FF Couleur obtenue
deepyellowBG Couleur par défaut #FFCC33 Couleur obtenue
greenBG Couleur par défaut #009933 Couleur obtenue
lightgreyBG Couleur par défaut #CCCCCC Couleur obtenue
redBG Couleur par défaut #FF0000 Couleur obtenue
whiteBG Couleur par défaut #FFFFFF Couleur obtenue

8.9 Classes diverses

Les classes diverses permettent d'obtenir des effets visuels variés, et elles sont d'usage aisé, conformes aux exigences de la NSI et adaptées aux navigateurs.

Le tableau qui suit énumère toutes les classes offertes et l'effet visuel qui en résulte :

Nom de la classe Usage Résultat visuel
compress Établit les marges inférieure et supérieure à zéro, réduisant l'espace blanc vertical lorsque utilisé avec les éléments des objets-blocs suivants : p, h1, h2, h3, h4, h5, h6, ul et ol. Avant :
Texte régulier.

Texte dans un élément « p ».

Texte régulier.

Après :
Texte régulier.

Texte dans un élément « p » utilisant la classe « compress ».

Texte régulier.
doubleLineSpace Établit l'interlignage double du texte du conteneur. Résultat visuel, résultat visuel, résultat visuel, résultat visuel
headline Établit les marges inférieure et supérieure à zéro et réduit la taille de texte pour les en têtes (« h1 » à « h6 »). Il en résulte une diminution de l'espace blanc vertical et de la taille de la police. Cette classe empêchera également le soulignement de tous les liens qui utilisent cette classe à moins que le lien soit en évidence. Avant :
Texte régulier

Texte dans un élément « h2 «.

Texte régulier

Après :
Texte régulier

Texte dans un élément « h2 » qui utilise la classe « headline ».

Texte régulier.
highlight Applique une bordure, une couleur d'arrière‑plan et un remplissage à un conteneur.
Résultat visuel
lowercase Transforme le texte du conteneur en minuscules.
Résultat visuel
noWrap Empêche le texte du conteneur d'envelopper un objet.  
uppercase Transforme le texte du conteneur en majuscules.
Résultat visuel
Wrap Sert à permettre au contenu d'être enrobé à droite de la zone de contenu h1 dans Internet Explorer.

Nota : N'utiliser cette classe que lorsque le contenu est enveloppé par la droite de la zone de contenu h1. Son utilisation dans toute autre situation risque d'entraîner des problèmes d'affichage en ce qui concerne la bordure de la zone de contenu.		  
wrapContainer Utilisé pour contrôler l'habillage des images et des tableaux avec du texte. Pour obtenir de plus amples renseignements, veuillez consulter Bouclage de texte autour d'images et de tableaux.  

9.0 Feuilles de style CSS côté client visant à accroître l'accessibilité

Les normes de la NSI exigent une conception visuelle particulière qui peut nécessiter le recours à une solution de rechange pour accroître l'accessibilité lorsque les circonstances le justifient. Le concept du modèle offre la souplesse voulue pour permettre aux clients de configurer la présentation visuelle de manière à obtenir l'accessibilité dont ils ont besoin en faisant usage de feuilles de style CSS côté client.

La plupart des navigateurs permettent de définir une feuille de style personnalisée qui est appliquée par la suite à chaque page Web que consulte le client. Pour profiter de la fonction, le client n'a qu'à définir une feuille de style personnalisée et à donner instruction au navigateur d'en faire usage.

Pour pouvoir définir une feuille de style personnalisée, le client doit connaître à la fois les feuilles de style CSS et la technique de développement de pages Web. Il existe de nombreuses feuilles de style personnalisées à télécharger en ligne qui permettent d'améliorer l'accessibilité aux pages Web en général, mais il est probable que la plupart des clients jugent excessivement difficile la création d'une telle feuille de style qui active des fonctions d'accessibilité particulières du modèle.

Pour que les clients puissent améliorer leur accessibilité aux pages Web en faisant usage du modèle de page NSI du gouvernement du Canada, des feuilles de style CSS côté client ont été conçues, lesquelles peuvent être incluses aisément parmi les feuilles de style personnalisées. La page d'aide de l'institution doit offrir au client la possibilité de télécharger les feuilles de style CSS côté client.

9.1 Liens « Saut de navigation » visibles

Il a fallu rendre invisibles les éléments « Saut de navigation » pour répondre aux exigences de la conception visuelle. Cette façon de faire est sans conséquence pour les clients qui utilisent un lecteur d'écran, mais elle complique la tâche à ceux qui n'utilisent qu'un clavier pour profiter des éléments susmentionnés. Les clients qui utilisent un clavier ont quand même accès aux éléments « Saut de navigation » (par tabulation) mais les liens sont plus difficiles à choisir, étant invisibles.

Bien que la NSI n'autorise pas l'affichage par défaut de liens « Saut de navigation » visibles, les clients peuvent les faire apparaître en ajoutant la feuille de style CSS côté client suivante à leurs feuilles de style personnalisées :

div.navaid {
      position: static !important;
      font-size: 100% !important;
      float: none !important;
      overflow: visible !important;
      width: auto !important;
      height: auto !important;
      max-width: auto !important;
      margin-left: 0px !important;
      margin-right: 0px !important;
      padding-left: 0px !important;
      color: #000 !important;
}
div.navaid a {
      color: #00F !important;
      padding: 5px !important;
      line-height: 150% !important;
      border: none !important;
      position: static !important;
      zoom: 0 !important;
}
div.page div.core div.navaid a:hover, div.page div.core div.navaid a:active, div.page div.core div.navaid a:focus {
      color: #00F !important;
      border: none !important;
      background-color: #FFF !important;
}

9.2 Page extensibl

Il a fallu fixer à 760 pixels la largeur du modèle pour satisfaire aux exigences de la conception visuelle. Un modèle extensible améliore l'accessibilité aux pages Web ou leur potentiel d'utilisation pour certains clients.

Bien que la NSI n'autorise pas l'extensibilité du modèle par défaut, les clients peuvent rendre extensibles les pages Web au moyen d'un modèle en ajoutant la feuille de style CSS côté client suivante à leurs feuilles de style personnalisées :

div.page {
      width : 100% !important;
}

9.3 Soulignement de tous les liens

Il a fallu supprimer le soulignement des liens présentés dans le menu latéral et la barre de menu commune pour satisfaire aux exigences de la conception visuelle. Certains clients peuvent avoir de la difficulté à reconnaître des liens qui ne sont pas soulignés ou préférer que tous le soient, peu importe l'effet du soulignement sur la conception visuelle.

Bien que la NSI n'autorise pas le soulignement par défaut des liens figurant dans le menu latéral et la barre de menu commune, les clients peuvent opter pour le soulignement de tous les liens en ajoutant la feuille de style CSS côté client suivante à leurs feuilles de style personnalisées :

a:link, a:visited, a:hover, a:active, a:focus {
      text-decoration: underline !important;
}

9.4 Couleurs uniformes des liens

Il a fallu fixer des couleurs d'avant‑plan et d'arrière‑plan des liens dans certaines zones de la page pour satisfaire aux exigences de la conception visuelle. Certains clients peuvent avoir de la difficulté à repérer les liens si les couleurs ne sont pas uniformes dans l'ensemble de la page.

Bien que la NSI n'autorise pas l'établissement par défaut de couleurs d'avant‑plan et d'arrière‑plan uniformes de tous les liens, les clients peuvent les définir en ajoutant la feuille de style CSS côté client suivante à leurs feuilles de style personnalisées :

a:link, a:visited, a:hover, a:active, a:focus {
      background-color: #FFF !important;
      font-weight: normal !important;
      font-style: normal !important;
      font-variant: normal !important;
      padding: 0px 0px 2px 2px !important;
}
a:link {
      color: #00F !important;
}
a:visited {
      color: #009 !important;
}
a:hover, a:active, a:focus {
      color: #F00 !important;
}

Les couleurs mentionnées dans l'exemple ci‑dessus peuvent être modifiées et sont attribuées comme suit :

Propriété du lien Nom de la classe Propriété de la classe Couleur (codes hexadécimaux) Couleur
Couleur d'arrière‑plan a:link, a:visited, a:hover background-color #FFF Blanc
Couleur de lien normal a:link color #00F Bleu
Couleur de lien normal a:visited color #009 Bleu foncé
Couleur de lien consulté a:hover, a:active, a:focus color #F00 Rouge

Haut de la page

9.5 Bannière à contraste élevé de page de contenu

Les modèles affichent le texte d'avant‑plan de la bannière de page de contenu soit sur une couleur soit sur une image d'arrière‑plan afin de satisfaire aux exigences de conception visuelle et d'accessibilité. Certains clients peuvent juger insuffisant le contraste entre le texte d'avant‑plan et l'arrière‑plan, selon la taille de police et les couleurs utilisées.

Le client peut afficher une bannière à contraste élevé de page de contenu en désactivant la couleur ou l'image d'arrière‑plan et en définissant un ensemble de couleurs d'avant‑plan et d'arrière‑plan contrastantes. Il lui suffit d'ajouter la feuille de style CSS côté client suivante à ses feuilles de style personnalisées :

div.banner, div.banner-eng, div.banner-fra, div.banner-lfcoa-eng, div-banner-lfcoa-fra {
      background: none !important;
      border-top: 1px solid #000 !important;
      border-left: 1px solid #000 !important;
      border-right: 1px solid #000 !important;
      min-height: 5.58em !important;
      margin-top: 3.14em !important;
      padding-bottom: 0.67em !important;
}
* html img.coa, * html img.lf {
      margin-top: -2.84em !important;
}
div.banner-lfcoa-eng img.coa, div.banner-lfcoa-eng img.lf, div-banner-lfcoa-fra img.coa, div-banner-lfcoa-fra img.lf {
      display: inline !important;  
}
div.banner-eng p.main, div-banner-fra p.main, div.banner-lfcoa-eng p.main, div-banner-lfcoa-fra p.main, div.banner-eng p.siteuri, div-banner-fra p.siteuri, div.banner-lfcoa-eng p.siteuri, div-banner-lfcoa-fra p.siteuri {
      position: static !important;
      font-size: 100% !important;
      float: none !important;
      overflow: visible !important;
      width: auto !important;
      height: auto !important;
}
div.banner-eng p.main, div.banner-fra p.main, div.banner-lfcoa-eng p.main, div.banner-lfcoa-fra p.main {
      font-family: "times new roman", sans-serif !important;
      font-weight: bold !important;
      font-size: 185% !important;
      margin: 0 !important;
      padding: 0 !important;
}
div.banner-eng p.siteuri, div-banner-fra p.siteuri, div.banner-lfcoa-eng p.siteuri, div-banner-lfcoa-fra p.siteuri {
      font-family: Arial, Helvetica, sans-serif !important;
      background-color: transparent !important;
      font-weight: lighter !important;
      font-size: 110% !important;
      margin: 0 !important;
      padding: 0 !important; 
}
p.main, p.main span, p.siteuri, p.siteuri span {
      color: #000 !important;
}
* html p.main, * html p.main span, * html p.siteuri, * html p.siteuri span {
      width: 99.5% !important;
}
p.main img, p.siteuri img {
      display: none !important;
}

9.6 Zone de message à contraste élevé de la page d'accueil

Les modèles affichent le texte d'avant‑plan à la fois sur une couleur et une image d'arrière‑plan pour satisfaire aux exigences de la conception visuelle et de l'accessibilité. Certains clients peuvent juger le contraste insuffisant entre le texte d'avant‑plan et l'arrière‑plan, selon la taille de police et les couleurs utilisées.

Le client peut afficher une zone de message à contraste élevé de page d'accueil en désactivant la couleur et l'image d'arrière‑plan, et en définissant un ensemble de couleurs d'avant‑plan et d'arrière‑plan à contraste élevé. Il lui suffit d'ajouter la feuille de style CSS côté client suivante à ses feuilles de style personnalisées :

div.msgarea, div.msgareaalt {
      background: none !important;
      border-top: 1px solid #000 !important;
      border-left: 1px solid #000 !important;
      border-right: 1px solid #000 !important;
}
div.msgareaalt {
      border-bottom: 1px solid #000 !important;
}
* html div.msgarea, * html div.msgareaalt {
      width: 99.7% !important;
}
* html div.msgarea {
      height: 129px !important;
}
* html div.msgareaalt {
      height: 248px !important;
}
div.msgarea h1, div.msgareaalt h1 {
      color: #000 !important;
}
div.msgarea h1.hidden, div.msgareaalt h1.hidden {
      position: static !important;
      font-size: 200% !important;
      float: none !important;
      overflow: visible !important;
      width: 100% !important;
      height: auto !important;
      font-weight: bold !important;
}
div.headcontainer {
      background-color: #FFF !important;
      color: #000 !important;
      border: 1px solid #000 !important;
}
* html div.headcontainer {
      width: 99.7% !important;
      height: 118px !important;
}

9.7 Liens consultés/actifs/en évidence à contraste élevé

Dans le but de répondre à la fois aux exigences de la conception visuelle et de l'accessibilité pour la zone du message de la page d'accueil, le modèle ne modifie pas la couleur d'arrière-plan des liens lorsque le pointeur de la souris survole le lien ou lorsqu'un lien est choisi au moyen du clavier ou d'un autre périphérique d'entrée. Selon la façon dont le navigateur surligne les liens, la taille de la police courante et les couleurs utilisées, certains clients peuvent avoir de la difficulté à déterminer quel lien ils sont sur le point de sélectionner.

Afin qu'il soit plus facile de déterminer quel lien ils sont sur le point de sélectionner, les clients peuvent préciser une couleur d'avant-plan et d'arrière-plan pour les liens lorsque le pointeur de la souris survole un lien ou lorsqu'un lien est choisi au moyen du clavier ou d'un autre périphérique d'entrée. Il leur suffit d'ajouter la feuille de style CSS côté client à leurs feuilles de style personnalisées.

Pour s'assurer d'un contraste élevé de la zone des messages de la page d'accueil, il sera nécessaire de désactiver la couleur et l'image d'arrière-plan et de préciser une combinaison d'un contraste d'avant-plan et une couleur d'arrière-plan. Il suffit à l'utilisateur d'ajouter la feuille de style CSS côté client à sa feuille de style personnalisée :

a:hover, a:active, a:focus {
      color: #000 !important;
      background-color: #FFF !important;
}

Dans l'exemple suivant, les couleurs peuvent être modifiées et assignées comme suit :

Propriété du lien Nom de la classe Propriété de la classe Couleur (codes hexadécimaux) Couleur
Couleurs des liens consultés / actifs / en évidence a:hover, a:active, a:focus color #000 Noir
Couleur de l'arrière-plan a:hover, a:active, a:focus background-color #FF0 Jaune

10.0 Amélioration progressive

Les Canadiens ont le droit d'obtenir des renseignements et des services dans les sites du Gouvernement du Canada quelle que soit la technologie qu'ils utilisent. La clé de la mise en oeuvre effective d'une accessibilité universelle réside dans la conception de sites de manière à desservir le public le plus large possible, ainsi que la plus vaste gamme possible de plates-formes matérielles et logicielles, des technologies adaptées jusqu'aux technologies en émergence.

Jusqu'à présent, on avait recours à la dégradation progressive afin de desservir le plus vaste public. Cette approche consistait à concevoir un site Web pour une ou plusieurs configurations cibles, puis d'ajouter des éléments permettant le fonctionnement avec d'autres configurations, mais en mode dégradé. Le principe de la dégradation progressive s'applique bien à la conception d'un modèle de base, mais il peut se révéler problématique car, pour assurer la compatibilité avec les technologies adaptées et d'autres configurations, il limite le recours aux technologies émergentes et aux options d'interfaces perfectionnées.

En raison de ces limitations, on est passé de l'approche visant une dégradation progressive à l'approche de l'amélioration progressive pour les multimédias imbriqués et d'autres améliorations de pages Web. L'approche de l'amélioration progressive consiste à commencer par concevoir du contenu Web pour les configurations présentant le moins de possibilités, puis à intégrer une série d'améliorations fondées sur les capacités des configurations de chaque client. Cette approche constitue un progrès par rapport à la dégradation progressive parce qu'elle encourage l'introduction de technologies émergentes et d'options d'interfaces perfectionnées.

10.1 Affichage des valeurs de « title » pour les liens ciblés par le clavier

Pendant de nombreuses années, les navigateurs disposaient de la capacité d'afficher la valeur de « title » pour des liens afin d'améliorer l'accessibilité et l'utilisabilité. Pour la plupart des navigateurs, l'affichage de la valeur de « title » est déclenché lorsque le curseur d'une souris survole un lien. Malheureusement, l'affichage n'est pas déclenché lorsque le lien devient la cible du clavier et le titre est affiché seulement pour les personnes utilisant une souris.

Ce problème a été résolu en mettant en oeuvre une approche d'amélioration progressive fondée sur JavaScript afin d'afficher la valeur de « title » lorsqu'un lien devient la cible du clavier. Cette méthode reproduit la manière dont la valeur de « title » est affichée lorsque le curseur de la souris survole un lien. Cette fonction a été introduite dans la version 1.04 de la NSI du GC afin d'améliorer l'accessibilité et l'utilisabilité pour les clients qui n'utilisent pas de souris.

10.2 Prise en charge de la transparence alpha des images PNG dans Internet Explorer 5.5 et 6.0

Des images dont des parties sont transparentes sont souvent utilisées afin de mélanger sans coupure des images ayant une vaste gamme d'arrière-plans. Les formats d'image le plus largement pris en charge avec traitement de la transparence sont GIF et PNG. Bien que ces deux formats prennent en charge la transparence, la méthode de transparence alpha appliquée au format PNG produit des mélanges d'arrière-plan de beaucoup supérieurs à l'approche binaire limitée de la transparence du format GIF.

Les navigateurs prennent en charge le format PNG depuis plusieurs années mais, malheureusement, ce n'est qu'à sa version 7.0 qu'Internet Explorer a commencé à offrir la prise en charge de la transparence alpha pour le format PNG. Par ailleurs, tous les autres navigateurs qui acceptent le format PNG, prennent aussi en charge la transparence alpha, et la prise en charge de la transparence alpha des fichiers PNG dans Internet Explorer 5.5 et 6.0 est réalisée au moyen du fichier « AlphaImageLoader ». Le filtre « AlphaImageLoader » présente toutefois le problème qu'il est complexe à mettre en oeuvre sans compromettre la conformité avec la NSI et la prise en charge par le navigateur.

Ce problème a été résolu en mettant en oeuvre une approche d'amélioration progressive fondée sur JavaScript afin que la transparence alpha puisse être prise en charge dans Internet Explorer 5.5 et 6.0 pour des fichiers PNG spécifiques. Cette fonction avait été introduite dans la version 1.03 du modèle NSI du GC afin d'améliorer l'apparence de la feuille d'érable dans des bannières et pour fournir une approche conforme à la NSI et sûre pour les navigateurs, qui permettrait la prise en charge de la transparence alpha de fichiers PNG dans Internet Explorer 5.5 et 6.0.

10.2.1 Comment permettre la prise en charge de la transparence alpha pour des fichiers PNG spécifiques

Les étapes suivantes permettent la prise en charge de la transparence alpha de certains fichiers PNG par Internet Explorer 5.5 et 6.0 :

  1. Utilisez la version 1.03 ou une version plus récente du modèle NSI du GC.
  2. Créez des versions GIF et PNG d'une image comportant des sections transparentes. Ces fichiers doivent avoir le même nom, sauf pour ce qui est des extensions de fichier « .gif » et « .png » (par exemple, « lffl.gif » et « lffl.png »).
  3. Placez les versions GIF et PNG de l'image dans le même répertoire.
  4. Créez un élément « img » dans la page Web en inscrivant le chemin vers la version GIF de l'image comme attribut « src » et « pngfix » comme valeur de l'attribut « class » (par exemple, <img src="images/lffl.gif" class="pngfix" height="65" width="65" alt="..." />).
  5. S'il est nécessaire que l'élément « img » renvoie à une classe CSS spécifique, ajouter le nom de la classe CSS et une espace immédiatement avant « pngfix » (par exemple, <img src="images/lffl.gif" class="lf pngfix" height="65" width="65" alt="..." />).

Lorsque la page se charge, l'approche d'amélioration progressive fondée sur JavaScript effectuera les actions suivantes :

  1. charger la version PNG de l'image dans le cas des navigateurs qui prennent en charge normalement la transparence alpha,
  2. charger le filtre « AlphaImageLoader » pour afficher la version PNG de l'image avec une prise en charge de la transparence alpha par Internet Explorer 5.5 et 6.0,
  3. charger la version GIF de l'image pour tous les autres navigateurs.

10.3 Lecteur multimédia

Le lecteur multimédia a été introduit dans la version 1.04 du modèle NSI du GC afin de fournir une solution simple et facile qui permettrait aux développeurs de diffuser des formats multimédias de manière accessible. Le lecteur a été conçu de manière à être compatible avec une vaste gamme de technologies adaptées et il met en oeuvre le principe de l'approche de l'amélioration progressive afin de garantir que le lecteur ne perturbera pas les configurations qui ne prennent pas en charge ce dernier. Le lecteur est extensible, il offre le sous-titrage codé et il peut afficher de multiples formats multimédias.

Bien qu'il soit disponible, le lecteur multimédia ne constitue qu'un élément d'une solution multimédia complète. Une solution multimédia accessible et complète fournit des transcriptions et est compatible avec des formats additionnels de médias avec sous-titres (comme « .wmv », « .mov » et « .mpeg »). Ces formats additionnels permettent que le plus vaste public possible puisse tirer avantage d'une version riche en médias.

10.3.1 Configuration du fichier de script du lecteur multimédia

Le modèle de la NSI du GC contient un fichier de script de lecteur multimédia nommé « ca.gc.mp-jm.js », qui se trouve dans le répertoire « scripts ». La fonction « loadMedia » près de la fin de ce fichier doit être configurée par un webmestre afin de permettre le fonctionnement du lecteur. Les options de configuration additionnelles sont décrites dans la section 10.3.3 (Flashvars).

Les étapes suivantes décrivent comment configurer la fonction « loadMedia » dans le fichier « ca.gc.mp-jm.js » :

  1. Précisez le chemin vers le fichier « mp-jm.swf » dans la variable « mediaplayerUrl ».

    var mediaplayerUrl = "<url>/mp-jm.swf" ;

  2. Précisez la langue par défaut du lecteur dans la variable « pLang ». La valeur entre guillemets doit être « fra » pour les institutions dont l'administration centrale est au Québec et « eng » pour les institutions hors Québec.

    var pLang = ( pLanguage ) ? pLanguage : "fra" ;

  3. Précisez le chemin vers le fichier d'image dans la variable « logo ». Le fichier d'image sera affiché en filigrane dans le coin inférieur droit du lecteur lorsque des fichiers audio seront lus. Tous les formats d'image sont pris en charge, mais on recommande les fichiers PNG transparents.

    var logo = "<url>.png ;

10.3.2 Mise en oeuvre du lecteur multimédia dans une page Web

Lorsque le fichier de script multimédia a été configuré par le webmestre et que les fichiers de modèle requis ont été installés, les développeurs peuvent mettre en oeuvre le lecteur multimédia dans leurs pages en apportant seulement quelques modifications.

Les étapes suivantes expliquent comment mettre en oeuvre le lecteur multimédia dans une page Web :

  1. Utilisez la version 1.04 ou une version ultérieure du modèle NSI du GC.
  2. Incluez le paramètre « multimedia » dans la section d'amélioration progressive de la page Web. La valeur de « multimedia » doit être « active ».

    var params = {
          lng:"fra",
          pngfix:"images/inv.gif",
          multimedia: "active"
    };

  3. Créez les éléments suivants dans la section de contenu ou dans le menu droit de la page Web :
    1. Créez un élément « div » ayant une valeur « id » unique (comme « mediacontainer ») :

      <div id="mediacontainer">
      ...
      </div>

    2. Dans l'élément « div », créez un lien vers la transcription et le format de remplacement, créez un élément « script » et créez un élément « noscript ». Le lien doit inclure une description claire de la cible du lien comme valeur de l'attribut « title », l'élément « script » doit inclure « text/javascrip » comme valeur d'attribut « type », et l'élément « noscript » doit inclure « smallFont » comme élément « noscript ».

      <div id="mediacontainer">
            <a href="/af-fr/af-fr.html" title="Transcription et formats de remplacement pour ...">
            ...
            </a>
            <script type="text/javascript">
            ...
            </script>
            <noscript class="smallFont">
            ...
            </noscript>
      </div>

    3. Dans le lien, créez un élément « img » pour l'image qui sera affichée si le lecteur ne se charge pas. L'élément « img » doit inclure un équivalent texte approprié pour la valeur de l'attribut « alt ».

      <a href="/af-fr/af-fr.html" title="Transcription et formats de remplacement pour ...">
            <img src="images/wm-ms.gif" width="83" height="20" alt="Symbole du gouvernement du Canada" />
      </a>

    4. Dans l'élément « script », créez l'appel de fonction « loadMedia », précisez la valeur des paramètres « containerId », « file », « captions », « image » et « lang » et, facultativement, la valeur des paramètres « height » et « width ». La valeur du paramètre « containerId » doit être identique à la valeur précisée pour l'attribut « id » à l'étape 3a (comme « mediacontainer »). L'objet des autres paramètres est décrit dans la section 10.3.3.1 (Flashvars configurables à l'exécution).

      <script type="text/javascript">
            //<![CDATA[
            loadMedia('mediacontainer', '<file>', '<captions>', '<image>', '<lang>'[, <height>, <width>] );
            //]]>
      </script>

    5. Dans l'élément « noscript », créez le texte qui sera affiché si le lecteur n'est pas chargé. Le texte doit être encadré par l'élément « p ».

      <noscript class="smallFont">
            <p>Afin de maximiser la fonctionnalité de cette page, prière d'activer JavaScript.</p>
      </noscript>

    6. La paragraphe ci-dessous est un exemple de code qui devrait être dans la zone de contenu ou le menu droit de la page Web :

      <div id="mediacontainer">
            <a href="/af-fr/af-fr.html" title="Transcription et format de remplacement de Annonce télévision bouchon de circulation">
                 <img src="images/wm-ms.gif" width="83" height="20" alt="Symbole du gouvernement du Canada" />
            </a>
            <script type="text/javascript">
                 //<![CDATA[
                 loadMedia('mediacontainer', 'http://<url>/af-fr.flv', 'http://<url>/af-fr-fra.xml', 'http://<url>/af-fr.png', 'fra');
                 //]]>
            </script>
            <noscript class="smallFont">
                 <p>Afin de maximiser la fonctionnalité de cette page, prière d'activer le JavaScript.</p>
            </noscript>
      </div>

10.3.3 FlashVars

Les flashvars sont des options de configuration qui peuvent être incluses dans la fonction « loadMedia » du fichier « ca.gc.mp-jm.js » afin de contrôler l'apparence et le comportement du lecteur. Les flashvars devraient seulement être configurées par le webmestre et dans le format suivant :

so.addVariable("<FlashVar>", "<valeur>");
(par exemple, so.addVariable("enablejs","true");)

10.3.3.1 Flashvars configurables à l'exécution
Nom Valeur Obligatoire Valeur par défaut Description
file <url> Oui s.o. Précise l'emplacement du fichier à lire.
captions <url> Oui s.o. Précise l'emplacement du fichier de sous-titres xml en format de texte temporisé SMIL.
image <url> Oui s.o. Identifie l'image à charger pendant que le fichier MP3 ou FLV est lu. Cette flashvar peut aussi être utilisée pour afficher un aperçu pour les autres formats. Les formats pris en charge sont JPG, SWF, PNG et GIF.
lang eng, fra Oui s.o. Précise la langue du lecteur.
height <number> Non 160 Précise la hauteur du lecteur
width <number> No 195 Précise la largeur du lecteur.
10.3.3.2 Flashvars pour l'affichage
Nom Valeur Valeur par défaut Description
showicons true, false true Contrôle si les icônes de lecture et d'activité sont visibles au milieu de la zone d'affichage du lecteur.
overstretch true, false,fit, none fit Contrôle la manière dont la taille des images et vidéos doit être adaptée à la zone d'affichage du lecteur.
  • « true » : Modifie la taille des images ou des vidéos en gardant les proportions pour remplir la zone d'affichage du lecteur.
  • « false » : Modifie la taille des images ou des vidéos en gardant les proportions pour adapter la zone d'affichage de l'écran.
  • « fit » : Modifie la taille des images ou des vidéos sans respecter les proportions pour remplir exactement la zone d'affichage du lecteur.
  • « none » : Maintient les dimensions initiales de l'image et des vidéos.
logo <url> s.o. Précise l'emplacement du fichier d'image qui doit être affiché comme filigrane dans le coin inférieur droit de la zone d'affichage du lecteur. Tous les formats d'image sont pris en charge, mais les fichiers PNG transparents sont recommandés.
showeq true, false false (true pour les fichiers MP3) Contrôle si un égalisateur est affiché ou non dans la zone d'affichage du lecteur. L'égalisateur est particulièrement adapté aux fichiers MP3.
10.3.3.3 Flashvars d'interaction
Nom Valeur Valeur par défaut Description
callback <url> s.o. Précise l'emplacement d'un script côté serveur (PHP/ASP) qui peut traiter les rappels. Le lecteur envoie un message de rappel à chaque fois qu'une lecture débute ou s'interrompt. Cette fonction peut servir à recueillir des statistiques.
enablejs true, false false Contrôle si l'interaction avec JavaScript est validée. L'interaction JavaScript permet le contrôle de la lecture, le chargement asynchrone de fichiers médias et le suivi de l'information sur les pistes au moyen de JavaScript.

Nota : L'interaction JavaScript fonctionne seulement lorsque le fonctionnement du lecteur est commandé à distance.
10.3.3.4 Flashvars de lecture
Nom Valeur Valeur par défaut Description
autostart true, false false Contrôle si le lecteur démarre automatiquement au chargement de la page.
volume <nombre> 80 Contrôle le volume de lecture des fichiers médias.
bufferlength <nombre> 5 Contrôle le nombre de secondes d'un fichier FLV qui doivent être mises en tampon avant le début de sa lecture. On utilisera des valeurs plus petites pour les connexions haute vitesse et les vidéos de courte durée, alors qu'une connexion plus lente exigera de plus grandes valeurs.

10.4 Diaporama avec lien d'initiative

Le diaporama de liens d'initiative a été introduit dans la version 1.04 du modèle NSI du GC afin de fournir une amélioration visuelle conçue afin de préserver l'espace disponible en permettant que de multiples images représentant des liens d'initiatives puissent partager le même emplacement sur une page. Le diaporama combine une présentation élégante avec des contrôles accessibles, ce qui produit un résultat final plaisant et entièrement accessible.

Le comportement par défaut du diaporama consiste à faire afficher en rotation les images désignant les liens à une cadence prédéfinie. Le diaporama comporte des contrôles qui permettent au client de démarrer et d'arrêter la rotation ou de faire alterner manuellement les liens d'initiative. Le diaporama permet aussi de contrôler la manière dont des images de lien spécifiques sont affichées comparativement aux autres images de liens d'initiative.

10.4.1 Comment valider le diaporama de liens d'initiative

Les étapes suivantes permettent de valider le diaporama de liens d'initiative :

  1. Utilisez la version 1.04 ou une version ultérieure du modèle NSI du GC.
  2. Utilisez des images de lien d'initiative dont la taille est de 195 pixels de largeur et 70 pixels de hauteur.
  3. Incluez les paramètres « slideshow », « slideshowspeed » et « slideshowlib » avec les valeurs appropriées entre parenthèses dans la déclaration de la variable JavaScript params » dans la section d'amélioration progressive de la page Web. La valeur de « slideshow » doit être « slideshow », La valeur de « slideshowspeed » doit être le nombre de secondes pendant lesquelles une image de lien d'initiative doit être affichée et la valeur de « slideshowlib » doit être le chemin du répertoire qui contient les images du diaporama.

    var params = {
          lng:"fra",
          pngfix:"images/inv.gif",
          slideshow: "slideshow",
          slideshowspeed: "8",
          slideshowlib: "images/sshw-mdiap"
    };

  4. Créez le menu droit suivant pour la page Web :
    1. Créez un élément « ul » ayant « nav » comme valeur de l'attribut « class » et « slideshow » comme valeur de l'attribut « id » :

      <li>
            <h2 class="nav">En vedette</h2>
            <ul class="nav" id="slideshow">
            ...,br />       </ul>
      </li>

    2. Dans l'élément « ul », créez un élément « li » ayant « menucontent » comme valeur d'attribut de classe pour chacun des liens d'initiative. Voir la section 10.4.3 (Comment faire afficher des images de lien d'initiatives plus fréquemment) pour obtenir des instructions sur la manière d'utiliser l'attribut « class » pour contrôler la fréquence d'images de liens d'initiative spécifiques.

      <ul class="nav" id="slideshow">
            <li class="menucontent">
            ...
            </li>
            <li class="menucontent">
            ...
            </li>
      </ul>

    3. Dans chaque élément « li », créez deux liens séparés par un élément « br ». Les deux liens doivent cibler le même emplacement et ils doivent contenir des valeurs d'attribut « title » qui sont des équivalents textuels appropriés de l'image de lien d'initiative.

      Le premier lien doit contenir un élément « img » ayant le chemin de l'image de lien d'initiative comme valeur de l'attribut « src » et une valeur d'attribut « alt » correspondant à la valeur de l'attribut « title » du lien. Le deuxième lien doit contenir « menulink » comme valeur d'attribut « class ».

      <li class="menucontent">
            <a title="Vivez l'expérience de la Marine – Recrutement des Forces canadiennes" href="/navy-marine/"><img src="images/navy-marine-fra.jpg" alt="Vivez l'expérience de la Marine – Recrutement des Forces canadiennes" width="195" height="70" /></a>
            <br />
            <a class="menulink" title="Vivez l'expérience de la Marine – Recrutement des Forces canadiennes" href="/navy-marine/">Recrutement des Forces canadiennes</a>
      </li>

    4. Ce qui suit est un exemple du code qui devrait figurer dans le menu droit de la page Web :

      <ul class="nav" id="slideshow">
            <li class="menucontent">
                 <a title="Vivez l'expérience de la Marine – Recrutement des Forces canadiennes" href="/navy-marine/"><img src="images/navy-marine-fra.jpg" alt="Vivez l'expérience de la Marine – Recrutement des Forces canadiennes" width="195" height="70" /></a>
                 <br />
                 <a class="menulink" title="Vivez l'expérience de la Marine – Recrutement des Forces canadiennes" href="/navy-marine/">Recrutement des Forces canadiennes</a>
            </li>
            <li class="menucontent">
                 <a title="Budget 2007" href="/budget07/menu-fra.html"><img src="images/budget07-fra.jpg" alt="Budget 2007" width="195" height="70" /></a>
                 <br />
                 <a class="menulink" title="Budget 2007" href="/budget07/menu-fra.html ">Budget 2007</a>
            </li>
      </ul>

10.4.2 Comment modifier la vitesse du diaporama

La vitesse du diaporama est contrôlée au moyen du paramètre « slideshowspeed » dans la déclaration de la variable JavaScript « params » dans la section d'amélioration progressive de la page Web. La valeur de « slideshowspeed » représente le nombre de secondes pendant lesquelles une image de lien d'initiative doit être affichée. En d'autres termes, la vitesse du diaporama est inversément proportionnelle à la valeur de ce nombre.

var params = {
      lng:"fra",
      pngfix:"images/inv.gif",
      slideshow: "slideshow",
      slideshowspeed: "8",
      slideshowlib: "images/sshw-mdiap",
};

10.4.3 Comment faire afficher des images de lien d'initiatives plus fréquemment

La fréquence d'affichage d'une image de lien d'initiatives spécifique peut être contrôlée au moyen de l'attribut « class » de l'élément « li » connexe. Pour augmenter la fréquence d'affichage d'une image de lien d'initiative spécifique, ajoutez une espace à la valeur de l'attribut « class », suivie d'un des mots clés suivants :

Mot clé Effect sur l'image Exemple
ss-double Elle est affichée deux fois plus souvent dans le diaporama. <li class="menucontent ss-double">
ss-triple Elle est affichée trois fois plus souvent dans le diaporama. <li class="menucontent ss-triple">

11.0 Soutien de technologies adaptées

Les modèles de la NSI du GC ont été soumis à des essais à l'aide de logiciels de grossissement d'écran, de lecture d'écran et de reconnaissance vocale, de navigateurs textuels, d'émulateurs à petit écran et de configurations client personnalisées.

11.1 Systèmes de grossissement d'écran

Les logiciels de grossissement d'écran permettent au client d'agrandir soit l'écran complet, soit une partie de l'écran. Ils offrent également d'autres fonctions comme l'inversion des couleurs, le lissage de la police et l'enrichissement du pointeur.

Les modèles ont été mis à l'essai avec succès au moyen des logiciels de grossissement d'écran suivants :

  • IBM Home Page Reader 3.04
  • MAGic 6.2, 8.02, 9.5
  • PWWebSpeak 3.0r4
  • Lunar Screen Magnifier 6.0, 6.5, 7.0, 8.0
  • Supernova Reader Magnifier 6.0, 6.5, 7.0, 8.0
  • System Access (auparavant FreedomBox) 2.0, 2.2
  • Web LV 3.03
  • ZoomText7.11, 8.1, 9.0

11.2 Systèmes de lecture d'écran

Les systèmes de lecture d'écran servent à faire la lecture de l'information affichée par une voix synthétisée ou à la présenter sur un support affichant un texte renouvelable en braille. Les logiciels de lecture d'écran peuvent traduire tant le texte affiché à l'écran que les touches du clavier.

Les modèles ont été mis à l'essai avec succès au moyen des systèmes de lecture d'écran suivants :

  • Hal Screen Reader 6.0, 6.5, 7.0, 8.0
  • IBM Home Page Reader 3.04
  • JAWS for Windows 4.0, 4.51, 5.10, 6.0, 6.2, 7.0, 7.1, 8.0
  • PWWebSpeak 3.0r4
  • Supernova Reader Magnifier 6.0, 6.5, 7.0, 8.0
  • System Access (auparavant FreedomBox) 2.0, 2.2
  • Web LV 3.03
  • Window-Eyes 4.0, 5.0, 5.5

11.3 Logiciels de reconnaissance vocale

Les logiciels de reconnaissance vocale permettent au client d'effectuer des tâches en utilisant sa voix pour émuler les commandes données par ailleurs par le clavier ou la souris.

Les modèles ont été mis à l'essai avec succès au moyen des logiciels de reconnaissance vocale suivants :

  • Dragon Naturally Speaking Pro 7.1, 8.0, 9.0
  • FreedomBox 2.0, 2.2

11.4 Navigateurs textuels

Les clients ayant une déficience visuelle se servent souvent de navigateurs textuels pour afficher des pages Web. Les navigateurs textuels fonctionnent à la manière des logiciels de lecture d'écran en reproduisant le contenu en mode linéaire.

Les modèles ont été mis à l'essai avec succès au moyen des navigateurs textuels suivants :

  • Lynx 2.8.4
  • MacLynx b1

11.5 Émulateurs à petit écran

Les émulateurs à petit écran servent à simuler l'affichage de pages Web sur des dispositifs à écran de petite taille, par exemple les téléphones cellulaires, les assistants numériques personnels et d'autres appareils portatifs.

Les modèles ont été mis à l'essai avec succès au moyen des émulateurs à petit écran suivants :

  • Deckit-1.2.4 (téléphone cellulaire émulateur)
  • Opera Small Screen rendering (appareil à main émulateur)

11.6 Configurations personnalisées

Les clients peuvent améliorer l'accessibilité aux pages Web en modifiant les paramètres visuels de leurs navigateurs et systèmes d'exploitation. Les configurations personnalisées des clients peuvent être conjuguées aux technologies adaptées afin d'accroître davantage l'accessibilité aux pages Web.

11.6.1 Configurations personnalisées d'Internet Explorer 6.x

Les configurations personnalisées mentionnées dans la présente section ont été utilisées une fois sélectionnées les trois cases à cocher d'accessibilité d'Internet Explorer. Taille de police

11.6.1.1 Affichage dans Windows

La personnalisation de l'ensemble de couleurs et de la taille de police par défaut d'un système d'exploitation peut améliorer l'accessibilité tant au système d'exploitation qu'aux applications logicielles.

Le modèle a été mis à l'essai avec succès au moyen des agencements de couleurs et des tailles de police suivants du système d'exploitation Windows :

Agencement de couleurs  
Faible contraste faible luminosité Normale
Faible contraste luminosité moyenne Normale
Noir à contraste élevé Normale
Noir à contraste élevé Grande
Noir à contraste élevé Très grande
Blanc à contraste élevé Normale
Blanc à contraste élevé Grande
Blanc à contraste élevé Très grande
Bleu à contraste élevé Normale
Bureau lisible standard en police APHont Normale
Bureau lisible à contraste élevé en police APHont Normale
11.6.1.2 Formatage au moyen d'une feuille de style personnalisée

De nombreux navigateurs offrent au client la possibilité de formater les pages Web au moyen de feuilles de style personnalisées. Grâce à ces dernières, le client peut définir la présentation visuelle des pages, notamment en améliorer l'accessibilité en modifiant les couleurs, la taille de la police et d'autres propriétés visuelles.

Les modèles ont été mis à l'essai avec succès au moyen des feuilles de style personnalisées suivantes :

  • V1.0 Ultra Small White
  • V1.0 Object Highlighting Standard
  • V1.0 Object Highlighting Black
  • V1.0 High Contrast Black Normal
  • V1.0 High Contrast Black Large
  • V1.0 High Contrast Black X-Large
  • V1.0 High Contrast Black 3X-Large
  • V1.0 High Contrast White Normal
  • V1.0 High Contrast White Large
  • V1.0 High Contrast White X-Large
  • V1.0 High Contrast White 3X-Large
  • V1.0 High Contrast Blue

11.6.2 Configurations client personnalisées de Mozilla Firefox 1.5

Les modèles ont été mis à l'essai avec succès au moyen des configurations client personnalisées suivantes de Mozilla Firefox 1.5 :

  • Taille de police minimale : 1 point, 16 points, 18 points, 24 points
  • Fonction « Allow pages to choose their own colors  »: non sélectionnée
  • Agencement noir à contraste élevé

11.6.3 Fonctions exclues

Afin d'assurer la lisibilité et la rétrocompatibilité, les modèles ont été mis à l'essai par l'exclusion d'une ou de plusieurs fonctions standard de navigateur.

Les modèles ont été mis à l'essai avec succès par l'exclusion de l'une des fonctions suivantes ou de plusieurs d'entre elles à la fois :

  • Images
  • Tableaux
  • Clignotement
  • Cadres
  • Policeont
  • Corps (tels que la couleur d'arrière‑plan et le lien)
  • Centre
  • Applet (Java)
  • Script (JavaScript)
  • Feuilles de style (CSS)
  • Bannière

11.6.4 Claviers et dispositifs de saisie de substitution

Tous les clients ne peuvent effectuer la saisie au moyen de claviers et de souris classiques. Certains ne peuvent utiliser qu'un clavier, faute de souris, ou à cause d'une déficience. D'autres peuvent avoir besoin de dispositifs de saisie de substitution du fait qu'ils sont incapables d'utiliser un clavier.

La navigation sans restriction dans les modèles a été mis à l'essai avec succès au moyen des claviers et dispositifs de saisie de substitution suivants :

  • Version 1.x de Point & Click, version 2 de Screen Doors et Internet Explorer 6.x
  • MouseTool et version 1.0 de High Target Area (CSS)
  • Clavier standard AT à 101 touches et Internet Explorer 5.x
  • Clavier standard AT à 101 touches, Mozilla Firefox 1.5 et Accessibility Extension

Haut de la page

12.0 Prise en charge par des ensembles navigateur‑plateforme

Les modèles ont été soumis à de nombreux essais sur un large éventail d'ensembles navigateur‑plateforme afin d'assurer leur prise en charge générale par les navigateurs.

12.1 Sommaire

  • Les modèles ont été mis à l'essai avec succès dans 108 ensembles navigateur‑plateforme sans problème perceptible.
  • Les modèles ont été mis à l'essai avec succès dans 6 ensembles navigateur‑plateforme et seuls des problèmes mineurs se sont manifestés.
  • La disposition et la conception des modèles n'étaient pas conformes aux exigences de la NSI lors d'essais effectués sur 25 ensembles navigateur‑plateforme, mais le contenu de la page est demeuré lisible et accessible.
  • Les modèles ont été mis à l'essai avec succès dans les plateformes suivantes :
    • Windows (Win32)
    • Mac OS X (10.x+)
    • Mac PPC (8.x - 9.x)
  • Les modèles ont été mis à l'essai avec succès dans les navigateurs des marques suivantes :
    • Amaya
    • AOL Explorer
    • Avant
    • Beonex
    • Camino
    • Chimera
    • Crazy Browser
    • DocZilla
    • Firebird
    • Firefox
    • Internet Explorer
    • K-Meleon
    • ManyOne
    • Mozilla
    • MyIE2
    • Netscape
    • OmniWeb
    • Opera
    • Safari
    • SeaMonkey
    • SlimBrowser

12.2 Prise en charge par les navigateurs Windows

Les modèles ont été soumis à de nombreux essais sur des navigateurs axés sur Windows 2000 Service Pack 4 et Windows XP Pro Service Pack 2.

12.2.1 Essais sur des navigateurs sans problème d'affichage perceptible

Les modèles ont été mis à l'essai avec succès dans les versions suivantes de navigateurs Windows (55 au total) sans problème perceptible :

  • AOL Explorer 1.5
  • Avant Browser 9.02
  • Beonex 0.6.4, 0.8.1
  • Crazy Browser 1.05
  • DocZilla 1.0
  • Firebird 0.6.1, 0.7.1
  • Firefox 0.8, 0.9.1, 1.0, 1.0.8, 1.5.0.4, 2.0
  • Internet Explorer 5.0, 5.5, 6.02, 7.0
  • K-Meleon 0.7, 0.8.2, 0.9.13
  • ManyOne Beta
  • Mozilla 0.8, 0.9.2, 0.9.4, 1.0.1, 1.1, 1.2.1, 1.4, 1.5, 1.6, 1.7.3, 1.7.13
  • MyIE2 0.9.27.68
  • Netscape 6.2.3, 7.0, 7.1, 7.2, 8.1, 9.0
  • Opera 4.02, 5.12, 6.04, 7.02, 7.1, 7.23, 7.51, 7.54, 8.54, 9.0, 9.2
  • Safari 3.0
  • SeaMonkey 1.1.2, 1.1.4
  • SlimBrowser V3.99

12.2.2 Essais sur des navigateurs avec problèmes d'affichage mineurs

Les modèles ont été mis à l'essai avec succès dans les versions suivantes de navigateurs Windows (2 au total) et seuls des problèmes mineurs ont été relevés :

  • Amaya 9.1
  • Mozilla M16

12.2.3 Essais sur des navigateurs avec problèmes d'affichage majeurs et page demeurée lisible

La disposition et la conception des modèles n'étaient pas conformes aux exigences de la NSI lors d'essais sur les versions suivantes de navigateurs Windows (9 au total), mais le contenu de la page est demeuré lisible et accessible :

  • Amaya 7.2a, 8.2
  • Netscape 3.04, 4.08, 4.51, 4.61, 4.72
  • WebTV Viewer 2.6
  • xSmiles 0.91

12.3 Prise en charge par des navigateurs axés sur Mac OS X

Les modèles ont été soumis à de nombreux essais sur des navigateurs axés sur Mac OS X 10.2.5.

12.3.1 Essais sur des navigateurs sans problème d'affichage perceptible

Les modèles ont été mis à l'essai avec succès dans les versions suivantes de navigateurs axés sur Mac OS X (43 au total) sans problème perceptible :

  • Beonex 0.8.1
  • Camino 0.7, 0.8, 1.0.2, 1.5
  • Chimera 0.6
  • Firebird 0.6.1, 0.7.1
  • Firefox 0.8, 0.9.1, 1.0.8, 1.5.0.4, 2.0
  • Internet Explorer 5.5
  • Mozilla 0.9.2, 1.0.2, 1.1, 1.2.1, 1.3, 1.4, 1.5.1, 1.6, 1.7, 1.7.13
  • Netscape 6.2.3, 7.02, 7.10, 8.1, 9.0
  • OmniWeb 4.5, 5.0b8, 5.1.3, 5.5.4
  • Opera 5.0, 6.0, 7.5.1, 8.54, 9.0, 9.2
  • Safari 1.0 (v85), 3.0
  • SeaMonkey 1.1.2, 1.1.4

12.3.2 Essais sur des navigateurs avec problèmes d'affichage mineurs

Les modèles ont été mis à l'essai avec succès dans les versions suivantes de navigateurs axés sur Mac OS X (2 au total) et seuls des problèmes mineurs ont été relevés :

  • Internet Explorer 5.1.3, 5.2.2

12.3.3 Essais sur des navigateurs avec problèmes d'affichage majeurs et page demeurée lisible

La disposition et la conception des modèles n'étaient pas conformes aux exigences de la NSI lorsque les modèles ont été mis à l'essai dans les versions suivantes de navigateurs axés sur Mac OS X (3 au total), mais le contenu de la page est demeuré lisible et accessible :

  • Netscape 4.77, 4.8
  • xSmiles 0.9.1

12.4 Prise en charge par des navigateurs Mac PPC

Les modèles ont été soumis à de nombreux essais sur des navigateurs axés sur Macintosh OS 9.1.

12.4.1 Essais sur des navigateurs sans problème d'affichage perceptible

Les modèles ont été mis à l'essai avec succès dans les versions suivantes de navigateurs Mac PPC (10 au total) sans problème perceptible :

  • Internet Explorer 5.5
  • Mozilla 0.8, 0.9.2, 1.0.2, 1.1, 1.2.1
  • Netscape 6.2.3, 7.02
  • Opera 5.0, 6.0

12.4.2 Essais sur des navigateurs avec problèmes d'affichage mineurs

Les modèles ont été mis à l'essai avec succès dans les versions suivantes de navigateurs Mac PPC (2 au total) et seuls des problèmes mineurs ont été relevés :

  • Internet Explorer 5.0, 5.1.6

12.4.3 Essais sur des navigateurs avec problèmes d'affichage majeurs et page demeurée lisible

La disposition et la conception des modèles n'étaient pas conformes aux exigences de la NSI lorsque les modèles ont été mis à l'essai dans les versions suivantes de navigateurs Mac PPC (10 au total), mais le contenu de la page est demeuré lisible et accessible :

  • Internet Explorer 2.1, 3.01
  • Netscape 3.04, 4.04, 4.08, 4.51, 4.61, 4.7, 4.75, 4.8

Haut de la page

13.0 Problèmes connus

13.1 Restrictions à la largeur des objets de la zone de contenu dans Internet Explorer

Les propriétés tels bordures, marges et remplissage ont tendance à influencer la largeur des objets de façon différente dans Internet Explorer en comparaison de la plupart des autres navigateurs. Internet Explorer inclut un plus grand nombre des propriétés précitées dans le calcul de la largeur que ne le font les autres navigateurs, ce qui résulte en une largeur accrue des objets. Ainsi, un objet dont la largeur définie est de 300 pixels peut avoir une largeur réelle de 305 pixels dans Internet Explorer. La même chose se produit si la largeur est de 100 %, car Internet Explorer la portera à 102 %.

Si le problème de largeur décrit ci-dessus est conjugué à la façon singulière dont Internet Explorer traite le débordement de contenu par rapport aux autres navigateurs, il en résulte un problème d'affichage mineur des modèles. Si la largeur de la zone de contenu est inférieure à la largeur réelle d'un objet dans le modèle à deux colonnes ou à trois colonnes, l'objet et l'ensemble du contenu qui le suit seront poussés vers l'extrémité verticale du menu latéral.

Il ne s'agit pas d'un problème sérieux, simplement d'une difficulté d'affichage dans Internet Explorer. Il n'existe aucun correctif connu du problème mis à part l'utilisation du modèle à colonne simple ou la consigne d'éviter les objets dont la largeur réelle est supérieure à celle de la zone de contenu.

Le problème ne se pose pas par rapport aux tableaux dont la largeur définie est de 100 %, pourvu que les valeurs de remplissage et de marges ne soient pas modifiées et que la largeur physique du texte n'empêche pas son insertion dans la zone de contenu.

Nota : Le modèle à colonne simple doit être utilisé seulement si la largeur du contenu peut s'insérer dans le modèle à deux colonnes et non parce que la largeur définie d'un objet est excessive. Seuls des tableaux et des images de grande largeur devraient ne pas pouvoir être intégrés dans la zone de contenu.

Pour éviter que la largeur réelle d'un objet dépasse celle de la zone de contenu, respectez les limites suivantes des zones de contenu des modèles à deux et à trois colonnes lorsque vous fixez la largeur des objets :

Restrictions à la largeur des objets de la zone de contenu dans Internet Explorer
Modèle Largeur maximale de l'objet en pourcentage (%) Largeur maximale de l'objet en pixels
Deux colonnes (2col*.html ) 98,5 % (valeur de la classe de feuilles de style CSS « widthFull ») 593 pixels
Trois colonnes (3col*.html ) 98,5% (valeur de la classe de feuilles de style CSS « widthFull ») 388 pixels

Nota : Les restrictions susmentionnées à la largeur s'appliquent à un objet pour lequel aucune valeur de remplissage ou de marges n'a été définie et dont la largeur de la bordure ne dépasse pas 1 pixel. Toute augmentation des valeurs du remplissage, des marges ou des bordures est susceptible de limiter davantage la largeur de l'objet.

Il est recommandé de n'utiliser que des valeurs relatives (en pourcentage) des objets pour en assurer la compatibilité avec la zone de contenu si cette dernière devient extensible à l'avenir.

13.2 Alignement des éléments du pied de page dans Internet Explorer 5.x pour Mac

Contrairement à tous les autres navigateurs, Internet Explorer 5.x pour Mac n'aligne pas correctement les éléments « Date de modification », « Haut de la page » et « Avis importants » du pied de page. Ces éléments sont trop larges pour s'insérer sur la même ligne, et il en résulte leur énumération verticale.

13.3 Liens « Haut de la page » dans Internet Explorer 5.x pour Mac

Au contraire des autres navigateurs, Internet Explorer 5.x pour Mac comporte un lien « Haut de la page » dans la zone de contenu qui est trop large pour envelopper un texte par la droite, si bien qu'il occupe une ligne au complet et pousse tout texte qui suit à la ligne suivante. Normalement, le lien « Haut de la page » de la zone de contenu enveloppe par la droite tout texte qui suit.

13.4 Liens « Haut de la page » dans Opera 4.x, 5.x et 6.x (modèle à trois colonnes seulement)

Contrairement à ce qui se passe avec d'autres navigateurs, lorsque le lien « Haut de la page » de la zone de contenu accompagne le modèle à trois colonnes dans Opera 4.x, 5.x et 6.x, la marge et le remplissage droits du lien s'étendent jusqu'à l'extrémité verticale du menu de droite. Par conséquent, le lien se situe immédiatement à gauche du menu de droite et dépasse la bordure de la zone de contenu. La marge et le remplissage du lien redeviennent normaux une fois passée l'extrémité verticale du menu de droite.

13.5 Problèmes d'affichage de la barre de menu commune dans Amaya 9.1 et Mozilla M16 pour Windows

Au contraire des autres navigateurs, Amaya 9.1 et Mozilla M16 pour Windows n'affichent pas la barre de menu commune conformément à la spécification. La hauteur de la barre est dépassée de plusieurs pixels dans Amaya 9.1, tandis que de nombreux problèmes d'affichage se produisent dans Mozilla M16 pour Windows.
 

13.6 Remplissage excessif sous les liens de langue de la page d'accueil dans Opera 8.54

Le remplissage sous les liens de langue de la page d'accueil dans Opera 8.54 dépasse d'environ 20 pixels la norme de la NSI. Le problème est causé par une erreur de calcul de la hauteur des éléments enveloppés dans Opera 8.54.

13.7 Alignement du texte des liens de langue de la page d'accueil dans Internet Explorer 5.x pour Mac

Le texte des liens de langue de la page d'accueil n'est pas bien aligné dans Internet Explorer 5.x pour Mac. Il est centré plutôt que d'être situé à gauche. Le problème est causé par une erreur de calcul de l'alignement d'objets enveloppés dans Internet Explorer 5.x pour Mac.

13.8 Questions liées à la mise à l'échelle pour les éléments se servant des unités « em » de Netscape 6.3

Contrairement aux autres navigateurs, la mise à l'échelle des éléments non textuels dont les dimensions sont précisées à l'aide d'unités « em » ne se fait pas dans le cas du texte dans Netscape 6.x. Ceci empêche la mise à l'échelle des éléments de modèles non textuels comme dans le cas des feuilles stylisées, la barre de menus communs, la zone du fil d'Ariane, la flèche « haut de page », la bannière et le menu latéral. Il peut en résulter que le texte dépasse les dimensions du conteneur et qu'il empiète sur d'autres éléments dans le cas d'un texte d'une plus grande taille.

13.9 Questions liées à la taille de la police avec des listes imbriquées de Opera 6.x pour Windows

Contrairement aux autres navigateurs, la transmission des tailles de la police des listes imbriquées n'est pas bien prise en charge dans Opera 6.x pour Windows. Cette question de transmission réduit considérablement la taille du texte pour chacun des niveaux des listes imbriquées, où le texte devient éventuellement illisible.

13.10 Les liens de saut de navitation pourraient nuire à l'affichage d'autres éléments d'en-tête dans Internet Explorer

Contrairement aux autres navigateurs, en raison d'une question de prise en charge de « z-index », les liens de saut de navigation pourraient nuire à l'affichage d'autres éléments d'en-tête dans Internet Explorer lorsque JavaScript est désactivé. Pour éviter ce problème, il faut modifier la largeur et la position de départ du conteneur de liens « saut de navigation » afin de veiller à ce que le conteneur ne chevauche pas d'autres éléments d'en-tête. Les directives à cet effet se trouvent dans la section 6.3.2.17 (Changement de la largeur et de la position de départ du conteneur de liens « saut de navigation »).

14.0 Historique des versions du modèle

Version 1.04 – 2007-10-24

Sommaire des modifications

  • On a intégré version 1.1 du lecteur multimédia de Service Canada
  • On a intégré une approche d'amélioration progressive fondée sur JavaScript pour l'affichage des valeurs de « title » pour les liens ciblés par le clavier
  • On a intégré une approche d'amélioration progressive fondée sur JavaScript pour l'affichage d'un diaporama de liens d'initiative
  • On a réglé l'alignement des liens de saut de navigation dans Internet Explorer 6.x
  • On a réglé un problème d'affichage dans Internet Explorer 5.5, 6.x et 7.x qui faisait en sorte que les liens de saut de navigation pourraient nuire à l'affichage d'autres éléments d'en-tête (JavaScript doit être activé et supporté)
  • On a réglé un problème d'impression pour les pages multilingues et les pages de message de serveur
  • On a réglé un problème d'impression dans Internet Explorer 5.x et 6.x qui faisait en sorte que le pied de page était inclus au hasard dans plusieurs pages imprimées
  • On a réglé un problème d'impression avec le mot-symbole « Canada » en tentant d'imprimer le page de message de serveur en format horizontal
  • On a amélioré le soutien pour les menus latéraux pour permettre les éléments « div » et « p » d'avoir l'air des éléments « h2 »
  • On a augmenté la taille de police pour la class « headline »
  • On a ajouté une marge gauche à la classe « image-right » qui est équivalent à la taille de la marge droite de la classe « image-left »
  • On a ajouté la classe d'utilitaire « wrap » pour permettre de flotter de contenu dans Internet Explorer à la droite de l'élément « h1 » de la zone de contenu

Fichiers mis à jour

  • base.css
  • base2.css
  • base-institution.css
  • pf-if.css
  • ctoam\css\base-institution.css
  • *.html
  • scripts\pe-ap.js
  • scripts\ca.gc.mp-jm.js (nouveau)
  • scripts\ca.gc.sshw-mdiap.js (nouveau)
  • scripts\mp-jm.swf (nouveau)
  • images\wmms.png (nouveau)
  • images\sshw-mdiap\deco.gif (nouveau)
  • images\sshw-mdiap\next-suiv.gif (nouveau)
  • images\sshw-mdiap\pause.gif (nouveau)
  • images\sshw-mdiap\play-jouer.gif (nouveau)
  • images\sshw-mdiap\prev-prec.gif (nouveau)

Comment mettre à jour les pages Web utilisant la version 1.03 du modèle

  1. Remplacez le fichier base.css par la version à jour du fichier
  2. Remplacez le fichier base2.css par la version à jour du fichier
  3. Transférez les changements antérieurs apportés au fichier base-institution.css dans la version à jour du fichier
  4. Remplacez le fichier base-institution.css par la version à jour du fichier
  5. Remplacez le fichier pf-if.css par la version à jour du fichier
  6. Remplacez le fichier pe-ap.js par la version à jour du fichier
  7. Ajoutez ca.gc.mp-jm.js à votre répertoire de scripts
  8. Ajoutez ca.gc.sshw-mdiap.js à votre répertoire de scripts
  9. Ajoutez mp-jm.swf à votre répertoire de «swf »
  10. Ajoutez wmms.png à votre répertoire d'images
  11. Ajoutez sshw-mdiap\deco.gif à votre répertoire d'images
  12. Ajoutez sshw-mdiap\next-suiv.gif à votre répertoire d'images
  13. Ajoutez sshw-mdiap\pause.gif à votre répertoire d'images
  14. Ajoutez sshw-mdiap\play-jouer.gif à votre répertoire d'images
  15. Ajoutez sshw-mdiap\prev-prec.gif à votre répertoire d'images
  16. Faites les recherches et les remplacements globaux suivants (sans les guillemets) pour tous les fichiers HTML qui utilisent le modèle :
    1. Remplacez « VERSION 1.03 » par « VERSION 1.04 »

Détail des modifications

  • On a remplacé la classe « h2.nav » par « h2.nav, div.left div.h2nav, div.left p.h2nav » dans les fichiers base.css et base2.css
  • On a remplacé la classe « div.wrapContainer » par « div.center div.wrapContainer » dans le fichier base.css
  • On a remplacé la classe « .fontSize100, .topPage, h1.headline, h2.headline, h3.headline, h4.headline, h5.headline, h6.headline » par « .fontSize100, .topPage » dans les fichiers base.css et base2.css
  • On a remplacé la classe « h6, .h6Size, .fontSize110 » par « h6, .h6Size, .fontSize110, h1.headline, h2.headline, h3.headline, h4.headline, h5.headline, h6.headline » dans les fichiers base.css et base2.css
  • On a remplacé la classe « div.right li ul.nav » par « div.right li ul.nav, div.right li p.nav, div.right li div.nav » dans les fichiers base-institution.css et ctoam\css\base-institution.css
  • On a remplacé la classe « h2.nav, h2.nav a:link, h2.nav a:visited » par « div.left h2.nav, div.left h2.nav a:link, div.left h2.nav a:visited, div.left div.h2nav, div.left div.h2nav a:link, div.left div.h2nav a:visited, div.left p.h2nav, div.left p.h2nav a:link, div.left p.h2nav a:visited, div.right h2.nav, div.right h2.nav a:link, div.right h2.nav a:visited, div.right div.h2nav, div.right div.h2nav a:link, div.right div.h2nav a:visited, div.right p.h2nav, div.right p.h2nav a:link, div.right p.h2nav a:visited » dans les fichiers base-institution.css et ctoam\css\base-institution.css
  • On a remplacé la classe « h2.nav a:hover » par « div.left h2.nav a:hover, div.left h2.nav a:active, div.left h2.nav a:focus, div.left div.h2nav a:hover, div.left div.h2nav a:active, div.left div.h2nav a:focus, div.left p.h2nav a:hover, div.left p.h2nav a:active, div.left p.h2nav a:focus, div.right h2.nav a:hover, div.right h2.nav a:active, div.right h2.nav a:focus, div.right div.h2nav a:hover, div.right div.h2nav a:active, div.right div.h2nav a:focus, div.right p.h2nav a:hover, div.right p.h2nav a:active, div.right p.h2nav a:focus » dans les fichiers base-institution.css et ctoam\css\base-institution.css
  • On a remplacé la classe « div.fip » par « div.fip, div.cwm » dans le fichier pf-if.css
  • On a remplacé la classe « div.banner, div.banner-eng, div.banner-fra, div.banner-lfcoa-eng, div.banner-lfcoa-fra, div.fp, div.left, div.right, div.footer div.foot2 a, div.footer div.foot3 a, div.footer div.footerline, div.navaid, div.topPage, p.topPage » par « div.banner, div.banner-eng, div.banner-fra, div.banner-lfcoa-eng, div.banner-lfcoa-fra, div.fp, div.fpml, div.left, div.right, div.footer div.foot1 a, div.footer div.foot2 a, div.footer div.foot3 a, div.footer div.footerline, div.navaid, div.topPage, p.topPage » dans le fichier pf-if.css
  • On a remplacé la propriété « width: 100%;; » par « width: 100%; » de la classe « * html div.center h1 » du fichier base.css
  • On a remplacé « VERSION 1.03 » par « VERSION 1.04 » dans les fichiers *.*
  • On a éliminé la classe « * html div.page div.core div.navaid a » du fichier base.css
  • On a éliminé la classe « *:first-child+html div.page div.core div.navaid a » du fichier base.css
  • On a ajouté la classe « * html div.center h1.wrap » ainsi que la propriété « width: auto; » au fichier base.css
  • On a ajouté la classe « div.tooltip » ainsi que les propriétés « border: 1px solid InfoText; », « background: InfoBackground; », « color: InfoText; », « font: message-box; », « padding: 2px 4px; », « text-align: left; », « position: absolute; », « width: auto; » et « height: auto; » au fichier base.css
  • On a ajouté la classe « div.safetooltip » ainsi que les propriétés « z-index: 21000; », « border: 1px solid #000; », « background-color: #fffeee; », « color: #000; », « font: 0.85em Verdana, Geneva, Arial, Helvetica, sans-serif; », « padding: 2px 4px; », « text-align: left; », « position: absolute; », « width: auto; » et « height: auto; » au fichier base.css
  • On a ajouté la propriété « margin-left: 10px; » à la classe « .image-right » dans le fichier base.css
  • On a ajouté la propriété « float: none; » à la classe « div.center, * html div.center » dans le fichier pf-if.css

Version 1.03 - 2007-06-12

Sommaire des modifications

  • On a amélioré les liens « saut de navigation » en les activant pour qu'ils deviennent visibles lorsque le pointeur de la souris les survole ou lorsqu'ils sont choisis au moyen d'un clavier ou d'autre périphérique d'entrée.
  • On a amélioré l'apparence de la feuille stylisée dans la bannière.
  • On a accru le soutien pour les boîtes dans le menu de droite qui ne contiennent pas de listes
  • On a accru le soutien pour les en-têtes de la zone de contenu
  • On a réglé un problème d'impression dans Internet Explorer 6.x qui faisait qu'une page blanche supplémentaire était imprimée sans raison valable
  • On a réglé un problème d'affichage dans Netscape 7.x qui faisait disparaître les liens de la barre de menus commune lorsqu'on augmentait suffisamment la taille du texte pour faire boucler la barre de menus commune.
  • On a réglé un problème d'affichage dans Netscape 6.x qui faisait en sorte que les lignes blanches verticales séparant les liens de la barre de menus commune n'étaient pas de la même hauteur que les liens
  • On a corrigé un problème d'affichage du lien de la divulgation proactive dans l'exemple des armoiries
  • On a corrigé une erreur typographique dans le champ de métadonnées dcterms.modified.
  • On a accru le soutien pour le bouclage autour des images et des tableaux
  • On a ajouté une barre verticale entre les liens « saut de navigation » qui manquait dans les modèles de page de contenu à deux colonnes.

Fichiers mis à jour

  • base.css
  • base2.css
  • base-institution.css
  • pf-if.css
  • ctoam\css\base-institution.css
  • *.html
  • lffl.gif
  • lffl.png (nouveau)
  • inv.gif (nouveau)
  • scripts\pe-ap.js (nouveau)

Comment mettre à jour les pages Web utilisant la version 1.02 du modèle

  • Remplacez le fichier lffl.gif par la version à jour du fichier
  • Remplacez le fichier base.css par la version à jour du fichier
  • Remplacez le fichier base2.css par la version à jour du fichier
  • Transférez les changements antérieurs apportés au fichier base-institution.css dans la version à jour du fichier
  • Remplacez le fichier base-institution.css par la version à jour du fichier
  • Remplacez le fichier pf-if.css par la version à jour du fichier
  • Ajoutez lffl.png au même répertoire que lffl.gif
  • Ajoutez inv.gif au même répertoire que lffl.gif
  • Ajoutez pe-ap.js à votre répertoire de scripts
  • Ajoutez le code suivant à toutes les pages en anglais après « <!-- TEMPLATE SCRIPTS/CSS END | FIN DES SCRIPTS/CSS DU GABARIT --> » :
          <!-- PROGRESSIVE ENHANCEMENT BEGINS | DEBUT DE L'AMELIORATION PROGRESSIVE -->
          <script src="scripts/pe-ap.js" type="text/javascript"></script>
          <script type="text/javascript">
          /* <![CDATA[ */
                var params = {
                      lng:"eng",
                      pngfix:"images/inv.gif"
                };
                PE.progress(params);
          /* ]]> */
          </script>
          <!-- PROGRESSIVE ENHANCEMENT ENDS | FIN DE L'AMELIORATION PROGRESSIVE -->
  • Ajoutez le code suivant à toutes les pages en français après « <!-- FIN DES SCRIPTS/CSS DU GABARIT | TEMPLATE SCRIPTS/CSS END --> » :
          <!-- DEBUT DE L'AMELIORATION PROGRESSIVE | PROGRESSIVE ENHANCEMENT BEGINS -->
          <script src="scripts/pe-ap.js" type="text/javascript"></script>
          <script type="text/javascript">
          /* <![CDATA[ */
                var params = {
                      lng:"fra",
                      pngfix:"images/inv.gif"
                };
                PE.progress(params);
          /* ]]> */
          </script>
          <!-- FIN DE L'AMELIORATION PROGRESSIVE | PROGRESSIVE ENHANCEMENT ENDS -->
  • Faites les recherches et les remplacements globaux suivants (sans les guillemets) pour tous les fichiers HTML qui utilisent le modèle à deux colonnes :
    1. Remplacez « <a href="#cont">Skip to content</a> » par « <a href="#cont">Skip to content</a> | »
    2. Remplacez « <a href="#cont">Passer au contenu</a> » par « <a href="#cont">Passer au contenu</a> | »
  • Faites les recherches et les remplacements globaux suivants (sans les guillemets) pour tous les fichiers HTML qui utilisent le modèle :
    1. Remplacez « dcterms.modifed » par « dcterms.modified »
    2. Remplacez « class="lf" » par « class="lf pngfix" »
    3. Remplacez « VERSION 1.02 » par « VERSION 1.03 »

Détail des modifications

  • On a remplacé la classe « .fontSize100, .topPage » par « .fontSize100, .topPage, h1.headline, h2.headline, h3.headline, h4.headline, h5.headline, h6.headline » dans les fichiers base.css et base2.css
  • On a remplacé la classe « div.wrapContainer » par « div.center div.wrapContainer » dans le fichier base.css
  • On a remplacé la classe « div.right li ul.nav » par « div.right li ul.nav, div.right li div.nav, div.right li p.nav » dans les fichiers base-institution.css et ctoam\css\base-institution.css
  • On a remplacé la classe « div.left li.menucontent » par « div.left li.menucontent, div.left div.menucontent » dans le fichier ctoam\css\base-institution.css
  • On a remplacé la classe « div.left li.menucontent, div.left a.menulink » par « div.left li.menucontent, div.left div.menucontent, div.left a.menulink » dans le fichier ctoam\css\base-institution.css
  • On a remplacé la classe « div.right li.menucontent » par « div.right li.menucontent, div.right div.menucontent » dans le fichier ctoam\css\base-institution.css
  • On a remplacé la propriété « position: relative; » par « position: static; » dans la classe « * html div.banner, * html div.banner-eng, * html div.banner-fra, * html div.banner-lfcoa-eng, * html div.banner-lfcoa-fra » du fichier base.css
  • On a remplacé « dcterms.modifed » par « dcterms.modified » dans les fichier *.html
  • On a remplacé « VERSION 1.02 » par « VERSION 1.03 » dans les fichier *.*
  • On a éliminé la propriété « overflow: hidden; » de la classe « div.fp, div.fpml » dans le fichier base.css
  • On a éliminé la propriété « overflow: visible; » de la classe « * html div.fp, * html div.fpml » dans le fichier base.css
  • On a éliminé la propriété « float: left; » de la classe « li.fiptext a, li.fiptexta a, li.fiptextb a, li.fiptextc a » dans le fichier base.css
  • On a éliminé la propriété « float: left; » de la classe « li.fiptext div, li.fiptexta div, li.fiptextb div, li.fiptextc div » dans le fichier base.css
  • On a ajouté la classe « a:active, a:focus » ainsi que la propriété « cursor: auto; » au fichier base.css
  • On a ajouté la classe « div.fip, div.cwm » ainsi que les propriétés « position: relative; » et « z-index: 1;  » au fichier base.css
  • On a ajouté la classe « * html div.fip, * html div.cwm » ainsi que la propriété « position: static; » au fichier base.css
  • On a ajouté la classe « *:first-child+html div.fip, *:first-child+html div.cwm » ainsi que la propriété « position: static; » au fichier base.css
  • On a ajouté la classe « *:first-child+html div.banner, *:first-child+html div.banner-eng, *:first-child+html div.banner-fra, *:first-child+html div.banner-lfcoa-eng, *:first-child+html div.banner-lfcoa-fra » ainsi que la propriété « position: static; » au fichier base.css
  • On a ajouté la classe « div.page div.core div.navaid » ainsi que les propriétés « font-size: 100%; », « float: none; », « overflow: visible; », « max-width: 50%; », « height: auto;», « top: 0px; », « margin-left: 210px; », « margin-right: 200px; » et « color: #FFF; » au fichier base.css
  • On a ajouté la classe « * html div.page div.core div.navaid » ainsi que la propriété « font-size: 90%; » au fichier base.css
  • On a ajouté la classe « *:first-child+html div.page div.core div.navaid » ainsi que la propriété « font-size: 90%; » au fichier base.css
  • On a ajouté la classe « div.page div.core div.navaid a » ainsi que les propriétés « color: #FFF;  », « border-color: #FFF; », « padding: 5px; », « font-size: 100%; », « line-height: 140%; », « vertical-align: middle; », « border-width: 1px 1px 1px 1px; », « border-style: none; », « white-space: nowrap; », « position: relative; » et « z-index: 0; » au fichier base.css
  • On a ajouté la classe « * html div.page div.core div.navaid a » ainsi que la propriété « line-height: 180%; » au fichier base.css
  • On a ajouté la classe « *:first-child+html div.page div.core div.navaid a » ainsi que les propriétés « float: left; » et « margin-left: 5px; » au fichier base.css
  • On a ajouté la classe « div.page div.core div.navaid a:hover, div.page div.core div.navaid a:active, div.page div.core div.navaid a:focus » ainsi que les propriétés « border-style: solid; », « text-decoration: underline; » et « z-index: 2; » au fichier base.css
  • On a ajouté la classe « *:first-child+html div.fp, *:first-child+html div.fpml » ainsi que la propriété « float: none; » au fichier base.css
  • On a ajouté la classe « div.right li div.nav, div.right li p.nav » ainsi que les propriétés « margin-bottom: 10px; » et « padding: 2px 5px 2px 12px; » au fichier base.css
  • On a ajouté la classe « div.right li p.nav » ainsi que la propriété « margin-top: 0px; » au fichier base.css
  • On a ajouté la classe « h1.headline, h2.headline, h3.headline, h4.headline, h5.headline, h6.headline, h1.compress, h2.compress, h3.compress, h4.compress, h5.compress, h6.compress, p.compress, ul.compress, ol.compress » ainsi que les propriétés « margin-top: 0px; » et « margin-bottom: 0px; » au fichier base.css
  • On a ajouté la classe « h1.headline a:link, h1.headline a:visited, h2.headline a:link, h2.headline a:visited, h3.headline a:link, h3.headline a:visited, h4.headline a:link, h4.headline a:visited, h5.headline a:link, h5.headline a:visited, h6.headline a:link, h6.headline a:visited » ainsi que la propriété « text-decoration: none; » au fichier base.css
  • On a ajouté la classe « h1.headline a:hover, h2.headline a:hover, h3.headline a:hover, h4.headline a:hover, h5.headline a:hover, h6.headline a:hover » ainsi que la propriété « text-decoration: underline; » au fichier base.css
  • On a ajouté la classe « div.left div.wrapContainer, div.right div.wrapContainer » ainsi que les propriétés « float: left; » et « width: 100%; » au fichier base.css
  • On a ajouté la classe « div.page div.core div.navaid » ainsi que les propriétés « width: 450px; » et « padding-left: 50px; » au fichier base-institution.css
  • On a ajouté la classe « * html div.page div.core div.navaid » ainsi que les propriétés « width: 450px; » et « padding-left: 50px; » au fichier base-institution.css
  • On a ajouté la classe « *:first-child+html div.page div.core div.navaid » ainsi que les propriétés « width: 450px; » et « padding-left: 50px; » au fichier base-institution.css
  • On a ajouté la classe « div.page div.core div.navaid a:hover, div.page div.core div.navaid a:active, div.page div.core div.navaid a:focus » ainsi que les propriétés « color: #000; », « background-color: #CC9; » et « border-color: #000; » au fichier base-institution.css
  • On a ajouté la classe « div.colLayout » ainsi que les propriétés « background-color: #FFF; » and « height: auto; » au fichier pf-if.css
  • On a ajouté les propriétés « position: relative; » et « z-index: 1; » à la classe « div.banner, div.banner-eng, div.banner-fra, div.banner-lfcoa-eng, div.banner-lfcoa-fra » dans le fichier base.css
  • On a ajouté la propriété « float: left; » à la classe « div.fp, div.fpml » dans le fichier base.css
  • On a ajouté la propriété « float: none; » à la classe « * html div.fp, * html div.fpml » dans le fichier base.css
  • On a ajouté la propriété « background-color: #FFF; » à la classe « body » dans le fichier pf-if.css
  • On a ajouté la propriété « height: 100%; » à la classe « div.colLayout » dans le fichier ctoam\css\base-institution.css
  • On a ajouté le code suivant à toutes les pages en anglais après « <!-- TEMPLATE SCRIPTS/CSS END | FIN DES SCRIPTS/CSS DU GABARIT --> » :
          <!-- PROGRESSIVE ENHANCEMENT BEGINS | DEBUT DE L'AMELIORATION PROGRESSIVE -->
          <script src="scripts/pe-ap.js" type="text/javascript"></script>
          <script type="text/javascript">
          /* <![CDATA[ */
                var params = {
                      lng:"eng",
                      pngfix:"images/inv.gif"
                };
                PE.progress(params);
          /* ]]> */
          </script>
          <!-- PROGRESSIVE ENHANCEMENT ENDS | FIN DE L'AMELIORATION PROGRESSIVE -->
  • On a ajouté le code suivant à toutes les pages en français après « <!-- FIN DES SCRIPTS/CSS DU GABARIT | TEMPLATE SCRIPTS/CSS END --> » :
          <!-- DEBUT DE L'AMELIORATION PROGRESSIVE | PROGRESSIVE ENHANCEMENT BEGINS -->
          <script src="scripts/pe-ap.js" type="text/javascript"></script>
          <script type="text/javascript">
          /* <![CDATA[ */
                var params = {
                      lng:"fra",
                      pngfix:"images/inv.gif"
                };
                PE.progress(params);
          /* ]]> */
          </script>
          <!-- FIN DE L'AMELIORATION PROGRESSIVE | PROGRESSIVE ENHANCEMENT ENDS -->

Version 1.02 - 2007-03-01

Sommaire des modifications

  • On a réglé plusieurs problèmes d'affichage relatifs à Internet Explorer 7 qui donnaient lieu à l'augmentation de la taille du texte ou à l'augmentation du zoom.
  • On a réglé un problème relatif à Firefox qui faisait en sorte que les liens de la barre de menu commune étaient tronqués lors de l'utilisation de gros caractères.
  • On a réglé un problème d'affichage relatif à Firefox qui entraînait le chevauchement du texte de la zone de bannière et des liens de la barre de menu commune lors de l'utilisation de gros caractères.
  • On a réglé un problème d'affichage relatif à Firefox qui faisait en sorte que les éléments du fil d'Ariane (breadcrumb) empiétaient sur le menu latéral et sur la zone de contenu lors de l'utilisation de gros caractères.
  • On a réglé un problème d'affichage relatif à Firefox qui entraînait le chevauchement des éléments du pied de page lors de l'utilisation de gros caractères. 
  • On a réglé un problème d'affichage relatif à Firefox qui entraînait le chevauchement du texte du menu latéral et de celui de la zone de contenu lors de l'utilisation de gros caractères. 
  • On a réglé un problème d'affichage relatif à Firefox qui faisait en sorte que, comparativement au reste de la page, les bandes de couleur de la barre de divulgation proactive et du pied de page étaient excessivement petites lors de l'utilisation de gros caractères.
  • On a réglé un problème d'affichage relatif à Firefox qui faisait en sorte que la largeur de la page était excessivement petite comparativement au reste de la page lors de l'utilisation de gros caractères.
  • On a réglé un problème d'impression mineur relatif à Internet Explorer qui donnait parfois lieu à l'exclusion de un ou deux mots sur la copie papier.
  • On a modifié les modèles de page d'accueil de façon à éviter la répétition des images d'arrière‑plan dans la zone de message.
  • On a réglé un problème d'affichage relatif à Firefox qui entraînait le chevauchement, dans la page d'accueil, du texte de la zone de message et du texte du reste de la page lors de l'utilisation de gros caractères.
  • On a réglé un problème d'affichage relatif à Firefox qui faisait en sorte que le texte de la zone de message sortait du cadre défini lors de l'utilisation de gros caractères.
  • On a réglé un problème d'affichage relatif à Internet Explorer qui faisait en sorte que la couleur d'arrière-plan ne couvre pas complètement l'espace libre en dessous des menus latéraux et de la zone de contenu.
  • On a remplacé par Verdana la police Courier New utilisée dans les contrôles de formulaire.
  • On a augmenté le soutien offert pour les bannières et les pages d'accueils relatives aux campagnes de marketing et aux initiatives du gouvernement. 
  • On a augmenté le soutien offert pour les bulletins électroniques
  • On a ajouté la classe d'utilitaire .wrapContainer pour faciliter l'habillage des tableaux et des images avec du texte.
  • On a mis à jour les solutions relatives aux feuilles de style CSS côté client afin de prendre en charge les derniers changements apportés au modèle.

Fichiers mis à jour

  • base.css
  • base2.css
  • base-institution.css
  • 3col.css
  • 2col.css
  • pf-if.css (auparavant pf.css)
  • wp-pa.css (auparavant wp.css)
  • wp-pa2.css (auparavant wp2.css)
  • wp-pa-institution.css (auparavant wp-institution.css)
  • wp-pa.gif (auparavant wp.gif)
  • wp-pa-alt.gif (auparavant wp-alt.gif)
  • lffl.gif (auparavant lf.gif)
  • wmms.gif (auparavant wm.gif)
  • wp-pa*.html (auparavant wp*.html)
  • 3col*.html
  • 2col*.html
  • 1col*.html
  • srvmsg*.html

Comment mettre à jour les pages Web utilisant la version 1.01 du modèle

  1. Remplacez le fichier wp.gifpar wp-pa.gif
  2. Remplacez le fichier wp-alt.gif par wp-pa-alt.gif
  3. Remplacez le fichier lf.gif par lffl.gif
  4. Remplacez le fichier wm.gif par wmms.gif
  5. Remplacez le fichier base.css par la version à jour du fichier
  6. Remplacez le fichier base2.css par la version à jour du fichier
  7. Transférez les changements antérieurs apportés au fichier base-institution.css dans la version à jour du fichier
  8. Remplacez le fichier base-institution.css par la version à jour du fichier
  9. Remplacez le fichier pf.css par le fichier pf-if.css
  10. Remplacez le fichier wp.css par le fichier wp-pa.css
  11. Remplacez le fichier wp2.css par le fichier wp-pa2.css
  12. Transférez les changements antérieurs apportés au fichier wp-institution.css dans le fichier wp-pa-institution.css
  13. Remplacez le fichier wp-institution.css par le fichier wp-pa-institution.css
  14. Faites les recherches et les remplacements globaux suivants (sans les guillemets) pour tous les fichiers HTML qui utilisent le modèle :
    1. Remplacez le fichier « wp.css » par « wp-pa.css »
    2. Remplacez le fichier « wp2.css » par « wp-pa2.css »
    3. Remplacez le fichier « wp-institution.css » par « wp-pa-institution.css »
    4. Remplacez le fichier « pf.css » par « pf-if.css »
    5. Remplacez le fichier « wp.gif » par « wp-pa.gif »
    6. Remplacez le fichier « wp-alt.gif » par « wp-pa-alt.gif »
    7. Remplacez le fichier « wm.gif » par « wmms.gif »
    8. Remplacez le fichier « lf.gif » par « lffl.gif »
    9. Remplacez « id="siteuri" » par « class="siteuri" »
    10. Remplacez « id="center" » par « class="center" »
    11. Remplacez « id="left" » par « class="left" »
    12. Remplacez « id="right" » par « class="right" »
    13. Remplacez « VERSION 1.0  » par « VERSION 1.02  »
  15. Effectuez les recherches et les remplacements globaux (sans les guillemets) pour tous les fichiers CSS qui utilisent le modèle (que l'on retrouve normalement dans institution.css) :
    1. Remplacez « #siteuri » par « .siteuri »
    2. Remplacez « #center » par « .center »
    3. Remplacez « #left » par « .left »
    4. Remplacez « #right » par « .right »

Haut de la page

Détail des modifications

  • On a remplacé le fichier wp.css par wp-pa.css
  • On a remplacé le fichier wp2.css par wp-pa2.css
  • On a remplacé le fichier wp-institution.css par wp-pa-institution.css
  • On a remplacé le fichier wp.gifpar wp-pa.gif
  • On a remplacé le fichier wp-alt.gif par wp-pa-alt.gif
  • On a remplacé le fichier wm.gif par wmms.gif
  • On a remplacé le fichier lf.gif par lffl.gif
  • On a remplacé le fichier wp*.html par wp-pa*.html
  • On a remplacé « css/wp.css » par « css/wp-pa.css » dans les fichiers wp-pa*.htm l
  • On a remplacé « css/wp2.css » par « css/wp-pa2.css » dans les fichiers wp-pa*.html
  • On a remplacé « css/wp-institution.css » par « css/wp-pa-institution.css » dans les fichiers wp-pa*.html
  • On a remplacé « pf.css » par « pf-if.css » dans les fichiers 3col*.html, 2col*.html et 1col*.html
  • On a remplacé « id="siteuri" » par « class="siteuri" » dans les fichiers 3col*.html, 2col*.html et 1col*.html
  • On a remplacé « id="center" » par « class="center" » dans les fichiers 3col*.html, 2col*.html, 1col*.html et srvmsg*.html
  • On a remplacé « id="left" » par « class="left" » dans les fichiers 3col*.html, 2col*.html, 1col*.html et srvmsg*.html
  • On a remplacé « id="right" » par « class="right" » dans les fichiers 3col*.html, 2col*.html, 1col*.html et srvmsg*.html
  • On a remplacé « wm.gif » par « wmms.gif » dans les fichiers *.html
  • On a remplacé « lf.gif » par « lffl.gif » dans les fichiers *.html
  • On a remplacé « VERSION 1.0 » par « VERSION 1.02 » dans les fichiers *.*
  • On a remplacé la classe « .navaid » par « div.navaid, p.navaid, h1.navaid, h2.navaid » dans le fichier base.css
  • On a remplacé la classe « .navaid a » par « div.navaid a, p.navaid a, h1.navaid a, h2.navaid a » dans le fichier base.css
  • On a remplacé la classe « .fp, .fpml » par « div.fp, div.fpml » dans le fichier base.css
  • On a remplacé la classe « .fpml » par « div.fpml »dans le fichier base.css
  • On a remplacé la classe « .commonbar » par « ul.commonbar » dans le fichier base.css
  • On a remplacé la classe « .fiptext, .fiptexta, .fiptextb, .fiptextc » par « li.fiptext, li.fiptexta, li.fiptextb, li.fiptextc » dans les fichiers base.css et base2.css
  • On a remplacé la classe « .fiptext » par « li.fiptext » dans le fichier base.css
  • On a remplacé la classe « .fiptexta » par « li.fiptexta » dans le fichier base.css
  • On a remplacé la classe « .fiptextb » par « li.fiptextb » dans le fichier base.css
  • On a remplacé la classe « .fiptextc » par « li.fiptextc » dans le fichier base.css
  • On a remplacé la classe « .fiptext div, .fiptextb div, .fiptextc div » par « li.fiptext div, li.fiptextb div, li.fiptextc div » dans le fichier base.css
  • On a remplacé la classe « .fiptext a, .fiptexta a, .fiptextb a, .fiptextc a » par « li.fiptext a, li.fiptexta a, li.fiptextb a, li.fiptextc a » dans le fichier base.css
  • On a remplacé la classe « #left, #right » par « div.left, div.right » dans le fichier base.css
  • On a remplacé la classe « .menucontent, .menucontent li » par « li.menucontent, li.menucontent li, div.menucontent, div.menucontent li » dans le fichier base.css
  • On a remplacé la classe « .menucontent » par « li.menucontent, div.menucontent » dans les fichiers base.css et base2.css
  • On a remplacé la classe « .menulink » par « a.menulink » dans le fichier base.css
  • On a remplacé la classe « .menulink:hover » par « a.menulink:hover » dans le fichier base.css
  • On a remplacé la classe « .prodis » par « div.prodis » dans les fichiers base.css et  base-institution.css
  • On a remplacé la classe « #center » par « div.center » dans les fichiers base.css, 3col.css et 2col.css
  • On a remplacé la classe « #center h1, h2, h3, h4, h5, h6 » par « div.center h1, h2, h3, h4, h5, h6 » dans le fichier base.css
  • On a remplacé la classe « * html #center h1 » par « * html div.center h1" » dans le fichier base.css
  • On a remplacé la classe « .blackborder » par « div.blackborder » dans les fichiers base.css, base-institution.css et pf.css
  • On a remplacé la classe « .footer » par « div.footer » dans les fichiers base.css et base2.css
  • On a remplacé la classe « .footer div.footerline » par « div.footer div.footerline » dans le fichier base.css
  • On a remplacé la classe « .foot1, .foot2, .foot3 » par « div.foot1, div.foot2, div.foot3 » dans le fichier base.css
  • On a remplacé la classe « .foot1 » par « div.foot1 » dans le fichier base.css
  • On a remplacé la classe « .foot2 » par « div.foot2 » dans le fichier base.css
  • On a remplacé la classe « .foot3 » par « div.foot3 » dans le fichier base.css
  • On a remplacé la classe « .uparrow » par « img.uparrow » dans le fichier base.css
  • On a remplacé la classe « .date » par « span.date » dans le fichier base.css
  • On a remplacé la classe « .gcinits » par « div.gcinits » dans le fichier base.css
  • On a remplacé la classe « .gcinit div » par « div.gcinit div » dans le fichier base.css
  • On a remplacé la classe « #center .gcinit div » par « div.center div.gcinit div » dans le fichier base.css
  • On a remplacé la classe « .gcinit a, .gcinit a:visited » par « div.gcinit a, div.gcinit a:visited » dans le fichier base.css
  • On a remplacé la classe « .foot2 img, div.topPage img, p.topPage img » par « div.foot2 img, div.topPage img, p.topPage img » dans le fichier base.css
  • On a remplacé la classe « body, p, blockquote, table, td, th, li, a, ul, ol, dd, dl, dt, form, button, fieldset, label » par « body, p, blockquote, table, td, th, li, a, ul, ol, dd, dl, dt, form, button, fieldset, label, select, option, input, textarea » dans le fichier base.css
  • On a remplacé la classe « select, option, input, textarea, code, code span » par « code, code span » dans le fichier base.css
  • On a remplacé la classe « div.banner » par « div.banner, div.banner-eng, div.banner-fra, div.banner-lfcoa-eng, div.banner-lfcoa-fra » dans le fichier base.css
  • On a remplacé la classe « p.main » par « div.banner p.main » dans les fichiers base.css et base2.css
  • On a remplacé la classe « p#siteuri » par « div.banner p.siteuri » dans les fichiers base.css et base2.css
  • On a remplacé la classe « .menucontent li » par « li.menucontent li, div.menucontent li » dans le fichier base2.css
  • On a remplacé la classe « #left » par « div.left » dans les fichiers 3col.css et 2col.css
  • On a remplacé la classe « #right » par « div.right » dans le fichier 3col.css
  • On a remplacé la classe « * html #center » par « * html div.center » dans les fichiers 3col.css et 2col.css
  • On a remplacé la classe « .colLayout » par « div.colLayout » dans le fichier base-institution.css
  • On a remplacé la classe « #right li ul.nav » par « div.right li ul.nav » dans le fichier base-institution.css
  • On a remplacé la classe « #left .menucontent » par « div.left li.menucontent, div.left .div.menucontent" » dans le fichier base-institution.css
  • On a remplacé la classe « #left .menucontent, #left .menulink » par « div.left li.menucontent, div.left div.menucontent, div.left a.menulink" » dans le fichier base-institution.css
  • On a remplacé la classe « #right .menucontent » par « div.right li.menucontent, div.right div.menucontent" » dans le fichier base-institution.css
  • On a remplacé la classe « #right .menulink » par « div.right a.menulink" » dans le fichier base-institution.css
  • On a remplacé la classe « .blackborder:after » par « div.blackborder:after » dans le fichier base-institution.css
  • On a remplacé la classe « .footer div.footerline » par « div.footer div.footerline » dans le fichier base-institution.css
  • On a remplacé la classe « .footer a:link, .footer a:visited, div.center .footer a:link, #center .footer a:visited, #center .topPage a:link, div.center .topPage a:visited » par « div.footer a:link, div.footer a:visited, div.center div.footer a:link, div.center div.footer a:visited, div.center div.topPage a:link, div.center div.topPage a:visited, div.center p.topPage a:link, div.center p.topPage a:visited » dans le fichier base-institution.css
  • On a remplacé la classe « div.banner, .fp, #left, #right, .footer div.foot2 a, .footer div.foot3 a, .footer div.footerline, .navaid, .topPage » par « div.banner, div.banner-eng, div.banner-fra, div.banner-lfcoa-eng, div.banner-lfcoa-fra, div.fp, div.left, div.right, div.footer div.foot2 a, div.footer div.foot3 a, div.footer div.footerline, div.navaid, div.topPage, p.topPage » dans le fichier pf-if.css
  • On a remplacé la classe « #center, * html #center » par « div.center, * html div.center » dans le fichier pf-if.css
  • On a remplacé la classe « .headcontainer » par « div.headcontainer » dans les fichiers wp-pa.css , wp-pa2.css et wp-pa-institution.css
  • On a remplacé la classe « .mcontainter » par « div.mcontainter » dans le fichier wp-pa.css
  • On a remplacé la classe « .fip » par « div.fip » dans le fichier wp-pa.css
  • On a remplacé la classe « .wm » par « div.wm » dans le fichier wp-pa.css
  • On a remplacé la classe « .msgarea, .msgareaalt » par « div.msgarea, div.msgareaalt, div.headcontainer » dans le fichier wp-pa.css
  • On a remplacé la classe « .msgarea » par « div.msgarea » dans les fichiers wp-pa.css et wp-pa-institution.css
  • On a remplacé la classe « .msgareaalt » par « div.msgareaalt » dans les fichiers wp-pa.css et wp-pa-institution.css
  • On a remplacé la classe « .msgarea h1, .msgareaalt h1 » par « div.msgarea h1, div.msgareaalt h1 » dans les fichiers wp-pa.css et wp-pa-institution.css
  • On a remplacé la classe « .headtitleLft » par « div.headtitleLft » dans le fichier wp-pa.css
  • On a remplacé la classe « .headtitleRgt » par « div.headtitleRgt » dans le fichier wp-pa.css
  • On a remplacé la classe « .buttons » par « div.buttons » dans le fichier wp-pa.css
  • On a remplacé la classe « .mlbuttons » par « div.mlbuttons » dans le fichier wp-pa.css
  • On a remplacé la classe « .langbtn, .mllangbtn » par « div.langbtn, div.mllangbtn » dans le fichier wp-pa.css
  • On a remplacé la classe « .mllangbtn » par « div.mllangbtn » dans le fichier wp-pa.css
  • On a remplacé la classe « .lb, mlb » par « div.lb, div.mlb » dans le fichier wp-pa.css
  • On a remplacé la classe « .lb a, mlb a » par «  div.lb a, div.mlb a » in wp-pa.css
  • On a remplacé la classe « .lb a » par « div.lb a » dans le fichier wp-pa.css
  • On a remplacé la classe « .mlb a » par « div.mlb a » dans le fichier wp-pa.css
  • On a remplacé la classe « .imptext » par « div.imptext » dans le fichier wp-pa.css
  • On a remplacé la classe « .imptext a, .imptext a:visited » par « div.imptext a, .imptext a:visited » dans le fichier wp-pa.css
  • On a remplacé la classe « #inlft, #inrgt » par « div#inlft, div#inrgt » dans le fichier wp-pa.css
  • On a remplacé la classe « #inlft a, #inlft a:visited, #inrgt a, #inrgt a:visited, .impnot » par « div#inlft a, div#inlft a:visited, div#inrgt a, div#inrgt a:visited, p.impnot » dans les fichiers wp-pa.css et wp-pa2.css
  • On a remplacé la classe « .msgarea h1 » par « div.msgarea h1 » dans le fichier wp-pa-institution.css
  • On a remplacé la propriété « height: 6.25em; » par « min-height: 5.58em; » dans la classe « div.banner, div.banner-eng, div.banner-fra, div.banner-lfcoa-eng, div.banner-lfcoa-fra » du fichier base.css
  • On a remplacé la propriété « height: 1.56em; » par « min-height: 1.23em; » dans la classe « p.breadcrumb » du fichier base.css
  • On a remplacé la propriété « padding: 1px 0px 0px 3px; » par « padding: 1px 0px 5px 3px; » dans la classe « p.breadcrumb » du fichier base.css
  • On a remplacé la propriété « padding-right: 0px; » par « padding-right: 10px; » dans la classe « div.center, * html div.center » du fichier pf-if.css
  • On a remplacé la propriété « background: url(../images/wp.gif) #696; » par « background: url(../images/wp-pa.gif) #69C no-repeat; » dans la classe « div.msgarea » du fichier wp-pa-institution.css
  • On a remplacé la propriété « background: url(../images/wp-alt.gif) #696; » par « background: url(../images/wp-pa-alt.gif) #69C no-repeat; » dans la classe « div.msgareaalt » du fichier wp-pa-institution.css
  • On a éliminé les propriétés « <!--[if gte IE 7]> » et « <![endif]--> » des classes « div.fp, div.fpml », « div.fpml », et « div.fiptext, div.fiptexta, div.fiptextb, div.fiptextc » dans le fichier base.css
  • On a éliminé la propriété « position: relative; » de la classe « div.banner » dans le fichier base.css
  • On a éliminé la propriété « position: relative; » de la classe « img.coa, img.lf » dans le fichier base.css
  • On a éliminé les propriétés « background-color: transparent; » et « font-weight: lighter; » de la classe « div.banner p.siteuri » dans le fichier base2.css
  • On a éliminé les propriétés « height: 1.57em; », « height: 1.4em; » et « min-height: 1.57em; » de la classe « div.fp, div.fpml » dans le fichier base.css
  • On a éliminé la propriété « height: 2.7em; » de la classe « div.fpml » dans le fichier base.css
  • On a éliminé les propriétés « padding: 5px; », « min-height: 158px; » et « min-width: 135px; » de la classe « div.blackborder » dans le fichier base-institution.css
  • On a ajouté la classe « div.banner-eng, div.banner-fra » ainsi que les propriétés « min-height: 80px », « padding-bottom: 0px; » et « height: 80px; » au fichier base.css
  • On a ajouté la classe « div.banner-lfcoa-eng, div.banner-lfcoa-fra » ainsi que les propriétés « min-height: 115px; », « padding-bottom: 0px; », « height: 115px; » et « margin-top: 5px; » au fichier base.css
  • On a ajouté la classe « div.banner-lfcoa-eng img.coa, div.banner-lfcoa-eng img.lf, div.banner-lfcoa-fra img.coa, div.banner-lfcoa-fra img.lf » ainsi que la propriété « display: none; » au fichier base.css
  • On a ajouté la classe « div.banner-eng p.main, div.banner-eng p.siteuri, div.banner-fra p.main, div.banner-fra p.siteuri, div.banner-lfcoa-eng p.main, div.banner-lfcoa-eng p.siteuri, div.banner-lfcoa-fra p.main, div.banner-lfcoa-fra p.siteuri » ainsi que les propriétés « height: 0; », « width: 0; », « overflow: hidden; », « float: right; », « font-size: 0; », « position: absolute; », et « top: -100px; » au fichier base.css
  • On a ajouté la classe « div.wrapContainer » ainsi que les propriétés « width: 99.5%; » et « float: left; » au fichier base.css
  • On a ajouté la classe « div.fp » ainsi que la propriété « min-height: 1.57em; » au fichier base.css
  • On a ajouté la classe « * html div.fp » ainsi que la propriété « height: 1.4em; » au fichier base.css
  • On a ajouté la classe « * html div.fpml » ainsi que la propriété « height: 2.7em; » au fichier base.css
  • On a ajouté la classe « * html div.banner, * html div.banner-eng, * html div.banner-fra, * html div.banner-lfcoa-eng, * html div.banner-lfcoa-fra » ainsi que la propriété « position: relative; » au fichier base.css
  • On a ajouté la classe « * html img.coa, * html img.lf » ainsi que la propriété « position: relative; » au fichier base.css
  • On a ajouté la classe « * html div.fp, * html div.fpml » avec la propriété « overflow: visible; » dans le fichier base.css
  • On a ajouté la classe « div.banner-eng, div.banner-lfcoa-eng » et « div.banner-fra, div.banner-lfcoa-fra » ainsi que la propriété « background: url() #FFF no-repeat center center; » au fichier base-institution.css
  • On a ajouté la classe « div.msgarea h1.hidden, div.msgareaalt h1.hidden » ainsi que les propriétés « height: 0; », « width: 0; », « overflow: hidden; », « float: right; », « font-size: 0; », « position: absolute; » et « top: -100px; » au fichier wp-pa.css
  • On a ajouté la propriété « padding-bottom: 0.67em; » à la classe « div.banner, div.banner-eng, div.banner-fra, div.banner-lfcoa-eng, div.banner-lfcoa-fra » dans le fichier base.css
  • On a ajouté la propriété « overflow: hidden; » à la classe « div.fp, div.fpml » dans le fichier base.css
  • On a ajouté la propriété « min-width: 6.6em; » à la classe « div.foot1, div.foot2, div.foot3 » dans le fichier base.css
  • On a ajouté la propriété « min-width: 9.0em; » à la classe « div.left, div.right » dans le fichier base.css
  • On a ajouté la propriété « min-height: 0.9375em; » à la classe « div.prodis » et « div.footer div.footerline » dans le fichier base.css
  • On a ajouté la classe « div.blackborder » ainsi que les propriétés « padding: 5px; », « min-height: 158px; » et « min-width: 9.5em; » au fichier base.css
  • On a ajouté la propriété « min-width: 12.00em; » à la classe « div.page » dans le fichier base.css
  • On a ajouté la propriété « height: 100%; » à la classe « div.colLayout » dans le fichier base-institution.css
  • On a ajouté la propriété « min-width: 18.5em; » à la classe « div.mcontainter » dans le fichier wp-pa.css
  • On a ajouté la propriété « min-height: 6.7em; » à la classe « div.msgarea » dans le fichier wp-pa.css
  • On a ajouté la propriété « min-height: 7.5em; » à la classe « div.msgareaalt » dans le fichier wp-pa.css

Version 1.01 - 2007-01-11

Sommaire des modifications

  • On a corrigé une faute d'orthographe dans le titre des modèles de page d'accueil bilingue et unilingue.
  • On a réglé un problème d'affichage relatif à Internet Explorer 7 qui faisait en sorte que la barre de menu commune empiétait sur les liens du fil d'Ariane (breadcrumb) lors de l'utilisation de gros caractères.

Fichiers mis à jour

  • base.css
  • wp.html
  • wp-alt.html
  • wp-alt-quebec.html
  • wp-alt-ul-fra.html
  • wp-ctoam.html
  • wp-quebec.html
  • wp-quebec-ctoam.html
  • wp-ul-fra.html
  • wp-ul-ctoam-fra.html

Comment mettre à jour les pages Web utilisant la version 1.0 du modèle

  1. Remplacez le fichier base.css par la version à jour du fichier.
  2. Faites la recherche et le remplacement ci-dessous pour toutes les pages d'accueil qui sont fondées sur le modèle :
    1. Remplacez « Page d'acceuil » par « Page d'accueil »

Détail des modifications

  • On a remplacé « Page d'acceuil » par « Page d'accueil » dans le titre des pages d'accueil bilingues et unilingues.
  • On a ajouté la propriété « <!--[if gte IE 7]>height: 1.57em;<![endif]--> » à la classe « .fp, .fpml » dans le fichier base.css
  • On a ajouté la propriété « <!--[if gte IE 7]>height: 2.82em;<![endif]--> » à la classe « .fpml » dans le fichier base.css
  • On a ajouté la propriété « <!--[if gte IE 7]>min-height: 16%;<![endif]--> » à la classe « .fiptext, .fiptexta, .fiptextb, .fiptextc » dans le fichier base.css

Version 1.0 - 2007-01-05

Sommaire des modifications

  • Version initiale

15.0 Demandes de renseignements

Pour obtenir de plus amples renseignements sur le modèle de page NSI du GC ou sur la Normalisation des sites Internet, veuillez communiquer avec le Bureau de la NSI aux coordonnées suivantes :

Adresse :
Bureau de la normalisation des sites Internet
Politique et stratégie sur les services
Direction du dirigeant principal de l'information
Secrétariat du Conseil du Trésor du Canada
300, avenue Laurier Ouest
Ottawa (Ontario)
K1A 0R5
Courriel :
clf-nsi@tbs-sct.gc.ca
Téléphone :
613-952-6987
Ligne sans frais :
877-636-0656
Télécopieur :
613-957-8020
Téléimprimeur 
613-957-9090 (SCT)

Date de modification : 2007-11-16

Haut de la page
Avis importants