Esaminiamo una pagina

la pagina ed il suo css

facciamo luce Nota bene:
se avete letto anche le pagine dei "ferri del mestiere" il template che andiamo a proporvi è stato preferito ad altri perché lo abbiamo testato prima con la barra della accessibilità a diverse grandezze e risoluzioni.

Da Open Web Design (col tasto destro del mouse fate aprire il sito su altra finestra per non perdere questa nostra) andiamo a scaricare un template ed il suo css.
Per questo esempio abbiamo scelto quello a nome "Pearl" (per trovarlo dal menu laterale del sito cliccate prima su "Search Designs", poi su "Keyword" nella pagina che si aprirà e scrivete il nome "pearl" sul campo di ricerca; una volta trovata la sua miniatura cliccateci sopra e potrete scaricare il tutto dal link - Download - che si trova in alto nella pagina).
Una volta fatta l'estrazione con WinZip avremo una cartella con 5 files che per il momento lasceremo così per lavorarci sopra.

^ TOP

Esaminiamo l'head

Esaminiamo ora le varie sezioni con cui è fatta una pagina e partiamo dall'head:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="Keywords" content="your, keywords, here" />
<meta name="Description" content="A description of your site goes here." />
<link rel="stylesheet" type="text/css" href="pearl-style.css" />
<link rel="stylesheet" type="text/css" href="pearl-print.css" media="print" />
<title>Pearl</title>
</head>

come potete vedere prima di ogni cosa inizia la "dichiarazione" del linguaggio usato per costruire la pagina che, in questo caso, è Xhtml 1.0 e della lingua che vedete essere l'inglese: en minuscolo e non quello in maiuscolo (!) che dovete sostituire con it e dire così ai browsers ed ai motori di ricerca che le vostre pagine sono in italiano.
Poi inizia il vero e proprio head e cioè la testa dove vanno messi i vari meta-tags e qui vediamo che usiamo la tabella codici ISO-8859-1 quindi quella dell'Europa occidentale, che possiamo mettere le parole chiave della pagina (keywords), la descrizione della pagina e che il browser deve andare a caricare due file css quello dello stile e quello della stampa (print); segue poi il titolo della pagina title che vedremo nella parte alta del browser (per esempio questa che state leggendo potete vedere che si chiama "Sezione Webmaster- quarta pagina) ed infine si chiude l'head.
Sia qui che nelle sezioni seguenti notate i così detti commenti come

di chi ha creato la pagina e che attraverso di essi ci vuole far notare alcune cose e, usando questo particolare segno, gli stessi sono visibili solo andando a vedere la pagina con l'editor mentre non sono visibili quando la guardiamo col browser.

^ TOP

Esaminiamo il body

Andiamo avanti e passiamo al body e cioè il corpo della pagina:

<body> 
<div id="cornernav">
<a href="#">Login</a>
<a href="#">Register</a>
<a href="#">Contact us</a>
<a href="#">Help</a>
</div>
<h1 id="title">Pearl</h1>

<div id="navwrap">
<div id="topnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About us</a></li>
</ul>
<div id="search">Search <input type="text" name="search" />
<input class="blue" type="submit" value="Go!" />
</div>
</div>
</div>

<div id="sidenav">
<h2>Products</h2>
<ul>
<li><a href="#">Computers</a></li>
<li><a href="#">Cell Phones</a></li>
<li><a href="#">Software</a></li>
</ul>
<h2>Services</h2>
<ul>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Afiliates</a></li>
</ul>
<h2>Services</h2>
<ul>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Afiliates</a></li>
</ul>
<h2>Log in</h2>
<p class="search">User Name:<input type="text" name="user" /><br />
Password:<input type="text" name="password" /><input class="side" type="submit" value="Login" /></p>
</div>

<div id="content">
<h1>Pearl</h1>
<p>
Welcome to Pearl, my latest creation. This is my second design submitted to <a href="http://oswd.org">OSWD</a>, and is a huge improvement on Simplexed, the first one. Pearl is geared towards a buisness-type design, but dont let that discourage you from using it as a home page or blog-ish website. The look I was going for here is professional and clean, some grey, with teal highlights to add colour and visual apeal. I have also included a print media stylesheet for black and white printing. Just press print preview in the browser to see this effect. </p>
<h1>Compatability</h1>
<p>Pearl has been tested, and renders well in both Internet Explorer 5+ and Firefox. The main content automatically expands or contracts in different screen resolutions to eliminate horizontal scroll bars or blank white spaces. Pearl uses a table-less Css based design, coupled with Xhtml Transitional for a flexible and easy to manipulate design. All valid of course.</p>
<h1>User Notice</h1>
<p>If you decide to download this template, feel free to change colors, spacing etc, or you could just rip it apart if you want to. If you build a website with Pearl, It would be nice to hear about it via email, but don't feel that this is mandatory by any means. I do request that you keep my name somewhere on the design, whether it be at the bottom of the footer, or simply as a comment in the HTML. You're getting a design like this for free, so its not a lot to ask. </p>
<h1>Lorem Ipsum</h1>
<p>And a template just wouldn't be a template without some lorem ipsum:<br />
<br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean in dolor. Donec molestie, quam sit amet rhoncus condimentum, augue nisl condimentum mauris, a condimentum arcu diam eu tortor. Praesent urna eros, tincidunt in, interdum eu, iaculis eu, turpis. Fusce ac diam. Pellentesque bibendum. Aenean hendrerit purus. </p>
<br />
</div>

