(b) - Creazione del layout delle pagine nella vista Layout

Transcript

1 (b) - Creazione del layout delle pagine nella vista Layout La vista Layout di Dreamweaver semplifica l utilizzo delle tabelle per il layout delle pagine. Nella vista Layout, è possibile progettare le pagine utilizzando le tabelle come struttura sottostante, evitando i tradizionali inconvenienti legati all impiego delle tabelle. Ad esempio, nella vista Layout è possibile creare celle di layout nella pagina e successivamente spostarle nella posizione desiderata. È inoltre possibile creare layout a larghezza fissa e layout che si adattano automaticamente all intera larghezza della finestra del browser. Nella vista Layout, è possibile definire il layout della pagina prima di aggiungere il contenuto. Ad esempio, è possibile creare una cella che contenga un immagine di intestazione nella parte superiore della pagina, una cella per la barra di navigazione sul lato sinistro della pagina e una cella per il contenuto sul lato destro. prof. Vanda Riboldi pag. 1

2 In alternativa, è possibile creare ciascuna cella al momento dell inserimento del contenuto. Questo metodo offre la massima flessibilità, lasciando una maggior quantità di spazio libero nella tabella di layout per un periodo di tempo più lungo e consentendo di spostare o ridimensionare le celle più facilmente. Quando si crea una cella di layout all esterno di una tabella di layout, in Dreamweaver viene automaticamente creata una tabella di layout come contenitore per la cella. Le celle di layout sono sempre contenute all interno di tabelle di layout. È possibile creare il layout di pagina utilizzando diverse celle di layout all interno di una tabella di layout oppure utilizzare più tabelle di layout per ottenere un layout più sofisticato. L utilizzo di più tabelle di layout consente di mantenere separate le sezioni del layout in modo che le modifiche apportate in una sezione non abbiano effetto sulle altre sezioni. È anche possibile nidificare le tabelle di layout, ovvero inserire una tabella di layout in una tabella di layout esistente. Questa struttura consente di semplificare la tabella quando le righe o le colonne di una parte del layout non sono allineate a quelle di un altra parte del layout. L utilizzo di tabelle di layout nidificate consente ad esempio di creare un layout a due colonne con quattro righe nella colonna di sinistra e tre righe nella colonna di destra. Attivazione e disattivazione della vista Layout Per creare tabelle o celle di layout è necessario passare dalla vista Standard alla vista Layout. Se si crea una tabella nella vista Standard e successivamente si attiva la vista Layout, la tabella di layout risultante potrebbe contenere celle di layout vuote. È possibile che sia necessario eliminare le celle vuote prima di creare o spostare le celle di layout. È consigliabile creare i nuovi layout, da modificare successivamente, nella vista Layout anziché nella vista Standard. Per passare alla vista Layout: 1. Se la vista Struttura non è visibile, scegliete Visualizza > Struttura o Visualizza > Codice e struttura. Non è possibile abilitare o disabilitare la vista Layout dalla vista Codice. 2. Scegliete Visualizza > Vista tabella > Vista Layout oppure fare clic sul pulsante Vista Layout nella categoria Layout della barra Inserisci. Per disattivare la vista Layout: 1. Se la vista Struttura non è visibile, scegliete Visualizza > Struttura o Visualizza > Codice e struttura. Non è possibile abilitare o disabilitare la vista Layout dalla vista Codice. 2. Scegliete Visualizza > Vista tabella > Vista Standard oppure fate clic sul pulsante Vista Standard nella categoria Layout della barra Inserisci. Per disegnare una tabella di layout Celle e tabelle di layout 1. Verificate che la vista Layout sia attiva. Fate clic sul pulsante Disegna tabella layout nella categoria Layout della barra Inserisci. Il puntatore assume la forma di un segno più (+). 2. Posizionate il puntatore nella pagina e trascinare per creare la tabella di layout. Se nella pagina non è presente altro contenuto, la nuova tabella viene posizionata automaticamente nell angolo superiore sinistro della pagina. Attorno alla tabella viene visualizzato un contorno verde. Nella parte superiore di ciascuna tabella creata viene visualizzata una scheda Tabella di layout che semplifica l individuazione e la selezione della tabella. prof. Vanda Riboldi pag. 2

