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”> 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
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&source=s_q&hl=it&geocode=&q=bene+vagienna,+via+lequio+tanaro+28&aq=&am p;sll=45.262262,7.920447&sspn=3.91304,7.064209&ie=UTF8&hq=&hnear=Via+Bene+Vagienna,+28,+Lequio+Tanaro,+Cuneo,+ Piemonte&ll=44.550788,7.86884&spn=0.247599,0.441513&t=m&z=11&output=embed">
Visualizzazione ingrandita della mappa
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
Clicca qui per contattarmi 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> Inserisci anche un’intestazione con il tag
con il titolo del video. Esempio: Viaggio tra i pianeti del Sistema Solare
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