come potete vedere qui non ci sono le "tables" ma solo dei <div> che contengono dei comandi e che poi vengono chiusi così: </div>.
Ognuno di questi div è univoco, difatti ogni div ha un suo personale id (identificativo) per cui abbiamo, ad esempio, <div id="sidenav"> che nella volontà di chi ha creato questa pagina starà per l'abbreviazione di side-navigation e quindi navigazione laterale.
Va bene, ma chi dice a questa navigazione laterale che deve stare a sinistra in questo caso ed altro ancora?
Il foglio di stile che, nel nostro caso si chiama pearl-style.css.

Ed eccovi qui il div che abbiamo preso in esame:

#sidenav {
float:left;
margin-left:20px;
margin-top:20px;
width:200px;
border-left:1px solid #c4c4c4;
border-right:1px solid #c4c4c4;
border-bottom:1px solid #c4c4c4;
}

quel cancelletto ci dice che si tratta di un div univoco, appunto; il float left ci fa capire come mai il menu vada a sinistra e potete cambiarlo, se vi va, con un float:right; e lo avrete a destra ma dovrete a quel punto cambiare il margin left che adesso è di 20 pixels da sinistra con un margin right di 20 pixels. Poi vediamo che il menu è grande 200 pixels e che i bordi sinistro, destro e basso sono colorati con uno stesso colore.
Tutto il file pearl-style.css comanda le pagine che creerete con i suoi tanti e ben fatti codici di stile ed il tutto in solo 4kb.

L'altro foglio di stile (pearl-print.css) non farà altro a chi vorrà stampare una vostra pagina o a vederne semplicemente l'anteprima a dire al browser attraverso il comando display:none di non stampare i vari menu e con altri pochi comandi sfondo, grandezza carattere eccetera.

^ TOP

Esaminiamo il footer

<div id="footer">
Copyright 2005 © Your Name
<br />Design by Kevin Cannon
</div>
</body>
</html>

nel footer (i piedi) della pagina si possono mettere diverse informazioni ed eventuali comandi per contatori ed altro.
Poi, come vedete, si chiude il body e l'html (altra regola di sintassi nell'Xhtml è quella che le varie parti e i vari div della pagina si chiudono in ordine così come sono stati aperti).

^ TOP

Concludendo

A questo punto non dovete far altro che cambiare nome alle varie voci dei menu (creando di conseguenza la nuova pagina) e creare le vostre pagine lavorando, per sicurezza, su di una copia.
Mettete la copia dentro una cartella del vostro computer, createci dentro una cartella a nome css e metteteci i due fogli di stile (ricordatevi a questo punto di dare il nuovo percorso a questi nell'inizio del vostro head che sarà dunque:
<link rel="stylesheet" type="text/css" href="css/pearl-style.css" />
<link rel="stylesheet" type="text/css" href="css/pearl-print.css" media="print" />
e le due immagini di sfondo che si chiamano grey.gif e teal.gif
aprite con EditPad il template ed iniziate a lavorare sulla vostra pagina cambiando, se conoscete l'inglese, i nomi dei div e di altri comandi con quello che volete in italiano sia nel foglio di stile sia al corrispondente nel template; potete cambiare il nome dei css e aggiungere, nel tempo, altri comandi.
Per finire notate come le tre parti principali della pagina siano suddivise proprio nell'ordine con cui alle elementari ci veniva insegnato a fare un tema: testa (head), corpo (body) e piedi (footer).

approfondimenti sull'argomento

Corso css sul sito della Croce Rossa ValNestore

EditPad Lite un ottimo e gratuito editor di testo

I siti dei templates gratuiti dalla pagina dei nostri links

dubbi o domande

Dubbi, domande?
Potete scrivere nel nostro Forum nella sezione dedicata ai Webmaster

pagina 4 di 4

Indice delle pagine

Pagina precedente

pratticocri.com

Esaminiamo una pagina

la pagina ed il suo css

Esaminiamo l'head

Esaminiamo il body

Esaminiamo il footer

Concludendo