3 È possibile creare una tabella di layout in un area vuota del layout di pagina, attorno a celle o tabelle di layout oppure nidificata all interno di una tabella di layout esistente. Le tabelle non possono sovrapporsi ma possono essere contenute una all interno dell altra. Se nella pagina è già presente del contenuto, la nuova tabella di layout può essere creata solo sotto il contenuto esistente. Se quando si tenta di creare una tabella di layout sotto il contenuto esistente viene visualizzato il puntatore di divieto, provate a ridimensionare la finestra del documento per creare più spazio. Per disegnare una cella di layout all interno di una tabella 1. Verificate che la vista Layout sia attiva, quindi fate clic sul pulsante Disegna cella layout nella categoria Layout della barra Inserisci. Il puntatore assume la forma di un segno più (+). 2. Posizionate il puntatore nella posizione in cui si desidera che inizi la cella e trascinatelo per creare la cella di layout. Per creare più celle senza fare clic ogni volta sul pulsante Disegna cella layout, trascinare tenendo premuto il tasto Ctrl. Attorno alla cella viene visualizzato un contorno blu. Se sono visualizzate le schede tabella layout, la larghezza di ciascuna cella viene visualizzata nell area di intestazione della colonna nella parte superiore della tabella. Viene visualizzata una sottile griglia di linee che si estende dai bordi della nuova cella di layout ai bordi della tabella di layout che la contiene. Le linee visualizzate semplificano l allineamento delle nuove celle alle celle già esistenti e consentono di visualizzare la struttura della tabella HTML sottostante. Dreamweaver allinea automaticamente i bordi delle nuove celle ai bordi delle celle adiacenti. Le celle di layout non possono essere sovrapposte. Se si crea una cella in prossimità del bordo di una tabella, i bordi della cella vengono automaticamente agganciati ai bordi della relativa tabella di layout. Per disabilitare temporaneamente la funzione di attrazione, tenere premuto il tasto Alt mentre si disegna la cella. Per disegnare una cella di layout all esterno di una tabella Seguite le istruzioni precedenti: quando si crea una cella di layout all esterno di una tabella di layout, in Dreamweaver viene automaticamente creata una tabella di layout come contenitore per la cella. Le celle di layout sono sempre contenute all interno di tabelle di layout. Tabelle nidificate È possibile disegnare una tabella di layout all interno di un altra tabella di layout creando una tabella nidificata. Le celle contenute all interno di una tabella nidificata non vengono alterate dalle modifiche apportate nella tabella esterna. È possibile inserire più livelli di tabelle nidificate. Una tabella di layout nidificata non può essere più grande della tabella che la contiene. Per creare una tabella di layout nidificata 1. Verificate di aver attivato la vista Layout e fate clic sul pulsante Disegna tabella layout nella categoria Layout della barra Inserisci. Il puntatore assume la forma di un segno più (+). 2. Posizionate il puntatore all interno dell area vuota (ombreggiata) di una tabella di layout esistente, quindi trascinate per creare la tabella di layout nidificata. Non è possibile creare una tabella di layout all interno di una cella di layout. Una tabella di layout nidificata può essere creata soltanto in un area vuota di una tabella di layout esistente o attorno a celle esistenti. Aggiunta del contenuto ad una cella di layout Nella vista Layout è possibile aggiungere testo, immagini e altro contenuto alle celle di layout allo stesso modo in cui si aggiunge il contenuto alle celle di tabella nella vista Standard. Fate clic nella cella in cui si desidera inserire il contenuto, quindi digitate il testo o inserite altro contenuto. prof. Vanda Riboldi pag. 3

