Sezione del telaio dedicata alla realizzazione e |
||||
..:: CSS table struttura sito ::.. Realizzare un sito web con le table è molto semplice, le personalizzazioni che si possono faresono illimitate per cui scrivere i css diventa indispensabile altrimenti il codice nella/e pagina/e diventerebbe confuso e pesante, inoltre alcuni parametri si possono inserire solo nei css Si possono creare layout solo con le table o utilizzarle come contenitori invisibili per basi grafiche, se si sceglie una struttura più semplice sfruttando le tante proprietà delle table si può realizzare un sito ottimizzato per i vari dispositivi, con basi grafiche che determinano gli spazi sarà sicuramente più rifinito nei particolari ma più complicato da rendere responsive Esempio sito con layout in table Un sito molto semplice, realizzato solo con le table, una dentro l'altra per creare una cornice e un effetto leggermente fluo per suddividere gli spazi dei contenuti, come ho scritto nell'anteprima, con uno spazio realizzato in questo modo se si fa attenzione alla scrittura del testo e alle immagini che si vanno ad inserire sarà anche ottimizzato per i vari dispositivi senza troppi problemi Scrivere i parametri delle varie table e celle sarà ovviamente più comodo e pratico utilizzare i css, anche se si preferisce realizzare una struttura con una sola table, ci saranno le varie celle per i contenuti, ogni classe che si aggiunge potrà essere usata man mano dove occorre non solo per la struttura Queste sono le classi che ho scritto per le table del sito esempio
Vi consigli di utilizzare nomi per le classi semplici ma specifici, il lavoro è ampiamente agevolato quando si scrive il codice nella pagina
Questo è solo un piccolo esempio, le righe di codice in una pagina che permettono di visualizzare la home di un sito sono tante, oltre alla struttura ci saranno i vari contenuti, testo, link, immagini, script per i gadget, ecc. ecc... si potrebbe fare parecchia confusione per cui scrivere i css è un ottima soluzione per avere il codice pulito, pagine più leggere e semplificare eventuali aggiornamenti css per struttura sito con base grafica e table Come per i div è ovviamente possibile utilizzare le table per visualizzare una base graficale table saranno contenitori invisibili per le parti di grafica che compongono il layout Questa è una vecchia base grafica di questa sezione e realizzata in questo modo deve essere tagliata in tre parti ed è un po' difficile da gestire perché la parte che ospita la colonna si suddivide nei vari pezzi quindi oltre alle table che conterranno le basi grafiche di header, body, footer e quelle da posizionare negli spazi per i contenuti, serviranno delle table con misure fisse Se proprio volete realizzare delle basi grafiche semplificate il lavoro il più possibile realizzando la parte per header e footer ed utilizzare table visibili per il resto Esempio sito con layout in grafica e table Come avete visto nell'esempio con due semplici basi grafiche si può realizzare una bella pagina, uno spazio leggero, funzionale e semplice da gestire inoltre se si presta attenzione ai contenuti, testo, immagini e varie che si andranno ad inserire sarà navigabile anche con i tablet Per realizzare il layout ho scritto nei css i parametri per una table contenitore con bordo una per la cella dell'header e una per il footer inserendo il background-image affinché si visualizzino le basi grafiche, per la cella del corpo/colonna ho semplicemente impostato il colore di sfondo Classi per le table contenitori
Ho evidenziato nel codice le misure in larghezza e altezza delle basi grafiche affinché si visualizzino correttamente devono essere precise Di seguito a queste classi si inseriscono quelle necessarie per gli spazi dei contenuti un piccolo esempio
Le celle impostate per la struttura faranno da contenitore ad una table invisibile con righe e celle necessarie in base alle esigenze, il codice nella pagina sarà più o meno così:
Le celle dello spazio corpo e colonna cresceranno man mano che si inseriscono i contenuti, avranno quindi sempre la stessa misura in altezza, sia che si scriva nello spazio corpo che nella colonna, ovviamente si possono aggiungere altre table con una o più righe e tutte le celle necessarie per personalizzare come si preferisce il proprio spazio Realizzate basi grafiche semplici e leggere, che siano in formato .jpg altrimenti impiegheranno molto tempo per visualizzarsi completamente e l'effetto non sarebbe piacevole 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 ^_^
~ Pagina visitata da 2338 utenti |
Segui il telaio su Facebook * Info sezione...Mi farebbe molto piacere la condivisionedei 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 Materiale grafico Gif, mini gif, pixel, immagini, png... |
I vostri messaggi...
|
|
|