Scoprite come utilizzare il pannello CSS Designer per creare o associare i fogli di stile, le media query, i selettori e impostare le proprietà CSS.
Il pannello CSS Designer (Finestra > CSS Designer) è un Ispettore Proprietà CSS che consente di creare "visivamente" stili CSS, file e impostare proprietà, insieme alle media query.
Le seguenti sezioni sono disponibili nell'interfaccia CSS Designer:
Utilizzando CSS Designer, puoi modificare una regola individuale in un foglio di stile CSS (usa la scheda Corrente in CSS Designer), oppure se preferisci, puoi lavorare direttamente nel foglio di stile CSS (usa la scheda Tutto in CSS Designer).
Nel riquadro Origini del pannello CSS Designer, fate clic su 
, quindi fate clic su una delle seguenti opzioni:
In base all'opzione selezionata, viene visualizzata la finestra di dialogo Crea un nuovo file CSS o Associa file CSS esistente.
Fate clic su Sfoglia per specificare il nome del file CSS e, se state creando un file CSS, la posizione in cui salvare il nuovo file.
Effettuate una delle operazioni seguenti:
(Facoltativo) Fate clic su Uso condizionale e specificate la media query da associare al file CSS.
Nel pannello CSS Designer, fate clic su un'origine CSS nel riquadro Origini.
Fate clic su 
nel riquadro @Oggetto multimediale per aggiungere una nuova media query.
Viene visualizzata la finestra di dialogo Definisci media query con l'elenco di tutte le condizioni di media query supportate da Dreamweaver.
Selezionate le condizioni appropriate per le vostre esigenze.
Specificate valori validi per tutte le condizioni che selezionate. In caso contrario, le media query corrispondenti non saranno create correttamente.
Solo l'operazione «And» è supportata per condizioni multiple.
Se aggiungete condizioni di media query mediante il codice, solo le condizioni supportate vengono inserite nella finestra di dialogo Definisci media query. La casella di testo Codice nella finestra di dialogo, tuttavia, visualizza tutto il codice (comprese le condizioni non supportate).
Se fate clic su una media query nella vista Progettazione/Dal vivo, il viewport (riquadro di visualizzazione) si aggiorna per mostrare la media query selezionata. Per visualizzare il viewport a formato intero, fate clic su GLOBALE nel riquadro @Oggetto multimediale.
Nel pannello CSS Designer, seleziona una sorgente CSS nel riquadro Origini o una media query nel riquadro @Media.
Nel riquadro Selettori, fate clic su . In base all'elemento selezionato nel documento, CSS Designer identifica intelligentemente e ti suggerisce il selettore pertinente (fino a tre regole).
Potete effettuare una o alcune delle seguenti operazioni:
Nota: l'opzione Duplica nella media query è disponibile solo se l'origine del selettore selezionato contiene delle media query. Non è possibile duplicare un selettore da un'origine a una media query di un'altra origine.
Ora potete copiare gli stili da un selettore e incollarli in un altro. Potete copiare tutti gli stili oppure copiare solo una categoria di stili specifica, ad esempio Layout, Testo o Bordo.
Fai clic con il pulsante destro del mouse su un selettore e scegli dalle opzioni disponibili:
Fai clic sul selettore desiderato e trascinalo nella nuova posizione con il riquadro Selettori.
Le proprietà sono raggruppate nelle seguenti categorie e sono rappresentate da icone differenti nella parte superiore del riquadro Proprietà:
prima di modificare le proprietà di un selettore CSS, identificate gli elementi associati al selettore CSS con la funzione Inverti Esamina. In questo modo, è possibile valutare se tutti gli elementi evidenziati durante Inverti Esamina richiedono effettivamente le modifiche.
Selezionate la casella di controllo Mostra set per visualizzare solo le proprietà impostate. Per visualizzare tutte le proprietà che è possibile specificare per un selettore, deselezionate la casella di controllo Mostra set.
Per impostare una proprietà, ad esempio width o border-collapse, fate clic sulle opzioni richieste visualizzate accanto alla proprietà nel riquadro Proprietà.
Le proprietà ignorate sono visualizzate con testo barrato.
Utilizzando i controlli relativi ai riquadri nel riquadro Proprietà di CSS Designer, è possibile impostare rapidamente le proprietà relative a margini, riempimento e posizione. Se preferisci il codice, puoi specificare il codice abbreviato per margine e padding nelle caselle di modifica rapida, come mostrato in questo esempio.
Fate clic sui valori e digitate il valore richiesto. Se desideri che tutti e quattro i valori siano uguali e vengano cambiati simultaneamente, fai clic sull'icona di collegamento al centro.
In qualsiasi momento, puoi disabilitare o eliminare valori specifici, ad esempio il valore del margine sinistro, mantenendo i valori destro, superiore e inferiore.
Le proprietà del controllo bordo sono organizzate in schede logiche per aiutarti a visualizzare o modificare rapidamente le proprietà.
Se preferisci il codice, puoi specificare il codice abbreviato per i bordi e il raggio del bordo nella casella di testo di modifica rapida.
Per specificare le proprietà di controllo dei bordi, impostate innanzi tutto le proprietà della scheda “Tutti i lati”. Le altre schede vengono quindi abilitate e le proprietà impostate nella scheda 'Tutti i lati' si riflettono per i singoli bordi.
Quando cambi una proprietà nelle singole schede del bordo, il valore della proprietà corrispondente nella scheda 'Tutti i lati' cambia in 'non definito' (valore predefinito).
Nell'esempio seguente, il colore del bordo è stato impostato su nero e poi cambiato in rosso per il bordo superiore.
Il codice inserito si basa sulla preferenza per la forma abbreviata o estesa.
Nella modalità Esamina, l'attivazione delle schede avviene in base alla priorità delle schede “impostate”. La priorità più elevata è quella della scheda “Tutti i lati”, seguita dalle schede dei bordi superiore, destro, inferiore e sinistro. Ad esempio, se è impostato solo il valore superiore per un bordo, la modalità calcolata sposta il focus alla scheda «Superiore» ignorando la scheda «Tutti i lati» perché quest'ultima non è impostata.
La funzione Disattiva/Attiva proprietà CSS permette di escludere mediante commento parti del codice CSS da CSS Designer senza dover apportare modifiche direttamente al codice. Quando escludete mediante commento parti del codice CSS, potete verificare gli effetti che proprietà e valori particolari hanno sulla pagina.
Quando disattivate una proprietà CSS, Dreamweaver aggiunge dei tag di commento CSS e l'etichetta [disattivato] alla proprietà CSS che avete disattivato. In seguito, potete facilmente riattivare o eliminare la proprietà CSS disattivata, se necessario.
Puoi disattivare o eliminare ogni proprietà utilizzando CSS Designer.
La schermata seguente mostra le icone di disattivazione e di eliminazione per la proprietà height. Queste icone sono visibili quando passate il mouse sopra la proprietà.
Puoi anche utilizzare i controlli di eliminazione e disabilitazione a livello del gruppo di controllo Bordo per applicare queste azioni a tutte le proprietà.
Potete aggiungere o eliminare i selettori e le proprietà CSS tramite le scelte rapide da tastiera. Puoi anche navigare tra i gruppi di proprietà nel pannello Proprietà.
|
Scelta rapida |
Flusso di lavoro |
|
CTRL + Alt + [Maiusc =] |
Aggiunge il selettore (se il controllo è nella sezione del selettore) |
|
CTRL + Alt+ S |
Aggiunge il selettore (se il controllo è in un punto qualsiasi dell’applicazione) |
|
CTRL + Alt + [Maiusc =] |
Aggiunge la proprietà (se il controllo è nella sezione della proprietà) |
|
CTRL + Alt+ P |
Aggiunge la proprietà (se il controllo è in un punto qualsiasi dell’applicazione) |
|
Selezione + Canc |
Elimina il selettore, se è selezionato |
|
CTRL + Alt + (PgSu/PgGiù) |
Salta da una sezione all'altra nel sottopannello delle proprietà |
Molto spesso, un solo selettore CSS è associato a più elementi di pagina. Ad esempio, il testo del contenuto principale di una pagina, dell'intestazione e del testo del piè di pagina può essere associato allo stesso selettore CSS. Quando si modificano le proprietà del selettore CSS, tutti gli elementi associati al selettore sono interessati alla modifica, inclusi quelli che non intendete modificare.
Evidenziazione dal vivo aiuta a identificare tutti gli elementi associati a un selettore CSS. Per modificare un solo elemento o alcuni elementi, potete creare un nuovo selettore CSS per tali elementi e poi modificarne le proprietà.
Per identificare gli elementi di pagina associati a un selettore CSS, passate il mouse sopra il selettore nella vista Dal vivo (con Codice dal vivo disattivato). Dreamweaver evidenzia gli elementi associati con delle righe tratteggiate.
Per bloccare l'evidenziazione degli elementi, fate clic sul selettore. Gli elementi ora sono evidenziati con un bordo blu.
Per rimuovere l'evidenziazione blu intorno agli elementi, fare di nuovo clic sul selettore.
Evidenziazione dal vivo è attivata per impostazione predefinita. Per disattivare l'evidenziazione dal vivo, fate clic su Opzioni vista Dal vivo nella barra degli strumenti Documento e fate clic su Disattiva Evidenziazione dal vivo.
Se modificate un foglio di stile CSS esterno, tutti i documenti ad esso collegati vengono automaticamente aggiornati in base alle modifiche apportate.
Potete esportare i fogli di stile CSS di un documento per creare un nuovo foglio di stile, oppure creare un'associazione o un collegamento a un foglio di stile esterno e applicare gli stili del documento esterno.
Potete associare alle pagine qualsiasi foglio di stile che viene creato o copiato nel sito.
Aprite CSS Designer effettuando una delle seguenti operazioni:
In CSS Designer, fate clic sull'icona + accanto a Origini e selezionate Associa file CSS esistente.
Effettuate una delle operazioni seguenti:
Fate clic sul pulsante Anteprima per verificare che il foglio di stile applichi gli stili desiderati alla pagina corrente.
Se gli stili applicati non sono quelli previsti, fate clic su Annulla per eliminare il foglio di stile. L'aspetto precedente della pagina verrà ripristinato.
Fate clic su OK.
Crea splendidi siti web con Dreamweaver
Progetta, codifica e gestisci siti web dinamici con un potente strumento completo.
