Autore: Nicola Ceccon. Classe: QUINTA INFORMATICA (5IA) Anno scolastico: 2003/2004. Scuola: Itis Euganeo LAYOUT E CSS

Transcript

1 Autore: Classe: Nicola Ceccon QUINTA INFORMATICA (5IA) Anno scolastico: 2003/2004 Scuola: Itis Euganeo LAYOUT E CSS Dispensa Obiettivo di questo documento non è quello di affrontare la tematica, assai vasta, della progettazione dell interfaccia e più in generale del sito in base ai paradigmi dell usabilità e della accessibiltà, ma introdurre alla realizzazione di interfacce con l utilizzo della tecnologia CSS di livello 2 in sostituzione della tecnica, sino ad ora utilizzata ma che è destinata al disuso, delle tabelle Quindi dalle tabelle utilizzate nella realizzazione dell interfaccia per il semplice motivo che permettono la suddivisione della pagina in aree, cioè il posizionamento dei diversi elementi costitutivi di una pagina web, all'uso dei CSS.

2 2 Premessa Una pagina web e quindi un sito e internet nel suo complesso riescono a fornire le informazioni, cioè a soddisfare l esigenza primaria di un utente web che è una esigenza di ricerca/assunzione di informazione (o contenuto), se l interfaccia aiuta il recupero delle informazioni. L interfaccia, quindi, assume in un documento online, come una pagina web, una funzione fondamentale: può essere l elemento che aiuta il recupero del contenuto o quello che lo ostacola, nascondendolo. Diventa quindi vincolante la progettazione dell interfaccia in termini di usabilità 1 e accessibilità 2, ricordando che una di questa caratetteristica non implica l altra e che non sono mutuamente esclusive. Obiettivo di questo documento non è quello di affrontare la tematica, assai vasta, della progettazione dell interfaccia e più in generale del sito in base ai paradigmi dell usabilità e della accessibiltà, ma introdurre alla realizzazione di interfacce con l utilizzo della tecnologia CSS di livello 2 in sostituzione della tecnica, sino ad ora utilizzata ma che è destinata al disuso, delle tabelle. Nel dibattito in corso nelle webzine sul tema Table vs CSS la mia posizione è quella di realizzare con le tabelle quello che non è possibile con i CSS in attesa di sviluppi futuri sia sulla tecnologia CSS che sulle versioni dei browser e sulla loro capacità 3 di supportare in modo univoco e coerente questa tecnologia. Elementi di una pagina Gli elementi basilari di una pagina web, che sono: 1. Il logo. 2. Lo strumento di navigazione principale che permette l accesso alle aree o sezioni del sito, che tipicamente assume la forma di una barra orizzontale di collegamenti, testuali o pittorici, posta sotto il logo. 3. Lo strumentoi di navigazione locale che permette l accesso alle pagini locali dell area attiva, che tipicamente assume la forma di un menu di collegamenti, testuali o pittorici, posti prevalentemente a sinistra della pagina. 1 Facilità di utilizzo per semplicità. 2 Fruibilità del contenuto a persone affette da disabilità per semplicità. 3 E questa la principale critica e riserva da parte dei webdesigner ai CSS e la loro preferenza per le tabelle.