4 Poiché il contenuto può essere inserito solo in una cella di layout, non in un area vuota (ombreggiata) di una tabella di layout, prima di procedere all aggiunta di contenuto è necessario creare delle celle di layout. La cella di layout si espande automaticamente quando si aggiunge del contenuto di dimensioni superiori a quelle della cella. Quando la cella si espande, viene ingrandita anche la colonna contenente la cella ed è possibile che vengano modificate anche le dimensioni delle celle circostanti. L area di intestazione della colonna visualizza la larghezza che appare nel codice seguita dalla larghezza della colonna su schermo indicata tra parentesi. Per aggiungere un immagine ad una cella di layout: 1. Collocate il punto di inserimento nella cella di layout nella posizione in cui si desidera aggiungere l immagine. 2. Effettuate una delle seguenti operazioni: o o Fate clic sul pulsante Immagine nella categoria Comuni della barra Inserisci. Scegliete Inserisci > Immagine. 3. Nella finestra di dialogo di selezione dell immagine, selezionate un file di immagine. Annullamento dell altezza automatica delle celle Quando si crea una cella di layout, Dreamweaver imposta automaticamente l altezza della cella così come è stata disegnata, anche se la cella è vuota. Dopo che è stato inserito il contenuto della cella, può essere opportuno rimuovere le altezze di cella impostate automaticamente. Per annullare l altezza delle celle, effettuate una delle seguenti operazioni: Selezionate Annulla altezza celle dal menu dell intestazione della colonna. Selezionate una tabella di layout facendo clic sulla scheda nella parte superiore della tabella, quindi fate clic sul pulsante Annulla altezza celle nella finestra di ispezione Proprietà. Dreamweaver annulla tutte le altezze specificate nella tabella. Spostamento e ridimensionamento delle celle e tabelle di layout Per correggere il layout delle pagine, è possibile spostare e ridimensionare le celle di layout e le tabelle di layout nidificate. La tabella di layout più esterna può essere soltanto ridimensionata. Le celle di layout non possono essere sovrapposte. Non è possibile spostare o ridimensionare una cella in modo che intersechi i bordi della tabella di layout che la contiene. Una cella di layout non può avere dimensioni inferiori al suo contenuto. Non è possibile ridimensionare una tabella di layout riducendola ad un rettangolo troppo piccolo per contenere tutte le celle. Inoltre, non può essere ridimensionata in modo da sovrapporsi ad altre tabelle o celle. Per ridimensionare una cella di layout: 1. Selezionate una cella facendo clic su un bordo oppure fate clic tenendo premuto Ctrl in un punto qualsiasi della cella. Attorno alla cella vengono visualizzate delle maniglie di selezione. prof. Vanda Riboldi pag. 4

