Layout da tabelle a CSS

[alex84freeangel]

Salve a tutti,
Ho sentito parlare di CSS e di come questi sostituiscono le tabelle in un sito, sto avendo difficoltà nel capire bene come funzionano.
Premessa ho pubblicato solo un sito che poi ho eliminato perchè non avevo tempo, per ora mi esercito a creare layout e cerco di imparare cosi magari potrò fare il werdesigner freelance...chiusa premessa...
Nel creare un sito faccio 3 semplici passaggi:
1)Disegno il sito in FIREWORKS
2)Lo ritaglio e lo esporto con le porzioni HTML (tabelle e immagini)
3)Con Dreamweaver lo finalizzo...

Ieri mi sono letto una guida sui CSS, sembra uno strumento molto efficace che mi permette di formattare vari elementi con un file solo cui si può accedere dall'esterno, comodo per come posso gestire la posizione degli elementi ma non ho capito NULLA a livello pratico di come si sviluppa un Layout con i DIV, ID ecc...

Mi spiego meglio, se disegno un sito in fireworks non lo devo più ritagliare ed esportare in dreamweaver ?
Devo prima creare questa "struttura" direttamente su dreamweaver e ritagliare i singoli pezzi da fireworks per poi inserire le singole immagini dentro questi div ?

Ho preso uno spazio web per farvi vedere 2 cose fatte sul momento, casi reali che mi viene facilissimo creare in automatico con le tabelle ma con i css...NO.
Vi metto il link cui fare riferimento http://alex84freeangel.altervista.org/index.html osservate il più carino "sartaexpress" che dovevo davvero pubblicare.
Spiegatemi come creare la struttura con i css perchè non ci ho capito nulla.
GRAZIE

[Mich_]

Ho sentito parlare di CSS e di come questi sostituiscono le tabelle in un sito

Questo e` un errore grossolano.
I CSS servono per formattare una pagina/sito, non sostituiscono nessun elemento.

Quello che si poteva dire qualche tempo fa e` che con i CSS non c'e` piu` bisogno di elementi aggiuntivi per formattare, ma ormai i siti non si formattano piu` con le tabelle da diversi anni, anche perche` vengono penalizzati dai sistemi di inicizzazione oltre che essere non-accessibili.

1)Disegno il sito in FIREWORKS

Questa non la ho mai sentita. Ho sentito usare sistemi grafici per la bozza iniziale (anche se non tutti sono d'accordo)

2)Lo ritaglio e lo esporto con le porzioni HTML (tabelle e immagini)

E qui sta l'errore. La pagina va "ritagliata" secondo la semantica del contenuto, dando ad ogni elemento il suo bel contenitore (e i vari sottocontenitori ai sottoelementi)

3)Con Dreamweaver lo finalizzo...

