Costruire pagine per il WEB - naviganti.net · • Esercitiamoci creando un sito con pagine...

transcript

Prof. Marina Grisoni

Costruirepagineper il WEB

La struttura di un sito

HOMEPAGE

PAGINA 1

PAGINA 2

PAGINA 3PAGINA 4

PAGINA 6

PAGINA 5

LINK ESTERNI

Elementi della Home Page

Menu di navigazione

Banner

Notizie

principali

Indirizzo

e delle pagine tematiche Menu di navigazione

Titolo pagina

Immagine

Indirizzo

Banner

Struttura 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

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

Disegnare una pagina

• Costruire una tabella contenitorespecificandone la larghezza

• Nel nostro esempio 700 pixel

• Il pixel è l’unità di misura

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

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

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

Indirizzo

è molto importante poter effettuare un contatto via mail o telefonico

Menu di navigazione

• Inserire una tabellaall’interno della cella menu di navigazione

• di una riga

• e tante colonnequante sono le pagine sulle quali è strutturato il sito

• Ogni colonna corrisponde a uno dei tasti del menu

Banner

Indirizzo

HOME PAGE

CRITICA

CURIOSITA’

CANZONI

Menù di navigazione

HOMEPAGE

CRITICA

CASTSCENE

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

Inserire 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

Banner

Indirizzo

ed immagini

• Per inserire una immagine:

– inserisci

– immagine

– da file

Banner

Indirizzo

ATTENZIONE ALLA DIMENSIONE DELL’IMMAGINE!

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.

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

• 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

Banner

Indirizzo

Critica

• 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

Banner

Indirizzo

IMPORTANTE VISUALIZZARE LINK ESTERNI NELLA STESSA FINESTRA

• Mantenere la struttura iniziale

• inserire nello spazio testo

• una tabella

• di 1 colonna

• e 14 righe

Banner

Inserire tabelladi 14 righe

Indirizzo

• utilizzando copia e incolla

• selezionare le celleimmagine e testo

• e duplicarle

Banner

Indirizzo

TestoImage

Curiosità

• La struttura della pagina non cambia

• inserire il testo come elenco puntato:

– formato

– elenchi puntati e numerati

Banner

Indirizzo

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

Indirizzo

image 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 scene curiosità canzoni

Pubblicare il sito

• La pubblicazione può avvenire anche tramitedei 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

La maschera

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

Trasferire i file

Finestra che mostra le Directory e i file del computer

Sposta

Finestra che mostra le Directory e i file pubblicati sul server

On line!

compare la finestra che visualizza il trasferimento dei file

Costruire pagine per il WEB - naviganti.net · • Esercitiamoci creando un sito con pagine...

Documents