La finestra di ispezione Proprietà consente di applicare la formattazione HTML o la formattazione di fogli di stile CSS. Quando applicate la formattazione HTML, Dreamweaver aggiunge automaticamente le proprietà al codice HTML nel corpo della pagina. Quando applicate la formattazione CSS, Dreamweaver scrive automaticamente le proprietà nell'intestazione del documento o in un foglio di stile separato.
Nota:
Quando create stili CSS in linea, Dreamweaver aggiunge il codice dell'attributo di stile direttamente al corpo della pagina.
La formattazione del testo in Dreamweaver è simile a quella di un normale programma di elaborazione testi. Potete impostare stili di formattazione predefiniti (Paragrafo, Titolo 1, Titolo 2 e così via) per un blocco di testo, cambiare il carattere, la dimensione, il colore e l'allineamento del testo selezionato oppure applicare gli stili di testo, ad esempio il grassetto, il corsivo, il carattere monospace e la sottolineatura.
In Dreamweaver sono disponibili due finestre di ispezione Proprietà, integrate in una sola: la finestra di ispezione Proprietà CSS e la finestra di ispezione Proprietà HTML. Quando utilizzate la finestra di ispezione Proprietà CSS, Dreamweaver applica la formattazione al testo utilizzando i fogli di stile CSS (Cascading Style Sheets). I CSS offrono ai designer e agli sviluppatori Web un maggiore controllo sulla progettazione delle pagine Web, funzioni di accessibilità migliorate e dimensioni di file ridotte. La finestra di ispezione Proprietà CSS consente di accedere agli stili esistenti e crearne di nuovi.
L'uso dei CSS consente di controllare lo stile di una pagina Web senza comprometterne la struttura. Tramite la separazione degli elementi di progettazione visivi (caratteri, colori, margini e così via) dalla logica strutturale di una pagina Web, i CSS offrono ai Web designer un controllo sia visivo che tipografico senza sacrificare l'integrità del contenuto. Inoltre, la definizione di una struttura tipografica e di un layout di pagina da un unico, distinto blocco di codice (senza dover ricorrere a mappe di immagini, tag font, tabelle ed elementi spaziatori) consente scaricamenti più veloci, una manutenzione ottimizzata del sito e fornisce un punto centrale da cui controllare gli attributi della progettazione attraverso più pagine Web.
Potete archiviare gli stili creati con CSS direttamente nel documento oppure, per disporre di maggiori potenzialità e flessibilità, potete archiviarli in un foglio di stile esterno. Se associate un foglio di stile esterno a diverse pagine Web, tutte le pagine rispecchiano automaticamente tutte le modifiche che vengono apportate al foglio di stile. Per accedere a tutte le regole CSS di una pagina, utilizzate il pannello Stili CSS (Finestra > Stili CSS). Per accedere alle regole associate alla selezione corrente, utilizzate il pannello Stili CSS (modalità Corrente) oppure il menu a comparsa Regola di destinazione nella finestra di ispezione Proprietà CSS.
Se preferite, potete utilizzare i tag HTML per formattare il testo nelle pagine Web. Per utilizzare i tag HTML anziché CSS, applicate la formattazione al testo tramite la finestra di ispezione Proprietà HTML.
Nota:
Potete combinare la formattazione CSS e HTML 3.2 all'interno della stessa pagina. La formattazione viene applicata secondo un ordine gerarchico: la formattazione HTML 3.2 ha la precedenza sulla formattazione applicata da fogli di stile CSS esterni e i CSS incorporati in un documento hanno la precedenza sui CSS esterni.
-
Regola di destinazione
È la regola che state modificando nella finestra di ispezione Proprietà CSS. Se al testo è applicata una regola esistente, quando fate clic all'interno del testo nella pagina viene visualizzata la regola che influisce sul formato del testo. Per creare nuove regole CSS, nuovi stili in linea o applicare classi esistenti al testo selezionato, potete anche utilizzare il menu a comparsa Regola di destinazione. Se state creando una nuova regola, dovete completare la finestra di dialogo Nuova regola CSS. Per ulteriori informazioni, potete utilizzare i collegamenti presenti alla fine di questo argomento.
Modifica regola
Apre la finestra di dialogo Definizione regola CSS relativa alla regola di destinazione. Se selezionate Nuova regola CSS dal menu a comparsa Regola di destinazione e fate clic sul pulsante Modifica regola, Dreamweaver apre invece la finestra di dialogo Definizione regola CSS.
CSS Designer
Apre il pannello CSS Designer e visualizza le proprietà della regola di destinazione nella vista corrente.
Colore testo
Imposta il colore selezionato come colore del font nella regola di destinazione. Selezionate un colore web-safe facendo clic sulla casella del colore oppure inserendo il valore esadecimale corrispondente (ad esempio, #BB5153) nel campo di testo adiacente.
Modificate le regole CSS utilizzando l’opzione Modifica regola.
Allineamento A sinistra, Al centro e A destra
Allinea la regola di destinazione a sinistra, al centro o a destra.
Nota:
Le proprietà Carattere, Dimensione, Colore testo, Grassetto, Corsivo e Allineamento indicano sempre le proprietà della regola applicata alla selezione corrente della finestra del documento. Se modificate una qualunque di queste proprietà, la modifica ha effetto sulla regola di destinazione.
Se non avete applicato alcuna regola specifica al testo, potete modificarne il colore direttamente dalla finestra di ispezione Proprietà. Nell’esempio seguente, osservate il colore del testo prima di modificarlo. Il campo accanto al selettore colore è bianco e indica il colore del testo sul quale è posizionato il cursore.
Per modificare il colore del testo, selezionate il testo da modificare. Fate clic sul selettore colore e selezionate un colore. Osservate l’immagine seguente dove è visualizzato il nuovo colore nella finestra di ispezione Proprietà.
-
Impostazione delle proprietà di formattazione del testo HTML
Formato
Imposta lo stile del paragrafo del testo selezionato. L'opzione Paragrafo applica il formato predefinito per un tag <p>, Titolo 1 aggiunge un tag H1 e così via.
ID
Assegna un ID alla selezione. Il menu a comparsa ID (se disponibile) elenca tutti gli ID dichiarati e non utilizzati del documento.
Classe
Visualizza lo stile di classe attualmente utilizzato per il testo selezionato. Se alla selezione non è stato applicato alcuno stile, nel menu a comparsa viene visualizzata l'indicazione Nessuno stile CSS. Se sono stati applicati più stili alla selezione, il menu è vuoto.
Utilizzate il menu Stile per effettuare una delle seguenti operazioni:
Selezionate lo stile da applicare alla selezione.
Selezionate Nessuno per rimuovere lo stile selezionato.
Selezionate Rinomina per rinominare lo stile.
Selezionate Associa foglio di stile per aprire una finestra di dialogo che consente di collegare un foglio di stile esterno alla pagina.
Grassetto
Applica <b> oppure <strong> al testo selezionato in base alle preferenze di stile impostate nella categoria Generali della finestra di dialogo Preferenze.
Corsivo
Applica <i> oppure <em> al testo selezionato in base alle preferenze di stile impostate nella categoria Generali della finestra di dialogo Preferenze.
Elenco non ordinato
Converte il testo selezionato in un elenco puntato. In assenza di testo selezionato, viene aperto un nuovo elenco puntato.
Elenco ordinato
Converte il testo selezionato in un elenco numerato. In assenza di testo selezionato, viene aperto un nuovo elenco numerato.
Blocco citazione e Rimuovi blocco citazione
Applica o elimina il rientro dal testo selezionato aggiungendo o eliminando il tag blockquote. All'interno di un elenco, la selezione del rientro crea un elenco nidificato, mentre l'eliminazione del rientro riporta tutte le voci allo stesso livello.
Collegamento
Crea un collegamento ipertestuale per il testo selezionato. Fate clic sull'icona a forma di cartella per individuare un file del proprio sito, digitate l'URL, trascinate l'icona Scegli file all'interno del pannello File o trascinate un file dal pannello File alla casella.
Destinazione
Specifica il frame o la finestra in cui deve essere caricato il documento collegato:
_blank Carica il file collegato in una nuova finestra del browser senza nome.
_parent Carica il file collegato nel set di frame o nella finestra superiore del frame che contiene il collegamento. Se il frame in cui si trova il collegamento non è nidificato, il file collegato viene caricato nella finestra del browser a grandezza piena.
_self Carica il file collegato nello stesso set di frame o nella stessa finestra in cui si trova il collegamento. Questo collegamento è implicito e quindi di solito non è necessario specificarlo.
_top Carica il file collegato nella finestra del browser a grandezza piena, eliminando tutti i frame.
Dreamweaver visualizza tutte le classi disponibili per la pagina nel menu Classe della finestra di ispezione Proprietà HTML. Potete rinominare gli stili in questo elenco selezionando l'opzione Rinomina alla fine dell'elenco di stili di classe.
I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.