 |
|
|||
Sezione del telaio dedicata alla realizzazione e |
||||
|
|
|||
..:: CSS div per struttura sito ::.. Nella pagina Style css elemento div abbiamo visto come impostare le classi, generiche e unicheper un elemento div con esempi di piccoli box da utilizzare per degli accessori ma come vi ho anticipato questi contenitori estremamente versatili sono utilissimi per la struttura di uno spazio web, per realizzare basi semplici come questa nel telaio a layout più professionali e responsive per dispositivi mobili Si può realizzare la home di un sito partendo da una base grafica di sicuro effetto ma ovviamente poco indicata ormai alla richiesta dell'adattabilità di un sito responsive, o come per il telaio, dividere la pagina in tre blocchi, header, corpo e footer utilizzando delle basi grafiche ed anche in questo caso però non sarà ottimizzato per i dispositivi mobili  Oppure la scelta più ovvia, sfruttare al massimo la flessibilità di questi contenitori,riducendo al minimo gli elementi grafici e utilizzando le proprietà specifiche per realizzare un sito totalmente responsive, adatto quindi ad ogni dispositivo, l'argomento è impegnativo quindi ho pensato di scrivere un tutorial specifico che potete leggere in Sito responsive con css e Flexbox Un sito web può essere uno spazio professionale quanto la "stanzetta" di un hobby e in tal caso poco importa che non sia estremamente ottimizzato, inoltre visto che può essere di allenamento per capire come gestire i contenitori div vediamo come si scrivono i css delle altre opzioni...
presentazione e info e un menu per i link delle altre pagine ma non deve essere eccessiva e troppo pesante altrimenti si rallenterà molto il tempo di caricamento della pagina Classe per il div contenitore
La classe per il contenitore si aggiungerà ai parametri già scritti per la pagina * CSS basi e sarà con un identificatore unico id, eviteremo confusione con altri contenitori. Un div ovviamente senza bordo (border-style: none;) con l'immagine di sfondo (background-image) e con misure in larghezza (width) e altezza (height) che corrispondono a quelle del'immagine (base grafica) non ci sono i parametri per il font perché per scrivere avremo bisogno di altri contenitori, che posizioneremo dove occorre sopra la base grafica utilizzando la proprietà position: absolute Classi per i div contenuti
In base all'immagine grafica realizzata si posizioneranno questi contenitori negli spazi predisposti, la proprietà position: absolute; servirà a bloccare i div e con i valori left e top indicheremo dove, rispetto alla parte superiore e a sinistra della pagina, occorre inoltre impostare i valori per la larghezza e l'altezza, (width e height) l'immagine è statica per cui bisognerà fare molta attenzione quando si inseriranno i contenuti affinché non si visualizzino al di fuori dei contenitori e quindi dalla base grafica  Qui potete vedere un esempio di ciò che si può realizzare # Home su base grafica* Se avete dato un'occhiata al codice sorgente, vi ho messo il link nella "Home", avrete notato che i contenitori per i contenuti sono all'esterno del contenitore principale questo perché i div si sovrappongono a ciò che c'è nella pagina, caratteristica che li rende così flessibili ma con questo tipo di struttura la pagina non si visualizzerà correttamente sui dispositivi mobili
ovvero logo/nome spazio e la parte footer, l'estremità inferiore del sito, per la parte body è preferibile impostare il colore di sfondo principale, affinché sia meno pesante da caricare in pratica è la struttura del telaio, prima o poi mi adeguerò anche io ad un sito responsive... La base che ho usato per l'esempio è una vecchia grafica di questa sezione, dove c'era anche la parte per il body, come vedete ne basta un pezzetto, si ripete e segue l'altezza dei contenuti, questa opzione dipende dal tipo di grafica che si realizza, evitare però troppe immagini è sempre da preferire
Classi per i div contenitori
Anche in questo caso è meglio utilizzare un identificatore unico id, non sarà necessario impiegare la proprietà position perché saranno centrati nella pagina con il valore impostato nella classe body, semplici div invisibili, basterà impostare le misure in larghezza (width) e altezza (height) corrispondenti a quelle delle basi grafiche, in pratica ci serviranno esclusivamente per ricomporre la base grafica "tagliata" i contenuti saranno inseriti in una table che crescerà in altezza man mano che si aggiungeranno In base alla grafica che si realizza servirà una table anche nella parte header per scrivere ad esempio una frase di benvenuto, e ovviamente in quella del footer base finale della grafica in cui si può prevedere uno spazio per scrivere il copyright, per queste due parti però occorrerà fare attenzione alla misura in altezza che non deve superare quella della grafica Un po' laborioso ma si potranno inserire tutti i contenuti che servono, qui potete vedere un esempio # Home con base grafica
purtroppo non sarà ottimizzato per i dispositivi mobiliSpero di essere stata chiara in tutti i passaggi ^_^ Vi auguro buon lavoro ma sopratutto buon divertimento! Ciao alla prossima^^ Penelope ♥
|
|
.gif){kind=small}
Commentario...
|
Scrivi qui per lasciare un saluto, una richiesta di aiuto, un suggerimento o una critica ^_^ |
~ Pagina visitata da 2692 utenti
H:
Buona Primavera
e ...buon weekend!
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 ::..
- Box effetto rilievo
- Basi CSS pagina web
- CSS elemento div
- CSS div struttura sito
- CSS sito responsive Flexbox
- CSS table
- CSS table struttura sito
- CSS file esterno
- Cbox - Chat per brevi messaggi
- Cbox - Theme editor
- Cursore
- Font personalizzato nel sito...
- Iframe per accessori e gadget
- Iframe per sito web
- Immagini
- Ipertesto - Link
- Link style
- Link ancora o interno
- Marquee
- Marquee speciali
- Marquee javascript
- Sfondo pagina
- Table basi e style
- Table sfondo
- Table scroll
- Table lavori
- Testo, font e personalizzazioni
- Textarea
..:: Script page ::..
..:: Script gadget ::..
Accessori e gadget del telaio...
Spazio web...
Realizzare e gestire un sito web
nell'hosting free più famoso...
Materiale grafico
Gif, mini gif, pixel, immagini, png...
Tutto il materiale grafico che ti serve,
raccolto e messo a tua disposizione!
I vostri messaggi...
|
|
|
Penelope
imposta i commenti sotto i post del tuo blog, Blogspot ha un box per i commenti molto carino, il mio "commentario" ha un codice particolare scritto appositamente per un sito web, ma se vuoi un boxino per dei salutini veloci puoi prelevare una Cbox, codice da inserire in "Aggiungi html/javascript" ed è gratuita, ecco il link del mio tutorial 
un abbraccio 
|
html & script Tutorial è online dal 2011 e dopo una lunga pausa ripartiamo da... 8 mesi e 2 giorni ೡ Copyright © Penelope 2008 - 2024 Tutti i diritti riservati www.iltelaiodipenelope.it |
|
|
 |