Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Esportazione CSS

Illustrator CC permette di creare ed esportare rapidamente il codice CSS dei layout web, così da rendere la pubblicazione online ancora più veloce.
Illustrator CC permette di creare ed esportare rapidamente il codice CSS dei layout web, così da rendere la pubblicazione online ancora più veloce.
Link copiato negli appunti

Illustrator CC finalmente stringe la mano ai web designer: ora è infatti possibile disegnare layout web all'interno del programma e, allo stesso tempo, generare codice CSS e SVG da copiare o importare nell'editor HTML preferito.

Creazione del codice CSS

Per illustrare le capacità di creazione del codice CSS con Illustrator CC, prendiamo come esempio il layout web mostrato in Figura 1.

Figura 1. Layout web esemplificativo (click per ingrandire)

Layout web esemplificativo

Possiamo notare come nella pagina vi siano degli oggetti, evidenziati in Figura 2, contenenti del testo. Non è più necessario creare la grafica da importare nel nostro HTML: quel laborioso taglia e cuci di immagini è obsoleto nella maggioranza dei casi. Questo perché sarà possibile estrapolare le informazioni CSS direttamente con Illustrator, che le elabora proprio in formato codice: crea la classe, i selettori e le proprietà della dichiarazione di stile. Potremo quindi copiarle e importarle nel nostro editor HTML. In questo modo, riprodurremo l'elemento grafico avvalendoci di un più leggero codice HTML.

Figura 2. Dettaglio del layout web (click per ingrandire)

Dettaglio del layout web

Nel menu Finestra troviamo l'opzione Proprietà CSS: selezionandola apriremo il pannello dove sarà possibile visualizzare le impostazioni CSS di un oggetto selezionato. Il procedimento è mostrato in Figura 3.

Figura 3. Menu Proprietà CSS (click per ingrandire)

Menu Proprietà CSS

Finché non selezioniamo un oggetto del layout non vedremo informazioni nel pannello, che risulterà quindi grigio. Una volta selezionato un elemento, invece, appariranno le informazioni che lo riguardano. Il risultato è descritto in Figura 4.

Figura 4. Pannello proprietà CSS (click per ingrandire)

Pannello proprietà CSS

Come si vede nell'esempio, il codice CSS che viene riportato nel pannello corrisponde a una classe specifica, in questo caso .box_1_. È molto importante, di conseguenza, assegnare un nome specifico a ogni livello della nostra grafica. In caso contrario non verrà creato alcun CSS e apparirà un messaggio di notifica dell'errore, visibile in Figura 5. Questo perché, in questo caso, Illustrator non è in grado di specificare una classe di appartenenza per le dichiarazioni di stile.

Figura 5. Mancata dichiarazione di stile (click per ingrandire)

Mancata dichiarazione di stile

Detto questo, se diamo un'occhiata alla classe appena creata in Figura 6, possiamo notare come manchino alcune proprietà, ad esempio le dimensioni dell'oggetto ("width" e "height").

Figura 6. Dati della classe creata (click per ingrandire)

Dati della classe creata

Spostiamoci quindi nell'angolo in alto a destra del pannello Proprietà CSS e apriamo l'apposito menu, illustrato in Figura 7, da cui selezioneremo le Opzioni di Esportazione.

Figura 7. Menu del pannello Proprietà CSS (click per ingrandire)

Menu del pannello Proprietà CSS

Questa azione aprirà una finestra di dialogo contenente le opzioni, in cui si potrà notare come Posizione e Dimensioni non siano espresse, quindi non sono incluse nelle dichiarazioni di stile. Selezioniamo la spunta dell'opzione Dimensioni e confermiamo la scelta, come illustrato in Figura 8.

Figura 8. Opzioni d'esportazione (click per ingrandire)

Opzioni d'esportazione

Esportazione del codice CSS

Esistono un paio di modalità d'esportazione del codice CSS appena creato. La prima variante, illustrata in Figura 9, prevede l'apertura del menu del pannello Proprietà CSS e la scelta dell'opzione Esporta CSS Selezionato. Il codice verrà salvato in un file .css.

Figura 9. Esportazione CSS come file (click per ingrandire)

Esportazione CSS come file

La seconda modalità prevede la selezione dell'icona Copia Stile Selezionato, che si trova sulla barra inferiore del pannello Proprietà CSS: per individuarla fate riferimento alla Figura 10.

Figura 10. Copia dei dati di stile (click per ingrandire)

Copia dei dati di stile

Una volta copiati, questi dati possono essere inseriti nell'editor HTML che usiamo abitualmente.


Ti consigliamo anche