Please Wait
Cosa Cerchi?  

Lezione 04 - Frame e Fogli di stile CSS

I Frame

I Frame consentono di dividere una pagina in più sottopagine, o per meglio dire consentono di visualizzare più pagine all'interno della stessa finestra contemporaneamente.
Per vederne il funzionamento creiamo 3 file con i seguenti contenuti:

File frame_a.html
-----------------

<html>
	<head>
		<title>Frame A</title>
	</head>
	<body bgcolor="red">

		<h3>Frame A</h3>

	</body>
</html>


File frame_b.html
-----------------

<html>
	<head>
		<title>Frame B</title>
	</head>
	<body bgcolor="yellow">

		<h3>Frame B</h3>

	</body>
</html>


File Principale.html
--------------------

<html>
	<head>
		<title>Principale</title>
	</head>
	<frameset cols="25%,75%">

	  <frame src="frame_a.html" />
	  <frame src="frame_b.html" />

	</frameset>
</html>

Apriamo il file Principale.html con il browser. Come potete notare la finestra del browsr risulta divisa in due parti verticali contenenti rispettivamente il contenuto della pagina frame_a.html e frame_b.html.

Esempio 1: Frame

Con il tag <frameset> indico che la pagina corrente non ha body (infatti se c'è il tag <frameset> non può esserci il tag <body>) e che il suo contenuto è composto da due sottoframe (tag <frame>) il cui contenuto viene pescato da un'altra pagina html (attributo src del tag <frame>).
L'attributo cols di frameset indica che la finestra è divisa per colonne indicando la percentuale di occupazione di ciascuna.
Se invece utilizzassi l'attributo rows al posto dell'attributo cols otterrei una suddivisione orizzontale della pagina.
La dimensione delle colonne (attributo cols) o delle righe (attributo rows) può: essere espressa anche in pixels anziché in percentuale. Con l'asterisco (*) posso indicare che la colonna (riga) utilizza tutto lo spazio lasciato disponibile dalle altre colonne (righe) indicate.
Proviamo a modificare il file Principale.html come segue:

<html>
	<head>
		<title>Principale</title>
	</head>
	<frameset rows="200,*">

	  <frame src="frame_a.html" />
	  <frame src="frame_b.html" />

	</frameset>
</html>


Esempio 2: Frame
 

Alcuni browser più vecchi non consentono la visualizzazione dei frame. È buona abitudine segnalare all'utente che accede al nostro sito che il contenuto è gestito con i frame e pertanto sarebbe opportuno aggiornare il browser.
Per far questo utilizziamo il tag <noframe>.
Modifichiamo il file Principale.html come segue:

<html>
	<head>
		<title>Principale</title>
	</head>
	<frameset rows="200,*">

	  <frame src="frame_a.html" />
	  <frame src="frame_b.html" />

	  <noframes>
	  <body>
	  Il tuo browser non supporta i frame.
	  Per consultare i contenuti di questo sito è necessario aggiornarlo.
	  </body>
	  </noframes>

	</frameset>

</html>


 

Il tag <frame> ha altri due importantissimi attributi: noresize e name.
Con l'attributo noresize posso indicare che il frame non è ridimensionabile, mentre con l'attributo name posso assegnare un nome al frame per utilizzarlo poi nella navigazione.
Vediamo un esempio completo:

File Pagina_1.html
-----------------

<html>
	<head>
		<title>Pagina 1</title>
	</head>
	<body bgcolor="red">
		<h3>Pagina 1</h3>
	</body>
</html>


File Pagina_2.html
-----------------

<html>
	<head>
		<title>Pagina 2</title>
	</head>
	<body bgcolor="green">
		<h3>Pagina 2</h3>
	</body>
</html>


File Indice.html
-----------------

<html>
	<head>
		<title>Indice</title>
	</head>
	<body bgcolor="yellow">
		<h3>Indice:</h3>
		<ul>
			<li><a href="Pagina_1.html" target="pagine">Pagina 1</a></li>
			<li><a href="Pagina_2.html" target="pagine">Pagina 2</a></li>
		</ul>
	</body>
</html>


File Principale.html
--------------------

<html>
	<head>
		<title>Principale</title>
	</head>
	<frameset cols="25%,75%">

	  <frame name="indice" noresize="noresize" src="Indice.html" />
	  <frame name="pagine" src="Pagina_1.html" />

	</frameset>
</html>

Come si può notare, nella pagina Indice.html ho inserito un elenco puntato con dei link (tag <a>) alle pagine Pagina_1.html e Pagina_2.html.
L'attributo target del tag <a> indica che la pagina richiesta si deve aprire nel frame che porta quel nome (notare appunto la corrispondenza dell'attributo target di <a> con l'attributo name di <frame>).
Ecco cosa abbiamo ottenuto:


Esempio 3: Frame
 

Una bellissima pagina con l'indice di navigazione e le pagine che si aprono a fianco!!

Concludiamo l'argomento frame parlando dei frame "inline" cioé i frame inseriti all'interno dei contenuti di una pagina.
Questi frame si ottengono utilizzando il tag <iframe>.
Vediamo un esempio:

<html>
	<head>
		<title>Pagina 1</title>
	</head>
	<body bgcolor="red">

		<h3>Pagina 1</h3>

		<iframe src="Pagina_2.html" width="50%" height="110" />

	</body>
</html>

Ecco il risultato:

Esempio 2: Frame
 

Gli Stili

Dopo aver concluso le lezioni relative al linguaggio HTML e ai tag principali, vediamo finalmente come migliorare l'aspetto degli elementi delle nostre pagine mediante l'applicazione degli stili.
Gli stili si applicano mediante i CSS (Cascade Style Sheet) ovvero fogli di stile a cascata.
Un foglio di stile può essere definito direttamente nella pagina HTML madiante l'apposito tag <style> all'interno dell'intestazione della pagina (tag <head>).
Vediamo subito un esempio:

<html>
	<head>
		<title>Pagina con Stile</title>
		<style type="text/css">
			body {
				background-color:	red;
				color:			blue;
				font-family:		Arial
			}
		</style>
	</head>
	<body>

		Questa è una pagina con stile!! <br />
		Infatti il testo è blu con font Arial e lo sfondo è rosso.

	</body>
</html>

Nell'esempio abbiamo definito un foglio stile interno al documento HTML che definisce che il corpo (tag <body>) del documento ha lo sfondo (background-color) rosso, il colore (color) e il font (font-family) del testo rispettivamente rosso e Arial.
Possiamo definire l'aspetto di qualsiasi elemento (o tag che dir si voglia) delle nostre pagine, come ad esempio i paragrafi (tag <p>), i titoli (tag <h1>), ecc...
Esempio:

<html>
	<head>
		<title>Pagina con Stile</title>
		<style type="text/css">
			body {
				background-color:	red;
				color:			blue;
				font-family:		Arial
			}

			h1 {
				background-color:	yellow;
				color:			green;
				font-family:		monospace;
				text-decoration:	underlined
			}

			p {
				background-color:	blue;
				color:			red;
				font-family:		Roman;
				font-size:			14px
			}
		</style>
	</head>
	<body>
		Questa è una pagina con stile!! <br />
		Infatti il testo è blu con font Arial e lo sfondo è rosso.

		<h1>I titoli però hanno un altro stile</h1>
		<p>E i paragrafi pure....</p>
	</body>
</html>

Stili esterni alla pagina

Un foglio di stile può essere definito anche in un file esterno (di solito con estensione .css e richiamato da tutte le pagine HTML che devono avere la stessa rappresentazione grafica.
Vediamo come:

File HTML
---------
<html>
	<head>
		<title>Pagina con Stile</title>
		<rel="stylesheet" type="text/css" href="stili.css" />
	</head>
	<body>

		Questa è una pagina con stile!! <br />
		Infatti il testo è blu con font Arial e lo sfondo è rosso.

		<h1>I titoli però hanno un altro stile</h1>

		<p>E i paragrafi pure....</p>

	</body>
</html>

File stili.css
--------------
body {
	background-color:	red;
	color:			blue;
	font-family:		Arial
}

h1 {
	background-color:	yellow;
	color:			green;
	font-family:		monospace;
	text-decoration:	underlined
}

p {
	background-color:	blue;
	color:			red;
	font-family:		Roman;
	font-size:			14px
}


In questo modo posso definire uno stile valido per tutte le pagine del mio sito senza dover copiare in ogni pagina le definizioni degli stili.
 

Stili "in linea"

Lo stile di un elemento può anche essere definito direttamente nell'elemento stesso usando l'apposito attributo style supportato da tutti i tag che hanno una rappresentazione grafica.
Vediamo un esempio:

<html>
  <head>
  	<title>Pagina con Stile in linea</title>
  </head>
  <body>

    <h1 style="background-color: yellow; color: green; font-family: monospace;
    				text-decoration: underlined">
  	Titolo con stile in linea
    </h1>

  	<p style="background-color: blue; color: red; font-family: Roman;
  					font-size: 14px">
  	Paragrafo con stile in linea
  	</p>

  </body>
</html>

Come abbiamo visto gli stili si possono applicare in tre differenti modi. Posso anche utilizzare i tre modi contemporaneamente, ovviamente lo stile in linea prevale su quello definito nel foglio stile.
 

Background

Uno degli stili che si può applicare agli elementi della pagina è , come abbiamo visto, lo sfondo; nella tabella che segue ho riassunto le proprietà dello sfondo che si possono impostare.

Proprietà Descrizione Valori ammessi1 IE F NN W3C
background Proprietà abbreviata per impostare velocemente nell'ordine colore, immagine, ripetizione, aggancio e posizione dello sfondo background-color
background-image
background-repeat
background-attachment
background-position
4 1 6 1
background-attachment Indica se l'immagine impostata come sfondo deve rimanere fissa o muoversi con lo scorrimento della pagina scroll
fixed
4 1 6 1
background-color Colore di sfondo dell'elemento color-rgb
color-hex
color-name
transparent
4 1 4 1
background-image Immagine di sfondo url(URL)
none
4 1 4 1
background-position Posizione dell'immagine di sfondo top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos
4 1 6 1
background-repeat Indica se e come l'immagine di sfondo deve ripetersi repeat
repeat-x
repeat-y
no-repeat
4 1 4 1

NOTA: (1) I valori indicati in corsivo non sono reali ma si riferiscono ad un concetto (Es: color-hex indica che il colore può essere indicato nel formato esadecimale #RRGGBB).

Testo

Le proprietà CSS che agiscono sul testo consentono di modificare il coloredel testo,aumentare o diminuire lo spazio tra i caratteri del testo, decorare il testo, e molto altro.
Nella tabella che segue sono riassunte le proprietà del testo.

Proprietà Descrizione Valori ammessi IE F NN W3C
color Imposta il colore del testo color 3 1 4 1
direction Imposta la direzione del testo ltr
rtl
6 1 6 2
line-height Imposta la distanza tra le linee (interlinea) normal
number
length
%
4 1 4 1
letter-spacing Aumenta o diminuisce lo spazio tra i caratteri normal
length
4 1 6 1
text-align Allinea il testo all'interno di un elemento left
right
center
justify
4 1 4 1
text-decoration Decora il testo none
underline
overline
line-through
blink
4 1 4 1
text-indent Aumenta il rientro della prima linea di un elemento length
%
4 1 4 1
text-transform Trasforma i caratteri del testo in maiuscolo, minuscolo o maiuscoletto none
capitalize
uppercase
lowercase
4 1 4 1
white-space Imposta come gli spazi nel testo debbano essere gestiti normal
pre
nowrap
5 1 4 1
word-spacing Aumenta o diminuisce lo spazio tra le parole normal
length
6 1 6 1

Font

Con le proprietà dei font posso agire sul tipo di carattere utilizzato e sulla sua rappresentazione grafica.
Nella tabella che segue sono riassunte le proprietà del font.

Proprietà Descrizione Valori ammessi IE F NN W3C
font-family
 
Imposta il tipo di font da utilizzare family-name
generic-family
3 1 4 1
font-size>
 
Imposta la dimensione del font xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%
3 1 4 1
font-style
 
Imposta lo stile del font normal
italic
oblique
4 1 4 1
font-variant
 
Visyualizza il testo normale o small-caps normal
small-caps
4 1 6 1
font-weight
 
Imposta il "peso" (grassetto) di un font normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
4 1 4 1

Prossimamente...

Nella prossima lezione vedremo come con gli stili è possibile agire sui bordi, i margini, la spaziatura, la dimesione e il posizionamento degli elementi.
 

Freelance Jobs

Credits

x

Layout e Contenuti © Stefano Pozzati (POZZware.com)
Realizzazione Tecnica e Grafica © Stefano Pozzati (POZZware.com)
Hosting - Aruba (www.aruba.it)
Immagini del titolo © Shunya Yamashita (http://shunyama.web.fc2.com/)
 

Realizzato con:  WebSitter By Pozzware.com Browser compatibili:  Explorer Internet Explorer 6
Firefox Mozilla FireFox 2
Chrome Google Chrome
 
Strumenti:  FCK Editor
JQuery
Valid XHTML 1.0 Transitional CSS Valido!