Esportare i contenuti in formato HTML | CS6 e CS5.5

L’esportazione in formato HTML consente di convertire facilmente i contenuti di InDesign in un formato per il Web. Quando esportate i contenuti in HTML potete specificare come esportare il testo e le immagini. InDesign conserva i nomi degli stili di paragrafi, caratteri, oggetti, tabelle e celle applicati ai contenuti esportati contrassegnando il contenuto HTML con le classi di stili CSS aventi lo stesso nome. Utilizzando Adobe Dreamweaver o un altro editor HTML compatibile con CSS potete rapidamente applicare ai contenuti formattazione e layout.

InDesign esporta tutti i brani, i collegamenti e la grafica incorporata, i file filmati SWF, le note a piè di pagina, le variabili di testo (come testo), gli elenchi puntati e numerati, i rimandi interni e i collegamenti ipertestuali che consentono di passare al testo o a pagine Web. Anche le tabelle possono essere esportate, anche se prive di alcuni elementi di formattazione come le tracce per tabelle o celle. Alle tabelle vengono assegnati numeri ID univoci che possono essere usati in Dreamweaver come riferimenti per set di dati Spry. I file audio e video h.264 inseriti vengono racchiusi tra i tag HTML5 <audio> e <video>.

InDesign non esporta oggetti disegnati manualmente (come rettangoli, ovali e poligoni), collegamenti ipertestuali (tranne i collegamenti a pagine Web e collegamenti applicati al testo per passare ad ancoraggi di testo nello stesso documento), oggetti incollati (incluse immagini di Illustrator incollate), testo convertito in profili di testo, tag XML, libri, segnalibri, glyphlet SING, transizioni di pagina, indicatori di indice, oggetti sul tavolo di montaggio non selezionati e che non tocchino la pagina, oppure elementi di pagine principali (tranne se disattivati o selezionati prima dell’esportazione).

Viene creato un documento con il nome specificato e l’estensione .html (ad esempio “notiziario.html”); inoltre, se specificata, viene creata una sottocartella di immagini Web.

Nella finestra di dialogo HTML, specificate le seguenti opzioni.

Opzioni generali

L’area Generali include le seguenti opzioni.

determina se devono essere esportati solo gli elementi selezionati o l’intero documento. Se è stata selezionata una cornice di testo, viene esportato l’intero brano, compreso il testo non inserito.

Se viene selezionato il documento, vengono esportati tutti gli elementi su tutte le pagine affiancate, ad eccezione degli elementi della pagina principale che non sono stati modificati localmente e gli elementi della pagina su livelli invisibili. Vengono anche ignorati i tag XML, nonché indici e sommari generati.

consente di specificare l’ordine di lettura degli oggetti presenti sulle pagine.

In base a layout pagina

La posizione degli elementi sulla pagina determina l’ordine di lettura,

Se selezionate Basa su layout di pagina, l’ordine di lettura degli oggetti sulle pagine viene determinato da sinistra a destra e dall’alto al basso. In alcune occasioni, specialmente nel caso di documenti complessi a più colonne, gli elementi di design possono non apparire nell’ordine desiderato. Utilizzate Dreamweaver per ridisporre e formattare i contenuti.

(Solo per le versioni asiatiche) Se l’opzione In base a layout pagina è selezionata, InDesign determina l’ordine di lettura degli oggetti della pagina in base alla rilegatura del documento (da sinistra a destra o a destra a sinistra). In alcuni casi, in particolare in documenti complessi con più colonne, gli elementi di design esportati potrebbero non risultare nell’ordine di lettura corretto. Utilizzate Dreamweaver per ridisporre e formattare i contenuti.

Come struttura XML

