Lezione 32: Costruiamo un template (Parte 2^)

Impariamo a costruire un sito Web

Lezione 32: Costruiamo un template (Parte 2^).

Cominciamo, prima di procedere all’esame dettagliato del css e della pagina html, a vedere come organizziamo le cartelle del nostro sito web sell’hard disk del nostro PC. La cartella principale noi la chiamiamo ‘esempio‘ e come sottocartelle creiamo ‘css‘ dove metteremo il/i fogli di stile e ‘images‘ dove metteremo le nostre immagini. Per il nostro sito di esempio non avremo bisogno d’altro, ma in situazione normale potrebbe esserci per esempio una sottocartella dedicata agli script javascript. Questa organizzazione non è naturalmente obbligatoria (potremmo buttare tutto nella directory principale), ma è quantomeno consigliabile per un’organizzazione ‘ordinata’ del nostro sito.


Prepariamo quindi il nostro foglio di stile che chiameremo style.css (il nome è ovvio può essere di fantasia) e lo porremo nella cartella esempio/css.

Apriamo il nostro editor preferito (io uso Notepad++, gratis e molto completo) e creiamo una nuova pagina dove andremo a mettere le nostre dichiarazioni.

Alla fine dovrà contenere le dichiarazioni dei seguenti elementi:

/* Dichiarazioni generiche *****************************************/

/* Sfondo *********************************************************/

/* Contenitore principale *****************************************/

/* Header *************************************************/

/* Corpo pagina ***************************************************/

/* Sidebar1 *******************************************************/

/* Contenuto pagina ********************************************/

/* Footer *************************************************/

/* Menu ******************************************************/

/* Altre dichiarazioni ******************************************************/

Praticamente abbiamo cominciato scrivendo i commenti (ricordiamo che nel css un commento inizia con /* e finisce con */) così che ci aiuteranno nella spiegazione di quello che andremo a fare. I blocchi di css come potete vedere ricalcano quello chen sempre a commenti, abbiamo preparato nella nostra pagina. In più abbiamo il primo e l’ultimo blocco di codice: le ‘Dichiarazioni generiche’ e le ‘Altre dichiarazioni’.
Le dichiarazioni generiche sono quelle riferite in generale a tag html e sono dichiarazioni di massima che possono esserci, ma non sono naturalmente necessarie; si potrebbe definire tutto nel momento dell’effettivo utilizzo. Le altre dichiarazioni sono riferite a stilizzazioni specifiche di cui di volta in volta possiamo aver bisogno e non sono da riferire direttamente ad uno dei blocchi della nostra pagina. Ad esempio a livello di dichiarazioni generiche possiamo dare uno stile ai paragrafi dicendo:

p {padding:0; margin:0; font-sizs:12px;}

che significa che come regola generale prevediamo che i paragrafi non prevedano alcun margine né interno né esterno al blocco ed il font abbia la dimensione di 12 pixels. Poi se in una determinata situazione abbiamo bisogno di un paragrafo che si comporti diversamente definiremo una classe tra le altre dichiarazioni del tipo:

.par {padding:10px; font-size:11px;}

Detto questo andiamo a vedere quali sono le dichiarazioni generiche che abbiamo previsto, sottolineando ancora che sono solo a titolo esemplificativo. E’ inutile chiedersi perché questa dichiarazione invece di quella.

Noi abbiamo inserito queste:

body {
padding: 0;
margin:0 auto;
min-width: 960px;
height:100%;
background-image: url(‘../images/Bottom_texture.jpg’);
background-repeat: repeat;
background-attachment: fixed;
background-position: top left;
font-family: Arial, Helvetica, Sans-Serif;
color:#000;
}

Per cominciare abbiamo definito le suddette proprietà per il <body> che naturalmente comprende tutto il foglio html.

  • margin e padding ci dicono che in generale non prevediamo questi margini, salvo ovviamente definirli di volta in volta quando servono. A questo punto può valer la pena di ricordare la gestione delle priorità nelle dichiarazioni di stili che è stata trattata alla lezione 17. Andate a riguardarvela perché nella definizione degli stili capiterà frequentemente di sovrascrivere una dichiarazione generica con una più specifica.
  • min-width l’abbiamo messa così per fissare come larghezza minima quella della nostra header, ma non ha effetto in quanto la larghezza viene poi immediatamente fissata dal browser appena imposta la testata.
  • L’immagine di sfondo è un texture di 145×120 pixels che andremo a ripetere per coprire lo sfondo della nostra pagina, per cui:
    • background-image ci dà l’url da dove prelevare l’immagine;
    • background-repeat: repeat ci dice che l’immagine sarà ripetuta in orizzontale e verticale;
    • background-attachment: fixed blocca l’immagine di sfondo in modo che non scorra quando si fa lo scrolling della pagina;
    • background-position: top left equivalente a 0% 0% ci dice dove posizionare questo sfondo. La dichiarazione darebbe inutile in quanto questo è il default, ma l’abbiamo messa per chiarezza e per ripasso.
  • font-family dice ovviamente quale tipo di font si userà per default sulle nostre pagine, salvo definire separatamente le eccezioni;
  • color infine ci dice che il nostro testo per default sarà nero.

