Prof. Marina Grisoni

Costruirepagineper il WEB

Prof. Marina Grisoni

La struttura di un sitoLa struttura di un sito

HOMEPAGE

HOMEPAGE

PAGINA 1PAGINA 1

PAGINA 2PAGINA 2

PAGINA 3PAGINA 3 PAGINA 4PAGINA 4

PAGINA 6PAGINA 6

PAGINA 5PAGINA 5

LINK ESTERNILINK ESTERNI

Prof. Marina Grisoni

Elementi della Home PageElementi della Home Page

Menu di navigazione

Banner

Notizie

principali

Indirizzo

Prof. Marina Grisoni

e delle pagine tematichee delle pagine tematiche Menu di navigazione

Titolo pagina

Immagine

Testo

Indirizzo

Banner

Prof. Marina Grisoni

Struttura della Home PageStruttura della Home Page

• La vostra Home Page dovrà contenere:– il banner– il menu di

navigazione tra le pagine

– una immagine che ne richiami il contenuto

– un indirizzo di riferimento fisico o di posta elettronica

BANNER

Menù di navigazione

immagine Presentazione contenuto del sito

Indirizzo e web master

Prof. Marina Grisoni

• Esercitiamoci creando un sito con pagine dedicate al vostro film preferito!

• Cercate immagini e informazioni sul web così da poter copiare contenuti e immagini

• Il banner invece lo disegnerete voi utilizzando Microsoft Paint e facendo attenzione alle dimensioni i pixel!

Il mio film preferito!Il mio film preferito!

Prof. Marina Grisoni

Disegnare una paginaDisegnare una pagina

• Costruire una tabella contenitore specificandone la larghezza

• Nel nostro esempio 700 pixel

• Il pixel è l’unità di misura

700 pixel di larghezza700 pixel di larghezza

Prof. Marina Grisoni

Da evitare…Da evitare…

• Che le pagine non vengano visualizzate completamente sul monitor in larghezza…

• È molto fastidioso doversi spostare con la barra di scorrimento per leggere il contenuto di una pagina troppo larga

Prof. Marina Grisoni

Dentro il contenitoreDentro il contenitore

• Inserire nella prima tabella

• una seconda tabella di 4 righe e 2 colonne

• Unire le colonne dello spazio banner, del menu di navigazione e dell’ultima riga

BannerBanner

Menu di navigazioneMenu di navigazione

IndirizzoIndirizzo

Prof. Marina Grisoni

Dentro il contenitoreDentro il contenitore

• Utilizzeremo la prima colonna per inserire una immagine

• La seconda per il testo

• e l’ultima riga per indirizzo o il nome del web master

Imm

agineIm

magine

BannerBanner

Menu di navigazioneMenu di navigazione

TestoTesto

IndirizzoIndirizzo

è molto importante poter effettuare un contatto via mail o telefonico

è molto importante poter effettuare un contatto via mail o telefonico

Prof. Marina Grisoni

Menu di navigazioneMenu di navigazione

• Inserire una tabella all’interno della cella menu di navigazione

• di una riga• e tante colonne

quante sono le pagine sulle quali è strutturato il sito

• Ogni colonna corrisponde a uno dei tasti del menu

Imm

agineIm

magine

BannerBanner

TestoTesto

IndirizzoIndirizzo

Prof. Marina Grisoni

HOME PAGE

TRAMA

CRITICA

CAST

SCENE

CURIOSITA’

CANZONI

Menù di navigazioneMenù di navigazione

HOMEPAGE

HOMEPAGE

TRAMATRAMA

CRITICACRITICA

CASTCAST SCENE

SCENE

LA CANZONELA CANZONE

CURIOSITA’CURIOSITA’

home trama critica cast scene curiosità canzoni

Mettere sempre in evidenza nel banner la pagina in cui ci si trova

Lasciare sempre la possibilità di tornare alla home page

Prof. Marina Grisoni

Inserire testiInserire testi• Per inserire un testo

digitare oppure copiare e incollare da un file

• Scegliete un carattere comune (tipo arial) per consentire a tutte le macchine di visualizzare correttamente il testo

• Formattare a piacere

Imm

agineIm

magine

BannerBanner

TestoTesto

IndirizzoIndirizzo

Prof. Marina Grisoni

ed immaginied immagini

• Per inserire una immagine:– inserisci– immagine– da file

Imm

