CORSO WEB DESIGN Lezione 2: I linguaggi della grafica web

CORSO WEB CORSO WEB DESIGNDESIGN

Lezione 2: I linguaggi della Lezione 2: I linguaggi della grafica webgrafica web

Il Il server è il computer che consente a tutti coloro che sono connessi alla rete di utilizzare le risorse condivise (dati, programmi e dispositivi hardware).

Quindi Il sito web o le pagine web di solito (anzi sempre), risiedono su un computer, chiamato anche "server" visto che 'serve' le pagine a chi le consulta. Sul server si trova il file in cui sono registrati tutti i dati che consentono agli utenti di accedere alla rete web

Che cos’è un server

InternetInternet URL=URL= Uniform Resources Locator

URL sta per Uniform Resource Locator ed è un path, cioè un percorso che indica in modo univoco dove è situata una risorsa. Ad esempio http://it.answers.yahoo.com indica al server dove deve andare a recuparare la pagina di yahoo answer, il server dopo averla trovata la invia al tuo browser (as esempio internet explorer o firefox) che infine te la visualizza.

InternetInternet

http://www.disney.com/personaggi/pippo.html

SERVER DIRECTORY FILE

Il protocollo è un metodo standard che Il protocollo è un metodo standard che permette la permette la comunicazione tra i comunicazione tra i

processiprocessi (eventualmente su terminali (eventualmente su terminali diversi), cioè un insieme di regole e diversi), cioè un insieme di regole e

procedure da rispettare per emettere e procedure da rispettare per emettere e ricevere dei dati su una rete. ricevere dei dati su una rete.

I PROTOCOLLII PROTOCOLLI

Su internet, i protocolli usati fanno parte Su internet, i protocolli usati fanno parte di un insieme di protocolli collegati fra di un insieme di protocolli collegati fra loro. Questa serie di protocollo si chiamaloro. Questa serie di protocollo si chiamaTCP/IPTCP/IP..



•Il Protocollo TCP

TCP gestisce l'organizzazione dei dati e il controllo della trasmissione. Ridimensiona la grandezza dei dati da inviare, li spezzetta in pacchetti più piccoli e li ricompone nel momento in cui arrivano al computer di destinazione.


•Il Protocollo IP

Il Protocollo IP trasmette i dati e gestisce il traffico fra i diversi computer collegati; impacchetta i dati in uscita e li invia scegliendo la strada migliore per arrivare a destinazione. Il Protocollo IP basa l’invio dei dati su di un sistema di indirizzi numerici univoci


:

•HTTP

•FTP

•ARP

•ICMP

•TCP

•UDP

•SMTP

•Telnet

•NNTP


:

•HTTP

•scopo del protocollo HTTP è di permettere un trasferimento di file (essenzialmente in formato

HTML) localizzati grazie ad una stringa di caratteri dettaURL tra un navigatore (il client) e un server web (detto http d sui terminali UNIX).

•

•NNTP


:

•SMTP

•

protocollo SMTP (Simple Mail Transfer Protocol, tradotto Protocollo Semplice di Trasferimento

della Posta) è il protocollo standard che permette di trasferire la posta da un server ad un altro con

una connessione point to point.

I PROTOCOLLII PROTOCOLLI:

•POP3

•

•protocollo POP (Post Office Protocol tradotto con "protocollo dell'ufficio postale") permette come indicato dal suo nome di andare a recuperare la propria posta su un server remoto (server POP). E' necessario per le persone che, non essendo connesse in permanenza ad internet, devono consultare le proprie mail off-line.

Il formato JPG e il Il formato JPG e il formato GIFformato GIF

I formati che vengono usati nel web supportati da tutti i browser sono di due tipi: JPEG e GIF.

Li esamineremo velocemente entrambi.

Un formato di file è semplicemente un modo per salvare le parti elettroniche che compongono i file di un computer.

I diversi formati strutturano le varie parti in maniera differente.

Il formato JPG ,GIF e Il formato JPG ,GIF e PNGPNG