Possiamo poi aggiungere altre definizioni di tipo generale come per esempio:

h1, h2, h3, h4, h5, h6, p, a, ul, ol, li {
margin: 0;
padding: 0;
}

ul {
list-style-type: none;
}

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

Ricorderete che i tag <h1> … <h6> sono usati per definire diversi tipi di testate. Si possono definre qui degli stili per ciascuno di essi oppure come faremo noi definirli quando tratteremo i blocchi all’interno dei quali andranno usati. Qui abbiamo messo solo le solite proprietà sui margini, ancora una volta da prendere solo come esempio. Le stesse proprietà le assegnamo poi con un’unica dichiarazione anche ai tag <p>, <a>, <ul>, <ol> e <li>.

Un’altra caratteristica che può essere fissata a livello generale potrebbe riguardare le liste. La proprietà list-style-type con valore none significa che a livello generale le nostre liste non dovranno avere alcun tipo di list-type cioè di bullet.

Questo ci permette di ricordare un’altra caratteristica dei css. Avete visto che abbiamo fatto riferimento alle liste <ul> in due dichiarazioni diverse. Questo può naturalmente sempre essere fatto per esempio quando in una dichiarazione racchiudiamo proprietà comuni a tanti elementi e poi ne indichiamo alcune più specifiche solo di alcuni elementi separatamente.

La stilizzazione di blockquote l’abbiamo inserita perché abbiamo usato questo tag nella nostra pagina (il riquadro più chiaro in basso a destra).

Le proprietà definite sono: quelle che vedete, tutte autoesplicative. Commentiamo solo perché abbiamo scritto due volte la proprietà padding. Con la prima abbiamo definito un padding di 10 px valido per top, right, bottom, left e con la seconda abbiamo corretto quello di sinistra che avrà la priorità in quanto scritto dopo. Naturalmente avremmo potuto o forse dovuto scrivere ‘padding: 10px 10px 10px 38px;‘ con un unica dichiarazione, ma farlo così ci è servito per ricordare come certe regole di stile possono essere sovrascritte successivamente alla loro dichiarazione.

Visto che abbiamo fatto cenno allo sfondo inserendo l’immagine nella dichiarazione del body, completiamo il nostro sfondo con un’altra immagine che abbiamo voluto aggiungere in alto. Nelle immagini della nostra pagina anticipate la settimana scorsa potete vedere sopra all’header quelle luci come se provenissero da tre lampade. Vediamo allora di posizionare anche questa. Le definizioni che abbiamo inserito nel css sono:

#ww_sfondo_top_wrapper {
position: fixed;
width:100%;
}

#ww_sfondo_top {
position: relative;
height:160px;
background-image: url(‘../images/page_gl.png’);
background-repeat: no-repeat;
background-position: center top;
}

Abbiamo definito due ID che andranno a fornire le caratteristiche di due <div> una interna all’altra. Quella contenitrice del tutto sarà <div id=”ww_sfondo_top_wrapper”> e quella più interna l’altra.

All’elemento contenitore assegnamo la proprietà ‘position: fixed;‘ perché così manterrà la sua posizione rispetto alla finestra del browser anche in caso di scrolling
, importante perché l’immagine non sparisca se dobbiamo fare lo scrolling della pagina. A questo proposito raccomandiamo di riguardare, se occorre la lezione 26 sul posizionamento degli elementi perché è una delle cose più complicate ed importanti. la larghezza uguale al 100% è stata aggiunta perché una <div> prende le dimensioni del suo contenuto ed il contenuto sarà l’immagine che ha una larghezze di 800px. Se però aggiungiamo la larghezza alla div che contiene l’immagine (quella più interna), anche quella esterna avrà una larghezza di 800px posizionandosi alla sinistra, mantre noi vogliamo posizionarla al centro della finestra che per definizione non sappiamo quanto è larga. Allora diamo alla <div> contenitrice la larghezza del 100% della finestra e poi all’interno di questa posizioneremo la seconda.

La <div> interna avrà quindi le seguenti proprietà:

  • position: relative con cui diciamo che la sua posizione è relativa rispetto al suo contenitore;
  • height:160 è l’altezza dell’immagine;
  • le 3 proprietà relative al background dicono l’url dell’immagine, il fatto che non va ripetuta e che la sua posizione relativa al contenitore è centrale (allineamento orizzontale) e top (allineamento verticale).

La nostra pagina html inizierà dunque così:

<!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><!-- *** Tutto ciò che verrà inserito sopra allo sfondo *** -->
      <div><!-- *** 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>

 

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.