agineIm

magine

BannerBanner

TestoTesto

IndirizzoIndirizzo

ATTENZIONE ALLA DIMENSIONE DELL’IMMAGINE!

ATTENZIONE ALLA DIMENSIONE DELL’IMMAGINE!

Prof. Marina Grisoni

Le immagini digitaliLe immagini digitali

• pixel (contrazione della locuzione inglese picture element)

• indica ciascuno degli elementi puntiformi che compongono la rappresentazione di una immagine nella memoria di un computer.

Prof. Marina Grisoni

• Il numero di pixel in un'immagine è detto risoluzione che viene espressa tramite un numero.

• Le immagini che vengono utilizzate in un sito vano ridimensionate

• La dimensione deve coincidere con lo spazio progettato

• Immagini troppo grandi rallentano la visualizzazione perché il pc impiega più tempo per caricarle

Dimensionare una immagineDimensionare una immagine

Prof. Marina Grisoni

TramaTrama

• Per costruire le pagine tematiche

• fate una copia della home page

• rinominatela• e modificate le

tabelle contenute in quella principale

• seguendo le indicazioni che seguono

BannerBanner

TestoTesto

IndirizzoIndirizzo

imageimage

Prof. Marina Grisoni

CriticaCritica• Per la pagina critica• Sarà sufficiente unire le

due colonne• Inserire il testo• Collegare al link

esterno– inserisci– collegamento

ipertestuale– indirizzo– frame di destinazione– stessa finestra

BannerBanner

TestoTesto

IndirizzoIndirizzo

IMPORTANTE VISUALIZZARE LINK ESTERNI NELLA STESSA FINESTRA

IMPORTANTE VISUALIZZARE LINK ESTERNI NELLA STESSA FINESTRA

Prof. Marina Grisoni

CastCast

• Mantenere la struttura iniziale

• inserire nello spazio testo

• una tabella• di 1 colonna• e 14 righe

BannerBanner

Inserire tabellaInserire tabelladi 14 righedi 14 righe

IndirizzoIndirizzo

imageimage

Prof. Marina Grisoni

SceneScene

• utilizzando copia e incolla

• selezionare le celle immagine e testo

• e duplicarle

BannerBanner

TestoTesto

IndirizzoIndirizzo

ImageImage

TestoTestoImageImage

TestoTestoImageImage

Prof. Marina Grisoni

CuriositàCuriosità

• La struttura della pagina non cambia

• inserire il testo come elenco puntato:– formato– elenchi puntati

e numerati

BannerBanner

TestoTesto

IndirizzoIndirizzo

imageimage

Prof. Marina Grisoni

CanzoniCanzoni

• Inserire nella cella testo una tabella

• di 1 riga• e 2 colonne• Inserire il testo• Inserire la gif. con

la nota• Inserire

collegamento ipertestuale con un file musicale

BannerBanner

TestoTesto

IndirizzoIndirizzo

imageimage TestoTesto

Prof. Marina Grisoni

Collegamenti tra le pagineCollegamenti tra le pagine

• Per collegare le pagine al menù:– selezionare il testo

corrispondente alla cella

– inserisci– collegamento

ipertestuale– selezionare la

pagina di destinazione

home trama critica cast scene curiosità canzoni

Prof. Marina Grisoni

Pubblicare il sitoPubblicare il sito

• La pubblicazione può avvenire anche tramite dei software estremamente pratici

• Come AceFTP o WSFTP• All’avvio del programma, installato sul proprio

computer, bisogna inserire nella finestra di dialogo i dati del server cui collegarsi

• e i dati di riconoscimento precedentemente definiti con il server ospitante

Prof. Marina Grisoni

La mascheraLa maschera

Prof. Marina Grisoni

Trasferire i fileTrasferire i file

• Per trasferire i file in FTP è sufficiente:• posizionarsi all’interno della cartella che

contiene i file da pubblicare (a sinistra)• indicare, selezionandoli, i file da pubblicare• selezionare il comando posto tra le due

finestre oppure trascinare i file nella finestra di destra

Prof. Marina Grisoni

Trasferire i fileTrasferire i file

Finestra che mostra le Directory e i file del computer

Sposta

Finestra che mostra le Directory e i file pubblicati sul server

Prof. Marina Grisoni

On line!On line!

compare la finestra che visualizza il trasferimento dei file

Prof. Marina Grisoni

FINE