Progettazione multimediale

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "Progettazione multimediale"

Aniella Pugliese
7 anni fa
Visualizzazioni

1 Progettazione multimediale Le tabelle 1

2 Obiettivi Perché si usano le tabelle Le proprietà delle tabelle Inserimento e modifica delle proprietà 2

3 Perché si usano le tabelle Una pagina Web è formata da testo ed elementi multimediali. Le tabelle permettono un maggior controllo sul posizionamento del testo e degli elementi multimediali presenti nelle pagine. Un layout grafico può essere realizzato utilizzando lo strumento delle tabelle in modo semplice e veloce. 3

4 Le tabelle hanno le stesse caratteristiche principali di quelle dei fogli elettronici (p.es. Excel). Sono formate da: Righe Colonne Celle 4

5 Le tabelle hanno le stesse caratteristiche principali di quelle dei fogli elettronici (p.es. Excel). Sono formate da: Righe Colonne Celle 5

6 Le tabelle hanno le stesse caratteristiche principali di quelle dei fogli elettronici (p.es. Excel). Sono formate da: Righe Colonne Celle 6

7 Le tabelle hanno le stesse caratteristiche principali di quelle dei fogli elettronici (p.es. Excel). Sono formate da: Righe Colonne Celle 7

8 Il codice HTML di una semplicissima tabella Tabella Riga Cella 8

9 Inserire una tabella con Dreamweaver ( Inserisci > Tabella ) Per visualizzare correttamente le celle è necessario che vi sia un qualsiasi dato contenuto. Dreamweaver, in automatico, inserisce uno spazio in caratteri speciali. 9

10 Il Margine celle (cellpadding) indica lo spazio fra il bordo e gli elementi contenuti (p.es. il testo). La spaziatura celle (cellspacing) indica lo spazio tra una cella e l altra. 10

11 L impostazione della larghezza della tabella è molto importante. La larghezza può essere espressa: in pixel (assoluta) in percentuale (relativa) rispetto alla finestra del browser. In questo caso la visualizzazione della tabella e - soprattutto - del suo contenuto si adeguano: alla risoluzione del monitor (800x600, 1024x768, 1280x1024, ecc) e al ridimensionamento della finestra. 11

12 Esempio 1: larghezza della tabella fissata a 1024 px (con ulteriori sistemazioni che vedremo dopo) Con risoluzione del monitor a 1024 x

13 Esempio 1: larghezza della tabella fissata a 1024 px (con ulteriori sistemazioni che vedremo dopo) Con risoluzione del monitor a 800 x

14 Esempio 2: larghezza della tabella fissata a 800 px (con ulteriori sistemazioni che vedremo dopo) Con risoluzione del monitor a 800 x

15 Esempio 2: larghezza della tabella fissata a 800 px (con ulteriori sistemazioni che vedremo dopo) Con risoluzione del monitor a 1024 x

16 Definendo la larghezza della tabella in pixel il ridimensionamento della finestra non cambia il posizionamento degli elementi della pagina e la loro visualizzazione. 16

17 Al contrario, definendo una larghezza in percentuale, la tabella si adegua alla larghezza della finestra. Anche il contenuto, però, si adegua conseguentemente. 17

18 Quando si definisce la larghezza in pixel è necessario tenere presente che il browser se ne mangia un po per la barra di scorrimento laterale. Pertanto non sono disponibili esattamente 1024 px o 800 px (ecc.) ma una quantità inferiore che varia tra browser e browser. Per sicurezza si tolgono 30 pixel. Quindi conviene fissare la larghezza della tabella: NON in 1024 px ma in 994 px NON in 800 px ma in 770 px 18

19 Realizzare una pagina HTML Per eliminare lo spazio a sinistra e in alto che il browser inserisce automaticamente è necessario impostare alcune proprietà del Tag <body> in: ( Elabora > Proprietà di pagina ) Margin Width = 0 Margin Height = 0 Left Margin = 0 Top Margin = 0 Doppi comandi per maggiore compatibilità con diversi browser 19

20 Altre proprietà delle Tabelle Posizione relativa a ciò che contiene la tabella (l intera pagina, un altra tabella, ecc.) Default (a sinistra) Left (a sinistra) Colore di sfondo, colore del bordo, immagine di sfondo Center (al centro) Right (a destra) 20

21 Proprietà di righe e celle Posizione degli elementi contenuti Larghezza (W) e Altezza (H) in % o pixel. p.es.: - 100% - 200px No Wrap: se selezionato il testo non va mai a capo Header: se selezionato il testo diventa centrato e in grassetto Immagine di sfondo, Colore di sfondo, colore del bordo 21

22 Proprietà di righe e celle Una proprietà importante delle celle è quella che permette la loro fusione con altre celle contigue: colspan = numero di colonne unite rowspan = numero di righe unite L icona si attiva quando si selezionano più celle. Cliccandola, le celle si uniscono. 22

23 Proprietà di righe e celle Analogamente, una cella può essere divisa in più celle (incolonnate o allineate) semplicemente cliccando sulla relativa icona e scegliendo le opzioni desiderate. 23

24 Operando opportuni colspan e rowspan si possono realizzare delle strutture adeguate al layout grafico che si intende realizzare. 24

25 Dreamweaver, a volte se non spesso, non risponde adeguatamente alle intenzioni del webmaster. Bisogna imparare a domarlo tenendo conto, per esempio, che: inserisce e calcola automaticamente la larghezza delle celle (spesso, allora, bisogna intervenire per modificarle). per dimensionare le righe e le colonne non conviene trascinare i bordi, ma definire nel pannello delle proprietà le loro larghezze desiderate. a volte inserire una nuova tabella in una cella risolve diversi problemi, anche se non bisogna esagerare con troppe nidificazioni. 25

Documenti analoghi

Corso di HTML. Prerequisiti. Modulo L2 B4 - Le tabelle. Concetto di tabella Coordinate di cella in una tabella. M. Malatesta B4-Le tabelle-06

Corso di HTML. Prerequisiti. Modulo L2 B4 - Le tabelle. Concetto di tabella Coordinate di cella in una tabella. M. Malatesta B4-Le tabelle-06 Corso di HTML Modulo L2 B4 - Le tabelle 1 Prerequisiti Concetto di tabella Coordinate di cella in una tabella 2 1 Introduzione In questa Unità illustriamo il concetto e l uso delle tabelle in HTML. Le