In questo tutorial sarà spiegato come aprire un file Css e modificarlo senza scrivere una riga di codice.
Questo è possibile grazie a ArduoCss, un potentissimo editor Css visuale. Prima di tutto occorre scaricare gratuitamente e installare ArduoCssEditor.
Se non l'hai ancora fatto, puoi farlo qui. Installarlo sarà semplicissimo, se dovessi incontrare difficoltà consulta il tutorial "How to install ArduoCss editor", o contattaci via email.
A questo punto possiamo lanciare l'applicazione cliccando due volte sull'icona nel desktop o arrivandoci tramite il menu start >> programs >> ArduoCss e cliccando sull'icona Arduo Css
Questo è Arduo Css:
Adesso che abbiamo aperto l'applicazione dobbiamo solo scegliere il file da aprire. Andiamo su file >> open o premiamo sul link "Open File" nel blocco centrale del programma.
Fatto ciò apparirà la classica finestrina che permette di scegliere il file desiderato. Scegliamolo e clicchiamo su "Apri"
Il documento viene caricato in una nuova linguetta. L'applicazione può tenere aperti più files contemporaneamente: uno per ogni linguetta.
Puoi decidere di lavorare in modalità visuale o in modalità testuale. Nel primo caso puoi costruire il tuo file senza toccare il codice sorgente, ma basandoti su un interfaccia visuale.
In questo caso la gestione del codice è gestita dall'applicazione. Lavorando invece in modalità testuale, lo stesso utente scrive il codice Css, definendo proprietà e attributi in maniera autonoma.
Alcuni grafici, specialmente quelli più esperti, preferiscono lavorare in maniera testuale perchè lo ritengono più veloce e produttivo. Altri grafici, magari meno esperti, preferiscono lavorare in maniera visuale per poter maneggiare stili e proprietà senza conoscere perfettamente la sintassi CSS.
Con ArduoCSS, non ci sono problemi: puoi lavorare sia in maniera Visuale che non Visuale. Il passaggio da una modalità all'altra è immediato: basta un click!
Per quanto riguarda l'interfaccia testuale, abbiamo un editor avanzato con evidenziazione della sintassi automatica. Per quanto riguarda la modalità Visuale invece abbiamo qualcosa di molto più interessante!
Ogni documento viene aperto in una linguetta, ma ricordati che lavori sempre sulla linguetta selezionata! Nella parte centrale del programma puoi vedere l'albero degli stili Css, che puoi espandere e collassare con un click.
Sulla parte destra hai modo di modificare lo stile selezionato, agendo sulle varie proprietà: per ciascuna proprietà esistente puoi assegnargli un valore. La maggior parte delle tipologie di proprietà (colori, dimensioni,font etc...) hanno un editor specifico, che aiuta nello scegliere il valore corretto, riducendo le probabilità di errore.
Ad esempio proviamo a modificare lo stile "body" del nostro Css modificando la prorpietà "border-top-color". Tutto il necessario consiste in
- Selezioniamo il nodo "body" nella lista degli stili.. (Lo stile si espanderà mostrando i valori attuali delle proprietà dello stile)
- Dal pannello di destra identifichiamo la proprietà che vogliamo modificare, e clicchiamo sul pulsantino alla sua destra. Un piccolo selettore per colori comparirà in prossimità dell'editor.
- Scegliamo il colore selezionato con un click.
Ad ogni cambiamento di una proprietà del css il pannello di anteprima (in basso) si aggiorna. Questo ci permette di vedere gli effetti delle nostre azioni sulle proprietà dei vari stili.
Modificare un file css con ArduoCss è facile: basta un pò di creatività ed il gioco è fatto!