Introduzione

Il World Wide Web continua a evolversi, crescendo in complessità ed estensione; ogni anno nascono nuove tecnologie, frutto del desiderio di migliorare il Web sia nell'aspetto sia nel funzionamento. Anche chi crea siti Web personali si serve di molti linguaggi di programmazione e tecnologie server per diffonderne il contenuto. Nel corso della sua storia, Dreamweaver è riuscito a tenere il passo con questo mutevole paesaggio tecnologico grazie a costanti aggiornamenti.

Dreamweaver MX 2004 non fa eccezione: questo programma è in grado di "collaborare" con sempre più tecnologie. Che si tratti di Active Server Page con funzionalità di database, di Cascading Style Sheet per effetti all'ultimo grido o di semplicissime pagine HTML, Dreamweaver fornisce tutti gli strumenti necessari.

Qualsiasi Web designer intraprendente può creare pagine Web, stili CSS e persino programmi JavaScript con un semplice editor di testi. In effetti, Dreamweaver MX 2004 offre potenti funzionalità di editing di testi per coprire sia la semplicità dei file di testo sia la complessità delle Java Server Page. Ma perché andare incontro a tante difficoltà, quando l'impostazione visiva di Dreamweaver consente di creare siti Web utili, complessi e belli, in modo molto più semplice? Web designer alle prime armi e programmatori HTML esperti e intransigenti, nonché abituati alla codifica manuale, troveranno in Dreamweaver uno strumento potente per la rapida ed efficiente creazione di siti Web, senza scendere a compromessi con la qualità del codice.

Novità di Dreamweaver MX 2004

Chi non ha mai utilizzato Dreamweaver dovrebbe leggere il Capitolo 1, che presenta un'introduzione generale. Chi invece vuole passare da Dreamweaver 4 o da un'altra versione, troverà nella MX 2004 numerose nuove funzioni rivolte sia ai principianti sia agli esperti.

• Dreamweaver MX 2004 offre un miglior riconoscimento dei Cascading Style Sheet. Il programma consente ora di visualizzare la maggior parte delle proprietà CSS, mentre un pannello CSS semplifica l'applicazione degli stili a testi, immagini e collegamenti così come la relativa modifica, senza il bisogno di esaminarne l'anteprima in un browser.
• Creare e modificare gli stili è più semplice. È possibile utilizzare i controlli base di elaborazione dei testi presenti nella finestra di ispezione Proprietà, per formattare il testo e creare nuovi stili CSS contemporaneamente.
• La nuova finestra di ispezione Regola CSS consente di esaminare le regole CSS applicate alla selezione corrente. Di conseguenza, è più semplice intuire come le regole di formattazione interagiscano e comprendere perché gli elementi della pagina hanno un determinato aspetto.
• Per assicurare che le pagine funzionino su un'ampia gamma di browser, è stata migliorata la funzione di convalida dei browser, che avvisa se si sta utilizza codice HTML o CSS che non funziona in determinati browser.
• Importare materiale da Microsoft Word ed Excel è più semplice. È possibile copiare e incollare i dati da documenti Word o Excel preservando la formattazione base, come quella dei paragrafi e dei titoli, oltre al grassetto, al corsivo e al formato degli elenchi. È possibile anche utilizzare un'opzione "Incolla" avanzata, per importare ulteriori opzioni di formattazione, come tipi di carattere e colori.
• Una nuova pagina iniziale semplifica l'apertura dei documenti più recenti, la creazione di nuovi documenti e l'accesso alle guide e ai file dei tutorial.
• I nuovi comandi per PHP/MySQL consentono di proteggere con password i siti in PHP/MySQL.

Suggerimento:

Di tanto in tanto Macromedia pubblica gli aggiornamenti di Dreamweaver. Per essere certi di utilizzare sempre l'ultima versione, si consiglia di visitare il sito Web Macromedia www.macromedia.com/support/dreamweaver/downloads_updaters.html.

