La lezione 7 di web design tratta della creazione di un sito web, evidenziando l'importanza di layout, HTML, CSS e validazione. Vengono forniti consigli pratici per la gestione delle immagini, la struttura del codice e l'applicazione di stili, con attenzione all'usabilità e alla coerenza visiva. Infine, si sottolinea l'importanza della validazione del markup e dei fogli di stile per garantire la correttezza del sito.

1. LEZIONE 7
WEB DESIGN I

2. COME REALIZZARE
UN SITO

4. 1. LAYOUT

5. 1. LAYOUT
2. HTML

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

19. Impostiamo
index.html
index-00.html

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
indefinitamente a destra e a sinistra.
• Però, il contenuto del sito ha una larghezza
ben definita (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.

30. Header
index-04.html

31. Main Content
index-05.html

32. Sidebar
index-06.html

33. Footer
index-07.html

34. 3. CSS

35. 1. Creiamo un file style.css nella cartella
del nostro sito.
2. Colleghiamo style.css al nostro file
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'infinito,
mentre il contenuto del sito è tutto in
800px e centrato rispetto alla finestra
(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

49. index-08.html
style-09.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.

52. index-09.html
style-10.css

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 paragrafi,
• 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.

64. index-11.html
style-14.css

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.

68. index-12.html
style-16.css

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 finale
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
finestra 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 fine 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