Exportation de contenu au format HTML

L’exportation au format HTML constitue un moyen simple de mettre en forme votre contenu InDesign pour le web. Lorsque vous exportez du contenu au format HTML, vous pouvez contrôler la manière dont le texte et les images sont exportés. InDesign conserve les noms des styles de paragraphe, caractère, objet, tableau et cellule appliqués aux contenus exportés en marquant les contenus HTML avec les classes de styles CSS du même nom. Grâce à Adobe Dreamweaver ou tout autre éditeur HTML compatible avec les feuilles de style en cascade (CSS), vous pouvez sans difficulté appliquer des mises en forme et des mises en page aux contenus.

InDesign exporte tous les articles, les graphiques liés et incorporés, les séquences vidéo SWF, les notes de bas de page, les variables de texte (au format texte), les listes à puces et numérotées, les références croisées internes, ainsi que les hyperliens renvoyant à du texte ou à des pages Web. Les tableaux peuvent également être exportés au format HTML. InDesign conserve la mise en forme des tableaux, tel que le contour du tableau et des contours. Des identifiants uniques sont attribués aux tableaux afin que ces derniers puissent être référencés comme jeux de données Spry dans Dreamweaver. Les fichiers audio et vidéo h.264 importés sont placés à l’intérieur de balises HTML5 <audio> et <video>. InDesign exporte également les objets dessinés (tels que les rectangles, les ovales et les polygones), les objets collés (et notamment les images d’Illustrator collées) et le texte vectorisé.

Eléments non exportés

InDesign n’exporte pas les hyperliens (à part les liens renvoyant à des pages Web et ceux appliqués à du texte renvoyant à des points d’ancrage de texte au sein du même document), les balises XML, les livres, les signets, les glyphlets SING, les transitions de page, les marques d’index, les objets de la table de montage qui ne sont pas sélectionnés et qui ne touchent pas la page ni les éléments du gabarit de page (sauf s’ils ont été remplacés ou sélectionnés avant l’exportation).

Exportation au format HTML

Un document portant le nom spécifié et une extension .html (« bulletin.html », par exemple) est créé ; le cas échéant, un sous-dossier d’images web (« images-bulletins-web ») est enregistré au même endroit.

Options d’exportation HTML

Dans la boîte de dialogue HTML, spécifiez les options suivantes.

Général

Vous pouvez choisir d’exporter le document entier ou seulement certains éléments sélectionnés. Si un bloc de texte est sélectionné, l’intégralité de l’article contenant le texte en excès est exporté.

Si le document est sélectionné, tous les éléments de page de toutes les planches sont exportés, sauf les éléments de gabarit qui n’ont pas été substitués et les éléments de page sur des calques invisibles. Les balises XML, ainsi que les index et tables des matières générés sont également ignorés.

Vous pouvez spécifier l’ordre de lecture des objets de la page.

D’après la mise en page : la position des éléments sur la page détermine l’ordre de lecture.

Si vous choisissez l’option D’après la mise en page, InDesign détermine l’ordre de lecture des objets de la page en analysant celle-ci de gauche à droite et de haut en bas. Dans certains cas, et spécialement dans les documents complexes comprenant plusieurs colonnes, les éléments de conception sont susceptibles de ne pas apparaître dans l’ordre de lecture souhaité. Réorganisez et mettez en forme le contenu à l’aide de Dreamweaver.

(Versions asiatiques uniquement) Si vous sélectionnez D’après la mise en page, InDesign détermine la lecture des objets de la page en fonction de la reliure du document (de gauche à droite ou de droite à gauche).

Identique à la structure XML : si vous choisissez l’option Identique à la structure XML, l’ordre du contenu exporté, ainsi que les éléments exportés, sont gérés au moyen du panneau Structure XML. Si le contenu est déjà balisé, vous pouvez simplement faire glisser les balises dans le panneau Structure XML pour définir l’ordre d’exportation XHTML. Si le contenu n’est pas balisé, vous pouvez choisir Ajouter les éléments sans balise dans le menu du panneau Structure pour générer des balises que vous pouvez réorganiser. Si vous souhaitez exclure un élément de l’exportation, supprimez simplement sa balise dans le panneau Structure XML. (La suppression d’une balise n’entraîne pas la suppression du contenu du fichier INDD.) Voir la section Balisage d’éléments de page.

Identique au panneau Articles : l’ordre des éléments dans le panneau Articles détermine l’ordre de lecture. Seuls les articles cochés sont exportés. Voir la section Inclusion d’articles pour l’exportation.

Sélectionnez les options de mise en forme pour les puces et la numérotation.

Puces : sélectionnez Faire correspondre à une liste non triée pour convertir les paragraphes à puces en éléments de liste au format HTML en utilisant la balise. Sélectionnez l’option Convertir en texte pour mettre en forme en utilisant la balise avec des puces de format texte. Si vous avez utilisé les puces automatiques InDesign natives, les puces de deuxième niveau (ou sous-puces) sont également incluses.

Nombres : détermine la façon dont les nombres sont convertis dans le fichier HTML. Si vous avez utilisé la numérotation automatique InDesign native, les puces de deuxième niveau (ou sous-puces) sont également incluses.

●  Faire correspondre à des listes triées : convertit les listes numérotées en éléments de liste, qui sont convertis au format HTML à l’aide de la balise.

●  Convertir en texte : convertit les listes numérotées en paragraphes commençant par le numéro en cours du paragraphe au format texte.

Démarre le navigateur, si celui-ci est présent.

Image

Spécifie la manière dont les images sont exportées au format HTML.

Original : exporte l’image d’origine vers le sous-dossier « <nom_document>-web-images ». 

