Dreamweaver MX 2004 – Il manuale che non c’è

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:

Salve, sono il corpo di questa pagina Web.

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 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 di apertura e il tag di chiusura. Se si fa l’analogia tra la pagina Web e un albero, il tag 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 , 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 , 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 . Alcuni

di questi sono elencati di seguito.

• Il tag

  (tag iniziale del paragrafo) denota l’inizio di un paragrafo di testo, che si chiude al tag

  (tag finale del paragrafo).

• Il tag corrisponde al grassetto. Precede una o più parole che verranno visualizzate in grassetto ed è chiuso dal tag . Lo snippet Hello indica a un browser Web che la parola “Hello” dovrà essere visualizzata in grassetto.

• Il tag , 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 , per esempio così: Fare clic qui!.

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.

fondamentali

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.

Il libro “Dreamweaver MX 2004 – Il manuale che non c’è” è disponibile nelle migliori librerie e può essere acquistato online.