comunichiamo con il web

Cognome....................................................................... Nome .............................................................................
PROGETTO
“COMUNICHIAMO CON IL WEB”
Realizza il tuo sito web seguendo i seguenti suggerimenti.
STEP 1: crea il seguente annidamento di cartelle su BUFFALO sotto il tuo profilo utente:
sito web personale
immagini
STEP 2: costruisci la seguente tabella HTML e assegna al file il nome index.htm rispettando le direttive
specificate più in basso.
RIGA 1
(luogo in cui inserire il LOGO)
Home
Curriculum
Dove vivo
Contattami
RIGA 2
RIGA 3
©Copyright .............................................





RIGA 4
TABELLA PRINCIPALE:
o Altezza: 575
o Larghezza: 800
o Numero di righe: 4
o Numero di colonne: 1
RIGA 1:
o Altezza: 100 (luogo in cui inserire il LOGO)
RIGA 2:
o Altezza: 50 con allineamento centrale
o Contiene una tabella con 1 riga e 4 colonne, ognuna di larghezza uguale a 150 (width).
RIGA 3:
o Altezza: 400
o La cella (TD) dovrà contenere il seguente codice (che spiegherà l’insegnante in classe):
<IFRAME name=”centro” src=”home.htm” frameborder=”0” width=”800” height=”400”></IFRAME>
RIGA 4:
o Altezza: 25
o La cella conterrà la dicitura “©Copyright” seguita dal nome e cognome dell’allievo (il simbolo ©
corrisponde al codice HTML &copy;)
Pagina 1
Traduci la tabella di Pagina 1 nel seguente spazio:
Pagina 2
STEP 3: Utilizzando il programma “Paint” prova a realizzare un’immagine di dimensione 800x100.
Esempio:
STEP 4: costruisci la seguente tabella e inseriscila nella RIGA 2.
Home
Curriculum
Dove vivo
Contattami
STEP 5: collegati al seguente sito web (se non lo visualizzi puoi utilizzare il pc del docente e salvare
le immagini che realizzerai in BUFFALO):
http://www.paginainizio.com/webmaster/strumenti/bottoni3D.htm
Seguendo le indicazioni del sito web realizza il tuo pulsante del menu con i colori e le scritte
specificate nello STEP 5 (Home, Curriculum, Dove vivo, Contattami).
Esempio:
STEP 6: collegati al seguente sito web (se non lo visualizzi puoi utilizzare il pc del docente e salvare
le immagini che realizzerai in BUFFALO):
http://www.grsites.com/archive/textures/
In questo sito troverai, suddivise per categorie, centinaia di sfondi da applicare al BODY della
pagina HTML, alle tabelle e/o alle relative celle.
Scegli lo/gli sfondo/i che meglio si adattano al tuo sito web e salvali nella sotto-cartella immagini
del tuo sito.
Esempi di textures:
N. 1
N. 2
N. 3
N. 4
Pagina 3
N. 5
N. 6
Ipotizzando di scegliere la texture n. 3 come sfondo del BODY e di utilizzare i pulsanti realizzati
nello STEP 5, il tuo sito web dovrebbe risultare così:
©Copyright Alessia Cesana
STEP 7: arrivati a questo punto dovrete realizzare le seguent quattro pagine HTML denominate:
1.
2.
3.
4.
home.htm
curriculum.htm
dove vivo.htm
contattami.htm
Ognuna di queste pagine dovrà essere realizzata seguendo le indicazioni sottostanti:
1. home.htm
La pagina home.htm si chiama la Home Page del sito web, ossia la prima pagina che i navigatori
internet vedranno quando visiteranno il tuo sito.
Solitamente contiene un messaggio di benvenuto, un’immagine, una frase che ti rappresenta.
Cura con attenzione questa pagina facendoti aiutare dal prof. Verri.
2. curriculum.htm
La pagina curriculum.htm è una pagina molto importante. Dovrai compilarla in modo completo e
ordinato. Potrebbe diventare il tuo bigliettino da visita quando, in futuro, ti presenterai ad un
colloquio di lavoro: non tutti possono vantare di avere il proprio curriculum direttamente
disponibile in internet! Nella pagina seguente troverai alcuni esempi di impostazioni di curriculum
(utilizza le tabelle HTML per impaginare le varie voci).
Pagina 4
LE CATEGORIE INSERIBILI NEL CURRICULUM
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
Informazioni personali (dati anagrafici, indirizzo, e-mail, data di nascita).
Occupazione desiderata/Settore professionale
Esperienza professionale
Istruzione e formazione
Capacità e competenze personali
Competenze linguistiche
Capacità e competenze sociali
Capacità e competenze organizzative
Capacità e competenze tecniche
Capacità e competenze informatiche
Altre capacità e competenze (musicali, artistiche,…)
Patente
Ulteriori informazioni
Allegati
ESEMPIO DI IMPAGINAZIONE
Pagina 5
3. dove vivo.htm
In questa pagina dovrà comparire la cartina Google Maps.
Per ottenere il risultato riportato di seguito dovrete collegarvi all’indirizzo www.google.it e
cliccare sulla scheda “Maps”. Dopo aver digitato il vostro indirizzo comparirà una cartina come
quella riportata nell’esempio.
Esempio:
Cliccando sul simbolo:
otterrai un codice HTML tipo (non spaventarti!):
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
src="http://maps.google.it/maps?f=q&amp;source=s_q&amp;hl=it&amp;geocode=&amp;q=bene+vagienna,+via+lequio+tanaro+28&amp;aq=&am
p;sll=45.262262,7.920447&amp;sspn=3.91304,7.064209&amp;ie=UTF8&amp;hq=&amp;hnear=Via+Bene+Vagienna,+28,+Lequio+Tanaro,+Cuneo,+
Piemonte&amp;ll=44.550788,7.86884&amp;spn=0.247599,0.441513&amp;t=m&amp;z=11&amp;output=embed"></iframe><br /><small><a
href="http://maps.google.it/maps?f=q&amp;source=embed&amp;hl=it&amp;geocode=&amp;q=bene+vagienna,+via+lequio+tanaro+28&amp;aq=
&amp;sll=45.262262,7.920447&amp;sspn=3.91304,7.064209&amp;ie=UTF8&amp;hq=&amp;hnear=Via+Bene+Vagienna,+28,+Lequio+Tanaro,+Cu
neo,+Piemonte&amp;ll=44.550788,7.86884&amp;spn=0.247599,0.441513&amp;t=m&amp;z=11" style="color:#0000FF;textalign:left">Visualizzazione ingrandita della mappa</a></small>
Copia il codice e incollalo nella pagina dove vivo.htm all’interno del tag BODY.
Pagina 6
4. contattami.htm
Gli utenti che visiteranno il tuo sito potranno contattarti facendo clic sull’indirizzo e-mail
contenuto in questa pagina.
Inoltre dovrai scegliere un video rappresentativo su youtube e inserirlo secondo le indicazioni
specificate di seguito.
STEP 8: inserimento link con l’e-mail
<A href=”mailto: [email protected]”>Clicca qui per contattarmi</A>
STEP 9: inserisci un video youtube attraverso le seguenti fasi:




scegli il video su www.youtube.com
Clicca su “Condividi”
Scegli l’opzione “Codice da incorporare”
Seleziona il codice HTML del riquadro e incollalo nel BODY della pagina contattami.htm
Esempio:
<iframe width="560" height="315" src="http://www.youtube.com/embed/mKufFoL-Ge0"
frameborder="0" allowfullscreen></iframe>
Inserisci anche un’intestazione con il tag <h1> con il titolo del video.
Esempio:
<H1>Viaggio tra i pianeti del Sistema Solare</H1>
Pagina 7
PUNTEGGIO TOTALE
STEP
DESCRIZIONE
PUNTI
1
Creazione di cartelle su BUFFALO.
2
Tabella HTML con codice riportato in pagina 2.
3
Realizzazione del logo.
4
Costruzione tabella per le voci di menu.
5
Realizzazione pulsanti web.
6
Inserimento di textures web nello sfondo del BODY.
7
Realizzazione delle quattro pagine web.
8
Inserimento del link nell’e-mail.
9
Inserimento video youtube.
TOTALE PUNTEGGIO OTTENUTO
Pagina 8