HTML, XHTML e CSS: nozioni fondamentali

Sotto la superficie visibile di ogni pagina Web non c'è nient'altro che normalissimo testo, scritto riga dopo riga. Con i suoi semplici comandi chiamati tag, il linguaggio HTML (Hypertext Markup Language) continua a essere il "cuore" della maggior parte del Web.

Il codice HTML che crea una pagina Web può essere semplice come il seguente:

<html>

<head>

<title>Salve, sono il titolo di questa pagina Web.</title>

</head>

<body>

Salve, sono il corpo di questa pagina Web.

</body>

</html>

Per quanto poco eccitante possa sembrare, il frammento qui illustrato è tutto ciò che serve per creare una pagina Web.

Tag e proprietà

Nell'esempio precedente, e a dire il vero nel codice HTML di qualsiasi pagina Web si voglia esaminare, si noterà che la maggior parte dei comandi appare a coppie, con racchiusi un blocco di testo o altri comandi.

Questi comandi tra parentesi costituiscono il "markup" del linguaggio HTML e sono chiamati tag. Inseriti tra i simboli < e >, i tag non sono altro che istruzioni grazie alle quali i browser Web sapranno come visualizzare le informazioni su una pagina Web.

Il tag iniziale di ogni coppia di tag indica l'inizio dell'istruzione, quello finale ne segnala la fine. I tag finali hanno sempre una barra o slash (/) dopo la parentesi aperta (<); la barra denota che si tratta di un tag di chiusura.

Fortunatamente, in Dreamweaver tutti questi tag vengono generati automaticamente: non sarà mai necessario memorizzare o scrivere manualmente questi comandi (anche se a molti programmatori piace farlo per poter avere maggior controllo). È importante capire che, in fondo in fondo, Dreamweaver è un programma che converte il layout visivo in codici come questi.

• Il tag <html> che compare una volta all'inizio della pagina Web e un'altra volta, con la barra, alla fine indica che le informazioni contenute nel documento sono scritte in linguaggio HTML e non in altri linguaggi. Tutto il contenuto di una pagina, compresi gli altri tag, è sempre racchiuso tra il tag <html> di apertura e il tag </html> di chiusura. Se si fa l'analogia tra la pagina Web e un albero, il tag <html> sarebbe il tronco. Dal tronco si dipartono i due rami che rappresentano le due parti principali della pagina Web: intestazione (head) e corpo (body).
• L'intestazione di una pagina Web, racchiusa tra tag <head>, contiene il titolo della pagina. Potrebbe ospitare anche altre informazioni invisibili (per esempio le parole chiave per le ricerche) che servono ai browser e ai motori di ricerca del Web. L'intestazione può inoltre contenere informazioni utilizzate dal browser Web per la visualizzazione della pagina e per maggiore interattività. Le informazioni sui CSS (Cascading Style Sheet), che servono per la formattazione del testo e di altri elementi, possono essere definite nell'intestazione del documento (Capitolo 6). Inoltre, script JavaScript, funzioni e variabili possono essere dichiarate in quest'area. I comportamenti Dreamweaver (Capitolo 12) realizzano i propri effetti interattivi grazie al codice JavaScript che viene inserito nell'intestazione della pagina.
• Il corpo di una pagina Web, racchiuso tra i tag <body>, contiene tutte le informazioni che appaiono nella finestra del browser: titoli, testo, immagini ecc. In Dreamweaver il corpo è rappresentato dall'area bianca vuota della finestra del documento e assomiglia alla finestra vuota di un programma di elaborazione testi.

La maggior parte del lavoro svolto in Dreamweaver riguarda l'inserimento e la formattazione di testo, immagini e altri oggetti nel corpo del documento. Molti tag normalmente utilizzati nelle pagine Web appaiono all'interno del tag <body>. Alcuni di questi sono elencati di seguito.

