Costruire pagine per il WEB

Presentazione sul tema: "Costruire pagine per il WEB"— Transcript della presentazione:

1 Costruire pagine per il WEB
Prof. Marina Grisoni

2 La struttura di un sito PAGINA 6 PAGINA 1 HOME PAGE PAGINA 5 PAGINA 2
LINK ESTERNI Prof. Marina Grisoni

3 Elementi della Home Page
Banner Indirizzo Menu di navigazione Notizie principali Prof. Marina Grisoni

4 e delle pagine tematiche
Menu di navigazione Banner Titolo pagina Immagine Testo Indirizzo Prof. Marina Grisoni

5 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 Prof. Marina Grisoni

6 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

7 Disegnare una pagina 700 pixel di larghezza Costruire una tabella contenitore specificandone la larghezza Nel nostro esempio 700 pixel Il pixel è l’unità di misura Prof. Marina Grisoni

8 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

9 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 Prof. Marina Grisoni

10 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 Testo è molto importante poter effettuare un contatto via mail o telefonico Indirizzo Prof. Marina Grisoni

11 Menu 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 Banner Immagine Testo Indirizzo Prof. Marina Grisoni

12 Menù di navigazione HOME PAGE TRAMA CRITICA CAST SCENE CURIOSITA’
CANZONI Mettere sempre in evidenza nel banner la pagina in cui ci si trova HOME PAGE TRAMA CRITICA CAST SCENE LA CANZONE CURIOSITA’ Lasciare sempre la possibilità di tornare alla home page home trama critica cast scene curiosità canzoni Prof. Marina Grisoni

13 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 Immagine Testo Indirizzo Prof. Marina Grisoni

14 ed immagini Per inserire una immagine: inserisci immagine da file
Banner Immagine Testo ATTENZIONE ALLA DIMENSIONE DELL’IMMAGINE! Indirizzo Prof. Marina Grisoni

15 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

16 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

17 Trama Per costruire le pagine tematiche fate una copia della home page
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 Testo Indirizzo Prof. Marina Grisoni

18 Critica Per la pagina critica Sarà sufficiente unire le due colonne
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 Testo Indirizzo IMPORTANTE VISUALIZZARE LINK ESTERNI NELLA STESSA FINESTRA Prof. Marina Grisoni

19 Cast Mantenere la struttura iniziale inserire nello spazio testo
Banner Mantenere la struttura iniziale inserire nello spazio testo una tabella di 1 colonna e 14 righe image Inserire tabella di 14 righe Indirizzo Prof. Marina Grisoni

20 Scene utilizzando copia e incolla
Banner utilizzando copia e incolla selezionare le celle immagine e testo e duplicarle Image Testo Image Testo Image Testo Indirizzo Prof. Marina Grisoni

21 Curiosità La struttura della pagina non cambia
Banner La struttura della pagina non cambia inserire il testo come elenco puntato: formato elenchi puntati e numerati image Testo Indirizzo Prof. Marina Grisoni

22 Canzoni Inserire nella cella testo una tabella di 1 riga e 2 colonne
Banner 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 image Testo Testo Indirizzo Prof. Marina Grisoni

23 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 Prof. Marina Grisoni

24 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

25 La maschera Prof. Marina Grisoni

26 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

27 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

28 On line! compare la finestra che visualizza il trasferimento dei file
Prof. Marina Grisoni

29 FINE Prof. Marina Grisoni