Optimisé : vous permet de modifier les paramètres pour déterminer comment l’image est exportée.

Lier au chemin du serveur : plutôt que d’exporter des images vers un sous-dossier, cette option vous permet de saisir une URL locale (telle que « images/ ») qui apparaît devant le fichier image. Dans le code HTML, l’attribut de lien affiche le chemin et l’extension que vous avez spécifiés. Cette option est particulièrement efficace lorsque vous convertissez vous-même des images en images compatibles web.

Cochez cette case pour réutiliser les attributs des objets d’image de la mise en page.

Choisissez la résolution des images en pixels par pouce (ppp). Tandis que les systèmes d’exploitation ont adopté une résolution standard de 72 ppp ou 96 ppp, la résolution des terminaux mobiles varie de 132 ppp (iPad) à 172 ppp (Sony Reader), voire même plus de 300 ppp (iPhone 4). Vous pouvez choisir une valeur ppp pour chaque objet sélectionné, parmi lesquelles 72, 96, 150 (moyenne pour tous les lecteurs électroniques du moment) et 300.

Indiquez si l’image doit conserver une taille fixe ou être redimensionnée par rapport au texte de la page. L’option Selon la répartition du texte définit un poucentage relatif d’après le flux de texte par rapport à la largeur de la page InDesign. Les images sont ainsi redimensionnées proportionnellement, par rapport au texte dans la surface de lecture.

Spécifiez l’alignement d’image : gauche, centre et droite. Vous pouvez également spécifier le remplissage en haut et en bas.

Choisissez GIF, JPEG ou PNG pour la conversion des images optimisées dans votre document. Choisissez Automatique pour laisser InDesign déterminer le format à utiliser dans chaque cas. Si vous choisissez PNG, vous désactivez les paramètres de compression d’image.; utilisez PNG pour les images sans perte de données ou qui contiennent des objets transparents.

cette option vous permet de contrôler la façon dont InDesign gère les couleurs lors de l’optimisation des fichiers GIF. Le format GIF utilise une palette de couleurs limitée, qui ne doit pas contenir plus de 256 couleurs. Choisissez l’option Adaptative (sans simulation) pour créer une palette utilisant un échantillon représentatif de couleurs dans l’illustration sans aucun tramage (mélange de petits points de couleurs pour simuler des couleurs supplémentaires). Choisissez l’option Web pour créer une palette de couleurs web (ces couleurs sont un sous-ensemble des couleurs système Windows et Mac OS). Choisissez Système (Win) ou Système (Mac) pour créer une palette utilisant la palette de couleurs système intégrée. Ce choix peut donner des résultats inattendus.

Sélectionnez Entrelacement pour charger les images progressivement en remplissant les lignes manquantes. Lorsque cette option est désélectionnée, l’image paraît floue, puis elle devient plus nette au fur à et mesure qu’elle approche de sa résolution maximale.

Permet de choisir entre une compression (et une taille de fichier réduite) et une haute qualité d’image pour chaque image JPEG. L’option Faible génère le plus petit fichier et la qualité d’image la plus faible.

Permet de déterminer la vitesse d’affichage des images JPEG à l’ouverture du fichier contenant l’image sur le web. Choisissez Progressive pour que les images JPEG s’affichent graduellement avec un nombre croissant de détails lors de leur téléchargement. Les fichiers créés avec cette option sont légèrement plus volumineux et utilisent davantage de RAM à l’affichage. Choisissez Ligne de base pour que le fichier JPEG s’affiche uniquement après qu’il a été téléchargé ; un espace réservé apparaît à la place de l’image avant son affichage.

cette option permet de passer outre les options d’exportation d’objet appliquées individuellement aux images. Voir la section Application d’options d’exportation d’objet.

Avancé

Utilisez la zone Avancé pour définir les options de feuille de style CSS et JavaScript. Les feuilles de style CSS (Cascading Style Sheets) regroupent des règles de mise en forme qui définissent l’affichage du contenu dans une page Web. Lorsque vous utilisez CSS pour mettre en forme une page, vous séparez le contenu de sa présentation. Le contenu de votre page (c’est-à-dire le code HTML) réside dans le fichier HTML, tandis que les règles CSS définissant la présentation du code résident dans un autre fichier (fichier CSS externe) ou dans le document HTML (généralement dans la section de titre). Par exemple, vous pouvez spécifier différentes tailles de polices pour le texte sélectionné et vous pouvez utiliser CSS pour contrôler la mise en forme et le positionnement des éléments de niveau bloc dans une page web.

sélectionnez cette option si vous ne souhaitez pas inclure de catégories dans le fichier HTML. Elle supprime les attributs de classe et d’ID présents dans la balise pendant l’exportation HTML. Toute balise div redondante présente dans le fichier HTML est également supprimée.

Sélectionnez cette option pour inclure les catégories dans le fichier HTML.

Générer des CSS : indiquez si vous souhaitez qu’InDesign génère un fichier CSS pour le fichier exporté. Si vous sélectionnez l’option Générer des CSS, vous pouvez également sélectionner l’option Conserver les remplacements locaux pour inclure la mise en forme locale (italique ou gras, par exemple).

Conserver les remplacements locaux : incluez la mise en forme locale (italique ou gras par exemple).

Spécifiez l’URL de la feuille de style CSS existante, qui est généralement une URL relative, telle que « /styles/style.css ». InDesign ne vérifie pas si la feuille de style CSS existe ou est valide. Vous pouvez utiliser Dreamweaver pour confirmer la configuration CSS externe.

Sélectionnez Ajouter un script pour exécuter un script JavaScript à l’ouverture de la page HTML. InDesign ne vérifie ni l’existence ni la validité du script JavaScript.