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:
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
Salve, sono il corpo di questa pagina Web.
Tutto ciò che viene dopo
è 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
scritto con le maiuscole in un file XHTML non è corretto.Per gli attributi di tag servono le virgolette
Un collegamento scritto, per esempio, così: è valido in HTML, ma non funziona in XHTML. È necessario inserire il valore della proprietà href tra virgolette:
.
Tutti i tag (anche quelli vuoti) devono essere chiusi
Per creare un paragrafo in XHTML, per esempio, è necessario iniziare con
e terminare con
. 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:
. 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
,
e
denotano i titoli e assegnano loro un’importanza relativa: un titolo 1 è più importante di un titolo 2. Il tag
denotano i titoli e assegnano loro un’importanza relativa: un titolo 1 è più importante di un titolo 2. Il tag
indica un paragrafo elementare di informazioni. Altri tag strutturano ulteriormente i contenuti: il tag
- identifica un elenco puntato (per esempio per rendere più leggibile l’elenco degli ingredienti di una ricetta).
- 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).
- 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.
- 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.
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
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.
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.
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.
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).
Il libro “Dreamweaver MX 2004 – Il manuale che non c’è” è disponibile nelle migliori librerie e può essere acquistato online.