DREAMWEAVER CS6: STILI CSS

Transcript

1 DREAMWEAVER CS6: STILI CSS Durante la progettazione di siti, una parte cruciale del progetto è il layout. CSS (Cascading Style Sheets) è la principale tecnologia che permetterà di posizionare e disporre gli elementi in tutto il sito. Adobe Dreamweaver come uno strumento di webauthoring ha una buona selezione di strumenti di progettazione dell'interfaccia utente che aiuterà a utilizzare i CSS per il layout sul sito. Posizionamento degli elementi Il tag che permette di posizionare gli elementi in un punto qualsiasi della pagina è div. Vengono creati dei box che possono essere posizionati come un elemento fisso ovunque nella pagina. Per prima cosa selezioniamo l'opzione Disegna div PA dal pannello Inserisci e disegniamo un box sulla pagina (modalità Progettazione). 1

2 Occorre rinominare i tag div tramite il pannello Proprietà (di default il nome assegnato è AppDiv seguito da un numero) Per rinominare i tag div occorre modificare il nome nella casella ID (fare attenzione a non includere spazi o caratteri speciali; inoltre tener presente che i nomi sono casesensitive). Per impostazione predefinita, le caselle sono trasparenti e sono difficili da vedere durante l'anteprima nel browser. Cambiamo provvisoriamente il colore di sfondo per poter vedere il box creato. 2

3 È possibile aggiungere un numero di box qualsiasi e posizionarli con la maniglia in alto a sinistra. I box creasti possono contenere qualsiasi tipo di contenuto: testo, immagini, video ecc. È anche possibile creare layout con box in parte o completamente sovrapposti. L ordine di sovrapposizione è dato dalla proprietà z-index che si trova nel pannello Elementi PA: maggiore è lo z-index più è in primo piano il box. 3

4 C'è un'altra opzione nel pannello Elementi PA che eviterà sovrapposizioni. Spuntando la casella non saranno consentite sovrapposizioni quando si spostano i pannelli sulla pagina. 4

5 Posizione e dimensioni È possibile ridimensionare i box con le 8 maniglie sui bordi È inoltre possibile ridimensionare e posizionare i box utilizzando il pannello Proprietà. Ci sono quattro proprietà che possono essere modificate dal pannello: Sin, Sup, La, Al (sinistra, alto, larghezza e altezza). Le proprietà Left e Top consentono di posizionare esattamente la casella dalla parte superiore sinistra della finestra del browser. Quindi Top: 100px e Left: 100px saranno le distanze dalla parte superiore del browser per 100 pixel e da sinistra 100 pixel. La larghezza e l'altezza determinano la dimensione 5

6 del box nelle varie unità di misura. In questo modo è possibile posizionare e dimensionare in modo molto preciso. Utilizzando gli elementi PA si può facilmente progettare il layout e avere il controllo completo sulla pagina. Come tutto ciò che sarà fissato verso l'angolo in alto a sinistra del sito. 6

7 Il pannello Stili CSS Il pannello Stili CSS consente di gestire le regole e le proprietà CSS che incidono su un elemento di pagina selezionato (modalità Corrente), oppure tutte le regole e le proprietà disponibili nel documento (modalità Tutte). Un pulsante di attivazione nella parte superiore del pannello consente di scegliere la modalità desiderata. Il riquadro Riepilogo per selezione visualizza un riepilogo delle proprietà CSS e dei rispettivi valori per l'elemento attualmente selezionato nel documento attivo. Vengono mostrate le proprietà di tutte le regole applicate direttamente alla selezione. Nel riepilogo sono elencate solo le proprietà impostate. Potete scegliere di visualizzare il riquadro Proprietà in altre due viste. La vista Categoria visualizza le proprietà raggruppate in categorie (ad esempio Carattere, Sfondo, Blocco, Bordo e così via), con le proprietà impostate all'inizio di ciascuna categoria e visualizzate in blu. La vista Elenco visualizza un elenco alfabetico di tutte le proprietà disponibili, anche in questo caso con le proprietà impostate in cima all'elenco e visualizzate in blu. Per passare da una vista all'altra, fate clic sui pulsanti Mostra vista Categoria, Mostra vista Elenco o Mostra solo proprietà impostate, nell'angolo inferiore sinistro del riquadro Proprietà. In tutte le viste, le proprietà impostate sono visualizzate in blu, mentre le proprietà irrilevanti per la selezione vengono visualizzate barrate da una riga rossa. Qualsiasi modifica effettuata nel riquadro Proprietà viene applicata immediatamente, consentendo di visualizzare un'anteprima in tempo reale mentre si lavora. Il pannello Stili CSS in modalità Tutte In modalità Tutte il pannello Stili CSS è suddiviso in due riquadri: Tutte le regole (in alto) e Proprietà (in basso). Il riquadro Tutte le regole visualizza un elenco delle regole 7

