Lezione 39: Costruiamo un template (Parte 9^)

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>

[ad code=5]

Quindi quello che vogliamo inserire nel contenuto della pagina (le due righe della figura qui sotto)  lo andremo ad inserire nella <div class=”ww_corpo_cell ww_contenuto”> … </div>
Layout
Il codice html sarà:

<div class="ww_corpo_cell ww_contenuto">
  <div class="ww_contenuto_row">
    <div class="ww_box_content_row" style="height:230px;">
      <div class="ww_contenuto_item-1" style="margin:10px 20px 0 5px; float:left;">
        <img width="300" height="211" alt="" src="./images/TorrePelosa.jpg" />
      </div> 
      <div class="ww_contenuto_item-1" style="margin:10px; width:380px;">
        <h3>Benvenuti a Stintino</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pharetra, tellus sit amet congue vulputate, nisi erat iaculis nibh, vitae feugiat sapien ante eget mauris. Aenean sollicitudin imperdiet arcu, vitae dignissim est posuere id.<br />
        <p><a href="#">Continua ...</a></p>
      </div>
    </div>
  </div>
  <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">
          <span style="font-style: normal; background-color: #D6DEE6;">
            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.
          </span>
        </blockquote>
      </div>
    </div>
  </div>
</div>

Come detto sia la sidebar sia il contenuto sono considerate due celle della riga ww_corpo_row. Mentre abbiamo già visto quali attributi abbiamo assegnato alla classe ww_corpo_cell, in comune alle due celle, dobbiamo ora vedere come definiamo nel foglio css le proprietà da assegnare alla classe ww_contenuto che sarà specifica per il box all’interno del quale inseriremo le due righe di contenuto.

Assegneremo a questa classe solo le proprietà generali che si riferiscono a questo blocco senza riguardo a quello che sarà il contenuto che andremo ad inserire.

Nel css scriveremo dunque:

.ww_contenuto {
  text-align: left;
  width:759px; 
}
.ww_contenuto p {
  margin: 5px;
}

Sono cose estremamente semplici e di immediata comprensione. Assgnemo la larghezza del blocco (l’altezza dipenderà dal contenuto) a specifichiamo l’allineamento del teso che peraltro sarebbe così di default. Inoltre aggiungiamo la seconda dichiarazione con la quale diciamo che tutti i paragrafi discendenti da una div con questa classe dovranno rispettare un margine di 5 pixels.

Fatto questo dobbiamo posizionare all’interno di questo blocco due righe come in figura, che saranno ovviamente due blocchi <div>. Ad entrambi assegnamo una classe che chiamiamo ww_contenuto_row per poter dare uno stile a queste righe. Naturalmente con questa classe assegneremo solo le proprietà che sono comuni alle due righe evitando tutto ciò che invece è specifico solo di una delle due righe. Le specificità saranno dichiarate in altri blocchi più interni a ciascuna riga.

Vediamo dunque come abbiamo definito la classe ww_contenuto_row:

.ww_contenuto_row {
  margin:0 0 5px 5px;
  padding-left:5px;
  background-color:#7EADC5;
  border:1px solid #5D5D5D;
}

Assegnamo 5 pixels di margine in basso e a sinistra (rispetto all’elemento che precede all’interno del contenitore) ed anche un padding sinistro perché gli elementi che posizioneremo non vadano a sovrapporsi col bordo del box. Inoltre coloriamo lo sfondo del box di celeste ed il bordo di 1px di un colore che faccia contrasto; noi abbiamo scelto il grigio scuro.

Fatto questo non ci resta che posizionare il contenuto che vogliamo appaia nelle due righe usando sempre il foglio css per assegnare le proprietà a questo contenuto.

Nella riga in alto posizioniamo un’immagine ed un testo di benvenuto. Innanzitutto inseriamo un’ulteriore div a cui assegnare le proprietà specifiche di questa riga, all’interno della quale insriremo due box, uno per l’immagine ed uno per il testo. La div che contiene queste due celle l’abbiamo chiamata ww_box_content_row e gli abbiamo assegnato le seguenti proprietà:

.ww_box_content_row {
  width:744px;
}

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

La larghezza è di 744 pixels (759px di ww_contenuto – 15px per padding e margin). La seconda proprietà si riferisce alle liste discendenti da una <div> di classe
ww_box_content_row e la spiegheremo quando parleremo della seconda riga di contenuto dove appunto appare la lista. Inoltre, siccome l’altezza del box viene determinata automaticamente in funzione del contenuto di testo, per far si che l’immagine non fuoriesca dal riquadro abbiamo assegnato un’altezza fissa alla prima riga inserendo l’attributo style direttamente entro il tag html <div> (style=”height:230px;”).

Come detto all’interno di questa riga dobbiamo inserire due box, uno per l’immagine ed uno per il testo.

Quello per l’immagine è:

 <div class="ww_contenuto_item-1" style="margin:10px 20px 0 5px; float:left;">
<img width="300" height="211" alt="" src="./images/TorrePelosa.jpg" />
</div>

Il tag <img /> è autoesplicativo e se avete dubbi tornate alla lezione 7.

La <div> che contiene l’immagine ha bisogno di alcuni attributi. Alcuni vengono attribuiti per mezzo della classe
ww_contenuto_item-1 (quelli che sono in comune con altri box interni alle due righe), mentre quelli che sono specifici solo di questo box glieli abbiamo attribuiti mediante l’attributo style direttamente nel tag html. Avremmo naturalmente potuto scrivere una classe specifica od un selettore ID da assegnare solo a questa <div>, ma cerchiamo di utilizzare un po’ tutte le possibilità che ci offre l’html per avere una panoramica completa.

Dunque le caratteristiche del box interno che ci interessa assegnare anche ad altri box sono assegnate mediante la classe
ww_contenuto_item-1 che nel css apparirà così:

.ww_contenuto_item-1 {
  display:inline-block;
  vertical-align:top;
}
.ww_contenuto_item-1 ul {
  color:black;
}

La proprietà display:inline-block; è messa per permettere ai due blocchi nella stessa riga di essere allineati, altrimenti il secondo andrebbe in verticale rispetto al primo (vedi lez. 26 a proposito). Va vista unitamente a float:left; che abbiamo messo direttamente nel tag html e che dice al blocco dell’immagine che va posizionato a sinistra dell’altro blocco.
vertical-align:top; dirà che il contenuto delle div con questa classe andrà allineato al top, mentre l’ultima proprietà inserita nell’attributo style è quella che fissa i margini.

La proprietà attribuita alle liste dentro a questi blocchi, come detto prima, le affronteremo parlando della seconda riga.

Il blocco di destra con il testo di benvenuto è:

<div class="ww_contenuto_item-1" style="margin:10px; width:380px;">
  <h3>Benvenuti a Stintino</h3>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pharetra, tellus sit amet congue vulputate, nisi erat iaculis nibh, vitae feugiat sapien ante eget mauris. Aenean sollicitudin imperdiet arcu, vitae dignissim est posuere id.<br />
  <p><a href="#">Continua ...</a></p>
</div>

Si tratta di una div a cui abbiamo associato la solita classe

ww_contenuto_item-1
che, ripetiamo andrà assegnata a tutti i riquadri delle due righe di contenuto. Inoltre con l’attributo style a livello di tag html abbiamo fissato la larghezza del box; se non lo avessimo fatto il testo si sarebbe espanso in larghezza ed il box sarebbe diventato troppo grande per rimanere affiancato all’immagine e sarebbe stato spostato di sotto dal browser. Nella riga <p><a href=”#”>Continua …</a></p> ovviamente se c’è un link (href=) andrà inserito il link alla pagina corretta. Naturalmente nel nostro caso non abbiamo altre pagine per cui abbiamo inserito # che avrà l’effetto se cliccato di far rimanere il lettore nella pagina corrente.

La seconda riga ed il footer saranno l’argomento dell’ultima lezione al termine della quale vi forniremo anche il link per scaricare il materiale.

Lascia un commento

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