In un certo senso l'interfaccia di Dreamweaver è tornata alle origini. Infatti se è vero che nelle vecchie versioni gli utenti di Dreamweaver che volevano impostare la formattazione di un oggetto (ad esempio una parola) si limitavano a selezionarla e a deciderne l'aspetto tramite il pannello Proprietà adesso il sistema è tornato esattamente il medesimo.
Naturalmente le differenze ci sono (già da Dreamweaver mx 2004) e soprattutto sono vantaggiose: adesso Dreamweaver traduce la formattazione in codice CSS piuttosto che in codice HTML come faceva in passato.
Immaginiamo di voler definire l'aspetto di un paragrafo della nostra pagina web. È sufficiente selezionare tutto il paragrafo, accedere al pannello Proprietà e impostare le varie caratteristiche come la dimensione del testo, il tipo dicarattere, il colore e così via.
Già dopo la prima modifica, nella casella "Stile" del pannello "Proprietà", appare la scritta Stile1, per di più formattata secondo le impostazioni che abbiamo definito. Naturalmente sarà cambiato anche l'aspetto del paragrafo selezionato.
In pratica il programma ha definito nell'<head> dellapagina web delle regole relative alla classe "Stile1". Inoltre ha applicatola classe "Stile1" al paragrafo corrente.
I vantaggi sono (almeno) due:
- Dreamweaver non ha usato stili HTML per definire la formattazione del paragrafo corrente ma lo standard CSS, il tutto in maniera completamente trasparente all'utente che invece di preoccuparsi del modo in cui verrà codificata la formattazione può dedicarsi a compiti di livello più alto;
- le informazioni relative alla formattazione sono state memorizzate nell'head della pagina come classe, quindi potranno essere facilmente applicate a ogni altro paragrafo (o oggetto) della pagina corrente senza replicare le regole di stile e con la certezza che in futuro basterà modificare la classe per aggiornare automaticamente tutti gli oggetti a cui essa è stata applicata.
Vediamo un veloce esempio. Immaginiamo di voler creare una classe permostrare un paragrafo con il testo di colore blu e (possibilmente) con ilcarattere Courier New.
Per farlo sarà sufficiente:
- scrivere il primo dei paragrafi che avranno questa particolare formattazione e premere invio per creare un tag
<p>. - selezionare tutto il paragrafo;
- agire sul pannello "Proprietà" e scegliere "Courier New" come carattere e il "blu" (
#0000FF) come colore del testo;
Figura 1. Esempio di formattazione di un paragrafo
A questo punto Dreamweaver dovrebbe aver già creato la classe "Stile1".Possiamo controllare accedendo al pannello "Stili CSS" e attivando la modalità "Tutte".
Figura 2. Lo stile creato nell pannello "Stili CSS"
Vediamo che nel sotto albero della voce <stile> compare ".Stile1". Ora possiamo modificare la classe tramite il riquadro "Proprietà" sottostante e possiamo rinominarla in modo da poterla riusare con maggior semplicità. Per farlo è necessario fare click destro sulla voce ".Stile1",scegliere "Rinomina", digitare il nuovo nome e premere "Ok". Usiamo "TestoBlu" come nuovo nome.
Figura 3. Rinominare una classe
A questo punto possiamo applicare la classe ad altri paragrafi, per farlo possiamo usare il Selettore di Tag sulla barra di stato.
Prima di tutto dobbiamo selezionare il paragrafo a cui applicare la classe, fare clic destro sul relativo tag <p> nel Selettore di Tag, scegliere Imposta classe>TestoBlu.
Figura 4. Impostare la classe dal Selettore di Tag
Naturalmente possiamo ripetere il procedimento per ogni paragrafo (o elemento).
Attualmente nella pagina abbiamo due paragrafi. Proviamo ora a modificare alcune impostazioni della classe "TestoBlu".
Accediamo al pannello "Stili CSS", attiviamo la modalità "Tutte" e selezioniamo la voce ".TestoBlu". Accediamo al riquadro proprietà sottostante e modifichiamo il carattere: scegliamo la voce "Arial, Helvetica,sans-serif".
Figura 5. Modificare il carattere della classe
Automaticamente vedremo aggiornarsi tutti i paragrafi della pagina corrente associati alla classe "TestoBlu".
Attenzione alla definizione della regola del tag
Ipotizziamo di voler formattare soltanto una parola di un paragrafo. Se la selezioniamo e usiamo il pannello "Proprietà" per impostare, ad esempio, il suo colore come rosso e il carattere come "Georgia" vedremo la parola aggiornarsi come desiderato. Tuttavia nel pannello "Stili CSS" non appare alcuna nuova definizione di classe, questo perchè Dreamweaver definisce una nuova classe solo quando si formatta l'intero paragrafo. In tal caso non potremmo riusare quelle regole CSS per altre porzioni di testo.
Tornando al discorso della classi, esiste un altro modo per creare una classe. Basta fare click destro in un qualsiasi punto del pannello "Stili CSS" e scegliere "Nuovo".
Figura 6. Creare una nuova regola CSS
Scegliamo "Classe" nel menu "Tipo selettore:" e il digitiamo il nome che desideriamo assegnare alla classe nella casella "Nome". Infine scegliamo "Solo questo documento" (vedremo in seguito come creare un foglio di stile esterno).
La schermata successiva ci permette di definire nei minimi dettagli le caratteristiche della nostra classe. Usandola in minima parte potremmo impostareil "Colore" nel pannello "Tipo" su verde (#00FF00).
Figura 7. Definire una regola CSS
Infine scegliamo "Ok". Per applicare la classe a un paragrafo basterà selezionarlo e procedere come descritto in precedenza.
Ultimi articoli Editor
Adobe Edge, la prima animazione HTML5Come creare una animazione HTML5 con Adobe Edge, esempio completo |
Adobe Edge, l'interfacciaEsaminiamo pannelli e menu del tool gratuito di Adobe per la... |
Trasformazioni XSLT in Dreamweaver 8Primo sguardo agli strumenti XML: trasformare un feed RSS |
Layout senza tabelle con Dreamweaver 8Esaminiamo gli strumenti CSS avanzati del software di Adobe/Macromedia |
Il nuovo Dreamweaver 8Panoramica delle principali novità dell'ultima release del popolare... |
Guide Editor
Guida WebMatrixEntrare nel mondo dello sviluppo di applicazioni Web con Webmatrix,... |
Guida Notepad++Un editor testuale che funziona perfettamente anche come editor HTML... |
Guida AptanaCreare siti Web o applicazioni con Aptana, l'editor open source,... |
Newsletter @Daily HTML.it
Ogni mattina, dal lunedì al venerdì, le novità pubblicate su tutti i siti tecnici del network HTML.it: articoli, guide, notizie dal Web, blog e molto altro.
Iscriviti alla newsletter
Corsi in aula
|
|
Corso Webmaster base18 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base25 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base05 Giugno 2012 a Roma |
|
|
Corso Webmaster base11 Giugno 2012 a Roma |
