Originariamente inviato da Mich_
Lo schema fatto in un programma grafico e` uno dei punti di partenza, ma da solo non basta.
L'atro punto di partenza e` la struttura logica.
Ad esempio nel tuo grafico si puo` distinguere (la butto li`: scrivo quello che percepisco io, ma potrebbe non essere essattametne corretto secondo la tua idea):
codice:
- un contenitore di tutto il sito (forse con larghezza fissa)
- uno spazio per il titolo (largo il 100%)
- uno spazio per il menu orizzontale (largo il 100% - oppure allineato a dx)
- uno spazio per i contenuti a sua volta suddiviso
. diversi blocchi larghi ciascuno un po' meno del 50%
- un footer
Ciascuno degli elementi che ho elencato sara` formato da un blocco, con vari elementi annidati.
Questa qui sopra e` quindi la struttura logica, cui DEVE corrispondere la struttura del codice.
Se il codice non rispecchia la struttura logica, si generano errori di semantica. In tal caso ci sara` qualcuno o qualcosa che non capisce la tua pagina (persone che non usano browser grafici, spider di indicizzazione, motori di ricerca, ...)
Il passo successivo e` spezzare la grafica in modo che ciascun pezzo abbia la parte di grafica che gli spetta.
Visto che lo sfondo e` sfumato, tutto lo sfondo deve far parte del contenitore.
L'immagine sara` una riga verticale sfumata, ripetuta in orizzontale.
Per i bordi arrotondati vedi se i "nifty corners" ti possono andar bene (trovi il riferimenti tra i "link utili", mentre se hai dubbi li puoi risolvere nel forum JS)
Invece i vari riquadri devono far parte di cisacun elemento.
Ad esempio il bordo del menu potrebbe essere realizzato con un'immagine unica, formata dal bordo bianco e il resto trasparente
Invece per i bordi dei vari "quadri" (immagino che non conosci la loro lunghezza a priori) hai due strade principali:
- realizzarli in tre pezzi: testa, coda, bordi laterali
- usare i bordi e arrotondarli.
In ambedue i casi lo sfondo sara` trasparente. Visto che gia` usi l'arrotondamento per il contenitore non dovrebbe essere un problema usare l'arrotondamento anche per i quadri.
Comunque dovresti tener separati i due problemi:
- creare la struttura logica
- dare le forme volute
Il primo lo realizzi tramite una marcatura corretta, il secondo lo fai tramite i CSS.
Se sbagli la marcatura (o la realizzi in modo semanticamente sbagliato), avrai maggiori difficolta` con la formattazione.
Quindi per prima cosa dovresti realizzare la marcatura.
Poi usa i CSS per realizzare la formattazione dei vari blocchi.
Infine puoi passare agli abbellimenti (sempre tramite CSS).
Se vuoi saltare le tappe (ad esempio realizzando gli arrotondamenti prima di sistemare i blocchi), avrai problemi maggiori.
Tieni anche presente che in rete ci sono numerosi esempi di layout: alcuni sono riportati tra i "link utili". Forse un giro non ti farebbe male (puoi risparmiare molto tempo ed imparare piu` che provando da solo o chiedendo nel forum).
Rispondi quotando