Css parte prima

OldArticle

Articolo non più aggiornato

Diverse particolarità (tipo la compatibilità tra i vari browser) non verranno prese in considerazione, perchè esulano da queste righe dedicate ai principianti.

1 Contenuto e Impaginazione

2 Regole stilistiche

3 Box

4 Programmi

5 Modello pagina web

Impaginazione

Impaginazione e testo. Due elementi fondamentali per capire i fogli di stile (CSS).

CONTENUTO: vediamo questa pagina di BABAIAGA senza impaginazione per avere un' idea di cosa si vuole intendere (premi qui). Come vedete un layout (impaginazione) molto semplice.

Per impaginare possiamo usare le TABELLE o i CSS.

Per l'impaginazione con i CSS abbiamo questa pagina come esempio. Per l'uso delle TABELLE possiamo vedere la vecchia versione di BABAIAGA, ovvero la versione Inglese (premi qui).

Non è compito di queste pagine trovare il sistema migliore o quello più utile per le tue pagine web. Babaiaga, consiglia l'uso dei CSS.

Regole stilistiche

Le regole di stile vanno inserite tra <Head> e </Head>, nelle vostre pagine web, e determinano lo stile di ogni elemento presente nella vostra pagina web (vedremo sotto cosa si intende)

Vediamo, solo a titolo di esempio, alcuni dettagli sui fogli di stile. NON SPAVENTIAMOCI perchè le righe seguenti servono solo a capire il meccanismo di funzionamento dei CSS .

Questa è la classica struttura, in codice, di una pagina web con l'inserimento di alcune regole di stile:

<html>

<head>

body { background-color:#cccccc; font-size: 10 px; font-family: Arial;

color: #000000; }

#header { background-color:#FFFFFF; font-size: 20 px; }

</style>

</head>

<body> <div id="header"> qui inseriamo il nostro nome del sito e il logo </div> qui inseriamo il nostro contenuto della pagina web </body>

</html>

Vediamo cosa succede. Avevamo parlato di inserire le REGOLE STILISTICHE tra <head> e </head> e così abbiamo fatto. Le abbiamo chiamate body e header (stesso nome della parte della pagina web che poi subirà le modifiche).

Così facendo, abbiamo detto alla nostra pagina che tutto quello compreso tra <body> e </body) (la parte visibile delle nostre pagine web) deve avere lo sfondo di un certo colore:cccccc (grigio), che la grandezza del testo deve essere di 10 pixel, il tipo di carattere da usare è Arial, e che il colore del testo deve essere 000000 (nero). Poi, abbiamo creato un Box (vedremo in seguito cosa si intende) chiamato Header con lo sfondo di colore FFFFFF(bianco) ed il carattere di dimensioni 20 px . Facile no? Abbiamo dato delle regole al "corpo" della nostra pagina web. Basterebbe cambiare un parametro che tutta la nostra pagina o sezione subirà la modifica.

E se potessimo inserire le nostre regole in un foglio separato, collegato alle nostre pagine web? Ad ogni modifica sul foglio di stile TUTTE le pagine modificherebbero di conseguenza. Un bel risparmio di tempo.

Box

Analizziamo i BOX o contenitori dei vostri documenti. Babaiaga li chiama i contenitori di impaginazione grafica.

Ogni sezione del vostro documento verrà delimitato da un <div id=""> che crea un box, e potrà essere modificato attraverso i fogli di stile.

Il BOX può essere modificato a piacere. Potete modificare le dimensioni, i bordi, lo spessore, i tipi di colore del margine, un pò di spaziatura interna (padding) e dello spazio per allontanare elementi esterni.

Nella formazione della nostra pagina web avremo più BOX (<div>) presenti nella stessa pagina per delimitare gli argomenti che abbiamo inserito (rivediamo la nostra pagina web senza css).

Ogni BOX (non visibile a video ma solo in un editor). nella nostra pagina senza CSS, racchiude un paragrafo (inizio in grassetto). E un BOX può contenere un altro BOX (il BOX testata include il BOX titolo e il BOX navigatore)...ora tutto comincia ad avere una logica.

Possiamo introdurre parole o immagini all'interno del BOX o esternamente ad esso.

Se noi stabiliamo un Box in alto che occupa tutta la pagina (header), due BOX centrali e un BOX in basso (footer) abbiamo ottenuto una pagina web a due colonne con testata e piè di pagina: la nostra pagina web, usando i CSS.

Programmi

Abbiamo visto il significato di Contenuto e Impaginazione, delle Regole stilistiche dei Box, ora vediamo come assemblare il tutto.

Per assemblare il tutto, dobbiamo usare dei programmi particolari (editor di pagine web). Generalmente, questi programmi, hanno delle pagine web sviluppate e pronte all'uso.

Possiamo usare programmi come Dreamweaver (www.adobe.it) che facilita il nostro progetto con un sistema WYSIWYG (what you see is what you get = quello che vedi è quello che sarà), o programmi demo gratuiti, come Incomedia Website .

Le scelte sono dettate dal fatto che abbiamo provato e usato tali programmi.

Modello classico

Vediamo subito come potrebbe essere la nostra pagina web:

una testata per il logo ed il nome del sito. Due colonne centrali: una per la navigazione e l'altra per i contenuti. Un piè di pagina per ulteriori informazioni.