| Proprietà | Descrizione | Valori |
|---|---|---|
| margin | Consente di specificare, in una sola dichiarazione, tutte le proprietà dei margini di un elemento | nell'ordine: top, right, bottom, left |
| margin-bottom | specifica il margine inferiore di un elemento | un numero seguito dall'unità di misura: px, pt, cm o % |
| margin-left | Specifica il margine sinistro di un elemento | |
| margin-right | specifica il margine destro di un elemento | |
| margin-top | specifica il margine superiore di un elemento |
| Proprietà | Descrizione | Valori |
|---|---|---|
| padding | Consente di specificare, in una sola dichiarazione, tutte le proprietà, dei margini interni di un elemento | nell'ordine: top, right, bottom, left |
| padding-bottom | specifica il margine inferiore interno di un elemento | un numero seguito dall'unità di misura: px, pt, cm o % |
| padding-left | specifica il margine sinistro interno di un elemento | |
| padding-right | specifica il margine destro interno di un elemento | |
| padding-top | specifica il margine superiore interno di un elemento |
L'esercizio che segue costruirà una pagina con un layout organizzato in varie sezioni.
L'intera area del browser è racchiusa in una sezione: <div id="riquadro"> ↓
Fine div colonnaSx
iFrame name="brano"
Fine div argomento
Fine div centro
Fine div riquadro
Preparare la struttura di base della pagina. Nella sezione style dell'head definire gli stili per il body, assegnando dei valori generici alle proprietà principali, quali il colore dello sfondo, il tipo del carattere ecc.
<html>
<head>
<style>
body {
background-color: #FFFFFF;
color: #000000;
text-align: center;
margin: 0px;
padding: 0px;
height: 100%;
font-family: "Times New Roman" Garamond;
font-size: 90%;
}
Tutte le sezioni inserite nella pagina avranno un insieme di proprietà che saranno espresse in riferimento alle proprietà di una sezione principale, che funge da contenitore di tutti gli elementi inseriti nella pagina:
Questo contenitore è di tipo ID (ce ne può essere solo uno nel documento) e anch'esso ha proprietà generiche che potranno essere modificate:
#riquadro {
background-color: #FFFFFF;
text-align: left;
margin-top: 0px;
margin-right: 1px;
margin-bottom: 0px;
margin-left: 0px;
width: 100%;
height: 100%;
}
Il primo elemento collocato nel blocco contenitore (riquadro) ha la funzione di mostrare il titolo della pagina, la descrizione degli argomenti trattati, il logo e altre caratteristiche che fanno parte della copertina.
Questo elemento ha la funzione, quindi di essere l'intestazione della pagina. È un ID:
#intestazione {
background-color: #FFFFFF;
}
Le notizie relative all'autore, i suoi recapiti, ed eventualmente immagini, possono trovar posto in una sezione a pie' pagina o in una zona sottostante il titolo, come in questo caso, dove si definisce l'ID:
#autore {
background-color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
border-top: 2px solid #CCCCCC;
border-bottom: 2px solid #CCCCCC;
padding-left: 1px;
padding-top: 2px;
padding-bottom: 2px;
}
</style>
</head>
Per applicare questi stili si devono creare delle sezioni all'interno del body.
La prima sezione è la <div ID="riquadro">, che si estende fino alla fine del documento. All'interno di questa sezione riquadro si inseriranno le due sezioni intestazione e autore:
<body>
<div id="riquadro">
<div id="intestazione">
Problemi di matematica
</div>
<div id="autore">
Autore: dott. ing. Arch. Mat. scienziato Pinco Pallino
</div>
<p>Il quadrato magico</p>
</div>
</body>
</html>
Il menu verrà inserito anch'esso all'interno di un'area che definisce le proprietà generiche di tutti gli elementi contenuti.
Questa sezione si deve trovare nel contenitore principale (riquadro), all'esterno delle due sezioni già inserite (intestazione e autore). Per prima cosa definire gli stili nella sezione STYLE:
Il menu verrà inserito in un'area che conterrà i link alle pagine del sito. Questo contenitore è una <div ID="colonnaSx">:
#colonnaSx {
background-color: #CCCCCC;
float: left;
width: 15%;
height: 100%;
margin: 0px;
}
Agli elementi contenuti nel menu vengono assegnate le seguenti proprietà:
.menu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
background-color: #FFFFFF;
}
Agli elementi A (cioè ai link) contenuti nella classe menu vengono assegnate le seguenti proprietà:
.menu a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
text-decoration: none;
background-color: #6699FF;
display: block;
width: auto;
border-bottom: 1px solid #000000;
border-right: 0px solid #000000;
border-left: 0px solid #000000;
border-top: 1px solid #FFFFFF;
padding: 1px;
}
Tra le proprietà dei link contenuti in una sezione menu è stata definita la proprietà display: block; che ha lo scopo di trattare l'elemento come se fosse un blocco, cioè occupa tutta la riga. Gli elementi che seguono vengono mostrati su una riga successiva.
Per applicare questi stili si devono definire le corrispondenti DIV nella sezione body:
<div id="colonnaSx">
<div class="menu">
<a href="indovinelli.html" target="brano">indovinelli</a>
<a href="#" target="brano">Aritmetica</a>
<a href="#" target="brano">Geometria</a>
<a href="#" target="brano">Giochi</a>
</div>
</div>
Tutti i link si apriranno in una finestra denominata brano, che non esiste ancora. Solo al primo link è stata fatta corrispondere una pagina che si presume esista nella stessa cartella della pagina che contiene il menu.
Si preferisce che, quando l'utente sceglie un link, la nuova pagina continui a mostrare il menu
Si definisce quindi la sezione destinata a contenere i documenti che vengono aperti, composta da una sezione contenuta all'interno di un'altra:
#centro {
background-color: #FFFFFF;
width: 85%;
height: 100%;
margin: 0px;
}
#argomento {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color: #FFFFFF;
width: 80%;
margin-right: 9px;
margin-left: 9px;
}
Infine, utilizzare le due sezioni:
Affinchè le pagine richiamate dai link si aprano nella stessa finestra del browser, continuando a mostrare l'area dei menu, viene inserito un elemento iframe all'interno del corpo principale della pagina.
Alla proprietà name dell'iframe viene dato il valore brano. In questo modo il link che possiede l'attributo target="brano" mostra la pagina all'interno dell'iframe
In altri termini un iframe si comporta come nua sottofinestra all'interno della finestra del browser.
Le altre proprietà di iframe sono
Completare, quindi il documento con le seguenti due sezioni inserite subito dopo le due precedenti, ma all'interno della sezione principale (riquadro)
<div id="centro">
<div id="argomento">
<iframe name="brano" src="invito.htm" frameborder="0" width="70%" height="100%">
</iframe>
</div>
</div>
La pagina invito.htm richiamata all'interno dell'iframe potrebbe essere la seguente:
<html>
<head>
<title>
</title>
</head>
<body>
Scegli un argomento dal menu laterale. Il divertimento è assicurato.
</body>
</html>
la pagina richiamata dal primo link, indovinelli.htm, potrebbe essere la seguente:
<html>
<head>
<title>
</title>
</head>
<body>
Se una gallina e mezza fa un uovo e mezzo in un giorno e mezzo, quante uova fa una gallina in sei giorni?
</body>
</html>
Resta da definire le pagine per gli altri link del menu