• Il tag <p> (tag iniziale del paragrafo) denota l'inizio di un paragrafo di testo, che si chiude al tag </p> (tag finale del paragrafo).
• Il tag <strong> corrisponde al grassetto. Precede una o più parole che verranno visualizzate in grassetto ed è chiuso dal tag </strong>. Lo snippet <strong>Hello</strong> indica a un browser Web che la parola "Hello" dovrà essere visualizzata in grassetto.
• Il tag <a>, detto anche tag di ancoraggio, crea un collegamento (ipertestuale) in una pagina Web. Un collegamento può portare ovunque nel Web. Come si fa a dire al browser dove andare? Basta fornire maggiori istruzioni all'interno di tag <a>, per esempio così: <a href="http://www.missingmanuals.com">Fare clic qui!</a>.
  
  Il browser saprà che, quando un visitatore fa clic su "Fare clic qui!", dovrà andare al sito Web dell'edizione statunitense di questo libro. La parte href del tag si chiama, in gergo Dreamweaver, proprietà (a volte anche attributo) e l'URL (Universal Resource Locator o indirizzo Web), in questo esempio http://www.missingmanuals.com, è il valore della proprietà href.

Fortunatamente, Dreamweaver esonera il designer dal compito di scrivere questi codici manualmente e propone una finestra di facile utilizzo, chiamata finestra di ispezione Proprietà, in cui aggiungere le proprietà ai tag e agli altri elementi della pagina. Per creare i collegamenti alla maniera di Dreamweaver (cioè in modo semplice), si veda il Capitolo 4.

Linguaggio XHTML

Come qualsiasi tecnologia, infatti, anche HTML accusa il passare del tempo. Per quanto abbia svolto bene la propria funzione, resta comunque un linguaggio limitato. Nei propri tag ammette maiuscole, minuscole e sia maiuscole che minuscole, <body> e <BODY> sono entrambi corretti, e riconosce anche i tag non chiusi, tanto che è possibile inserire un unico tag <p> (senza il </p> di chiusura) per creare una paragrafo. Ma tanta flessibilità dell'HTML, che semplifica la scrittura delle pagine, rende la vita difficile a browser, palmari e altre tecnologie che devono interagire con i dati presenti sul Web. Inoltre, il linguaggio HTML non va d'accordo con uno dei linguaggi più interessanti e promettenti di Internet: XML (eXtensible Markup Language).

Per stare al passo dei tempi, si sta facendo sempre più strada una versione migliorata dell'HTML, chiamata XHTML. Anche qui Dreamweaver MX 2004 è all'avanguardia: con questo programma è possibile creare e lavorare con file XHTML. Chi conosce solo l'HTML non deve preoccuparsi; il linguaggio XHTML non è rivoluzionario. È sostanzialmente lo stesso HTML cui vengono applicate direttive un po' più rigide. Ecco come sarebbe, scritto in XHTML, il codice di una semplice pagina HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Salve, sono il titolo di questa pagina Web.</title>

</head>

<body>

Salve, sono il corpo di questa pagina Web.

</body>

</html>

Tutto ciò che viene dopo <head> è esattamente uguale alla pagina HTML. Le informazioni all'inizio, tuttavia, indicano in che modo la pagina può riconoscere gli standard cui è conforme. In questo caso dicono semplicemente che la pagina è un tipo di documento XML, specificatamente un documento XHTML (tutto questo codice viene scritto automaticamente da Dreamweaver quando si crea una nuova pagina XHTML).

Il codice vero e proprio utilizzato per creare questa pagina è molto simile all'HTML. Perché un file XHTML sia conforme a XML, tuttavia, è necessario rispettare alcune regole.

Iniziare la pagina con una dichiarazione del tipo del documento e un namespace. Sono le primissime righe del listato precedente e servono solo per indicareil tipo di documento, puntando a file del Web che contengono le definizioni di questo tipo di file.

