Costruire
pagine
per il
WEB
Prof. Marina Grisoni
La struttura di un sito
PAGINA 6
PAGINA 1
HOME
PAGE
PAGINA 5
PAGINA 2
LINK ESTERNI
PAGINA 3
Prof. Marina Grisoni
PAGINA 4
Elementi della Home Page
Banner
Indirizzo
Menu
di
naviga
zione
Notizie
principali
Prof. Marina Grisoni
e delle pagine tematiche
Banner
Titolo
pagina
Immagine
Testo
Indirizzo
Prof. Marina Grisoni
Menu
di
naviga
zione
Struttura della Home Page
• La vostra Home Page
dovrà contenere:
BANNER
Menù di navigazione
immagine
Presentazione
contenuto del sito
Indirizzo e web master
Prof. Marina Grisoni
– 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
Il mio film preferito!
• 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!
Prof. Marina Grisoni
Disegnare una pagina
• Costruire una
tabella contenitore
specificandone la
larghezza
• Nel nostro esempio
700 pixel
• Il pixel è l’unità di
misura
Prof. Marina Grisoni
700 pixel di larghezza
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 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
Prof. Marina Grisoni
Banner
Menu di navigazione
Indirizzo
Dentro 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
Banner
Menu di navigazione
Immagine
è molto importante poter
effettuare un contatto via
mail o telefonico
Prof. Marina Grisoni
Testo
Indirizzo
Menu di navigazione
Banner
Immagine
• 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
Prof. Marina Grisoni
Testo
Indirizzo
Menù di navigazione
HOME PAGE
Mettere sempre in evidenza
nel banner la pagina in cui
ci si trova
TRAMA
LA CANZONE
TRAMA
CRITICA
HOME
PAGE
CAST
CURIOSITA’
CRITICA
SCENE
CAST
SCENE
CURIOSITA’
Lasciare sempre la
possibilità di tornare alla
home page
CANZONI
home
trama
critica
cast
Prof. Marina Grisoni
scene
curiosità canzoni
Inserire testi
Banner
Immagine
• 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
Prof. Marina Grisoni
Testo
Indirizzo
ed immagini
• Per inserire una
immagine:
Banner
– inserisci
– immagine
– da file
Immagine
Testo
ATTENZIONE ALLA
DIMENSIONE
DELL’IMMAGINE!
Indirizzo
Prof. Marina Grisoni
Le 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
Dimensionare una immagine
• 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
Prof. Marina Grisoni
Trama
Banner
• 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
image
Prof. Marina Grisoni
Testo
Indirizzo
Critica
Banner
• 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
Prof. Marina Grisoni
Testo
Indirizzo
IMPORTANTE
VISUALIZZARE
LINK ESTERNI
NELLA STESSA
FINESTRA
Cast
• Mantenere la
struttura iniziale
• inserire nello
spazio testo
• una tabella
• di 1 colonna
• e 14 righe
Banner
image
Inserire tabella
di 14 righe
Indirizzo
Prof. Marina Grisoni
Scene
Banner
• utilizzando copia e
incolla
• selezionare le celle
immagine e testo
• e duplicarle
Image
Testo
Image
Testo
Image
Testo
Indirizzo
Prof. Marina Grisoni
Curiosità
• La struttura della
pagina non
cambia
• inserire il testo
come elenco
puntato:
Banner
image
Testo
Indirizzo
– formato
– elenchi puntati
e numerati
Prof. Marina Grisoni
Canzoni
• 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
Banner
image
Testo
Indirizzo
Prof. Marina Grisoni
Testo
Collegamenti 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
Prof. Marina Grisoni
scene
curiosità canzoni
Pubblicare 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 maschera
Prof. Marina Grisoni
Trasferire 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 file
Sposta
Finestra che
mostra le
Directory e i
file del
computer
Finestra che
mostra le
Directory e i
file
pubblicati
sul server
Prof. Marina Grisoni
On line!
compare la
finestra che
visualizza il
trasferimento
dei file
Prof. Marina Grisoni
FINE
Prof. Marina Grisoni