5 Trascinate una maniglia di selezione per ridimensionare la cella. I bordi della cella vengono automaticamente allineati ai bordi delle altre celle. Per spostare una cella di layout: 1. Selezionate una cella 2. Trascinate la cella in un altra posizione all interno della tabella di layout. Per spostare la cella di 1 pixel alla volta, utilizzate i tasti freccia. Per spostare la cella di 10 pixel alla volta, utilizzate i tasti freccia tenendo premuto il tasto Maiusc. Per ridimensionare una tabella di layout: 1. Selezionate una tabella facendo clic sulla scheda nella parte superiore della tabella. Attorno alla tabella vengono visualizzate delle maniglie di selezione. 2. Trascinate una maniglia di selezione per ridimensionare la tabella. I bordi della tabella vengono automaticamente allineati ai bordi delle altre celle e tabelle. Per spostare una tabella di layout: 1. Selezionate una tabella 2. Trascinate la tabella in un altra posizione all interno della pagina (è possibile spostare soltanto le tabelle di layout nidificate all interno di altre tabelle). Per spostare la tabella di 1 pixel alla volta, utilizzate i tasti freccia. Per spostare la tabella di 10 pixel alla volta, utilizzate i tasti freccia tenendo premuto il tasto Maiusc. Formattazione delle tabelle di layout La finestra di ispezione Proprietà consente di impostare le proprietà delle tabelle di layout. Larghezza fissa imposta la larghezza fissa per la tabella. Inserite una larghezza espressa in pixel nella casella di testo adiacente Ridimensionamento auto imposta il ridimensionamento automatico per l ultima colonna di destra della tabella Altezza specifica l altezza della tabella espressa in pixel. MargCell imposta la distanza in pixel tra il contenuto e il bordo di una cella di layout: se si modifica il margine delle celle e viene visualizzato un numero tra parentesi in un intestazione di colonna della tabella di layout, utilizzate l opzione Pareggia larghezza celle descritta più avanti. SpazCell imposta la distanza in pixel tra le celle di layout adiacenti: se si modifica la spaziatura delle celle e viene visualizzato un numero tra parentesi in un intestazione di colonna della tabella di layout, utilizzate l opzione Pareggia larghezza celle descritta più avanti. Il pulsante Annulla altezza celle elimina le impostazioni di altezza per tutte le celle della tabella di layout; in Dreamweaver, l altezza delle celle viene specificata esplicitamente anche per le celle vuote in modo da visualizzare il layout definito dall utente. Di conseguenza, è consigliabile selezionare questa opzione dopo prof. Vanda Riboldi pag. 5

6 aver inserito il contenuto nelle celle di layout, altrimenti le celle vuote potrebbero venire compresse verticalmente. L eliminazione dell altezza delle righe potrebbe produrre risultati imprevisti nelle aree vuote (ombreggiate) della tabella di layout. In particolare, è possibile che alcune righe vuote vengano eliminate dalla tabella e che la tabella venga compressa verticalmente. Il pulsante Pareggia larghezza celle consente di impostare la larghezza delle celle specificata nel codice HTML in modo che corrisponda alla larghezza visualizzata sullo schermo, se il layout comprende celle a larghezza fissa. Quando si seleziona l opzione Pareggia larghezza celle, Dreamweaver reimposta la larghezza specificata nel codice HTML per ogni cella della tabella in modo che corrisponda alla larghezza del contenuto della cella. Ad esempio, se si imposta la larghezza di una cella di layout su 200 pixel e successivamente si aggiunge un contenuto la cui larghezza è di 250 pixel, vengono visualizzati due numeri nell area di intestazione della colonna che include la cella: "200" tra virgolette (larghezza specificata nel codice) e (250) tra parentesi (larghezza della cella visualizzata sullo schermo). Se si seleziona l opzione Pareggia larghezza celle, la larghezza specificata nel codice viene modificata in 250 in modo che corrisponda alla larghezza visiva. Il pulsante Elimina spaziatori elimina gli spaziatori (immagini trasparenti utilizzate per controllare la spaziatura nel layout) dalla tabella di layout. E possibile che l eliminazione degli spaziatori provochi un eccessiva riduzione della larghezza delle colonne della tabella. Si consiglia di non eliminare gli spaziatori a meno che la colonna non contenga del contenuto che consente di mantenere la larghezza desiderata. Il pulsante Elimina nidificazione elimina la tabella di layout nidificata all interno di un altra tabella di layout senza perdere il contenuto. La tabella di layout interna viene eliminata, ma le celle di layout contenute nella tabella diventano parte della tabella esterna. Impostazione della larghezza delle colonne Nella vista Layout, una colonna può avere una larghezza fissa o una larghezza che si espande automaticamente fino ad occupare l intera finestra del browser. Se sono visualizzate le schede tabella layout, la larghezza viene visualizzata nell area di intestazione della colonna nella parte superiore della tabella Le colonne a larghezza fissa hanno una larghezza numerica specifica, ad esempio 300 pixel, che viene indicata nell area di intestazione della colonna (a condizione che la larghezza della colonna consenta la visualizzazione completa delle cifre). La larghezza di una colonna a ridimensionamento automatico viene modificata automaticamente in base alla larghezza della finestra del browser. Nell intestazione delle colonne di questo tipo viene visualizzata una linea ondulata anziché un numero. Se il layout contiene una colonna a ridimensionamento automatico, il layout occupa sempre l intera larghezza della finestra del browser. Una tabella di layout può contenere una sola colonna a ridimensionamento automatico. In genere, la colonna a ridimensionamento automatico contiene il contenuto principale della pagina, mentre le altre colonne del layout vengono impostate su una larghezza fissa. Quando si imposta il ridimensionamento automatico di una colonna, Dreamweaver inserisce degli spaziatori nelle colonne a larghezza fissa per fare in modo che la larghezza delle colonne non venga modificata. Gli spaziatori possono essere disattivati. L immagine spaziatore è un immagine trasparente non visibile nella finestra del browser che consente di controllare la spaziatura. Un immagine spaziatore è costituita da un immagine GIF trasparente a pixel singolo ridimensionata ad una larghezza di un determinato numero di pixel. L impostazione del ridimensionamento automatico di una colonna prima del completamento del layout può avere effetti imprevisti sul layout della tabella. Per impedire che le colonne vengano ingrandite o ridotte in maniera imprevista, è consigliabile completare il layout prima di impostare il ridimensionamento automatico di una colonna e di utilizzare gli spaziatori. Tuttavia, se la colonna contiene del contenuto che consente di mantenere la larghezza desiderata, non è necessario inserire degli spaziatori. prof. Vanda Riboldi pag. 6