I formati che vengono usati nel web supportati da tutti i browser sono di due tipi: JPEG e GIF.

Un formato di file è semplicemente un modo per salvare le parti elettroniche che compongono i file di un computer.

I diversi formati strutturano le varie parti in maniera differente.

Il formato jpeg

La sigla JPEG o JPG è l'acronimo di Joint Photographic Experts Group.

Questo tipo di immagine usa una compressione con perdita di dati.

La perdita dei dati consiste nel fatto che alcuni dati che formavano la tua immagine vengono persi durante il processo di compressione.

Questo corrisponde a una perdita di qualità nell'immagine, direttamente proporzionale al livello di compressione che sceglierai.

Possiamo dire che a bassi livelli di compressione la perdita di qualità è praticamente nulla e non si percepisce a occhio nudo, ma se aumentiamo il livello di compressione dobbiamo controllare che l'immagine sia comunque di buona qualità, perché la perdita di dati in questo caso può essere rilevante.

Qualsiasi sia il numero di profondità dei colori dell'immagine sorgente il formato JPEG supporta colori a 24 bit.

Questo tipo di formato va usato per immagini a tinte non piatte, cioè per immagini fotografiche o con immagini con sfumature leggere e continue.

Il formato Jpeg non è sicuramente adatto per il trattamento di immagini vettoriali o contenenti testo.

Questo formato di esportazione (Jpeg) va usato per riportare sul web immagini ottenute tramite scansione di fotografie, e comunque per tutte quelle che necessitano di un numero di colori superiore a 256.

Dato che il formato è a perdita di dati non è una buona soluzione salvare un'immagine JPEG da un'altra immagine JPEG.

La cosa migliore è ottenere immagini JPEG dall'immagine originale.

Il formato gif

La sigla GIF è acronimo di Graphic Interchange Format.

Questo tipo di compressione, al contrario del JPEG non lavora a perdita di dati, ma può esportare solo immagini che contengono al massimo 256 colori.

Se l'originale contiene un numero più elevato di colori, la perdita di qualità sarà significativa.

Il formato GIF usa colori a 8 bit ed è efficace per comprimere immagini vettoriali, geometriche o testo.

Le immagini GIF ti permettono anche di creare delle piccole animazioni, le GIF ANIMATE, perché supportano anche fotogrammi multipli.

I GIF animati si realizzano con semplici tool grafiche e con la tecnica del cartone animato.

Il formato png

Il formato PNG è acronimo di Portable Network Graphic.

Questo tipo di formato non è supportato da tutti i tipi di browser, ma è tuttavia possibile installare un plug-in per visualizzare le immagini PNG.

Questo formato supporta colori fino a 32 bit

E' un tipo di compressione senza perdita di dati, anche per alte profondità di colore. Purtroppo però produce file di grandi dimensioni.

.PNG-8PNG-8 usa colori a 8 bit e usa colori a 8 bit e presenta molte analogie con i file di presenta molte analogie con i file di tipo GIF. Risulta utile per la tipo GIF. Risulta utile per la compressione di aree a tinta unita e compressione di aree a tinta unita e mantiene i dettagli nitidi.mantiene i dettagli nitidi.PNG-24PNG-24 supporta colori a 24 bit supporta colori a 24 bit e presenta molte analogie con i e presenta molte analogie con i file di tipo JPEG. È adatto sia per file di tipo JPEG. È adatto sia per le immagini fotografiche che per le immagini fotografiche che per le immagini geometriche e in più le immagini geometriche e in più ha il vantaggio di supportare la ha il vantaggio di supportare la trasparenza anche su più livelli.trasparenza anche su più livelli.

La risoluzioneLa risoluzione

La dimensione del file di un'immagine è proporzionale alla sua dimensione in pixel, il numero di pixel visualizzato per unità di lunghezza in un'immagine viene chiamato RISOLUZIONE dell'immagine.

La risoluzione delle immagini viene misurata in pixel per pollice.

Nel web la risoluzione dell'immagine è condizionata dalla risoluzione del monitor.

