maquette de document norme aermc · web viewhaut de 7 pixels, sauf pour la case de l'onglet...

NORMES ET SPECIFICATIONS POUR LES CHARTES

GRAPHIQUES ET ERGONOMIQUES WEB ET INTRANET

Version Date Objet de la version Auteur

V 1.0.0 30/06/2003 Initialisation H. CHUZEVILLE

Division des systèmes d'information Copyright Agence de l'Eau RMC 2003

Agence de l’Eau RMC Méthodes et normes pour Lyon, le 22 mai 2023(Réf. : document.doc) les chartes graphiques Web et Intranet Page : 2

SOMMAIRE

1. Introduction..........................................................................................................................32. DIMENSIONS DES PAGES ET DES MARGES...............................................................................43. COULEURS UTILISÉES.............................................................................................................54. PAGE D'ACCUEIL....................................................................................................................6

4.1 Copies d'écran de la page d'accueil..............................................................................64.2 Découpage de la page en tableau................................................................................74.3 Entête de la page..........................................................................................................84.4 Menu de gauche............................................................................................................94.5 Menu rubriques transverses........................................................................................114.6 Partie centrale.............................................................................................................13

4.6.1 Titres de paragraphes.......................................................................................................................144.6.2 Texte de paragraphes.......................................................................................................................144.6.3 Liens..................................................................................................................................................144.6.4 Images...............................................................................................................................................154.6.5 Listes à puces....................................................................................................................................154.6.6 Tableaux............................................................................................................................................15

4.7 Menu de droite............................................................................................................164.8 Feuille de style commentée et illustrée.......................................................................18

5. PAGES INTÉRIEURES............................................................................................................265.1 Découpage de la page en tableau..............................................................................265.2 Entête de page............................................................................................................275.3 Menu de gauche..........................................................................................................275.4 Menu rubriques transverses........................................................................................275.5 Pages de texte standard.............................................................................................27

5.5.1 Copie d'écran....................................................................................................................................275.5.2 Partie contenu...................................................................................................................................28

5.5.2.1 Menu de situation dans le site........................................................................................................285.5.2.2 Menu des pages sœurs (de même niveau)....................................................................................285.5.2.3 Titre de la fenêtre...........................................................................................................................295.5.2.4 Titre de la page..............................................................................................................................295.5.2.5 Paragraphe d'introduction..............................................................................................................295.5.2.6 Titre de paragraphe........................................................................................................................305.5.2.7 Sous titre de paragraphe................................................................................................................305.5.2.8 Sous sous titre de paragraphe.......................................................................................................305.5.2.9 Sous sous sous titre de paragraphe...............................................................................................305.5.2.10 Texte de paragraphe....................................................................................................................305.5.2.11 Liens.............................................................................................................................................315.5.2.12 Images, photos, schémas............................................................................................................315.5.2.13 Légende des photos, schémas....................................................................................................315.5.2.14 Liste à puces................................................................................................................................315.5.2.15 Liste numérotées..........................................................................................................................315.5.2.16 Tableau........................................................................................................................................325.5.2.17 Formulaire....................................................................................................................................335.5.2.18 Liste de documents......................................................................................................................355.5.2.19 Trombinoscope.............................................................................................................................365.5.2.20 Pied de page................................................................................................................................36



1. INTRODUCTION

Ce document présente les informations à renseigner dans un document de charte graphique et ergonomique d'un site Web ou Intranet. Le plan proposé est à suivre, dans la mesure où il s'adapte à la charte du site à réaliser. Des paragraphes peuvent être intervertis, ou montés ou descendus d'un niveau, si nécessaire, selon que les règles qui y sont décrites s'appliquent à l'ensemble des pages ou à une partie seulement. On ajoutera autant de paragraphes qu'il existe de types de pages différents. Toutes les informations nécessaires à la maintenance technique du site, à sa mise à jour, ainsi qu'à la compréhension de l'ergonomie et de la construction du site doivent être présentes. Les informations présentées par la suite peuvent être reprises en les modifiant et en les complétant ; ces informations doivent être présentées dans un document technique aux normes de l'Agence (différentes des normes de présentation du présent document).



