Esportazione CSS

6 novembre 2014

Mercedes Classe E Wagon

La nuova ammiraglia E, dopo essere stata presentata in versione berlina, viene "scoperta" anche in veste Wagon. In collaborazione con Motorcube.

Mercedes Classe E Wagon

La nuova ammiraglia E, dopo essere stata presentata in versione berlina, viene "scoperta" anche in veste Wagon. In collaborazione con Motorcube.

Erika Giulianini

Illustrator CC finalmente stringe la mano ai web designer: ora infatti possibile disegnare layout web allinterno del
programma e, allo stesso tempo, generare codice CSS e SVG da copiare o importare nelleditor 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)

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 lelemento grafico avvalendoci di
un pi leggero codice HTML.
Figura 2. Dettaglio del layout web (click per ingrandire)

Nel menu Finestra troviamo lopzione 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)

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)

Come si vede nellesempio, 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 dellerrore, 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)

Detto questo, se diamo unocchiata alla classe appena creata in Figura 6, possiamo notare come manchino alcune
propriet, ad esempio le dimensioni delloggetto (width e height).
Figura 6. Dati della classe creata (click per ingrandire)

Spostiamoci quindi nellangolo in alto a destra del pannello Propriet CSS e apriamo lapposito menu, illustrato in
Figura 7, da cui selezioneremo le Opzioni di Esportazione.
Figura 7. Menu del pannello Propriet CSS (click per ingrandire)

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
dellopzione Dimensioni e confermiamo la scelta, come illustrato in Figura 8.
Figura 8. Opzioni desportazione (click per ingrandire)

Esportazione del codice CSS

Esistono un paio di modalit desportazione del codice CSS appena creato. La prima variante, illustrata in Figura 9,
prevede lapertura del menu del pannello Propriet CSS e la scelta dellopzione Esporta CSS Selezionato. Il
codice verr salvato in un file .css.
Figura 9. Esportazione CSS come file (click per ingrandire)

La seconda modalit prevede la selezione dellicona 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)

Una volta copiati, questi dati possono essere inseriti nelleditor HTML che usiamo abitualmente.

STRUMENTO PENNA RIPROGETTATO !

1 ... 12 13 14 ... 35
TUTTE LE LEZIONI