Lezione 33: Costruiamo un template (Parte 3^)

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ì:

[ad code=5]

<div><!– *** Tutto ciò che verrà inserito sopra allo sfondo *** –>

</div>

Definiamo quindi un id nel css per assegnare delle proprietà al nostro contenitore che chiameremo ‘ww_main’. Gli abbiamo assegnato queste proprietà:

#ww_main {
   overflow:hidden;
   width: 960px;
   margin:0 auto;
}

Non assegnandogli proprietà ‘position‘ il contenitore verrà posizionato come previsto dal default, cioè a partire dall’inizio della finestra del browser, ricoprendo la <div> già inserita per l’immagine della luce inserita in alto. Anche l’altezza non viene indicata perché ci interessa che si adatti al contenuto; vogliamo infatti che questo sia un template utilizzabile per tutte le pagine del nostro sito, naturalmente cambiandone il contenuto.

Vediamo il perché delle proprietà indicate:

overflow:hidden; dice di nascondere eventuale overflow; tra gli effetti, diciamo così, secondari c’è quello di evitare che il contenitore vada a ricoprire l’immagine della luce nascondendola. La stessa cosa poteva essere ottenuta aggiungendo la proprietà ‘top:0‘ alla dichiarazione di #ww_sfondo_top_wrapper. Riprenderemo questo punto poco più sotto.

width: 960px; assegna ovviamente la larghezza al la nostra pagina (quella della nostra header). margin:0 auto; invece dice di non lasciare margini in alto ed in basso, mentre il valore auto (riferito ai margini sinistro e destro) posiziona questo contenitore centralmente nella finestra del browser.

A questo punto aggiungiamo anche l’header. Definiamo nel css una classe così:

.ww_header {
   margin-top: 45px;
   width:960px;
   height: 180px;
   background-image: url('../images/header.jpg');
   background-repeat: no-repeat;
}

Potevamo definire un id anziché una classe? Certo, visto che l’header viene comunque richiamato una volta sola in ciascuna pagina e sarebbe stato più logico data l’unicità di questa div, ma a noi certe scelte servono per introdurre anche commenti e mostrare le alternative accettabili.

In questo caso le proprietà sono abbastanza auto-esplicative.

Ovviamente con width e height assegnamo i valori di larghezza e di altezza dell’immagine che utilizziamo come testata. Con margin-top: 45px; diciamo di lasciare un margine in alto per non ricoprire l’immagine della luce; se scrivevamo margin:45px 0 0 0; oppure margin: 45px auto; ottenevamo comunque lo stesso effetto occupando questa immagine l’intera larghezza assegnata al suo contenitore.

Le altre due direttive assegnano l’immagine come sfondo alla div con tale classe. Ripetono la stessa sintassi già vista per le altre immagini e non stiamo qui a ripetere sempre la stessa cosa.

La nostra pagina può quindi essere arricchita di un paio di righe e diventa:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"[]>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Sito di prova</title>
   <meta name="keywords" content="sito, website, test, prova" />
   <meta name="description" content="Sito web di prova dimostrativo dell'utilizzo del codice html." />
   <meta name="robots" content="index,follow" />
   <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>

<body>
   <!-- *** Background della nostra pagina *** -->
   <div id="ww_sfondo_top_wrapper">
      <div id="ww_sfondo_top"></div>
   </div>
   <div id="ww_main">
      <!-- *** Header *** -->
      <div class="ww_header"></div>

      <div><!-- *** Menu *** --></div>
      <div><!-- *** Corpo Centrale *** -->

         <div><!-- *** SideBar *** -->
            <div><!-- *** Blocco 1 *** --></div>
            <div><!-- *** Blocco 2 *** --></div>
         </div>

         <div><!-- *** Contenuto *** -->
            <div><!-- *** 1^ Riga *** --></div>
            <div><!-- *** 2^ Riga *** --></div>
         </div>

      </div>
      <div><!-- *** Footer *** --></div>
   </div>
</body>
</html>

A questo punto ci soffermiamo su uno strumento utile per il debugging delle vostre pagine ed anche per capire meglio gli effetti di quello che stiamo facendo.

A questo scopo occorre che stiate utilizzando Chrome oppure Firefox che includono questo strumento di debugging. Io utilizzerò Chrome e ciò che mostrerò farà quindi riferimento a questo browser.

Scaricate da qui il file .zip contenente il foglio html con le poche righe sinora scritte, il css, anch’esso con la parte vista sinora e le immagini utilizzate. Estraete tutto in una cartella di vostro gradimento e lanciate il file index.html.

Chrome mostrerà:

A questo punto puntate il mouse su una qualunque parte della pagina e premete il tasto destro. Nel menu contestuale che compare
scegliete ‘Ispeziona elemento’.

Si aprirà una finestra come in figura:

Nel riquadro più grande in basso potete vedere il codice html della vostra pagina, mentre nel riquadro più piccolo a destra saranno mostrati gli stili dell’elemento html selezionato col mouse. Saranno mostrati sia gli stili del foglio css sia quelli eventulamente presenti direttamente nella codifica html.

I blocchi html li troverete inizialmente chiusi e si possono aprire per mostrare tutte le righe del blocco cliccando sul triangolino blu a sinistra. Posizionatevi sulla div ww_main e guardate cosa succede se, andando nel riquadro degli stili togliete la spunta ad ‘overflow:hidden‘.

Come potete vedere l’immagine delle luci in alto è sparita. Adesso posizionate il mouse sulla riga ‘<div id=”ww_sfondo_top_wrapper”>’, premete il tasto destro del mouse e scegliete la voce ‘Edit as HTML’, quindi inserite questa definizione di stile ‘style=”top:0″ come in figura:

Cliccate su un punto fuori dal riquadro di editing oppure sulla finestra del browser, per chiudere il vostro editing e guardate l’effetto:

aggiungendo ‘top:0;’ l’immagine delle luci è tornata magicamente in bella vista.

Potete verificare l’effetto che ottenete modificando delle direttive su tutto ciò che faremo. Vi aiuterà a capire (e qualche volta a porvi delle domande su ciò che pensavate di aver capito :-))

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.