PC: ha una risoluzione del monitor pari a PC: ha una risoluzione del monitor pari a 9696 dpi (punti per pollice) dpi (punti per pollice)

Mac: ha una risoluzione del monitor pari a Mac: ha una risoluzione del monitor pari a 7272 dpi dpi

Il numero di pixel visualizzati per unità Il numero di pixel visualizzati per unità di lunghezza sul monitor variano a di lunghezza sul monitor variano a seconda della macchina che stai usando:seconda della macchina che stai usando:

Se si considera che la risoluzione usata Se si considera che la risoluzione usata per la stampa è di per la stampa è di 300300 pixel per pollice, si pixel per pollice, si comprende quanto sia differente comprende quanto sia differente preparare un'immagine per il web preparare un'immagine per il web piuttosto che un'immagine che debba poi piuttosto che un'immagine che debba poi essere stampata.essere stampata.

Intuitivamente si capisce che se Intuitivamente si capisce che se un'immagine ha una risoluzione più alta un'immagine ha una risoluzione più alta della risoluzione del monitor, questa della risoluzione del monitor, questa apparirà molto più grande delle sue apparirà molto più grande delle sue dimensioni reali.dimensioni reali.

SuggerimentiSuggerimenti Impostare sempre immagini con Impostare sempre immagini con risoluzionerisoluzione a a

7272 dpi, in modo tale da permettere a tutti i tipi dpi, in modo tale da permettere a tutti i tipi di computer di poterle visualizzare di computer di poterle visualizzare correttamente. correttamente.

Se si deve Se si deve ridimensionare un'immagineridimensionare un'immagine, , ricordarsi che nel passaggio da un'alta ricordarsi che nel passaggio da un'alta risoluzione a una bassa risoluzione non c'è risoluzione a una bassa risoluzione non c'è sostanziale perdita di qualità, ma quando si sostanziale perdita di qualità, ma quando si cambia la risoluzione di un'immagine da una cambia la risoluzione di un'immagine da una più bassa a una più alta il rischio è di perdere più bassa a una più alta il rischio è di perdere qualità dell'immagine qualità dell'immagine

Concetti di base dell'HTMLConcetti di base dell'HTML

L’ HTML (Hyper Text Mark-up Language) nasce come linguaggio per la descrizione di testi strutturati.

.

Un file HTML non è altro che un file di testo che può essere creato con un comune editor testuale come il blocco note di windows

Concetti di base Concetti di base dell'HTMLdell'HTML

TAG (Markup TAGs = marcatori)= TAG (Markup TAGs = marcatori)= non sono altro che parole chiave non sono altro che parole chiave contenute all'interno dei simboli contenute all'interno dei simboli "<" "<" (maggiore) e ">"(maggiore) e ">" . I TAG forniscono . I TAG forniscono le indicazioni per la le indicazioni per la formattazione al formattazione al documentodocumento oltre che all'inserimento oltre che all'inserimento di immagini e altri elementi di immagini e altri elementi multimedialimultimediali

Tutti gli elementi ed il contenuto di Tutti gli elementi ed il contenuto di un documento HTML sono un documento HTML sono compresi all'interno dei compresi all'interno dei marcatori marcatori <html> e </html>.<html> e </html>. Il simbolo "/" Il simbolo "/" (slash) indica la fine del TAG. (slash) indica la fine del TAG.

<<TAG DI INIZIO>TAG DI INIZIO>Elemento cui si applica Elemento cui si applica l'istruzionel'istruzione</TAG DI FINE></TAG DI FINE>

Per scrivere codice HTML puoi Per scrivere codice HTML puoi utilizzare qualsiasi editor HTML utilizzare qualsiasi editor HTML testuale, ma anche solo il Blocco Notes testuale, ma anche solo il Blocco Notes di Windows. di Windows.