3 3 4. Lo strumento di navigazione supplementare 4 che permette da un lato l accesso alle pagine con uno schema diverso dal browsing 5 e dal searching 6 con l utilizzo di una mappa del sito o di un indice del sito e dall altro il collegamento diretto a pagine di servizio (come l aiuto) oppure a pagine di servizi (come la pagina di contatto). Tipicamente assume la forma di una barra di collegamenti, testuali o pittorici, posti sul margine destro della pagina all altezza del logo. 5. Lo strumento per il searching costituito da una casella di inseriemnto e un pulsante posto di norma a destra del logo in posizione centrale. 6. Il contenuto (testuale e grafico) strutturato in titoli, sottotili e paragrafi. Questi elementi basilari sono posizionati in diversi modi e attualmente il layout più utilizzato prevede la l organizzazione della pagina in tre zone a cui sono assegnate specifiche informazioni e compiti: 1. Nella prima zona, posta in alto, si inserisce un banner contenente il logo, la barra supplementare e alla fine del banner la navigazione principale che fornisce l accesso alle diverse sezioni del sito. 2. Nella seconda zona, posta a sinistra si inserisce la navigazione locale all interno della sezione attiva. 3. Nella terza zona, posta a destra della navigazione locale e che occupa il resto della pagina si inserisce il contenuto della pagina. 4 Esistono altri modi di identificare questo strumento di navigazione e le funzioni possono esere molteplici a seconda dei collegamenti inseriti. 5 Modalità di ricerca che prevede il seguire i collegamenti. 6 Modalità di ricerca che prevede l accesso diretto dopo una ricerca all inetrno del sito con uno strumento sf di ricerca.

4 4 Layout con le tabelle Le tabelle sono utilizzate nella realizzazione dell interfaccia per il semplice motivo che permettono la suddivisione della pagina in aree, cioè il posizionamento dei diversi elementi costitutivi di una pagina web. Il layout tipico visto in precedenza prevede una tabella contenitore di 2 righe e 2 colonne con l unione delle colonne della prima riga e l inserimento sempre nella prima riga di una tabella di 2 righe e due colonne con l unione delle righe della prima colonna (per l inserimento del logo). A partire da questo schema, poi, si possono inserire all interno della seconda riga della tabella contenitore di altre tabelle per la sudivizione in colonne e più in generale per la costituzione di aree per gli elementi. Le colonne o celle poi sono dotate di una cornice o di colori di sfondo per la realizzazione dell effetto contrasto che assieme all effetto di spaziatura (realizzato con le tabelle) sono alla base della progettazione di una interfaccia. La larghezza della tabella contenitore dipende dal tipo di layout. Nel layout liquido la tabella contenitore ha una larghezza impostata in percentuale da 100 (massima area del browser) ad una percentuale inferiore con, in questo caso, allineamento a sinistra oppure al centro della tabella. Nel layout fisso, invece, la larghezza è fissatsa in pixel e la misura dipende dall ipotesi del progettista sulla risoluzione video utilizzata. Nel caso, tipico, di 800x600 pixel si assume una larghezza variabile tra 770 e 780 pixel utilizzando un colore di sfondo o talvolta una immagine per evidenziare la pagina web nel caso di utilizzo di una risoluzione video maggiore. Anche in questo caso l allineamento della tabella è a sinistra oppure al centro. E sicuramente preferibile il layout liquido poiché in caso di risoluzione video diversa (in entrambe le direzzioni) la pagina si adatta, ma spesso i webdesigner preferiscono il layout fisso per avere un maggior controllo dell interfaccia della pagina.

5 5 Layout con CSS Con i CSS non si utilizzano le tabelle per la realizzazione del interfaccia e quindi l uso delle tabelle ritorna ad essere quello originario: una forma di rappresentazione di dati in formato tabellare. I CSS, quindi, non sono utilizzati esclusivamente per la definizione dello stile degli elementi di una pagina, ma anche per la costituzione dell interfaccia permettendo quindi una reale separazione tra il contenuto e la sua struttura dato dall HTML e la presentazione data dai CSS. Per capire la realizzazione di layout con i CSS è necessario affrontare i seguenti concetti di base: 1. Struttura ed ereditarietà di una pagina HTML 2. Unità di misura 3. Il Box model 4. Il posizionamento

