Lezione 37: Costruiamo un template (Parte 7^)

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>

[ad code=5]

Come vedete in realtà abbiamo definito due blocchi uno interno all’altro. Quello esterno stilizzato con la classe ww_corpo_wrapper
è il contenitore principale. Vediamo le proprietà che gli abbiamo assegnato nel CSS, poi capiremo anche il significato della <div> più interna.

.ww_corpo_wrapper {
  margin: 0;
  position: relative;
  margin-top: 10px;
  margin-bottom: 0;
  cursor: auto;
  width: 960px;
  padding: 0 4px 0 0;
}

position: relative; ci dice che la posizione del blocco è da intendersi relativa al suo contenitore per cui margin-top e margin-bottom non sono evidentemente relativi alla finestra del browser, ma al blocco. Per definire i margini si poteva scrivere margin: 10px 0 0 0;. cursor: auto; è pleonastico e width e padding si commentano da soli.

Per quanto riguarda la div più interna abbiamo semplicemente:

.ww_corpo_row {
   display: table-row;
}

Abbiamo cioè detto che va trattata come fosse una riga di tabella. Avremmo potuto chiaramente inserire questa dichiarazione all’interno di ww_corpo_wrapper, ma in questo modo abbiamo sempre la possibilità di inserire una seconda riga che occuperà l’intera larghezza del corpo della pagina.

All’interno di questa riga (che nel nostro template di esempio resterà unica) inseriremo la sidebar ed il contenuto vero e proprio che tratteremo come celle della riga.

La sidebar è la colonna verticale che abbiamo inserito a sinistra del nostro layout come in figura. Come sempre diamo prima il codice che abbiamo inserito nella pagina html.

Sidebar

 <div class="ww_corpo_cell ww_sidebar1">
   <div class="ww_blocco">
     <div class="ww_header_blocco">
	<h3 class="t">Login<a class="logout" href="#">Logout</a></h3>	     </div>
     <div class="ww_contenuto_blocco">
	<form action="#" method="post" name="login" id="form-login">
	  <fieldset class="input" style="border: 0 none;">
	    <p>
              <label for="m_username">Username</label><br />
              <input id="m_username" type="text" name="username" size="18" />
            </p>
	    <p>
              <label for="m_passwd">Password</label>
              <br />
              <input id="m_passwd" type="password" name="passwd" size="18" />
            </p>
	  </fieldset>
	  <div style="margin-left:10px;">
	    <input type="submit" name="Submit" class="fd_button" value="Login" />
            <input type="reset" name="Reset" class="fd_button" value="Reset" />
	  </div>	
	  <ul>
	    <li>
	      <a href="#">Registrazione</a>
	    </li>
	    <li>
	      <a href="#">Password dimenticata?</a>
	    </li>
	    <li>
	      <a href="#">User ID dimenticato?</a>
	    </li>
	    <li>
	      <a href="#">Modifica Password</a><br />&nbsp;
	    </li>
	  </ul>
	</form>  
	<div class="cleared"></div>
      </div>
      <div class="cleared"></div>
    </div>
    <div class="ww_blocco">
      <div class="ww_header_blocco">
	<h3 class="t">Ricerca</h3>									        </div>
      <div class="ww_contenuto_blocco">
        <div style="padding:10px 10px 15px 10px;">
	  <div class="cse-branding-bottom">
	    <div class="cse-branding-form">
	      <form action="http://www.google.it" id="cse-search-box" target="_blank">
	        <div>
		  <input type="hidden" name="cx" value="partner-pub-xxxxxxxxxxxxxxxxxx:yyyyyyyyyyyyy" />
		  <input type="hidden" name="ie" value="UTF-8" />
		  <input type="text" name="q" size="24" />
		  <input type="submit" name="sa" value="Cerca" />
		</div>
	      </form>
	    </div>
	    <div class="cse-branding-logo">
    	      <img src="images/poweredby_FFFFFF.png" alt="Google" />
	    </div>
	    <div class="cse-branding-text">
	      &nbsp;
	    </div>
	  </div>
	</div>	
	<div class="cleared"></div>
      </div>
    </div>	
  </div>

Per aiutare a capire diciamo che potete leggere i blocchi in questo modo:

<div class="ww_corpo_cell ww_sidebar1">
  <div class="ww_blocco">
    <div class="ww_header_blocco"> ... Titolo del blocco 1 ...</div>
    <div class="ww_contenuto_blocco"> ... Contenuto ...</div>
    <div class="cleared"></div>
  </div>
  <div class="ww_blocco">
    <div class="ww_header_blocco"> ... Titolo del blocco 2 ...</div>
    <div class="ww_contenuto_blocco"> ... Contenuto ...</div>
    <div class="cleared"></div>
  </div>
</div>

Cioè abbiamo inserito due blocchi nella sidebar, come si può vedere nella figura, uno per il login degli utenti e l’altro per la ricerca su Google. Ciascuno di questi blocchi è individuato nel codice html da una <div> alla quale abbiamo assegnato una classe (per gli attributi necessari ad attribuirgli lo stile come in figura) chiamata ww_blocco.

