prof. marina grisoni costruire pagine per il web
TRANSCRIPT
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