6 6 Struttura ed ereditarietà di una pagina HTML Se analizziamo una pagina HTML come struttura, tralasciando il contenuto, ci si accorge che questa è costituita da un insieme di elementi, cioè una pagina è costituita da rettangoli disposti sullo schermo: un paragrafo, una immagine, una tabella, un titolo sono elementi. Gli elementi sono di tre tipi: 1. Blocco 2. Inline 3. Lista Gli elementi blocco sono i rettangoli che possono contenere altri elementi, sia di tipo blocco che di tipo inline. Quando un elemento blocco è inserito nel documento viene automaticamente creata una nuova riga nel flusso del documento. Per esempio nel caso di queste due righe HTML: <h1>titolo</h1> <p>pargrafo</p> le parole "titolo" e "paragrafo" appariranno su due righe diverse, perchè <h1> e <p> sono elementi blocco. Gli elementi inline come un immagine, invece, non possono contenere elementi blocco, ma solo altri elementi inline oltre che il loro stesso tipo di contenuto, essenzialmente testo. Quando un elemento inline è inserito nel documento non viene creata una nuova riga nel flusso del documento. Per esempio nel caso di queste righe HTML: <p> Lorem ipsum dolor sit amet, <b>consectetuer adipiscing</b> elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br>ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.<br>duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum... </p> Il browser visualizza: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum...

7 7 Un documento ha una struttura ad albero: si tratta di una gerarchia ordinata in cui tutti gli elementi hanno tra di loro delle relazioni di parentela. Le relazioni sono: 1. Relazione del tipo genitore-figlio 7 e ogni elemento è genitore o figlio di un altro, cioè quando si scende direttamente di un livello. Un elemento si dice genitore quando contiene altri elementi e si dice figlio quando è racchiuso in un altro elemento. 2. Relazione del tipo antenato 8 -discendente 9 in cui un elemento è antenato di un elemento sotto di due livelli. Per esempio nella seguente pagina: <html> <head> <title>struttura del documento</title> </head> <body> <h1>titolo</h1> <div> <p><a href="contatto.htm">contatta la scuola</a></p> </div> <p>telefono<b> </b></p> </body> </html> La struttura ad albero risulta essere: 7 Parent-Child in inglese. 8 Ancestor in inglese. 9 Descandant in inglese.

8 8 Si può dire che HEAD è figlio di HTML, che A è figlio di P, etc. Tra DIV e A, invece si scende di due livelli: diciamo allora che DIV è un antenato di A e che questo è rispetto al primo un discendente. E importante sottolineare che c'è un solo elemento che racchiude tutti e non è racchiuso: HTML e si dice che esso è l'elemento radice 10. Le relazioni sono importanti perché il meccanismo fondamentale dei CSS è l'ereditarietà: molte proprietà impostate per un elemento sono autamaticamente ereditate dai suoi discendenti. Per esempio nel seguente foglio di stile: body { margin:0px 0px 0px 0px; font-size: 12px; font-family: Arial; color: Black; background: White; p,h1,h2 { margin:0px 30px 10px 30px; h1 { font-size:20px; color: Orange; Il colore nero del testo impostato in BODY è ereditato dai P e H2, mentre H1 reimposta il colore nell arancione. Il FONT arial, come lo sfondo BACKGROUND bianco è ereditato da tutti. Unità di misura Ci sono diverse unità di misura usate per definire dimensioni, spazi o distanze, anche se nella realizzazione delle pagine sono utilizzate solo alcune. Le principali sono: o pt (points - punti): unità di misura tipografica destinata essenzialmente a definire la dimensione dei font o em (em-height): è un unità di misura relativa, 1 em equivale all'altezza media di un carattere per un dato font. o px (pixels): unità di misura ideale su monitor. E' quella più usata e facile da comprendere. 10 Root in inglese.

