Exportation de contenu au format HTML | CS6 et CS5.5

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 sont également exportés ; toutefois, certaines mises en forme, telles que les contours de tableau et de cellule, ne le sont pas. 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 n’exporte pas les objets que vous avez dessinés (rectangles, ellipses et polygones), 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 objets collés (notamment les images copiées d’Illustrator), le texte vectorisé, 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 (sauf s’ils ont été remplacés ou sélectionnés avant l’exportation).

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.

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

Options générales

La zone Général inclut les options suivantes.

Vous pouvez choisir d’exporter le document entier ou seulement certains éléments sélectionnés. Si un bloc de texte est sélectionné, la totalité de l’article (y compris l’éventuel texte en excès) est exportée.

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 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 seulement) Si vous choisissez l’option D’après la mise en page, InDesign détermine l’ordre de lecture des objets de page en fonction de la liaison du document (de gauche à droite ou de droite à gauche). Dans certains cas, et spécialement dans les documents complexes comprenant plusieurs colonnes, les éléments de conception exportés 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.

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é, il vous suffit de faire glisser les balises dans le panneau Structure XML pour définir l’ordre d’exportation XHTML. Dans le cas d’un contenu sans balises, vous pouvez choisir la commande Ajouter les éléments sans balise dans le menu du panneau Structure afin de générer des balises que vous pourrez ensuite réorganiser. Si vous voulez exclure un élément de l’exportation, il vous suffit de supprimer la balise correspondante 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).

Définissez une marge simple en ems ou en pixels. Les marges exprimées en ems sont particulièrement indiquées pour la compatibilité multiécran. La même valeur est appliquée à toutes les marges : supérieure, inférieure, gauche et droite.

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

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

Convertit les listes numérotées en éléments de liste, mis au format HTML à l’aide de la balise <ol>.

Convertit les listes numérotées en éléments de liste et affecte un attribut <value> basé sur le numéro en cours du paragraphe dans InDesign.

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.

Options d’image

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

Exporte l’image d’origine vers le sous-dossier « <nom_document>-web-images ». Lorsque cette option est sélectionnée, toutes les autres options sont grisées.

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

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.

Spécifiez 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 spécifier une valeur exprimée en 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 à la page. Si vous optez pour une taille adaptée au format de page, une valeur relative exprimée en pourcentage est définie en fonction de la taille de l’image par rapport à la largeur de page InDesign. Les images sont ainsi redimensionnées proportionnellement, par rapport à la largeur de la surface de lecture.

Spécifiez l’alignement de l’image à gauche, au centre et à droite, ainsi que l’espace avant et après.

Cochez cette case pour appliquer ces paramètres à tous les objets ancrés.

Choisissez GIF, JPEG ou PNG pour la conversion des images optimisées dans votre document. Choisissez Automatique pour laisser InDesign décider quel format utiliser dans chaque instance. L’option PNG désactive les paramètres de compression de l’image. L’option PNG convient aux images sans perte de données et aux images contenant 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 Adaptative pour créer une palette utilisant un échantillon représentatif de couleurs dans l’illustration sans aucun tramage (mélange de quelques tons 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 intégrée de Windows ou de Mac OS. Ce choix peut donner des résultats inattendus.

Sélectionnez Entrelacement pour charger progressivement les images par remplissage des 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 de plus en plus de détails à mesure qu’elles sont téléchargées. 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 une fois téléchargé seulement ; une marque de réservation 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).

Options avancées

Utilisez la zone Avancé pour définir les options CSS et JavaScript.

Les feuilles de style CSS (Cascading Style Sheets) regroupent des règles de mise en forme qui définissent l’apparence du contenu dans une page web. Lorsque vous utilisez des 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.

Lorsque vous exportez au format XHTML, vous pouvez créer une liste de styles CSS apparaissant dans la section de titre du fichier HTML avec des déclarations (attributs).

Si l’option Inclure les définitions de style est sélectionnée, InDesign tente de faire correspondre les attributs de mise en forme de texte InDesign à leurs équivalents CSS. Si cette option est désélectionnée, le fichier HTML comporte des déclarations vides. Vous pouvez modifier ces déclarations ultérieurement dans Dreamweaver.

Si l’option Conserver les remplacements locaux est sélectionnée, la mise en forme locale (italique ou gras, par exemple) est incluse.

Cette option permet d’omettre la section CSS dans un fichier HTML.

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 ni l’existence ni la validité de la feuille de style CSS. Il est donc recommandé d’utiliser Dreamweaver pour confirmer la définition d’une feuille de style CSS externe.

Spécifiez la CSS à l’aide du bouton Ajouter une feuille de style.

Sélectionnez Lier au JavaScript externe pour exécuter un script JavaScript lorsque la page HTML est ouverte. Spécifiez l’URL du script JavaScript, qui est généralement une URL parente. InDesign ne vérifie ni l’existence ni la validité du script JavaScript.

Autres ressources similaires

Créez et publiez des ebooks, des brochures, des prospectus, des cartes postales, des affiches, des mises en page interactives et plus encore avec Adobe InDesign.