i siti Web, prima della pubblicazione, i siti Web, prima della pubblicazione, vanno creati in locale, cioè sul tuo hard vanno creati in locale, cioè sul tuo hard disk.disk. Solo in un secondo momento Solo in un secondo momento vengono trasferiti nei server attraverso vengono trasferiti nei server attraverso (in genere) (in genere) programmi di FTPprogrammi di FTP (= File (= File transfer Protocol) mediante passord e transfer Protocol) mediante passord e UserID, per cui nessuno oltre te UserID, per cui nessuno oltre te dovrebbe poter modificare le tue dovrebbe poter modificare le tue pagine. pagine.

Anatomia di una pagina Anatomia di una pagina WebWebIl codice HTML si caratterizza sempre per Il codice HTML si caratterizza sempre per

la presenza al suo interno di tre TAG la presenza al suo interno di tre TAG fondamentali:fondamentali:

<HTML><HTML><HEAD><HEAD><BODY><BODY>

La struttura di base di ogni documento La struttura di base di ogni documento HTML è quindi articolata in questo modo:HTML è quindi articolata in questo modo:

<HTML><HEAD></HEAD><BODY></BODY></HTML>

Progettare una pagina web con notebook

<html>

<head>

<title> Benvenuti nel mio sito </title>

</head>

<body>

entra nel mio sito

</body>

</html>

Il browser sa che deve leggere tutto ciò che è Il browser sa che deve leggere tutto ciò che è contenuto entro i contenuto entro i TAG <HTML>...</HTML>TAG <HTML>...</HTML> come codice HTML ed è in grado di come codice HTML ed è in grado di riconoscere il punto di inizio e quello di riconoscere il punto di inizio e quello di chiusura rispettivamente della testa e del chiusura rispettivamente della testa e del corpo del documento.corpo del documento.

Un documento HTML si divide in due parti Un documento HTML si divide in due parti fondamentali: l'intestazione e il corpo del fondamentali: l'intestazione e il corpo del documento.documento.

<head> = intestazione<head> = intestazione

Gli elementi <head> e </head> sono posti Gli elementi <head> e </head> sono posti immediatamente dopo l'apertura del TAG immediatamente dopo l'apertura del TAG <html> e racchiudono l'intestazione vera e <html> e racchiudono l'intestazione vera e propria del documento. propria del documento.

In questa parte del codice si deve mettere In questa parte del codice si deve mettere tutte le informazioni necessarie al browser tutte le informazioni necessarie al browser per una corretta interpretazione del per una corretta interpretazione del documento, l'utente non le visualizzerà documento, l'utente non le visualizzerà sullo schermo.sullo schermo.

Tali informazioni verranno visualizzate solo Tali informazioni verranno visualizzate solo aprendo la finestra del browser che fa aprendo la finestra del browser che fa visualizzare il codice sorgente.visualizzare il codice sorgente.

L'intestazione fornisce: il titolo della pagina L'intestazione fornisce: il titolo della pagina e le parole chiave per i motori di ricerca. e le parole chiave per i motori di ricerca.

Le parole chiave altro non sono che delle Le parole chiave altro non sono che delle informazioni che vengono passate al informazioni che vengono passate al browser tramite dei TAG specifici, e che browser tramite dei TAG specifici, e che servono ai motori di ricerca per servono ai motori di ricerca per comprendere il contenuto del sito.comprendere il contenuto del sito.

<html><html> <head><head> <title>titolo del documento</title> <title>titolo del documento</title> </head></head> <body><body> </body></body>

</html></html>

La sezione La sezione <BODY><BODY> è il corpo principale è il corpo principale del documento HTML dove vanno inseriti del documento HTML dove vanno inseriti tutti i contenuti che devono apparire nella tutti i contenuti che devono apparire nella pagina web. pagina web.

Vedremo adesso alcune caratteristiche Vedremo adesso alcune caratteristiche generali del corpo del documento, come lo generali del corpo del documento, come lo sfondo della pagina, il colore del testo ed il sfondo della pagina, il colore del testo ed il colore dei collegamenti ipertestuali, che colore dei collegamenti ipertestuali, che possono essere specificate mediante possono essere specificate mediante attributi da aggiungere al tag attributi da aggiungere al tag <BODY>.<BODY>.

