Tra i restyling doverosi da fare, se non vogliamo ricreare da zero il LAYOUT, c'è quello di usare il CSS per tutto quello che riguarda la presentazione dei contenuti e lasciare all'HTML il solo compito di creare lo scheletro della struttura.
Esistono ancora tantissimi siti (non posso fare di preciso una stima in %, ma sono ancora la maggioranza) che usano poco o per nulla i CSS. Questo è dovuto essenzialmente a due motivi: poca conoscenza; lavoro lunghissimo da fare per aggiornare tutte le pagine del sito, quindi ci si scoraggia prima di iniziare.
Se siete a digiuno di CSS basta leggere questa guida oppure le altre in giro per il web. Se invece il sito è di grosse dimensioni le soluzioni sono due: ricreare una struttura da zero; se alla struttura esistente ci siete affezionati, armarsi di tanza pazienza e aggiornare tuttle le pagine.
Veniamo alle spiegazioni pratiche con un esempio classico:
< html> < head> < /head> < body background="nome_immagine.jpg" link="#valore" vlink="#valore" alink="#valore" text="#valore" topmargin="x" bottommargin="x" leftmargin="x" rightmargin="x">
|
l'header |
|
|
colonna per menu |
testo di esempio |
|
footer |
|
Una struttura del genere da l'idea di poca professionalità per diversi motivi:
- le tabelle vanno usate per impaginare e intabellare dati e non per creare la struttura del sito;
- se vogliamo avere una struttura validata è necessario eliminare tutti quei Tag tipo width, align, ecc.;
- dobbiamo assolutamente conoscere il CSS per rientrare nella definizione di Web Designer.
La soluzione più giusta è di creare un file esterno a cui dare il nome che vogliamo, l'importante è che come estensione finale abbia .css. Poi di utilizzare i DIV.
Se invece la tabella serve per l'impaginazione dei dati allora la utilizziamo, ma eliminando tutti i vari align, width, eliminando i valori all'interno di border, cellspacing e cellpadding, e utilizzando alcuni tag che danno maggiore accessibilità come summary, scope, ecc..
Soluzione in caso di tabella per impaginazione dati:
< html>
< head>
< style>
html, body { font-family:arial; font-size:90%; color:#000;
background:#fff; text-align:center; margin:0 auto; }
table { margin:0 auto; width:100%; text-align:center; color:#000; }
th { padding:0.5%; border:solid 1px #000; background:#ddd; }
td { padding:0.5%; border:solid 1px #000; background:#ddd; }
< /style>
< /head>
< body>
| titolo prima riga | titolo seconda riga |
|---|---|
| testo prima riga | testo seconda riga |
Soluzione in caso di tabella per layout (si ricorda che è la scelta sbagliata perchè bisogna far sempre uso dei DIV):
< html>
< head>
< style>
html, body { font-family:arial; font-size:90%; color:#000;
background:#fff url(nome_immagine.jpg); text-align:center; margin:0 auto; }
table { margin:0 auto; width:100%; text-align:center; }
th { padding:0.5%; border:solid 1px #000; background:#ddd; }
td { padding:0.5%; border:solid 1px #000; background:#ddd; }
a:link, a:visited, a:hover, a:active { color:#000; text-decoration:underline; }
#header { padding:0.5%; border:solid 1px #000; background:#ddd; }
#colonna { padding:0.5%; border:solid 1px #000; background:#ddd; }
#contenuto { padding:0.5%; border:solid 1px #000; background:#ddd; }
#footer { padding:0.5%; border:solid 1px #000; background:#ddd; }
< /style>
< /head>
< body>
| l'header | |
| colonna per menu | testo di esempio |
| footer | |
