by Franco Desiderio / 12-04-2013 / 0

Impariamo a costruire un sito Web

Lezione 39: Costruiamo un template (Parte 9^)

Per terminare la costruzione del nostro template di esempio manca la descrizione della parte del contenuto ed infine del footer. Riprendiamo quello che avevamo definito nella lezione 37 come scheletro del corpo centrale del nostro template: 
<div class="ww_corpo_wrapper">
    <div class="ww_corpo_row">
      <div class="ww_corpo_cell ww_sidebar1"> ... </div>
      <div class="ww_corpo_cell ww_contenuto"> ... </div>
    </div>
</div>
Continua a leggere...

by Franco Desiderio / 05-04-2013 / 0

Impariamo a costruire un sito Web

Lezione 38: Costruiamo un template (Parte 8^)

Per terminare la descrizione della nostra sidebar occorre vedere in dettaglio il contenuto dei blocchi che noi abbiamo inserito nel nostro esempio. Naturalmente si possono mettere quanti blocchi si vuole ed il contenuto andrà deciso in funzione del vostro web site. Qualcuno per esempio vuole mettere il menu in verticale in un blocco della sidebar, oppure richiami ad altre pagine in evidenza ecc. Noi abbiamo inserito un blocco per il login/registrazione degli utenti ed un altro blocco per la ricerca su Google.
Continua a leggere...
by Franco Desiderio / 26-03-2013 / 0

Impariamo a costruire un sito Web

Lezione 37: Costruiamo un template (Parte 7^)

Terminato il menu ci occupiamo adesso del corpo della nostra pagina web. Il corpo che è tutto ciò che sta tra la header ed il footer (vedi l'immagine fornita a proposito alla lezione 31) lo includiamo in un blocco contenitore entro al quale inseriremo la sidebar ed il contenuto. Il codice html è: 
<div class="ww_corpo_wrapper">
  <div class="ww_corpo_row">
    <div class="ww_corpo_cell ww_sidebar1"> ... </div>
    <div class="ww_corpo_cell ww_contenuto"> ... </div>
  </div>
</div>
Continua a leggere...

by Franco Desiderio / 18-03-2013 / 0

Impariamo a costruire un sito Web

Lezione 36: Costruiamo un template (Parte 6^)

Terminiamo con questa lezione la costruzione del nostro menu. Continuiamo con le definizioni necessarie per stilizzare il secondo livello di menu. Cominciamo con inserire nel CSS le caratteristiche della lista di secondo livello: 
#nav ul {
  background: #edf2f6;
  display: none;
  margin: 0;
  padding: 0;
  width: 185px;
  position: absolute;
  top: 35px;
  left: 0;
  border: solid 1px #B4B4B4;
  border-radius: 3px;
  box-shadow: 0 1px 3px #B4B4B4;
}
 
Continua a leggere...
by Franco Desiderio / 15-03-2013 / 0
Quando dobbiamo definire la dimensione del carattere in un foglio di stile CSS abbiamo a disposizione diverse opzioni. Possiamo utilizzare una 'parola chiave', (small, large ecc.} oppure un valore numerico. Se si utilizza un valore, è ovviamente necessario dichiarare l'unità di misura con una delle quattro opzioni: px - em - % - pt. Quale è la migliore? Beh, se ci fosse un'opzione da preferire in assoluto non ci sarebbero verosimilmente le opzioni alternative. La risposta è quindi: dipende.
Continua a leggere...
by Franco Desiderio / 08-03-2013 / 0

Impariamo a costruire un sito Web

Lezione 35: Costruiamo un template (Parte 5^)

Continuiamo a costruire il nostro menu. Abbiamo inserito nel css la formattazione della barra del menu co l'id #nav. Adesso dobbiamo assegnare le proprietà alle voci di menu. Innanzitutto vediamo quali dichiarazioni occorrono per le voci di menu del 1° livello (quello sulla barra del menu). Se ricordate nella lezione precedente avevamo scritto nella pagina html le voci di menu utilizzando il tag delle liste <ul>.
Continua a leggere...
by Franco Desiderio / 14-02-2013 / 0

Impariamo a costruire un sito Web

Lezione 33: Costruiamo un template (Parte 3^).

Dopo aver esaminato la parte iniziale relativa allo sfondo, affrontiamo il contenuto vero e proprio della pagina (ricordiamo che facciamo riferimento alla pagina mostrata nelle immagini nella lez.31). Cominciamo ovviamente dalla testata e dal menu immediatamente successivo all'immagine di testata. Alla fine della lezione precedente abbiamo proposto l'intelaiatura della nostra pagina con i commenti che ci dicono cosa andremo ad inserire nei vari blocchi. Vediamo dunque che tutti i blocchi di contenuto (header, menu, sidebar ecc.) sono stati racchiusi in un unico contenitore che abbiamo indicato così: <div><!-- *** Tutto ciò che verrà inserito sopra allo sfondo *** --> </div>
Continua a leggere...
by Franco Desiderio / 02-02-2013 / 0

Impariamo a costruire un sito Web

Lezione 32: Costruiamo un template (Parte 2^).

Cominciamo, prima di procedere all'esame dettagliato del css e della pagina html, a vedere come organizziamo le cartelle del nostro sito web sell'hard disk del nostro PC. La cartella principale noi la chiamiamo 'esempio' e come sottocartelle creiamo 'css' dove metteremo il/i fogli di stile e 'images' dove metteremo le nostre immagini. Per il nostro sito di esempio non avremo bisogno d'altro, ma in situazione normale potrebbe esserci per esempio una sottocartella dedicata agli script javascript. Questa organizzazione non è naturalmente obbligatoria (potremmo buttare tutto nella directory principale), ma è quantomeno consigliabile per un'organizzazione 'ordinata' del nostro sito.
Continua a leggere...