LEZIONE 7
 WEB DESIGN I
COME REALIZZARE
	

 	

 	

 	

 	

 	

 	

 	

 	

 UN SITO
1. LAYOUT
1. LAYOUT
2. HTML
1. LAYOUT
2. HTML
3. CSS
1. LAYOUT
2. HTML
3. CSS
4. VALIDAZIONE
1. LAYOUT
TAGLIARE IL PSD

Occorre ricavare dal PSD le
IMMAGINI che ci serviranno
nel CSS del sito.
RICORDA!
RICORDA!

Usare il minor numero possibile di
immagini
RICORDA!

Usare il minor numero possibile di
immagini
Ridurre la dimensione delle
immagini senza ridurne visibilmente
la qualità.
SELECT
       COPY
VS.    PASTE
      ogni singola
       immagine
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
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
2. HTML
Creiamo la CARTELLA
      del SITO
     MySite

       images

       index.html

       style.css
Impostiamo
index.html




index-00.html
index-01.html
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
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.
index-02.html
index-03.html
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.
Header




index-04.html
Main Content




 index-05.html
Sidebar




index-06.html
Footer




index-07.html
3. CSS
1. Creiamo un file style.css nella cartella
   del nostro sito.

2. Colleghiamo style.css al nostro file
   index.html:
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.
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)
style-02.css
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.
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
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
• 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
Tagline


Come spostiamo la tagline
accanto al logo?
• 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.
➡ Quando non si è sicuri del comportamento
  e delle dimensioni di un elemento, è
  utilissimo aggiungere un bordo.




            style-07.css
index-08.html
style-09.css
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.
• 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.
index-09.html
style-10.css
Contenuto

• Cominciamo ad impostare i font
  (dimensione, colore e font-weight), così da
  avere più chiare le spaziature tra gli
  elementi testuali.
• Assegniamo dei padding per distanziare i
  vari elementi.




            style-12.css
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.
style-13.css
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.
• 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.
index-11.html
style-14.css
• 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.
• Se ci dovessero essere problemi
  nell'allineamento dell'immagine con il
  contenuto di <li>, si possono utilizzare le
  proprietà margin e padding per
  sistemarli.
index-12.html

style-16.css
Pulsante "Join Our Team"
• Dobbiamo aggiungere una class al link del
  pulsante per potervi fare riferimento in
  maniera immediata.
• Spostiamo il pulsante più a destra
  utilizzando margin-left.

• Per "ingrandire" lo sfondo, aggiungiamo dei
  padding.
• 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.
• Per aumentare lo spazio tra il pulsante ed il
  bordo inferiore della sidebar, aggiungiamo
  un padding-bottom a quest'ultima.
• Il bordo del pulsante non è stato "tagliato"
  dal PSD perché può essere aggiunto
  facilmente mediante la proprietà border.
style-16.css
Footer
Il risultato finale


  index.html
   style.css
• 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.
4. VALIDAZIONE
W3C VALIDATION
     SERVICE

• http://validator.w3.org/ : validazione del
  markup
• http://jigsaw.w3.org/css-validator/ :
  validazione dei fogli di stile
• 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.
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
• Firebug è di grandissimo aiuto per
  determinare i valori di margin, padding
  e width.
Trovate il tutorial seguito in questa lezione a
questo indirizzo:

   http://goo.gl/Dsk3O

Lezione 7

  • 1.
    LEZIONE 7 WEBDESIGN I
  • 2.
  • 4.
  • 5.
  • 6.
  • 7.
    1. LAYOUT 2. HTML 3.CSS 4. VALIDAZIONE
  • 8.
  • 10.
    TAGLIARE IL PSD Occorrericavare dal PSD le IMMAGINI che ci serviranno nel CSS del sito.
  • 11.
  • 12.
    RICORDA! Usare il minornumero possibile di immagini
  • 13.
    RICORDA! Usare il minornumero possibile di immagini Ridurre la dimensione delle immagini senza ridurne visibilmente la qualità.
  • 14.
    SELECT COPY VS. PASTE ogni singola immagine
  • 15.
    Le IMMAGINI peril 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.
  • 18.
    Creiamo la CARTELLA del SITO MySite images index.html style.css
  • 19.
  • 22.
  • 23.
    Consigli ✓ Aggiungete uncommento 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.
  • 27.
  • 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.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
    1. Creiamo unfile style.css nella cartella del nostro sito. 2. Colleghiamo style.css al nostro file index.html:
  • 36.
    Reset delle regoleCSS 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.
  • 39.
    Ricorda! ➡ Così comeper la creazione della pagina in XHTML, per la realizzazione del CSS si parte dall'alto e si procede verso il basso.
  • 40.
    Header • Cominciamo conl'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 usarel'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 nostrolayout, 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 latagline accanto al logo?
  • 47.
    • Per spostarela 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 nonsi è sicuri del comportamento e delle dimensioni di un elemento, è utilissimo aggiungere un bordo. style-07.css
  • 49.
  • 50.
    Navigazione • Cambiamo perprima 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 inquesto 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.
  • 53.
    Contenuto • Cominciamo adimpostare i font (dimensione, colore e font-weight), così da avere più chiare le spaziature tra gli elementi testuali.
  • 56.
    • Assegniamo deipadding per distanziare i vari elementi. style-12.css
  • 58.
    News Dobbiamo: • spostare unpo' 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.
  • 61.
    Sidebar • Per spostarela 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 laposizione 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.
  • 65.
    • Dobbiamo adessoaggiungere 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 cidovessero essere problemi nell'allineamento dell'immagine con il contenuto di <li>, si possono utilizzare le proprietà margin e padding per sistemarli.
  • 68.
  • 69.
    Pulsante "Join OurTeam" • Dobbiamo aggiungere una class al link del pulsante per potervi fare riferimento in maniera immediata.
  • 71.
    • Spostiamo ilpulsante più a destra utilizzando margin-left. • Per "ingrandire" lo sfondo, aggiungiamo dei padding.
  • 72.
    • Con l'aggiuntadei 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 aumentarelo spazio tra il pulsante ed il bordo inferiore della sidebar, aggiungiamo un padding-bottom a quest'ultima.
  • 74.
    • Il bordodel pulsante non è stato "tagliato" dal PSD perché può essere aggiunto facilmente mediante la proprietà border.
  • 75.
  • 76.
  • 77.
    Il risultato finale index.html style.css
  • 78.
    • A questopunto, 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.
  • 80.
    W3C VALIDATION SERVICE • http://validator.w3.org/ : validazione del markup • http://jigsaw.w3.org/css-validator/ : validazione dei fogli di stile
  • 81.
    • La validazioneci 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: ✓ diaver 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 tutorialseguito in questa lezione a questo indirizzo: http://goo.gl/Dsk3O