Se selezionate Come struttura XML, i contenuti da esportare e il relativo ordine sono determinati dal pannello Struttura XML. Se al contenuto sono già stati assegnati i tag, potete impostare l’ordine di esportazione XHTML trascinando i tag nel pannello Struttura XML. Se al contenuto non sono stati assegnati i tag, potete scegliere Aggiungi elementi senza tag dal menu del pannello Struttura per generare i tag che potrete poi riordinare. Per escludere un elemento dall’esportazione, è sufficiente eliminarne il tag nel pannello Struttura XML. (Quando si elimina un tag, il contenuto corrispondente non viene eliminato dal file INDD.) Consultate Applicare i tag agli elementi di pagina.

Come pannello Articoli

L’ordine degli elementi nel pannello Articoli determina l’ordine di lettura. Vengono esportati solo gli articoli selezionati. Consultate Includere gli articoli per l’esportazione.

Specificate un margine semplice in unità di misura em o pixel. Specificando i margini in em otterrete una maggior compatibilità con più schermi. Lo stesso valore viene applicato a tutti i margini: superiore, inferiore, sinistro e destro.

Selezionate Mappa su elenchi non ordinati per convertire i paragrafi punti elenco in voci di elenco, formattate in HTML usando il tag <ul>. Selezionate Converti in testo per formattare usando il tag <p> con caratteri punto elenco come testo. Se sono stati usati gli elenchi puntati automatici nativi di InDesign, vengono inclusi anche eventuali sottoelenchi.

Determina il modo in cui i numeri vengono convertiti nel file HTML. Se sono stati usati gli elenchi numerati automatici nativi di InDesign, vengono inclusi anche eventuali sottoelenchi.

Converte gli elenchi numerati in voci di elenco, che vengono formattate in HTML usando il tag <ol>.

Converte gli elenchi numerati in voci di elenco, ma assegna un attributo <value> basato sul numero di paragrafo corrente in InDesign.

Converte gli elenchi numerati in paragrafi che iniziano con il numero di paragrafo corrente come testo.

Avvia il browser (se presente nel sistema in uso).

Opzioni Immagine

specificate il modo in cui le immagini devono essere esportate in formato HTML.

Esporta l’immagine originale nella sottocartella “<nome_documento>-web-images”. Quando è selezionata questa opzione, tutte le altre opzioni non sono selezionabili.

Consente di cambiare le impostazioni per determinare come esportare l’immagine.

Invece di esportare le immagini in una cartella, questa opzioni consente di immettere un URL locale (ad esempio “immagini/”) che appare davanti al file immagine. Nel codice HTML, l’attributo di collegamento mostra il percorso e l’estensione che specificate. Questa opzione funziona particolarmente bene per la conversione delle immagini in immagini compatibili per il Web.

Selezionate questa opzione per conservare gli attributi dell’oggetto immagine dal layout.

Specificate la risoluzione delle immagini in pixel per pollice (ppi). Mentre i sistemi operativi sono standardizzati su 72 ppi o 96 ppi, i dispositivi mobili variano da 132 ppi (iPad), a 172 ppi (Sony Reader), a oltre 300 ppi (iPhone 4). Potete specificare un valore ppi per ogni oggetto selezionato. I valori includono 72, 96, 150 (valore medio per tutti i dispositivi ebook attuali) e 300.

Specificate se le dimensioni immagine devono restare fisse o se devono essere ridimensionate in base alla pagina. Se scegliete dimensioni relative alle dimensioni pagina, impostate un valore di percentuale relativo, basato sulle dimensioni dell’immagine rispetto alla larghezza della pagina InDesign. Le immagini verranno scalate in proporzione, relativamente alla larghezza dell’area di lettura.

Specificate l’allineamento delle immagini (a sinistra, al centro, a destra) nonché lo spazio da lasciare prima e dopo le immagini.

Selezionate questa opzione per applicare le impostazioni a tutti gli oggetti ancorati.

Consente di scegliere se le immagini ottimizzate nel documento vengono convertite in GIF, JPEG o PNG. Scegliete Automatica per fare sì che InDesign decida il formato da usare per ogni occorrenza. Con la conversione PNG vengono disattivate le impostazioni di compressione immagine. Usate PNG per le immagini senza perdita o per quelle che includono trasparenza.