Per impostare un colore come sfondo della Per impostare un colore come sfondo della pagina web si usa l'attributo pagina web si usa l'attributo BGCOLORBGCOLOR..

Il tag BODYIl tag BODY

Se vogliamo realizzare una pagina con lo sfondo nero scriveremo allora:

<BODY<BODY BGCOLOR="#000000"BGCOLOR="#000000">>

dove il codice del colore è in formato dove il codice del colore è in formato esadecimale.esadecimale.

Si può indicare il colore mediante il nome Si può indicare il colore mediante il nome in inglese anziché il formato esadecimale:in inglese anziché il formato esadecimale:

<BODY<BODY BGCOLOR="black"BGCOLOR="black">>

possibile impostare come sfondo della possibile impostare come sfondo della pagina web un'immagine in formato GIF o pagina web un'immagine in formato GIF o JPEG utilizzando l'attributo JPEG utilizzando l'attributo BACKGROUNDBACKGROUND secondo la sintassi: secondo la sintassi:

<BODY<BODY BACKGROUND="percorso e BACKGROUND="percorso e nome del file"nome del file">>

Per impostare a priori il colore del testo del Per impostare a priori il colore del testo del testo della pagina si usa l'attributo testo della pagina si usa l'attributo <TEXT><TEXT> secondo la sintassi:secondo la sintassi:<BODY<BODY TEXT="#codice del colore" TEXT="#codice del colore">>

Paragrafi (Tag BR, P, Paragrafi (Tag BR, P, DIV)DIV)

Il tag Il tag <BR><BR> equivale ad un'interruzione di riga equivale ad un'interruzione di riga che non spezza il paragrafo. Infatti, il testo che che non spezza il paragrafo. Infatti, il testo che segue va a capo mantenendo tutte le segue va a capo mantenendo tutte le caratteristiche del testo precedente e senza che caratteristiche del testo precedente e senza che si crei spazio vuoto tra le righe. Il tag <BR> si crei spazio vuoto tra le righe. Il tag <BR> non richiede un corrispondente tag di chiusura, non richiede un corrispondente tag di chiusura, basta inserirlo nel punto in cui si vuole che la basta inserirlo nel punto in cui si vuole che la frase vada a capo.frase vada a capo.

Il tag Il tag <P><P> crea invece un'interruzione di crea invece un'interruzione di paragrafo; il testo successivo va a capo, paragrafo; il testo successivo va a capo, lasciando una riga di spazio vuoto, e può essere lasciando una riga di spazio vuoto, e può essere formattato in maniera diversa rispetto al testo formattato in maniera diversa rispetto al testo precedente. Il tag <P> può essere usato precedente. Il tag <P> può essere usato singolo oppure con la rispettiva chiusura </P>.singolo oppure con la rispettiva chiusura </P>.

FormattazioneFormattazioneI principali tag di formattazione sono:I principali tag di formattazione sono:

<B><B>... ... </B></B> : : testo in grassettotesto in grassetto;;<I><I>... ... </I></I> : : testo in corsivotesto in corsivo;;<U><U>... ... </U></U> : : testo sottolineatotesto sottolineato;;<STRIKE><STRIKE>... ... </STRIKE></STRIKE> : testo barrato o : testo barrato o depennato;depennato;<SUP><SUP>... ... </SUP></SUP> : testo apice;: testo apice;<SUB>... </SUB><SUB>... </SUB> : testo pedice.: testo pedice.

Usare il tag <U>... </U> è sconsigliabile Usare il tag <U>... </U> è sconsigliabile perché un testo sottolineato può creare perché un testo sottolineato può creare confusione con i collegamenti ipertestuali confusione con i collegamenti ipertestuali che solitamente appaiono sottolineati.che solitamente appaiono sottolineati.

