Pagina aggiornata... Lunedì, 08 gennaio 2024 * Tempo di caricamento 0.33 secondi
Link navigazione : Home telaioHome ~ Tutorial ~ Html » CSS - Table struttura sito

..:: CSS o foglio di style - Table struttura sito ::..

Per capire bene questa guida sarebbe meglio leggere prima CSS - basi e CSS - table

Vediamo ora come scrivere le classi per delle table e celle che useremo
come contenitori per realizzare una pagina web/home sito

Possiamo utilizzare le table come contenitore principale di un sito, sia sfruttando i vari parametri
per la personalizzazione che abbiamo a disposizione e/o invisibili, per postare una base grafica

- Iniziamo con la prima opzione, table personalizzate

Ovviamente in base a ciò che abbiamo in mente di realizzare, scriviamo le basi
dei nostri css, quindi andiamo ad inserire gli altri parametri che ci occorrono

# Qui potete vedere cosa realizzeremo --> Pagina esempio

Di seguito alle classi basi inseriremo i parametri per una table che sarà il contenitore principale,
nel mio esempio ho stabilito che abbia un bordo solido con spessore a 15px e un'immagine glitter
come sfondo, che poi si visualizzerà come un bordino piccolo piccolo, quindi aggiungeremo
i parametri per la cella, che ha un bordo solido a 1px e uno sfondo colorato

[...]

<style type="text/css">
[...]

table.bordo_contenitore{
border:15px solid #b0926e;
background-image: url('images/BORDER3.gif');
margin-left:auto;
margin-right:auto
}
td.box_base{
border:1px solid #826748;
background-color :#f2ebde;
text-align:center;
font-family : "Tahoma";
color : #826748;
font-size : 14px;
margin-left:auto;
margin-right:auto;
}
</style>

- Per avere l'effetto con doppio bordo, nella pagina scriveremo:

<body>

<table class="bordo_contenitore" cellpadding="1" cellspacing="1" width="800">
<tr>
<td><table class="bordo_contenitore" cellpadding="1" cellspacing="1" width="100%">
<tr>
<td class="box_base">&nbsp;</td>
</tr>
</table></td>
</tr>
</table>

</body>

Di seguito potremmo aggiungere tutti gli altri parametri che ci occorrono per rifinire la pagina,
altre table e celle, classi per gadget e accessori vari, tipo menu, bottoni top page, referrer, ecc. ecc.

Piccolo esempio di "rifiniture" sito

Clicca con il tasto destro del mouse nella pagina e poi nella finestrella che si apre
su "Visualizza sorgente" potrai vedere il codice scritto^^

Table contenitori per base grafica

Attraverso le table potremmo postare una base grafica, che sia intera o tagliata in più parti,
nel primo caso, basterà inserire una classe per una table con sfondo/immagine completa di misure per
la larghezza width e l'altezza height ovviamente le stesse dell'immagine che useremo

[...]

<style type="text/css">
[...]

table.box_principale{
border:0px;
background-image: url('url pagina immagine');
width:****px;
height:****px;
text-align:center;
margin-left:auto;
margin-right:auto
}
</style>

Nella pagina la table sarà richiamata così:

<body>

<table class="box_principale" cellpadding="0" cellspacing="0">
<tr>
<td>&nbsp;</td>
</tr>
</table>

</body>

A meno che non sia indispensabile e si realizzi una base relativamente "piccola"
questa è una soluzione che vi sconsiglio di utilizzare perché il caricamento dell'immagine,
se troppo pesante, impiegherebbe troppo tempo e l'effetto non sarebbe poi carino...

*Cliccate qui per un esempio

Vediamo come postare una base grafica tagliata in più parti

Soluzione sicuramente più pratica da utilizzare e più veloce nel caricamento della pagina,
in genere la base realizzata si divide in tre parti, una per l'header ovvero il logo/titolo
una parte per il body, che non avrà limiti per quanto riguarda l'altezza height,
"crescerà" in automatico in base a quanti elementi inseriremo e un'ultima parte per il footer
cioè la parte inferiore, per capirci meglio un piccolo esempio pratico


In questo caso dovremmo scrivere la classe per una table invisibile e
le classi per le tre celle che conterranno i pezzi di grafica.
Nella cella per il corpo ovvero la parte centrale che crescerà in base ai contenuti
non occorre inserire il parametro dell'altezza height

[...]

<style type="text/css">
[...]

table.base{
border:0px;
text-align:center;
font-family : "Tahoma";
color : #5e402a;
font-size : 12px;
margin-left:auto;
margin-right:auto
}
td.header {
border:0 none;
background-image: url('url pagina immagine');
text-align:center;
width: ****px;
height: ****px
}
td.corpo {
border: 0px none;
background-image: url('url pagina immagine');
text-align:center;
font-family : "Tahoma";
color : #5e402a;
font-size : 12px;
width: ****px
}
td.footer {
border: 0px none;
background-image: url('url pagina immagine');
text-align:center;
font-family : "Tahoma";
color : #5e402a;
font-size : 12px;
width: ****px;
height: ****px
}
</style>

Nella pagina richiameremo le classi così:

<body>

<table class="base" cellpadding="0" cellspacing="0">
<tr>
<td class="header ">&nbsp;</td>
</tr>
<tr>
<td class="corpo">&nbsp;</td>
</tr>
<tr>
<td class="footer">&nbsp;</td>
</tr>
</table>

</body>

*Cliccate qui per la pagina esempio...

Vi ho illustrato come utilizzare i css per realizzare una home con delle basi grafiche e le table,
ovviamente con le misure giuste alle varie esigenze, potremmo nello stesso modo postare dei box per
scrivere news, menu, frasi ecc. ecc. insomma qualunque gadget e accessorio ci venga in mente