9 9 Il valore può essere espresso in modo assoluto (770px) oppure relativo utilizzando il percentuale (90%) e un valore espresso in percentuale è da considerare sempre relativo rispetto ad un altro valore, in genere quello espresso per l'elemento parente. Per esempio nel seguente foglio di stile: body { margin:0px 0px 0px 0px; font-size: 12px; font-family: Arial; color: Black; background: White; p,h1,h2 { margin:0px 30px 10px 30px; font-size: 1em; h1 { font-size:200%; color: Orange; La dimensione del testo in P e H2 è pari a 1em e in H1 è il doppio rispetto a 12px impostato in BODY.. Questo comporta che nel caso di personalizzazione della dimensione del carattere nel browser Explorer H1 rimane fisso, mentre variano P e H2. Box model Un elemento blocco è costituito da elementi di base modificabili da proprietà dei CSS ed è fondamentale capire quali sono. Si può immaginare un blocco come 3 cornici innestate: Le cornici sono: 1. Area del contenuto. 2. Bordo del contenuto, cornice interna. 3. Cornice esterna, che è uno spazio di dimensioni variabili che separa un dato elemento da quelli adiacenti. Possiamo infatti definire il margine come la distanza tra il bordo di un elemento e gli elementi adiacenti. Le cornici possono essere sovrapposte o spaziate tra loro a seconda del valore delle proprietà che entrano in gioco nel box model.

10 10 Le proprietà sono: 1. Width, larghezza dell area del contenuto. Se non si imposta alcun valore per la proprietà width o se il valore usato è Auto la larghezza di un box è uguale a quella dell'area del contenuto dell'elemento contenitore. 2. Height, altezza dell area del contenuto o più precisamente definisce la distanza tra il bordo superiore e quello inferiore di un elemento. 3. Padding-top, distanza tra il bordo superiore e il confine superiore dell area del contenuto. 4. Padding-bottom, distanza tra il bordo inferiore e il confine inferiore dell area del contenuto. 5. Padding-right, distanza tra il bordo destro e il confine destro dell area del contenuto. 6. Padding-left, distanza tra il bordo sinistro e il confine sinistro dell area del contenuto. 7. Margin-top, distanza tra il bordo superiore e il confine superiore della cornice esterna 8. Margin-bottom, distanza tra il bordo inferiore e il confine inferiore della cornice esterna. 9. Margin-right, distanza tra il bordo destro e il confine destro della cornice esterna. 10. Margin-left, distanza tra il bordo sinistro e il confine sinistro della cornice esterna.

11 11 Bisogna distinguere tra la larghezza dell'area del contenuto e la larghezza effettiva di un box: la prima è data dal valore della proprietà Width 11, la seconda è data dalla somma delle diverse grandezze: o Altezza: Margin-bottom + Padding-bottom + Height + Padding-top + Margin-top o Larghezza: Margin-left + Padding-left + Width + Padding-left + Margin-left E' possibile ovviamente che i due valori coincidano: accade quando di un particolare elemento non si impostino margini, paddding e bordi; o quando il valore di tali proprietà sia uguale a 0 L altezza in realtà dipende dall altezza dell area del contenuto che dipende da cosa contiene, che ha quindi natura variabile. Il box può essere dotato di: o Un bordo, che è una linea di dimensione, stile e colore variabile che circonda la zona del padding e l'area del contenuto. In questo caso la misura della larghezza dell elemento deve tener conto anche del bordo. o Uno sfondo che comprende oltre all area del contenuto anche il padding. Per esempio nel seguente foglio di stile: #div1 { background: Orange; margin : 40px; border : 10px solid #CC0033; padding : 10px; width : 200px; height : 100px; La larghezza complessiva dell'elemento, cioè l'area che occupa sullo schermo, va dal bordo della finestra fino all''estremo del margine destroè di 320px data da: o = 320 Altra cosa è, invece, la proprietà Width che è di 200px: va quindi intesa come l'area dove trova spazio il testo dell'elemento. 11 Explorer 5/5.5 su Windows interpreta male il concetto di larghezza, infatti intende la larghezza globale dell'elemento, compresi margini, padding e bordi. In Explorer 6 se nel documento, infatti, non si usa nessun DOCTYPE il browser di Microsoft funziona in modalità retro-compatibile, ripetendo bug ed errori dei suoi predecessori. Un comportamento utile per gli sviluppatori che possono così simulare nella versione 6 i comportamenti delle precedenti versioni.

