Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Lab Web Prof.Di Blasi 2008

587 views

Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

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

×