Tag e attributi di tag devono essere scritti in lettere minuscole. A differenza dell'HTML, il tag <BODY> scritto con le maiuscole in un file XHTML non è corretto.

Per gli attributi di tag servono le virgolette. Un collegamento scritto, per esempio, così: <a href=http://www.missingmanual.com> è valido in HTML, ma non funziona in XHTML. È necessario inserire il valore della proprietà href tra virgolette:

<a href="http://www.missingmanual.com">.

Tutti i tag (anche quelli vuoti) devono essere chiusi. Per creare un paragrafo in XHTML, per esempio, è necessario iniziare con <p> e terminare con </p>. Alcuni tag non sono accoppiati. Questi tag, chiamati "tag vuoti", non hanno il tag di chiusura. Un esempio è l'interruzione di riga. Per chiudere un tag vuoto è necessario inserire una barra al termine del tag, in questo modo: <br />. Se tutto sembra un po' confuso, niente paura! Queste severe regole XHTML sono tutte integrate in Dreamweaver e creare una pagina XHTML con gli strumenti visivi di Dreamweaver non sarà molto diverso dal creare una pagina HTML vecchio stile.

Aggiunta di stili con i CSS

Un tempo era necessario conoscere soltanto il linguaggio HTML per creare pagine con testi e immagini, mettendo in risalto le parole con font, dimensioni e colori diversi. Oggi, invece, i fogli di stile CSS (Cascading Style Sheets) sono diventati indispensabili per creare siti Web complessi. I CSS si basano su un linguaggio di formattazione che serve a migliorare l'aspetto del testo, realizzare layout sofisticati e sostanzialmente conferire uno stile al proprio sito.

Si pensi al linguaggio HTML come al responsabile della strutturazione della pagina e dei contenuti che essa contiene. Tag come <h1>, <h2> e <h3> denotano i titoli e assegnano loro un'importanza relativa: un titolo 1 è più importante di un titolo 2. Il tag <p> indica un paragrafo elementare di informazioni. Altri tag strutturano ulteriormente i contenuti: il tag <ul> identifica un elenco puntato (per esempio per rendere più leggibile l'elenco degli ingredienti di una ricetta).

I CSS, dal canto loro, aggiungono il "design" al contenuto strutturato da HTML, rendendolo più gradevole risiedono proprio nei CSS. Sostanzialmente, uno stile CSS è semplicemente una regola che indica al browser come visualizzare un determinato elemento sulla pagina: per esempio, rende un titolo <h1> alto 36 pixel, lo visualizza nel carattere Verdana e gli conferisce un colore arancione. I CSS sono anche più potenti di quanto potrebbe sembrare fin qui. Essi consentono di aggiungere bordi, cambiare i margini e persino controllare esattamente la posizione di un elemento su una pagina. Se si vuole diventare un Web designer, è indispensabile conoscere i CSS.

Fondamenti

Questo libro contiene pochissimo gergo o terminologia specifici dei fanatici dei computer. Vi si incontrano, tuttavia, alcuni termini e concetti molto diffusi in campo informatico.

• Clic. Questo libro propone tre tipi di istruzione che presuppongono l'utilizzo del mouse o del trackpad. Fare clic significa puntare il cursore a freccia su un elemento sullo schermo e, senza muoverlo, premere e rilasciare il tasto del mouse (o il trackpad sul portatile). Fare doppio clic, naturalmente, significa fare clic due volte in rapida successione, anche qui senza spostare il cursore. Trascinare significa spostare il cursore tenendo contemporaneamente premuto il tasto del mouse.
• Scorciatoie da tastiera. Ogni volta che si toglie la mano dalla tastiera per spostare il mouse si perde tempo e, in teoria, si interrompe il flusso creativo. Ecco perché molti patiti del computer che hanno maturato una buona esperienza preferiscono utilizzare combinazioni di tasti invece dei comandi di menu. Ctrl+B (C+B), per esempio, corrisponde allo stile grassetto in Dreamweaver (e nella maggior parte dei programmi).
  
  Le scorciatoie come Ctrl+S (C+S) (che salva le modifiche apportate al documento corrente) indicano che è necessario tenere premuto il tasto Ctrl o C e, con il tasto premuto, premere la lettera S, quindi rilasciare entrambi i tasti.
