Scaricare la presentazione
La presentazione è in caricamento. Aspetta per favore
1
CORSO Di WEB DESIGN prof. Leonardo Moriello
Lezione 3: i frame
2
Anatomia di una pagina Web
Il codice HTML si caratterizza sempre per la presenza al suo interno di tre TAG fondamentali: <HTML> <HEAD> <BODY> La struttura di base di ogni documento HTML è quindi articolata in questo modo: <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML>
3
Progettare una pagina web con notebook
<html> <head> <title> Benvenuti nel mio sito </title> </head> <body> entra nel mio sito </body> </html>
4
Il browser sa che deve leggere tutto ciò che è contenuto entro i TAG <HTML>...</HTML> come codice HTML ed è in grado di riconoscere il punto di inizio e quello di chiusura rispettivamente della testa e del corpo del documento. Un documento HTML si divide in due parti fondamentali: l'intestazione e il corpo del documento.
5
<head> = intestazione
Gli elementi <head> e </head> sono posti immediatamente dopo l'apertura del TAG <html> e racchiudono l'intestazione vera e propria del documento. In questa parte del codice si deve mettere tutte le informazioni necessarie al browser per una corretta interpretazione del documento, l'utente non le visualizzerà sullo schermo. Tali informazioni verranno visualizzate solo aprendo la finestra del browser che fa visualizzare il codice sorgente.
6
L'intestazione fornisce: il titolo della pagina e le parole chiave per i motori di ricerca.
Le parole chiave altro non sono che delle informazioni che vengono passate al browser tramite dei TAG specifici, e che servono ai motori di ricerca per comprendere il contenuto del sito. <html> <head> <title>titolo del documento</title> </head> <body> </body> </html>
7
Il tag BODY La sezione <BODY> è il corpo principale del documento HTML dove vanno inseriti tutti i contenuti che devono apparire nella pagina web. Vedremo adesso alcune caratteristiche generali del corpo del documento, come lo sfondo della pagina, il colore del testo ed il colore dei collegamenti ipertestuali, che possono essere specificate mediante attributi da aggiungere al tag <BODY>. Per impostare un colore come sfondo della pagina web si usa l'attributo BGCOLOR.
8
Se vogliamo realizzare una pagina con lo sfondo nero scriveremo allora:
<BODY BGCOLOR="#000000"> dove il codice del colore è in formato esadecimale. Si può indicare il colore mediante il nome in inglese anziché il formato esadecimale: <BODY BGCOLOR="black">
9
possibile impostare come sfondo della pagina web un'immagine in formato GIF o JPEG utilizzando l'attributo BACKGROUND secondo la sintassi: <BODY BACKGROUND="percorso e nome del file">
10
Paragrafi (Tag BR, P, DIV)
Il tag <BR> equivale ad un'interruzione di riga che non spezza il paragrafo. Infatti, il testo che segue va a capo mantenendo tutte le caratteristiche del testo precedente e senza che si crei spazio vuoto tra le righe. Il tag <BR> non richiede un corrispondente tag di chiusura, basta inserirlo nel punto in cui si vuole che la frase vada a capo. Il tag <P> crea invece un'interruzione di paragrafo; il testo successivo va a capo, lasciando una riga di spazio vuoto, e può essere formattato in maniera diversa rispetto al testo precedente. Il tag <P> può essere usato singolo oppure con la rispettiva chiusura </P>.
11
Formattazione I principali tag di formattazione sono:
<B>... </B> : testo in grassetto; <I>... </I> : testo in corsivo; <U>... </U> : testo sottolineato; <STRIKE>... </STRIKE> : testo barrato o depennato; <SUP>... </SUP> : testo apice; <SUB>... </SUB> : testo pedice. Usare il tag <U>... </U> è sconsigliabile perché un testo sottolineato può creare confusione con i collegamenti ipertestuali che solitamente appaiono sottolineati.
12
Titoli Il tag per definire un titolo è <H>... </H> dove n è un valore che va da 1 a 6. Ciò significa che si possono avere sei livelli di titolazione, da <H1> (livello superiore) a <H6> (livello inferiore). È importante inserire dei titoli nei testi delle pagine web perché questo incrementa notevolmente la leggibilità e perché i motori di ricerca, quando catalogano i siti web, spesso si basano anche sui titoli presenti nella pagina per classificarne gli argomenti.
13
Immagini: Il tag IMG Per inserire un'immagine in una pagina HTML basta inserire il tag: <IMG SRC="nome immagine">; questo tag non ha bisogno di chiusura. Affinché l'immagine venga visualizzata nella pagina web bisogna specificarne il nome, l'estensione e l'eventuale percorso. Usando il tag in questo modo l'immagine appare allineata alla base della riga di testo corrispondente, senza spazi aggiuntivi e mantiene le sue dimensioni assolute.
14
Il tag <a href> Per inserire un documento in una pagina HTML basta inserire il tag: <a href=“documento.html"> Quindi per creare un link dalla nostra home page .html ad un altra pagina occorre usare questo tag
15
Tabelle(<TABLE>) Il tag per creare una tabella è <TABLE> con il rispettivo </TABLE>. Ogni riga si definisce con la coppia di tag <TR>....</TR> All'interno di ogni riga si creano le celle desiderate; ogni cella si definisce con la coppia di tag <TD>.…..</TD>
16
<title> tabella menù</title> </head>
<head> <title> tabella menù</title> </head> <body> <table border="2"> <tr> <td>pagina 1 </td> <td>pagina 2 </td> <td>pagina 3</td> </tr> </table> <body> </html> PAGINA 1 PAGINA 2 PAGINA 3
17
Pagina web-Curriculum vitae
<html> <head> <title> Curriculum-vitae </title> </head> <body bgcolor="gray"> <font face=Verdana" size"1"> <font color="blue"> <h1>La mia prima pagina web </h1> </font> <h2>Curriculum-vitae</h2> <p><b>cognome e nome:</b> </p> <p><b>professione:</b></p> <p><b>esperienze lavorative:</b></p> <p><a href=contatti.html">contatti</a></p> </body> </html>
18
I Frame I Frames permettono di suddividere la finestra del browser in sezioni separate, ciascuna delle quali può essere aggiornata o contenere dati in modo completamente autonomo rispetto alle altre . Regole fondamentali: 1. ogni frame è una pagina HTML indipendente. 2.. I frame si agganciano ad una pagina principale detta frameset
19
Il framset altro non è che una pagina HTML che definisce la struttura e le proprietà della pagina Web, comprese le informazioni sul numero di frame visualizzati su una pagina, la dimensione dei frame, l'origine della pagina caricata in un frame e altre proprietà definibili.
20
Struttura del FRAMSET
21
Frameset –Home page Frame Menu Frame BANNER Frame BODY
22
http://users.libero.it/luclep/itaint.htm COLORI RGB
BODY(CONTENUTO) MENU BANNER COLORI RGB
23
Supponiamo di voler costruire una pagina web che contiene tre frame.
Di quante pagine HTML hai bisogno? La risposta è semplice: le pagine che ti occorrono sono quattro: il file frameset e i tre file con il contenuto che viene visualizzato all'interno dei frame. Quando si progetta una pagina mediante i set di frame, si deve salvare ciascuno di questi quattro file per garantire che la pagina funzioni correttamente nel browser.
24
Creare un pagina web -creare un documento HTML con il frameset -creare i normali documenti HTML che dovranno essere contenuti in ognuno di questi frame. -Quando una pagina frameset viene scaricata, il browser automaticamente scarica ognuna delle pagine associate -Un frameset è in poche parole un documento HTML che dice al browser come dividere lo schermo in finestre separate.
25
I tag del frameset <FRAMESET>…....</FRAMESET> <Frameset cols> ……< /frameset > (Colonne) <Frameset rows> ……< /frameset > (Righe) L'elemento <frameset> è l'elemento principale, possiede due attributi: rows e cols.
26
Pagina framset <html> <head>
<html> <head> <title>La Mia Pagina Frame</title> </head> <frameset cols="120,*"> <frame src="barra di navigazione.html" name="menu"> <frameset rows="50,*"> <frame src="banner.html" name="banner"> <frame src="presentazione.htm" name="presentazione"> </frameset> </html>
27
Pagina frame -barra di navigazione
<html> <head> <title>barra di navigazione</title> </head> <body bgcolor="9F9FFF"> <font face="verdana"size"1"> <table border="2"> <tr> <td><a href="chi sono.html">chi sono</a></td> </tr> <td><a href="portfolio.html">portfolio</a></td> <td><a href="contatti.html">contatti</a></td> </table> </body> </html> Pagina frame -barra di navigazione CHI SONO PORTFOLIO CONTATTI
28
Pagina frame -Banner <html> <head>
<html> <head> <title> Curriculum vitae </title> </head> <body bgcolor="9F9FFF"> <font face="Verdana"size"1"> <font color="blue"> <h1><a name="sopra">La mia prima pagina Web</a></h2> </font> </body> </html>
29
Pagina frame -Presentazione
<html> <head> <title> Presentazione </title> </head> <body bgcolor="9F9FFF"> <font face="Verdana"size"1"> <font color="black"> <h2><i>Benvenuto nel mio sito<i></h2> <h3>Presentazione</h3> <p><b>cognome e nome:</b></p> <p><b>professione:</b></p> <p><b>esperienze lavorative:</b></p> </font> </body> </html>
Presentazioni simili