Consente di stabilire il modo in cui InDesign gestirà i colori per ottimizzare i file GIF. Il formato GIF usa una palette di colori limitata che non può contenere più di 256 colori.

Scegliete Adattata per creare una palette rappresentativa dei colori della grafica senza dithering, cioè senza miscelare piccoli punti di colore per simulare i colori aggiuntivi. Scegliete Web per creare una palette di colori sicuri per il Web, che rappresentano un sottoinsieme dei colori di sistema di Windows Mac OS. Scegliete Sistema (Win) o Sistema (Mac) per creare una palette basata sulla palette dei colori di sistema incorporata. Questa operazione può produrre risultati imprevisti.

Selezionate Interlaccia per caricare le immagini progressivamente riempiendo le righe mancanti. Se questa opzione non è selezionata, l’immagine appare inizialmente sfocata e diventa gradualmente più nitida mano a mano che si avvicina alla risoluzione completa.

Consente di trovare un compromesso ottimale tra compressione (per ridurre le dimensioni dei file) e qualità dell’immagine per ogni immagine JPEG creata. Un valore basso produce dimensioni minime del file e bassa qualità dell’immagine.

Consente di determinare la velocità con cui vengono visualizzate le immagini JPEG quando il file che le contiene viene aperto sul Web. Scegliete Progressivo per far sì che le immagini JPEG vengano visualizzate gradualmente, con sempre maggiori dettagli, mentre vengono scaricate. I file creati con questa opzione sono leggermente più grandi e richiedono più RAM per la visualizzazione. Scegliete Linea di base per visualizzare il file JPEG solo al termine del download; al posto dell’immagine appare un segnaposto finché non appare l’immagine.

Ignora le opzioni di esportazione dell’oggetto applicate alle singole immagini. Consultate Applicare le opzioni di esportazione degli oggetti.

Opzioni avanzate

Usate l’area Avanzate per impostare le opzioni CSS e JavaScript.

I fogli CSS (Cascading Style Sheets) sono un insieme di regole di formattazione che controllano l’aspetto del contenuto di una pagina Web. Quando usate un foglio CSS per formattare una pagina, il contenuto viene separato dall’aspetto. Il contenuto della pagina, il codice HTML, si trova nel file HTML, mentre le regole CSS che definiscono la presentazione del codice si trovano in un file distinto (un foglio di stile esterno) o all’interno del documento HTML (in genere nella sezione Head). Ad esempio, potete specificare dimensioni del font diversi per il testo selezionato e potete usare i fogli CSS per controllare il formato e il posizionamento degli elementi di una pagina Web a livello di blocco.

Quando esportate in XHTML, potete creare un elenco di stili CSS che verranno visualizzati nella sezione Head del file HTML con relative dichiarazioni (attributi).

Se avete selezionato Includi definizioni di stile, InDesign tenta di fare corrispondere gli attributi della formattazione di testo InDesign agli equivalenti CSS. Se questa opzione non è selezionata, il file HTML contiene dichiarazioni vuote. Potete successivamente modificare queste dichiarazioni in Dreamweaver.

Se l’opzione Mantieni impostazioni locali è selezionata, vengono incluse anche formattazioni applicate localmente come corsivo o grassetto.

Selezionate questa opzione per omettere la sezione CSS dal file HTML.

Specificate l’URL del foglio di stile CSS esterno, che è in genere un URL relativo, ad esempio “/stili/style.css”. InDesign non controlla se il foglio CSS esiste o è valido, per cui usate Dreamweaver per confermare l’impostazione del CSS esterno.

Specificate il CSS tramite il pulsante Aggiungi foglio di stile.

Selezionate Collega a JavaScript esterno per eseguire codice JavaScript quando la pagina HTML è aperta. Specificate l’URL del codice JavaScript, che in genere è un URL relativo. InDesign non controlla se il codice JavaScript esiste o è valido.

Altri argomenti correlati

Crea e pubblica e-book, brochure, volantini, cartoline, poster, layout di pagina interattivi e altro ancora con Adobe InDesign.