Anche questo non e` lo strumento piu` adatto per fare le cose fatte bene (anche se puo` essere di aiuto per impostare il layout - ma dipende da come lo si usa)
La finalizzazione va fatta sistemando i CSS a mano.

I CSS sono utili se e solo se la pagina e` stata correttamente sezionata secondo la semantica; in caso contrario sono decisamente una palla al piede: voglio dire che prendere una pagina non-semantica e cercare di sistemarla con i CSS puo` essere difficile, a volte impossibile e poi il palco crolla quando si cerca di sistemare le cose per piu` browser.

[alex84freeangel]

Che c'è di anormale nel creare il sito in Fireworks ?
Io sto imparando da solo comunque questa cosa di disegnarlo l'ho imparato ad un corso di 600 ore (di cose che alla fine già sapevo)...
Forse gli insegnanti erano più webmaster che designer ma disegnare il sito mi viene benissimo dopo ovviamente se vogliamo essere precisi proprio da corso, sviluppare l idea di base il target, la struttura del sito, analisi di mercato ecc...
Disegnandolo e ritagliandolo è gia pronto, so che sviluppa le tabelle ma è un sito vero e proprio.
Per i CSS riguardo i DIV ho proprio bisogno di una mano perchè non riesco a comprendere bene come creare l'impostazione, a questo punto forse la domanda non è più come usare i css per impostare il layout ma bensi quali passi sono necessari per arrivare a questa conclusione ?
Lo dico perchè a quanto ho capito i miei passaggi sono erratti FIREWORKS->DREAMWEAVER.
E poi se comunque si deve ritagliare e inserire nei DIV, quindi si deve comunque disegnare ?

[Mich_]

Mi sono documentato adesso per capire cosa fosse FireWorks. Non lo avevo mai sentito come programma di grafica, invece pare proprio sia cosi`.
In tal caso va bene usarlo per la prima bozza della pagina.
E comunque lo stesso lavoro si puo` fare con carta e penna: dal punto di vista formale la cosa non cambia.
Qualcuno preferisce usare la carta, qualcun altro uno strumento grafico.

Il secondo passo, come ho gia` detto, e` individuare gli elementi semantici per poi procedere alla segmentazione.
Ciascun elemento semantico deve avere un suo contenitore (<div> o altro elemento di tipo blocco) e a ciascun contenitore deve corrispondere un significato semantico.
E` questo il passaggio fondamentale, senza il quale non ha poi senso applicare i CSS.

Il terzo passo consiste nel trasferire i contenitori nel codice (X)HTML e realizzare quindi la marcatura della pagina.

Infine occorre sistemare i vari blocchi, e questo e` il compito del CSS.

In questa serie di passaggi non entrano altri programmi. Nei primi passi io sconsiglio assolutamente strumenti tipo DreamWeaver o altri editor, che possono essere utili, ma solo dopo, quando si sa cosa si sta facendo. Usandoli in fase di studio si perde la conoscenza di cosa si sta realizzando e si finisce per farsi guidare dagli strumenti anziche` usare gli strumenti per fare le cose che vogliamo noi.
Piu` "grezzo" e` l'editor e piu` siamo noi ad avere il controllo. Non nego comunque che ci sono editor che colorano le varie strutture e questo e` senz'altro un aiuto per evitare errori di sintassi.

Nota che alla fine del terzo passo, la pagina e` gia` completamente fruibile, anche se mancano tutti gli abbellimenti. Cosi` e` quello che capiscono i sistemi automatici e cosi` e` come capiscono le persone che devono "vedere" tramite lettori di schermo.

[alex84freeangel]

Benissimo inizio a comprendere meglio il concetto bene vediamo se ho capito.
Su un programma di grafica (come avevo detto prima fireworks) realizzo il sito e lo ritaglio e le singole parti entreranno nei DIV come colonne e righe.
Avevo diciamo capito anche prima però ho avuto la conferma e questa cosa mi crea altri dubbi...
Mentre prima io disegnavo (Non la bozza come dicevi prima) ma bensi il sito FINALE in fireworks e le parti che ritagliavo erano quelle parti che erano totalmente il sito e gestivo in dreamweaver, cosi con i CSS ritaglio solo IMMAGINI "insignificanti", cioè mi spiego meglio.
Con la mia procedura io indicavo per esempio aree dove ci dovevano stare per esempio dei form di testo che in fireworks sono immagini ma che in realtà in dreamweaver era una tabella che ospitava un form perchè l'immagine all interno della tabella la cancellavo in automatico dreamweaver assumeva quella parte di tabella di colore bianco, gli associavo in HTML il colore precedente con la forma esadecimale ed era una cella e non più un immagine, quindi usabile, questa è una cosa strettamente legata ad uno sfondo senza texture a tinta unica.
Mentre per i pulsanti potevo creare un area sensibile.
Ma con i CSS malgrado ora mi è più chiaro non capisco...Se ritaglio le singole parti e creo con i DIV la tabella (Cosa che ancora all atto pratico mi sembra difficile) e inserisco semplici immagini come faccio a creare zone che possono ospitare elementi come form o testo o altro che può subire una formattazione ????
Spero di essermi saputo spiegare, comunque grazie che fino ad ora hai risposto.

[ResianTaxidrive]

Dai uno sguardo a http://www.csszengarden.com/ e togli gli stili css e vedi un po' come vien fuori la pagina: così è l'html che devi produrre e che poi devi vestire in una seconda fase con gli stili.

Anche io disegno i siti con Fireworks, però poi non esporto niente, quando mi serve un elemento grafico lo taglio dal layout che ho disegnato e lo salvo e poi lo inserisco a mano nell'html.

[alex84freeangel]

ResianTaxidrive, ciao, si conosco da molto tempo quel sito che illustra i CSS, sono siti estrremamente e paurosamente BELLI!!!, ora provero come dici tu a eliminare l'html...
Ma posso scaricare l' intero progetto ?
Comunque per quanto ho capito, non è proprio facilissimo creare questa interfaccia...

[ResianTaxidrive]

Sì il codice del sito è visibile così come tuttii css quindi puoi fare ogni sorta di prova.

Credo che dipenda da come si è abituati, io quando devo fare una newsletter esco pazza a fare con le tabelle!