Un pò di chiarezza sul web ;)

Apro questo Post per fare un pò di chiarezza, per chi non l'avesse, sulla corretta gestione e strutturazione di un web-site :]

Bene, per prima cosa dobbiamo sapere con precisione ciò che andiamo ad eseguire.. perciò non buttatevi subito su tastiera e mouse ma bensì prendete Carta&Penna :)

La prima cosa da fare è una sorta di Briefing ;) un pò come per la grafica in generale, in modo tale da avere un quadro completo del nostro sito e su ciò che vogliamo " mostrare ".
Dunque, una volta che ci siamo schiariti le idee possiamo passare a quella che chiameremo " Architettura del Sito " ovvero tutto ciò che sarà presente in quest'ultimo (Numero di pagine, contenuti (per grandi linee), sotto-pagine e via dicendo)..
A questo punto dovremmo già avere uno schemino più o meno chiaro di ciò che vogliamo inserire nel sito in questione :)

Sempre con i famosi strumenti "Carta&Penna" ci accingiamo ad " abbozzare " una sorta di layout indicativo (Non perdete tempo con i dettagli estetici ancora).
Nel nostro piccolo bozzetto(che per convenienza dovrebbe rappresentare l'HomePage del sito) saranno indicate le parti che andranno poi a comporre il layout (Header, bar-menu, parte centrale, colonna e/o colonne laterali e via dicendo).
La strada inizia ad essere già più in discesa ;)

Una volta realizzato il bozzetto del layout su carta, proviamo, sempre sul foglio, ad inserire un parte di contenuti, ES: un teso ed un immagine (ovviamente utilizzate dei simboli per rappresentare testo ed immagine).

Benissimo :) adesso avete il vostro " sito " su carta ;) tutto quello che dovete fare e trasferirlo sul vostro computer ma, prima di fare questo, conviene farsi un idea, sempre su carta, di come verrà impostato il CSS in modo tale da aver un codice pulito ed ordinato fin dalla prima stesura ;)

Ok, accendete i computer se volete.

Decisioni Progettuali come "Uso photoshop o illustrator ?""uso fireworks o photoshop ?"

Usate il software che più ritenete comodo :) Se volete un consiglio, se il sito è semplice graficamente ma articolato come forme usate illustrator, se è un sito creativo ed innovativo usato photoshop.. e fireworks ?? bhè fireworks lo potremmo utilizzare per i contenuti interattivi (rollover, menu a tendina e via dicendo).. attenzione però l'ultima scelta è ovviamente sconsigliata dai programmatori !

Continuiamo.. una volta disegnato il nostro layout, o meglio lo scheletro del layout, possiamo arricchirlo con elementi di vario tipo..
Quando siete soddisfatti del risultato potete " smontarlo" e passare a Dreamweaver ;)

Uso Dei Css .

Bene, vediamo adesso quale sarebbe una struttura semplice e funzionale per il nostro sito..
Supponiamo di avere un sito formato da

1) Header
2) Bar Menù
3) parte centrale e 1 colonna laterale
4) footer

una corretta struttura del sito prevede, lo sfondo dell'header, quello della bar menù, la parte centrale (in genere una riga avente altezza pari ad 1px comprendente lo sfondo centrale e quello laterale) ed infine il footer.

Il css dunque sarà così strutturato:

- Contenitore Generico
- header
- parte centrale
- footer

E' importante avere un contenitore generico in modo tale da poter rendere flottante l'altezza del contenitore della parte centrale :]

a questo punto non vi resta che scrivere il css.

ES:

body {
background-color: #FFFFFF;
margin-top:0;

}

/* il contenitore generico /*

#contenitore {
width:800px;
margin:auto;
}

#contenuti {
width:800px;
margin:auto;
float:left;
background-image:url(sfcentr.gif);
}

#header {
width:800px;
margin:auto;
height:200px;
background-image:url(header.gif);
}

#menu {
width:800px;
margin:auto;
height:100px;
background-image:url(menu.gif);
}



#footer {
width:800px;
height:125px;
background-color:#000000;
float:left;


}

Bene :) di conseguenza la struttura dell'html sarà la seguente:

<body>

<div id="contenitore">
<div id ="header"></div>
<div id="menu"></div>
<div id="contenuti"> </div>
<div id="footer"></div
</div>

</body>

Come avete visto, non è stato proprio un tutorial ma bensì una sorta di " metodo " per chiarire un pò le idee :)

spero sia servito a qualcuno, per eventuali chiarimenti non esitate a chiedere.

Cordiali Saluti :)

;-]

 Lorenz`o, N.D.

fichissimo e molo comprensibile bravo

 goivanni pomo, N.D.
001design.it ® è un marchio registrato.
© 2004-2017 Molfese Paolo - P.Iva: 03430820617 - All rights reserved | Tutti i diritti sono riservati.