All’interno di ciascun blocco poi abbiamo due sotto-blocchi, uno che individua il titolo del blocco (quello a sfondo blu scuro) e l’altro il contenuto del blocco. A a questi due blocchi abbiamo assegnato una classe, rispettivamente ww__header_blocco e ww_contenuto_blocco. All’interno delle <div> c’è poi il codice necessario per portare a video il relativo contenuto, mentre nel CSS dovremo evidentemente assegnare gli stili per ciascun blocco.

La sidebar che contiene i due blocchi è ovviamente a sua volta un blocco <div> e viene definita dagli attributi assegnati per mezzo delle classi ww_corpo_cell e ww_sidebar1. Abbiamo due classi distinte perché nella prima, ww_corpo_cell, abbiamo inserito attributi comuni al corpo della pagina come vedremo in seguito.

Nel nostro esempio di template abbiamo solo due blocchi che servono da esempio, ma naturalmente ne possono essere inseriti quanti ne volete e la pagina si allungherà automaticamente quanto necessario a contenere la lunghezza della sidebar (analogamente ovviamente se ad allungarsi forse il blocco del contenuto che analizzeremo in seguito.

Vediamo dunque quali sono gli attributi che abbiamo assegnati, a livello di CSS, al blocco contenitore della sidebar:

.ww_corpo_cell {
  display:table-cell;
  vertical-align: top;
}

Questa è la prima delle due classi usate e, come detto, contiene gli attributi in comune per le due colonne del <body> (sidebar e contenuto). Non fa altro che dire che questa è da leggersi come una cella della riga contenitore e che l’allineamento verticale è in alto.

La seconda classe ww_sidebar1 specifica della sidebar invece sarà:

.ww_sidebar1 {
  width: 200px;
  float:left;
}

e con questa assegnamo una larghezza alla colonna e con float: left; diciamo che deve essere allineata a sinistra ed il prossimo blocco sarà posizionato alla sua destra e non in verticale.

Per la definizione della sidebar non c’è altro. Vediamo invece come vanno definiti i blocchi all’interno della sidebar. Il contenitore di ciascun blocco, come visto è definito per mezzo della classe ww_blocco:

.ww_blocco {
  border-radius: 5px;
  -moz-border-radius: 5px;
  background-color:#069;
  margin-bottom:10px;
}

Questi attributi definiscono l’aspetto del blocco. border-radius
dice che i bordi vanno arrotondati (ormai non vi rimandiamo più alla lezione dove abbiamo trattato le singole direttive con i possibili valori). Assegna quindi il colore di sfondo azzurro ed il margine inferiore per evitare che il blocco termini immediatamente dopo l’ultima riga senza un minimo di margine.

Quindi all’interno del contenitore del blocco abbiamo la testata del blocco ed il contenuto del blocco. La testata è definità con ww_header_blocco:

.ww_header_blocco {
  display:block;
  border-radius: 5px;
  -moz-border-radius: 5px;
  height:25px;
  background-color:#036;
}
.ww_header_blocco .t {
  font-size:14px;
  font-weight:bold;
  padding:5px 0 5px 10px;
  color:#FFF;
}

Gli attributi della classe ww_header_blocco ci dicono che la <div> con questa classe va considerata come un blocco di altezza 25px e con sfondo blu. Anche a questa testata arrotondiamo i bordi.

La seconda dichiarazione, ww_header_blocco .t si riferisce agli elementi con classe .t dipendenti da ww_header_blocco. Praticamente diamo lo stile del testo del titolo del blocco. Il titolo come si può vedere nel codice html lo assegnamo per mezzo del tag <h3>, mentre con queste direttive assegnamo alcuni valori alle proprietà di font e padding specifci per questa situazione, che sovrascriveranno quelli più generali assegnati a <h3> o di default.

Per concludere questa lezione vediamo la definizione delle classi con le quali stilizziamo il contenuto dei blocchi nella sidebar:

.ww_contenuto_blocco ul {
  padding:15px;
}
.ww_contenuto_blocco, .ww_contenuto_blocco a, .ww_contenuto_blocco a:link, .ww_contenuto_blocco a:hover, .  ww_contenuto_blocco a:visited {
  font-size:14px;
  color:#FFF;
}

Molto semplici. Non ci sarebbe molto da aggiungere alle proprietà ereditate se non un padding per una lista <ul> per evitare che la lista che andremo a scrivere venga attaccata al bordo sinistro e all’elemento che la precede, mentre con la seconda dichiarazione invece assegnamo un font di 14px anziché il defailt di 16px a questo contenuto ed un colore bianco al font che deve restare immutato, così come il font-size, per i link anche con il puntatore del mouse sopra e dopo essere stati visitati (per default il colore cambierebbe).

La prossima lezione vedremo il dettaglio del contenuto della sidebar prima di iniziare con il contenuto della pagina web.

Lascia un commento

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