Ne jamais coller directement dans Expression Web 4, coller en passant par le bloc-notes (enlève la mise en forme qui donnerait du "junk code", on ne pourrait plus appliquer des styles)

Début de fichier :

!DOCTYPE html html head titleTitre de la page/title link href="../css/FeuillleDeStyle.css" rel="stylesheet" type="text/css" /head body

• Styles :

  à l'écran	code html
  normal	<p>
  normal.Titre	<p class="Titre">
  Titre1	<h1>
  Titre2	<h2>
  Titre3	<h3>
  liste à puce	<li>
  normal.centré	<p class="Centre"> remplace <p class="Centré">
  .Terme (glossaire)	<p class= "terme">
  Definition (glossaire)	<p class= "definition">
  normal.loi	<p class= "loi">
  normal.version	<p class= "version"> : italique, aligné à droite

 

• ul, /ul : début et fin de liste à puce (à ne pas mettre dans un p et vice-versa),
• li, /li : début et fin de ligne de liste (ne doit pas contenir de p),
• ol : liste numérotée,
• Chacun des manuels possède une feuille de style qui permet de créer des pages homogènes dans ce manuel
  • Toutes les feuilles de style regroupées dans le sous-répertoire racine "css". Par exemple : La feuille de style du manuel de recherche biomédicale s'appelle : style_RC1.css pour les pages de procédures, style_SR_RC1.css pour les synthèses de référence
  • si d'autres styles sont nécessaires, l'appellation du style ne doit pas comporter de caractères accentués ou spéciaux,
• pour insérer un tableau non visible : mettre propriétés du tableau:
  • border=0,
  • margin=0,
  • padding = 0,
• bloc de texte
• Rangement des fichiers
• Convention de nommage des fichiers (identification et rangement)
• Liens hypertextes
• Styles repliables

Pour changer de feuille de style, faire "Format", "Styles CSS" ("CSS Styles"), "Attacher une feuille de style" ("Attach Style Sheet")...

• sélectionner le(s) mot(s) à lier et faire Ctrl+K ou cliquer sur "lien hypertexte" de la barre d'outils
• Liens internes :
  • Pointent vers un fichier ou une page du même site
  • Toujours mettre des liens relatifs (pas de http://, File://,ou U://... dans l'adresse)
• Liens externes :
  • Utiliser la notation absolue : Protocole://serveur/Dossier/Fichier.ext
  • Par ex. : https://intranet-ma.sunnikan.com/11_Formation/Rediger_01_ExpressionWeb.htm
• faire le lien sur le mot ou la phrase sans dépasser avant ou après (sur un espace ou une virgule)

• Le signet permet au lien hypertexte de relier un texte de départ directement à un texte d'arrivée précis (exemple: lien entre la référence BPC ICH dans une SR au paragraphe précis du document BPC ICH).
• Pour créer un signet : sélectionner un ou plusieurs éléments de texte (lettre, chiffre, espace...) dans le texte d'arrivée (en général un titre), et insérer un signet (lui donner un titre clair).
• Puis créer un lien hypertexte (cf. ci-dessus): lors de la sélection du fichier, choisir le signet voulu (dans "facultatif", "signet": liste déroulante de l'ensemble des signets du fichier. Cette liste n'est opérationnelle que si le document en question est ouvert)

• Le lien dynamique permet lorsqu'on actualise une information à un endroit, que celle-ci soit mise à jour au niveau à tous les endroits où le lien est présent.
• Pour créer un lien dynamique entre une définition présente dans le glossaire et dans une ST :
  • Intégrer en haut de la page ST le script suivant : script src="../css/jquery-3.0.0.js"/script
  • Intégrer la définition : div id="Def_***"/div
  • Intégrer le script : script$( "#Def_***" ).load( "Glossaire_RB_Fr.htm #***" );/script

 "***" correspond à la définition à intégrer, attention le nom doit être le même entre la ST et le glossaire

• Il faut également laisser un lien classique vers le glossaire pour une utilisation hors connexion
• Un exemple de lien dynamique est disponible sur Expression Web dans le dossier "RechBiom" puis "0_Modele_RB.htm" et enfin "brochure de l'Investigateur"

• Toujours travailler en https:// +++++
• Structuration du répertoire : tous les fichiers correspondant à un thème dans le même répertoire (ex Recherche Biomédicale), ou dans des sous répertoires si nécessaire.
• Les images communes aux différents sous-répertoires (ex : puces, drapeaux...) sont centralisées dans le sous-répertoire "images"
• Les feuilles de style sont centralisées dans le sous-répertoire "css"

• sélectionner et copier le texte dans le document d'origine (ne pas traduire)
• coller le texte dans un fichier "Bloc Notes / Note Pad" (ceci permet de standardiser le style utilisé)
• sélection et copier le texte dans le fichier "Bloc Notes /Note Pad"
• coller le texte dans le document SUNNIKAN, le style du document s'applique au texte.
• mettre les citations entre guillemets et en italique, et citer la référence entre parenthèses

Après le titre de la page figure la dernière mise à jour de la page dans Expression Web 4 :

Mise à jour le 05 juin 2024 (GM)

• indiquer la mention suivante : "Mise à jour le [date automatique] (insertion date de dernière modification) puis ajouter les initiales de l'auteur entre (). Cette mention est en style : Normal.version (p class="Version")

• Les mires graphiques facilitent la navigation et servent de pages d'accueil aux manuels. Permettent l'accès en deux clicks (deux liens) à la procédure ou au texte (troisième page)
• Les mires graphique sont composées :
  • d'une image : fichier .png (taille max : 800x600 px) créé à partir d'un logiciel d'édition vectoriel, comme Fireworks ou Visio.
  • d'une mire d'accueil : fichier .htm affichant l'image et lui définissant les zones réactives (sous ExpressionWeb : barre d'outil dessin et zone réactive)
• Chaque manuel comprend une Mire d'accueil principale comprenant sur chacune de ses pages les mires graphiques.