Allineamenti di testoAllineamenti di testoPer impostare gli allineamenti di testo che Per impostare gli allineamenti di testo che valgono paragrafo per paragrafo si usa valgono paragrafo per paragrafo si usa l'attributo l'attributo ALIGNALIGN del del tag <P>tag <P> secondo la secondo la sintassi:sintassi:

<P ALIGN="valore">paragrafo da allineare</P>

dove il valore di ALIGN può essere: dove il valore di ALIGN può essere:

leftleft per l'allineamento a sinistra, per l'allineamento a sinistra, centercenter per l'allineamento al centro, per l'allineamento al centro, rightright per quello a destro per quello a destro justifyjustify per l'allineamento giustificato per l'allineamento giustificato

TitoliTitoli

Il tag per definire un titolo è Il tag per definire un titolo è <H><H>... ... </H></H> dove n è un valore che va da 1 a 6. Ciò dove n è un valore che va da 1 a 6. Ciò significa che si possono avere sei livelli di significa che si possono avere sei livelli di titolazione, da titolazione, da <H1><H1> (livello superiore) a (livello superiore) a <H6><H6> (livello inferiore). (livello inferiore).

È importante inserire dei titoli nei testi È importante inserire dei titoli nei testi delle pagine web perché questo delle pagine web perché questo incrementa notevolmente la leggibilità e incrementa notevolmente la leggibilità e perché i motori di ricerca, quando perché i motori di ricerca, quando catalogano i siti web, spesso si basano catalogano i siti web, spesso si basano anche sui titoli presenti nella pagina per anche sui titoli presenti nella pagina per classificarne gli argomenti.classificarne gli argomenti.

Immagini: Il tag IMGImmagini: Il tag IMGPer inserire un'immagine in una pagina Per inserire un'immagine in una pagina HTML basta inserire il tag: HTML basta inserire il tag: <IMG<IMG SRCSRC="nome immagine"="nome immagine">>; questo tag non ; questo tag non ha bisogno di chiusura. ha bisogno di chiusura.

Affinché l'immagine venga visualizzata Affinché l'immagine venga visualizzata nella pagina web bisogna specificarne il nella pagina web bisogna specificarne il nome, l'estensione e l'eventuale percorso. nome, l'estensione e l'eventuale percorso.

Usando il tag in questo modo l'immagine Usando il tag in questo modo l'immagine appare allineata alla base della riga di appare allineata alla base della riga di testo corrispondente, senza spazi testo corrispondente, senza spazi aggiuntivi e mantiene le sue dimensioni aggiuntivi e mantiene le sue dimensioni assolute.assolute.

Adesso vedremo gli attributi del tag <IMG> Adesso vedremo gli attributi del tag <IMG> che ci permettono di personalizzare che ci permettono di personalizzare l'impaginazione dell'immagine. l'impaginazione dell'immagine.

Possiamo definire le dimensioni di Possiamo definire le dimensioni di visualizzazione di un'immagine specificando visualizzazione di un'immagine specificando gli attributi gli attributi WIDTHWIDTH (larghezza in pixel) e (larghezza in pixel) e HEIGHTHEIGHT (altezza in pixel). (altezza in pixel).

<IMG<IMG SRC="image.jpg" WIDTH="100" SRC="image.jpg" WIDTH="100" HEIGHT="50"HEIGHT="50">>

Quando si specificano le dimensioni di Quando si specificano le dimensioni di un'immagine è necessario conoscerne le un'immagine è necessario conoscerne le dimensioni effettive per mantenere dimensioni effettive per mantenere inalterato il rapporto larghezza/altezza inalterato il rapporto larghezza/altezza evitando così di deformare l'immagine. evitando così di deformare l'immagine.

Si può anche aggiungere un bordo intorno Si può anche aggiungere un bordo intorno all'immagine tramite l'attributo all'immagine tramite l'attributo BORDERBORDER che che deve essere espresso in pixel secondo la deve essere espresso in pixel secondo la sintassi:sintassi:<IMG<IMG SRC="image.jpg" BORDER="5" SRC="image.jpg" BORDER="5">>