• La scelta è positiva. Dreamweaver offre spesso vari modi alternativi in cui eseguire lo stesso comando: un comando da menu oppure un clic su un pulsante della barra degli strumenti oppure ancora una combinazione da tastiera. Alcuni preferiscono la velocità delle combinazioni da tastiera, altri la soddisfazione di vedere i comandi disponibili in menu o su barre degli strumenti. In questo libro vengono elencate tutte le alternative, senza che sia comunque necessario memorizzarle.

Informazioni sul libro

Nonostante gli innumerevoli miglioramenti apportati ai prodotti software nel corso degli anni, un aspetto è andato inesorabilmente peggiorando: la documentazione.

Quando si acquista un programma software, nella maggior parte dei casi non si riceve nemmeno una semplice pagina di istruzioni scritte. Per conoscere le tantissime funzioni disponibili nel programma, ci si aspetta che l'utente utilizzi la guida elettronica in linea. Anche se qualcuno si trova bene a leggere la guida a schermo, aperta in una finestra mentre lavora in un'altra, qualcosa manca. A volte, le misere schermate della guida presuppongono che l'utente sappia già di cosa si tratti e saltano tranquillamente argomenti importanti che richiedono invece una descrizione approfondita. Inoltre, non sempre si ha una valutazione obiettiva delle funzioni del programma (i tecnici aggiungono spesso caratteristiche sofisticate perché possono, non perché ne sussista la necessità). È bene non perdere tempo a imparare funzioni che, all'atto pratico, non servono a nulla.

Scopo di questo libro è allora quello di fungere da manuale, quel manuale che avrebbe dovuto essere inserito nella confezione. In questo libro vengono proposte istruzioni passo-passo che descrivono tutte le funzioni di Dreamweaver, comprese quelle che forse non appaiono chiare né, tanto meno, sono capite a fondo, come le Librerie, la vista Layout, i comportamenti e gli strumenti per siti Web dinamici. Inoltre, di ogni funzione viene fornita un'attenta valutazione che consente di stabilire quali sono utili e come e quando utilizzarle.

Questo libro si rivolge a lettori di ogni livello tecnico. Le esposizioni principali sono scritte per utenti intermedi o principianti già avanzati. Chi è proprio alle prime armi troverà informazioni di carattere introduttivo, utili per comprendere l'argomento, nei riquadri Approfondimento. Gli utenti avanzati, invece, dovranno dare un occhio ai riquadri di uguale colore ma chiamati L'angolo degli esperti, in cui vengono descritti suggerimenti e trucchetti più tecnici.

Macintosh e Windows

Dreamweaver MX 2004 funziona praticamente in modo identico sia in Macintosh sia in Windows. Tutti i pulsanti delle finestre di dialogo sono uguali, e identica è la reazione del programma a ogni comando. In questo libro le illustrazioni godono di parità di trattamento e sono presenti in ugual misura per entrambi i sistemi operativi per cui Dreamweaver è stato sviluppato (Windows XP e Mac OS X). Una delle principali differenze tra la versione per Mac e quella per Windows sono le combinazioni da tastiera, dove il tasto Ctrl di Windows corrisponde al tasto C di Macintosh.