7 Per impostare il ridimensionamento automatico di una colonna, effettuate una delle seguenti operazioni: Nella parte superiore di una colonna a larghezza fissa, selezionate Imposta ridimensionamento automatico colonna dal menu dell'intestazione della colonna. Una tabella può contenere una sola colonna a ridimensionamento automatico. Selezionare una cella della colonna interessata. Nella finestra di ispezione Proprietà, fare clic su Ridimensionamento auto. Per impostare la larghezza fissa di una colonna, effettuate una delle seguenti operazioni: Nella parte superiore di una colonna a ridimensionamento automatico, selezionate Imposta larghezza fissa colonna dal menu dell'intestazione della colonna: tale opzione specifica una larghezza per la colonna corrispondente alla larghezza visiva della colonna. Selezionate una cella della colonna interessata: nella finestra di ispezione Proprietà, fate clic su Larghezza fissa e digitare un valore numerico. Se si inserisce un valore numerico inferiore alla larghezza del contenuto della colonna, Dreamweaver imposta automaticamente una larghezza corrispondente alla larghezza del contenuto. Formattazione delle celle di layout La finestra di ispezione Proprietà consente di impostare le proprietà delle celle di layout. 1. Selezionate una cella facendo clic su un bordo oppure facendo clic tenendo premuto Ctrl 2. Aprite la finestra di ispezione Proprietà scegliendo Finestra > Proprietà. 3. Modificate la formattazione della cella impostando le proprietà. Larghezza fissa imposta la larghezza fissa per la cella. Inserite una larghezza espressa in pixel nella casella di testo adiacente Ridimensionamento auto imposta il ridimensionamento automatico per la cella Altezza specifica l altezza della cella espressa in pixel. Sf specifica il colore di sfondo della cella di layout. Fate clic sulla casella e selezionate un colore dal selettore dei colori Orizz imposta l allineamento orizzontale del contenuto della cella. È possibile impostare l allineamento A sinistra, Al centro, A destra o Predefinito. Vert imposta l allineamento verticale del contenuto della cella. È possibile impostare l allineamento In alto, Al centro, In basso, Linea di base o Predefinito. No a capo impedisce il ritorno a capo. Se l opzione è selezionata, la larghezza della cella di layout viene adattata al testo senza continuare il testo su una nuova riga. prof. Vanda Riboldi pag. 7