Un attributo fondamentale del tag <IMG> è ALT (testo alternativo). Grazie a tale attributo si può definire una didascalia associata all'immagine.

La sintassi corretta è:<IMG<IMG SRC="nome immagine" ALT="breve SRC="nome immagine" ALT="breve

descrizione testuale"descrizione testuale">>

<html><head><title> Curriculum-vitae </title></head> <body bgcolor="gray"><font face=Verdana" size"1"><font color="blue"> <h1><a name="sopra">La mia prima pagina web </a> </h2></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></font> </body></html>

Pagina web-Curriculum vitae

Tabelle(<TABLE>)Tabelle(<TABLE>)

Il tag per creare una tabella è Il tag per creare una tabella è <TABLE><TABLE> con il rispettivo </TABLE>. con il rispettivo </TABLE>. Nell'area compresa tra <TABLE> e </TABLE> Nell'area compresa tra <TABLE> e </TABLE> ogni rigaogni riga si definisce con la coppia di tag si definisce con la coppia di tag <TR>....</TR><TR>....</TR> (Table row). (Table row). All'interno di ogni riga si creano le celle All'interno di ogni riga si creano le celle desiderate; desiderate; ogni cellaogni cella si definisce si definisce con la coppia di tag <TD>.....</TD> (Table con la coppia di tag <TD>.....</TD> (Table data). data).

<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>

I FrameI Frame I frame sono entrati ormai nella I frame sono entrati ormai nella consuetudine del web, anche se hanno consuetudine del web, anche se hanno creato intorno alla loro presenza pareri creato intorno alla loro presenza pareri discordanti tra che li ama e chi li odia. discordanti tra che li ama e chi li odia.

La parola frame significa riquadro, La parola frame significa riquadro, cornice. cornice.

Nel codice HTML puoi si possono Nel codice HTML puoi si possono utilizzare i frame all'interno di una pagina utilizzare i frame all'interno di una pagina Web per suddividerla in più riquadri, o Web per suddividerla in più riquadri, o meglio in più pagine HTML. meglio in più pagine HTML.

Regola numero uno: ogni frame è una Regola numero uno: ogni frame è una pagina HTML indipendente.pagina HTML indipendente.

I frame che compongono una pagina web I frame che compongono una pagina web funzionano insieme mediante l'uso di uno o funzionano insieme mediante l'uso di uno o più set di frame. più set di frame.

Il set di frame altro non è che una pagina Il set di frame altro non è che una pagina HTML che definisce la struttura e le HTML che definisce la struttura e le proprietà della pagina Web, comprese le proprietà della pagina Web, comprese le informazioni sul numero di frame informazioni sul numero di frame visualizzati su una pagina, la dimensione visualizzati su una pagina, la dimensione dei frame, l'origine della pagina caricata in dei frame, l'origine della pagina caricata in un frame e altre proprietà definibili. un frame e altre proprietà definibili.

La pagina di un set di frame non viene La pagina di un set di frame non viene visualizzata nei browser, serve solo a visualizzata nei browser, serve solo a memorizzare le modalità di visualizzazione memorizzare le modalità di visualizzazione dei frame.dei frame.

Supponiamo di voler costruire una pagina Supponiamo di voler costruire una pagina web che contiene tre frame. web che contiene tre frame.

Di quante pagine HTML hai bisogno? Di quante pagine HTML hai bisogno?

La risposta è semplice: le pagine che ti La risposta è semplice: le pagine che ti occorrono sono quattro: il file del set di occorrono sono quattro: il file del set di frame e i tre file con il contenuto che viene frame e i tre file con il contenuto che viene visualizzato all'interno dei frame. visualizzato all'interno dei frame.

Quando si progetta una pagina mediante i Quando si progetta una pagina mediante i set di frame, si deve salvare ciascuno di set di frame, si deve salvare ciascuno di questi quattro file per garantire che la questi quattro file per garantire che la pagina funzioni correttamente nel browser.pagina funzioni correttamente nel browser.