8 definite nel documento corrente e di quelle definite nei fogli di stile associati; il riquadro Proprietà consente di modificare le proprietà CSS di qualunque regola selezionata nel riquadro Tutte le regole. Quando selezionate una regola nel riquadro Tutte le regole, tutte le proprietà definite nella regola vengono visualizzate nel riquadro Proprietà. Potete quindi utilizzare il riquadro Proprietà per modificare rapidamente il CSS (incorporato nel documento corrente o collegato in un foglio di stile associato). Per impostazione predefinita, il riquadro Proprietà mostra solo le proprietà che sono state impostate in precedenza, elencate in ordine alfabetico. Pulsanti e viste del pannello Stili CSS In entrambe le modalità (Corrente e Tutte), il pannello Stili CSS contiene tre pulsanti che consentono di cambiare la vista corrente nel riquadro Proprietà (il riquadro inferiore): A. B. Vista Categoria Vista Elenco 8

9 C. Vista Proprietà impostate Vista Categoria Divide le proprietà CSS supportate da Dreamweaver in otto categorie: carattere, sfondo, blocco, bordo, casella, elenco, posizionamento ed estensioni. Ciascuna proprietà di categoria è contenuta in un elenco che potete espandere o comprimere facendo clic sul pulsante più (+) accanto al nome. Le proprietà impostate sono visualizzate (in blu) nella parte superiore dell'elenco. Vista Elenco Visualizza tutte le proprietà CSS supportate da Dreamweaver in ordine alfabetico. Le proprietà impostate sono visualizzate (in blu) nella parte superiore dell'elenco. Vista Proprietà impostate Visualizza solo le proprietà che sono state impostate. È la vista predefinita. Sia in modalità Tutte che Corrente, il pannello Stili CSS contiene anche i seguenti pulsanti: A. Associa foglio di stile B. Nuova regola CSS C. Modifica stile D. Disattiva/Attiva proprietà CSS E. Elimina regola CSS Associa foglio di stile Apre la finestra di dialogo Collega foglio di stile esterno. Selezionate un foglio di stile esterno da collegare a o importare nel documento corrente. Nuova regola CSS Consente di accedere a una finestra di dialogo per la selezione del tipo di stile che si sta creando, ad esempio per creare uno stile di classe, per ridefinire un tag HTML o definire un selettore CSS. Modifica stile Consente di accedere a una finestra di dialogo nella quale potete modificare gli stili nel documento corrente o in un foglio di stile esterno. Elimina regola CSS Elimina la regola selezionata dal pannello Stili CSS e rimuove la formattazione da tutti gli elementi a cui era applicata. Non vengono invece eliminate le proprietà ID o di classe alle quali lo stile fa riferimento. Il pulsante Elimina regola CSS consente anche di scollegare ( dissociare ) un foglio di stile CSS collegato. 9

10 Fate clic con il pulsante destro del mouse (Windows) o fate clic tenendo premuto il tasto Ctrl (Macintosh) nel pannello Stili CSS per aprire il menu di scelta rapida che contiene le opzioni disponibili con i comandi dei fogli di stile CSS. 10