2. DIMENSIONS DES PAGES ET DES MARGES

[Insérer un schéma avec les cotes :]

Les dimensions et marges de la page sont les suivantes [à modifier et/ou compléter] : (1) largeur de la page : 760 pixels (2) hauteur de la page : variable (3) marge de gauche : 0 pixels, (4) marge du haut : 0 pixels, (5) marge de droite : variable, suivant navigateur (6) marge de bas : 1 saut de ligne (<br>) pour un texte de taille : small

La page est alignée par défaut (en haut à gauche dans le navigateur).


4

2

13 5

6


3. COULEURS UTILISÉES

[palette de couleur à insérer (à modifier) :]

[à modifier :]

Les couleurs utilisées sur la page d'accueil sont : (1) Blanc : #FFFFFF (2) Noir : #000000 (3) Turquoise (CielAde) : #66CCCC (4) Jaune (JauneAde) : #FFCC00 (5) Vert pomme (VertAde) : #99CC33 (6) Orange (OrangeAde) : #FF9933 (7) Vert sapin (GreenAde) : #006633 (8) Vert émeraude (BleuetAde) : #006666 (9) Gris (GrisAde) : #666666 (10) Rouge foncé (RougeAde) : #990000

Ces couleurs reprennent celles du logo de l'Agence de l'eau, dont les noms sont mis entre parenthèses.


1 2 3 4 5 6 7 8 9 10


4. PAGE D'ACCUEIL

4.1 Copies d'écran de la page d'accueil

