Introduzione
Come le varie parti sono disposte all’interno di una pagina.
Generalmente i layout si distinguono in base al numero di colonne utilizzate per disporre i contenuti. I più comuni so a una(monolitico), due, tre colonne.
Nozioni di base
Il layout è gestito (quasi) interamente tramite CSS.
Per definire il layout, è necessario conoscere:
il box model
elementi di blocco linea
il posizionamento
il box model
elementi di blocco linea
il posizionamento
Elementi blocco e in linea
Gli elementi di blocco strutturano contenuti più estesi di una singola riga(es. paragrafo). Possono contenere altri elementi di blocco, in linea o semplice.
Gli elementi in linea si estendono all’interno di una singola riga di contenuto. Non possono contenere elementi di blocco.
Esempio elemento di linea, Link:
<a href=”http://…”>Repubblica</a>
<a href=”http://…”>Repubblica</a>
Esempio elemento di blocco, Paragrafo:
<p>
Prima lezione di HTML
</br>
Introduzione
</p>
<p>
Prima lezione di HTML
</br>
Introduzione
</p>
Posizionamento
Ci sono quattro tipi di posizionamento che si possono utilizzare, attraverso la proprietà position per controllare la disposizione dei diversi elementi di una pagina:
Statico (static);
Reletivo (relative);
Assoluto (absolute);
Fisso (fixed);
Statico (static);
Reletivo (relative);
Assoluto (absolute);
Fisso (fixed);
Si può ricorrere inoltre alla tecnica del floating, proprietà float.
Posizionamento statico
E’ l’impostazione predefinita: i box che contengono gli elementi seguono l’ordine in cui compaiono nel codice della pagina.
Un box statico è inserito in una sequenza in cui precede o segue immediatamente altri box statici.
Posizionamento relativo
Un box posizionato relativamente viene spostato rispetto alla sua posizione predefinita, nella quale rimane uno spazio vuoto.
L’entità dello spostamento si può controllare attraverso le proprietà “top”, “right”, “bottom” e “left”.
Esempio: Il paragrafo è spostato di 20px da sinistra e dall’alto.
p{
position: relative;
left: 20px;
top: 20px;
}
p{
position: relative;
left: 20px;
top: 20px;
}
La posizione dei box che seguono un box posizionato relativamente viene calcolata rispetto alla sua posizione predefinita (allo spazio vuoto…) e non alla sua posizione effettiva.
Posizionamento assoluto
Un box posizionato in modo assoluto viene spostato rispetto alla posizione effettivamente occupata dal primo box contenitore posizionato in modo assoluto o relativo (in mancanza di un tale elemento, rispetto alla pagina stessa).
L’entità dello spostamento si può controllare attraverso le proprietà “top”, “right”, “bottom” e “left”.
I box assoluti non lasciano spazi vuoti: sono “estratti dal flusso naturale della pagina” e la posizione dei box che li seguono nel codice viene calcolata come se i box assoluti non esistessero affatto.
Posizionamento fisso
Un box posizionato in modo fisso si comporta come un box posizionato in modo assoluto (viene spostato rispetto alla posizione effettiva del primo elemento contenitore posizionato in modo assoluto o relativo ed è estratto dal flusso della pagina), ma risulta fissato rispetto alla finestra del browser, ovvero non si sposta con il resto del contenuto quando si fa scrolling.
Floating
Un box fluttuante viene estratto dal flusso della pagina e spostato verso sinistra o verso destra.
E’ necessario specificare le dimensioni del box!
Esempio:
p {width:200px;float: left;}
img {width:150px;float: right;}
p {width:200px;float: left;}
img {width:150px;float: right;}
Se l’elemento fluttuante non ha una larghezza intrinseca – come ad esempio le immagini è necessario specificarla esplicitamente, tramite la proprietà width.
Il contenuto circostante fluisce intorno al box fluttuante.
Se si vuole che un elemento prenda avvio da sotto il box fluttuante, invece di scorrergli intorno, bisogna applicargli la proprietà “clear”.
Valori della proprietà clear:
• left (vale rispetto ai box fluttuanti a sinistra);
• right (vale rispetto ai box fluttuanti a destra);
• both (vale rispetto ad entrambi i tipi di box fluttuanti).
• left (vale rispetto ai box fluttuanti a sinistra);
• right (vale rispetto ai box fluttuanti a destra);
• both (vale rispetto ad entrambi i tipi di box fluttuanti).
Layout ad una colonna
Creiamo la colonna con un elemento generico <div> che contiene tutti gli elementi figli di <body>
Associamo al <div> un attributo id in modo da poterlo identificare univocamente.
Esempio:
<body>
<div id=”colonna”>
<p> prova </p>
</div>
</body>
<body>
<div id=”colonna”>
<p> prova </p>
</div>
</body>
Passo 1: creare la colonna
In CSS, definiamo la larghezza e la posizione della colonna.
Possiamo definire la larghezza con unità di misura assolute o relative.
Per centrare la colonna, dobbiamo sia centrare il contenuto dell’elemento <body>, (attraverso la proprieta’ textalign) sia definire i margini destro e sinistro della colonna con il valore “auto”, che li imposta automaticamente alla stessa dimensione.
body {
text-align: center;
}
#colonna {
width: 800px;
margin: 0 auto;
text-align: left;
background-color: pink;
}
text-align: center;
}
#colonna {
width: 800px;
margin: 0 auto;
text-align: left;
background-color: pink;
}
Passo 2: strutturare la colonna
Di solito, nei layout a una colonna si distinguono tre sezioni principali: la testata (header), l’area che raccoglie i contenuti principali (main) e il pié di pagina (footer).
In XHTML, definiamo queste sezioni con altrettanti <div>, assegnando ad ognuno un opportuno “id”.
Queste sezioni sono solo indicative: nulla ci vieta di fare a meno di alcune di esse o, al contrario, di crearne di più.
In CSS definiamo le proprietà relative al box model per ciascuna delle sezioni create. Esempio larghezza inferiore alla colonna principale e impostiamo i margini per centrare i <div>
E utile impostare il padding , cosi da lasciare un gradevole spazio intorno ai contenuti.
Layout a due colonne
<div id=“contenitore”>
<div id=“header”>testata</div>
<div id=“colonna1”>colonna1</div>
<div id=“colonna2”>colonna2</div>
<div id=“footer”>piede</div>
</div>
<div id=“header”>testata</div>
<div id=“colonna1”>colonna1</div>
<div id=“colonna2”>colonna2</div>
<div id=“footer”>piede</div>
</div>
In css definiamo allinamento del contenitore(text-align: center;) e le dimensioni di tutti i div.
Per affiancare le colonne: floating.
colonna 1(float: left;)
colonna 2(float: right;)
footer(clear: both;)
colonna 1(float: left;)
colonna 2(float: right;)
footer(clear: both;)
Ricordati che le dimensioni totali di un oggetto comprendono anche margin, border e padding.
Per un menu alternativo in orizzontale:
http://www.htmldog.com/articles/tabs/
http://www.htmldog.com/articles/tabs/
Esempi menu orizzonatali:
http://htmldog.com/examples/tabs1[2/3/4/5/6].html
http://htmldog.com/examples/tabs1[2/3/4/5/6].html
