Dal progetto al web

IL CODICE - DALLE 13:00 ALLE 19:00
Il momento della verità è arrivato. Avete una serie di bozze su cui è disegnato il progetto del sito e tutta la grafica che andrà sulle pagine. Aprite finalmente Dreamweaver, create un nuovo sito, copiate tutte le immagini in una sottocartella dello stesso e cominciate il lavoro.
Il primo passo è creare una pagina HTML con un foglio di stile CSS, che servirà da modello per tutte le pagine del sito. Abbiamo scelto quest'approccio semplificato (un solo modello di pagina per tutto il sito) per ovvie ragioni di tempo, ma nel vostro caso potreste avere bisogno di più di un modello per distinguere sezioni diverse del sito. Aprite Dreamweaver e create un nuovo sito cliccando su Nuovo dal menu File. Copiate tutte le immagini all'interno di una sottocartella del sito e create un nuovo file HTML (Dreamweaver darà origine alla struttura di base del codice). Se avete progettato a dovere la vostra pagina, dovreste avere un modello con delle sezioni logiche (ad esempio un banner superiore, una barra laterale di navigazione e il contenuto principale della pagina nel restante spazio). Create degli elementi <DIV> per ognuna delle sezioni, assegnate loro degli ID e lasciateli vuoti per il momento.
Ora cliccate sull'icona "Associa foglio di stile" nel pannello Progettazione, Stili CSS e scegliete un foglio di stile esterno alla pagina. Create il nuovo foglio di stile utilizzando il Wizard di Dreamweaver. Incominciate dagli elementi di base contenuti nel tag BODY, come lo sfondo della pagina (colore e/o immagine) e il tipo di carattere predefinito. Se volete un posizionamento preciso al pixel, utilizzate il posizionamento assoluto ("position: absolute"). Per layout fluidi utilizzate invece una combinazione di posizionamento relativo ("position: relative") e le proprietà Mobile e Cancella negli elementi di pagina. Se siete incerti sulle dimensioni delle varie sezioni, riferitevi sempre alle immagini che dovranno contenere. Potete usare la visualizzazione Progettazione per posizionare le varie sezioni ed esportare
poi il codice nel foglio di stile.
Ora che il design di base è stato realizzato, cominciate a scrivere il codice utilizzando una combinazione di vista Progettazione, vista Codice e l'anteprima nel browser (F12). In questa fase prestate attenzione a mantenere "pulito" il codice, ad esempio convertendo gli stili "inline" (interni al codice HTML) in stili equivalenti nel foglio di stile esterno. Utilizzate le scorciatoie da tastiera o il menu Layout per aggiungere velocemente un tag e aprite il pannello Proprietà per inserire i tag ALT nel codice relativo alle immagini. Salvate porzioni di codice che potreste riutilizzare in seguito, in modo da poterle inserire nella pagina con un solo clic. Per pulsanti e rollover separati utilizzate l'apposita voce nel menu Inserisci. Una volta finito il lavoro, potete riutilizzare la pagina come modello per le altre pagine del sito ("Salva come Modello" dal menu File), quindi, in vista Codice selezionate quali porzioni di codice variano da pagina a pagina. Il codice nella selezione verrà incluso in tag di commento. Ora potete creare nuove pagine basate su questo modello. Dreamweaver, naturalmente, vi dà la possibilità di modificare anche gli elementi statici del modello, selezionando la voce "Aggiorna pagine" dal menu Elabora, Modelli. Questo sistema, unito all'utilizzo dei CSS, vi consentirà di apportare modifiche all'intero sito senza dover operare sui singoli file delle pagine.
Vogliamo concludere questa fase del design con qualche considerazione sull'utilizzo di Flash. Se tuttavia, come nel nostro caso, avete poco tempo per realizzare un sito e incontrate difficoltà nel rendere compatibili gli effetti in DHTML e i CSS nei vari browser, Flash potrà garantire la presenza di elementi dinamici, come le barre di navigazione.

TEMPLATE ED EXTRA - DALLE 19:00 ALLE 22:00
Si è fatto tardi e le cose non funzionano esattamente come vorreste. Può essere un problema di compatibilità tra i vari browser o semplicemente il codice non viene visualizzato correttamente. Potreste cercare in Rete qualche template modificabile, plug-in o script che possa aggiungere maggiore professionalità al sito.
Uno dei primi posti in cui dovreste cercare è Dynamic Drive: qui potete trovare effetti rollover o di pop-up, ma anche librerie per la gestione dei form.
Se quello che volete per il vostro sito è un forum di discussione, scaricate gratuitamente una copia UBB come phpBB, modificate i file di configurazione per fare in modo che il forum abbia lo stesso schema dì colore delle altre pagine del sito e avrete in men che non si dica un forum di discussione degno dei grandi portali.

TEST- DALLE 22:00 A MEZZANOTTE
La verifica delle pagine dovrebbe essere parte integrante del processo di design di un sito; processo che va dalla progettazione su carta fino alla pubblicazione in Rete. Quindi, l'ideale sarebbe fare dei continui test mentre preparate la grafica, verificando la correttezza dei colori e soprattutto le dimensioni dei file. Effettuate le prove mentre disegnate il layout e scrivete il codice, impostando Dreamweaver in modo che apra la pagina nel vostro browser di riferimento (basta premere F12) appena fate un cambiamento.
Non fate troppo affidamento sul rendering delle pagine di Dreamweaver e non siate troppo sicuri che il codice CSS funzioni allo stesso modo su tutti i browser. Per alcuni aspetti, in questa fase potete ancora chiedere l'aiuto del vostro Web editor. Dreamweaver contiene, ad esempio, delle comode funzioni per verificare la correttezza dei link su tutto il sito, per controllare che tutte le immagini abbiano l'attributo ALT, se ci sono dei tag vuoti e via dicendo. Il software può anche verificare la compatibilità del codice HTML con i vari browser (anche le vecchie versioni), senza dimenticare le diverse piattaforme come Windows e MacOS.
Durante l'upload del sito, scordatevi di tutto e visitatelo come se fosse la prima volta. Fatevi delle domande immedesimandovi nelle "personas" della fase progettuale e cercate di procedere come farebbero loro. Chiedetevi se la navigazione è coerente e se potete tornare indietro alla pagina principale.