Usare Top Style Lite come editor CSS

Autore: Luca Ruggiero | Tell a Friend

Corso HTML
Impara il linguaggio di marcatura per il Web.

Corso CSS
Web Design ed Accessibilità secondo il W3C!

Concesso in esclusiva a MrWebmaster.it - E' vietata la pubblicazione senza espresso consenso del proprietario

Introduzione

Top Style Lite è la versione limitata del programma Top Style della Bradsoft, attualmente in vendita presso la NewsGator per meno di 80 dollari americani nel momento in cui scrivo. Per acquistare il prodotto o per scaricare la versione di prova cliccate qui. Com'è intuibile dal suo nome si tratta di un editor per la creazione di fogli di stile CSS.

In questo articolo esamineremo le ottime funzionalità della versione Lite.

Installazione

L'installazione di Tol Style Lite è quanto di più semplice si possa immaginare: fare un doppio click sull'eseguibile ed andare avanti fino alla fine dell'installazione, lasciando selezionate tutte le opzioni di default.

L'interfaccia

Aprendo il programma vi troverete di fronte all'interfaccia principale, la cui anteprima è disponibile nell'immagine che segue:

Sulla destra troviamo il pannello delle proprietà in cui compariranno tutti i possibili attributi e relativi valori dei CSS.

In questo modo, oltre alla comodità di poter utilizzare un editor studiato ad hoc per la redazione del codice CSS, possiamo anche approfittare per vedere comandi che non conoscevamo prima ed impararli.

Ricordo al lettore anche dell'esistenza delle nostre Referenze CSS.

Scrittura del codice CSS

Vediamo adesso come appare il codice CSS all'interno dell'area di lavoro testuale di Top Style Lite:

Scrivendo il nome del Tag HTML facendolo seguire dalle parentesi graffe, si apre automaticamente un popup che suggerisce, in maniera intelligente, gli attributi supportati dal Tag in questione.

Per far comparire il comando CSS è sufficiente selezionarlo con le frecce direzionali della tastiera e battere il tasti invio.

Il menu delle proprietà

Sulla destra dell'interfaccia di Top Style Lite, come già detto, troviamo il menu delle proprietà che, a differenza del popup intelligente, mette a disposizione tutte le proprietà CSS esistenti, almeno fino alla versione dei CSS corrente all'atto dello sviluppo del software.

Segue un'immagine descrittiva del menu:

Per impostare degli attributi dal menu è sufficiente posizionarsi tra le parentesi graffe del Tag HTML desiderato, selezionare col mouse l'attributo desiderato e valorizzarlo a mano o con l'apposito menu a tendina che contiene già tutti i valori di default possibili.

Qualora questo menu dovesse chiudersi o essere erroneamente chiuso, può essere recuperato dal menu: 
View / Style Inspector
I selettori

Notate che nella parte alta del menu delle proprietà, oltre alla scheda corrente delle proprietà, c'è anche la scheda dei selettori, documentata nell'immagine che segue:

In questa scheda sono elencati tutti gli elementi HTML, tutti gli ID e tutte le classi di stile presenti nel nostro foglio di stile.

In questo ovviamente esiste solo il "body". Cliccando sull'elemento desiderato troveremo subito il codice CSS appropriato nell'area di lavoro testuale: cosa molto comoda in fogli di stile lunghi e complessi.

La preview

Dal menu: 
View / Preview
possiamo attivare un'opzione che fa comparire a fondo schermo, nell'area di lavoro di Top Style Lite, l'anteprima di tutti gli elementi stilizzati.

Quest'operazione può risultare comoda per molti e non per altri, dato che l'anteprima ce la si aspetta direttamente sulla pagina HTML.

Opzioni di Top Style Lite

Dal menu: 
Options / Options...
di Top Style Lite è possibile configurare diverse opzioni interessanti.

Nella scheda denominata "General" possiamo stabilire l'estensione con cui salvare i nostri fogli di stile che, per default, è naturalmente .css ma, per qualche strano motivo, si potrebbe voler cambiare estensione.

Nella scheda denominata "Editor" possiamo modificare le opzioni di visualizzazione del codice CSS nell'area di lavoro testuale di Top Style Lite ed altre caratteristiche.

Nella scheda denominata "Third Party Integration", che poi è la più interessante, possiamo decidere di integrare Top Style Lite con i programmi HomeSite, FrontPage e Dreamweaver, naturalmente per quanto concerne gli editor CSS di questi software.

Segue un'immagine descrittiva di questa scheda:

La guida in linea

Non c'è molto altro da dire su questo programma, non perchè non sia potente ma perchè, avrete notato, è di una semplicità estrema.

Molti comandi, ad esempio, sono disponibili oltre che nei menu anche sulla barra orizzontale degli strumenti.

Tra questi troviamo la guida in linea, contrassegnata da un libro viola: si tratta di una splendida documentazione adatta solo a chi mastica la lingua inglese.

Conclusioni

Siamo giunti alla fine di questa sorta di guida all'uso di Top Style Lite.

Tengo a precisare che, non trattandosi di un programma GUI vero e proprio, presuppone una padronanza non indifferente del linguaggio CSS: il suo scopo è quello di facilitare lo sviluppatore e non quello di supplire alle sue conoscenze.

IN EVIDENZA
Effetto ombra su testo con Photoshop Guadagna col tuo sito grazie a TradeD... Guida XHTML Riscrivere le URL con Asp Riavviare IIS HTTP 500 internal server error Generare password casuali in Javascri... Errore 80004005: Cannot update. Datab... Introduzione ad Ajax ed Asp con Jscri... Referenze dei Tag Html Stringhe di connessione via ODBC e Ol... Referenze dei fogli di stile Css Le espressioni regolari in Javascript
HOT LINKS
E-Commerce News Manager Newsletter Corsi online eBooks PC Guadagna col sito Offerte lavoro Hosting Joomla Hosting 20 euro Reg. domini Email gratis FAX via email Tlefonare col PC ADSL Alice ADSL FastWeb Sito pronto Download veloce Ottimizzazione PC Traduzioni