Lezione 31: Costruiamo un template (Parte 1^)

Impariamo a costruire un sito Web

Lezione 31: Costruiamo un template (Parte 1^).

Dopo tanta teoria è ora di mettere in pratica un po’ di nozioni.

Lo scopo di questa parte del corso sarà quella di costruire il template del nostro sito di prova. Non sarà certo un sito complesso, ma lo scopo è di affrontare l’argomento in modo da acquisire una metodologia di lavoro che potrà quindi rendervi autonomi nella costruzione del vostro sito.

Partiremo costruendo la home page di un sito dalla quale ricaveremo il template per la costruzione delle pagine successive.

Naturalmente per iniziare occorre un’idea di layout, l’organizzazione delle voci di menu in funzione dei contenuti che dobbiamo inserire. Vi sono quindi un certo numero di azioni propedeutiche alla costruzione di un sito web, che tuttavia esulano dagli scopi di questo corso e che potranno casomai essere oggetto di un articolo seprato.

Di conseguenza partiremo con una precisa idea di layout da realizzare ed analizzeremo nei dettagli i passaggi per la sua costruzione. Ho quindi preparato il disegno della pagina che andremo a costruire prendendo lo spunto da un mio sito web, che peraltro ha un layout profondamente diverso.

Il risultato finale del nostro lavoro sarà quello che potete vedere nell’immagine riportata qui di seguito:

Stintino

[ad code=5]

 

Innanzitutto, come detto, alla base c’è l’organizzazione del layout. Per il nostro esempio è stato così composto:

  • Una Testata con un immagine che occuperà in larghezza il 100% della nostra pagina. Abbiamo scelto di non inserire nulla sopra all’immagine (search box, links, testo, ecc.);
  • Un Menu che abbiamo ipotizzato orizzontale, ma nulla vieta di porlo in verticale nella sidebar;
  • Il Corpo centrale della pagina a sua volta composto da:
    • Una Sidebar sinistra dove alloggeremo un numero di blocchi a piacere (per il nostro esempio ne ho ipotizzati 2: Login e Ricerca);
    • Il Contenuto della pagina che naturalmente sarà a sua volta suddiviso. Io ho ipotizzato di suddividerlo in:
      • Righe che possono a loro volta contenere delle celle (due nell’esempio);
  • Un Footer che chiude la pagina.

Questi elementi costitutivi del nostro layout sono stati evidenziati graficamente nell’immagine del layout per aiutare a capire:

Layout

 

Il punto di partenza della nostra pagina html è lo scheletro vuoto che avevamo già proposto alla lezione 4 così come segue:

<!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" />

</head>

<body>

</body>

</html>

Naturalmente se stiamo realizzando un vero sito, title, description e keywords andranno compilati in maniera sensata.

Poiché poi abbiamo imparato che le proprietà degli elementi del nostro layout vanno decsritte utilizzando i selettori in un foglio CSS, dovremo inserire una riga nella head per richiamare il nostro foglio di style. Inseriremo quindi una riga così (ipotizzando di mettere i fogli css in una sottodirectory /css):

<link rel=”stylesheet” href=”css/style.css” type=”text/css” media=”screen” />

Nel body quindi dovremo inserire dei blocchi ben stilizzati nel foglio di stile che ci permettano di riprodurre il layout ipotizzato. La nostra pagina dovrà assomigliare quindi a qualcosa del genere:

<!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>
	<div><!-- *** Background della nostra pagina *** --></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>

Dalla prossima lezione cominceremo ad analizzare i blocchi e conseguentemente cominceremo a costruire parallelamente il foglio di stile e la pagina 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.