layout e css - ITIS Euganeo

Transcript

Autore:
Nicola Ceccon
Classe:
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.
Layout e CSS
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à.
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.
2
Nicola Ceccon – Itis Euganeo di Este (Pd) – as 2003/2004
Layout e CSS
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
funzioni possono esere molteplici a seconda dei collegamenti inseriti.
5
Modalità di ricerca che prevede il seguire i collegamenti.
e
le
6
Modalità di ricerca che prevede l’accesso diretto dopo una ricerca all’inetrno
del sito con uno strumento sf di ricerca.
Layout e CSS
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.
Layout e CSS
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
Layout e CSS
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...
Layout e CSS
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>0429.12.23.43</b></p>
</body>
</html>
La struttura ad albero risulta essere:
7
Parent-Child in inglese.
Ancestor in inglese.
9
Descandant in inglese.
8
Layout e CSS
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 {
}
h1 {
font-size:20px;
padding-top:10px;
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 alc une. 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
10
px (pixels): unità di misura ideale su monitor. E' quella più usata e facile da comprendere.
Root in inglese.
Layout e CSS
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.
body {
font-size: 12px;
font-family: Arial;
color: Black;
background: White;
}
p,h1,h2 {
font-size: 1em;
}
h1 {
font-size:200%;
padding-top:10px;
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.
Layout e CSS
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.
Layout e CSS
11
Bisogna distinguere tra la larghezza dell'area del contenuto e la larghezza effettiva di un box: la
prima è data dal valore della proprietà Width11 , 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.
#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 40 + 10 + 10 + 200 + 10 + 10 + 40 = 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.
Layout e CSS
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.
Layout e CSS
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
posizio namento 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.
Layout e CSS
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 proprie tà
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'eleme nto
contenitore. Per quelli posizionati relativamente lo spostamento rispetto al lato destro della
posizione originaria.
Layout e CSS
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.
Layout e CSS
16
Layout tipici
Consideriamo i seguenti layout:
1. ALA like.
2. Layout classico.
3. Tre colonne fluido.
Layout e CSS
17
ALA like
Il nome deriva dal design del sito di Alistapart
www.alistapart.com : 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 {
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
#000;
margin-right:15px;
padding-bottom:20px;
}
#destra {
background: Orange;
height: 100%;
}
p,h1,h2 {
}
h1 {
font-size:20px;
padding-top:10px;
color: Orange;
}
h2 {
font-size:16px;
padding-top:10px;
color: black;
}
#destra p {
font-size:14px;
margin-left:30px;
padding-top:5px;
font-family: Verdana;
}
Layout e CSS
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.
<html>
<head>
<title>Layout Classico</title>
</head>
<body>
<div id=”banner”>
<p>Navigazione primaria</p>
</div>
<p>Navigazione locale</p>
</div>
<p>Contenuto</p>
</div>
</body>
</html>
ALA Layout
Layout e CSS
19
Codice CSS
body {
padding:0px;
font-family: Arial;
font-size:12px;
height: 100%;
background:Orange;
}
#destra {
width:80%;
float:left;
background:white;
padding-top:10px;
border-left:1px solid Gray;
padding-left:80px;
padding-right:80px;
}
#sinistra {
width:20%;
float:left;
background:Orange;
padding-top: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 {
font-size:25px;
padding-top:10px;
color: Orange;
}
h2 {
font-size:16px;
padding-top:10px;
color: black; }
#sinistra p {
font-family: Verdana;
font-size:14px;
}
Layout e CSS
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
Layout e CSS
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.
<html>
<head>
<title>Layout 3 colonne fluido</title>
</head>
<body>
<div id=”banner”>
<p>Navigazione primaria</p>
</div>
<p>News</p>
</div>
<div id=”centro”>
<p>Contenuto</p>
</div>
<p>Informazioni o servizi</p>
</div>
</body>
</html>
Layout e CSS
22
Codice CSS
body {
padding:0px;
font-family: Arial;
font-size:12px;
height: 100%;
background:Orange;
}
#destra {
width:20%;
float:left;
background:Orange;
padding-top:10px;
color: Black;
height: 100%;
}
#centro {
width:60%;
float:left;
background:#fff;
padding-top:10px;
border-left:1px solid Gray;
border-right:1px solid Gray;
}
#sinistra {
width:20%;
float:left;
background:White;
padding-top:10px;
height: 100%;
}
#banner {
background:#ffA;
}
p,h1,h2 {
}
h1 {
font-size:40px;
padding-top:10px;
color: orange;
}
h2 {
font-size:16px;
padding-top:10px;
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
}
Titolo:
Layout e CSS
Autore:
Nicola Ceccon
Email:
[email protected]
Classe:
QUINTA INFORMATICA (5IA)
Anno scolastico:
2003/2004
Scuola:
Itis Euganeo
Via Borgofuro, 6
Via Borgofuro 6 - 35042 Este (PD) - Italy
Telefono 0429.21.16 - 0429.34.72
Fax 0429.41.86
http://www.itiseuganeo.it
[email protected]
Note legali:
Diffusione consentita con obbligo di citarne le fonti

layout e css - ITIS Euganeo

Transcript

Documenti analoghi

scarica il file - INSTANT WEBSITES

THEDARKROOM FIRENZE

design - Colico

Esercitazione 2 - Scienze Politiche

Programma di WebDesign

Myspace Layout 150€ Album Artwork 200€ T-shirt Design

Realizzazione di un layout CSS con intestazione, menù di