I frame vengono generalmente utilizzati I frame vengono generalmente utilizzati perché facilitano la navigazione e perché facilitano la navigazione e l'organizzazione della navigazione di un l'organizzazione della navigazione di un sito internet, a patto di non abusarne e di sito internet, a patto di non abusarne e di saperli gestire nel migliore dei modi. saperli gestire nel migliore dei modi.

Ad esempio, in una pagina Web un frame Ad esempio, in una pagina Web un frame può contenere il menu di navigazione e un può contenere il menu di navigazione e un altro frame può essere riservato al altro frame può essere riservato al contenuto. contenuto.

Poiché il menu di navigazione si trova in Poiché il menu di navigazione si trova in un frame, il visitatore del sito può fare clic un frame, il visitatore del sito può fare clic su una voce di menu e il contenuto viene su una voce di menu e il contenuto viene visualizzato nell'apposito frame senza che visualizzato nell'apposito frame senza che il menu di navigazione venga modificato. il menu di navigazione venga modificato.

In questo modo, gli utenti si orientano più In questo modo, gli utenti si orientano più facilmente all'interno del sito.facilmente all'interno del sito.

Tuttavia, poiché gestire un sito realizzato Tuttavia, poiché gestire un sito realizzato con i frames può risultare complesso, con i frames può risultare complesso, spesso è possibile creare una pagina Web spesso è possibile creare una pagina Web senza frames in grado di fornire lo stesso senza frames in grado di fornire lo stesso effetto di una pagina che utilizza i frames. effetto di una pagina che utilizza i frames.

Ad esempio, se si desidera avere la Ad esempio, se si desidera avere la struttura di navigazione sul lato sinistro struttura di navigazione sul lato sinistro della pagina, è possibile suddividere la della pagina, è possibile suddividere la pagina in due frames oppure includere la pagina in due frames oppure includere la struttura di navigazione sul lato sinistro di struttura di navigazione sul lato sinistro di ogni pagina del sito.ogni pagina del sito.


<html>

<head>


</head>

<body>

Contenuto del mio sito

</body>

</html>

<html>

<head>

<title> Curriculum-vitae </title>

</head>

<body bgcolor="gray">

<font face=Verdana" size"1">

<font color="blue">

<h1><a name="sopra">La mia prima pagina web </a> </h2>

</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>

</font>

</body>

</html>

Disegnare un Disegnare un “template”“template”

body {body {

margin: 0;margin: 0;

padding: 0; padding: 0;

background-color: #636363; background-color: #636363;

font-family: verdana, arial, sans-serif;font-family: verdana, arial, sans-serif;

font-size: 12px;font-size: 12px;

color: #70695A;color: #70695A;

}}

Incollando il codice in un nuovo foglio di stile tramite Incollando il codice in un nuovo foglio di stile tramite Top Style, e agganciandolo ad una pagina in Top Style, e agganciandolo ad una pagina in Dreamweaver, ottenete l’anteprima della pagina Dreamweaver, ottenete l’anteprima della pagina principale del sito.principale del sito.56 Lezione 8


<html>

<head>


</head>

<body>

entra nel mio sito

</body>

</html>

Contenuto tag <body>Contenuto tag <body>

<body><body>

<div id="pagina"><div id="pagina">

<div id="header">Inserire qui il contenuto per <div id="header">Inserire qui il contenuto per id "header"</div>id "header"</div>

</div></div>

</body></body>

Bisogna usare tag div annidati se vogliamo che i Bisogna usare tag div annidati se vogliamo che i box siano contenuti uno nell’altro!! Nel caso box siano contenuti uno nell’altro!! Nel caso dell’esempio il tag con id=“pagina” contiene il dell’esempio il tag con id=“pagina” contiene il nostro primo box con tag id=“header”.nostro primo box con tag id=“header”.

58 Lezione 8


<html>

<head>


</head>

<body>

entra nel mio sito

</body>

</html>


<html>

<head>


</head>

<body>

entra nel mio sito

</body>

</html>

Documents

CORSO WEB DESIGN Lezione 2: I linguaggi della grafica web