- Al posto delle table se preferite si possono usare i div, i link nel menu in colonna^^

Spero di essere stata chiara in tutti i passaggi ^_^
Vi auguro buon lavoro ma sopratutto buon divertimento!
Ciao alla prossima^^ Penelope ♥


Dai un giudizio a questo tutorial... Grazie ^_^




0%
Voti totali: 0
Rating... 1





Commentario...

Scrivi qui per lasciare un saluto, una richiesta di aiuto,
un suggerimento o una critica ^_^

Nickname
Home page
B i U   ^_^ o_O O_O *_* Gif...

  


~ Pagina visitata da 2044 utenti


 H: 
Buon Inverno !





* Info sezione...

Mi farebbe molto piacere la condivisione
dei miei tutorial ma vi sarei anche molto grata
se evitaste di fare copia e incolla su altri spazi
del mio lavoro, linkate le pagine, avvisatemi
ricambierò senza problemi. Grazie ♥

..:: Basi ::..



..:: html ::..








..:: Script page ::..




..:: Script gadget ::..




Accessori e gadget del telaio...


..: Spazio web...


Realizzare e gestire un sito web
con l'hosting free più famoso...



Gif  & co... Penelope ♥


Pagina Facebook
del telaio...




 

I vostri messaggi...

Lula
15/02/2024 15:32:39
Ciao cara come stai? Spero bene sono passata per un saluto veloce ♥
ೡ Scritto in... Iframe
 
Grazia
07/02/2024 07:45:12
Ciao Penny cara, mentre continuo l'interminabile lavoro per il mio sitino nuovo, sono passata a lasciarti un salutino veloce ♥ Spero sia tutto ok :) Cerco di fare, nei limiti delle mie possibilità, molte cose in contemporanea, avendo tante passioni (a proposito, grazie del tuo voto alla mia poesia su Instagram ♥ ) e quindi sono come te sempre di corsa, ma le amiche vengono prima di tutto. Un abbraccio e mille complimenti come sempre!
ೡ Scritto in... Il telaio di Penelope...
 
Grazia
27/01/2024 08:50:44
Ciao Penny cara, sono passata per un salutino e per augurarti buon sabato ♥ Mentre lavoro con SharepointDesigner al nuovo spazio che ti dicevo di recente, un giro di saluti tra le amiche fa sempre piacere. Bacioni ♥
ೡ Scritto in... Il telaio di Penelope...
 
Penelope
21/01/2024 23:01:40
Cara Grazia WordPress è sicuramente la scelta migliore che si possa fare per avere uno spazio professionale semplice da gestire, conosco la piattaforma piuttosto bene e so che è anche molto versatile, per il mio telaio però preferisco un sito tradizionale mi piace trafficare con i codici ^_^ Un abbraccio forte a te
ೡ Scritto in... Iframe
 
Grazia
21/01/2024 08:21:23
Buongiorno e buona domenica Penelope! ❤️ Sai, io adoro come te i siti statici, ma per quel che riguarda gli spazi che personalmente costruisco con WordPress, sono tutti realizzati con software esterni acquistati di editing tecnico-grafico, nel mio caso non utilizzo le basi pronte fornite da Altervista, ma decido ogni singolo componente (anche la struttura interna delle pagine ecc.). Avevo bisogno di un blog per argomentare e WordPress era la scelta più professionale a disposizione! È sempre un piacere passare a trovarti, un abbraccio forte forte a te e ai ragazzi ed a presto
ೡ Scritto in... Iframe
 
Penelope
20/01/2024 22:57:04
Grazie carissima Grazia i tuoi complimenti sono davvero graditi, gli iframe sono una grande risorsa web e capire come utilizzarli al meglio può essere molto utile, spero ^_^ ho provato ad utilizzare WordPress con Altervista ma non fanno per me i cms, preferisco un sito indipendente da codici preimpostati Un abbraccio forte
ೡ Scritto in... Iframe
 
Grazia
19/01/2024 16:27:52
I nostri adorati iframe... :) Complimenti per la chiarezza, mi è piaciuto molto come hai descritto i vari passaggi, sei stata come sempre bravissima! Chi utilizza WordPress (ad es. su Altervista) ha la comodità di un blog e la possibilità anche di caricare pagine web complete, per questo lo adoro, c'è pure l'accesso FTP alla cartella dei contenuti, volendo...♥ Ma i siti prettamente statici hanno sempre il loro fascino....un abbraccio carissima!
ೡ Scritto in... Iframe
 
Grazia
12/01/2024 16:39:08
Buon pomeriggio, carissima Penelope, sono passata per lasciarti un salutino, io tutto bene, grazie di essere passata nel Taccuino! in questi giorni mi sto dedicando a tante attività creative/manuali e di scrittura...ad ogni modo spero che anche a te sia tutto ok! Passare qui è sempre un piacere. Un abbraccio forte ed alla prossima ♥
ೡ ...commentario
 
Lula
11/01/2024 10:50:29
Ciao carissima Penny, auguri di buone feste passate. Spero tu le abbia trascorse con serenità e in salute! io dietro ai fornelli e ai bimbi. ma sono felice^^ anche se un po' stanca e con la schiena a pezzi ^^Un abbraccio!!!
ೡ Scritto in... Il telaio di Penelope...
 
Grazia
03/01/2024 10:40:42
Ciao carissima Penny, auguri di buon anno a te e ai ragazzi anche qui :) Sono venuta a prendere una giffina per la grafica nuova del Taccuino ♥ Grazie mille un abbraccio forte
ೡ Scritto in... Il telaio di Penelope...
 

Referer...



Gestisci le opzioni di privacy