En 800 x 600, sous Internet Explorer 6 sur PC [insérer une copie d'écran] :

En 1024 x 768, sous Internet Explorer 6 sur PC [insérer une copie d'écran] :



4.2 Découpage de la page en tableau

[Insérer un schéma avec les cotes (cotes à compléter sur le schéma ci-dessous) :]

[à compléter (modifier) :]

La page est constituée d'un tableau : (1) largeur du tableau : 760 pixels (2) hauteur du tableau : variable (3) remplissage des cellules : 0 pixels (4) espacement entre les cellules : 0 pixels

Le tableau est constitué des cellules suivantes : Entête de page :

(1) largeur : 760 pixels (5) hauteur : 68 pixels

Menu de gauche : (6) largeur : 181 pixels (7) hauteur : variable

Menu rubriques transverses : (8) largeur : 579 pixels (9) hauteur : 21 pixels

Partie centrale : (10) largeur : 444 pixels (11) hauteur : variable

Menu de droite : (12) largeur : 135 pixels (11) hauteur : variable


1


4.3 Entête de la page

[image de l'entête à insérer (modifier) :]

[à modifier :]

L'entête de la page est constituée d'une cellule : de couleur de fond : jaune, contenant 3 images :

centrées verticalement et alignées à gauche, sans espacement entre elles.

Ces images sont : le logo de l'Agence sur fond jaune (94 x 68 pixels), le nom de l'Intranet (206 x 68 pixels) et un bandeau de publicité (taille standard IAB : 468 x 60 pixels)

Pour l'image contenant le nom de l'Intranet, la couleur du titre est le rouge foncé (#990000), la police du titre est l'helvetica neue 33 thin extended, de taille 48 pixels, le titre est aligné en fer à droite, la couleur du sous-titre est le noir, la police du sous titre est l'helvetica neue 45 light, de taille 7 pixels, le sous titre est aligné en fer à droite.



4.4 Menu de gauche

[image du menu de gauche à insérer (modifier) :]

[modifier :]

Le menu est constitué d'une cellule contenant des paragraphes, puis un tableau. Le premier paragraphe contient l'image formant le haut du menu, de taille 181 x 32 pixels :

("gauche-haut.gif")



Les paragraphes suivants contiennent les intitulés de rubriques (sous forme de textes), avec : la police Arial (ou Helvetica ou sans-serif), de taille 11 pixels, de couleur :

noire pour les rubriques des parties 1 et 3, blanche pour les rubriques de la partie 2,

des marges à 0, un remplissage :

haut de 3 pixels, droite de 0 pixels, bas de 3 pixels, gauche de 15 pixels,

une image d'arrière plan (image constituant le menu) de taille : 181 x 16 pixels, qui varie selon la partie (1, 2 ou 3) dans laquelle se situe la rubrique. L'image est de couleur : turquoise (#66CCCC) pour la partie 1 :

("gauche-fond-1.gif")

vert émeraude (#006666) pour la partie 2 :


vert pomme (#99CC33) pour la partie 3 :


L'image est différente (bord bas droit arrondi) pour la dernière rubrique de la liste :


Ces paragraphes sont alternés avec des paragraphes contenant simplement une ligne blanche sous forme d'une image d'un pixel blanc étendu à la taille : 181 x 1 pixels.

Le tableau au bas du menu a : un largeur de 181 pixels, une hauteur de 61 pixels, une bordure de 0 pixels, un remplissage des cellules de : 0 pixels, un espacement des cellules de : 0 pixels.Il est divisé verticalement en deux cellules de 45 et 136 pixels de largeur.



La cellule de gauche de ce tableau contient une image de taille : 45 x 61 pixels. La cellule de droite contient : une image de fond de taille : 136 x 61 pixels, la date de mise à jour et les liens "webmestre" et "infos légales" :

police : Verdana (ou Arial ou Helvetica, ou sans-serif), taille de la police : 9 pixels, couleur : noir, marges :

haut : 3 pixel, gauche : 0 pixel, droite : 14 pixels, bas : 0 pixel,

alignement horizontal : droit, mise en forme : souligné pour les liens.

4.5 Menu rubriques transverses

[image du menu rubriques transverses à insérer (modifier) :]

[modifier :]

Le menu rubriques transverses est constitué d'une cellule : de couleur de fond : jaune, contenant un tableau :

aligné verticalement : en bas, de largeur : 579 pixels, de hauteur : 21 pixels, avec une bordure de 0 pixel, un remplissage des cellules de 0 pixels, un espacement entre les cellules de 0 pixels.

La première case du tableau, à gauche, contient une image, de taille 90 x 21 pixels, définissant un renfoncement blanc :

("menu-gauche-gif")



Les cases suivantes contiennent un paragraphe avec les intitulés des rubriques transverses (sous forme de textes), avec : la police Verdana (ou Arial ou Helvetica ou sans-serif), de taille 9 pixels, de couleur noire, de couleur d'arrière plan : jaune, avec, pour les cases autres que le premier onglet "Accueil", une image d'arrière plan

représentant l'ombrage d'un onglet :

("menu-onglet.gif")

de taille : 16 x 20, non répétée, fixée à gauche,

un remplissage : haut de 7 pixels, sauf pour la case de l'onglet "Rechercher" placé à 1 pixel. gauche de 5 pixels,

une marge gauche de 0 pixel.

Le champ texte de l'onglet "Rechercher" a une taille de 10 de largeur et prend une police de taille 9 pixels.

La dernière case du tableau, à droite comporte une image illustrative de taille : 23 x 21 pixels.



4.6 Partie centrale

[image de la partie centrale à insérer (modifier) :]

[modifier :]

La partie centrale est constituée d'une cellule : de couleur de fond : blanc (par défaut), de remplissage à 0, de marges :

haut à 10, droite à 0, bas à 0, gauche à 10.

Le premier titre et le pictogramme "Imprimer la page" sont insérés dans un tableau d'une ligne et deux colonnes en haut de la page.



4.6.1 Titres de paragraphes

[à modifier :]

Les titres de paragraphes (niveau 1 ou "h1") possèdent les caractéristiques suivantes : police : Arial (ou Helvetica ou sans-serif), taille de la police : 11 pixels, mise en forme : gras, couleur du texte : blanche, marges :

haut et bas : 5 pixels, gauche et droite : 3 pixels,

effacé : gauche, couleur d'arrière plan, différente selon les paragraphes :

"Actualités" : orange (#FF9933), "Manifestations" : turquoise (#66CCCC), "Réunions" : vert sapin (#006633), "Revue de presse" : gris (#666666), "Amicale/A.S." : rouge foncé (#990000).

4.6.2 Texte de paragraphes

[à modifier :]

Le texte des paragraphes possède les caractéristiques suivantes : police : Arial (ou Helvetica ou sans-serif), taille de la police : 12 pixels, mise en forme : normal, couleur du texte : noire, marge de droite : 15 pixels.

4.6.3 Liens

[à compléter]



4.6.4 Images

[à modifier :]

Les images possèdent les caractéristiques suivantes : taille : variable, limitée à ?? x ?? pixels, alignement : flottant à gauche (du texte), espacement avec le texte :

vertical : 3 pixels, horizontal : 5 pixels.

4.6.5 Listes à puces

[à modifier :]

Les listes à puces possèdent les caractéristiques suivantes : police : Arial (ou Helvetica ou sans-serif), taille de la police : 14 pixels, mise en forme : gras, couleur du texte : noire, remplissage : 0 pixel, marges : 0 pixel, type de puce : disque, position de la liste : intérieure.

4.6.6 Tableaux

[à compléter]



4.7 Menu de droite

[à modifier :]

Le menu de droite est constitué d'une cellule contenant des paragraphes.

("droite-haut-1.gif")

Le premier paragraphe contient l'image formant le haut du menu, de taille 135 x 39 pixels.

Les paragraphes "Nom d'utilisateur", "Mot de passe" et "Déconnexion" possèdent les caractéristiques suivantes : police : Arial (ou Helvetica ou sans-serif), taille de la police : 10 pixels, couleur de la police: noire, mise en forme de la police : normal, alignement horizontal : centré, remplissage : 0 pixels, marges :

haut : 1 pixel, droite : 0 pixel, bas : 1 pixel, gauche : 10 pixels,

image d'arrière plan (image constituant le menu) de taille : 135 x 19 et de couleur vert pomme (#99CC33) :



("droite-fond-1.gif")

Ces paragraphes sont séparés les uns des autres par des paragraphes contenant simplement une ligne blanche sous forme d'une image d'un pixel blanc étendu à la taille : 135 x 1 pixels.

Les champs de formulaire "Nom d'utilisateur" et "Mot de passe" ont les caractéristiques suivantes : taille du champ (largeur) : 10, police : Arial (ou Helvetica ou sans-serif), taille de la police : 10 pixels, couleur de la police : noire, remplissage :

haut : 0 pixel, droite : 0 pixel, bas : 0 pixel, gauche : 20 pixels,

marges : 0 pixel, image d'arrière plan (image constituant le menu) de taille : 135 x 19 et de couleur vert

pomme (#99CC33).

Les boutons de formulaire "OK" et "STOP" sont des images avec les caractéristiques suivantes : bouton "OK" : ("bt-connexion.gif")

taille : 25 x 13 pixels, police : Arial, gras, lissage précis, taille 9 pixels, en majuscules, couleur de fond : vert sapin (#006633),

bouton "STOP" : ("bt-stop.gif") taille : 36 x 13 pixels, police : Arial, gras, lissage précis, taille 9 pixels, en majuscules, couleur de fond : rouge foncé (#990000).

Le dernier paragraphe du bloc contient l'image qui ferme celui-ci :

("droite-bas-1.gif")

Les deux blocs suivants sont construits de manière similaire, avec un premier paragraphe contenant l'image formant le haut du bloc, de tailles respectives 135 x 39 et 135 x 31 pixels :

("droite-haut-2.gif") ("droite-haut-3.gif")



Puis on a une suite de paragraphes contenant des liens, avec les caractéristiques suivantes : police : Arial (ou Helvetica ou sans-serif), taille de la police : 10 pixels, couleur de la police: noire, mise en forme de la police : normal, alignement horizontal : centré, remplissage :

haut : 1 pixel, droite : 0 pixel, bas : 1 pixel, gauche : 20 pixels

marges : 0 pixel, image d'arrière plan (image constituant le menu) :

de taille : 135 x (12 ou 14 ?) et de couleur : orange (#FF9933), pour le deuxième bloc, turquoise (#66CCCC), pour le troisième bloc :

("droite-fond-2.gif") ("droite-fond-3.gif")

Le dernier paragraphe de chaque bloc contient l'image qui ferme celui-ci :

("droite-bas-2.gif") ("droite-bas-3.gif")

4.8 Feuille de style commentée et illustrée

/* Redéfinition des balises html */

body {margin-top: 0px;margin-left: 0px;text-decoration: none;

}

p {margin: 0px;padding: 0px;

}

h1 {font-family: Arial, Helvetica, sans-serif;font-size: 11px;font-weight: bold;color: #FFFFFF;margin: 5px 3px;clear: left;

}



ul {font-family: Arial, Helvetica, sans-serif;font-size: 13px;font-weight: bold;color: #000000;list-style-position: inside;list-style-type: disc;padding: 0px;margin: 0px;

}

a {color: #000000;text-decoration: none;

}

form {margin: 0px;padding: 0px;

}

/* Menu par onglets */

/* Liens */

A.onglets {font-family: Arial, Helvetica, sans-serif;font-size: 10px;color: #3300CC;

}

/* Pour les onglets sans ombré */

.menu1 {font-family: Arial, Helvetica, sans-serif;font-size: 9px;font-weight: normal;color: #3300CC;background-attachment: fixed;background-repeat: no-repeat;background-position: left;background-color: #FFCC00;margin-left: 0px;padding-left: 5px;height: 21px;padding-top: 7px;line-height: 5px;

}



/* Pour les onglets ombrés */

.menu2 {font-family: Arial, Helvetica, sans-serif;font-size: 9px;font-weight: normal;color: #3300CC;background-attachment: fixed;background-image: url(images/home/menu-onglet.gif);background-repeat: no-repeat;background-position: left;background-color: #FFCC00;margin-left: 0px;padding-left: 8px;height: 21px;padding-top: 7px;line-height: 5px;

}

/* Pour l'onglet avec l'input */

.menu3 {font-family: Arial, Helvetica, sans-serif;font-size: 9px;font-weight: normal;color: #3300CC;background-attachment: fixed;background-image: url(images/home/menu-onglet.gif);background-repeat: no-repeat;background-position: left;background-color: #FFCC00;margin-left: 0px;padding-left: 8px;height: 21px;padding-top: 1px;line-height: 5px;

}

/* Bloc avec le champ de formulaire */

.menu-input {background-attachment: fixed;background-image: url(images/home/menu-onglet.gif);background-repeat: no-repeat;background-position: left;background-color: #FFCC00;margin-left: 0px;padding-left: 15px;height: 21px;padding-top: 0px;line-height: 5px;

}



/* Menu de gauche */

/* Premier bloc */

.gauche1 {font-family: Arial, Helvetica, sans-serif;font-size: 11px;font-weight: normal;background-image: url(images/home/gauche-fond-1.gif);padding: 3px 0px 3px 15px;background-color: #FFCC00;

}

/* Deuxième bloc */

.gauche2 {font-family: Arial, Helvetica, sans-serif;font-size: 11px;

color : #FFFFFFfont-weight: normal;background-image: url(images/home/gauche-fond-2.gif);margin: 0px;padding: 3px 0px 3px 15px;

}

/* Troisième bloc */

.gauche3 {font-family: Arial, Helvetica, sans-serif;font-size: 11px;font-weight: normal;background-image: url(images/home/gauche-fond-3.gif);margin: 0px;padding: 3px 0px 3px 15px;

}



/* Bloc 3, fond avec courbe */

.gauche-fin {font-family: Arial, Helvetica, sans-serif;font-size: 11px;color: #000000;font-weight: normal;background-image: url(images/home/gauche-fond-31.gif);margin: 0px;padding: 3px 0px 3px 15px;

}

/* Fond du dernier bloc */

.gauche-bas {background-image: url(images/home/gauche-bas.gif);

}

/* Dernier bloc - mise à jour, webmaster */

.mise-à-jour {font-family: Arial, Helvetica, sans-serif;font-size: 9px;color: #000000;margin-top: 3px;margin-left: 0px;margin-right: 14px;margin-bottom: 0px;text-align: right;

}

/* Menu de droite */

/* Premier bloc */

.droite1 {font-family: Arial, Helvetica, sans-serif;font-size: 10px;color: #000000;font-weight: normal;background-image: url(images/home/droite-fond-1.gif);margin: 0px;padding: 1px 0px 1px 10px;text-align: center;

}



/* Deuxième bloc */

.droite2 {font-family: Arial, Helvetica, sans-serif;font-size: 10px;color: #000000;font-weight: normal;background-image: url(images/home/droite-fond-2.gif);margin: 0px;padding: 1px 0px 1px 20px;

}

/* Troisième bloc */

.droite3 {font-family: Arial, Helvetica, sans-serif;font-size: 10px;color: #000000;font-weight: normal;background-image: url(images/home/droite-fond-3.gif);margin: 0px;padding: 1px 0px 1px 20px;

}

/* Ligne avec les champs de formulaire */

.droite-input {font-family: Arial, Helvetica, sans-serif;font-size: 11px;color: #FFFFFF;font-weight: bold;background-image: url(images/home/droite-fond-1.gif);margin: 0px;padding: 0px 0px 0px 20px;

}

.input {font-family: Arial, Helvetica, sans-serif;font-size: 10px;

}



/* Centre */

/* Titres de rubrique, H1, fond de couleur du span */

.actualites {background-color: #FE6612;float: left;

}

.manifestation { background-color: #66CCCC;

}

.reunions { background-color: #006633;

}

.presse { background-color: #666666;

}

.amicale {background-color: #990000;

}

/* Espacement du div du pavé central */

.centre {padding: 0px;margin: 10px 0px 0px 10px;

}



/* Texte de contenu */

.contenu {font-family: Arial, Helvetica, sans-serif;font-size: 12px;color: #000000;font-weight: normal;margin-right: 15px;

}

/* Texte à droite des images */

.image-texte {float: left;

}

li {clear:left;margin: 0px;

}

A.lien-souligne {color: #000000;text-decoration: underline;

}

A.lien-menu2 {font-family: Arial, Helvetica, sans-serif;font-size: 11px;color: #FFFFFF;

}

.fond-jaune { background-color: #FFCF00;

}



5. PAGES INTÉRIEURES

5.1 Découpage de la page en tableau

[Insérer un schéma avec les cotes (cotes à compléter sur le schéma ci-dessous) :]

[à compléter (modifier) :]

La page est constituée d'un tableau : (1) largeur du tableau : 760 pixels (2) hauteur du tableau : variable (3) remplissage des cellules : 0 pixels (4) espacement entre les cellules : 0 pixels

Le tableau est constitué des cellules suivantes : Entête de page :

(1) largeur : 760 pixels (5) hauteur : 68 pixels

Menu de gauche : (6) largeur : 181 pixels (7) hauteur : variable

Menu rubriques transverses : (8) largeur : 579 pixels (9) hauteur : 21 pixels

Partie contenu : (10) largeur : 579 pixels (11) hauteur : variable



5.2 Entête de page

[à modifier :]

Idem entête de la page d'accueil : voir § 3.3

5.3 Menu de gauche

[à modifier :]

Idem menu de gauche de la page d'accueil : voir § 3.4

5.4 Menu rubriques transverses

[à modifier :]

Idem menu rubriques transverses de la page d'accueil : voir § 3.5

5.5 Pages de texte standard

5.5.1 Copie d'écran

[insérer une copie d'écran d'une page de texte standard :]



5.5.2 Partie contenu

5.5.2.1 Menu de situation dans le site

[à modifier :]

Le menu de situation dans le site possède les caractéristiques suivantes : police : Arial (ou Helvetica ou sans-serif), taille de la police : 9 pixels, mise en forme : normal, couleur du texte : gris (#666666) , sauf pour le titre de la page en cours :

turquoise (#66CCCC) sur les pages des rubriques de la partie 1, vert émeraude (#006666) sur les pages des rubriques de la partie 2, vert pomme (#99CC33) sur les pages des rubriques de la partie 3,

alignement : gauche.

Les intitulés, écrits en minuscules sauf pour la première lettre, correspondent aux titres courts des pages ou des rubriques et sont séparés par le signe "strictement supérieur" (>) entouré d'un caractère d'espacement. Le menu de situation affiche, de gauche à droite, toutes les pages allant de la page d'accueil à la page courante comprises. Les titres des pages autres que la page courante sont affichés sous forme de liens vers ces pages.

5.5.2.2 Menu des pages sœurs (de même niveau)

[à modifier :]

Le menu des pages sœurs (de même niveau, d'une même sous rubrique, d'une même sous sous rubrique, ...) possède les caractéristiques suivantes : police : Arial (ou Helvetica ou sans-serif), taille de la police : 10 pixels, mise en forme : normal, couleur du texte : gris (#666666) , sauf pour le titre de la page en cours :

turquoise (#66CCCC) sur les pages des rubriques de la partie 1, vert émeraude (#006666) sur les pages des rubriques de la partie 2, vert pomme (#99CC33) sur les pages des rubriques de la partie 3,

alignement : gauche.

Les intitulés, écrits en minuscules sauf pour la première lettre, correspondent aux titres courts des pages ou des rubriques et sont séparés par une barre verticale (|) entourée d'un caractère d'espacement. Le menu de situation affiche, de gauche à droite, toutes les pages sœurs, toujours dans le même ordre sur toutes les pages ; le menu peut s'étendre sur plusieurs lignes si besoin. Les titres des pages autres que la page courante sont affichés sous forme de liens vers ces pages. Ce menu vient juste en dessous du précédent, sans saut de ligne entre.



5.5.2.3 Titre de la fenêtre

[à modifier :]

L'intitulé du titre de la fenêtre correspond au titre long de la page en cours.

5.5.2.4 Titre de la page

[à modifier :]

Le titre de la page (niveau 1 ou "h1") possède les caractéristiques suivantes : police : Verdana (ou Arial ou Helvetica ou sans-serif), taille de la police : 14 pixels, mise en forme : gras, couleur du texte : noire, alignement : centré.

Le titre de la page est le titre long, écrit en minuscules sauf pour la première lettre, centré sur la page et qui peut apparaître sur plusieurs lignes. Il vient juste en dessous du menu des pages sœurs ou du menu de situation dans le site, sans saut de ligne entre.

5.5.2.5 Paragraphe d'introduction

[à modifier :]

Le titre de la page possède les caractéristiques suivantes : police : Arial (ou Helvetica ou sans-serif), taille de la police : 10 pixels, mise en forme : gras, couleur du texte : vert émeraude (#006666), alignement : justifié.



5.5.2.6 Titre de paragraphe

[à modifier :]

Les titres de paragraphes (niveau 2 ou "h2") possèdent les caractéristiques suivantes : police : Verdana (ou Arial ou Helvetica ou sans-serif), taille de la police : 12 pixels, mise en forme : gras, couleur du texte : orange (#FF9933), alignement : gauche, image de fond : représentant un soulignement, de taille 16 x 1 pixels, répétée sur toute la

largeur de la page, de couleur : turquoise (#66CCCC) sur les pages des rubriques de la partie 1, vert émeraude (#006666) sur les pages des rubriques de la partie 2 , vert pomme (#99CC33) sur les pages des rubriques de la partie 3 :

5.5.2.7 Sous titre de paragraphe

[à compléter]

5.5.2.8 Sous sous titre de paragraphe

[à compléter]

5.5.2.9 Sous sous sous titre de paragraphe

[à compléter]

5.5.2.10 Texte de paragraphe

[à modifier :]

Le texte des paragraphes possède les caractéristiques suivantes : police : Arial (ou Helvetica ou sans-serif), taille de la police : 10 pixels, mise en forme : normal, couleur du texte : noire, marge de droite : 15 pixels.



5.5.2.11 Liens

[à compléter]

5.5.2.12 Images, photos, schémas

[à modifier :]

Les images possèdent les caractéristiques suivantes : taille : variable, limitée à ?? x ?? pixels, alignement : flottant à gauche (du texte) puis à droite de manière alternée de haut en bas

de la page, espacement avec le texte :

vertical : 3 pixels, horizontal : 5 pixels.

5.5.2.13 Légende des photos, schémas

[à compléter]

5.5.2.14 Liste à puces

[à compléter]

5.5.2.15 Liste numérotées

[à compléter]



5.5.2.16 Tableau

[à compléter :- entête- cellules simples- espacement- remplissage- bordure- etc.]

Les caractéristiques d'un tableau sont les suivantes : largeur : variable, largeur de la page conseillée (484 pixels, au maximum), alignement horizontal : centré, remplissage des cellules : ?? pixels, espacement entre les cellules : ?? pixels, bordure : 1 pixel, couleur de fond des cellules : blanc, couleur de la bordure : turquoise (#66CCCC), cellules d'entête ("th") :

police : Arial, taille de la police : 10 pixels, couleur de la police : noire, mise en forme de la police : gras, alignement :

vertical : centré, horizontal : centré,

cellules intérieures ("td") : police : Arial, taille de la police : 10 pixels, couleur de la police : noire, mise en forme de la police : normal, alignement :

vertical : centré, horizontal : gauche.



5.5.2.17 Formulaire

[à compléter et modifier : - champ texte- zone de texte- bouton radio- case à cocher- boutons- intitulés des champs- alignement des champs et de leurs intitulés]

Les intitulés des champs de coordonnées sont les suivants et apparaissent dans cet ordre : Civilité Nom Prénom Fonction Service Entité Unité Pôle Tél abrégé Tél Tél portable Fax Mél Adresse Code postal Ville Pays

Les champs obligatoires sont repérés par un astérisque.



L'alignement des intitulés des champs d'un formulaire se fait à gauche, comme l'alignement des champs eux-mêmes :

Les boutons de formulaires sont des images de la forme du parallélépipède que l'on trouve en page d'accueil, avec les caractéristiques suivantes : taille de l'image : ?? x ?? pixels, police : Arial, taille de la police : 12 pixels mise en forme de la police : gras et lissé, couleur de la police : blanche, couleur du fond : vert sapin (#006633).Un contour blanc de 2 pixels entoure le bloc au cas où celui-ci devrait être utilisé sur fond de couleur :



5.5.2.18 Liste de documents

[à compléter :]

Les listes de documents sont formatées dans un tableau avec les caractéristiques suivantes : … …

A chaque document de la liste correspond : une description (caractéristiques standard d'un texte de paragraphe), le nom du fichier correspondant sous forme de lien vers celui-ci (caractéristiques standard

d'un lien), dans la cellule du dessous, un pictogramme représentant le format du fichier, dans la case de droite :

de taille : ?? x ?? pixels, aligné verticalement : en haut, aligné horizontalement : au centre, avec comme texte alternatif "fichier FORMAT", où FORMAT est le format du fichier,

la date de dernière mise en ligne sous le format : jj/mm/aaaa, où jj est le jour sur deux chiffres, mm le mois et aaaa l'année sur 4 chiffres.

Une ligne sépare chaque ligne de document ; elle possède les caractéristiques suivantes : … …



5.5.2.19 Trombinoscope

[à compléter]

Les noms et photos du trombinoscope sont présentés sur 3 colonnes, dans la largeur de la partie contenu. Ils sont formatés dans un tableau avec les caractéristiques suivantes : [à compléter] …

5.5.2.20 Pied de page

[à compléter]

Le pied de page est constitué d'un filet gris, sous lequel apparaissent des informations sur la page : date de mise à jour, auteur de la page, informations légales.

Le filet est une image de 1 pixel de côté étendue à une taille de 484 x 1 pixels, de couleur grise (#666666).

Pour le texte, les caractéristiques sont les suivantes : police : Arial, taille de la police : 9 pixels, couleur de la police : grise (#666666), alignement horizontal : centré.

Le texte apparaît sur la ligne juste en dessous du filet, sans espacement supplémentaire.


maquette de document norme aermc · web viewhaut de 7 pixels, sauf pour la case de l'onglet...

Documents