Laboratorio Informatico Web A.A. 2007/2008 di Davide Di Blasi Laboratorio Informatico Web 07/08
Promemoria per il Web <ul><li>Questo promemoria vuole essere una guida per l’organizzazione e creazione di pagine web. </l...
Passo n.1 <ul><li>Crea una cartella sul desktop, nomila a tuo piacimento. Questa sarà la  cartella principale del sito . <...
Passo n.2 <ul><li>Apri il programma DREAMWEAVER (qualunque versione tu abbia), vai sulla barra dei menu -> sito -> nuovo s...
Passo n.3 <ul><li>Le schermate successive ti chiederanno: </li></ul><ul><li>Se vuoi usare una tecnologia server -> selezio...
Passo n.4 <ul><li>Il sito è stato creato. </li></ul><ul><li>Sulla barra destra, nella finestra ‘ file ’ di dreamweaver tro...
Passo n.5 <ul><li>Adesso è ora di creare la nostra prima pagina:  il file index.html </li></ul><ul><li>Sulla barra dei men...
Passo n.6 <ul><li>Creato il nuovo file, Dreamweaver ha inserito automaticamente l’ossatura della pagina: dichiarazione del...
Passo n.7 <ul><li>Crea il MARKUP strutturale (XHTML) della pagina web (i  3 div di classe wrapper  che conterranno il rest...
Passo n.8 <ul><li>Fermiamoci un attimo con l’XHTML e creiamo il nostro file css, che ci permetterà di modificare la strutt...
Passo n.9 <ul><li>Crea le  3 rules base dei CSS : </li></ul><ul><li>*{ </li></ul><ul><li>margin:0; </li></ul><ul><li>paddi...
Passo n.10 <ul><li>Crea la classe  wrapper </li></ul><ul><li>.wrapper </li></ul><ul><li>{ </li></ul><ul><li>border:1px sol...
Passo n.11 <ul><li>Crea le rules per i  selettori di id  specifici: </li></ul><ul><li>#header </li></ul><ul><li>{ </li></u...
Passo n.12 <ul><li>Per fare in modo che le rules css vengano applicate al markup XHTML, dobbiamo collegare i due file tram...
Passo n.13 <ul><li>Se tutto funziona correttamente, adesso puoi inserire il contenuto della tua pagina nel file .html. </l...
Passo n.14 <ul><li>Sempre nel file .html inseriamo all’interno di  <div id=“header” class=“wrapper”>  gli elementi che dar...
Passo n.15 <ul><li>La nostra lista sarà disposta verticalmente, con i collegamenti uno sotto l’altro.Noi vogliamo una barr...
Passo n.16 <ul><li>Per ottenere il risultato voluto dobbiamo scrivere una nuova rule css, che  modifica solo gli elementi ...
Laboratorio Informatico Web 07/08 Passo n.17 Adesso che il contenuto del  div header  è stato modificato graficamente a no...
Laboratorio Informatico Web 07/08 Passo n.18 Inserito l’<h1> nel file .html, adesso possiamo modificare il suo aspetto gra...
Passo n.19 <ul><li>Ritorniamo nel file .html e inseriamo il contenuto che verrà visualizzato nel  div content: </li></ul><...
Passo n.20 <ul><li>Grazie ai selettori di id  leftbar  e  main_content  possiamo modificare il loro aspetto grafico tramit...
Passo n.21 <ul><li>Ora modifichiamo la visualizzazione grafica del  div main_content: </li></ul><ul><li>#main_content </li...
Passo n.22 <ul><li>Adesso creiamo una rule CSS per fare in modo che i paragrafi all’interno dei div leftbar e main_content...
Passo n.23 <ul><li>Infine inseriamo un paragrafo nel  div footer  con il tuo nome e cognome, altre informazioni che credi ...
Passo n.24 <ul><li>Adesso è il momento di inserire gli ‘orpelli’ grafici al nostro sito: </li></ul><ul><li>Iniziamo dal me...
Passo n.25 <ul><li>Ora inseriamo un’immagine di sfondo al  div content,  lavorando sempre sul file .css, posizionandoci su...
Passo n.26 <ul><li>Infine il  div footer,  posizioniamoci sulla rule il cui selettore è  #footer </li></ul><ul><li>backgro...
Passo n.27 <ul><li>Per ultimo andiamo a modificare le proprietà grafiche dei collegamenti con queste rule css: </li></ul><...
Passo n.28 <ul><li>Non dimenticate di eliminare tutti i bordi che abbiamo usato fin’ora! </li></ul><ul><li>Puoi modificare...
Passo n.29 <ul><li>Adesso possiamo inserire dei paragrafi di testo a nostro piacimento nel  div leftbar  collegamenti ad a...
Passo n.30 <ul><li>Basta copiare e incollare il codice che trovate alla destra di ogni filmato sotto la parola ‘embed’…  ;...
Email <ul><li>Dubbi? </li></ul><ul><li>Chiarimenti? </li></ul><ul><li>Approfondimenti? </li></ul><ul><li>[email_address] <...
Upcoming SlideShare
Loading in …5
×

Lab Web Prof.Di Blasi 2008

482 views
482 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
482
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Lab Web Prof.Di Blasi 2008

  1. 1. Laboratorio Informatico Web A.A. 2007/2008 di Davide Di Blasi Laboratorio Informatico Web 07/08
  2. 2. Promemoria per il Web <ul><li>Questo promemoria vuole essere una guida per l’organizzazione e creazione di pagine web. </li></ul><ul><li>Vi assisterà in maniera dettagliata, passo per passo, dalla creazione della cartella principale, sino alla messa online. </li></ul>Laboratorio Informatico Web 07/08
  3. 3. Passo n.1 <ul><li>Crea una cartella sul desktop, nomila a tuo piacimento. Questa sarà la cartella principale del sito . </li></ul><ul><li>All’interno crea due cartelle: </li></ul><ul><li>img </li></ul><ul><li>CSS </li></ul><ul><li>Qui verranno inserite rispettivamente le immagini del sito e il file .css </li></ul>Laboratorio Informatico Web 07/08
  4. 4. Passo n.2 <ul><li>Apri il programma DREAMWEAVER (qualunque versione tu abbia), vai sulla barra dei menu -> sito -> nuovo sito </li></ul>Laboratorio Informatico Web 07/08 Dovrebbe apparire una maschera di input simile a questa: ti richiede di inserire il nome del sito, e l’eventuale indirizzo web (questo puoi anche non inserirlo.)
  5. 5. Passo n.3 <ul><li>Le schermate successive ti chiederanno: </li></ul><ul><li>Se vuoi usare una tecnologia server -> seleziona NO. </li></ul><ul><li>Selezionare la cartella principale del sito (la tua è sul desktop ;-) ) </li></ul><ul><li>Come ti connetti al server -> nessuno (none in inglese) </li></ul>Laboratorio Informatico Web 07/08 FATTO!
  6. 6. Passo n.4 <ul><li>Il sito è stato creato. </li></ul><ul><li>Sulla barra destra, nella finestra ‘ file ’ di dreamweaver troverai la cartella principale, al cui interno ci saranno la cartella ‘ img ’ e quella ‘ CSS ’. </li></ul>Laboratorio Informatico Web 07/08
  7. 7. Passo n.5 <ul><li>Adesso è ora di creare la nostra prima pagina: il file index.html </li></ul><ul><li>Sulla barra dei menu clicca su -> file -> nuovo. </li></ul><ul><li>Qui si aprirà una maschera; seleziona: </li></ul><ul><li>Categoria -> pagina di base </li></ul><ul><li>Pagina di base -> HTML </li></ul><ul><li>Inoltre, se è presente spuntare la casella “rendi xhmtl compatibile”. </li></ul>Laboratorio Informatico Web 07/08
  8. 8. Passo n.6 <ul><li>Creato il nuovo file, Dreamweaver ha inserito automaticamente l’ossatura della pagina: dichiarazione del DOCTYPE, elemento <html>, <head>, <title>, <body>. </li></ul><ul><li>*ATTENZIONE! In alcune versioni di Dreamweaver è possibile che prima della dichiarazione del DOCTYPE inserisca anche questo: <? xml version=&quot;1.0&quot; encod in g=&quot;UTF-8&quot;?> </li></ul><ul><li>cancellala! Potrebbe dare problemi con Internet Explorer 6 </li></ul>Laboratorio Informatico Web 07/08
  9. 9. Passo n.7 <ul><li>Crea il MARKUP strutturale (XHTML) della pagina web (i 3 div di classe wrapper che conterranno il resto del sito di class): </li></ul><ul><li><div id=“header” class=“wrapper”> </li></ul><ul><li></div> </li></ul><ul><li><div id=“content” class=“wrapper”> </li></ul><ul><li></div> </li></ul><ul><li><div id=“footer” class=“wrapper”> </li></ul><ul><li></div> </li></ul>Laboratorio Informatico Web 07/08
  10. 10. Passo n.8 <ul><li>Fermiamoci un attimo con l’XHTML e creiamo il nostro file css, che ci permetterà di modificare la struttura e l’apparenza grafica del sito: </li></ul><ul><li>Sulla barra dei menu di Dreamweaver, seleziona file -> nuovo </li></ul><ul><li>Qui si aprirà una maschera; seleziona: </li></ul><ul><li>Categoria -> pagina di base </li></ul><ul><li>Pagina di base -> CSS </li></ul>Laboratorio Informatico Web 07/08
  11. 11. Passo n.9 <ul><li>Crea le 3 rules base dei CSS : </li></ul><ul><li>*{ </li></ul><ul><li>margin:0; </li></ul><ul><li>padding:0; </li></ul><ul><li>} </li></ul><ul><li>html </li></ul><ul><li>{ </li></ul><ul><li>margin:0; </li></ul><ul><li>padding:0; </li></ul><ul><li>font-family:Arial, Helvetica, sans-serif </li></ul><ul><li>background:url(../img/nomeFIle.png) center top repeat-y; </li></ul><ul><li>} </li></ul><ul><li>body </li></ul><ul><li>{ </li></ul><ul><li>width:100%; </li></ul><ul><li>height:auto; </li></ul><ul><li>} </li></ul>Laboratorio Informatico Web 07/08 -> selettore universale -> selettore elemento html -> selettore elemento body
  12. 12. Passo n.10 <ul><li>Crea la classe wrapper </li></ul><ul><li>.wrapper </li></ul><ul><li>{ </li></ul><ul><li>border:1px solid red; </li></ul><ul><li>width:740px; </li></ul><ul><li>margin:0 auto; </li></ul><ul><li>padding:10px; </li></ul><ul><li>} </li></ul>Laboratorio Informatico Web 07/08 -> bordo rosso -> larghezza dei div (può variare) -> proprietà che permette di centrarli -> margine interno
  13. 13. Passo n.11 <ul><li>Crea le rules per i selettori di id specifici: </li></ul><ul><li>#header </li></ul><ul><li>{ </li></ul><ul><li>width:760px; </li></ul><ul><li>height:auto; </li></ul><ul><li>Padding:0; </li></ul><ul><li>} </li></ul><ul><li>#content </li></ul><ul><li>{ </li></ul><ul><li>height:550px; </li></ul><ul><li>} </li></ul><ul><li>#footer </li></ul><ul><li>{ </li></ul><ul><li>height:70px; </li></ul><ul><li>} </li></ul>Laboratorio Informatico Web 07/08 Cosi facendo settiamo proprietà specifiche per ognuno dei div.
  14. 14. Passo n.12 <ul><li>Per fare in modo che le rules css vengano applicate al markup XHTML, dobbiamo collegare i due file tramite un ‘ponte’; questo ‘ponte’ è rappresentato dall’ elemento <link>, che va inserito nella pagina .html, all’interno dell’elemento <head>. </li></ul><ul><li>L’elemento <link> deve avere necessariamente 3 attributi: </li></ul><ul><li>rel=“stylesheet” </li></ul><ul><li>type=“text/css” </li></ul><ul><li>href=“CSS/nomeFile.css” (percorso del file.css) </li></ul><ul><li><link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;CSS/nomeFile.css&quot; /> </li></ul>Laboratorio Informatico Web 07/08
  15. 15. Passo n.13 <ul><li>Se tutto funziona correttamente, adesso puoi inserire il contenuto della tua pagina nel file .html. </li></ul><ul><li>Nel <div id=“header” class=“wrapper”> puoi inserire un’immagine che farà da sfondo, attenzione: l’immagine dovrà essere larga quanto il div header, quindi 760px. </li></ul><ul><li><img src=“nomeImmagine.png” width=“760” height=“200” alt=“immagine”/> </li></ul>Laboratorio Informatico Web 07/08
  16. 16. Passo n.14 <ul><li>Sempre nel file .html inseriamo all’interno di <div id=“header” class=“wrapper”> gli elementi che daranno vita al menu del sito : </li></ul><ul><li><ul id=&quot;menu&quot;> </li></ul><ul><li><li><a href=&quot;index.html&quot; title=&quot;torna alla home page&quot;>Home</a></li> </li></ul><ul><li><li><a href=&quot;pagina1.html&quot; title=&quot;vai alla pagina 1&quot;>Pagina 1</a></li> </li></ul><ul><li></ul> </li></ul><ul><li>Abbiamo inserito una ‘unordered list’ <ul> il cui id è menu con all’interno due o più ‘list item’ <li>, che contengono dei collegamenti esterni <a> </li></ul>Laboratorio Informatico Web 07/08
  17. 17. Passo n.15 <ul><li>La nostra lista sarà disposta verticalmente, con i collegamenti uno sotto l’altro.Noi vogliamo una barra di navigazione orizzontale. </li></ul><ul><li>Per fare questa modifica grafica usiamo il file .css: </li></ul><ul><li>Inseriamo una rule con il selettore di id menu: </li></ul><ul><li>#menu </li></ul><ul><li>{ </li></ul><ul><li>width:auto; </li></ul><ul><li>height:auto; </li></ul><ul><li>margin:0; </li></ul><ul><li>padding:5px; </li></ul><ul><li>list-style:none; </li></ul><ul><li>border:1px solid green; </li></ul><ul><li>} </li></ul>Laboratorio Informatico Web 07/08 La nostra lista adesso avra margine esterno 0, margine interno 5px, eliminiamo il punto lista con list-style:none, e un bordo verde, ma rimane disposta verticalmente…
  18. 18. Passo n.16 <ul><li>Per ottenere il risultato voluto dobbiamo scrivere una nuova rule css, che modifica solo gli elementi <li> all’interno della <ul> il cui id è ‘menu’ : </li></ul><ul><li>#menu li </li></ul><ul><li>{ </li></ul><ul><li>display:inline; </li></ul><ul><li>margin:0; </li></ul><ul><li>padding:0 5px; </li></ul><ul><li>} </li></ul>Laboratorio Informatico Web 07/08
  19. 19. Laboratorio Informatico Web 07/08 Passo n.17 Adesso che il contenuto del div header è stato modificato graficamente a nostro piacimento, inseriamo il contenuto nella pagina .html che verrà visualizzato nel div content: Iniziamo con un titolo di livello 1 <h1> il titolo della pagina</h1>
  20. 20. Laboratorio Informatico Web 07/08 Passo n.18 Inserito l’<h1> nel file .html, adesso possiamo modificare il suo aspetto grafico nel file .css: Inserisci un selettore di elemento h1 , e scrive la rule css per la formattazione del titolo; es.: h1 { font-size:32px; font-family:'Times New Roman', Times, serif; color:black; } Il titolo avrà ora quest’aspetto: Titolo del tuo sito web!
  21. 21. Passo n.19 <ul><li>Ritorniamo nel file .html e inseriamo il contenuto che verrà visualizzato nel div content: </li></ul><ul><li><div id=”leftbar&quot;> </li></ul><ul><li>Barra di sinistra </li></ul><ul><li></div> </li></ul><ul><li><div id=”main_content&quot;> </li></ul><ul><li>Contenuto principale </li></ul><ul><li></div> </li></ul>Laboratorio Informatico Web 07/08
  22. 22. Passo n.20 <ul><li>Grazie ai selettori di id leftbar e main_content possiamo modificare il loro aspetto grafico tramite i css nel file .css: </li></ul><ul><li>#leftbar </li></ul><ul><li>{ </li></ul><ul><li>border-right:1px dashed gray; </li></ul><ul><li>width:130px; </li></ul><ul><li>height:500px; </li></ul><ul><li>padding:5px; </li></ul><ul><li>float:left; </li></ul><ul><li>} </li></ul>Laboratorio Informatico Web 07/08 La proprietà float è fondamentale affinchè i due div vengano disposti uno accanto l’altro.
  23. 23. Passo n.21 <ul><li>Ora modifichiamo la visualizzazione grafica del div main_content: </li></ul><ul><li>#main_content </li></ul><ul><li>{ </li></ul><ul><li>width:550px; </li></ul><ul><li>height:500px; </li></ul><ul><li>margin:0; </li></ul><ul><li>padding:5px; </li></ul><ul><li>float:left; </li></ul><ul><li>margin-left:25px; </li></ul><ul><li>} </li></ul>Laboratorio Informatico Web 07/08 La proprietà float è fondamentale affinchè i due div vengano disposti uno accanto l’altro. Il margin-left serve a distanziare i due div.
  24. 24. Passo n.22 <ul><li>Adesso creiamo una rule CSS per fare in modo che i paragrafi all’interno dei div leftbar e main_content, abbiano un margine esterno superiore e inferiore di 10px, e una grandezza del carattere di 12px: </li></ul><ul><li>#leftbar p, #main_content p </li></ul><ul><li>{ </li></ul><ul><li>margin:5px 0; </li></ul><ul><li>font-size:12px; </li></ul><ul><li>} </li></ul>Laboratorio Informatico Web 07/08
  25. 25. Passo n.23 <ul><li>Infine inseriamo un paragrafo nel div footer con il tuo nome e cognome, altre informazioni che credi importanti, e se sarà valido XHTML 1.0 Transitional, l’icona del W3C. </li></ul><ul><li>Modifichiamo la formattazione del testo in questo paragrafo tramite un selettore css composto: </li></ul><ul><li>#footer p </li></ul><ul><li>{ </li></ul><ul><li>font-size:10px; </li></ul><ul><li>} </li></ul><ul><li>Il testo apparirà più piccolo rispetto il resto. </li></ul>Laboratorio Informatico Web 07/08
  26. 26. Passo n.24 <ul><li>Adesso è il momento di inserire gli ‘orpelli’ grafici al nostro sito: </li></ul><ul><li>Iniziamo dal menu. </li></ul><ul><li>Andiamo sul file .css, troviamo la rule il cui selettore è #menu, e inseriamo la proprietà: </li></ul><ul><li>background:url( percorsoImmagine/nome.png ) top center no-repeat; </li></ul>Laboratorio Informatico Web 07/08
  27. 27. Passo n.25 <ul><li>Ora inseriamo un’immagine di sfondo al div content, lavorando sempre sul file .css, posizionandoci sulla rule il cui selettore di id è #content: </li></ul><ul><li>background:url(../img/corpo_sfondo.png) top center no-repeat; </li></ul>Laboratorio Informatico Web 07/08
  28. 28. Passo n.26 <ul><li>Infine il div footer, posizioniamoci sulla rule il cui selettore è #footer </li></ul><ul><li>background:url(../img/corpo_sfondo.png) top center no-repeat; </li></ul>Laboratorio Informatico Web 07/08
  29. 29. Passo n.27 <ul><li>Per ultimo andiamo a modificare le proprietà grafiche dei collegamenti con queste rule css: </li></ul><ul><li>a:link{color:black; text-decoration:none} </li></ul><ul><li>a:visited{color:black; text-decoration:none} </li></ul><ul><li>a:hover{color:gray; text-decoration:underline} </li></ul><ul><li>a:active{color:black; text-decoration:none} </li></ul>Laboratorio Informatico Web 07/08
  30. 30. Passo n.28 <ul><li>Non dimenticate di eliminare tutti i bordi che abbiamo usato fin’ora! </li></ul><ul><li>Puoi modificare la formattazione dei vari elementi a tuo piacere: dimensioni del font, tipo di carattere, colore, margini etc… </li></ul>Laboratorio Informatico Web 07/08
  31. 31. Passo n.29 <ul><li>Adesso possiamo inserire dei paragrafi di testo a nostro piacimento nel div leftbar collegamenti ad altri siti che ci piacciono, e nel div main_content , delle immagini, collegamenti, filmati da youtube etc… </li></ul><ul><li>Come inserisco un filmato da youtube nel mio sito web? </li></ul>Laboratorio Informatico Web 07/08
  32. 32. Passo n.30 <ul><li>Basta copiare e incollare il codice che trovate alla destra di ogni filmato sotto la parola ‘embed’… ;-) </li></ul>Laboratorio Informatico Web 07/08
  33. 33. Email <ul><li>Dubbi? </li></ul><ul><li>Chiarimenti? </li></ul><ul><li>Approfondimenti? </li></ul><ul><li>[email_address] </li></ul>Laboratorio Informatico Web 07/08

×