Le tabelle di layout

Una tabella di layout è un tipo speciale di tabella HTML creata in FrontPage. In questa illustrazione è riportato un esempio di tabella di layout selezionata in visualizzazione Normale.

A differenza delle normali tabelle utilizzate finora, le tabelle di layout offrono speciali vantaggi che facilitano la progettazione di layout di pagina. Un vantaggio evidente è costituito dalla presenza di linguette nella parte superiore di ogni colonna che ne indicano la larghezza in pixel. Anche ai lati della tabella sono presenti linguette con l'altezza delle righe in pixel.

Prima di passare all'illustrazione degli altri vantaggi derivanti dall'utilizzo delle tabelle di layout, verranno descritti i diversi componenti di una tabella.

Di seguito viene riportata l'analisi di una tabella di layout:

  La tabella di layout è la base principale, o "area di disegno", sulla quale viene costruito il layout. Quando è selezionata in visualizzazione Normale, la tabella di layout viene identificata da un bordo verde.

  In una tabella di layout sono presenti celle di layout, ovvero le aree all'interno della tabella che includono contenuto, come testo, immagini e così via. Quando sono selezionate, le celle di layout vengono identificate da un bordo blu.

  All'interno della tabella di layout sono presenti anche celle spaziatore, che non includono contenuto, ma consentono di sommare le larghezze delle colonne contenute della tabella per ottenere la larghezza complessiva della tabella stessa. Questa è una delle regole apprese in Tabelle HTML II. Le celle spaziatore vengono identificate da un colore beige che non è tuttavia visibile nel browser, ma solo in visualizzazione Normale.

Oltre alle finestre di dialogo standard Proprietà tabella e Proprietà cella, con le tabelle di layout è possibile utilizzare speciali riquadri attività orientati in particolare alla progettazione di layout.

Qui è illustrato il riquadro attività Formattazione cella tramite il quale è possibile modificare larghezza, altezza e così via. Sono inoltre disponibili opzioni per applicare la spaziatura interna delle celle e aggiungere dettagli, come il colore dello sfondo e i bordi.

Per chiarezza, le tabelle di layout sono tabelle HTML. Nel codice, una tabella di layout è rappresentata da un tag <table> , una cella di layout è rappresentata da un tag <td> , mentre una cella spaziatore è rappresentata da un tag <td> . Esattamente come era prevedibile. Si tratta di codice HTML che i browser supportano ormai da anni.

La sola differenza è costituita dai commenti inseriti automaticamente da FrontPage nel codice della tabella di layout, analoghi a quello riportato di seguito:

<!--MSTableType="layout"-->

Questi commenti indicano al programma quali tabelle sono tabelle di layout rispetto a quelle normali che non vengono utilizzate a questo scopo. Consentono inoltre agli utenti di Frontpage di usufruire dei vantaggi precedentemente descritti, ovvero le linguette con la larghezza e l'altezza, la capacità di ridimensionare e posizionare le celle e il riquadro attività Formattazione cella.

Nota    Tali commenti non influiscono sulla visualizzazione della pagina nel browser.

Nei corsi precedenti le tabelle sono state inserite tramite il sottomenu Inserisci del menu Tabella. Questa procedura è appropriata per le tabelle semplici.

Quando però si desidera creare una tabella per il layout di una pagina, è preferibile accedere al riquadro attività Tabelle e celle layout. Procedura:

  Dal menu Tabella...

  ...scegliere Tabelle e celle layout.

  Utilizzare quindi il riquadro attività per creare tabelle e celle di layout.

Prima di iniziare a disegnare tabelle e celle di layout, predisporre la pagina impostando alcuni elementi:

Visualizzazione righello    Assicurarsi che il righello sia visibile, come illustrato di seguito. I righelli risulteranno utili per misurare, in pixel, le larghezze e le altezze del layout.

Annullamento margini predefiniti    Anche se non è visualizzato nell'illustrazione, nella parte superiore e a sinistra della pagina è presente un margine predefinito. Annullando tali margini sarà più facile utilizzare il righello.

Visualizzazione griglia    Benché non sia indispensabile, la griglia può essere un'utile guida per i disegni.

Per ulteriori informazioni sull'argomento, effettuare l'esercitazione al termine di questa lezione oppure fare riferimento alla Scheda di riferimento rapido al termine del corso.

