DreamWeaver, Codice?

[Christopher]

Ciao a tutti ragazzi!
Ho un problema che mi assilla ormai da anni!

Sono un ragazzi molto appassionato di Web Design e in tutti i miei anni di esperienza mi sono "evoluto" all'utilizzo del software DW (DreamWeaver) esattamente la CS3.

Vi spiego brevemente come realizzo un semplice sito web.

1. Creo l'interfaccia in photoshop e poi divido in sezioni il tutto

2. Importo in dreamweaver tutta l'interfaccia creata prima con photoshop e grazie alle sezioni mi crea in automatico celle e tabelle!

3. Completo il mio sito con vari effetti come immagini di rollover qualche elemento flash ecc.

4. Ecco il sito completo

Tutto questo spiegato molto brevemente!

Il problema "estetico/codice/mia ignoranza" sarebbe che una volta che il sito è finito e successivamente visualizzato in un qualsiasi browser, quando seleziono con il mouse tutto il sito si notano tutti le immaginette tagliuzzate frutto delle sezioni di photoshop! Ovvero comunque sia tutte le celle tabelle.

Io noto con piacere, che in alcuni siti quando selezioni tutto (sempre nel browser) seleziona solo il testo, in maniera molto ordinata, e le immagini sottostanti non li seleziona nemmeno, come se fosse tutto un'immagine di sfondo, anche se non è così!

Sapete spiegarmi come posso agire per far si che anche io riesca a fare un sito più "compatto"!

Vi ringrazio anticipatamente per le risposte e per l'aiuto, e mi scuso in anticipo se mi sono espresso malo modo! :P

Chrisopther!

[Myaku]

Originariamente inviato da Christopher
Sapete spiegarmi come posso agire per far si che anche io riesca a fare un sito più "compatto"!

Ciao e benvenuto

1. Innanzitutto, iniziare a sviluppare siti in maniera corretta. Lascia perdere dreamweaver (quantomeno la modalità visuale), ed impara a creare siti in maniera tableless e semanticamente giusta, scrivendo il codice a mano.
2. Studia html, xhtml e css in primis, guarda e confronta il codice dei siti mostrati nelle varie css gallery in giro per il web, comprendi la differenza tra "contenuto", "presentazione" e "comportamento" ed a separarli correttamente.
3. Impara a non limitarti a sezionare il tuo layout da photoshop, ma a salvare solo le parti di grafica effettivamente necessarie.
4. Documentati su quelle che sono le differenze di rendering tra i vari browser, e soprattutto sui bug che affliggono explorer, ed a gestire quindi un layout crossbrowser.
5. Studia l'accessibilità, e l'usabilità.

6. Guarda i link utili qui e delle sezioni lato client, ci troverai materiale e suggerimenti utili anche su problemi "comuni". Anche le guide di base che trovi su html.it ti possono aiutare.

[Christopher]

Grazie!

Quindi in poche parole devo aprirmi un file Notepad e cominciare a buttar giù codice?

Mi sapresti consigliare una guida o qualcosa per imparare a costruire passo dopo passo un sito come si deve, graficamente che somigli a http://www.sysuniverse.net/? - Perchè a livello grafico me la cavo abbastanza bene anche perchè di mestiere faccio il Graphic Designer e se non ho capito male il mio problema è il codice! Voglio veramente imparare a fare un buon sito web, ordinato, compatto e accessibile!

Grazie!

[Myaku]

Originariamente inviato da Christopher
Quindi in poche parole devo aprirmi un file Notepad e cominciare a buttar giù codice?

all'incirca si, magari non proprio il notepad ma qualche altro editor un po' più avanzato, tipo notepad++, smultron, ecc. (se fai una ricerca in xhtml probabilmente troverai suggerimenti ancora migliori)

Mi sapresti consigliare una guida o qualcosa per imparare a costruire passo dopo passo un sito come si deve, graficamente che somigli a sysuniverse.net

anche lì, nella sua progettazione, su alcuni dettagli da sviluppatore pignolo ho tirato abbastanza "dritto", ma non è comunque il caso di soffermarcisi adesso.

In linea di massima, parti appunto con le guide di base al codice, anche quelle di html.it.
Studia gli standard del web tramite www.w3.org e www.w3schools.com
A suo tempo, mi è stato abbastanza d'aiuto il libro "lo zen e il design css", ma comunque in rete puoi trovare risorse e tutorial altrettanto validi, tramite siti quali: nettuts, csstricks, smashing magazine, positioniseverything. Trovo valide anche le pubblicazioni di sitepoint (parere personale, ovviamente).
Poi, come già detto, butta uno sguardo alle risorse utili in rilievo nelle sezioni di interesse.

Non ti saprei consigliare una guida passo-passo, anche perchè nella progettazione di un sito influiscono vari elementi, difficilmente tutti raggruppabili in un unico manuale (design, codice, usabilità, accessibilità, ...). Quindi, secondo me prima dovresti partire dalle basi, e quando avrai una buona padronanza dei fondamenti puntare a qualche tutorial più specifico.

E poi, come ogni cosa, tanta pazienza

[LineaPixel]

Impara il codice, parti dal nulla e quando avrai imparato almeno le basi essenziali potrai tornare a sfruttare Dreamweaver, utilizzando la visualizzazione codice+anteprima, in modo da intervenire in maniera corretta su ciò che vuoi creare e sfruttando la rapidità di creazione di fogli di stile, inserimento tag, etc.

[Christopher]

quindi devo imparare in primis HTML e poi buttarmi sul CSS giusto?

[Myaku]

Originariamente inviato da Christopher
quindi devo imparare in primis HTML e poi buttarmi sul CSS giusto?

html e css sono complementari, con uno gestisci le informazioni, con l'altro la presentazione.
Imho potresti anche studiarti prima l'html e capire i tag (ed a cosa servono), quindi passare poi a stilare le pagine.

[LineaPixel]

Originariamente inviato da Christopher
quindi devo imparare in primis HTML e poi buttarmi sul CSS giusto?

Concordo anche qui con Myaku.
Direi di sì.
Diciamo che il CSS è il linguaggio che ti permette di trasformare un tag html in un qualcosa di grafico, di impaginarlo a tuo piacimento, di trasformarlo per le esigenze del tuo layout, perciò se non sai prima cosa significa quel tag html è difficile.
L'html (ma diciamo xhtml che è meglio) è il telaio, il CSS sono le finiture estetiche

[francesco321654]

il problema maggiore sta nelle tabelle
di solito io agisco cosi:
in html creo una struttura (in caso di un template a tre colonne tipo portale per intenderci) di questo tipo:
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="extra"></div>
<div id="navigation"></div>
<div id="footer"></div>
</div>

e nei css inserisco i colori le dimensioni dei font lo sfondo ecc ecc
poi chiaramente se l'header sara uguale per tutte le bagine cosi come la navigazione l'extra e il footer utilizzo delle inclusioni server
cosi evito di dover rifare tutto su ogni pagina
spero di aver capito il tuo problema e di averti dato una mano

[Myaku]

ricordiamoci che è la sezione grafica, cerchiamo di non vedere la questione troppo in termini di "ti posto html e codici vari", per questi approfondimenti ci sono le sezioni lato client, grazie