Lezione 40: Costruiamo un template (Conclusione)

Impariamo a costruire un sito Web

Lezione 40: Costruiamo un template (Conclusione)

Terminiamo la costruzione del nostro template di esempio descrivendo la seconda riga di contenuto ed il footer.

Nell apagina html, come abbiamo visto, il codice sarà:

<div class="ww_contenuto_row">
  <div class="ww_box_content_row">
    <div class="ww_contenuto_item-1" style="width:270px; margin:15px 10px 0 35px; float:left;">
      <ul>
        <li><a href="#">Le ultime notizie da Stintino</a></li>
        <li><a href="#">Il Meteo di Stintino</a></li>
        <li><a href="#">Numeri Utili per i turisti</a></li>
      </ul>
    </div>
    <div class="ww_contenuto_item-1" style="width:400px; margin:5px 5px 0 0"">
      <blockquote style="margin: 10px 0">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt condimentum dolor vel fringilla. Vestibulum eros tellus, laoreet nec malesuada a, luctus id velit. Sed at eros eget enim interdum cursus nec interdum ligula. Nunc sed interdum odio. Nulla accumsan, dolor quis fermentum mattis, metus sapien cursus dolor, quis varius felis lacus at metus. Suspendisse venenatis nunc eu dui fermentum luctus.
      </blockquote>
    </div>
  </div>
</div>

 

[ad code=5]

Tralasciamo la descrizione delle prime due div che sono le medesime già descritte per la riga precedente.

Avendo suddiviso anche questa seconda riga in due celle affiancate, anche in questo caso all’interno del box
ww_box_content_row abbiamo due div:

<div class=”ww_contenuto_item-1″ style=”width:270px; margin:15px 10px 0 35px; float:left;”> e

<div class=”ww_contenuto_item-1″ style=”width:400px; margin:5px 5px 0 0″”>

Anche queste sono state descritte la lezione precedente per cui ora ci soffermiamo sul loro contenuto.

Nella cella di sinistra inseriamo una lista con 3 elementi sui quali mettiamo un link (non attivo in questo esempio). Il codice html è molto semplice, ma noi vogliamo personalizzare l’aspetto della lista per cui andremo a descrivere delle proprietà nel nostro foglio css.

.ww_box_content_row ul {
list-style-image:url(../images/bullet.png);
}

In questo modo attribuiamo una particolare proprietà di stile agli elementi di una lista discendente da una div di classe ww_box_content_row. La proprietà list-style-image, come visto nella lezione 27 è usato per rimpiazzare il marcatore di default con un’immagine, così da ottenere l’effetto dell’esempio.

Nella cella di destra abbiamo inserito un testo con il tag blockquote che, come visto alla lezione 6, evidenzierà il testo rientrando il margine rispetto a quello di default ed aggiungendo inoltre una spaziatura di una riga prima e dopo il blocco. Noi abbiamo aggiunto anche un’immagine delle virgolette. Abbiamo quindi definito nel css la proprietà:

blockquote {
  padding: 10px;
  background-color: #D6DEE6;
  background-image:url(../images/blockquote_before.png);
  background-position: left top;
  background-repeat: no-repeat;
  padding-left: 38px;
}

con la quale abbiamo assegnato uno sfondo celeste chiaro e l’immagine che usiamo come sfondo (ovviamente senza ripetizione) posizionandola in alto a sinistra.

Per il contenuto questo è tutto e non ci resta da vedere che il footer.

Nel foglio html il footer sarà un blocco <div> come segue:

<div class="ww_footer">
  <div class="ww_rss-icon">
    <a href="#" title="RSS"><img src="images/rssicon.png" alt="RSS Feed" width="32" height="32" /></a>
  </div>
  <div class="ww-footer-text">
    <p> © 2012. All Rights Reserved.  |  <a href="#">SiteMap</a>  |  <a href="#">links</a></p>
  </div>
</div>

Praticamente abbiamo due blocchi affiancati all’interno del blocco centrale (il rettangolo celeste), il primo contenente l’immagine col link ai feed se si volessero utilizzare, il secondo col testo e i due link.

Ancora una volta quello che conta maggiormente non è il contenuto, ma le proprietà che consentono il posizionamento e lo stile che vogliamo mostrare. Vediamo quindi cosa abbiamo inserito nel nostro foglio di stile:

.ww_footer {
  text-decoration: none;
  padding-top: 8px;
  color: #192129;
  font-size: 11px;
  background-color:#D6DEE6;
  border:1px solid #5D5D5D;
  width:958px;
  height:38px;
}

.ww_rss-icon {
  float:left;
  margin:0 0 8px 20px;
}

.ww-footer-text {
  text-align:center;
  margin-top:10px;
}

La prima classe ww_footer è quella con cui assegnamo le proprietà che deve assumere il rettangolo del footer. Vediamole in dettaglio:

text-decoration: none; dice che non vogliamo che i link vengano sottolineati quando passiamo sopra il mouse.
background-color:#D6DEE6; assegna il colore celeste allo sfondo.
border:1px solid #5D5D5D; evidenzia un bordo più scuro intorno al box del footer.
width:958px; e height:38px; ne fissano le dimensioni. Notiamo che la lunghezza è di 960px, ma noi scriviamo 958 perché vanno contati i 2 pixels del bordo.
color: #192129; font-size: 11px; assegnano colore e grandezza del font al testo incluso entro la <div>

La seconda classe ww_rss-icon è usata per far si che la div con l’immagine resti affiancata a sinistra della successiva (float:left) e posiziona correttamente l’immagine stessa.

La terza classe ww-footer-text è relativa al testo e dice con text-align: center; che il testo che inseriremo all’interno di questa <div> andrà allineato al centro. Il margine da poi il corretto posizionameto al testo.

A questo punto il nostro template è completo. Su questa falsariga ne può essere costruito uno che faccia al caso vostro.

Il materiale completo di questo nostro esercizio può essere scaricato qui.

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.