Quando viene indicata una combinazione di tasti, comparirà prima quella di Windows (con il segno +, come consuetudine nella documentazione Windows), seguita da quella per Macintosh tra parentesi (con il segno -, tipico dell'ambiente Mac). In altre parole, si troverà: "La combinazione da tastiera per il salvataggio dei file è Ctrl+S (C-S)".

Struttura del libro

Questo manuale è diviso in sei parti, ciascuna ripartita in capitoli.

• Nella Parte prima, Creazione di una pagina Web, viene descritta l'interfaccia di Dreamweaver e vengono spiegati i passaggi fondamentali della creazione di una pagina Web. Si spiega come aggiungere testo e formattarlo, collegare più pagine e abbellire i layout con la grafica.
• La Parte seconda, Creazione di una pagina Web più complessa, porta a un livello di approfondimento maggiore e spiega come assumere un controllo più preciso sul layout delle pagine. Si vedrà come utilizzare le funzioni più avanzate, tra cui tabelle, livelli, Cascading Style Sheet e frame. Inoltre, vengono proposte procedure passo passo in cui è spiegato come utilizzare la vista Layout e come osservare e lavorare con il codice HTML di una pagina.
• Nella Parte terza, Dare vita alle proprie pagine, viene spiegato come aggiungere interattività al sito. Dai moduli utilizzati per raccogliere informazioni sui visitatori all'aggiunta di programmi JavaScript, in questa parte si trovano tutte le informazioni su come aggiungere animazione, multimedialità e altri effetti interattivi.
• La Parte quarta, Realizzazione di un sito Web, è il cuore del libro: la gestione di pagine e file del sito Web, il collaudo di collegamenti e pagine e lo spostamento del sito sul server Web collegato a Internet. Dal momento che non sempre si lavora da soli, in questa parte viene spiegato anche come collaborare con team di sviluppatori.
• La Parte quinta, Potenza di Dreamweaver, spiega come sfruttare le funzioni salvatempo quali Librerie, Modelli e pannello Cronologia. Viene inoltre descritto Extension Manager, programma che può integrare Dreamweaver con centinaia di nuove funzioni gratuite.
• La Parte sesta, Dreamweaver dinamico, presenta un'introduzione al mondo spesso confuso e complesso dei siti Web basati su database. Si imparerà come creare un sito Web dinamico, collegare Dreamweaver a un database e utilizzare Dreamweaver per realizzare pagine in grado di visualizzare informazioni su database, nonché aggiungere, modificare e cancellare record di database.

Chiude il libro un'appendice con l'elenco di risorse Internet per ulteriori approfondimenti sul Web design. Sul sito Missing Manual si trova un'appendice gratuita e prelevabile: la spiegazione di tutti i comandi di Dreamweaver MX 2004, menu per menu, della versione per Windows e di quella per Macintosh.

Esempi concreti

Questo libro è stato concepito per aiutare il lettore a lavorare sul Web in modo più veloce e più professionale; è quindi scontato che gran parte del valore di questo libro risieda sul Web. Leggendo i capitoli del libro, si incontreranno vari tutorial, esercitazioni passo passo che possono essere realizzate con materiale grezzo (come immagini e pagine Web semifinite), che si possono scaricare dall'URL www.sawmac.com/dwmx2004/.

Se si trova il tempo di eseguire queste esercitazioni al computer, si scoprirà che esse forniscono una prospettiva veramente unica sull'operatività di Web designer professionisti. Nelle esercitazioni descritte nel libro è indicato anche l'URL delle pagine finite, utili da confrontare con quelle realizzate personalmente. Quindi, non solo la produzione Dreamweaver sarà visibile nelle pagine del libro, ma le pagine Web vere e proprie saranno anche disponibili in Internet.

MissingManuals.com

Al sito Web missingmanuals.com si trovano articoli, suggerimenti e aggiornamenti del libro in inglese. Si invita il lettore a sottoporre correzioni e aggiornamenti personali. Nel tentativo di tenere il libro il più possibile aggiornato e preciso, a ogni ristampa verranno apportate anche le correzioni proposte e confermate. Le stesse modifiche verranno annotate al sito Web, in modo che il lettore, volendo, le possa inserire nella propria copia del libro (per vedere le modifiche, fare clic sul nome del libro e poi sul collegamento Errata).