More Related Content
Viewers also liked (20)
Similar to Lezione 7 (20)
Lezione 7
- 1. LEZIONE 7 WEB DESIGN I
- 2. COME REALIZZARE UN SITO
- 4. 1. LAYOUT
- 6. 1. LAYOUT 2. HTML 3. CSS
- 7. 1. LAYOUT 2. HTML 3. CSS 4. VALIDAZIONE
- 8. 1. LAYOUT
- 10. TAGLIARE IL PSD Occorre ricavare dal PSD le IMMAGINI che ci serviranno nel CSS del sito.
- 11. RICORDA!
- 12. RICORDA! Usare il minor numero possibile di immagini
- 13. RICORDA! Usare il minor numero possibile di immagini Ridurre la dimensione delle immagini senza ridurne visibilmente la qualit.
- 14. SELECT COPY VS. PASTE ogni singola immagine
- 15. Le IMMAGINI per il nostro SITO header header nella zona con effetto luce footer sfondo pulsante "Join our team" icone RSS, e-mail e Twitter
- 16. RICORDA! di usare il comando "Save for Web & devices" per salvare le immagini Foto: JPEG High, Optimized, Quality=60 Immagine con trasparenza: PNG-24 di dare nomi sensati alle immagini
- 17. 2. HTML
- 18. Creiamo la CARTELLA del SITO MySite images index.html style.css
- 22. index-01.html
- 23. Consigli Aggiungete un commento che segnali la chiusura di ogni <div> Nel creare l'HTML si parte dalla macro- struttura del sito, ossia dalle aree principali. Ad ogni "rettangolo" che rappresenta una zona, corrisponde un div
- 24. Altri div strutturali Nel sito che stiamo creando vogliamo che header e footer si espandano inde鍖nitamente a destra e a sinistra. Per嘆, il contenuto del sito ha una larghezza ben de鍖nita (non si espande come header e footer). Ci servono altri div.
- 26. index-02.html
- 27. index-03.html
- 28. Aggiungere il contenuto Ora che abbiamo creato la struttura della pagina con i div, possiamo passare all'inserimento dei contenuti. Dobbiamo prima capire quali elementi utilizzare per ciascuna parte di contenuto.
- 34. 3. CSS
- 35. 1. Creiamo un 鍖le style.css nella cartella del nostro sito. 2. Colleghiamo style.css al nostro 鍖le index.html:
- 36. Reset delle regole CSS di default Ogni browser ha delle sue impostazioni di font, margin e padding di default. Per avere un layout consistente e "senza sorprese" dobbiamo azzerare questi stili di default.
- 37. Centrare il contenuto Header e footer si estendono all'in鍖nito, mentre il contenuto del sito 竪 tutto in 800px e centrato rispetto alla 鍖nestra (non 竪 il font ad essere centrato, ma il contenuto del sito)
- 38. style-02.css
- 39. Ricorda! Cos狸 come per la creazione della pagina in XHTML, per la realizzazione del CSS si parte dall'alto e si procede verso il basso.
- 40. Header Cominciamo con l'assegnare lo sfondo all'header. Lo sfondo di #main sar header_slice.jpg dell'header, mentre lo sfondo di .container all'interno di #main sar header.jpg
- 43. Logo Per usare l'immagine del logo utilizziamo una tecnica chiamata "image replacement". Mettiamo l'immagine come sfondo del tag h1 e poi spostiamo la scritta all'interno di h1 molto a sinistra con la propriet text-indent style-05.css
- 44. Nel nostro layout, l'immagine del logo si trova a met della fascia azzurra (in verticale). Come spostiamo l'immagine del logo? style-06.css
- 46. Tagline Come spostiamo la tagline accanto al logo?
- 47. Per spostare la tagline accanto al logo dobbiamo usare la propriet float. float 竪 molto pi湛 usata rispetto a position. Ogni volta che si usa un float, si deve usare un clear.
- 48. Quando non si 竪 sicuri del comportamento e delle dimensioni di un elemento, 竪 utilissimo aggiungere un bordo. style-07.css
- 50. Navigazione Cambiamo per prima cosa i font della navigazione, cos狸 da poter determinare con esattezza la posizione delle voci. Ricordiamoci che stiamo assegnando stili a dei link all'interno dei list item. Dobbiamo eliminare i pallini marcatori di lista.
- 51. Anche in questo caso, per allineare le voci del menu di navigazione, utilizziamo la propriet float (quindi dovremo usare un clear). Si sarebbe anche potuto usare display: inline; perch辿 le voci del menu di navigazione non hanno un'immagine di sfondo.
- 53. Contenuto Cominciamo ad impostare i font (dimensione, colore e font-weight), cos狸 da avere pi湛 chiare le spaziature tra gli elementi testuali.
- 56. Assegniamo dei padding per distanziare i vari elementi. style-12.css
- 58. News Dobbiamo: spostare un po' pi湛 in basso nella pagina la sezione delle news, togliere un po' di padding da h3, ridurre lo spazio sopra ai paragra鍖, aggiungere del padding tra le due news.
- 59. style-13.css
- 61. Sidebar Per spostare la sidebar accanto a content, utilizziamo la propriet float (e quindi dovremo aggiungere un <div class="clear"></div> in index.html) buona norma impostare le larghezze degli elementi a cui si applica il float.
- 63. Sistemiamo la posizione della sidebar con i margin (margin-left e margin-top in questo caso). Aggiungiamo inoltre altre informazioni sui font e sul background che deriviamo dal PSD.
- 65. Dobbiamo adesso aggiungere le icone di RSS, e-mail e Twitter alle rispettive voci. Sfruttiamo la propriet del background per gli elementi <li>. Dobbiamo aggiungere un id a ciascun <li> per poter assegnare l'immagine giusta ad ogni elemento.
- 67. Se ci dovessero essere problemi nell'allineamento dell'immagine con il contenuto di <li>, si possono utilizzare le propriet margin e padding per sistemarli.
- 69. Pulsante "Join Our Team" Dobbiamo aggiungere una class al link del pulsante per potervi fare riferimento in maniera immediata.
- 71. Spostiamo il pulsante pi湛 a destra utilizzando margin-left. Per "ingrandire" lo sfondo, aggiungiamo dei padding.
- 72. Con l'aggiunta dei padding, l'elemento ha cambiato dimensioni e adesso appare troppo spostato a destra. Riduciamo a 14px il margin-left che avevamo impostato a 30px.
- 73. Per aumentare lo spazio tra il pulsante ed il bordo inferiore della sidebar, aggiungiamo un padding-bottom a quest'ultima.
- 74. Il bordo del pulsante non 竪 stato "tagliato" dal PSD perch辿 pu嘆 essere aggiunto facilmente mediante la propriet border.
- 75. style-16.css
- 76. Footer
- 77. Il risultato 鍖nale index.html style.css
- 78. A questo punto, si possono fare delle piccole variazioni, perch辿 il risultato nel browser non 竪 sempre identico a quello del PSD. Pu嘆 essere ad esempio necessario rivedere alcune spaziature per facilitare la lettura o migliorare le proporzioni del sito nella 鍖nestra del browser.
- 79. 4. VALIDAZIONE
- 80. W3C VALIDATION SERVICE http://validator.w3.org/ : validazione del markup http://jigsaw.w3.org/css-validator/ : validazione dei fogli di stile
- 81. La validazione ci permette di individuare gli eventuali errori presenti nelle nostre pagine. E' importante utilizzare la DOCTYPE corretta, altrimenti si generano errori. Il validatore d anche dei warning: non sono errori, ma sarebbe meglio evitarli.
- 82. Controllate sempre: di aver chiuso correttamente i tag di aver chiuso le "..." negli attributi XHTML di aver messo i ; alla 鍖ne di ogni regola CSS di aver chiuso tutte le } nel CSS
- 83. Firebug 竪 di grandissimo aiuto per determinare i valori di margin, padding e width.
- 84. Trovate il tutorial seguito in questa lezione a questo indirizzo: http://goo.gl/Dsk3O
Editor's Notes
- #2: \n
- #3: \n
- #4: \n
- #5: \n
- #6: \n
- #7: \n
- #8: \n
- #9: \n
- #10: \n
- #11: \n
- #12: \n
- #13: \n
- #14: \n
- #15: \n
- #16: \n
- #17: \n
- #18: \n
- #19: \n
- #20: \n
- #21: \n
- #22: \n
- #23: \n
- #24: \n
- #25: \n
- #26: \n
- #27: \n
- #28: \n
- #29: \n
- #30: \n
- #31: \n
- #32: \n
- #33: \n
- #34: \n
- #35: \n
- #36: \n
- #37: \n
- #38: \n
- #39: \n
- #40: \n
- #41: \n
- #42: \n
- #43: \n
- #44: \n
- #45: \n
- #46: \n
- #47: \n
- #48: \n
- #49: \n
- #50: \n
- #51: \n
- #52: \n
- #53: \n
- #54: \n
- #55: \n
- #56: \n
- #57: \n
- #58: \n
- #59: \n
- #60: \n
- #61: \n
- #62: \n
- #63: \n
- #64: \n
- #65: \n
- #66: \n
- #67: \n
- #68: \n
- #69: \n
- #70: \n
- #71: \n
- #72: \n
- #73: \n
- #74: \n
- #75: \n
- #76: \n
- #77: \n
- #78: \n
- #79: \n
- #80: \n
- #81: \n
- #82: \n
- #83: \n