Apri la finestra di ispezione Proprietà (Finestra > Proprietà), se non è già aperta, e seleziona l'opzione CSS nell'angolo sinistro del pannello.
Ultimo aggiornamento il
20 dic 2021
Utilizzare la finestra di ispezione Proprietà testo per applicare la formattazione HTML o la formattazione CSS in Dreamweaver.
Puoi utilizzare la finestra di ispezione Proprietà del testo per applicare la formattazione HTML o la formattazione dei Fogli di stile CSS (Cascading Style Sheet).Quando applichi la formattazione HTML, Dreamweaver aggiunge proprietà al codice HTML nel corpo della pagina.Quando applichi la formattazione CSS, Dreamweaver scrive proprietà nell'intestazione del documento o in un foglio di stile separato.
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 versus HTML)
La formattazione del testo in Dreamweaver è simile all'utilizzo di un programma di elaborazione testi standard.Puoi impostare stili di formattazione predefiniti (Paragrafo, Intestazione 1, Intestazione 2 e così via) per un blocco di testo, cambiare il font, la dimensione, il colore e l'allineamento del testo selezionato, oppure applicare stili di testo come grassetto, corsivo, codice (monospace) e sottolineato.
Dreamweaver ha due finestre di ispezione Proprietà, integrate in una: la finestra di ispezione Proprietà CSS e la finestra di ispezione Proprietà HTML.Quando utilizzi la finestra di ispezione Proprietà CSS, Dreamweaver formatta il testo utilizzando i Fogli di stile CSS (CSS). I CSS (Cascading Style Sheets) offrono ai progettisti e sviluppatori web un maggiore controllo sulla progettazione delle pagine web, fornendo al contempo funzionalità migliorate per l'accessibilità e dimensioni ridotte dei file.La finestra di ispezione Proprietà CSS ti consente di accedere agli stili esistenti, oltre a crearne di nuovi.
Usare i CSS è un modo per controllare lo stile di una pagina web senza compromettere la struttura.Separando gli elementi di progettazione visiva (font, colori, margini e così via) dalla logica strutturale di una pagina web, i CSS offrono ai web designer controllo visivo e tipografico senza sacrificare l'integrità del contenuto.Inoltre, definire la progettazione tipografica e il layout della pagina all'interno di un singolo blocco di codice distinto, senza dover ricorrere a mappe immagine, tag font, tabelle e GIF spaziatori, consente download più rapidi, manutenzione semplificata del sito e un punto centrale da cui controllare gli attributi di progettazione su più pagine web.
Puoi memorizzare gli stili creati con i CSS direttamente nel documento oppure, per maggiore flessibilità e controllo, puoi memorizzarli in un foglio di stile esterno.Se alleghi un foglio di stile esterno a più pagine web, tutte le pagine riflettono automaticamente le modifiche apportate al foglio di stile.Per accedere a tutte le regole CSS di una pagina, usa il pannello Stili CSS (Finestra > Stili CSS).Per accedere alle regole che si applicano a una selezione corrente, utilizza il pannello Stili CSS (modalità Corrente) oppure il menu pop-up Regola di destinazione nella finestra di ispezione Proprietà CSS.
Se preferisci, puoi utilizzare i tag di markup HTML per formattare il testo nelle tue pagine web.Per utilizzare i tag HTML invece dei CSS, formatta il testo utilizzando la finestra di ispezione Proprietà HTML.
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 le regole CSS nella finestra di ispezione Proprietà
Effettuate una delle operazioni seguenti:
- Posiziona il punto di inserimento all'interno di un blocco di testo che è stato formattato da una regola che desideri modificare.La regola appare nel menu pop-up Regola di destinazione.
- Selezionate una regola dal menu a comparsa Regola di destinazione.
- Fai clic su Modifica regola.
Apporta modifiche alla regola utilizzando le varie opzioni nell'Ispettore proprietà CSS.
Regola di destinazione
È la regola che state modificando nella finestra di ispezione Proprietà CSS. Quando hai uno stile esistente applicato al testo, la regola che influisce sul formato del testo appare quando fai clic all'interno del testo sulla pagina. Puoi anche utilizzare il menu a comparsa Regola di destinazione per creare nuove regole CSS, nuovi stili in linea o applicare classi esistenti al testo selezionato.Se stai creando una nuova regola, dovrai completare la finestra di dialogo Nuova regola CSS. Per ulteriori informazioni, consulta i collegamenti alla fine di questo argomento.
Modifica regola
Apre la finestra di dialogo Definizione regola CSS per la regola di destinazione. Se selezioni Nuova regola CSS dal menu a comparsa Regola di destinazione e fai clic sul pulsante Modifica regola, Dreamweaver apre invece la finestra di dialogo Nuova regola CSS.
CSS Designer
Apre il pannello CSS Designer e visualizza le proprietà per la 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. Seleziona un colore web sicuro facendo clic sulla casella del colore o inserisci un valore esadecimale (ad esempio, #BB5153) nel campo di testo adiacente.
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.
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 adiacente al selettore colore visualizza bianco, indicando il colore del testo dove hai posizionato il cursore.
Per modificare il colore del testo, selezionate il testo da modificare. Fate clic sul selettore colore e selezionate un colore. Consulta l'immagine seguente in cui l'ispettore delle proprietà visualizza il nuovo colore.
Imposta la formattazione HTML nell'Inspector proprietà
Apri il pannello Proprietà (Finestra > Proprietà), se non è già aperto, e fai clic sul pulsante HTML.
Seleziona il testo che desideri formattare.
Impostate le opzioni da applicare al testo selezionato:
Formato
Imposta lo stile del paragrafo del testo selezionato. Paragrafo applica il formato predefinito per un tag <p>, Intestazione 1 aggiunge un tag H1 e così via.
ID
Assegna un ID alla selezione. Il menu a comparsa ID (se applicabile) elenca tutti gli ID dichiarati non utilizzati del documento.
Classe
Visualizza lo stile della classe attualmente applicato al testo selezionato.Se alla selezione non sono stati applicati stili, il menu pop-up mostra Nessun stile CSS.Se alla selezione sono stati applicati più stili, il menu è vuoto.
Usa il menu Stile per eseguire una delle seguenti operazioni:
Seleziona lo stile che vuoi applicare alla selezione.
Selezionate Nessuno per rimuovere lo stile selezionato.
Selezionate Rinomina per rinominare lo stile.
Seleziona Allega foglio di stile per aprire una finestra di dialogo che consente di allegare un foglio di stile esterno alla pagina.
Grassetto
Applica <b> o <strong> al testo selezionato in base alla preferenza di stile impostata nella categoria Generale della finestra di dialogo Preferenze.
Corsivo
Applica <i> o <em> al testo selezionato in base alla preferenza di stile impostata nella categoria Generale della finestra di dialogo Preferenze.
Elenco non ordinato
Converte il testo selezionato in un elenco puntato. Se non è selezionato alcun testo, si avvia un nuovo elenco puntato.
Elenco ordinato
Converte il testo selezionato in un elenco numerato. Se non è selezionato alcun testo, si avvia un nuovo elenco numerato.
Blocco citazione e Rimuovi blocco citazione
Applica rientro o rimuovi il rientro dal testo selezionato applicando o rimuovendo il tag blockquote. In un elenco, applicare il rientro crea un elenco nidificato e rimuovere il rientro annulla la nidificazione dell'elenco.
Collegamento
Crea un collegamento ipertestuale per il testo selezionato. Fai clic sull'icona della cartella per cercare un file nella sede; digita l'URL; trascina l'icona Punta a file su un file nel pannello File; oppure trascina un file dal pannello File nella casella.
Titolo
Specifica la descrizione comando in formato testo per un collegamento ipertestuale.
Destinazione
Specifica il fotogramma o la finestra in cui verrà 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 fotogrammi o nella finestra principale del fotogramma che contiene il collegamento. Se il fotogramma che contiene il collegamento non è nidificato, il file collegato viene caricato nell'intera finestra del browser.
_self carica il file collegato nello stesso fotogramma o nella stessa finestra del collegamento.Questo target è implicito, quindi di solito non è necessario specificarlo.
_top carica il file collegato nell'intera finestra del browser, rimuovendo così tutti i fotogrammi.
Rinominare una classe dal pannello Proprietà HTML
Dreamweaver visualizza tutte le classi disponibili per la pagina nel menu Classe del pannello Proprietà HTML.Puoi rinominare gli stili in questo elenco selezionando l'opzione Rinomina alla fine dell'elenco degli stili di classe.
Dal pannello Proprietà, seleziona l'elenco a discesa Classe.
Dall'elenco che viene visualizzato, seleziona Rinomina alla fine dell'elenco.
Seleziona lo stile che desideri rinominare dal menu a comparsa Rinomina stile.
Immetti un nuovo nome nel campo di testo Nuovo nome e fai clic su OK.
Altri contenuti simili
Crea splendidi siti web con Dreamweaver
Progetta, codifica e gestisci siti web dinamici con un potente strumento completo.