12 12 Per due box adiacenti in senso verticale che abbiano impostato un margine inferiore e uno superiore la distanza non sarà data dalla somma delle due distanze. A prevalere sarà invece la distanza maggiore tra le due. E' il meccansimo del cosiddetto margin collapsing. Tale meccanismo non si applica ai box adiacenti in senso orizzontale. Il valore Auto. Solo per tre proprietà è possibile impostare il valore auto: margini, altezza e larghezza (width). L'effetto è quello di lasciar calcolare al browser l'ammontare di ciascuna di esse in base alla risoluzione dello schermo e alle dimensioni della finestra. Solo i margini possono avere valori negativi. Ciò non è consentito per padding, bordi, altezza e larghezza.

13 13 Posizionamento Position è la proprietà fondamentale per la gestione della posizione degli elementi, di cui determina la modalità di presentazione sulla pagina. Si applica a tutti gli elementi e non è ereditata. Valori o static o absolute o fixed o relative Ciascuno di questi valori merita un spiegazione approfondita da cui emergeranno i concetti di base che governano le regole sul posizionamento. Static E' il valore di default, quello predefinito per tutti gli elementi non posizionati secondo un altro metodo. Rappresenta la posizione normale che ciascuno di essi occupa nel flusso del documento. Absolute L'elemento, o meglio, il box dell'elemento viene rimosso dal flusso del documento ed è posizionato in base alle coordinate fornite con le proprietà top, left, right o bottom. Il posizionamento avviene sempre rispetto al box contenitore dell'elemento. Questo è rappresentato dal primo elemento antenato (ancestor) che abbia un posizionamento diverso da static. Se tale elemento non esiste il posizionamento avviene in base all'elemento radice HTML, che in condizioni standard coincide con l'area del browser che contiene il documento e che ha inizio dall'angolo superiore sinistro di tale area.un elemento posizionato in modo assoluto scrorre insieme al resto del documento. Fixed Usando questo valore il box dell'elemento viene, come per absolute, sottratto al normale flusso del documento. La differenza sta nel fatto che per fixed il box contenitore è sempre il cosiddetto viewport. Con questo termine si intende la finestra principale del borwser, ovvero l'area del contenuto. Altra differenza fondamentale: un box posizionato con fixed non scorre con il resto del documento. Rimane, appunto, fisso al suo post. L'effetto è lo stesso che si può ottenere con l'uso dei frame, in cui una parte della pagina rimane fissa e il resto scorre. Solo che qui il documento è solo uno. Purtroppo, il valore non è supportato da Explorer su Windows.

14 14 Relative L'elemento viene posizionato relativamente al suo box contenitore. In questo caso il box contenitore è il posto che l'elemento avrebbe occupato nel normale flusso del documento. La posizione viene anche qui impostata con le proprietà top, left, bottom, right. Ma qui esse non indicano un punto preciso, ma l'ammontare dello spostamento in senso orizzontale e verticale rispetto al box contenitore. Passiamo ora all'analisi delle proprietà che concretamente definiscono dove un elemento posizionato va a collocarsi, dal momento che che con position stabiliamo solo il come. Le proprietà visibility, clip e z-index influiscono invece sull'aspetto visuale dei box definendone la visibilità e la relazione con gli altri box presenti nella pagina. Top Il significato di top cambia secondo la modalità di posizionamento. Per gli elementi posizionati con absolute o fixed definisce la distanza verticale rispetto al bordo superiore dell'elemento contenitore. Per gli elementi posizionati con relative stabilisce invece l'ammontare dello spostamento rispetto al lato superiore della posizione originaria. In questo caso, usando valori positivi il box viene spostato sotto, mentre con valori negativi lo spostamento avviene verso l'alto. Left Per gli elementi con posizione assoluta o fissa definisce la distanza dal bordo sinistro del box contenitore. Per quelli con posizione relativa stabilisce lo spostamento rispetto al lato sinistro della posizione originaria. Valori positivi spostano l'elemento verso destra, valori negativi verso sinistra. Bottom Per i box con posizione assoluta o fissa definisce la distanza dal bordo inferiore dell'elemento contenitore. Per quelli posizionati relativamente lo spostamento rispetto al lato inferiore della posizione originaria. Right Per i box con posizione assoluta o fissa definisce la distanza dal bordo destro dell'elemento contenitore. Per quelli posizionati relativamente lo spostamento rispetto al lato destro della posizione originaria.