Un altro strumento facoltativo ma utile è l'immagine di ricalco.

Si tratta dell'immagine dimostrativa di una pagina Web creata con un programma di grafica, che può essere utilizzata come guida visiva per riprodurre o copiare a ricalco il progetto di una pagina Web .

L'immagine può essere creata dall'utente o da un progettista grafico utilizzando un programma di grafica qualsiasi. L'immagine di ricalco viene quindi impostata in FrontPage in modo che sia visualizzata sullo sfondo della finestra del documento, in visualizzazione Normale, come mostrato nell'illustrazione.

L'immagine di ricalco può essere in formato JPEG, GIF, PNG, WMF o BMP. Non viene visualizzata nel browser, ma solo in FrontPage.

Il primo passaggio per creare un layout consiste nel realizzare la tabella di layout. Per effettuare questa operazione, "disegnare" o trascinare il cursore fino alle dimensioni desiderate. Alcuni suggerimenti per disegnare una tabella di layout:

Prima di iniziare    Pensare alla larghezza da assegnare al layout. Altri utenti potrebbero utilizzare una risoluzione dello schermo inferiore alla propria, quindi una parte del layout potrebbe rimanere nascosta se si imposta una larghezza eccessiva.

Utilizzare i righelli, l'immagine di ricalco o la griglia come guida    Indipendentemente dall'elemento utilizzato, sarà molto più facile posizionare il layout con queste funzionalità.

Importante    È possibile che inizialmente la tabella di layout non venga disegnata in modo perfetto. Nell'esercitazione successiva verrà illustrato come creare e modificare la tabella in base alle proprie esigenze.

Il secondo passaggio consiste nel disegnare le celle di layout, ovvero le sezioni del layout in cui verrà inserito il contenuto. Alcuni suggerimenti per disegnare le celle:

Non è indispensabile che le celle siano disegnate perfettamente.    È sufficiente creare le celle di layout, dopodiché sarà possibile spostarle e ridimensionarle, se necessario.

Larghezza e altezza possono essere specificate solo in pixel    Questo vincolo è dovuto al fatto che la funzionalità delle celle di layout può essere utilizzata solo per progettare tabelle a larghezza fissa e basate su pixel. La sola eccezione è rappresentata dalla tabelle ad adattamento automatico per le quali è possibile impostare la larghezza o l'altezza sul 100% in modo che si adattino allo spazio disponibile. Questa tecnica comune viene utilizzata dopo  avere disegnato le tabelle e le celle di layout.

Sarà inevitabile modificare leggermente le celle create: alcune dovranno essere ridimensionate e altre spostate o spinte nella posizione corretta.

È possibile utilizzare il puntatore del mouse per trascinare i quadratini di ridimensionamento e modificare la cella di layout. Inoltre, come illustrato nell'ultima lezione, è possibile trascinare l'intera cella per spostarla nella posizione desiderata.

Importante    Quando si trascina per ridimensionare o spostare una cella, ogni movimento avverrà automaticamente a incrementi di 10 pixel. Può essere un'impostazione utile, ma talvolta non è necessaria. Per ignorare l'incremento automatico, tenere premuto ALT mentre si ridimensiona o si sposta una cella.

Nota    Esistono altri metodi per ridimensionare e spostare celle di layout, che verranno illustrati nella successiva esercitazione.

Dopo aver disegnato tabelle e celle di layout, sarà naturalmente opportuno inserirvi contenuti.

Questa operazione può essere svolta in vari modi. È possibile digitare testo, utilizzare le opzioni del menu Inserisci o trascinare immagini come mostrato nell'illustrazione.

Si consiglia inoltre di formattare la tabella e le celle di layout con colori di sfondo, spaziatura, bordi e così via.

Dopo avere completato e formattato il layout, scegliere sempre Visualizza anteprima nel browser dal menu File per verificarne l'aspetto.

È inoltre possibile visualizzare la pagina in anteprima scegliendo il pulsante Anteprima nella parte inferiore della finestra del documento. Questo è un metodo molto rapido per vedere l'aspetto finale della pagina.

La visualizzazione Anteprima dipende dalla modalità di visualizzazione della pagina in Internet Explorer. Se si desidera quindi assicurarsi che la pagina venga supportata da altri browser, installarli, quindi utilizzarli per visualizzare la pagina scegliendo il comando Visualizza anteprima nel browser.