COMUNICHIAMO CON IL WEB

Transcript

1 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. (luogo in cui inserire il LOGO) RIGA 1 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 ) Pagina 1

2 Traduci la tabella di Pagina 1 nel seguente spazio: Pagina 2

3 STEP 3: Utilizzando il programma Paint prova a realizzare un immagine di dimensione 800x100. 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): 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). 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): 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 N. 5 N. 6 Pagina 3

4 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. home.htm 2. curriculum.htm 3. dove vivo.htm 4. 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

5 LE CATEGORIE INSERIBILI NEL CURRICULUM 1. Informazioni personali (dati anagrafici, indirizzo, , data di nascita). 2. Occupazione desiderata/settore professionale 3. Esperienza professionale 4. Istruzione e formazione 5. Capacità e competenze personali 6. Competenze linguistiche 7. Capacità e competenze sociali 8. Capacità e competenze organizzative 9. Capacità e competenze tecniche 10. Capacità e competenze informatiche 11. Altre capacità e competenze (musicali, artistiche, ) 12. Patente 13. Ulteriori informazioni 14. Allegati ESEMPIO DI IMPAGINAZIONE Pagina 5

6 3. dove vivo.htm In questa pagina dovrà comparire la cartina Google Maps. Per ottenere il risultato riportato di seguito dovrete collegarvi all indirizzo e cliccare sulla scheda Maps. Dopo aver digitato il vostro indirizzo comparirà una cartina come quella riportata nell 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=" p;sll= , &sspn= , &ie=utf8&hq=&hnear=via+bene+vagienna,+28,+lequio+tanaro,+cuneo,+ Piemonte&ll= , &spn= , &t=m&z=11&output=embed"></iframe><br /><small><a href=" &sll= , &sspn= , &ie=utf8&hq=&hnear=via+bene+vagienna,+28,+lequio+tanaro,+cu neo,+piemonte&ll= , &spn= , &t=m&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

7 4. contattami.htm Gli utenti che visiteranno il tuo sito potranno contattarti facendo clic sull indirizzo 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 <A href= mailto: alessiacesana@libero.it >Clicca qui per contattarmi</a> STEP 9: inserisci un video youtube attraverso le seguenti fasi: scegli il video su Clicca su Condividi Scegli l opzione Codice da incorporare Seleziona il codice HTML del riquadro e incollalo nel BODY della pagina contattami.htm <iframe width="560" height="315" src=" frameborder="0" allowfullscreen></iframe> Inserisci anche un intestazione con il tag <h1> con il titolo del video. <H1>Viaggio tra i pianeti del Sistema Solare</H1> Pagina 7

8 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 . 9 Inserimento video youtube. TOTALE PUNTEGGIO OTTENUTO Pagina 8