beautyfarm - THE BEST DESIGN
DOWNLOAD MY MUSIK,participa la concursuri,soft-uri,cool stuff,NIKON CLUB,Baruri Trendy,ScreenSavers,Accesorii Cool,Masini sexy,Bannere,Games,Aparitii Cinematografice,Tribal Farm...etc distreaza-te!Totul pentru TINE.Cele mai tari subiecte.
|
Lista Forumurilor Pe Tematici
|
beautyfarm - THE BEST DESIGN | Inregistrare | Login
POZE BEAUTYFARM - THE BEST DESIGN
Nu sunteti logat.
|
Nou pe simpatie:
Larina23 pe Simpatie
 | Femeie
24 ani
Timis
cauta Barbat
28 - 80 ani |
|
CocaDozzer
Moderator
 Din: Garda de Fier
Inregistrat: acum 17 ani
Postari: 197
|
|
Per ottenere un design ad alto impatto grafico si è soliti ricorrere ad un massiccio uso della proprietà background dei fogli di stile.
In particolare, un metodo molto di moda è quello di applicare un grande sfondo grafico al body del documento in modo tale che risulti un'estensione del layout propriamente costruito secondo i classici canoni di sviluppo (codice HTML e CSS). Evangelista storico di questa tecnica è stato, e tuttora è, Nick La -- autore di nDesign Studio e Web Designer Wall. Come al solito, uno screenshot vale più di mille parole:
Figura 1 - Screenshot dal sito Web Designer Wall
click per vedere
Figura 2 - Screenshot dal sito N Design Studio
click per vedere
Il layout, requisiti e sviluppo
Prima fase del progetto è lo sviluppo del layout. Visto che lo scopo sarà quello di integrare visivamente uno sfondo grafico con la struttura, quest'ultima dovrà sottostare ad un indispensabile requisito: dovendo "unirsi" ad un'immagine, dovrà essere obbligatoriamente di dimensione fissa. Di conseguenza tutti i posizionamenti (posizione rispetto al viewport, posizione di elementi interni come box e barre laterali etc...) dovranno essere calcolati in pixel (px).
Durante la progettazione di un layout si è soliti predisporre un elemento, in genere chiamato wrapper, che funga da contenitore per tutti gli altri elementi: anche se è una tecnica largamente diffusa, è possibile che in alcune situazioni essa non debba essere necessariamente utilizzata. Nel nostro caso però, la presenza di un wrapper semplificherà enormemente il lavoro di dimensionamento e posizionamento e quindi il suo utilizzo è obbligatorio.
Code:
<div id="wrapper"> <div id="header">...</div>
<div id="main">...</div>
<div id="footer">...</div>
</div> |
Impostiamo la dimensione del layout con un po' di CSS:
Code:
#wrapper { background: #fff; width: 750px; margin: 200px auto 0 auto; } |
_______________________________________
 PM-URI
 
