Corso WebMaster

(12) - Tabelle - Realizziamo un Giornale (1° Parte)

Aprite il programma FrontPage Express, nella pagina vuota scrivete Giornale, premi quindi il tasto invio 4 o 5 volte per far scendere il cursore in basso, nell'ultima riga scriviamo Fine. Questo ci servirà per avere vie di fughe dalle tabelle. Salviamo quindi la nuova pagina con il nome giornale.htm.

Posizioniamo quindi il cursore sotto la scritta giornale e inseriamo una tabella con una sola cella come abbiamo fatto nella lezione precedente, clicca con il pulsante destro del mouse sulla tabella appena creata e selezioniamo Proprietà tabella, qui spuntiamo l'opzione Specifica larghezza e inseriamo il numero 780, sotto al numero selezioniamo l'opzione in Pixel, nel riquadro Layout alla voce Allineamento selezioniamo Centrato, poi alle voci Dimensione bordo, Spaziatura interna celle e Spaziatura tra celle impostiamo a tutti il valore 0, alla voce Sfondo personalizzato impostiamo il colore Bianco, vedi le varie impostazioni nell'immagine sotto. Lasciamo le impostazioni Colori personalizzati senza modifiche.

Realizzando la tabella con le impostazioni sopra indicate si avrà una tabella larga quando tutta la pagina alla risoluzione 800x600, e si vedrà ad una risoluzione maggiore centrata nella pagina, mostreremo l'effetto più avanti.

Andiamo adesso in Proprietà pagina, clicca sulla pagina con il pulsante destro del mouse e seleziona Proprietà pagina, quindi clicca in alto sulla voce Sfondo, e imposta il colore Giallo per lo sfondo e il colore Blu scuro per il testo, una volta fatto questo non usciamo dalla finestra, selezioniamo invece l'altra opzione in  alto Margini,

nella finestra Margini dobbiamo spuntare le due caselline Margine superiore e Margine sinistro, il numero 0 impostato e ok, adesso possiamo uscire dalla Proprietà pagina.
La funzione Margini con valore zero indica che il contenuto della pagina andrà a collimare verso i bordi senza avere nessuno spazio di luce, lo capirete in seguito.

Ecco qui sotto come si presenta la pagina attuale, come potete vedere sia il testo che la tabella collima con il bordo dello schermo. Scriviamo dentro la tabella Testo dentro la tabella, quindi scendiamo di alcune righe prima di proseguire, per le righe ho inserito dei trattini voi non fatelo e solo per esempio degli invii alla riga inferiore.

La tabella che abbiamo impostato fino ad ora e la tabella principale, al suo interno andrà posizionato tutto il lavoro successivo.

Posizioniamo nuovamente il cursore sotto la scritta Testo dentro la tabella, e inseriamo una nuova tabella, questa volta di tre colonne, vedi figura sotto

Impostiamo alla tabella da tre colonne le proprietà indicate nella figura sotto

Avremmo quindi la tabella da tre colonne che riempie la pagina in larghezza, a questo punto dimensioniamo le colonne, sempre con il pulsante destro del mouse clicchiamo sulla prima colonna a sinistra e dal menu selezioniamo Proprietà cella

Compare il menu seguente, più o meno e quasi uguale a quella della proprietà tabella, qui dobbiamo modificare solo le impostazioni di larghezza delle celle, spuntiamo quindi la finestrella Specifica larghezza e al suo interno inseriamo il numero 20, e selezioniamo l'opzione in percentuale

Facciamo la stessa cosa con la cella che si trova a destra, impostando anche qui il numero 20, e la stessa cosa alla cella centrale, qui pero dobbiamo inserire il numero 60 e l'aspetto risultante dovrebbe essere come l'esempio qui sotto, la colorazione che ho dato e solo per l'esempio, voi non dovete impostare i colori.

Quando si una la misura in percentuale in una tabella le celle dimensionate dovranno sommare tutte assieme il 100%, esempio 20+60+20=100% se la cella a sinistra fosse stata 30 e la stessa quella a destra, quella centrale dovrà misurare 40 (30+40+30=100) altrimenti si potrebbero avere dei problemi di visualizzazione.

Andiamo a inserire il titolo nella cella centrale, scriviamo Giornale, il testo sta usando il font Times New Roman, questo font e molto adatto alla composizione di un giornale in quanto ha i caratteri molto stretti, selezioniamo la scritta Giornale e dal menu pulsante destro scegliamo la voce Proprietà carattere, impostiamo i valori come qui in figura

quindi tornando alla pagina con il titolo grande, diamo uno spazio fra i caratteri cosi da allargare il titolo come nell'esempio qui sotto, e posizioniamo il titolo al centro utilizzando i pulsanti

Nelle celle a destra e sinistra inseriamo un immagine. Nell'esempio usiamo il logo di Aiutamici, potete prelevarla da questa pagina cliccandoci sopra con il pulsante destro del mouse e selezionando Salva immagine con nome, psizioniamola nella cartella miosito/foto.

Quindi come spiegato nelle lezioni precedenti, posizioniamo il cursore nelle celle dove inserire l'immagine e inseriamo l'immagine cliccando sull'icona Immagine. Dopo averle inserite centrate le immagini nella cella. L'effetto dovrebbe essere il seguente

G i o r n a l e

Andiamo adesso a inserire un altra tabella sotto quella del titolo, posizioniamo il cursore sotto la tabella del titolo e creiamone una da due colonne, impostiamo la tabella a 100 in percentuale e impostiamo le celle a 50 in percentuale ognuna, seguendo i consigli precedenti.  L'effetto voluto e il seguente

G i o r n a l e

Nella cella a sinistra scriviamo Quotidiano di Informatica e Computer, nella cella a destra scriviamo Venerdi 26 Settembre 2003 - 0,76 €, nella cella a destra impostiamo il testo per allinearsi a destra come in esempio

G i o r n a l e

Inseriamo adesso un altra tabella da due colonne come sopra, sotto la tabella precedente, seguendo i consigli precedenti. Dopo aver creato la nuova tabella da due colonne, inseriamo nelle due celle il testo Prova, dopo aver inserito in entrambe le celle il testo prova, torniamo sulla cella a sinistra e premiamo più volte il tasto invio, noterete in questo caso che dando righe ad una delle celle, nell'altra il  testo si centra dentro la cella come in esempio qui sotto

G i o r n a l e

Questo significa che le due celle sono formattate per posizionare il testo al centro della cella in verticale, dobbiamo modificarla, e quindi con il pulsante del mouse destro, dentro la cella selezioniamo Proprietà cella, nella finestra proprietà dobbiamo inserire nell'opzione Allineamento verticale la voce In alto, come vediamo qui sotto

Fine Prima Parte - Continua alla lezione successiva