15 15 Z-index Con questa proprietà si imposta l'ordine di posizionamento dei vari elementi sulla base di una scala di livelli. E' un meccanismo simile a quello dei layer sovrapposti di Photoshop ed è utile nel contesto del posizionamento dinamico. In seguito ad un posizionamento, infatti, è possibile che un elemento si sovrapponga ad un altro rendendolo illeggibile. Impostando lo z-index è possibile modificare l'ordine di tutti gli elementi. Le tre proprietà che esamineremo in questa lezione possono modificare radicalmente la presentazione del documento. Sono, dunque, strumenti potenti ma come quei giocattoli un pò pericolosi vanno usati con molta cautela e sapendo bene cosa si fa, tenendo anche conto di serie implicazioni a livello di rendering tra i diversi browser. Display Torniamo per un attimo alla prima lezione. Avevamo chiarito in quella sede la fondamenatle distinzione tra elementi blocco, inline e lista che è alla base di (X)HTML. Bene, quello che sembrava un assioma inconfutabile, può essere sconvolto con l'uso della proprietà display. Essa ha una sola, semplice funzione: definire il trattamento e la presentazione di un elemento. Fin quando non la si usa ognuno segue la sua natura e il suo comportamento standard, ma con display possiamo intervenire su di esso e in certi casi ribaltarlo. La proprietà è ereditata. Nel caso del valore none. L'elemento non viene mostrato. O meglio: è come se non fosse nemmeno presente nel documento, in quanto non genera alcun box. Diversa, come vedremo, la proprietà visibility:hidden, che invece si limita a nascondere l'elemento. Float Con questa proprietà è possibile rimuovere un elemento dal normale flusso del documento e spostarlo su uno dei lati (destro o sinistro con il valore Right o Left) del suo elemento contenitore. Il contenuto che circonda l'elemento scorrerà intorno ad esso sul lato opposto rispetto a quello indicato come valore di float. La proprietà non è ereditata.

16 16 Layout tipici Consideriamo i seguenti layout: 1. ALA like. 2. Layout classico. 3. Tre colonne fluido.

