Utilizzare la finestra di ispezione Proprietà testo per applicare la formattazione HTML o la formattazione CSS in Dreamweaver.

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.

Informazioni sulla formattazione del testo (CSS o HTML)

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.

Modificare regole CSS nella finestra di ispezione Proprietà

  1. Se non è ancora aperta, aprite la finestra di ispezione Proprietà (Finestra > Proprietà) e selezionate l’opzione CSS nell’angolo sinistro del pannello.

  2. Effettuate una delle operazioni seguenti:
    • Posizionate il punto di inserimento all'interno di un blocco di testo formattato mediante una regola che desiderate modificare. La regola viene visualizzata nel menu a comparsa Regola di destinazione.
    • Selezionate una regola dal menu a comparsa Regola di destinazione.
    • Fate clic Modifica regola.
    Selezionate una regola da Regola di destinazione
    Selezionate una regola dal menu a comparsa Regola di destinazione.

  3. Modificate la regola utilizzando le opzioni disponibili nella finestra di ispezione Proprietà CSS.

    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.

    Carattere

    Consente di modificare il carattere della regola di destinazione.

    Dimensione

    Consente di modificare la dimensione di carattere della regola di destinazione.

    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.

    Modificare le regole CSS in Dreamweaver
    Modificate le regole CSS utilizzando l’opzione Modifica regola.

    Grassetto

    Aggiunge la proprietà Grassetto alla regola di destinazione.

    Corsivo

    Aggiunge la proprietà Corsivo alla regola di destinazione.

    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.

Modificare il colore del testo utilizzando la finestra di ispezione Proprietà

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.

Modifica del colore del testo
Modifica del colore del testo in Dreamweaver

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à.

Modifica del colore del testo in Dreamweaver
Utilizzate il selettore colore per modificare il colore del testo

Impostare la formattazione HTML nella finestra di ispezione Proprietà

  1. Aprite la finestra di ispezione Proprietà (Finestra > Proprietà), se non è già aperta, e fate clic sul pulsante HTML.
  2. Selezionate il testo da formattare.

  3. Impostate le opzioni da applicare al testo selezionato:
    Impostazione delle proprietà di formattazione del testo HTML in Dreamweaver CC
    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.

    Titolo

    Specifica la descrizione comando in formato testo per un collegamento ipertestuale.

    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.

Rinominare una classe dalla finestra di ispezione Proprietà HTML

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.

  1. Nella finestra di ispezione Proprietà, selezionate l’elenco a discesa Classe.

  2. Dalla fine dell’elenco visualizzato, selezionate Rinomina.

  3. Selezionate lo stile da rinominare dal menu a comparsa Rinomina stile.

    Rinominare la classe HTML in Dreamweaver
    Rinominare una classe HTML

  4. Inserite un nuovo nome nella casella di testo Nuovo nome e fate clic su OK.

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online