– Il sommario della rivista Linux Magazine
[ Home ] - [ Articoli ] - [ Traduzioni ] - [ Altro ] - [ Appunti sui CSS ] - [ L'autore ]
Sei qui: Home > Articoli > Riproduzione del sommario di una rivista
Una qualità spesso richiesta a chi lavora con i CSS è quella di saper creare un layout a partire da un bozzetto esistente. Il bozzetto può essere realizzato usando programmi di grafica (come FreeHand o Photoshop) o programmi per l'impaginazione (come QuarkXPress). Di seguito vedremo un modo per riprodurre, nelle sue linee generali, il sommario di una rivista cartacea. Abbiamo scelto come soggetto il numero di settembre 2007 di Linux Magazine, di cui potete vedere qui sotto una foto.
– Il sommario della rivista Linux Magazine
Il sommario appare strutturato come segue:
Abbiamo deciso di riprodurre solo le parti più significative da un punto di vista dell'impaginazione con i fogli di stile. La struttura potrebbe essere la seguente:
<div id="main"> <h1>Sommario</h1> <h2>Tecniche <br>da viaggio</h2> <p id="subtitle">Notebook e palmari</p> <p id="disclaimer">Non sei a casa ma ti serve un file che <br>hai sul tuo desktop? Vuoi controllare <br> i tuoi download? Ecco come fare...</p> <div id="varie"> <div class="blocco"> <h3>Accesso via WI-FI:</h3> <p>Configura e utilizza la rete wireless, <br>oppure cerca il punto Foneros più vicino</p> </div> <div class="blocco"> <h3>Con il cellulare:</h3> <p>Quando la rete non c'è, <br>collega il tuo telefonino e sfrutta GPRS o UMTS</p> </div> <div class="blocco"> <h3>Amministrazione:</h3> <p>Gestisci il sistema con Webmin usando il browser</p> </div> <div class="blocco"> <h3>Desktop remoto:</h3> <p>L'interfaccia web e la shell non bastano? Allora usiamo Gnome e KDE</p> </div> </div> <div id="risorse"> <div id="risorse1"> <p id="titolino">Tutorial</p> <div id="tutorial"> <h2>Bellissimo<br> questo panorama!</h2> <p><span class="num">59</span> Per creare splendide foto panoramiche è sufficiente una comune digicam, un PC e il software Hugin</p> </div> <p id="titolino2">Sistema</p> <div id="tutorial2"> <h2>Clonare un sistema</h2> <p><span class="num2">79</span> I sistemi di clonazione permettono di reinstallare in poco tempo decine di PC. Ti spieghiamo come fare con Clonezilla</p> </div> <div id="brevi"> <div id="brevi1"> <h4 class="cover">Cover Story</h4> <p><span class="num3">24</span> Tecniche da viaggio</p> <h4 class="hardware">Hardware</h4> <p><span class="num3">40</span> Nokia N95 </p> <h4 class="gaming">Gaming</h4> <p><span class="num3">50</span> Urban Terror</p> <h4 class="tuto">Tutorial</h4> <p><span class="num3">54</span> Musica Mp3 senza difetti </p> </div> <div id="brevi2"> <p><span class="num4">59</span> Bellissimo questo panorama!</p> <p><span class="num4">64</span> Connessi con il cellulare!</p> <p><span class="num4">69</span> Come avere Google sul desktop</p> <h4 class="sistema">Sistema</h4> <p><span class="num4">79</span> Clonare un sistema</p> <p><span class="num4">83</span> I file system più diffusi</p> </div> </div> </div> <div id="spalla"> <p><img src="bsd.gif" alt="Logo di Free BSD"></p> </div> </div> </div>
Il foglio di stile associato è, nella sua struttura, alquanto semplice:
body {
margin: 0;
padding: 0;
background: #fff;
color: #000;
font-family: "Lucida Sans", "Lucida Grande", sans-serif;
line-height: 1.5;
}
#main {
margin: 0;
padding: 0;
border-top: 60px solid #eaf2ea;
background: transparent url("tux.gif") no-repeat 100% 20%;
width: 100%;
}
#main h1 {
margin: 0 0 0 50px;
font-size: 50px;
padding: 0.2em 0 0 0;
line-height: 1;
border-bottom: 1px solid #000;
color: #d9e1d9;
background: transparent;
}
#main h2 {
margin: 0 0 0 50px;
font-size: 60px;
padding: 0.1em 0 0 0;
line-height: 1;
font-family: "Arial Black", Arial, sans-serif;
color: #47b5e7;
background: transparent;
text-transform: uppercase;
}
#subtitle {
margin: 0 0 0 50px;
padding: 0;
font: bold italic 65px/1 "Brush Script MT", cursive;
color: olive;
background: transparent;
position: relative;
top: -0.5em;
}
#disclaimer {
margin: 0 0 0 50px;
padding: 0.1em 0 0 0;
font: 1.2em "Arial Black", Arial, sans-serif;
}
#varie {
margin: 0 0 0 50px;
padding: 0;
width: 50%;
}
.blocco {
margin: 0;
padding: 1em 0;
width: 100%;
}
.blocco:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.blocco h3 {
float: left;
color: #47b5e7;
background: transparent;
text-transform: uppercase;
margin: 0;
font-size: 1em;
height: 1em;
padding-right: 0.2em;
}
.blocco p {margin: 0;}
#risorse {
margin: 0 0 0 50px;
width: 90%;
}
#risorse1 {
float: left;
width: 60%;
margin: 0;
}
#tutorial {
margin: 0;
width: 100%;
background: teal;
color: #fff;
border-top: 0.5em solid #eaf2ea;
}
#titolino, #titolino2 {
font-size: 0.85em;
font-weight: bold;
margin: 0;
line-height: 1;
}
#tutorial h2 {
margin: 0;
font-size: 40px;
font-family: "Lucida Sans", "Lucida Grande", sans-serif;
color: #fff;
background: transparent;
padding-left: 0.1em;
padding-top: 0.2em;
}
#tutorial p {
margin: 0;
padding: 0 0 1em 0;
}
#tutorial p span.num {
float: left;
font-size: 40px;
color: yellow;
background: transparent;
margin: 0;
position: relative;
top: -10px;
}
#tutorial:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
#titolino2 {
color: #47b5e7;
background: transparent;
padding-top: 1em;
}
#tutorial2 {
margin: 0;
width: 100%;
background: #def;
color: #000;
border-top: 0.5em solid #47b5e7;
}
#tutorial2 h2 {
margin: 0;
font-size: 40px;
font-family: "Lucida Sans", "Lucida Grande", sans-serif;
color: #000;
background: transparent;
padding-left: 0.1em;
padding-top: 0.2em;
}
#tutorial2 p {
margin: 0;
padding-bottom: 1em;
}
#tutorial2 p span.num2 {
float: left;
font-size: 40px;
color: #a00;
background: transparent;
margin: 0;
position: relative;
top: -10px;
}
#tutorial2:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
#brevi {
margin: 0;
width: 100%;
}
#brevi:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#brevi1 {
float: left;
width: 48%;
margin: 0;
font-size: 0.85em;
}
#brevi1 h4 {
margin: 0;
font-size: 1em;
font-weight: bold;
line-height: 1;
border-bottom: 1px solid #000;
padding-top: 1em;
}
#brevi1 p {
margin: 0;
padding-top: 0.5em;
line-height: 1;
border-bottom: 1px dashed #000;
font-weight: bold;
}
#brevi1 .cover {
padding-left: 1em;
background: transparent url("cover.gif") no-repeat bottom left;
}
#brevi1 .hardware {
padding-left: 1em;
background: transparent url("hardware.gif") no-repeat bottom left;
}
#brevi1 .gaming, #brevi1 .tuto {
padding-left: 1em;
background: transparent url("gametuto.gif") no-repeat bottom left;
}
#brevi1 p span.num3 {
float: right;
margin: 0;
background: #fff;
color: #000;
position: relative;
bottom: -3px;
font-weight: normal;
}
#brevi2 {
float: right;
width: 50%;
margin: 0;
font-size: 0.85em;
}
#brevi2 p {
margin: 0;
padding-top: 1.1em;
line-height: 1;
border-bottom: 1px dashed #000;
font-weight: bold;
}
#brevi2 p span.num4 {
float: right;
margin: 0;
background: #fff;
color: #000;
position: relative;
bottom: -3px;
font-weight: normal;
}
h4.sistema {
margin: 0;
padding-top: 1em;
padding-left: 1em;
font-size: 1em;
font-weight: bold;
border-bottom: 1px solid #000;
background: transparent url("sistema.gif") no-repeat bottom left;
color: #000;
line-height: 1;
}
#spalla {
float: right;
width: 38%;
margin: 0;
}
#spalla p {
margin: 0;
padding-top: 1em;
}
Il risultato finale mostra un layout molto simile all'originale, tenendo conto delle limitazioni imposte dai CSS. Analizziamo punto per punto il foglio di stile.
Il layout appare diviso in due sezioni: la prima contiene i titoli degli articoli principali e la seconda gli articoli secondari. La prima sezione è formattata come segue:
body {
margin: 0;
padding: 0;
background: #fff;
color: #000;
font-family: "Lucida Sans", "Lucida Grande", sans-serif;
line-height: 1.5;
}
#main {
margin: 0;
padding: 0;
border-top: 60px solid #eaf2ea;
background: transparent url("tux.gif") no-repeat 100% 20%;
width: 100%;
}
#main h1 {
margin: 0 0 0 50px;
font-size: 50px;
padding: 0.2em 0 0 0;
line-height: 1;
border-bottom: 1px solid #000;
color: #d9e1d9;
background: transparent;
}
#main h2 {
margin: 0 0 0 50px;
font-size: 60px;
padding: 0.1em 0 0 0;
line-height: 1;
font-family: "Arial Black", Arial, sans-serif;
color: #47b5e7;
background: transparent;
text-transform: uppercase;
}
#subtitle {
margin: 0 0 0 50px;
padding: 0;
font: bold italic 65px/1 "Brush Script MT", cursive;
color: olive;
background: transparent;
position: relative;
top: -0.5em;
}
#disclaimer {
margin: 0 0 0 50px;
padding: 0.1em 0 0 0;
font: 1.2em "Arial Black", Arial, sans-serif;
}
#varie {
margin: 0 0 0 50px;
padding: 0;
width: 50%;
}
.blocco {
margin: 0;
padding: 1em 0;
width: 100%;
}
.blocco:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.blocco h3 {
float: left;
color: #47b5e7;
background: transparent;
text-transform: uppercase;
margin: 0;
font-size: 1em;
height: 1em;
padding-right: 0.2em;
}
.blocco p {margin: 0;}
La sezione #main contiene il titolo ed il sottotiolo principale, nonché gli articoli di maggior interesse.
Per ricreare la fascia superiore del sommario si è ricorso ad un semplice escamotage:
#main {
margin: 0;
padding: 0;
border-top: 60px solid #eaf2ea;
background: transparent url("tux.gif") no-repeat 100% 20%;
width: 100%;
}
Il bordo superiore di tale sezione ricrea la fascia superiore del sommario. Inoltre l'immagine di sfondo impostata per l'elemento riproduce l'immagine principale del sommario. Da notare come l'elemento abbia una larghezza esplicita, al fine di permettere ad Internet Explorer 6 (ed inferiori) di visualizzare correttamente l'immagine di sfondo. A questo punto si procede con la formattazione dei titoli principali:
#main h1 {
margin: 0 0 0 50px;
font-size: 50px;
padding: 0.2em 0 0 0;
line-height: 1;
border-bottom: 1px solid #000;
color: #d9e1d9;
background: transparent;
}
#main h2 {
margin: 0 0 0 50px;
font-size: 60px;
padding: 0.1em 0 0 0;
line-height: 1;
font-family: "Arial Black", Arial, sans-serif;
color: #47b5e7;
background: transparent;
text-transform: uppercase;
}
#subtitle {
margin: 0 0 0 50px;
padding: 0;
font: bold italic 65px/1 "Brush Script MT", cursive;
color: olive;
background: transparent;
position: relative;
top: -0.5em;
}
Si è volutamente scelto di utilizzare una dimensione del font in pixel per i titoli di maggiori dimensioni. Questo ci permette di avere un maggior controllo tipografico, ricordando che una dimensione relativa dei font è utile per il testo a dimensioni normali o ridotte. Se infatti un utente dovesse trovare difficoltà nella lettura di un font così sovradimensionato, ciò significherebbe (purtroppo) che l'utente ha tali problemi visivi da rendere del tutto inutile la lettura tramite un normale browser visuale.
Per ricreare l'effetto del sottotitolo che si sovrappone al titolo principale, si è fatto ricorso al posizionamento
relativo con valore negativo per l'elemento #subtitle. Ricordiamo che il computo dello scostamento relativo parte
dalla posizione attuale dell'elemento in relazione a se stesso, e non al suo blocco contenitore.
Quindi siamo passati a formattare i titoli che presentano accanto una breve spiegazione. Il codice è il seguente:
#varie {
margin: 0 0 0 50px;
padding: 0;
width: 50%;
}
.blocco {
margin: 0;
padding: 1em 0;
width: 100%;
}
.blocco:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.blocco h3 {
float: left;
color: #47b5e7;
background: transparent;
text-transform: uppercase;
margin: 0;
font-size: 1em;
height: 1em;
padding-right: 0.2em;
}
.blocco p {margin: 0;}
Gli elementi contenitori con classe .blocco riescono a contenere correttamente gli elementi flottanti al
loro interno grazie all'Easy Clearing:
.blocco:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
A loro volta le intestazioni flottanti si mantengono in linea con il testo grazie alla dimensione del font (in em) pari alla loro altezza dichiarata. Si noti come i paragrafi adiacenti abbiano i margini azzerati.
.blocco h3 {
float: left;
color: #47b5e7;
background: transparent;
text-transform: uppercase;
margin: 0;
font-size: 1em;
height: 1em;
padding-right: 0.2em;
}
.blocco p {margin: 0;}
Passiamo quindi alla formattazione della sezione che contiene gli articoli secondari. Tale sezione risulta divisa in due
sottosezioni affiancate mediante la proprietà float:
#risorse {
margin: 0 0 0 50px;
width: 90%;
}
#risorse1 {
float: left;
width: 60%;
margin: 0;
}
#spalla {
float: right;
width: 38%;
margin: 0;
}
Si noti come il contenitore dei float abbia una larghezza dichiarata. Questo ci permette di evitare i noti problemi di Internet Explorer 6 (ed inferiori) nella gestione dei float all'interno di un contenitore non dimensionato. Esaminiamo quindi gli elementi della prima sottosezione, cominciando dai due box contenenti i titoli di maggior spicco:
#tutorial {
margin: 0;
width: 100%;
background: teal;
color: #fff;
border-top: 0.5em solid #eaf2ea;
}
#titolino, #titolino2 {
font-size: 0.85em;
font-weight: bold;
margin: 0;
line-height: 1;
}
#tutorial h2 {
margin: 0;
font-size: 40px;
font-family: "Lucida Sans", "Lucida Grande", sans-serif;
color: #fff;
background: transparent;
padding-left: 0.1em;
padding-top: 0.2em;
}
#tutorial p {
margin: 0;
padding: 0 0 1em 0;
}
#tutorial p span.num {
float: left;
font-size: 40px;
color: yellow;
background: transparent;
margin: 0;
position: relative;
top: -10px;
}
#tutorial:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
#titolino2 {
color: #47b5e7;
background: transparent;
padding-top: 1em;
}
#tutorial2 {
margin: 0;
width: 100%;
background: #def;
color: #000;
border-top: 0.5em solid #47b5e7;
}
#tutorial2 h2 {
margin: 0;
font-size: 40px;
font-family: "Lucida Sans", "Lucida Grande", sans-serif;
color: #000;
background: transparent;
padding-left: 0.1em;
padding-top: 0.2em;
}
#tutorial2 p {
margin: 0;
padding-bottom: 1em;
}
#tutorial2 p span.num2 {
float: left;
font-size: 40px;
color: #a00;
background: transparent;
margin: 0;
position: relative;
top: -10px;
}
#tutorial2:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
I due box sono preceduti da un breve titolo che ne illustra il contenuto. La loro formattazione è estremamente semplice:
#titolino, #titolino2 {
font-size: 0.85em;
font-weight: bold;
margin: 0;
line-height: 1;
}
#titolino2 {
color: #47b5e7;
background: transparent;
padding-top: 1em;
}
Impostando l'interlinea ad 1 riduciamo al minimo lo spazio tra il testo ed il bordo del box sottostante. A loro volta, anche la formattazione dei due box non presenta particolari difficoltà:
#tutorial {
margin: 0;
width: 100%;
background: teal;
color: #fff;
border-top: 0.5em solid #eaf2ea;
}
#tutorial2 {
margin: 0;
width: 100%;
background: #def;
color: #000;
border-top: 0.5em solid #47b5e7;
}
Quello che invece merita un'attenzione particolare è la formattazione dei numeri di sommario accanto alla descrizione dell'articolo:
#tutorial p span.num {
float: left;
font-size: 40px;
color: yellow;
background: transparent;
margin: 0;
position: relative;
top: -10px;
}
#tutorial2 p span.num2 {
float: left;
font-size: 40px;
color: #a00;
background: transparent;
margin: 0;
position: relative;
top: -10px;
}
I due numeri vengono inseriti all'interno di un elemento span che viene fatto flottare a sinistra. Ma questo non
basta, in quanto, data la dimensione del font, l'elemento andrà a posizionarsi ben al di sotto dell'altezza del box di riga
del paragrafo che lo contiene. Per ovviare al problema, ricorriamo nuovamente al posizionamento relativo con valore negativo
per ottenere un corretto posizionamento verticale.
La prima sottosezione si conclude con gli articoli di minore importanza, riportati su due colonne affiancate:
#brevi {
margin: 0;
width: 100%;
}
#brevi:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#brevi1 {
float: left;
width: 48%;
margin: 0;
font-size: 0.85em;
}
#brevi2 {
float: right;
width: 50%;
margin: 0;
font-size: 0.85em;
}
Ancora una volta usiamo il floating per affiancare le colonne, ed ancora una volta ricorriamo all'Easy Clearing per il contenimento dei float. Procediamo quindi con la formattazione del contenuto delle due colonne:
#brevi1 h4 {
margin: 0;
font-size: 1em;
font-weight: bold;
line-height: 1;
border-bottom: 1px solid #000;
padding-top: 1em;
}
#brevi1 p {
margin: 0;
padding-top: 0.5em;
line-height: 1;
border-bottom: 1px dashed #000;
font-weight: bold;
}
#brevi1 .cover {
padding-left: 1em;
background: transparent url("cover.gif") no-repeat bottom left;
}
#brevi1 .hardware {
padding-left: 1em;
background: transparent url("hardware.gif") no-repeat bottom left;
}
#brevi1 .gaming, #brevi1 .tuto {
padding-left: 1em;
background: transparent url("gametuto.gif") no-repeat bottom left;
}
#brevi1 p span.num3 {
float: right;
margin: 0;
background: #fff;
color: #000;
position: relative;
bottom: -3px;
font-weight: normal;
}
#brevi2 p {
margin: 0;
padding-top: 1.1em;
line-height: 1;
border-bottom: 1px dashed #000;
font-weight: bold;
}
#brevi2 p span.num4 {
float: right;
margin: 0;
background: #fff;
color: #000;
position: relative;
bottom: -3px;
font-weight: normal;
}
h4.sistema {
margin: 0;
padding-top: 1em;
padding-left: 1em;
font-size: 1em;
font-weight: bold;
border-bottom: 1px solid #000;
background: transparent url("sistema.gif") no-repeat bottom left;
color: #000;
line-height: 1;
}
Le intestazioni presentano tutte un'immagine di sfondo alla loro sinistra:
#brevi1 .cover {
padding-left: 1em;
background: transparent url("cover.gif") no-repeat bottom left;
}
#brevi1 .hardware {
padding-left: 1em;
background: transparent url("hardware.gif") no-repeat bottom left;
}
#brevi1 .gaming, #brevi1 .tuto {
padding-left: 1em;
background: transparent url("gametuto.gif") no-repeat bottom left;
}
h4.sistema {
margin: 0;
padding-top: 1em;
padding-left: 1em;
font-size: 1em;
font-weight: bold;
border-bottom: 1px solid #000;
background: transparent url("sistema.gif") no-repeat bottom left;
color: #000;
line-height: 1;
}
Si tratta di un'immagine GIF della dimensione di 12x12 pixel. Da notare come tutte le intestazioni abbiano un padding sinistro impostato in modo da lasciare spazio tra l'immagine e il testo dell'intestazione. Tuttavia, ancora una volta la difficoltà maggiore risiede negli stili da applicare ai numeri di sommario:
#brevi1 p span.num3 {
float: right;
margin: 0;
background: #fff;
color: #000;
position: relative;
bottom: -3px;
font-weight: normal;
}
#brevi2 p span.num4 {
float: right;
margin: 0;
background: #fff;
color: #000;
position: relative;
bottom: -3px;
font-weight: normal;
}
Usando il floating spostiamo i numeri di sommario all destra del testo del paragrafo. Impostando uno sfondo per gli
elementi span facciamo in modo che questi ultimi coprano il bordo inferiore del paragrafo al momento del
loro scostamento relativo (valore negativo della proprietà bottom).
Qui si conclude la formattazione della prima sottosezione. La seconda sottosezione non presenta particolari difficoltà
#spalla {
float: right;
width: 38%;
margin: 0;
}
#spalla p {
margin: 0;
padding-top: 1em;
}
Infine, per ottenere una retrocompatibilità con Internet Explorer 6 (ed inferiori), si è fatto ricorso al seguente codice aggiuntivo:
<!--[if lt IE 7]>
<style type="text/css">
body {padding-bottom: 1em;}
</style>
<![endif]-->
Questo codice serve a fare in modo che anche Explorer mostri uno spazio prima della fine della pagina.