Téléverser DOCX

Téléverser un fichier Word pour le convertir en HTML pour Canada.ca:

Instructions

Sur cette page

Étape 1: utiliser le gabarit Word

Utilisez ce gabarit MS Word :

Télécharger le gabarit MS Word

Dans votre document Word, allez dans Fichier > Options, et sélectionnez Compléments. En bas, allez dans Gérer, sélectionnez Modèles, et cliquez sur Aller. Cliquez sur Joindre et sélectionnez le modèle que vous avez téléchargé. Cochez "Mettre à jour automatiquement les styles du document". Cliquez sur OK.

Vous pouvez également partir d'un de ces exemples de documents :

Exemples de documents

Étape 2 : appliquer les styles Word

Les styles de base (titres, listes à puces, gras, italique, etc.) fonctionneront sans problème et seront transformés en éléments HTML appropriés. Certains styles personnalisés ont été ajoutés (disponibles dans le ruban styles).

Afficher-masquer
  • Appliquez le style "summary" à la partie visible de l'élément afficher-masquer.
  • Utilisez n'importe quel style pour la partie du contenu qui est cachée
  • Après la partie cachée, ajoutez le mot "end" (sans majuscules, sans gras, rien), et appliquez le style "details" à ce mot. Cela indiquera au script quand fermer la balise HTML "details".
Alertes

Les alertes ont besoin d'un titre. Appliquez le bon style d'alerte à l'en-tête (alert-info, alert-warning, alert-danger, etc.), et appliquez "alert-text" au texte de l'alerte.

Boîte grise (wells)
  • Appliquez le style "well" au paragraphe que vous voulez dans une nouvelle boîte grise (well).
  • Appliquez le style "well-paragraph" à un nouveau paragraphe que vous voulez dans cette même boîte grise
  • Appliquez le style "well-bullet" à un nouvel item de liste à puces que vous voulez dans cette même boîte grise
Boutons

Appliquez le bon style de bouton au texte (btn-cta, btn-danger, btn-primaire, etc.). Veillez à ajouter un lien hypertexte au texte du bouton.

Citations
  • Appliquez le style "quote" au premier paragraphe que vous voulez voir apparaître comme citation
  • Appliquez le style "quote-par" pour un autre paragraphe que vous voulez apparaître dans la même citation
  • Appliquez le style "quote-source" pour indiquer la source de la citation (facultatif)
Étiquettes

Appliquez le bon style d'étiquette au texte (label-danger, label-default, label-info, label-primary, etc.).

Liens internes

Le script peut gérer les liens internes et créer des ancres automatiquement.

  • Dans Word, mettez en surbrillance le texte auquel vous souhaitez ajouter un lien hypertexte.
  • Insérez un hyperlien.
  • Choisissez "Emplacements dans le document".”
  • Sélectionnez l'en-tête vers lequel vous voulez que le lien se dirige.
Navigation multi-pages
  • Avant les items de navigation, ajoutez le mot "start" (pas de majuscules, pas de gras, rien), et appliquez le style "multi-pate-start" à ce mot.
  • Appliquez le style "multi-page-active" à l'item de navigation de la page sur laquelle vous vous trouvez.
  • Appliquez le style "multi-page-item" à tous les autres items de navigation.
  • Après les éléments de navigation, ajoutez le mot "end" (pas de majuscules, pas de gras, rien), et appliquez le style "multi-page-end" à ce mot.
Liste numérotée

Appliquez le style "numbered" aux éléments de la liste numérotée.

Navigation de style métro
  • Appliquez le style "subway-group-h1" au nom du groupe de pages (en tant que tout premier élément de votre document Word).
  • Appliquez le style "subway-nav-active" à l'item de navigation de la page sur laquelle vous vous trouvez.
  • Appliquez le style "subway-nav" à tous les autres items de navigation.
  • Appliquez le style "subway-section-h1" à la section H1 de la page sur laquelle vous vous trouvez (juste après la liste des items de navigation).
Panneaux

Les panneaux ont besoin d'un titre. Appliquez le bon style de panneau à l'en-tête (panel-default, panel-warning, panel-danger, etc.), et appliquez "panel-text" au texte du panneau.

Les panneaux ont besoin d'un en-tête pour fonctionner correctement.

  • Appliquez le bon style de panneau à l'en-tête (panel-default, panel-warning, panel-danger, etc.)
  • Appliquez "panel-text" au texte du panneau.
  • Appliquez "panel-bullet" à un élément d'une liste à puce dans le panneau.

Étape 3 : téléverser documents Word

Aller à Téléverser DOCX, puis cliquez sur Téléverser un fichier DOCX.

Étape 4: utiliser le code dans des prototypes

Le script génère 2 extraits de code : le code pour la page complète (que vous pouvez copier dans GitHub, par exemple), et le code pour la section principale (que vous pouvez copier dans AEM, par exemple).

Code pour la page complète

Code pour AEM