Come mettere la cornice agli interventi

Quando avete messo il colore di sfondo avete fatto già gran parte del lavoro.

Ricordate le due righe di codice che avete utilizzato?

<DIV style="BACKGROUND-COLOR:#codicecolore;WIDTH:100%;HEIGHT:100%;">
</DIV>

Pensate a queste due righe come ad una scatola dentro la quale mettete il contenuto del vostro blog.
La prima riga rappresenta la scatola vera e propria mentre la seconda riga rappresenta il coperchio. In mezzo ci sta la roba vostra.
Come è fatta la vostra scatola viene definito in mezzo alle virgolette di style, nella prima riga di codice.
La volta scorsa abbiamo deciso come doveva essere il colore della scatola mettendo il parametro BACKGROUND-COLOR:#codicecolore ;
Dobbiamo fare una cosa simile per dire che vogliamo anche un bordo.
Aggiungeremo quindi un parametro che è BORDER:#codicecolore dimensionepx tipo;
A differenza del colore di sfondo, il bordo vuole tre informazioni invece di una sola e queste informazioni vanno separate tra loro da uno spazio: la prima informazione è il colore del bordo (per il cui codice valgono le stesse regole del colore di sfondo), la seconda informazione è la dimensione del bordo in numero di pixel (es. 6px significa un bordo largo 6 pixel dove il pixel - per chi non lo sa - è il punto più piccolo rappresentabile sul monitor), infine il tipo di bordo (che può essere tratteggiato, continuo o altro). Il tipo di bordo viene definito da nomi convenzionali (in inglese purtroppo) che sono:

dashed
dotted
double
groove
hidden
inherit
inset
none
outset
ridge
solid

Io non li ho potuti provare tutti e perciò non so come vengano trattati dall'editor del blog che, come ho già avuto modo di dire, ha notevoli limitazioni. Fate voi gli esperimenti.

Un esempio di nostra prima riga di codice modificata diventerà quindi qualcosa come:

<DIV style="BACKGROUND-COLOR:#ccccff;BORDER:#336699 6px dotted; WIDTH:100%;HEIGHT:100%;">

In mezzo ci sarà il vostro contenuto e alla fine chiuderete tutto con il coperchio </DIV>

Terminato il lavoro in modalità HTML tornerete in modalità di editor normale e vedrete subito l'effetto ottenuto, e quasi sicuramente ci sarà qualcosa che non vi soddisfa (per esempio la larghezza del bordo). Tornerete perciò in modalità HTML per fare le modifiche e... vi metterete a piangere! Perché l'editor del blog si è preso delle iniziative e ha modificato il vostro codice in maniera apparentemente incomprensibile tipo:

<DIV style="BORDER-RIGHT: #336699 6px dashed; BORDER-TOP: #336699 6px dashed; BORDER-LEFT: #336699 6px dashed; WIDTH: 100%; BORDER-BOTTOM: #336699 6px dashed; HEIGHT: 100%; BACKGROUND-COLOR: #ccccff" align=center>

Niente panico! Semplicemente ha scomposto la vostra informazione in 4 sotto-elementi e questo è un grande vantaggio per voi! Perché potete definire in modo diverso le quattro parti della vostra cornice con colori, dimensioni e stili diversi per la parte destra (RIGHT), alta (TOP), sinistra (LEFT) e bassa (BOTTOM). La pallosità è che, se volete fare una modifica uguale per tutte le parti, dovrete scriverla 4 volte invece che 1 sola

Buon Lavoro :o)