JUST SAY THANKS-it only takes a second!!!!
|
|
| pus acum 16 ani |
|
CocaDozzer
Moderator
Din: Garda de Fier
Inregistrat: acum 17 ani
Postari: 197
|
|
Come abbiamo detto la larghezza deve essere fissa (può essere quello che volete, io ho scelto 750px). Con la proprietà margin abbiamo posizionato il layout centralmente e abbiamo lasciato 200px di spazio in alto (per dare visibilità all'artwork di sfondo).
Visto che ci siamo scegliamo anche un colore di sfondo:
Code:
body { background: #8dd145; } |
Per quanto riguarda #header, #main e #footer le loro caratteristiche sono ininfluenti: nella pagina di esempio ho scelto una classica struttura "a blog" (corpo più una barra laterale), ma ovviamente siete liberi di scegliere qualsiasi composizione.
Ecco l'esempio funzionante.
Lo sfondo grafico: requisiti
Lo sfondo grafico è una grande immagine che andrà applicata al body del documento attarverso la proprietà background e anche esso dovrà sottostare ad alcuni requisiti:
* Per prima cosa la sua dimensione dovrà essere maggiore della dimensione del wrapper.
* Inoltre, agli estremi dovrà uniformarsi al resto della pagina. Ovvero è importanto che l'artwork non venga troncato nettamente ai limiti dell'immagine, ma vada a sfumare sul colore di sfondo della pagina. (vedi figura 3):
Figura 3 - Schema del layout
click per ingrandire
Il secondo requisito si rende necessario per supportare i visitatori con risoluzioni dello schermo molto elevate.
Lo sfondo grafico: realizzazione
Armiamoci di un qualsiasi programma di grafica raster (Photoshop, Paint Shop Pro, Gimp...) e creiamo una nuova immagine di dimensione 950x500 pixel Dopodiché riempiamo con il colore di sfondo che abbiamo precedentemente impostato per il body.
Disegnamo un rettangolo al centro dell'immagine di larghezza 750px e lasciamo 200px di distanza dal bordo superiore (vedi figura 4). Questo rettangolo, che riempiamo di bianco, rappresenta il nostro wrapper e ci servirò da guida per costruire il layout (vedi figura 5).
Figura 4 - Creazione del rettangolo
click per ingrandire
Figura 5 - Schema del wrapper come guida per il layout
click per ingrandire
_______________________________________
PM-URI
JUST SAY THANKS-it only takes a second!!!!
|
|
| pus acum 16 ani |
|
CocaDozzer
Moderator
Din: Garda de Fier
Inregistrat: acum 17 ani
Postari: 197
|
|
È importante che sia perfettamente centrato, altrimenti quando andremo a mettere lo sfondo nella pagina potrebbe risultare sfalsato rispetto al resto del documento.
Code:
body { background: #8dd145 url(sfondo.png) top center no-repeat; } |
Per la creazione dell'artwork non ci sono altre regole da seguire, se non quella di rimanere il più possibile fuori dalla sagoma del wrapper (lavorare sullo spazio "verde" , specialmente ai lati.
Figura 6 - Screenshot del nostro layout
clica per ingrandire
Come si può notare, l'artwork utilizzato va a sovrapporsi alla sagoma del wrapper, e quindi quando viene applicato al body del documento il layout propriamente costruito risulterà sovrapposto. Per risolvere basta aumentare il margine superiore nella regola #wrapper:
Code:
#wrapper { background: #fff; width: 750px; margin: 330px auto 0 auto; } |
Ecco il layout corretto:
Figura 7 - Screenshot dell'esempio completo e corretto
click per ingrandire
Conclusioni, approfondimenti e ottimizzazione
La costruzione del layout portata avanti in questo articolo è solo un esempio delle mille possibili realizzazioni. L'obiettivo di questa tecnica è quello di realizzare layout molto complessi superando i limiti imposti dai CSS attraverso la grafica. Ricordate sempre che la vostra realizzazione risulterà funzionante soltanto quando non si noterà il punto di unione tra la struttura realizzata con fogli di stile e lo sfondo grafico.
Lo scopo di questo articolo era quello di dare una visione d'insieme delle varie fasi di realizzazione, e quindi l'artwork portato come esempio è stato scarsamente ottimizzato (e si vede).
In realtà i layout realizzati attraverso gli sfondi grafici sono molto pesanti: è quindi obbligatorio tenere sotto controllo l'ottimizzazione dello sfondo sia durante la sua realizzazione (attraverso gli strumenti inclusi in qualsiasi programma di grafica raster) sia durante la sua implementazione, ricorrendo magari a tecniche efficaci come quella degli sprite.
Se siete in cerca di approfondimenti, il miglior modo di imparare ad affinare la tecnica rimane quello di osservare il lavoro altrui: se vi imbattete in un sito come Web Designer Wall, non c'è niente di meglio che osservarne il codice e guardare come è stato realizzato l'artwork.
Tutto il materiale proposto è disponibile per il download .
_______________________________________
PM-URI
JUST SAY THANKS-it only takes a second!!!!
|
|
| pus acum 16 ani |
|