17 17 ALA like Il nome deriva dal design del sito di Alistapart : si tratta di una struttura su due colonne con la navigazione e il logo a sinistra, l area del contenuto a destra e non vi è la presenza l area del banner. La pagina HTML ha la seguente struttura: <html> <head> <title>layout ALA</title> </head> <body> <div id= sinistra > <p>contenuto</p> </div> <div id= destra > <p>menu</p> </div> </body> </html> Codice CSS body { #000; margin:0px 0px 0px 0px; font-family: Courier; font-size: 12px; height: 100%; background: Orange; #sinistra { float:left; width:67%; background:#fff; border-right:2px solid #000; border-bottom:2px solid margin-right:15px; padding-bottom:20px; #destra { background: Orange; height: 100%; p,h1,h2 { margin:0px 30px 10px 30px; h1 { h2 { font-size:20px; color: Orange; font-size:16px; color: black; #destra p { font-size:14px; margin-left:30px; padding-top:5px; font-family: Verdana;

18 18 Layout classico E il più utilizzato e consiste nella suddivisione della pagina in tre zone: intestazione con navigazione primaria, corpo diviso tra navigazione locale e contenuto. Una variante prevede il pié di pagina per la firma: nome dell organizzazione, indirizzi, contatto e data ultimo aggiornamento. La pagina HTML ha la seguente struttura: <html> <head> <title>layout Classico</title> </head> <body> <div id= banner > <p>navigazione primaria</p> </div> <div id= sinistra > <p>navigazione locale</p> </div> <div id= destra > <p>contenuto</p> </div> </body> </html> ALA Layout

19 19 Codice CSS body { margin:0px 0px 0px 0px; padding:0px; font-family: Arial; font-size:12px; height: 100%; background:orange; #destra { width:80%; float:left; background:white; padding-bottom:10px; border-left:1px solid Gray; padding-left:80px; padding-right:80px; #sinistra { width:20%; float:left; background:orange; padding-bottom:10px; height: 100%; #banner { padding:10px 10px 10px 10px; background:#ffa; border-bottom: 2px solid Gray; font-size:40px; color:orange; p,h1,h2 { margin-top:0px; margin-left:10px; margin-right:10px; h1 { h2 { font-size:25px; color: Orange; font-size:16px; color: black; #sinistra p { font-family: Verdana; font-size:14px;

20 20 Nel caso dell introduzione della zona di firma (piè di pagina) si aggiunge al foglio di stile la seguente regola: #pie { float:left; padding:10px 10px 10px 10px; border-top: 1px solid Gray; font-size:12px; background:#ffa; color:orange; width:100%; E si aggiunge alla fine della pagina HTML il codice: <div id= pie > <p>firma</p> </div> Layout classico

21 21 Tre colonne fluido Si tratta di un layout per l home page che prevede la suddivisione della pagina in quattro zone: intestazione con navigazione primaria, corpo diviso in tre colonne con la centrale a larghezza maggiore. Per esempio nella prima colonna (sinistra) si inseriscono le news, nella seconda il contenuto o i collegamenti con testo anticipatorio alle principali sezioni e nella terza (destra) altre informazioni omogenee. Una variante prevede il pié di pagina per la firma: nome dell organizzazione, indirizzi, contatto e data ultimo aggiornamento. La pagina HTML ha la seguente struttura: <html> <head> <title>layout 3 colonne fluido</title> </head> <body> <div id= banner > <p>navigazione primaria</p> </div> <div id= sinistra > <p>news</p> </div> <div id= centro > <p>contenuto</p> </div> <div id= destra > <p>informazioni o servizi</p> </div> </body> </html>

22 22 Codice CSS body { margin:0px 0px 0px 0px; padding:0px; font-family: Arial; font-size:12px; height: 100%; background:orange; #destra { width:20%; float:left; background:orange; padding-bottom:10px; color: Black; height: 100%; #centro { width:60%; float:left; background:#fff; padding-bottom:10px; border-left:1px solid Gray; border-right:1px solid Gray; #sinistra { width:20%; float:left; background:white; padding-bottom:10px; height: 100%; border-bottom: 1px solid Gray; #banner { background:#ffa; border-bottom: 2px solid Gray; p,h1,h2 { margin:0px 10px 10px 10px; h1 { font-size:40px; color: orange; h2 { font-size:16px; color: black; #destra p { font-size:12px #banner h1 { margin:0px; padding:10px #sinistra p { font-family: Times New Roman; font-size:12px; color:orange; font-weight: bold

23 Titolo: Autore: Classe: Layout e CSS Nicola Ceccon nicola.ceccon@istruzione.it QUINTA INFORMATICA (5IA) Anno scolastico: 2003/2004 Scuola: Note legali: Itis Euganeo Via Borgofuro, 6 Via Borgofuro Este (PD) - Italy Telefono Fax informazioni@itiseuganeo.it Diffusione consentita con obbligo di citarne le fonti