Dw8 Getting Started

Guida introduttiva di Dreamweaver
Marchi di fabbrica 1 Step RoboPDF, ActiveEdit, ActiveTest, Authorware, Blue Sky Software, Blue Sky, Breeze, Breezo, Captivate, Central, ColdFusion, Contribute, Database Explorer, Director, Dreamweaver, Fireworks, Flash, FlashCast, FlashHelp, Flash Lite, FlashPaper, Flex, Flex Builder, Fontographer, FreeHand, Generator, HomeSite, JRun, MacRecorder, Macromedia, MXML, RoboEngine, RoboHelp, RoboInfo, RoboPDF, Roundtrip, Roundtrip HTML, Shockwave, SoundEdit, Studio MX, UltraDev e WebHelp sono marchi registrati o marchi di Macromedia, Inc. e possono essere registrati negli Stati Uniti o in altre giurisdizioni, anche a livello internazionale. Altri nomi di prodotti, logo, disegni, titoli, parole o frasi citati in questa pubblicazione possono essere marchi registrati, marchi di servizio o nomi commerciali di Macromedia, Inc. o di altre societ e possono essere registrati in alcune giurisdizioni, anche a livello internazionale. Informazioni di terze parti Questo manuale contiene collegamenti a siti Web di terze parti che non sono sotto il controllo di Macromedia. Macromedia non potr quindi essere ritenuta responsabile per i contenuti di qualsiasi sito collegato. Qualora si decida di accedere a un sito Web di terze parti menzionato nel presente documento, lo si far sotto la propria completa responsabilit e a proprio rischio. Tali collegamenti sono inclusi nella presente Guida solo per la loro utilit e ci non implica che Macromedia approvi il loro contenuto o se ne assuma la responsabilit. Browser Opera Copyright 1995-2002 di Opera Software ASA e dei suoi fornitori. Tutti i diritti riservati. Copyright 1997-2005 Macromedia, Inc. Tutti i diritti riservati. Nessuna parte del presente manuale pu essere copiata, fotocopiata, riprodotta, tradotta o convertita in qualsiasi formato elettronico o meccanico senza lautorizzazione scritta di Macromedia, Inc. Nonostante quanto sopra specificato, il proprietario o lutente autorizzato di una copia valida del software fornito con il presente manuale autorizzato a stampare una copia del manuale da una versione elettronica allunico scopo di apprendimento di tale software da parte del proprietario o dellutente autorizzato, a condizione che nessuna parte del presente manuale venga stampata, riprodotta, distribuita, rivenduta o trasmessa per qualsiasi altro scopo, inclusi, senza limitazioni, scopi commerciali quali la vendita di copie della presente documentazione o lofferta di servizi di assistenza a pagamento. Numero Parte ZDW80M100T Contributi Responsabile: Charles Nadeau Scritto da: Jon Michael Varese Redazione: Rosana Francescato, Lisa Stanziano, Evelyn Eldridge, Mark Nigara Responsabili editing e produzione: Patrice ONeill e Rosana Francescato Produzione e progetto multimediale: Adam Barnett, Aaron Begley, Paul Benkman, John Francis, Geeta Karmarkar, Paul Rangel, Arena Reed, Mario Reynoso Responsabile localizzazione: Melissa Baerwald Controllo qualit localizzazione: Lucy Romero. Un ringraziamento speciale a Sheila McGinn, Jennifer Rowe, Jay Armstrong, Sally Sadosky, Jennifer Taylor, Paul Gubbay,Melissa Baerwald, Sami Kaied, Jung Choi, Masayo Noda, Kristin Conradi, Yuko Yagi e ai team di progettazione e QA di Dreamweaver. Prima edizione: settembre 2005 Macromedia, Inc. 601 Townsend St. San Francisco, CA 94103
Indice
PARTE 1: INTRODUZIONE A DREAMWEAVER Introduzione . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11 Funzionalit di Dreamweaver 8. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Novit di Dreamweaver 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Installazione di Dreamweaver 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Registrazione di Dreamweaver 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Convenzioni tipografiche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Capitolo 1: Visita guidata di Dreamweaver. . . . . . . . . . . . . . . . . . . 15 Da dove iniziare . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 Utilizzo ottimale della documentazione di Dreamweaver . . . . . . . . . . 20 Utilizzo della Guida in linea di Dreamweaver . . . . . . . . . . . . . . . . . . . . . 24 Capitolo 2: Elementi fondamentali di Dreamweaver . . . . . . . . . 29 Informazioni sullarea di lavoro di Dreamweaver 8 . . . . . . . . . . . . . . . . 29 Personalizzazione dellarea di lavoro di Dreamweaver 8 . . . . . . . . . . . 41 Esecuzione di operazioni di base in Dreamweaver 8 . . . . . . . . . . . . . . 44
PARTE 2: ESERCITAZIONI Capitolo 3: Esercitazione: Impostazione del sito e dei file di progetto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 Informazioni sui siti di Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 Impostazione dei file del progetto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 Definizione di una cartella locale. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 Capitolo 4: Esercitazione: Creazione di un layout di pagina basato su tabella . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 Esame della bozza di progettazione . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 Creazione e salvataggio di una nuova pagina . . . . . . . . . . . . . . . . . . . . . 61 Inserimento delle tabelle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Impostazione delle propriet della tabella . . . . . . . . . . . . . . . . . . . . . . . . 66 Inserimento di un segnaposto immagine . . . . . . . . . . . . . . . . . . . . . . . . . .71 Aggiunta di colore alla pagina. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 Capitolo 5: Esercitazione: Aggiunta del contenuto alle pagine . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 Individuare i file. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 Valutazione del lavoro da svolgere . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 Inserimento di immagini . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 Inserimento e riproduzione di un file Flash. . . . . . . . . . . . . . . . . . . . . . . . 88 Inserimento di contenuto Flash Video . . . . . . . . . . . . . . . . . . . . . . . . . . . 91 Inserire il testo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95 Creazione di collegamenti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100 Anteprima della pagina in un browser . . . . . . . . . . . . . . . . . . . . . . . . . . . .101 Capitolo 6: Esercitazione: formattazione della pagina con i fogli di stile CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 Individuare i file. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 Valutazione del lavoro da svolgere . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 Informazioni sui CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 Creazione di un nuovo foglio di stile . . . . . . . . . . . . . . . . . . . . . . . . . . . . .110 Collegamento di un foglio di stile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .112 Esplorazione del pannello Stili CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . .114 Creazione di una nuova regola CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 Applicazione di uno stile di classe al testo . . . . . . . . . . . . . . . . . . . . . . . 120 Formattazione del testo della barra di navigazione . . . . . . . . . . . . . . . .121 (Facoltativo) Centrare i contenuti della pagina . . . . . . . . . . . . . . . . . . . 132 Capitolo 7: Esercitazione: Pubblicazione del sito . . . . . . . . . . . . 135 Informazioni sui siti remoti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135 Definizione di una cartella remota . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 Caricamento dei file locali . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139 Risoluzione dei problemi di impostazione della cartella remota (facoltativo) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
PARTE 3: ESERCITAZIONI AVANZATE Capitolo 8: Esercitazione: Operazioni con il codice . . . . . . . . . . 145 Visualizzazione del codice. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
Indice
Accesso allarea di lavoro per la gestione del codice (solo per Windows) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .148 Aggiunta di un tag con il Selettore tag . . . . . . . . . . . . . . . . . . . . . . . . . . .148 Modifica di un tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151 Ricerca di informazioni relative a un tag . . . . . . . . . . . . . . . . . . . . . . . . .153 Aggiunta di unimmagine con Suggerimenti codice . . . . . . . . . . . . . . .154 Verifica delle modifiche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157 Stampa del codice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157 Capitolo 9: Esercitazione: Creazione di un layout di pagina basato su CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159 Informazioni sul layout di pagina basato su CSS. . . . . . . . . . . . . . . . . .160 Esame della bozza di progettazione . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161 Creazione e salvataggio di una nuova pagina . . . . . . . . . . . . . . . . . . . .163 Inserimento di livelli . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .164 Aggiunta di colore alla pagina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179 Capitolo 10: Esercitazione: Visualizzazione di dati XML . . . . . . 183 Individuare i file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .184 Valutazione del lavoro da svolgere . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .185 Informazioni sulluso di XML e XSL nelle pagine Web. . . . . . . . . . . . .186 Informazioni sulle pagine XSLT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .189 Conversione di una pagina da HTML a XSLT . . . . . . . . . . . . . . . . . . . .190 Collegamento di unorigine dati XML alla pagina XSLT . . . . . . . . . . . 191 Modificare il layout della pagina XSLT . . . . . . . . . . . . . . . . . . . . . . . . . .192 Associazione di dati XML alla pagina XSLT. . . . . . . . . . . . . . . . . . . . . .195 Applicazione di stili ai dati XML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .196 Creare un collegamento dinamico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .198 Aggiunta di un oggetto XSLT Area ripetuta . . . . . . . . . . . . . . . . . . . . . 200 Collegare la pagina XSLT alla pagina XML . . . . . . . . . . . . . . . . . . . . . 202 Informazioni riguardanti ulteriori opzioni di trasferimento . . . . . . . . . 204 Capitolo 11: Esercitazione: Sviluppo di unapplicazione Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207 Prima di iniziare. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208 Valutazione del lavoro da svolgere . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209 Apertura del documento da modificare . . . . . . . . . . . . . . . . . . . . . . . . . .210 Definizione di un recordset. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .212 Visualizzazione dei record del database . . . . . . . . . . . . . . . . . . . . . . . . .216 Aggiunta di campi dinamici alla tabella . . . . . . . . . . . . . . . . . . . . . . . . . .218 Impostazione di unarea ripetuta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .219
Indice
Visualizzazione della pagina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220 Creazione di un modulo di inserimento record . . . . . . . . . . . . . . . . . . 220 Copia dei file sul server. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .226 Approfondimenti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
PARTE 4: APPENDICI Appendice A: Nozioni sulle applicazioni Web . . . . . . . . . . . . . . . 231 Informazioni sulle applicazioni Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231 Funzionamento di unapplicazione Web . . . . . . . . . . . . . . . . . . . . . . . .233 Authoring di pagine dinamiche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .239 Scelta di una tecnologia server. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241 Terminologia per le applicazioni Web . . . . . . . . . . . . . . . . . . . . . . . . . . .242 Appendice B: Installazione di un server Web . . . . . . . . . . . . . . 247 Guida introduttiva . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .248 Installazione di Internet Information Server . . . . . . . . . . . . . . . . . . . . . .248 Verifica di IIS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249 Verifica del server Web Macintosh (sviluppatori PHP) . . . . . . . . . . . 250 Elementi fondamentali dei server Web . . . . . . . . . . . . . . . . . . . . . . . . . 250 Appendice C: Configurazione di un sito ColdFusion di esempio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253 Elenchi di impostazioni per gli sviluppatori ColdFusion . . . . . . . . . . .253 Configurazione del sistema (ColdFusion) . . . . . . . . . . . . . . . . . . . . . . 254 Definizione di un sito di Dreamweaver (ColdFusion). . . . . . . . . . . . . 260 Connessione al database di esempio (ColdFusion) . . . . . . . . . . . . . . .266 Appendice D: Configurazione di un sito ASP.NET di esempio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271 Elenchi di impostazioni per gli sviluppatori ASP.NET . . . . . . . . . . . . . 271 Configurazione del sistema (ASP.NET) . . . . . . . . . . . . . . . . . . . . . . . . . 272 Definizione di un sito Dreamweaver (ASP.NET) . . . . . . . . . . . . . . . . . 276 Connessione al database di esempio (ASP.NET) . . . . . . . . . . . . . . . . 281 Appendice E: Configurazione di un sito ASP di esempio. . . . . 285 Elenco di impostazioni per gli sviluppatori ASP . . . . . . . . . . . . . . . . . .286 Configurazione del sistema (ASP). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287 Definizione di un sito Dreamweaver (ASP) . . . . . . . . . . . . . . . . . . . . . . 291 Connessione al database di esempio (ASP) . . . . . . . . . . . . . . . . . . . . .297
Indice
Appendice F: Configurazione di un sito JSP di esempio . . . . . . 301 Elenco di impostazioni per gli sviluppatori JSP . . . . . . . . . . . . . . . . . . 302 Configurazione del sistema (JSP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302 Definizione di un sito di Dreamweaver (JSP). . . . . . . . . . . . . . . . . . . . 306 Connessione al database di esempio (JSP). . . . . . . . . . . . . . . . . . . . . .312 Appendice G: Configurazione di un sito PHP di esempio . . . . . 317 Elenchi di impostazioni per gli sviluppatori PHP . . . . . . . . . . . . . . . . . .318 Configurazione del sistema (PHP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .318 Definizione di un sito Dreamweaver (PHP) . . . . . . . . . . . . . . . . . . . . . 327 Connessione al database di esempio (PHP) . . . . . . . . . . . . . . . . . . . . 333 Indice analitico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337
Indice
Indice
PARTE 1
Introduzione a Dreamweaver
La prima parte di questo manuale include una presentazione di Macromedia Dreamweaver 8 con informazioni sullinstallazione e una panoramica dellarea di lavoro. Fornisce inoltre un elenco delle risorse disponibili per lapprendimento di Dreamweaver. Questa parte contiene le sezioni seguenti:
Introduzione . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Visita guidata di Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 Elementi fondamentali di Dreamweaver . . . . . . . . . . . . . . . . . . . . . .29
Introduzione
Macromedia Dreamweaver 8 un editor HTML professionale per la progettazione, la codifica e lo sviluppo di siti, pagine e applicazioni Web. Che si prediliga linserimento manuale del codice HTML oppure si preferisca operare in un ambiente di modifica visuale, Dreamweaver fornisce strumenti utili che semplificano lattivit di progettazione di pagine Web. Questa guida rappresenta unintroduzione alluso di Macromedia Dreamweaver 8 per gli utenti che non abbiano familiarit con le principali funzioni del programma. Le esercitazioni della guida assistono lutente nel processo di creazione di un sito Web semplice ma funzionale. In questo capitolo vengono trattati i seguenti argomenti:
Funzionalit di Dreamweaver 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Novit di Dreamweaver 8. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Installazione di Dreamweaver 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Registrazione di Dreamweaver 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Convenzioni tipografiche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
11
Funzionalit di Dreamweaver 8
Le funzioni di modifica visuale di Dreamweaver consentono di creare rapidamente pagine senza scrivere codice. possibile visualizzare tutti gli elementi o le risorse del sito e trascinarli da un pannello di facile utilizzo direttamente nel documento. Lo sviluppo pu essere inoltre ottimizzato creando e modificando le immagini in Macromedia Fireworks o in unaltra applicazione grafica, e quindi importandole direttamente in Dreamweaver. In Dreamweaver sono inoltre disponibili strumenti che facilitano laggiunta di risorse Flash alle pagine Web. In aggiunta alle funzioni di trascinamento che facilitano la creazione di pagine Web, in Dreamweaver disponibile un ambiente di codifica completo di tutte le funzioni, quali la codifica del codice tramite colori, il completamento dei tag, una barra strumenti di codifica e la compressione del codice, e materiale di riferimento per fogli di stile CSS (Cascading Style Sheets), JavaScript, ColdFusion Markup Language (CFML) e altri linguaggi. La tecnologia Roundtrip HTML di Macromedia consente di importare i documenti HTML con codice inserito a mano senza riformattare il codice; si pu quindi scegliere di riformattare il codice con lo stile preferito. Dreamweaver consente inoltre di creare applicazioni Web dinamiche supportate da database per mezzo di tecnologie server quali CFML, ASP.NET, ASP, JSP e PHP. Se si preferisce utilizzare i dati XML, Dreamweaver include strumenti che consentono di creare con facilit pagine XSLT, associare file XML e visualizzare dati XML nelle pagine Web create. Dreamweaver offre ampie possibilit di personalizzazione. possibile creare oggetti e comandi personalizzati, modificare le scelte rapide da tastiera e perfino utilizzare JavaScript per estendere le funzionalit di Dreamweaver con nuovi comportamenti, finestre di ispezione Propriet e rapporti sui siti. Per maggiori informazioni sulle risorse disponibili per lapprendimento di Dreamweaver, vedere il Capitolo 1, Visita guidata di Dreamweaver, a pagina 15.
12
Introduzione
Novit di Dreamweaver 8
Dreamweaver 8 include molte nuove funzionalit che facilitano la costruzione di siti e applicazioni Web in tempi sempre pi ridotti e con sforzi ancora minori. Grazie a Dreamweaver, tecnologie complesse diventano semplici e accessibili, consentendo di creare pi elementi in meno tempo. Lelenco seguente include alcune delle principali novit di Dreamweaver 8:

Strumento Zoom e relative guide Associazione visiva dei dati XML Nuovo pannello Stili CSS Visualizzazione layout CSS Compressione codice Barra degli strumenti Codifica Trasferimento file in background Inserisci comando Flash Video
Per un elenco completo e una descrizione delle nuove funzioni di Dreamweaver 8, vedere Novit di Dreamweaver 8 in Uso di Dreamweaver (? > Uso di Dreamweaver [Windows]; Aiuto > Uso di Dreamweaver [Macintosh]).
Installazione di Dreamweaver 8
In questa sezione viene illustrato come installare Dreamweaver. importante leggere anche le note sulla versione, che contengono le informazioni e istruzioni pi recenti, disponibili sul sito Web di Macromedia allindirizzo http://www.macromedia.com/go/ dw_documentation_it.
Per installare Dreamweaver:
1.
Inserire il CD-ROM di Dreamweaver nellunit CD-ROM del computer. Effettuare una delle seguenti operazioni:
2.
In Windows, il programma di installazione di Dreamweaver si avvia automaticamente.
Installazione di Dreamweaver 8
13
In ambiente Macintosh, fare doppio clic sullicona del programma di installazione di Dreamweaver, visualizzata sul desktop.
3.
Seguire le istruzioni a video. Il programma di installazione richiede di immettere le informazioni necessarie.
4.
Se richiesto, riavviare il computer.
Registrazione di Dreamweaver 8
Per ottenere un livello di supporto aggiuntivo da Macromedia, consigliabile registrare la copia di Macromedia Dreamweaver 8, elettronicamente o tramite posta. Con la registrazione possibile ottenere informazioni tempestive sugli aggiornamenti e i nuovi prodotti Macromedia. inoltre possibile ricevere segnalazioni via e-mail sugli aggiornamenti e sui nuovi contenuti dei siti Web www.macromedia.com e www-euro.macromedia.com.
Per registrare Macromedia Dreamweaver 8, eseguire una delle operazioni seguenti:

Selezionare ? > Registrazione in linea e compilare il modulo elettronico. Selezionare ? > Stampa registrazione, stampare il modulo e inviarlo allindirizzo indicato sullo stesso.
Convenzioni tipografiche
In questa guida sono state adottate le seguenti convenzioni tipografiche:
Le voci di menu vengono riportate nel formato: nome menu > nome voce di menu. Le voci di sottomenu vengono riportate nel formato: nome menu > nome sottomenu > nome voce di menu.
Carattere di codice:
indica i nomi degli attributi e dei tag HTML, nonch il testo utilizzato negli esempi.
Carattere di codice corsivo: indica gli elementi sostituibili, detti anche metasimboli, allinterno del codice.
Carattere Roman grassetto: indica il testo esatto che deve essere inserito dallutente.
14
Introduzione
CAPITOLO 1
Visita guidata di Dreamweaver

Macromedia Dreamweaver 8 include varie risorse che facilitano il rapido apprendimento del programma e consentono di diventare esperti nella realizzazione di pagine Web. Tutta la documentazione di Dreamweaver disponibile sia nella Guida in linea che in formato PDF. In questo capitolo vengono trattati i seguenti argomenti:
Da dove iniziare . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 Utilizzo ottimale della documentazione di Dreamweaver . . . . . . . 20 Utilizzo della Guida in linea di Dreamweaver . . . . . . . . . . . . . . . . . . 24
Da dove iniziare
La documentazione di Dreamweaver si rivolge a utenti con livelli di esperienza diversi. Questa sezione aiuta a capire come consultare la documentazione, a seconda del proprio livello di esperienza e di ci che si desidera creare con Dreamweaver. In questa sezione vengono trattati i seguenti argomenti:

Principianti della progettazione Web a pagina 15 Web designer esperti a pagina 16 Utenti esperti nellinserimento manuale di codice a pagina 18 Sviluppatori di applicazioni Web a pagina 19
Principianti della progettazione Web

Per gli utenti poco esperti della progettazione Web, questa sezione suggerisce gli argomenti della documentazione Dreamweaver pi indicati da approfondire.
15
Per i principianti della progettazione Web:

1.
Per iniziare, vedere il Capitolo 2, Elementi fondamentali di Dreamweaver, a pagina 29. Quindi proseguire eseguendo le esercitazioni in questo manuale. Le esercitazioni sono suddivise in due sezioni. Le prime cinque sono per principianti e guidano lutente attraverso tutte le diverse fasi del processo di sviluppo di un piccolo ma funzionale sito Web. La seconda sezione di esercitazioni unintroduzione a concetti pi avanzati. Si consiglia di non affrontare le esercitazioni pi avanzate prima di aver acquisito una certa esperienza nella creazione di pagine Web. In Uso di Dreamweaver (? > Uso di Dreamweaver), viene fornita una panoramica di ci che si appreso mediante la Guida introduttiva di Dreamweaver consultando il Capitolo 1, Area di lavoro, Capitolo 2, Impostazione di un sito Dreamweaver, Capitolo 4, Gestione dei file, e Capitolo 3, Creazione e apertura dei documenti. La lettura del Capitolo 7, Creazione del layout delle pagine con i fogli di stile CSS, e Capitolo 8, Presentazione dei contenuti mediante tabelle in Uso di Dreamweaver consente di acquisire informazioni relative al layout delle pagine. Per informazioni su come formattare il testo e inserire immagini nelle pagine, leggere il Capitolo 13, Inserimento e formattazione del testo, e Capitolo 14, Inserimento di immagini in Uso di Dreamweaver. Queste informazioni sono sufficienti per iniziare a creare siti Web di alta qualit. Per imparare a utilizzare gli strumenti pi avanzati, consultare nellordine gli altri capitoli sulle pagine statiche in Uso di Dreamweaver. Si consiglia di leggere i capitoli sulle pagine dinamiche in un secondo momento, quando si avr una maggiore familiarit con la creazione di pagine Web.
2.
3.
4.
5.
Web designer esperti

Per i Web designer esperti, questa sezione suggerisce gli argomenti della documentazione Dreamweaver pi indicati da approfondire. Sono disponibili due approcci differenti: uno per i designer che non conoscono Dreamweaver e uno per coloro che hanno familiarit con questo programma ma desiderano conoscere nuove tecniche sulla creazione di pagine dinamiche di Dreamweaver.
16
Per i Web designer esperti che usano Dreamweaver per la prima volta:
1.
Per iniziare, vedere le esercitazioni nella Guida introduttiva di Dreamweaver. In Uso di Dreamweaver, (? > Uso di Dreamweaver), consultare il Capitolo 1, Area di lavoro per ulteriori informazioni sullinterfaccia utente di Dreamweaver. Le informazioni nel Capitolo 2, Impostazione di un sito Dreamweaver e Capitolo 4, Gestione dei file risulteranno probabilmente note, ma si consiglia di leggerle comunque rapidamente per vedere come questi concetti vengono implementati in Dreamweaver. Prestare particolare attenzioni alle sezioni relative allimpostazione di un sito Dreamweaver. Per informazioni utili su come utilizzare Dreamweaver per creare pagine HTML di base, consultare il Capitolo 13, Inserimento e formattazione del testo e Capitolo 14, Inserimento di immagini. Per informazioni sullutilizzo delle funzioni di codifica in Dreamweaver, vedere il Capitolo 19, Impostazione dellambiente di codifica,, Capitolo 20, Codifica in Dreamweaver,, Capitolo 21, Ottimizzazione e debug del codice, e Capitolo 22, Modifica del codice nella vista Progettazione. Leggere la panoramica allinizio dei successivi capitoli della guida Uso di Dreamweaver per determinare se gli argomenti trattati sono di proprio interesse.
2.
3.
4.
5.
6.
Per i Web designer esperti, che conoscono bene Dreamweaver e desiderano ottenere ulteriori informazioni sulla creazione di pagine dinamiche:
1.
Per iniziare, vedere lAppendice A, Nozioni sulle applicazioni Web, a pagina 231 e il Capitolo 11, Esercitazione: Sviluppo di unapplicazione Web, a pagina 207. Nella guida Uso di Dreamweaver (? > Uso di Dreamweaver), leggere velocemente il Capitolo 1, Area di lavoro per informazioni sui nuovi aspetti dellinterfaccia utente di Dreamweaver, quindi leggere il Capitolo 30, Ottimizzazione dellarea di lavoro per lo sviluppo visivo. Per acquisire dimestichezza con il flusso di lavoro di Dreamweaver per le pagine dinamiche, leggere il Capitolo 31, Flusso di lavoro per la progettazione di pagine dinamiche.
2.
3.
Da dove iniziare
17
4.
Impostare un server Web e un server applicazioni. Vedere Capitolo 23, Impostazione di unapplicazione Web. Connessione a un database. Vedere Connessione a un database nel Capitolo 23, Impostazione di unapplicazione Web. Leggere la panoramica allinizio dei successivi capitoli della guida Uso di Dreamweaver per capire se gli argomenti trattati sono di proprio interesse.
5.
6.
Utenti esperti nellinserimento manuale di codice

Per gli utenti esperti nellinserimento manuale di codice, questa sezione suggerisce gli argomenti della documentazione Dreamweaver pi indicati da approfondire.
Per gli utenti esperti nellinserimento manuale di codice:
1.
Per iniziare, leggere il Capitolo 8, Esercitazione: Operazioni con il codice nella Guida introduttiva di Dreamweaver. Nella guida Uso di Dreamweaver, (? > Uso di Dreamweaver), consultare il Capitolo 1, Area di lavoro per ulteriori informazioni sullinterfaccia utente di Dreamweaver. Le informazioni nel Capitolo 2, Impostazione di un sito Dreamweaver e Capitolo 4, Gestione dei file risulteranno probabilmente note, ma si consiglia di leggerle comunque rapidamente per vedere come questi concetti vengono implementati in Dreamweaver. Prestare particolare attenzioni alle sezioni relative allimpostazione di un sito Dreamweaver. Per ulteriori informazioni sul codice in Dreamweaver, vedere il Capitolo 19, Impostazione dellambiente di codifica,, Capitolo 20, Codifica in Dreamweaver, Capitolo 21, Ottimizzazione e debug del codice, e Capitolo 22, Modifica del codice nella vista Progettazione. Leggere la panoramica allinizio dei successivi capitoli della guida Uso di Dreamweaver per capire se gli argomenti trattati sono di proprio interesse.
2.
3.
4.
5.
18
Sviluppatori di applicazioni Web

Per gli sviluppatori di applicazioni Web, questa sezione suggerisce gli argomenti della documentazione Dreamweaver pi indicati da approfondire. Sono disponibili due approcci differenti, basati sul livello di esperienza nelluso di Dreamweaver.
Per gli sviluppatori di applicazioni Web che non hanno mai utilizzato Dreamweaver:
1.
Iniziare leggendo velocemente la Guida introduttiva di Dreamweaver per acquisire familiarit con gli elementi di base delluso di Dreamweaver. Nella guida Uso di Dreamweaver, (? > Uso di Dreamweaver), consultare il Capitolo 1, Area di lavoro per ulteriori informazioni sullinterfaccia utente di Dreamweaver. Le informazioni nel Capitolo 2, Impostazione di un sito Dreamweaver e Capitolo 4, Gestione dei file risulteranno probabilmente note, ma si consiglia di leggerle comunque rapidamente per vedere come questi concetti vengono implementati in Dreamweaver. Prestare particolare attenzioni alle sezioni relative allimpostazione di un sito Dreamweaver. Impostare un server Web e un server applicazioni utilizzando Dreamweaver. Vedere Capitolo 23, Impostazione di unapplicazione Web. Connessione a un database. Vedere Connessione a un database nel Capitolo 23, Impostazione di unapplicazione Web. Leggere la panoramica allinizio dei successivi capitoli della guida Uso di Dreamweaver per determinare se gli argomenti trattati sono di proprio interesse.
2.
3.
4.
5.
6.
Per gli sviluppatori di applicazioni Web che hanno gi utilizzato Dreamweaver.

1.
Per iniziare, vedere Novit di Dreamweaver 8 in Uso di Dreamweaver (? > Uso di Dreamweaver). La sezione "Novit" si trova in , Introduzione. Leggere rapidamente il Capitolo 1, Area di lavoro per informazioni sulle novit dellinterfaccia utente di Dreamweaver.
2.
Da dove iniziare
19
Utilizzo ottimale della documentazione di Dreamweaver

Dreamweaver include numerose risorse che consentono di orientarsi rapidamente allinterno del programma e di acquisire dimestichezza con la creazione di pagine Web. Il sistema della Guida in linea di Dreamweaver comprende diversi documenti che consentono di apprendere luso di Dreamweaver, di estensibilit di Dreamweaver e di ColdFusion. Sono inoltre disponibili varie risorse online aggiuntive consultabili durante lapprendimento relativo alla creazione di pagine Web.
Accesso alla documentazione di Dreamweaver

La seguente tabella riassume la documentazione inclusa nel sistema della Guida in linea di Dreamweaver. possibile acquistare versioni cartacee dei titoli selezionati. Per maggiori informazioni, collegarsi allindirizzo www.macromedia.com/go/ buy_books.
Titolo
Guida introduttiva di Dreamweaver
Descrizione/ Destinatari
Dove trovarlo
Visualizzazione in Fornisce Dreamweaver: unintroduzione ai Selezionare ? > Guida concetti e introduttiva di Dreamweaver allinterfaccia di Dreamweaver, con Visualizzazione online: http:// livedocs.macromedia.com/go/ esercitazioni livedocs_dreamweaver_it/ dettagliate per Formato PDF: principianti. www.macromedia.com/go/ Destinato a dw_documentation_it principianti ma anche utenti intermedi e avanzati che desiderino informazioni sulle nuove funzioni.
20
Titolo
Uso di Dreamweaver
Dove trovarlo
Visualizzazione in Informazioni Dreamweaver: Selezionare ? > complete su tutte le Guida in linea di Dreamweaver funzioni di o ? > Uso di Dreamweaver Dreamweaver. Visualizzazione online: http:// Destinato a tutti gli livedocs.macromedia.com/go/ utenti di livedocs_dreamweaver_it/ Dreamweaver. Formato PDF: www.macromedia.com/go/ dw_documentation_it Descrive la struttura Visualizzazione in Dreamweaver: generale di Selezionare ? > Estensione di Dreamweaver e le Dreamweaver API (Application Visualizzazione online: http:// Programming livedocs.macromedia.com/go/ Interface). livedocs_dreamweaver_it/ Destinato agli utenti Formato PDF: avanzati che www.macromedia.com/go/ desiderino creare dw_documentation_it estensioni o personalizzare linterfaccia di Dreamweaver. Visualizzazione in Descrive lAPI Dreamweaver: dellutilit e lAPI Selezionare ? > Guida di JavaScript, che riferimento alle API di facilitano Dreamweaver lesecuzione di varie Visualizzazione online: http:// attivit di supporto livedocs.macromedia.com/go/ allo sviluppo delle livedocs_dreamweaver_it/ estensioni di Formato PDF: Dreamweaver. www.macromedia.com/go/ Destinato agli utenti dw_documentation_it avanzati che desiderino creare estensioni o personalizzare linterfaccia di Dreamweaver.
Estensione di Dreamweaver
Guida di riferimento alle API di Dreamweaver
21
Titolo
Dove trovarlo
Visualizzazione in Uso di ColdFusion Comprende una Dreamweaver: selezione dei Selezionare ? > Uso di documenti pi ColdFusion importanti relativi Visualizzazione online: http:// alluso di livedocs.macromedia.com/go/ ColdFusion. La livedocs_coldfusion/ documentazione www.macromedia.com/go/ completa cf_documentation disponibile su www.macromedia.com/go/ LiveDocs. cf_documentation Destinato a chiunque sia interessato a ColdFusion, dal principiante allutente avanzato. Riferimenti Include vari manuali Visualizzazione in Dreamweaver: di riferimento sul Selezionare ? > Riferimenti. Per linguaggio HTML, un elenco completo dei sui modelli di server manuali fare clic sul menu a e altri argomenti, comparsa Libro nel pannello per lo pi editi da Riferimenti. OReilly. Destinato a chiunque sia interessato a informazioni aggiuntive sulla sintassi della programmazione, sui concetti e cos via.
22
Accesso a risorse online aggiuntive relative a Dreamweaver

La tabella seguente include un breve elenco delle risorse online utili per lapprendimento di Dreamweaver.
Risorsa
Centro di supporto per Dreamweaver
Note tecniche, supporto e informazioni per la risoluzione di problemi per gli utenti di Dreamweaver. Articoli ed esercitazioni per migliorare e ampliare le proprie conoscenze.
Dove trovarlo
www.macromedia.com/go/ dreamweaver_support_it
Centro per sviluppatori Macromedia
www.macromedia.com/go/ developer_dw_it
Centro di documentazione Dreamweaver
Fornisce manuali in www.macromedia.com/go/ formato PDF, errori dw_documentation_it di stampa, esercitazioni e note sulla versione. www.macromedia.com/go/ Discussioni e dreamweaver_newsgroup scambi di informazioni per la risoluzione di problemi tra utenti di Dreamweaver, rappresentanti del supporto tecnico e il team di sviluppo di Dreamweaver. Corsi con esercitazioni pratiche e scenari basati su situazioni reali. www.macromedia.com/go/ dreamweaver_training_it
Forum online Macromedia
Formazione Macromedia
23
Utilizzo della Guida in linea di Dreamweaver

La Guida in linea, accessibile dal menu ? del programma, contiene informazioni dettagliate su tutte le operazioni che possibile eseguire con Dreamweaver. Per un elenco dei documenti disponibili nella Guida in linea, fare riferimento a Accesso alla documentazione di Dreamweaver a pagina 20. In questa sezione vengono trattati i seguenti argomenti:

Apertura della Guida in linea a pagina 24 Ricerche nella Guida in linea a pagina 25 Uso dellindice a pagina 25 Modifica delle dimensioni del carattere a pagina 26 Uso della pagina iniziale a pagina 26 Stampa della documentazione di Dreamweaver a pagina 27 Documentazione di Dreamweaver con LiveDocs a pagina 27
Apertura della Guida in linea

possibile accedere alla guida in linea del prodotto direttamente da Dreamweaver.
Per aprire la Guida in linea di Dreamweaver:
Selezionare ? > Guida Dreamweaver.
24
Ricerche nella Guida in linea

possibile effettuare ricerche nellintero contenuto della Guida in linea di Dreamweaver.
Per eseguire una ricerca nella Guida in linea (Windows):
1. 2.
Nella Guida di Dreamweaver, fare clic sulla scheda Cerca. Digitare una parola o una frase nella casella di testo, quindi fare clic su Elenca argomenti. Fare doppio clic su un argomento nellelenco dei risultati per visualizzarlo.
S U GG E R I M E N T O
3.
Per eseguire una ricerca nella Guida in linea (Macintosh):

1.
Nella Guida in linea di Dreamweaver, digitare una parola o una frase nella casella di testo Ask a Question (Fai una domanda), quindi premere Invio. Fare doppio clic su un argomento nellelenco dei risultati per visualizzarlo.
per cercare una frase specifica, racchiuderla tra virgolette doppie.
2.
Uso dellindice
Lindice consente di trovare rapidamente le informazioni desiderate.
Per utilizzare lindice (Windows):
1. 2.
Nella Guida di Dreamweaver, fare clic sulla scheda Indice. Scorrere fino alla voce desiderata nellelenco alfabetico e fare doppio clic per visualizzare largomento corrispondente.
B
Per utilizzare lindice (Macintosh):

1.
S UG G E R I ME N T O
Nella Guida di Dreamweaver, fare clic sul collegamento Indice nel sommario. Fare clic su una lettera e scorrere il testo fino alla voce desiderata nellelenco. Fare clic sul numero accanto alla voce per visualizzare largomento corrispondente.
2.
3.
possibile iniziare a scrivere una parola chiave nella casella di testo per raggiungere rapidamente una voce di indice.
25
Modifica delle dimensioni del carattere

possibile modificare le dimensioni del carattere utilizzato nella Guida in linea.
Per modificare le dimensioni del carattere nel visualizzatore della guida in linea di Windows:
1.
Aprire Internet Explorer. Le dimensioni del carattere nel visualizzatore della guida in linea di Windows sono impostate in Internet Explorer.
2.
Selezionare Visualizza > Dimensioni testo e quindi selezionare un valore.
Per modificare le dimensioni del carattere nel visualizzatore della guida in linea Apple:
Nella guida in linea, selezionare Modifica > Riduci dimensione carattere, o Modifica > Aumenta dimensione carattere.
Uso della pagina iniziale

Quando Dreamweaver viene avviato senza aprire un documento, nellarea di lavoro viene visualizzata la pagina iniziale. La pagina iniziale consente di accedere rapidamente alle esercitazioni di Dreamweaver, ai file recenti e a Dreamweaver Exchange, dove possibile aggiungere nuove funzioni al programma. Il funzionamento della pagina iniziale simile a quello di una pagina Web. Per utilizzare le funzioni visualizzate sufficiente fare clic su di esse.
Per disattivare la pagina iniziale:
1.
Avviare Dreamweaver senza aprire un documento. Viene visualizzata la pagina iniziale. Fare clic su Non visualizzare di nuovo.
2.
26
Stampa della documentazione di Dreamweaver

I seguenti manuali sono disponibili in formato PDF nel sito Web di Macromedia allindirizzo http://www.macromedia.com/go/ dw_documentation_it:

Uso di Dreamweaver Guida introduttiva di Dreamweaver Estensione di Dreamweaver Guida di riferimento alle API di Dreamweaver
possibile stampare il PDF per intero o in parte utilizzando la propria stampante oppure rivolgendosi a un centro stampa.
Documentazione di Dreamweaver con LiveDocs

La documentazione di Dreamweaver disponibile anche online in formato LiveDocs. La versione LiveDocs della Guida in linea di Dreamweaver apparentemente molto simile a quella del prodotto, ma consente di commentare i contenuti delle singole pagine della guida. possibile aggiungere informazione utili su un argomento specifico relativo a Dreamweaver in base alla propria esperienza o richiedere supporto ad altri progettisti e sviluppatori che utilizzano Dreamweaver. La documentazione LiveDocs di Dreamweaver disponibile allindirizzo http://livedocs.macromedia.com/go/livedocs_dreamweaver_it/
27
28
CAPITOLO 2
Elementi fondamentali di Dreamweaver

Per unesperienza di utilizzo ottimale di Macromedia Dreamweaver 8, consigliabile comprendere gli elementi base dellarea di lavoro di Dreamweaver. In questo capitolo vengono illustrati gli elementi dellarea di lavoro pi importanti e pi comunemente utilizzati e viene indicato come eseguire alcune operazioni di base in Dreamweaver. Questo capitolo contiene le seguenti sezioni:
Informazioni sullarea di lavoro di Dreamweaver 8 . . . . . . . . . . . . . 29 Personalizzazione dellarea di lavoro di Dreamweaver 8 . . . . . . . 41 Esecuzione di operazioni di base in Dreamweaver 8. . . . . . . . . . . 44
Informazioni sullarea di lavoro di Dreamweaver 8

Larea di lavoro di Dreamweaver consente di esaminare le propriet dei documenti e degli oggetti. Include anche la maggior parte delle operazioni comuni nelle barre degli strumenti in modo da poter modificare velocemente i documenti. Questa sezione pensata per fornire una panoramica dellarea di lavoro di Dreamweaver 8. Per informazioni pi complete su ognuno degli elementi dellarea di lavoro descritti in questa sezione, fare riferimento a Capitolo 1, Area di lavoro in Uso di Dreamweaver. La sezione contiene i seguenti argomenti:

Layout dellarea di lavoro a pagina 30 Finestra Documento a pagina 32 Barra degli strumenti Documento a pagina 33 Barra di stato a pagina 34 Barra Inserisci a pagina 35
29
Barra degli strumenti Codifica a pagina 37 La finestra di ispezione Propriet a pagina 38 Il pannello File a pagina 39 Il pannello Stili CSS a pagina 40
Layout dellarea di lavoro

In Windows, Dreamweaver fornisce un layout che integra tutti gli elementi in una sola finestra. Nellarea di lavoro integrata, tutte le finestre e i pannelli sono integrati in una sola finestra di applicazione pi grande.
Barra Inserisci Barra degli strumenti Documento Finestra del documento Gruppi di pannelli
Selettore di tag
N OT A
Finestra di ispezione Propriet
Pannello File
larea di lavoro Windows dispone anche dellopzione Coder che, per impostazione predefinita, aggancia i gruppi di pannelli a sinistra e visualizza la finestra Documento nella vista Codice. Per ulteriori informazioni, consultare il Uso dello spazio di lavoro orientato al coder (solo per Windows) in Uso di Dreamweaver. Per utilizzare questa opzione, vedere Scelta del layout dellarea di lavoro (solo per Windows) a pagina 41.
30
In ambiente Macintosh, Dreamweaver in grado di visualizzazione pi documenti in ununica finestra con schede che identificano ogni documento. Dreamweaver pu inoltre essere visualizzato come parte di unarea di lavoro flottante, nella quale ogni documento viene visualizzato in una finestra propria. I gruppi di pannelli sono inizialmente agganciati insieme, ma possibile sganciarli nelle relative finestre. Le finestre si agganciano automaticamente una accanto allaltra ai lati dello schermo e della finestra del documento quando vengono trascinate o ridimensionate.
Barra degli strumenti Documento Finestra del documento Gruppi di pannelli
Barra Inserisci
Selettore di tag
Fnestra di ispezione Propriet
Pannello File
possibile passare da un layout allaltro sia in Windows che in Macintosh. Per ulteriori informazioni, vedere Scelta del layout dellarea di lavoro (solo per Windows) a pagina 41 e Visualizzazione di documenti a schede (solo per Macintosh) a pagina 43.
31
Finestra Documento
La finestra Documento mostra il documento corrente. possibile selezionare una delle viste seguenti: un ambiente per il layout di pagina visivo, la modifica visiva e lo sviluppo rapido di applicazioni. In questa vista, Dreamweaver offre una rappresentazione visiva e modificabile del documento, simile a quella che si otterrebbe guardando la pagina in un browser. un ambiente di codifica manuale per la scrittura e la modifica di codice HTML, JavaScript, linguaggio-server (PHP) o linguaggio CFML (ColdFusion Markup Language) e qualsiasi altro tipo di codice. Per ulteriori informazioni, consultare il Capitolo 20, Codifica in Dreamweaver in Uso di Dreamweaver. che permette di ottenere la vista Codice e la vista Progettazione di un documento in ununica finestra. Quando la finestra Documento ha la barra del titolo, questa visualizza il titolo della pagina e, tra parentesi, il percorso e il nome file. Dopo il nome file, se sono state apportate delle modifiche non ancora salvate, Dreamweaver visualizza un asterisco. Quando la finestra Documento ingrandita nel layout dellarea di lavoro integrata (solo Windows) non ha la barra del titolo: in questo caso, il titolo della pagina appare, insieme al percorso e al nome file, nella barra del titolo della finestra principale dellarea di lavoro. Quando una finestra del documento ingrandita, nella parte superiore vengono visualizzate delle schede che mostrano i nomi file di tutti i documenti aperti. Per visualizzare un documento, fare clic sulla relativa scheda. Per ulteriori informazioni sullutilizzo della finestra del documento, consultare il Capitolo 1, Area di lavoro in Uso di Dreamweaver.
Vista Codice e Progettazione, Vista Codice, Vista Progettazione,
32
Barra degli strumenti Documento

La barra degli strumenti Documento contiene i pulsanti che permettono di cambiare rapidamente la vista del documento: vista Codice, vista Progettazione e una vista combinata che mostra le viste Codice e Progettazione in una sola finestra. Questa barra degli strumenti contiene inoltre alcuni comandi e opzioni comuni relativi alla visualizzazione del documento e al suo trasferimento tra i siti locale e remoto.
Mostra vista Codice Mostra viste Codice e Progettazione Mostra vista Progettazione Nessun browser/controllo errori Convalida codice Gestione file
Debug server
Titolo del documento
Riferimenti visivi Opzioni di visualizzazione Aggiorna vista Progettazione Anteprima/debug nel browser
Nella barra degli strumenti Documento vengono visualizzate le seguenti opzioni:

Mostra vista Codice
visualizza solo la vista Codice nella finestra del
documento.
Mostra viste Codice e Progettazione
Visualizza la vista Codice in una parte della finestra Documento e la vista Progettazione nellaltra. Quando si seleziona questa vista combinata, lopzione Vista Progettazione in primo piano diventa disponibile nel menu Visualizza. Utilizzare questa opzione per specificare quale vista visualizzata in primo piano nella finestra Documento. Visualizza solo la vista Progettazione nella
Mostra vista Progettazione
finestra Documento.
Debug server
Visualizza un rapporto che consente di eseguire con facilit il debug della pagina ColdFusion corrente. Nel rapporto sono riportati gli eventuali errori presenti sulla pagina. Consente di inserire il titolo del documento, che verr visualizzato nella barra del titolo del browser. Se il documento ha gi un titolo, esso compare in questo campo.
Titolo
33
Nessun browser/controllo errori
Consente di controllare la compatibilit
con tutti i browser.

Convalida codice Consente di convalidare il documento corrente o un tag
selezionato.
Gestione file
Visualizza il menu a comparsa Gestione file.
Consente di visualizzare in anteprima o di eseguire il debug del documento in un browser. Selezionare un browser dal menu a comparsa.
Anteprima/debug nel browser Aggiorna vista Progettazione
Aggiorna la vista Progettazione del documento dopo che sono state apportate modifiche in vista Codice. Le modifiche apportate in vista Codice non vengono visualizzate automaticamente in vista Progettazione finch non si eseguono alcune azioni come il salvataggio del file o la selezione di questo pulsante. Consente di impostare le opzioni per la vista Codice e la vista Progettazione, tra cui la vista da visualizzare in primo piano. Le opzioni del menu sono validi per la vista corrente: vista Progettazione, vista Codice o entrambe.
Opzioni di visualizzazione
Riferimenti visivi Consente di utilizzare vari riferimenti visivi per la progettazione delle pagine.
Per ulteriori informazioni sullutilizzo della barra degli strumenti del documento, consultare il Capitolo 1, Area di lavoro in Uso di Dreamweaver.
Barra di stato
La barra di stato presente sul fondo della finestra Documento fornisce informazioni supplementari sul documento in fase di creazione.
Dimensioni e tempo di scaricamento stimato
Selettore di tag
Dimensioni finestra, menu a comparsa Imposta ingrandimento Strumento Zoom Strumento Mano Strumento Seleziona
34
Il selettore di tag visualizza la gerarchia dei tag che contengono la selezione corrente. Fare clic su qualsiasi tag nella gerarchia per selezionare il tag specifico e il relativo contenuto. Fare clic su <body> per selezionare tutto il corpo del documento. Per selezionare gli attributi class o id di un tag nel selettore di tag, fare clic con il pulsante destro del mouse (Windows) o fare clic tenendo premuto il tasto Control (Macintosh) sul tag e selezionare una classe o un ID dal menu di scelta rapida. Il selettore di tag il metodo consigliato per selezione i tag in quanto assicura che il tag venga sempre selezionato in modo preciso. Lo strumento Mano consente di fare clic sul documento e trascinarlo nella finestra del documento. Fare clic sullo strumento Seleziona per disabilitare lo strumento Mano. I menu a comparsa Zoom e Imposta ingrandimento consentono di impostare il livello di ingrandimento del documento. Per ulteriori informazioni, consultare il Ingrandimento e riduzione in Uso di Dreamweaver. Il menu a comparsa Dimensioni finestra (visibile solo nella vista Progettazione) consente di impostare la finestra del documento su dimensioni predefinite o personalizzate. Per ulteriori informazioni, consultare il Ridimensionamento della finestra Documento in Uso di Dreamweaver. Alla destra del menu a comparsa Dimensioni finestra visualizzata la stima della dimensione del documento e del tempo di scaricamento della pagina, compresi tutti i file dipendenti (ad esempio, le immagini o altri file multimediali). Per ulteriori informazioni, consultare il Impostazione delle preferenze relative alle dimensioni e al tempo di scaricamento in Uso di Dreamweaver. Per ulteriori informazioni sullutilizzo della barra di stato, consultare il Capitolo 1, Area di lavoro in Uso di Dreamweaver.
Barra Inserisci
La barra Inserisci contiene una serie di pulsanti che consentono di creare e inserire oggetti come tabelle, livelli e immagini. Quando si passa il puntatore del mouse sopra un pulsante, viene visualizzata la descrizione comandi con il nome del pulsante.
35
I pulsanti sono organizzati in diverse categorie, che possibile passare sul lato sinistro della barra Inserisci. Quando il documento corrente contiene codice server, come i documenti ASP o CFML, vengono visualizzate ulteriori categorie. Allavvio di Dreamweaver, viene visualizzata lultima categoria su cui si stava lavorando.
Alcune categorie dispongono di pulsanti con menu a comparsa. Quando si seleziona unopzione da un menu a comparsa, lopzione diventa lazione predefinita del pulsante. Ad esempio, se si seleziona Segnaposto immagine dal menu a comparsa del pulsante Immagine, la volta successiva che si fa clic sul pulsante Immagine, Dreamweaver inserisce un segnaposto immagine. Ogni volta che si seleziona una nuova opzione dal menu a comparsa, lazione predefinita del pulsante cambia. La barra Inserisci organizzata nelle categorie seguenti: Consente di creare e inserire gli oggetti usati pi di frequente, come ad esempio immagini e tabelle.
Comune Layout
Consente di inserire tabelle, tag div, livelli e frame. possibile scegliere tra tre viste di tabella: Standard (predefinita), Tabelle espanse e Layout. Quando viene selezionata la modalit Layout, possibile usare gli strumenti di layout di Dreamweaver: Disegna cella layout e Disegna tabella layout. Contiene pulsanti che consentono di creare moduli e inserire i relativi elementi.
Moduli
Testo Consente di inserire numerosi tag di formattazione di testo ed elenco, come b, em, p, h1, ul. HTML Consente di inserire tag HTML per filetti orizzontali, testo dei contenuti HEAD, tabelle frame e script. Categorie del codice server
Disponibili solo per le pagine che utilizzano un particolare linguaggio server (ASP, ASP.NET, CFML Basic, CFML Flow, CFML Advanced, JSP e PHP). Ognuna di queste categorie fornisce oggetti di codice server inseribili in vista Codice.
Applicazione
Consente di inserire elementi dinamici come set di record, aree ripetute, moduli inserimento record e aggiornamento record. di inserire elementi Macromedia Flash.
Elementi Flash Consente
36
Preferiti
Consente di raggruppare e organizzare i pulsanti della barra Inserisci pi utilizzati in un unico punto. Per ulteriori informazioni sullutilizzo della barra Inserisci, consultare il Capitolo 1, Area di lavoro in Uso di Dreamweaver.
Barra degli strumenti Codifica

La barra degli strumenti Codifica contiene pulsanti per lesecuzione di operazioni di codifica standard, come comprimere ed espandere le parti di codice selezionate, evidenziare il codice non valido, applicare e rimuovere commenti, applicare un rientro, inserire snippet di codice recenti e altro ancora. La barra degli strumenti Codifica visibile solo in vista Codice ed posizionata in verticale sul lato sinistro della finestra del documento.
possibile nascondere la barra degli strumenti Codifica, ma non sganciarla o spostarla. Per ulteriori informazioni, consultare il Visualizzazione delle barre degli strumenti in Uso di Dreamweaver. Per ulteriori informazioni sullutilizzo della barra degli strumenti Codifica, consultare il Inserimento rapido del codice mediante la barra degli strumenti Codifica in Uso di Dreamweaver.
37
La finestra di ispezione Propriet

La finestra di ispezione Propriet consente di verificare e modificare le propriet pi comuni dellelemento di pagina (oggetto o testo) attualmente selezionato. Il contenuto della finestra di ispezione Propriet varia a seconda dellelemento selezionato. Ad esempio, se si seleziona unimmagine nella pagina, la finestra di ispezione Propriet si modifica per visualizzare le propriet dellimmagine (ad esempio il percorso del file relativo, la larghezza e laltezza dellimmagine, il bordo intorno allimmagine, se disponibile, e cos via).
per impostazione predefinita, la finestra di ispezione Propriet si trova nella parte inferiore dellarea di lavoro, ma possibile agganciarla alla parte superiore. In alternativa, possibile definirla come pannello mobile nellarea di lavoro. Per ulteriori informazioni sullo spostamento della finestra di ispezione Propriet, vedere Aggancio e sgancio dei pannelli e dei gruppi di pannelli in Uso di Dreamweaver. Per ulteriori informazioni sullutilizzo della finestra di ispezione Propriet, vedere Uso della finestra di ispezione Propriet in Uso di Dreamweaver.
38
Il pannello File
Il pannello File viene utilizzato per visualizzare e gestire i file nel proprio sito Dreamweaver.
Quando si visualizzano siti, file o cartelle nel pannello File, possibile modificare la dimensione dellarea di visualizzazione, nonch espandere o comprimere il pannello File. Quando il pannello File compresso, visualizza il contenuto del sito locale, del sito remoto o del server di prova come elenco di file. Quando espanso, visualizza il sito locale e il sito remoto o il server di prova. Il pannello File pu visualizzare inoltre una mappa visiva del sito locale. Per i siti Dreamweaver, possibile personalizzare il pannello File modificando la vista, sia del sito locale che del sito remoto, che viene visualizzata per impostazione predefinita nel pannello compresso. Per ulteriori informazioni sullutilizzo del pannello File, vedere Capitolo 4, Gestione dei file in Uso di Dreamweaver.
39
Il pannello Stili CSS

Il pannello Stili CSS consente di gestire le regole e le propriet CSS che incidono su un elemento di pagina selezionato (modalit Corrente), oppure quelle che hanno effetto sullintero documento (modalit Tutte). Un pulsante di attivazione nella parte superiore del pannello consente di scegliere la modalit desiderata. Il pannello Stili CSS consente inoltre di modificare le propriet CSS in entrambe le modalit.
possibile ridimensionare uno o pi riquadri trascinandone i bordi. In modalit Corrente il pannello Stili CSS suddiviso in tre riquadri: il riquadro Riepilogo per selezione, che visualizza le propriet CSS della selezione corrente, il riquadro Regole, che mostra la posizione delle propriet selezionate (o di una serie di regole a cascata per il tag selezionato, a seconda della selezione effettuata), e il riquadro Propriet che permette di modificare le propriet CSS della regola che definisce la selezione.
40
In modalit Tutte il pannello Stili CSS suddiviso in due riquadri: Tutte le regole (in alto) e Propriet (in basso). Il riquadro Tutte le regole visualizza un elenco delle regole definite nel documento corrente e di quelle definite nei fogli di stile associati; il riquadro Propriet consente di modificare le propriet CSS di qualunque regola selezionata nel riquadro Tutte le regole. Qualsiasi modifica effettuata nel riquadro Propriet viene applicata immediatamente, consentendo di visualizzare unanteprima in tempo reale mentre si lavora. Per ulteriori informazioni sullutilizzo del pannello Stili CSS, vedere Informazioni sul pannello Stili CSS in Uso di Dreamweaver.
Personalizzazione dellarea di lavoro di Dreamweaver 8

Esistono alcune semplici tecniche utilizzabili per personalizzare Dreamweaver in base alle proprie esigenze senza necessariamente dover conoscere codice complesso o modificare file di testo. La sezione contiene i seguenti argomenti:

Scelta del layout dellarea di lavoro (solo per Windows) a pagina 41 Visualizzazione di documenti a schede (solo per Macintosh) a pagina 43 Come nascondere e visualizzare la pagina iniziale a pagina 43
Scelta del layout dellarea di lavoro (solo per Windows)

In Windows, possibile scegliere tra i layout di area di lavoro per designer e per coder. Quando si avvia Dreamweaver per la prima volta, viene visualizzata una finestra di dialogo che consente di scegliere un layout per larea di lavoro. possibile passare a unarea di lavoro diversa in qualsiasi momento.
41
Per scegliere un layout di area di lavoro la prima volta che si avvia Dreamweaver:
1.
Scegliere uno dei seguenti layout:

Designer: unarea di lavoro integrata che utilizza MDI (Multiple Document Interface, interfaccia documenti multipli), in cui tutte le finestre del documento e i pannelli sono integrati in una finestra dellapplicazione pi grande, con i gruppi di pannelli agganciati nella parte destra. Coder:
la stessa area di lavoro integrata, ma con i gruppi di pannelli agganciati a sinistra, in una disposizione simile a quella utilizzata da Macromedia HomeSite e Macromedia ColdFusion Studio, e con la finestra del documento che mostra la vista Codice per impostazione predefinita.
NO TA
In entrambi i layout possibile agganciare i gruppi di pannelli sul lato preferito dellarea di lavoro. 2.
Fare clic su OK.
Per passare a unaltra area di lavoro dopo avere effettuato la scelta:
Selezionare Finestra > Layout area di lavoro, quindi selezionare il layout desiderato.
Oltre a selezione Coder e Designer, possibile selezionare Schermo doppio. Se si dispone di un monitor secondario, Schermo doppio visualizza tutti i riquadri su di esso, mantenendo la finestra del documento sul monitor primario.
42
Visualizzazione di documenti a schede (solo per Macintosh)

In ambiente Macintosh, Dreamweaver in grado di visualizzazione pi documenti in ununica finestra con schede che identificano ogni documento. Dreamweaver pu inoltre visualizzarli allinterno di unarea di lavoro flottante, nel quale ogni documento viene visualizzato in una finestra propria.
Per aprire un documento a schede in una finestra distinta:
Fare clic con il pulsante destro del mouse o tenendo premuto il tasto Control sulla scheda e selezionare Sposta nella nuova finestra dal menu di scelta rapida.
Per combinare documenti separati nelle finestre a schede:
Selezionare Finestra > Combina come schede.
Per modificare limpostazione predefinita per i documenti a schede:

1.
Selezionare Dreamweaver > Preferenze, e quindi selezionare la categoria Generali. Selezionare o deselezionare Apri documenti in schede, quindi fare clic su OK.
2.
N OT A
quando si modificano le preferenze, la visualizzazione dei documenti gi aperti rimane inalterata, mentre i documenti aperti in seguito vengono visualizzati in base alla nuova preferenza selezionata.
Come nascondere e visualizzare la pagina iniziale

La pagina iniziale di Dreamweaver viene visualizzata allavvio di Dreamweaver e quando non ci sono documenti aperti. possibile scegliere di nascondere la pagina iniziale e di visualizzarla, se necessario, in seguito. Quando la pagina iniziale nascosta e non ci sono documenti aperti, viene visualizzata la finestra del documento vuota.
43
Per nascondere la pagina iniziale:
Selezionare la casella di controllo Non visualizzare di nuovo nella pagina iniziale. La pagina iniziale non viene pi visualizzata quando si avvia Dreamweaver o si apre e chiude un documento.
Per visualizzare la pagina iniziale:

1.
Selezionare Modifica > Preferenze (Windows) o Dreamweaver > Preferenze (Macintosh). Viene visualizzata la finestra di dialogo Preferenze con la categoria Generali.
2.
Selezionare la casella di controllo Mostra pagina iniziale. La pagina iniziale viene nuovamente visualizzata quando si avvia Dreamweaver o si apre e chiude un documento.
Esecuzione di operazioni di base in Dreamweaver 8

Questa sezione spiega come eseguire alcune operazioni di base come la creazione, lapertura e il salvataggio dei file, Per ulteriori informazioni, consultare il Capitolo 3, Creazione e apertura dei documenti in Uso di Dreamweaver. La sezione contiene i seguenti argomenti:

Informazioni sui file di Dreamweaver a pagina 44 Creazione di nuovi file in Dreamweaver a pagina 46 Salvataggio di file in Dreamweaver a pagina 47 Apertura di file in Dreamweaver a pagina 47
Informazioni sui file di Dreamweaver

In Dreamweaver possibile lavorare con vari tipi di file. Il tipo di file fondamentale utilizzato il file HTML. I file HTML, o Hypertext Markup Language, includono il linguaggio basato sui tag responsabile della visualizzazione di una pagina Web in un browser. possibile salvare i file HTML con estensione .html o .htm. Per impostazione predefinita, Dreamweaver salva i file utilizzando lestensione .html.
44
Alcuni dei tipi di file pi comuni che possibile utilizzare in Dreamweaver sono indicati di seguito: I file CSS o Cascading Style Sheet, hanno estensione css. Sono utilizzati per formattare i contenuti HTML e controllare il posizionamento dei vari elementi di una pagina. Per ulteriori informazioni sullutilizzo di questi tipi di file, vedere Nozioni sui fogli di stile CSS (Cascading Style Sheet) in Uso di Dreamweaver. File GIF, o Graphics Interchange Format, hanno estensione gif. Il formato GIF un formato per la grafica Web molto diffuso per sequenze animate, immagini con aree trasparenti e animazioni. I file GIF contengono un massimo di 256 colori. File JPEG, o Joint Photographic Experts Group (dal nome dellorganizzazione che ha creato questo formato), hanno estensione jpg e generalmente rappresentano immagini fotografiche o a elevati contenuti cromatici. Il formato JPEG la scelta ottimale per le fotografie digitali o scansionate, le immagini che utilizzano texture, le immagini con transizioni di colori sfumati o qualsiasi immagine che richieda pi di 256 colori. File XML, o Extensible Markup Language, hanno estensione xml. Includono dati in forma non elaborata che possono essere formattati tramite il linguaggio XSL (Extensible Stylesheet Language). Per ulteriori informazioni sullutilizzo di questi tipi di file, vedere Capitolo 36, Visualizzazione di dati XML nelle pagine Web in Uso di Dreamweaver. File XSL, o Extensible Stylesheet Language, hanno estensione xsl o xslt. Sono utilizzati per applicare stili ai dati XML che si desidera visualizzare in una pagina Web. Per ulteriori informazioni sullutilizzo di questi tipi di file, vedere Capitolo 36, Visualizzazione di dati XML nelle pagine Web in Uso di Dreamweaver. File CFML, o ColdFusion Markup Language, hanno estensione cfm. Sono utilizzati per lelaborazione delle pagine dinamiche. Per ulteriori informazioni sullutilizzo di questi tipi di file, vedere Capitolo 40, Creazione rapida di applicazioni ColdFusion in Uso di Dreamweaver. File ASPX, o ASP.NET, hanno estensione aspx. Sono utilizzati per lelaborazione delle pagine dinamiche. Per ulteriori informazioni sullutilizzo di questi tipi di file, vedere Capitolo 41, Creazione rapida di applicazioni ASP.NET in Uso di Dreamweaver.
45
File PHP, o PHP: Hypertext Preprocessor, hanno estensione php. Sono utilizzati per lelaborazione delle pagine dinamiche. Per ulteriori informazioni sullutilizzo di questi tipi di file, vedere Capitolo 43, Creazione rapida di applicazioni PHP in Uso di Dreamweaver.
Creazione di nuovi file in Dreamweaver

In questa sezione viene illustrato come creare un nuovo documento vuoto in Dreamweaver. inoltre possibile creare documenti nuovi in Dreamweaver basati su un file di struttura di Dreamweaver o su un modello esistente. Per ulteriori informazioni, consultare il Creazione di nuovi documenti in Uso di Dreamweaver.
Per creare un nuovo documento vuoto:
1.
Selezionare File > Nuovo. Viene visualizzata la finestra di dialogo Nuovo documento. La scheda Generali gi selezionata.
2.
Dallelenco Categoria, selezionare Pagina di base, Pagina dinamica, Pagina modello, Altro oppure Set di frame, quindi, dallelenco a destra, selezionare il tipo di documento che si desidera creare. Ad esempio, per creare un documento HTML selezionare Pagina di base, per creare un documento ColdFusion o ASP selezionare Pagina dinamica e cos via. Per ulteriori informazioni sulle opzioni di questa finestra di dialogo, fare clic sul pulsante ? nella finestra di dialogo.
3.
Fare clic sul pulsante Crea. Il nuovo documento viene aperto nella finestra del documento. Salvare il documento (vedere Salvataggio di file in Dreamweaver a pagina 47).
4.
46
Salvataggio di file in Dreamweaver

Quando si crea un nuovo documento, necessario salvarlo.
Per salvare un nuovo documento:
1. 2.
Selezionare File > Salva. Nella finestra di dialogo visualizzata, scorrere fino alla cartella nella quale si desidera salvare il file. Nella casella di testo Nome file, digitare un nome per il file. Evitare di inserire spazi e caratteri speciali nel nome dei file e delle cartelle e di iniziare un nome file con un numerale. In particolare, non utilizzare caratteri speciali (ad esempio, , o ) o segni di interpunzione (come punto e virgola, barre o punti) nei nomi dei file che si prevede di caricare sul server remoto, poich molti server modificano questi caratteri al momento del caricamento, causando linterruzione dei collegamenti ai file.
3.
sarebbe opportuno salvare il file in un sito Dreamweaver. Per ulteriori informazioni, vedere il Capitolo 3, Esercitazione: Impostazione del sito e dei file di progetto, a pagina 51.
4.
Fare clic su Salva.
Apertura di file in Dreamweaver

In Dreamweaver, possibile aprire e modificare i documenti con grande facilit.
Per aprire un file:
1. 2.
Selezionare File > Apri. Nella finestra di dialogo Apri, selezionare il file e fare clic su Apri.
47
48
PARTE 2
Esercitazioni
La seconda parte di questo manuale include cinque esercitazioni chiave che guidano lutente attraverso la procedura di creazione di una pagina Web. La pagina Web diventer alla fine la pagina principale di Cafe Townsend, un ristorante fittizio. Questa parte contiene le sezioni seguenti:
Esercitazione: Impostazione del sito e dei file di progetto. . . . . . . 51 Esercitazione: Creazione di un layout di pagina basato su tabella . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .59 Esercitazione: Aggiunta del contenuto alle pagine . . . . . . . . . . . . . 77 Esercitazione: formattazione della pagina con i fogli di stile CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 Esercitazione: Pubblicazione del sito. . . . . . . . . . . . . . . . . . . . . . . . 135
49
CAPITOLO 3
Esercitazione: Impostazione del sito e dei file di progetto

Questa esercitazione presenta le caratteristiche principali di un sito Macromedia Dreamweaver 8 e illustra come impostare i file di progetto per il sito Web di esempio Cafe Townsend. In Dreamweaver, solitamente un sito composto di due parti: una raccolta di file su un computer locale (il sito locale) e una posizione su un server Web remoto in cui si caricano i file che si desidera pubblicare (il sito remoto). Utilizzare il pannello File di Dreamweaver per gestire i file del sito. Lapproccio pi comune per la creazione di un sito Web in Dreamweaver consiste nel creare e modificare le pagine sul disco locale, quindi nel caricarne delle copie su un server Web remoto per visualizzarne in linea. Lesercitazione spiega solo come configurare il sito locale per iniziare immediatamente a creare pagine Web. Successivamente, una volta completato il sito Web, viene illustrato come creare un sito remoto per caricare i file su un server Web. Vengono illustrate le seguenti operazioni:
Informazioni sui siti di Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . 52 Impostazione dei file del progetto . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 Definizione di una cartella locale . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
51
Informazioni sui siti di Dreamweaver

In Dreamweaver, il termine sito pu essere riferito a un sito Web o a un percorso di memorizzazione locale dei documenti appartenenti a un sito Web. Il percorso di memorizzazione deve essere stabilito prima di iniziare la creazione del sito Web. Un sito di Dreamweaver consente di organizzare tutti i documenti associati al sito Web, nonch di gestire i collegamenti, organizzare e condividere i file e trasferire i file del sito su un server Web.
NO T A
gli utenti di Macromedia HomeSite e ColdFusion Studio possono considerare un sito Dreamweaver come un progetto di HomeSite o Studio.
Un sito Dreamweaver costituito al massimo da tre parti, a seconda dellambiente e del tipo di sito Web in corso di sviluppo: Per cartella locale si intende la cartella di lavoro. In Dreamweaver viene indicata come sito locale. In genere la cartella locale una cartella presente nel disco rigido. Per cartella remota si intende la posizione di memorizzazione dei file, a seconda dellambiente, per la verifica, la produzione, la collaborazione e cos via. In Dreamweaver viene chiamata sito remoto. La cartella remota una cartella presente nel computer su cui in esecuzione il server Web. Il computer che esegue il server Web spesso, ma non sempre, quello che rende disponibile sil sito al pubblico sul Web. La cartella per le pagine dinamiche (cartella Server di prova) la cartella in cui Dreamweaver elabora le pagine dinamiche. Questa cartella coincide spesso con la cartella remota. Non necessario preoccuparsi di questa cartella a meno che non si stia sviluppando unapplicazione Web. Per ulteriori informazioni sulla cartella del server di prova, vedere Specificazione del percorso di elaborazione delle pagine dinamiche in Uso di Dreamweaver.
52
Per impostare un sito Dreamweaver possibile utilizzare la procedura guidata Definizione del sito, che guida lutente attraverso le fasi del processo di impostazione, oppure le Impostazioni avanzate di definizione del sito, che consentono di impostare le cartelle locali, remote e di prova singolarmente, secondo necessit. Nel corso dellesercitazione vengono utilizzate le impostazioni Avanzate di Definizione del sito per impostare una cartella locale per i file del progetto. In una parte successiva della guida, viene illustrato come impostare una cartella remota per pubblicare le pagine su un server Web e renderle disponibili ai visitatori. Per ulteriori informazioni sullutilizzo della procedura guidata di Definizione sito per impostare un sito Dreamweaver, vedere Impostazione di un nuovo sito Dreamweaver in Uso di Dreamweaver. Per ulteriori informazioni su come impostare un sito remoto, fare riferimento al Capitolo 7, Esercitazione: Pubblicazione del sito. Per ulteriori informazioni sui siti di Dreamweaver in generale, vedere Impostazione di un sito di Dreamweaver in Uso di Dreamweaver.
Impostazione dei file del progetto

Quando si crea un sito locale, possibile inserire le risorse esistenti, come le immagini o altre parti di contenuto, nella cartella principale del sito locale (la cartella principale del sito). In tal modo le risorse saranno gi disponibili al momento di aggiungere contenuto alle pagine del sito. I file di esempio forniti con Dreamweaver contengono risorse destinate al sito Web di esempio da creare nel corso delle esercitazioni della Guida introduttiva di Dreamweaver. Il primo passo per la creazione di un sito consiste nel copiare i file di esempio dalla cartella dellapplicazione Dreamweaver in unapposita cartella sul disco rigido.
1.
Creare una nuova cartella denominata local_sites sul disco rigido. Ad esempio, creare la cartella local_sites in uno dei seguenti due percorsi:
In Windows: C:\Documents and Settings\nome_utente\My Documents\local_sites
Impostazione dei file del progetto
53
Su Macintosh: Macintosh HD/Users/nome_utente/Documents/ local_sites
N OT A
sul Macintosh, esiste gi una cartella chiamata Siti nella cartella utente. Non utilizzare la cartella Siti come cartella locale; si tratta della cartella in cui vengono inserite le pagine per renderle accessibili al pubblico quando si usa Macintosh come server Web. 2.
Individuare la cartella cafe_townsend nella cartella principale dellapplicazione di Dreamweaver sul disco rigido. Se Dreamweaver stato installato nella sua posizione predefinita, il percorso della cartella il seguente:
In Windows: C:\Program Files\Macromedia\Dreamweaver 8\Tutorial_assets\cafe_townsend\. Su Macintosh: Macintosh HD/Applications/Macromedia Dreamweaver 8/Tutorial_assets/cafe_townsend.
I N F O R M AZ I O N I .. .
Informazioni sulle cartelle principali locali e remote La cartella principale locale del sito di Dreamweaver spesso la cartella di livello superiore del sito Web e solitamente corrisponde a una cartella identica nel sito remoto (sul server Web). Inoltre, la cartella principale generalmente definisce la prima parte dellURL del sito Web, quella che segue il nome del dominio. Ad esempio, se la cartella principale locale si chiama "miositoweb" e nel sito remoto stata definita una cartella principale con lo stesso nome, lURL del sito Web sar simile al seguente: http://www.yahoo.com/miositoweb. In alcuni casi, la cartella principale locale potrebbe non avere un equivalente esatto sul sito remoto. Ad esempio, se si possiede il dominio www.miositoweb.com, con una directory principale remota public_html, la cartella principale locale potrebbe essere miositoweb. I file in entrambe le directory principali, locale e remota, saranno identici; solo i nomi delle cartelle (public_html sul sito remoto e miositoweb sul computer locale) saranno diversi.
3.
Copiare la cartella cafe_townsend nella cartella local_sites. La cartella cafe_townsend quella che verr utilizzata come cartella principale per il sito di Dreamweaver.
54
Definizione di una cartella locale

necessario definire una cartella locale di Dreamweaver per ciascun sito Web di nuova creazione. La cartella locale consente di memorizzare sul disco rigido le copie di lavoro dei file del sito. Se non si definisce una cartella locale, alcune funzioni di Dreamweaver non funzioneranno correttamente. La definizione di una cartella locale consente di gestire i file e trasferirli da e verso il server Web utilizzando diversi metodi di trasferimento. A questo punto, occorre definire come cartella locale la cartella cafe_townsend copiata nella cartella local_sites.
1.
Avviare Dreamweaver e selezionare Sito > Gestisci siti. Viene visualizzata la finestra di dialogo Gestisci siti. Fare clic sul pulsante Nuovo e selezionare Sito. Viene visualizzata la finestra di dialogo Definizione del sito. Se viene visualizzata la procedura guidata (scheda Generali), fare clic sulla scheda Avanzate e selezionare Informazioni locali dallelenco Categoria (impostazione predefinita). Nella casella di testo Nome del sito, immettere Cafe Townsend come nome del sito. Nella casella di testo Cartella principale locale, specificare la cartella cafe_townsend precedentemente copiata nella cartella local_sites. possibile fare clic sullicona della cartella per individuare e selezionare la cartella desiderata, oppure inserire un percorso e un nome di cartella nella casella di testo Cartella principale locale.
2.
3.
4.
5.
6.
Nella casella di testo Cartella immagini predefinita, specificare la cartella images gi esistente allinterno della cartella cafe_townsend. possibile fare clic sullicona della cartella per individuare e selezionare la cartella desiderata, oppure inserire un percorso e un nome di cartella nella casella di testo Cartella immagini predefinita.
55
La finestra di dialogo Definizione del sito dovrebbe avere laspetto seguente.
7.
Fare clic su OK. Viene visualizzata la finestra di dialogo Gestisci siti, in cui riportato il nuovo sito.
8.
Fare clic su Fine per chiudere la finestra di dialogo Gestisci siti.
56
Il pannello File visualizza ora la nuova cartella principale locale del sito corrente. Lelenco di file nel pannello File funziona come uninterfaccia per la gestione dei file e consente di copiare, incollare, eliminare, spostare e aprire file come sul desktop del computer.
Per ulteriori informazioni sul funzionamento del pannello File, fare riferimento a Il pannello File a pagina 39. stata creata una cartella principale locale per il sito. La cartella principale locale la posizione sul computer locale in cui conservare le copie di lavoro delle pagine Web. Successivamente, se si desidera pubblicare le pagine e renderle disponibili al pubblico, sar necessario definire una cartella remota, ovvero un percorso su un computer remoto che esegue un server Web, nella quale conservare le copie pubblicate dei file locali. possibile seguire le altre esercitazioni della guida per creare il sito di esempio Cafe Townsend, oppure lavorare sulle proprie pagine. Dopo aver completato la creazione e la modifica delle pagine, continuare con la creazione di una cartella remota su un server e la pubblicazione delle pagine. Per ulteriori informazioni, vedere Capitolo 7, Esercitazione: Pubblicazione del sito.
57
58
CAPITOLO 4
Esercitazione: Creazione di un layout di pagina basato su tabella

In questa esercitazione viene illustrato come creare un layout di pagina basato su tabella in Macromedia Dreamweaver 8. Un layout di pagina determina laspetto della pagina nel browser, mostrando, ad esempio, la posizione dei menu, delle immagini e dei contenuti di Macromedia Flash. Le tabelle sono uno strumento particolarmente utile per presentare dati e disporre testo e grafica in una pagina HTML. Le tabelle consentono di creare un layout in modo semplice e rapido. Nel corso di questa esercitazione verranno create alcune tabelle in un documento di Dreamweaver nuovo. Le righe e le celle delle tabella fungono in pratica da "contenitori" per il contenuto che verr aggiunto in un secondo momento. Vengono illustrate le seguenti operazioni:
Esame della bozza di progettazione . . . . . . . . . . . . . . . . . . . . . . . . . 59 Creazione e salvataggio di una nuova pagina . . . . . . . . . . . . . . . . . 61 Inserimento delle tabelle. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 Impostazione delle propriet della tabella . . . . . . . . . . . . . . . . . . . . 66 Inserimento di un segnaposto immagine . . . . . . . . . . . . . . . . . . . . . .71 Aggiunta di colore alla pagina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Esame della bozza di progettazione

Solitamente non si inizia a costruire un sito Web aprendo Dreamweaver e creando immediatamente le pagine, bens facendo uno schizzo su un pezzo di carta o utilizzando unapplicazione grafica come Macromedia Fireworks. I progettisti grafici di solito disegnano una bozza generale del sito Web per mostrarla al cliente e assicurarsi che le idee iniziali siano di suo gradimento.
59
Una bozza pu consistere di un numero qualunque di elementi di pagina che il cliente ha richiesto per il proprio sito Web. Ad esempio, il cliente potrebbe fare una richiesta di questo tipo: "Vorrei il logo dellazienda in cima alla pagina, dei collegamenti a queste altre pagine, una sezione con un negozio Web e unarea dove posso inserire dei video clip. In base a tali informazioni, il Web designer inizia a pianificare il sito e ad abbozzare le pagine di esempio tenendo conto delle richieste del cliente. Per questa esercitazione viene utilizzata la bozza completa e approvata di Cafe Townsend, un ristorante fittizio che ha richiesto un sito Web. Il compito del Web designer di trasformare la bozza in una pagina Web funzionante (generalmente con il contributo di altri progettisti grafici e sviluppatori Flash).
60
Si noter che il progettista grafico ha fornito una bozza di pagina Web che include varie aree di contenuti, insieme ad alcune idee grafiche. Nelle sezioni successive si utilizzer Dreamweaver per progettare il layout del sito. inoltre possibile aprire il file di bozza originale per fare riferimento a esso sullo schermo. La bozza, homepage-mockup.jpg, disponibile nella cartella fireworks_asstes della cartella cafe_townsend copiata sul disco rigido nel Capitolo 3, Esercitazione: Impostazione del sito e dei file di progetto.. Potrebbe inoltre essere necessario stampare la bozza, in modo da potervi fare riferimento durante la creazione della pagina.
Creazione e salvataggio di una nuova pagina

Dopo aver impostato il sito ed esaminato le bozze, possibile iniziare a creare le pagine Web. La procedura inizia dalla creazione di una nuova pagina, per poi salvarla nella cartella principale locale cafe_townsend del sito Web. La pagina diventer alla fine la pagina principale di Cafe Townsend, un ristorante fittizio. Se non si ancora creata la cartella principale locale cafe_townsend, necessario farlo prima di continuare. Per istruzioni, vedere Capitolo 3, Esercitazione: Impostazione del sito e dei file di progetto.
1. 2.
In Dreamweaver, selezionare File > Nuovo. Nella scheda Generale della finestra di dialogo Nuovo documento, selezionare Pagina di base dallelenco Categoria, selezionare HTML dallelenco Pagina di base e fare clic su Crea. Selezionare File > Salva con nome. Nella finestra di dialogo Salva con nome, individuare e aprire la cartella cafe_townsend precedentemente definita come cartella principale locale del sito. Nel Capitolo 3, Esercitazione: Impostazione del sito e dei file di progetto, questa cartella stata creata allinterno di una cartella denominata local_sites.
3. 4.
5.
Immettere index.html nella casella di testo Nome file e fare clic su Salva. Il nome file viene visualizzato nella barra del titolo nella parte superiore della finestra dellapplicazione.
61
6.
Nella casella di testo Titolo, nella parte superiore del nuovo documento creato, digitare Cafe Townsend.
Questo il titolo della pagina, che diverso dal nome del file. I visitatori del sito visualizzeranno questo titolo nella barra del titolo della finestra del browser.
7.
Selezionare File > Salva per salvare la pagina.
Inserimento delle tabelle

A questo punto verr aggiunta una tabella contenente testo, immagini e risorse di Macromedia Flash.
1.
Fare clic una volta sulla pagina per posizionare il punto di inserimento nellangolo superiore sinistro della pagina.
2. 3.
Selezionare Inserisci > Tabella. Nella finestra di dialogo Inserisci tabella eseguire le operazioni riportate di seguito:

Nella casella di testo Righe, immettere 3. Nella casella di testo Colonne, immettere 1. Nella casella di testo Larghezza tabella, immettere 700. Selezionare Pixel dal menu a comparsa Larghezza tabella. Nella casella di testo Spessore bordo, immettere 0. Nella casella di testo Margine celle, immettere 0. Nella casella di testo Spaziatura celle, immettere 0.
62
4.
Fare clic su OK. Nel documento viene visualizzata una tabella di tre righe e una colonna, con una larghezza di 700 pixel, senza bordo e senza margine o spaziatura delle celle.
63
I N FO R M A Z I O N I . ..
Maggiori informazioni sulle tabelle Le tabelle sono uno strumento particolarmente utile per presentare dati e disporre testo e grafica in una pagina HTML. Una tabella costituita da una o pi righe contenenti una o pi celle. Quando si creano pi righe con varie celle, queste formano colonne. Tecnicamente, una cella una parte di una riga orizzontale e una colonna corrisponde allinsieme di tali parti in senso verticale. Dreamweaver visualizza la larghezza della tabella e della colonna per ogni colonna di tabella nel selettore Tabella, indicato da linee verdi, quando la tabella viene selezionata o quando il punto di inserimento viene posizionato su di essa.
Accanto alle larghezze si trovano le frecce per il menu dellintestazione della tabella e per i menu dellintestazione della colonna. I menu consentono di accedere rapidamente ai comandi pi comuni relativi alle tabelle. inoltre possibile attivare o disattivare la visualizzazione della larghezza e dei menu selezionando Visualizza > Riferimenti visivi > Larghezze tabelle. Le tabelle possono avere dei bordi e per le celle di una tabella possibile specificare un margine, una spaziatura o entrambi. Per margine delle celle si intende la distanza in pixel tra il contenuto e i bordi della cella, mentre per spaziatura si intende la distanza in pixel tra le celle adiacenti della tabella. Se non si assegnano in modo esplicito dei valori alle opzioni Margine celle e Spaziatura celle, la maggior parte dei browser visualizza la tabella come se lopzione Margine celle fosse impostata su 1 e lopzione Spaziatura celle su 2. Per far s che i browser visualizzino la tabella senza alcuna spaziatura o margine delle celle, impostare le opzioni su 0. Per ulteriori informazioni sulle tabelle, consultare il Capitolo 8, Presentazione dei contenuti mediante tabelle in Uso di Dreamweaver.
5. 6. 7.
Fare clic una volta a destra della tabella per deselezionarla. Selezionare Inserisci > Tabella per inserire unaltra tabella. Nella finestra di dialogo Inserisci tabella, eseguire le operazioni riportate di seguito per la seconda tabella:

8.
Fare clic su OK.
64
Sotto la prima tabella ne viene visualizzata una seconda contenente una riga e tre colonne.
9.
Fare clic a destra della tabella per deselezionarla. terza tabella selezionando Inserisci > Tabella ed eseguendo le seguenti operazioni nella finestra di dialogo Inserisci tabella:

10. Inserire una
11.
Fare clic su OK. Sotto la seconda tabella viene visualizzata una terza tabella con una riga e una colonna.
Fare clic a destra della tabella per deselezionarla. Laspetto della pagina sar il seguente:
N OT A
dopo linserimento di una tabella potrebbe essere visualizzato il selettore Tabella, indicato da linee verdi. Per farlo scomparire, fare clic fuori della tabella. inoltre possibile disattivare il selettore Tabella selezionando Visualizza > Riferimenti visivi > Larghezze tabelle.
65
Impostazione delle propriet della tabella

Verranno ora impostate propriet di tabella precise utilizzando la modalit Tabelle espanse, una funzione che aggiunge provvisoriamente alle tabelle il margine e la spaziatura delle celle e aumenta i bordi per agevolare le operazioni di modifica. In modo specifico, consente di posizionare con precisione il punto di inserimento impedendo la selezione accidentale della tabella sbagliata o di altro contenuto allinterno della tabella.
NO T A N O TA
Dopo aver terminato limpostazione delle propriet della tabella in modalit Tabelle espanse, tornare sempre alla modalit Standard. La modalit Tabelle espanse non un ambiente WYSIWYG (what you see is what you get), quindi per alcune operazioni, come il ridimensionamento, non vengono visualizzati i risultati previsti. 1.
Selezionare Visualizza > Modalit tabella > Modalit Tabelle espanse.
se viene visualizzata la finestra di dialogo Modalit Tabelle espanse, fare clic su OK.
66
2.
Fare clic una volta allinterno della prima riga della prima tabella.
3.
Nella finestra di ispezione Propriet (Finestra > Propriet), immettere 90 nella casella di testo Altezza cella (A) e premere Invio (Windows) o A capo (Macintosh).
N OT A
se non possibile visualizzare la casella di testo Altezza cella, fare clic sulla freccia di espansione nellangolo inferiore destro della finestra di ispezione Propriet. 4.
Fare clic una volta allinterno della seconda riga della prima tabella.
5.
Nella finestra di ispezione Propriet, immettere 166 nella casella di testo Altezza cella e premere Invio (Windows) o A capo (Macintosh). Fare clic una volta allinterno della terza riga della prima tabella.
6.
67
7.
Nella finestra di ispezione Propriet, immettere 24 nella casella di testo Altezza cella e premere Invio (Windows) o A capo (Macintosh). A questo punto dovrebbero essere presenti tre righe di altezza diversa nella prima tabella.
Si procede ora allimpostazione delle propriet della seconda tabella (quella che contiene tre colonne).
8.
Fare clic una volta allinterno della prima colonna della seconda tabella.
68
9.
Nella finestra di ispezione Propriet, immettere 140 nella casella di testo Larghezza cella (L) e premere Invio (Windows) o A capo (Macintosh). clic una volta allinterno della seconda colonna della seconda tabella.
10. Fare
11.
Nella finestra di ispezione Propriet, immettere 230 nella casella di testo Larghezza cella (L) e premere Invio (Windows) o A capo (Macintosh).
12. Impostare
la larghezza della terza colonna su 330 pixel.
Se il selettore Tabella attivato (Visualizza > Riferimenti visivi > Larghezze tabelle), tutti e tre i valori in pixel appena digitati appaiono sopra le rispettive colonne della tabella. Non si deve specificare alcun valore di altezza per le celle della tabella, perch laltezza di tali celle varier a seconda del contenuto aggiunto successivamente.
13.
Infine, fare clic una volta allinterno dellultima tabella (quella con una riga e una colonna).
69
14. Nella finestra di ispezione Propriet, immettere 24 nella casella di testo
Altezza cella e premere Invio (Windows) o A capo (Macintosh). Il layout dovrebbe essere il seguente:
15.
Fare clic sul collegamento Chiudi modalit Tabelle espanse nella parte superiore della finestra del documento per tornare alla modalit Standard. 7 Salvare la pagina.
16.
70
Inserimento di un segnaposto immagine

Un segnaposto immagine unimmagine utilizzata temporaneamente in attesa dellimmagine definitiva da aggiungere alla pagina Web. utile quando si imposta il layout delle pagine Web perch consente di posizionare unimmagine su una pagina prima che sia stata effettivamente creata.
1.
Nella finestra del documento, fare clic una volta nella prima riga della prima tabella. Selezionare Inserisci > Oggetti immagine > Segnaposto immagine. Nella finestra di dialogo Segnaposto immagine eseguire le operazioni riportate di seguito:

2. 3.
Digitare banner_graphic nella casella di testo Nome. Nella casella di testo Larghezza, immettere 700. Nella casella di testo Altezza, immettere 90. Fare clic sulla casella del colore e scegliere un colore dal selettore. In questa esercitazione selezionato un marrone rossastro (#993300). Lasciare vuota la casella di testo Testo alternativo.
I N F O R M A Z I O N I . ..
Una nota sul testo alternativo Il testo alternativo una descrizione testuale di unimmagine in una pagina Web. Fa parte del codice HTML e non appare sulla pagina. importante fornire un testo alternativo per la maggioranza delle immagini in modo che chi utilizza screen reader o browser testuali possa ricevere le informazioni fornite mediante limmagine. Nel caso di un banner, nel quale visualizzato solo un log per il sito Web, non fondamentale specificare un testo alternativo. Quando si lascia vuota la casella di testo Testo alternativo nella finestra di dialogo Segnaposto immagine, Dreamweaver aggiunge un attributo alt="" al tag img. Successivamente, se si desidera aggiungere un testo alternativo a unimmagine, possibile selezionarla e immettere il testo nella finestra di ispezione Propriet. Ad esempio, se successivamente si modifica il logo per includere un numero telefonico o unindirizzo, pu essere utile fornire queste informazioni come testo alternativo.
Inserimento di un segnaposto immagine
71
I N F O R M A Z I O N I .. .
Informazioni sui segnaposti immagine Un segnaposto immagine unimmagine utilizzata temporaneamente in attesa dellimmagine definitiva da aggiungere alla pagina Web; non unimmagine grafica che viene visualizzata in un browser. Prima della pubblicazione del sito, sostituire tutti i segnaposto immagine con i file grafici corrispondenti in formato visualizzabile nel Web, ad esempio GIF o JPEG. Se si utilizza Macromedia Fireworks, possibile utilizzare il segnaposto immagine di Dreamweaver per creare una nuova immagine. Quando si seleziona il segnaposto e si fa clic sul pulsante Crea nella finestra di ispezione Propriet, Fireworks viene aperto e visualizza una nuova area di lavoro. La nuova immagine viene impostata con le stesse dimensioni dellimmagine segnaposto. quindi possibile modificare limmagine a piacere e infine sostituirla al segnaposto in Dreamweaver. Per informazione sulla creazione di unimmagine in Fireworks da un segnaposto immagine, fare riferimento a Uso di Fireworks per modificare i segnaposto immagine di Dreamweaver in Uso di Dreamweaver.
4.
Fare clic su OK. Il segnaposto immagine viene visualizzato allinterno della prima tabella. Il segnaposto immagine visualizza unetichetta e gli attributi delle dimensioni dellimmagine che sar inserita in quel punto.
NO TA
Quando sono visualizzate in un browser, letichetta e le dimensioni del testo per un segnaposto immagine non appaiono. 5.
Salvare la pagina.
72
Aggiunta di colore alla pagina

il momento di aggiungere altro colore alla pagina impostando i colori di alcune celle di tabella e dello sfondo della pagina.
1. 2.
Fare clic una volta allinterno della prima cella della tabella a tre colonne. Fare clic sul tag <td> (tag cella) nel selettore di tag per selezionare la cella.
3.
Nella finestra di ispezione Propriet (Finestra > Propriet), fare clic una volta nella casella di testo Colore di sfondo adiacente alla casella del colore Colore di sfondo (Sf ).
N OT A
se la casella di testo Colore di sfondo non visualizzata, fare clic sulla freccia di espansione nellangolo inferiore destro della finestra di ispezione Propriet.
73
4.
Nella casella di testo Colore di sfondo, digitare il valore esadecimale #993300 e premere Invio.
Il colore della cella diventa marrone-rossastro.

5.
Fare clic una volta allinterno della seconda cella della tabella a tre colonne. Fare clic sul tag <td> (tag cella) nel selettore di tag per selezionare la cella. Nella casella di testo Colore di sfondo della finestra di ispezione Propriet, digitare il valore esadecimale #F7EEDF e premere Invio. Il cella diventa di colore bronzo chiaro. Ripetere i punti da 5 a 7 per modificare il colore della terza cella impostandolo su bronzo chiaro. Una volta impostati i colori di tutte e tre le celle, fare clic allesterno della tabella per deselezionarla.
6.
7.
8.
9.
Il prossimo passaggio consiste nel cambiare il colore di sfondo dellintera pagina modificando le propriet di pagina. La finestra di dialogo Propriet di pagina consente di impostare varie propriet della pagina, tra cui le dimensioni e il colore dei caratteri, i colori dei collegamenti visitati, i margini, ecc.
74
1. 2.
Selezionare Elabora > Propriet di pagina. Nella categoria Aspetto della finestra di dialogo Propriet di pagina, fare clic sulla casella di colore Colore di sfondo e selezionare il nero (#000000) dal selettore di colore.
I N F O R M A Z I O N I . ..
Selezione di colori Nel linguaggio HTML, i colori vengono espressi sotto forma di valori esadecimali (ad esempio, #FF0000) o di nomi (red). I colori web-safe sono quelli che vengono visualizzati allo stesso modo in Netscape Navigator e in Microsoft Internet Explorer su entrambe le piattaforme, Windows e Macintosh, nella modalit a 256 colori. Per convenzione, esistono 216 colori comuni e ogni valore esadecimale che combina le coppie 00, 33, 66, 99, CC o FF (corrispondenti rispettivamente ai valori RGB 0, 51, 102, 153, 204 e 255) rappresenta un colore web-safe. In Dreamweaver i colori possono essere selezionati digitandone i valori esadecimali nelle caselle di testo corrispondenti oppure selezionandoli dal selettore di colore. Questultimo utilizza la tavolozza web-safe a 216 colori. Quando si seleziona un colore da questa tavolozza, viene visualizzato il valore esadecimale corrispondente. Per utilizzare il selettore di colore, fare clic sulla casella del colore e selezionare un colore con il contagocce. possibile utilizzare il selettore di colore anche per creare una corrispondenza tra i colori. Ad esempio, se unimmagine presente nella pagina contiene una particolare sfumatura di blu e si desidera applicare la stessa sfumatura allo sfondo di una cella di tabella, possibile selezionare la cella, fare clic sulla casella del colore per aprire il selettore, spostare il contagocce sopra larea blu dellimmagine e fare clic con il pulsante del mouse. Il selettore di colore applicher allarea selezionata il colore pi vicino possibile a quello selezionato con il contagocce. Questo metodo, tuttavia, non garantisce che il colore scelto con il contagocce sia di tipo web-safe.
75
3.
Fare clic su OK. Lo sfondo della pagina diventa nero.
4.
Salvare il lavoro.
Il layout della pagina ora completo. Il layout include varie tabelle che possono contenere risorse come immagini, testo e file Flash Video (FLV). Nellesercitazione successiva (Capitolo 5, Esercitazione: Aggiunta del contenuto alle pagine) si apprender come aggiungere risorse alla pagina attraverso le varie funzioni di inserimento disponibili in Dreamweaver.
76
CAPITOLO 5
Esercitazione: Aggiunta del contenuto alle pagine

In questa esercitazione viene illustrato come aggiungere contenuto alle pagine Web in Macromedia Dreamweaver 8. possibile aggiungere vari tipi diversi di contenuto alle pagine Web, inclusi immagini, file Macromedia Flash, file Macromedia Flash Video e testo. Una volta aggiunto il contenuto alle pagine, possibile visualizzarne lanteprima nel browser per verificare che aspetto avr sul Web. Vengono illustrate le seguenti operazioni:
Individuare i file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 Valutazione del lavoro da svolgere. . . . . . . . . . . . . . . . . . . . . . . . . . . 79 Inserimento di immagini . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 Inserimento e riproduzione di un file Flash . . . . . . . . . . . . . . . . . . . . 88 Inserimento di contenuto Flash Video . . . . . . . . . . . . . . . . . . . . . . . . 91 Inserire il testo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95 Creazione di collegamenti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100 Anteprima della pagina in un browser . . . . . . . . . . . . . . . . . . . . . . . .101
77
Individuare i file
In questa esercitazione, si inzier dalla layout di pagina basato su tabella (index.html) creato in Capitolo 4, Esercitazione: Creazione di un layout di pagina basato su tabella. Se tale esercitazione non stata completata, possibile farlo prima di continuare oppure aprire la versione completa dellesercitazione, ovvero il file table_layout.html che si trova nella cartella completed_files/ dreamweaver della cartella cafe_townsend, copiata sul disco rigido nel corso dellesercitazione del Capitolo 3, Esercitazione: Impostazione del sito e dei file di progetto.
N OT A
Qualora si sia scelto di iniziare questa esercitazione utilizzando il file completo table_layout.html anzich il file index.html dellesercitazione svolta nel Capitolo 4, Esercitazione: Creazione di un layout di pagina basato su tabella, alcuni passaggi e illustrazioni potrebbero non corrispondere esattamente a quanto visualizzato sullo schermo.
78
Valutazione del lavoro da svolgere

In questa esercitazione verranno aggiunte risorse alla pagina principale di Cafe Townsend, un ristorante fittizio. Si apprender come aggiungere immagini, un file Macromedia Flash, un file Macromedia Flash Video e testo. Al termine, la pagina avr un aspetto simile al seguente:
79
Si noter che il testo nella pagina non ancora formattato. Questo perch si apprender come formattare il testo tramite i CSS nellesercitazione successiva. Le risorse necessarie per questa esercitazione sono disponibili nella cartella principale cafe_townsend copiata sul disco rigido nel Capitolo 3, Esercitazione: Impostazione del sito e dei file di progetto. Se lesercitazione non stata completata, necessario procedere prima di continuare. Lesercitazione indica esattamente dove si trovano le risorse man mano che si procede.
Inserimento di immagini
Dopo aver creato il layout di pagina possibile iniziare ad aggiungere il contenuto. Per prima cosa, verranno inserite le immagini. possibile utilizzare vari metodi per aggiungere immagini a una pagina Web in Dreamweaver. In questa sezione viene indicato come aggiungere quattro diverse immagini alla pagina indice del sito Cafe Townsend, utilizzando vari metodi.
Sostituzione del segnaposto immagine

1.
In Dreamweaver, aprire il file index.html creato nel Capitolo 4, Esercitazione: Creazione di un layout di pagina basato su tabella.
N OT A
Se non stato completata lesercitazione Capitolo 4, Esercitazione: Creazione di un layout di pagina basato su tabella, fare riferimento a Individuare i file a pagina 78 per sapere come procedere.
80
2.
Fare doppio clic sul segnaposto immagine, banner_graphic, in cima alla pagina.
3.
Nella finestra di dialogo Seleziona file di origine immagine, accedere alla cartella images allinterno della cartella cafe_townsend precedentemente definita come cartella principale locale del sito. Selezionare il file banner_graphic.jpg e fare clic su OK.
4.
81
Dreamweaver sostituisce il segnaposto con il banner di Cafe Townsend.
5. 6.
Fare clic allesterno della tabella per deselezionare limmagine. Salvare la pagina (File > Salva).
Inserire unimmagine tramite il menu Inserisci

1.
Fare clic allinterno della terza riga della prima tabella (due righe sotto il banner appena inserito, appena sopra le celle colorate).
2. 3.
Selezionare Inserisci > Immagine. Nella finestra di dialogo Seleziona file di origine immagine, accedere alla cartella images allinterno della cartella cafe_townsend, selezionare il file body_main_header.gif e fare clic su OK.
N OT A
Se viene visualizzata la finestra di dialogo Attributi di accessibilit tag Image, fare clic su OK.
82
Nella riga di tabella viene visualizzata una lunga immagine colorata. A prima vista pu sembrare un colore di sfondo applicato alla cella di tabella anzich unimmagine, ma se si osserva pi attentamente si pu notare che limmagine ha gli angoli arrotondati. Questo accorgimento conferir alla parte inferiore della pagina un effetto pi interessante dopo che sar stato aggiunto tutto il contenuto.
Inserimento di unimmagine tramite trascinamento

1.
Fare clic allinterno dellultima riga dellultima tabella della pagina (appena sotto le celle di tabella colorate). Nel pannello File (Finestra > File), individuare il file body_main_footer.gif (nella cartella images) e trascinarlo sul punto di inserimento nellultima tabella.
2.
NO TA
83
3.
Fare clic allesterno della tabella e salvare la pagina (File > Salva).
Inserimento di unimmagine dal pannello Risorse

1.
Fare clic una volta allinterno della colonna centrale della tabella a tre colonne (la prima cella di colore bronzo chiaro). Nella finestra di ispezione Propriet (Finestra > Propriet), selezionare Al centro dal menu a comparsa Orizz e selezionare In alto dal menu a comparsa Vert. Loperazione consente di allineare il contenuto della cella della tabella al centro e sposta il contenuto verso lalto della cella.
2.
N OT A
Se il menu Vert o Orizz non visualizzato, fare clic sulla freccia di espansione situata nellangolo inferiore destro della finestra di ispezione Propriet.
84
3.
Premere Invio per creare pi spazio.
Il pannello Risorse possibile utilizzare il pannello Risorse per visualizzare e gestire le risorse nel sito corrente. Mostra tutte le risorse del sito associato al documento attivo nella finestra del documento. per poter visualizzare le risorse nel pannello Risorse, necessario definire un sito locale. Per ulteriori informazioni, consultare il Capitolo 3, Esercitazione: Impostazione del sito e dei file di progetto in Uso di Dreamweaver. Il pannello Risorse dispone di due tipi di vista: Lelenco Sito mostra tutte le risorse presenti nel sito, tra cui i colori e gli URL utilizzati nei documenti del sito. Lelenco Preferiti mostra solo le risorse selezionate dallutente. Per aggiungere una risorsa allelenco Preferiti, selezionarla nellelenco Sito, quindi selezionare Aggiungi a Preferiti dal menu Opzioni nellangolo superiore destro del pannello File. Quando si fa clic su una risorsa nel pannello Risorse, larea di anteprima visualizza la risorsa selezionata. Per cambiare le dimensioni dellarea di anteprima, trascinare la linea che la separa dalle intestazioni delle colonne. Per ulteriori informazioni, consultare il Operazioni con le risorse in Uso di Dreamweaver.
85
4.
Fare clic sulla scheda Risorse nel pannello File o selezionare Finestra > Risorse. Vengono visualizzate le risorse del sito.
Pulsante Immagini
5.
Se la vista Immagini non selezionata, fare clic sul pulsante Immagini per visualizzarla. Nel pannello Risorse selezionare il file street_sign.jpg. Effettuare una delle seguenti operazioni:
6. 7.
Trascinare il file street_sign.jpg sul punto di inserimento nella cella centrale della tabella. Fare clic su Inserisci in fondo al pannello Risorse.
NO T A
86
Limmagine street_sign.jpg viene visualizzata nella pagina.
8. 9.
Fare clic allesterno della tabella per deselezionare limmagine. Salvare la pagina.
87
Inserimento e riproduzione di un file Flash

il momento di inserire unanimazione Flash contenente una presentazione fotografica delle proposte culinarie del ristorante. Il file Flash da inserire un file FMA (Flexible Messaging Area). Un file FMA un tipo di applicazione Flash comune che visualizza un messaggio informativo per i destinatari. Il messaggio pu variare in base alle specifiche esigenze. Ad esempio, se al Cafe Townsend si tiene un evento speciale, lFMA pu essere facilmente modificato (senza influenzare il resto della pagina Web) per visualizzare informazioni sulevento, anzich lelenco dei piatti. Per aggiungere il file FMA Flash, necessario inserire il codice HTML che incorpora lanimazione nella pagina di Dreamweaver. Il modo pi semplice per farlo consiste nellinserire il file SWF (filmato Flash esportato) nella pagina. Quando si inserisce un file SWF in Dreamweaver, tutto il codice HTML di Flash necessario viene scritto automaticamente dal programma.
1.
Con la pagina index.html aperta nella finestra del documento di Dreamweaver, fare clic allinterno della seconda riga della prima tabella. Si tratta della riga di tabella immediatamente sotto limmagine del banner inserita nella sezione precedente.
2.
Nella finestra di ispezione Propriet (Finestra > Propriet), selezionare Al centro dal menu a comparsa Orizz e selezionare Al centro dal menu a comparsa Vert. Questo colloca il contenuto della cella della tabella al centro della cella.
NO TA
Se il menu Vert o Orizz non visualizzato, fare clic sulla freccia di espansione situata nellangolo inferiore destro della finestra di ispezione Propriet.
88
Informazioni sui file Flash Quando si creano risorse in Macromedia Flash, i file con cui si lavora sono in formato FLA, ovvero il tipo di file predefinito dellapplicazione Flash. I file FLA sono caratterizzati dallestensione .fla. Ad esempio, se si lavora sul logo animato di un sito Web, il nome del file Flash potrebbe essere logo_animato.fla. Quando si finito di lavorare su un file FLA in Flash, necessario esportarlo in un formato che possa essere riprodotto sul Web in Flash Player. Quando si esportano file FLA in Flash, essi vengono convertiti in file SWF indicati dallestensione .swf. I file SWF file (anzich i FLA) riproducono il contenuto Flash in un browser Web e sono il tipo di file che necessario inserire in una pagina Web in fase di creazione con Dreamweaver.
3.
Selezionare Inserisci > Oggetto multimediale > Flash. Nella finestra di dialogo Seleziona file individuare il file flash_fma.swf (nella cartella principale cafe_townsend del sito), selezionarlo e fare clic su OK. Se viene visualizzata la finestra di dialogo Attributi di accessibilit tag Object, fare clic su OK.
Nella finestra del documento viene visualizzato un segnaposto per il contenuto Flash e non una scena dellanimazione vera e propria. Questo avviene perch il codice HTML punta al file SWF flash_fma.swf. Quando un utente carica la pagina index.html, il browser riproduce il file SWF.
Inserimento e riproduzione di un file Flash
89
4.
Il segnaposto per il contenuto Flash dovrebbe rimanere selezionato dopo linserimento del file SWF, se non si fa clic in un altro punto della pagina. In caso contrario, selezionarlo di nuovo con un clic del mouse. Nella finestra di ispezione Propriet (Finestra > Propriet), fare clic su Riproduci.
5.
NO T A
Se il pulsante Riproduci di Flash non visibile, fare clic sulla freccia di espansione nellangolo inferiore destro della Finestra di ispezione Propriet.
Dreamweaver riproduce il file Flash nella finestra del documento, cos come verrebbe visualizzato dai visitatori del sito in un browser.
6.
Nella finestra di ispezione Propriet, fare clic su Interrompi per interrompere la riproduzione del file Flash. Salvare la pagina.
7.
90
Inserimento di contenuto Flash Video

Si proceder ora a inserire un file Flash Video, tramite la risorsa fornita.
1.
Con la pagina index.html aperta nella finestra del documento di Dreamweaver, fare clic sopra limmagine inserita nella colonna centrale della tabella a tre colonne. Nella sezione precedente stato aggiunto spazio prima di inserire limmagine: fare clic in quel punto.
2.
Selezionare Inserisci > Oggetto multimediale > Flash Video.
91
3.
Nella finestra di dialogo Inserisci Flash Video, selezionare Video a scaricamento progressivo dal menu a comparsa Tipo di video.
Informazioni su Flash Video Il comando Inserisci Flash Video di Dreamweaver consente di inserire contenuto Flash Video nelle pagine Web senza utilizzare lo strumento di creazione di Flash. Questo comando inserisce un componente Flash che, visualizzato in un browser, mostra il contenuto Flash Video selezionato e una serie di controlli di riproduzione. Il comando Inserisci Flash Video fornisce le opzioni seguenti per offrire contenuto video ai visitatori del sito: Video a scaricamento progressivo scarica il file Flash Video (FLV) sul disco rigido del visitatore del sito e lo riproduce. A differenza dei tradizionali metodi scarica e riproduci, tuttavia, lo scaricamento progressivo permette di iniziare la riproduzione del file video prima che sia stato completamente scaricato. Streaming Video esegue lo streaming del contenuto Flash Video e lo riproduce immediatamente nella pagina Web. Per abilitare lo streaming video nelle pagine Web, tuttavia, indispensabile avere accesso a Macromedia Flash Communication Server, lunico server in grado di eseguire lo streaming di contenuto Flash Video. Per ulteriori informazioni sullutilizzo di Flash Video, vedere Inserimento di contenuti Flash Video in Uso di Dreamweaver.
4.
Nella casella di testo URL specificare un percorso relativo per il file cafe_townsend_home.flv facendo clic su Sfoglia, individuando il file cafe_townsend_home.flv (nella cartella principale cafe_townsend del sito) e selezionando il file FLV.
92
5.
Selezionare Halo Skin 2 dal menu a comparsa Skin. Sotto il menu a comparsa Skin viene visualizzata unanteprima dello skin selezionato. Lopzione Skin consente di definire le caratteristiche visive del componente Flash Video in cui sar visualizzato il contenuto Flash Video. Per ulteriori informazioni sulla selezione di skin diversi per i componenti Flash Video, vedere www.macromedia.com/go/ flv_tutorial_it.
6.
Nelle caselle di testo Larghezza e Altezza eseguire le operazioni seguenti:

Nella casella di testo Larghezza digitare 180. Nella casella di testo Altezza immettere 135 e premere Invio (Windows) o A capo (Macintosh).
93
possibile fare clic su Rileva dimensioni per determinare larghezza e altezza esatte del file FLV. In alcuni casi, tuttavia, Dreamweaver non in grado di determinare le dimensioni del file FLV. In tali casi, necessario immettere manualmente i valori di larghezza e altezza.
Il valore nelle caselle di testo Larghezza e Altezza specifica larghezza e altezza in pixel del file FLV. possibile adattare questi valori a discrezione per modificare le dimensioni del Flash Video sulla pagina Web. Quando si aumentano le dimensioni di un video, la qualit dellimmagine in genere si riduce.
N OT A
94
Totale con skin indica la larghezza e laltezza del file FLV pi quelle dello skin selezionato. 7.
Lasciare invariate le selezioni predefinite per le opzioni rimanenti.

Vincola mantiene le proporzioni tra larghezza e altezza del componente
Flash Video. Questa opzione selezionata per impostazione predefinita.

Riproduzione automatica
specifica se il video deve essere riprodotto automaticamente allapertura della pagina Web. Per impostazione predefinita, questa opzione deselezionata.
Riavvolgimento automatico specifica se il controllo di riproduzione ritorna alla posizione iniziale al termine della riproduzione del video. Per impostazione predefinita, questa opzione deselezionata. 8.
Fare clic su OK per chiudere la finestra di dialogo e aggiungere il contenuto Flash Video alla pagina Web. Il comando Inserisci Flash Video genera un file SWF di riproduzione video e file SWF di skin che verranno utilizzati per visualizzare il contenuto Flash Video in una pagina Web. Per vedere i nuovi file, pu essere necessario fare clic sul pulsante Aggiorna nel pannello File. Questi file vengono salvati nella stessa directory del file HTML al quale si aggiunge il contenuto Flash Video (in questo caso, la cartella principale cafe_townsend). Quando si carica la pagina HTML contenente il contenuto Flash Video, Dreamweaver carica i file come file dipendenti (se si fa clic su S nella finestra di dialogo Carica file dipendenti).
9.
Salvare la pagina.
Inserire il testo
il momento di aggiungere testo alla pagina. possibile digitare il testo direttamente nella finestra del documento, oppure copiarlo e incollarlo da altri documenti, ad esempio file di Microsoft Word o di testo semplice. Successivamente il testo verr formattato utilizzando i fogli di stile CSS (Cascading Style Sheets).
Inserire il testo principale

1.
Nel pannello File individuare il file sample_text.txt (nella cartella principale cafe_townsend) e fare doppio clic sullicona corrispondente per aprirlo in Dreamweaver. Questa finestra in vista Codice e non pu essere visualizzata in vista Progettazione (quella utilizzata fino a questo momento) perch il file non di tipo HTML.
2.
Nella finestra del documento sample_text.txt, premere Ctrl+A (Windows) o Comando+A (Macintosh) per selezionare tutto il testo, quindi selezionare Modifica > Copia per copiare il testo. Chiudere il file sample_text.txt facendo clic sulla X nellangolo superiore destro del documento.
3.
Inserire il testo
95
4.
Nella finestra del documento index.html, fare clic allinterno della terza cella della tabella a tre colonne (la cella a destra della colonna contenente limmagine e il video Flash). Selezionare Modifica > Incolla. Il contenuto del file di testo viene visualizzato nella cella della tabella selezionata.
5.
In base alla risoluzione del monitor, la tabella a tre colonne si amplia per adattarsi al testo. Per il momento il risultato visivo pu essere ignorato. Nellesercitazione successiva, si proceder a formattare il testo con i CSS in modo da adattarlo correttamente alla tabella.
96
6.
Assicurarsi che il punto di inserimento rimanga allinterno della cella della tabella in cui stato incollato il testo. In caso contrario, fare clic dentro la cella della tabella. Nella finestra di ispezione Propriet (Finestra > Propriet), selezionare In alto dal menu a comparsa Vert. Il testo incollato viene allineato rispetto alla parte superiore della cella. Se il menu Vert non visualizzato, fare clic sulla freccia di espansione situata nellangolo inferiore destro della finestra di ispezione Propriet.
7.
8.
Salvare la pagina.
Inserimento del testo per una barra di navigazione

A questo punto verr inserito il testo per una barra di navigazione. Il testo non assumer laspetto effettivo di una barra di navigazione finch non verr formattato.
1.
Fare clic una volta allinterno della prima colonna della tabella a tre colonne (la colonna di colore marrone-rossastro).
Inserire il testo
97
2.
Digitare la parola Cuisine.
3. 4.
Premere la barra spaziatrice e digitare Chef Ipsum. Ripetere il punto precedente finch non saranno state digitate tutte le parole seguenti, ciascuna seguita da uno spazio: Articles, Special Events, Location, Menu, Contact Us. Non premere il tasto Invio durante la digitazione. Usare solo la barra spaziatrice per separare le parole e lasciare che vadano a capo automaticamente. La larghezza fissa della cella della tabella determina quante parole rientrano in una riga.
98
5.
Con il punto di inserimento sempre allinterno della prima cella della tabella a tre colonne, fare clic sul tag <td> nel selettore di tag.
6.
Nella finestra di ispezione Propriet (Finestra > Propriet), selezionare In alto dal menu a comparsa Vert. Il testo digitato viene allineato rispetto alla parte superiore della cella.
NO T A
Se il menu Vert non visualizzato, fare clic sulla freccia di espansione situata nellangolo inferiore destro della finestra di ispezione Propriet. 7.
Salvare la pagina.
Inserire il testo
99
Creazione di collegamenti
Un collegamento un riferimento, inserito in una pagina Web, che punta a un altro documento. possibile trasformare praticamente ogni tipo di risorsa in un collegamento, ma il tipo di collegamento pi comune un collegamento di testo. possibile creare collegamenti in qualsiasi fase del processo di creazione del sito. In questa sezione verranno creati collegamenti per la barra di navigazione, anche se il testo non ancora stato formattato con lo stile di una barra di navigazione. La cartella principale del sito cafe_townsend contiene una pagina HTML completata cui possibile creare un collegamento (una pagina del menu per Cafe Townsend). Questa pagina verr utilizzata per tutti collegamenti di navigazione, anche se in una situazione reale si indicherebbe una pagina distinta per ciascun collegamento.
1.
Con la pagina index.html aperta nella finestra del documento di Dreamweaver, selezionare la parola Cuisine digitata nella prima cella della tabella a tre colonne. Selezionare solo la parola Cuisine e non lo spazio dopo la parola.
2.
Nella finestra di ispezione Propriet (Finestra > Propriet), fare clic sullicona della cartella accanto alla casella di testo Collegamento.
100 Esercitazione: Aggiunta del contenuto alle pagine
3.
Nella finestra di dialogo Selezionare file, individuare il file menu.html (nella stessa cartella di index.html) e fare clic su OK (Windows) o Scegli (Macintosh). Fare clic sulla pagina per deselezionare la parola Cuisine. Il testo Cuisine viene sottolineato e colorato in blu per indicare che si tratta di un collegamento. Ripetere i passaggi precedenti per collegare ogni parola o gruppo di parole digitate per la navigazione. Si desiderano creare altri sei collegamenti: uno per Chef Ipsum, Articles, Special Events, Location, Menu, e Contact Us. Collegare ogni parola o gruppo di parole alla pagina menu.html, facendo attenzione a evitare lo spazio prima e dopo le parole o i gruppi di parole quando si creano i collegamenti. Viene cos creata una serie di collegamenti fittizi; in una situazione reale, ogni parola della barra di navigazione verrebbe collegata a una pagina diversa.
4.
5.
N OT A
i collegamenti non funzionano nella finestra del documento in Dreamweaver, bens solo in un browser. Per essere certi che i collegamenti funzionino correttamente, necessario visualizzare lanteprima della pagina in un browser. Per istruzioni su come eseguire questa operazione, passare a Anteprima della pagina in un browser a pagina 101. 6.
Salvare la pagina.
Anteprima della pagina in un browser

La vista Progettazione fornisce unidea di massima dellaspetto che la pagina avr sul Web, ma necessario visualizzare lanteprima della pagina in un browser per vedere il risultato definitivo. Bench in genere i browser producano lo stesso risultato, ogni versione potrebbe visualizzare le pagine HTML in modo leggermente diverso; il codice HTML prodotto in Dreamweaver ha un aspetto il pi possibile simile tra i diversi browser, ma talvolta non possibile evitare alcune differenze. Lanteprima in un browser lunico modo per valutare effettivamente quanto verr visualizzato dai visitatori del sito una volta che le pagine saranno state pubblicate.
1.
Assicurarsi che il file index.html sia aperto nella finestra del documento.
Anteprima della pagina in un browser
101
2.
Premere il tasto F12 (Windows) o Opzione+F12 (Macintosh). Viene avviato il browser principale (se non gi in esecuzione) con la pagina index visualizzata.
NO T A
Dreamweaver in genere rileva automaticamente il browser principale e lo utilizza per lanteprima. Se lanteprima non viene visualizzata o non viene aperta nel browser previsto, tornare a Dreamweaver (se necessario) e scegliere File > Anteprima nel browser > Modifica elenco browser. Viene visualizzata la finestra di dialogo Preferenze - Anteprima nel browser, aggiungere il browser corretto allelenco. Per ulteriori informazioni, fare clic sul pulsante ? nella finestra di dialogo Preferenze.
3.
(Facoltativo) Tornare a Dreamweaver per effettuare le modifiche necessarie. Infine, salvare il lavoro e premere di nuovo il tasto F12 per verificare che le modifiche siano state applicate.
ora disponibile una pagina Web ricca di contenuti. Il passaggio successivo consiste nella formattazione di alcuni dei contenuti per renderli pi attraenti. Nellesercitazione successiva, si proceder a formattare il testo aggiunto con i CSS.
Anteprima della pagina in un browser 103
CAPITOLO 6
Esercitazione: formattazione della pagina con i fogli di stile CSS

In questa esercitazione verr illustrato come formattare il testo sulla pagina utilizzando i fogli di stile CSS in Dreamweaver. CSS offre un maggiore controllo sullaspetto della pagina consentendo di formattare e collocare il testo in modi non consentiti dallHTML. Vengono illustrate le seguenti operazioni:
Individuare i file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 Valutazione del lavoro da svolgere. . . . . . . . . . . . . . . . . . . . . . . . . . 107 Informazioni sui CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 Creazione di un nuovo foglio di stile. . . . . . . . . . . . . . . . . . . . . . . . . .110 Esplorazione del pannello Stili CSS . . . . . . . . . . . . . . . . . . . . . . . . .114 Collegamento di un foglio di stile . . . . . . . . . . . . . . . . . . . . . . . . . . . .112 Creazione di una nuova regola CSS . . . . . . . . . . . . . . . . . . . . . . . . . 117 Applicazione di uno stile di classe al testo . . . . . . . . . . . . . . . . . . . 120 Formattazione del testo della barra di navigazione . . . . . . . . . . . .121 (Facoltativo) Centrare i contenuti della pagina . . . . . . . . . . . . . . . 132
105
Individuare i file
In questa esercitazione, si inzier dalla pagina index di Cafe Townsend alla quale si sono aggiunti contenuti nel Capitolo 5, Esercitazione: Aggiunta del contenuto alle pagine.. Se tale esercitazione non stata completata, possibile farlo prima di continuare oppure aprire la versione completa dellesercitazione, ovvero il file add_content.html che si trova nella cartella completed_files/dreamweaver della cartella cafe_townsend, copiata sul disco rigido nel corso dellesercitazione del Capitolo 3, Esercitazione: Impostazione del sito e dei file di progetto.
NO TA
Qualora si sia scelto di iniziare questa esercitazione utilizzando il file completo add_content.html anzich il file index.html dellesercitazione svolta nel Capitolo 5, Esercitazione: Aggiunta del contenuto alle pagine, alcuni passaggi e illustrazioni potrebbero non corrispondere esattamente a quanto visualizzato sullo schermo.
106 Esercitazione: formattazione della pagina con i fogli di stile CSS

In questa esercitazione verranno utilizzati i fogli di stile CSS per formattare il testo nella pagina principale di Cafe Townsend, un ristorante fittizio. Verranno creati diversi tipi di regole CSS per formattare il testo principale. Inoltre si proceder a formattare il testo del collegamento nella parte sinistra della pagina per creare una barra di navigazione. Al termine, laspetto della pagina sar analogo allesempio seguente:
Valutazione del lavoro da svolgere 107
Per ulteriori informazioni sui CSS, vedere la sezione successiva. Per iniziare subito la creazione dei CSS, passare a Creazione di un nuovo foglio di stile a pagina 110.
Informazioni sui CSS

I fogli di stile CSS sono una raccolta di regole di formattazione che controlla laspetto del contenuto di una pagina Web. Quando si utilizzano i CSS per formattare una pagina, il contenuto viene separato dalla presentazione. Il contenuto della pagina, ovvero il codice HTML, si trova nel file HTML, mentre le regole CSS che definiscono la presentazione del codice si trovano in un altro file (un foglio di stile esterno) o in unaltra parte del documento HTML (in genere la sezione <head>). I fogli di stile CSS offrono flessibilit e controllo sullaspetto preciso della pagina, dallesatta posizione del layout a caratteri e stili specifici. Inoltre, i CSS consentono di intervenire su molte propriet che il linguaggio HTML non in grado di gestire. Ad esempio, possibile specificare diverse dimensioni e unit per i caratteri (pixel, punti e cos via) per il testo selezionato. Utilizzando i CSS per impostare la dimensione dei caratteri in pixel, si possono ottenere inoltre gestire layout e aspetto della pagina in modo pi omogeneo indipendentemente dal browser utilizzato. Una regola di formattazione CSS si suddivide in due parti: il selettore e la dichiarazione. Il selettore un termine (come P, H1, un nome di classe o un id) che identifica lelemento formattato, mentre la dichiarazione definisce gli elementi di stile. Nellesempio seguente, H1 il selettore e tutto quanto racchiuso tra le parentesi graffe ({}) la dichiarazione:
H1 { font-size: 16 pixels; font-family: Helvetica; font-weight: bold; }
La dichiarazione a sua volta si suddivide in due parti, la propriet (ad esempio font-family) e il valore (ad esempio Helvetica). Lesempio precedente crea uno stile per i tag H1: il testo di tutti i tag H1 associati a questo stile avr una dimensione di 16 pixel, carattere Helvetica e stile grassetto.
Il termine cascading (a cascata) si riferisce alla possibilit di applicare pi stili allo stesso elemento o alla stessa pagina Web. Ad esempio, possibile creare una regola CSS per applicare un colore e unaltra per applicare i margini, applicandole entrambe alla stessa pagina. Gli stili definiti vengono applicati "a cascata" agli elementi della pagina Web, creando laspetto finale desiderato. Uno dei principali vantaggi dei CSS consiste nella facilit di aggiornamento; quando si aggiorna una regola CSS in un punto specifico, viene infatti aggiornata anche la formattazione di tutti i documenti che utilizzano utilizzano lo stile definito. In Dreamweaver, possibile definire i seguenti tipi di regole:
Regole CSS personalizzate, altrimenti dette stili di classe; consentono di impostare attributi di stile per qualsiasi sezione o blocco di testo. Tutte gli stili di classe iniziano con un punto (.). Ad esempio, possibile creare uno stile di classe denominato .red, impostare la propriet color della regola su red, e applicare lo stile a una sezione del testo del paragrafo gi formattato. Le regole dei tag HTML ridefiniscono la formattazione di un particolare tag, come p o h1. Quando si crea o modifica una regola CSS per il tag h1, tutto il testo formattato con il tag h1 viene immediatamente aggiornato. Le regole del selettore CSS (stili avanzati) ridefiniscono la formattazione per una particolare combinazione di elementi, o per altri moduli del selettore consentiti dal CSS (ad esempio, il selettore td h2 si applica ogni volta che unintestazione h2 viene visualizzata in una cella di tabella). Gli stili avanzati possono inoltre ridefinire la formattazione per i tag che includono un attributo id specifico (ad esempio, gli stili definiti mediante #myStyle si applicano a tutti i tag che includono la coppia attributo/valore id="myStyle").
Per ulteriori informazioni, consultare il Informazioni sulla formattazione del testo in Dreamweaver in Uso di Dreamweaver.
Informazioni sui CSS 109
Creazione di un nuovo foglio di stile

Si proceder anzitutto a creare un foglio di stile esterno che includa una regola CSS per la definizione di uno stile per il testo del paragrafo. Quando si creano stili in un foglio di stile esterno, possibile controllare laspetto di pi pagine Web da una posizione centralizzata, anzich impostare gli stili su ogni singola pagina Web.
1. 2.
Selezionare File > Nuovo. Nella finestra di dialogo Nuovo documento selezionare Pagina di base nella colonna Categoria, selezionare CSS nella colonna Pagina di base e fare clic su Crea.
Nella finestra del documento verr visualizzato un foglio di stile vuoto. I pulsanti Vista Progettazione e Vista Codice sono disattivati. I fogli di stile CSS sono file di solo testo il cui contenuto non pensato per essere visualizzato in un browser.
110
Maggiori informazioni sulle regole CSS Le regole CSS possono trovarsi nelle posizioni seguenti: I fogli di stile CSS esterni sono raccolte di regole CSS memorizzate in un file .css esterno e non in un file HTML. Questo file .css collegato a una o pi pagine di un sito Web tramite un collegamento presente nella sezione head di un documento. I fogli di stile CSS interni o incorporati sono raccolte di regole CSS incluse in un tag style di una sezione head di un documento HTML. Ad esempio, nellesempio seguente vengono definite le dimensioni del carattere per tutto il testo nel documento formattato con il tag paragraph: <head> <style> p{ font-size:80px } </style> </head> Gli stili in linea vengono definiti allinterno di istanze specifiche di tag in un documento HTML. Ad esempio, <p style=font-size: 9px> definisce le dimensioni del carattere solo per il paragrafo formattato con il tag che include lo stile in linea. Dreamweaver riproduce la maggior parte degli attributi di stile applicati e li visualizza direttamente nella finestra del documento. anche possibile visualizzare unanteprima del documento in una finestra del browser per vedere gli stili applicati. Alcuni attributi di stile CSS vengono riprodotti in modo diverso in Microsoft Internet Explorer, Netscape Navigator, Opera e Apple Safari.
3.
Salvare la pagina (File > Salva) come cafe_townsend.css. Quando si salva il foglio di stile, assicurarsi di salvarlo nella cartella cafe_townsend (la cartella principale del sito Web).
4.
Immettere il codice seguente nel foglio di stile:

p{ font-family: Verdana, sans-serif; font-size: 11px; color: #000000; line-height: 18px; padding: 3px; }
Mentre si digita il codice, Dreamweaver utilizza i Suggerimenti codice per proporre alternative per il completamento della voce. Premere Invio (Windows) o A capo (Macintosh) quando viene visualizzato il codice che si desidera venga completato da Dreamweaver.
Creazione di un nuovo foglio di stile
111
Non dimenticare di includere un punto e virgola alla fine di ogni riga, dopo i valori delle propriet. Al termine, laspetto del codice sar analogo allesempio seguente:
5. Per maggiori informazioni sulle propriet dei CSS, consultare la guida di riferimento di OReilly fornita con Dreamweaver. Per visualizzare la guida, selezionare Guida in linea > Riferimenti e selezionare OReilly CSS Reference dal menu-a comparsa nel pannello Riferimenti.
Salvare il foglio di stile.
112
S U G G E R I M EN T O
Si proceder ora a collegare il foglio di stile alla pagina index.html.
Collegamento di un foglio di stile

Quando si collega un foglio di stile a una pagina Web, le regole definite nel foglio di stile vengono applicate agli elementi corrispondenti nella pagina. Ad esempio, quando si collega il foglio di stile cafe_townsend.css alla pagina index.html, tutto il testo di paragrafo (testo formattato con tag <p> nel codice HTML) viene formattato in base alla regola CSS definita dallutente.
1.
Nella finestra del documento, aprire il file index.html di Cafe Townsend. Fare clic sulla relativa scheda se il file gi aperto. Selezionare il testo del primo paragrafo incollato nella pagina nel Capitolo 5, Esercitazione: Aggiunta del contenuto alle pagine.
2.
3.
Consultare la finestra di ispezione Propriet e assicurarsi che il paragrafo sia formattato con il tag paragraph. Se nel menu a comparsa Formato della finestra di ispezione Propriet presente lindicazione "Paragrafo", il paragrafo formattato con il tag paragraph. Se nel menu a comparsa Formato della finestra di ispezione Propriet presente lindicazione "Nessuno", o altro, selezionare Paragrafo per formattare il paragrafo.
4.
Ripetere il passaggio 3 per il secondo paragrafo.
Collegamento di un foglio di stile
113
5.
Nel pannello Stili CSS (Finestra > Stili CSS), fare clic sul pulsante Associa foglio di stile nellangolo inferiore destro del pannello.
6.
Nella finestra di dialogo Collega foglio di stile esterno fare clic su Sfoglia e individuare il file cafe_townsend.css creato nella sezione precedente. Fare clic su OK. Il testo nella finestra del documento viene formattato in base alla regola CSS nel foglio di stile esterno.
7.
Esplorazione del pannello Stili CSS

Il pannello Stili CSS consente di gestire le regole e le propriet CSS che incidono su un elemento di pagina selezionato oppure quelle che hanno effetto sullintero documento. Consente inoltre di modificare le propriet CSS senza aprire un foglio di stile esterno.
1. 2.
Assicurarsi che il file index.html sia aperto nella finestra del documento. Nel pannello Stili CSS (Finestra > Stili CSS) fare clic su Tutti nella parte superiore del pannello e verificare le regole CSS.
114
In modalit Tutti, il pannello mostra tutte le regole CSS applicate al documento corrente, indipendentemente dal fatto che siano incluse in un foglio di stile esterno o nel documento stesso. Nel riquadro Tutte le regole dovrebbero essere visualizzate due categorie principali: Una categoria di tag <style> e una categoria cafe_townsend.css.
3.
Se necessario, fare clic sul segno pi (+) per espandere la categoria di tag <style>. Fare clic sulla regola body. La propriet background-color con valore #000000 viene visualizzata nel riquadro Propriet sottostante.
4.
N OT A
Potrebbe essere necessario ridurre un altro pannello, ad esempio il pannello File, per visualizzare completamente il pannello Stili CSS. inoltre possibile modificare la lunghezza del pannello Stili CSS trascinandone i bordi.
Il colore di sfondo per la pagina nel Capitolo 4, Esercitazione: Creazione di un layout di pagina basato su tabella viene impostato per mezzo della finestra di dialogo Elabora propriet di pagina. Quando si impostano le propriet di pagina in questo modo, Dreamweaver scrive uno stile CSS interno al documento.
5.
Fare clic su pi (+) per espandere la categoria cafe_townsend.css.
Esplorazione del pannello Stili CSS
115
6.
Fare clic sulla regola p. Tutte le propriet e i valori definiti nel foglio di stile esterno per la regola p vengono visualizzati nel riquadro Propriet sottostante.
7.
Nella finestra del documento fare clic una volta in qualsiasi punto di uno dei due paragrafi appena formattati. Nel pannello Stili CSS fare clic su Corrente nella parte superiore del pannello e verificare le regole CSS. In modalit Corrente, il pannello CSS mostra un riepilogo delle propriet per la selezione corrente. Le propriet visualizzate corrispondono alle propriet per la regola p nel foglio di stile esterno.
8.
Nella sezione successiva il pannello Stili CSS verr utilizzato per creare una nuova regola. Lutilizzo del pannello Stili CSS per creare una nuova regola molto pi semplice che digitare la regola manualmente, come quando si creato il foglio di stile esterno inizialmente.
116
Creazione di una nuova regola CSS

In questa sezione il pannello Stili CSS verr utilizzato per creare una regola CSS personalizzata, o stile di classe. Gli stili di classe consentono di impostare gli attributi di stile per qualsiasi sezione o blocco di testo, e possono essere applicati a qualsiasi tag HTML. Per ulteriori informazioni sui diversi tipi di regole CSS, vedere Informazioni sui CSS a pagina 108.
1.
Nel pannello Stili CSS fare clic sul pulsante Nuova regola CSS nellangolo inferiore destro del pannello.
2.
Nella finestra di dialogo Nuova regola CSS selezionare Classe dalle opzioni di Tipo selettore. Il componente dovrebbe essere selezionato per impostazione predefinita. Immettere .bold nella casella di testo Nome. Assicurarsi di aver digitato il punto (.) prima della parola "bold". Tutti gli stili di classe iniziano con un punto.
3.
117
4.
Selezionare cafe_townsend.css dal menu a comparsa Definisci in. Il componente dovrebbe essere selezionato per impostazione predefinita.
5.
Fare clic su OK. Verr visualizzata la finestra di dialogo Definizione regola CSS, che indica la creazione in corso di uno stile di classe denominato .bold nel file cafe_townsend.css.
6.
Nella finestra di dialogo Definizione regola CSS eseguire le operazioni riportate di seguito: Nella casella di testo Carattere immettere Verdana, sans-serif. Nella casella di testo Dimensioni immettere 11 e selezionare pixel dal menu a comparsa subito a destra. Nella casella di testo Altezza riga immettere 18 e selezionare pixel dal menu a comparsa subito a destra. Selezionare grassetto dal menu a comparsa Spessore. Immettere #990000 nella casella di testo Colore
118
7. 8. 9.
Fare clic su OK. Fare clic sul pulsante Tutto nella parte superiore del pannello Stili CSS. Se necessario, fare clic sul pulsante con il segno pi (+) accanto alla categoria cafe_townsend.css. Si noter che Dreamweaver ha aggiunto lo stile di classe .bold allelenco delle regole definite nel foglio di stile esterno. Facendo clic sulla regola .bold nel riquadro Tutte le regole, le propriet della regola vengono visualizzate nel riquadro Propriet. La nuova regola viene inoltre visualizzata nel menu a comparsa Stile nella finestra di ispezione Propriet.
S UG GE R IM E N TO
Per maggiori informazioni sulle propriet dei CSS, consultare la guida di riferimento di OReilly fornita con Dreamweaver. Per visualizzare la guida, selezionare Guida in linea > Riferimenti e selezionare OReilly CSS Reference dal menu-a comparsa nel pannello Riferimenti.
119
Applicazione di uno stile di classe al testo

Dopo aver creato una regola di classe, si proceder ad applicarla al testo di paragrafo.
1.
Nella finestra del documento, selezionare le prime quattro parole di testo nel primo paragrafo: Cafe Townsends visionary chef. Nella finestra di ispezione Propriet (Finestra > Propriet) selezionare bold dal menu a comparsa Stile.
2.
Lo stile di classe bold viene applicato al testo.

3.
Ripetere il passaggio 2 per applicare lo stile di classe bold alle prime quattro parole del secondo paragrafo.
4.
Salvare la pagina.
Formattazione del testo della barra di navigazione

Si proceder ora a utilizzare i CSS per applicare stili al testo del collegamento per la barra di navigazione. Molte pagine Web utilizzano immagini di rettangoli colorati che includono testo per creare una barra di navigazione. Tuttavia, con i CSS, sono sufficienti testo formattato e minime operazioni di formattazione. Utilizzando la propriet display: block e impostando una larghezza per il blocco, possibile creare i rettangoli senza utilizzare immagini separate.
Creazione di una nuova regola per la navigazione

1.
Aprire il file cafe_townsend.css, se necessario, o fare clic sulla scheda relativa per visualizzarlo. Definire una nuova regola digitando il codice seguente nel file, dopo lo stile di classe .bold:
.navigation { }
2.
Si tratta di una regola vuota.
121
Il codice nel file dovrebbe essere simile allesempio seguente:
3.
Salvare il file cafe_townsend.css. Nella sezione successiva il pannello Stili CSS verr utilizzato per aggiungere propriet alla regola.
4.
Se necessario, aprire il file index.html.
5.
Nel pannello Stili CSS, assicurarsi che la modalit Tutte sia selezionata, selezionare la nuova regola .navigation e fare clic su Modifica stile nellangolo inferiore destro del pannello.
6.
Nella finestra di dialogo Definizione regola CSS eseguire le operazioni riportate di seguito: Immettere Verdana, sans-serif nella casella di testo Carattere. Selezionare 16 dal menu a comparsa Dimensioni e selezionare pixel dal menu a comparsa subito a destra del menu a comparsa Dimensioni. Selezionare Normale dal menu a comparsa Stile. Selezionare Nessuno dallelenco Effetti. Selezionare Grassetto dal menu a comparsa Spessore. Immettere #FFFFFF nella casella di testo Colore
Formattazione del testo della barra di navigazione 123
7. Per maggiori informazioni sulle propriet dei CSS, consultare la guida di riferimento di OReilly fornita con Dreamweaver. Per visualizzare la guida, selezionare Guida in linea > Riferimenti e selezionare OReilly CSS Reference dal menu-a comparsa nel pannello Riferimenti.
Fare clic su OK. Nella sezione successiva il pannello Stili CSS verr utilizzato per aggiungere alcune altre propriet alla regola .navigation.
S U G GE R I M E N TO
8.
Nel pannello Stili CSS assicurarsi che la regola .navigation sia selezionata e fare clic su Mostra vista elenco.
La vista Elenco riorganizza il riquadro Propriet per la visualizzazione di un elenco alfabetico di tutte le propriet disponibili (in contrasto con la vista precedente, Propriet impostate, che mostra solo le propriet gi impostate).
9.
Fare clic nella colonna a destra della propriet background-color. Per visualizzare una descrizione completa di una propriet, mantenere il puntatore del mouse sopra la propriet.
10. Immettere
#993300 come valore esadecimale e premere Invio (Windows) o A capo (Macintosh).
11. Per visualizzare gli effetti delle operazioni eseguite sul foglio di stile esterno, mantenere aperto il file cafe_townsend.css nella finestra del documento mentre si lavora. Quando si effettua una selezione nel pannello Stili CSS, simultaneamente Dreamweaver scrive il codice CSS nel foglio di stile.
Individuare la propriet display (potrebbe essere necessario scorrere verso il basso), fare clic una volta nella colonna a destra e selezionare blocco dal menu a comparsa.
S U G GE R I M E N T O
12. Individuare
la propriet padding, fare clic una volta nella colonna a destra, immettere 8px come valore e premere Invio (Windows) o A capo (Macintosh).
13.
Individuare la propriet width, fare clic una volta nella colonna a destra, immettere 140 nella prima casella di testo, selezionare pixel dal menu a comparsa e premere Invio (Windows) o A capo (Macintosh).
14. Fare
clic su Mostra propriet impostate in modo che nel riquadro Propriet vengano visualizzate solo le propriet impostate.
15.
Fare clic sul file cafe_townsend.css per visualizzarlo. Si noter che Dreamweaver ha aggiunto tutte le propriet specificate al file. Salvare il file cafe_townsend.css e chiuderlo.
16.
stata creata una regola per la formattazione del testo della barra di navigazione. Si proceder ora ad applicare la regola ai collegamenti selezionati.
Applicazione della regola

1.
Con la pagina index.html aperta nella finestra del documento, selezionare la parola Cuisine in modo che il punto di inserimento si trovi allinterno della parola.
2.
Nel Selettore di tag, fare clic sul tag <a> pi a destra. In questo modo viene selezionato tutto il testo per il tag <a> specificato, o per il collegamento.
3.
Nella finestra di ispezione Propriet (Finestra > Propriet) selezionare navigation dal menu a comparsa Stile. Nella finestra del documento laspetto del testo Cuisine viene modificato completamente. Il testo ora formattato come un pulsante di una barra di navigazione, in base alle propriet della regola .navigation definita nella sezione precedente.
4.
Ripetere i passaggi da 1 a 3 per ognuno dei singoli collegamenti nella barra di navigazione. necessario assegnare uno stile di classe navigation a ogni tag <a> o collegamento, quindi importante utilizzare il selettore di tag per selezionare ogni collegamento singolarmente, e quindi assegnare gli stili di classe uno per volta.
In caso di problemi nella formattazione del testo del collegamento, assicurarsi che tra ogni parola o gruppo di parole con collegamento sia presente uno spazio (non un segno di a capo). Assicurarsi inoltre che lo spazio tra i due collegamenti non sia anchesso collegato. In tal caso, selezionare con attenzione lo spazio, eliminare il contenuto della casella di testo Collegamento nella finestra di ispezione Propriet, e premere Invio (Windows) o A capo (Macintosh).
5.
Terminata la formattazione di tutte le parole della barra di navigazione, salvare la pagina e quindi visualizzare unanteprima del lavoro in un browser (File > Visualizza anteprima nel browser). possibile fare clic sui collegamenti per assicurarsi che funzionino.
Aggiunta di un effetto di rollover

Si proceder ora ad aggiungere un effetto di rollover in modo che il colore di sfondo dei blocchi della barra di navigazione si modifichi quando il puntatore del mouse passa sopra uno dei collegamenti. Per aggiungere un effetto di rollover, aggiungere una nuova regola che include la pseudo-classe :hover.
1. 2.
Aprire il file cafe_townsend.css. Selezionare lintera regola .navigation.
3.
Copiare il testo (Modifica > Copia).
I N FO R M A Z I O N I . ..
Informazioni sulla pseudo-classe :hover Una pseudo-classe utile per influenzare determinati elementi in un documento HTML, in base non al codice HTML del documento, ma ad altre condizioni esterne applicate dal browser Web. Le pseudo-classi possono essere dinamiche, nel senso che un elemento sulla pagina pu acquisire o perdere la pseudo-classe mentre un utente interagisce con il documento. La pseudo-classe :hover influenza una modifica in un elemento di pagina formattato quando lutente posiziona il mouse sopra lelemento. Ad esempio, quando la pseudo-classe :hover viene aggiunta allo stile di classe .navigation (.navigation:hover) per creare una nuova regola, tutti gli elementi di testo formattati dalla regola .navigation si modificano in base alle propriet della regola .navigation:hover.
4.
Fare clic una volta al termine della regola e premere Invio (Windows) o A capo (Macintosh) alcune volte per creare spazio.
5. 6.
Incollare (Modifica > Incolla) il testo copiato nello spazio appena creato. Aggiungere la pseudo-classe :hover al selettore incollato .navigation, come segue:
131
7.
Nella nuova regola .navigation:hover, sostituire il colore di sfondo corrente (#993300) con #D03D03.
8. 9.
Salvare il file e chiuderlo. Aprire il file index.html nella finestra del documento e visualizzare unanteprima della pagina in un browser (File > Visualizza anteprima nel browser). Quando si posiziona il puntatore del mouse sopra uno dei collegamenti, possibile visualizzare il nuovo effetto di rollover.
(Facoltativo) Centrare i contenuti della pagina

Si utilizzer infine il selettore di tag per selezionare tutto il codice HTML nel documento e centrarne i contenuti.
NO T A
Alcuni browser (come Internet Explorer 6) centrano il testo della pagina allinterno del contesto delle celle di di tabella quando si utilizza il metodo descritto in questa sezione. Se laspetto della pagina non soddisfacente, possibile ignorare questa sezione e lasciare i contenuti della pagina allineati a sinistra.
1.
Con la pagina index.html aperta nella finestra del documento, selezionare il tag <body> nel selettore di tag.
Fare clic sul tag <body> per selezionare tutti gli elementi tra i tag <body> di apertura e di chiusura nella finestra del documento. Per visualizzare la selezione, fare clic su Vista Codice nella parte superiore della finestra documento.
(Facoltativo) Centrare i contenuti della pagina 133
2.
Nella finestra di ispezione Propriet (Finestra > Propriet), fare clic su Allinea al centro.
Dreamweaver inserisce i tag <div> CSS, che centrano il contenuto principale della pagina . In vista Progettazione, una linea punteggiata circonda larea che viene centrata dai tag <div>.
3.
Salvare la pagina.
La pagina ora completa. Lultima operazione per la creazione del sito Web la pubblicazione della pagina. Per pubblicare la pagina, necessario definire una cartella su un sito remoto e caricare i file nella cartella. Per istruzioni, passare allesercitazione successiva.
CAPITOLO 7
Esercitazione: Pubblicazione del sito

Questa esercitazione mostra come impostare un sito remoto con Macromedia Dreamweaver 8 e pubblicare le proprie pagine Web. Un sito remoto in genere una posizione su un computer remoto, sul quale in esecuzione un server Web, che include copie dei file locali. Gli utenti accedono al sito remoto in esecuzione sul server Web quando visualizzano le pagine in un browser. Vengono illustrate le seguenti operazioni:
Informazioni sui siti remoti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135 Definizione di una cartella remota . . . . . . . . . . . . . . . . . . . . . . . . . . 136 Caricamento dei file locali . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139 Risoluzione dei problemi di impostazione della cartella remota (facoltativo) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Informazioni sui siti remoti

Il passo successivo, dopo la creazione di un sito Web, la pubblicazione del sito che avviene caricando i file in una cartella remota. Per cartella remota si intende la posizione di memorizzazione dei file, a seconda dellambiente, per la verifica, la produzione, la collaborazione e cos via. In Dreamweaver viene chiamata sito remoto. Prima di procedere necessario disporre dellaccesso a un server Web remoto, come ad esempio il server del proprio provider di servizi Internet, il server di un cliente per il quale si lavora, un server dellintranet aziendale o un server IIS (Internet Information Services) su un computer Windows. Se non si dispone dellaccesso a tale server, rivolgersi al proprio provider Internet, al proprio cliente o allamministratore del sistema.
135
In alternativa, possibile eseguire un server Web sul computer locale, quale IIS (Windows) o Apache (Macintosh). Per ulteriori informazioni sullimpostazione di un server Web sul computer locale, vedere lAppendice B, Installazione di un server Web, a pagina 247. Le procedure descritte in questa esercitazione funzionano in modo ottimale se la cartella principale remota vuota. Se il sito remoto contiene gi dei file, creare una cartella vuota nel sito remoto (sul server) e utilizzarla come cartella principale remota. Sar inoltre necessario definire un sito locale prima di procedere. Per ulteriori informazioni, vedere Esercitazione: Impostazione del sito e dei file di progetto a pagina 51. Per ulteriori informazioni sui siti Dreamweaver, consultare il Capitolo 2, Impostazione di un sito Dreamweaver in Uso di Dreamweaver.
Definizione di una cartella remota

Si proceder ora a impostare una cartella remota in modo a poter pubblicare le pagine Web. La cartella remota spesso ha lo stesso nome della cartella locale, in quanto il sito remoto in genere un duplicato esatto del sito locale. In altre parole, i file e le sottocartelle pubblicati nella cartella remota sono copie dei file e delle sottocartelle creati in locale.
1.
Sul server remoto, creare una cartella vuota allinterno della cartella principale Web per il server. Denominare la nuova cartella vuota cafe_townsend (lo stesso nome della cartella principale locale).
136 Esercitazione: Pubblicazione del sito
INFORMAZIONI...
Creazione di una cartella remota con Dreamweaver Se Dreamweaver lunico mezzo per accedere al server remoto, non sar possibile creare una cartella vuota sul server remoto finch non siano state completate le impostazioni remote di Dreamweaver e stabilita una connessione. In tal caso, possibile definire la directory host come cartella remota, oppure creare una cartella remota dopo aver stabilito una connessione con il server. In entrambi i casi, continuare con le istruzioni in questa esercitazione fino alla connessione a un server remoto. Dopo aver creato una connessione, possibile utilizzare il pannello File di Dreamweaver per creare una nuova cartella remota. Quando si crea una connessione con un server remoto, nel pannello File sono visualizzati tutti i file sul server remoto nella vista remota (cos come i file locali sul computer sono visualizzati in vista locale). Per visualizzare la vista remota, selezionare Vista remota dal menu a comparsa nella parte superiore del pannello File, oppure fare clic su Espandi/comprimi nella barra degli strumenti del pannello. Quando si fa clic su Espandi/comprimi, nel pannello File vengono visualizzate la vista locale e remota contemporaneamente. Per aggiungere una cartella vuota alla vista remota, visualizzare anzitutto la vista remota utilizzando uno dei metodi descritti sopra. Se inizialmente la connessione non visualizzata, fare clic su Aggiorna nella barra degli strumenti del pannello File. Dopo aver verificato di essere connessi al server Web, fare clic con il pulsante destro del mouse (Windows) o tenendo premuto il tasto Control (Macintosh) nella vista remota e selezionare Nuova cartella.
Pulsante Aggiorna Pulsante Espandi/comprimi
Per ulteriori informazioni, consultare il Capitolo 4, Gestione dei file in Uso di Dreamweaver.
2. 3.
In Dreamweaver selezionare Sito > Gestisci siti. Nella finestra di dialogo Gestisci siti selezionare il sito Cafe Townsend. Se il sito non stato definito, creare una cartella locale per il sito prima di continuare. Per ulteriori informazioni, vedere Esercitazione: Impostazione del sito e dei file di progetto a pagina 51.
4. 5.
Fare clic su Modifica. Nella finestra di dialogo Definizione del sito fare clic sulla scheda Avanzate se le impostazioni avanzate non sono visualizzate. Selezionare Informazioni su remoto nellelenco Categoria visualizzato sulla sinistra.
6.
Definizione di una cartella remota 137
7.
Selezionare unopzione di Accesso. I metodi pi diffusi per collegarsi a un server su Internet sono FTP ed SFTP; il metodo pi comune per collegarsi a un server su una intranet, o su un computer locale se lo si usa come server Web, Locale/rete. In caso di dubbi sullopzione da selezionare, rivolgersi allamministratore di sistema del server. Per ulteriori informazioni, fare clic sul pulsante ? nella finestra di dialogo.
8.
Se stato selezionato FTP, inserire le seguenti opzioni:

Inserire il nome host del server (ad esempio ftp.macromedia.com). Nella casella di testo Directory host specificare il percorso del server, dalla directory principale FTP alla directory principale del sito remoto (cafe_townsend). In caso di dubbi, rivolgersi allamministratore di sistema. In molti casi, la casella di testo va lasciata vuota. Inserire il nome utente e la password nelle relative caselle di testo. Se il server supporta lSFTP, selezionare lopzione Usa FTP sicuro (SFTP). Fare clic su Prova per provare le impostazioni di connessione. Se la connessione non riesce, rivolgersi allamministratore di sistema.
Per ulteriori informazioni, fare clic sul pulsante ? nella finestra di dialogo.
9.
Se stato selezionato Locale/rete, fare clic sullicona della cartella accanto alla casella di testo e individuare la cartella principale del sito remoto. Per ulteriori informazioni, fare clic sul pulsante ? nella finestra di dialogo.
10. Fare
clic su OK.
Dreamweaver crea una connessione alla cartella remota.

11.
Fare clic su Fine per chiudere la finestra di dialogo Gestisci siti.
Caricamento dei file locali

Dopo aver impostato le cartelle locale e remota, possibile caricare i file dalla cartella locale sul server Web. Per fare in modo che le pagine siano accessibili al pubblico, necessario caricarle anche nel caso in cui il server Web sia in esecuzione sul computer locale.
1.
Nel pannello File (Finestra > File) selezionare la cartella principale locale del sito (cafe_townsend). Fare clic sullicona blu a forma di freccia di Carica il/i file nella barra degli strumenti del pannello File.
.
2.
3.
Quando Dreamweaver richiede se si desidera caricare lintero sito, fare clic su OK. Dreamweaver copia tutti i file nella cartella remota definita in Definizione di una cartella remota a pagina 136. Loperazione pu richiedere qualche tempo, in quanto Dreamweaver deve caricare tutti i file nel sito.
4.
Aprire il sito remoto in un browser, per verificare che tutti i file siano stati caricati correttamente.
Caricamento dei file locali 139
Risoluzione dei problemi di impostazione della cartella remota (facoltativo)

Un server Web pu essere configurato in molti modi. Nellelenco che segue vengono fornite informazioni su alcuni problemi comuni che possono verificarsi durante limpostazione di una cartella remota e sulla loro risoluzione:
Limplementazione FTP di Dreamweaver pu non funzionare correttamente con alcuni server proxy, firewall multilivello e altre forme di accesso indiretto al server. Se si verificano dei problemi con laccesso FTP, rivolgersi allamministratore del sistema locale.
Per limplementazione dellFTP di Dreamweaver, occorre connettersi alla cartella principale del sistema remoto. In molte applicazioni, invece possibile connettersi a qualunque directory remota e quindi navigare nel file system remoto per individuare la directory desiderata. Assicurarsi di indicare la cartella principale del sistema remoto come directory host. Se si verificano dei problemi nella connessione ed stata specificata una directory host usando una barra singola (/), potrebbe essere necessario specificare un percorso relativo dalla directory a cui ci si connette alla cartella principale remota. Ad esempio, se la cartella principale remota una directory di livello superiore, necessario specificare ../../ per la directory host.
I nomi di file o cartelle che contengono spazi e caratteri speciali causano spesso dei problemi quando vengono trasferiti su un sito remoto. Se possibile, utilizzare i caratteri di sottolineatura al posto degli spazi ed evitare i caratteri speciali nei nomi di file o cartella. In particolare, i due punti (:), le barre (/), i punti (.) e gli apostrofi () contenuti nei nomi di file o di cartelle possono causare problemi, mentre i caratteri speciali possono a volte impedire a Dreamweaver di creare la mappa del sito.
In caso di problemi legati alla lunghezza dei nomi file, assegnare ai file nomi pi brevi. In ambiente Macintosh, un nome file non pu superare i 31 caratteri di lunghezza.
Molti server utilizzano i collegamenti simbolici (UNIX), le scelte rapide (Windows) o gli alias (Macintosh) per collegare una cartella presente in unarea del disco del server a unaltra cartella ubicata altrove. Ad esempio, la sottodirectory public_html della directory home sul server pu essere costituita da un collegamento con unarea del server completamente diversa. Nella maggior parte dei casi, gli alias di questo tipo non influenzano la capacit di connettersi alla cartella o alla directory appropriata, ma se si riesce a connettersi solo a unarea del server e non a unaltra, possibile che si tratti di un problema di discrepanza di alias.
Se viene visualizzato un messaggio di errore del tipo "impossibile caricare il file", lo spazio sulla cartella remota potrebbe essere esaurito. Per informazioni pi dettagliate, esaminare il registro FTP.
N OT A
In generale, quando si riscontra un problema con un trasferimento FTP, esaminare il registro FTP selezionando Sito > Avanzate > Registro FTP.
Risoluzione dei problemi di impostazione della cartella remota (facoltativo)
141
PARTE 3
Esercitazioni avanzate
La terza parte di questo manuale contiene esercitazioni che illustrano funzioni pi avanzate incluse in Dreamweaver. Non necessaria una conoscenza precedente dellHTML o di altri linguaggi per completare queste esercitazioni, ma sufficiente tenere presente che si tratta di procedure pi complesse rispetto a quelle della parte precedente. Questa parte contiene le sezioni seguenti:
Esercitazione: Operazioni con il codice. . . . . . . . . . . . . . . . . . . . . . 145 Esercitazione: Creazione di un layout di pagina basato su CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159 Esercitazione: Visualizzazione di dati XML . . . . . . . . . . . . . . . . . . 183 Esercitazione: Sviluppo di unapplicazione Web. . . . . . . . . . . . . 207
143
CAPITOLO 8
Esercitazione: Operazioni con il codice

Mano a mano che vengono aggiunti testo, immagini e altri contenuti, Dreamweaver 8 genera codice HTML. Questa esercitazione illustra come utilizzare la vista Codice per visualizzare il codice di origine di un documento, per aggiungere codice e modificarlo manualmente. Se il sito gi stato configurato ed stata completa lesercitazione precedente, possibile continuare a lavorare utilizzando lo stesso file index.html. Se le esercitazioni precedenti non sono state eseguite, comunque possibile effettuare questa esercitazione. Per prima cosa, configurare il sito attenendosi alle istruzioni contenute in Esercitazione: Impostazione del sito e dei file di progetto a pagina 51. Quindi, utilizzare il file index_code.html nella cartella cafe_townsend/completed_file/ dreamweaver per completare questa esercitazione. Il file index_code.html un duplicato del file index.html completato nel Capitolo 6, Esercitazione: formattazione della pagina con i fogli di stile CSS, a pagina 105.
NO T A
Qualora si sia scelto di iniziare questa esercitazione utilizzando il file completo index_code.html anzich il file index.html dellesercitazione svolta nel Capitolo 6, Esercitazione: formattazione della pagina con i fogli di stile CSS, a pagina 105 alcuni passaggi e illustrazioni potrebbero non corrispondere esattamente a quanto visualizzato sullo schermo.
Vengono illustrate le seguenti operazioni:

Visualizzazione del codice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146 Accesso allarea di lavoro per la gestione del codice (solo per Windows). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148 Aggiunta di un tag con il Selettore tag. . . . . . . . . . . . . . . . . . . . . . . 148 Modifica di un tag. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .151 Ricerca di informazioni relative a un tag . . . . . . . . . . . . . . . . . . . . . 153 Aggiunta di unimmagine con Suggerimenti codice. . . . . . . . . . . 154
145
Verifica delle modifiche. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157 Stampa del codice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Visualizzazione del codice

Dreamweaver consente di visualizzare la pagina in due modi: nella vista Progettazione, in cui laspetto del documento molto simile a quello finale nel browser o nella vista Codice, in cui appare il codice di origine HTML. inoltre possibile utilizzare una vista combinata che mostra sia la vista Codice che la vista Progettazione.
1.
NO T A NO T A
Assicurarsi che il file index.html sia aperto nella finestra del documento.
Se non si completato il file index.html eseguendo lesercitazione precedente, fare riferimento allintroduzione di questa esercitazione per sapere come procedere. 2.
Nella barra degli strumenti Documento fare clic sul pulsante Mostra viste Codice e Progettazione, la cui etichetta Dividi.
Se la barra degli strumenti Documento non visibile, selezionare Visualizza > Barre degli strumenti > Documento.
146 Esercitazione: Operazioni con il codice
La finestra viene suddivisa e visualizza la vista Progettazione e il codice HTML di origine.

Pulsante Aggiorna
Nella vista Codice possibile modificare il codice. Le modifiche apportate al codice vengono visualizzate nella vista Progettazione solo dopo aver selezionato Aggiorna sulla barra degli strumenti Documento o dopo che si fatto clic in un qualsiasi punto della vista Progettazione.
3.
(Facoltativo) Per visualizzare soltanto la vista Progettazione, fare clic su Vista Progettazione. (Facoltativo) Per visualizzare soltanto la vista Codice, fare clic su Vista Codice.
4.
Quando si lavora sulle proprie pagine, possibile utilizzare la vista che risulta pi pratica. La maggior parte delle esercitazioni presenti in questa guida presuppone che la vista utilizzata sia la vista Progettazione.
Visualizzazione del codice 147
Accesso allarea di lavoro per la gestione del codice (solo per Windows)
Se questa operazione non gi stata eseguita durante linstallazione (facoltativo), possibile rendere larea di lavoro di Windows simile agli ambienti di codifica di Macromedia HomeSite e ColdFusion Studio.
NO TA
gli utenti Macintosh non possono modificare larea di lavoro.
Per passare allarea di lavoro per la gestione del codice:
Selezionare Finestra > Layout area di lavoro > Coder.
Aggiunta di un tag con il Selettore tag

Si proceder ora a utilizzare il Selettore tag per racchiudere una delle immagini sulla pagina tra tag div. Sar quindi possibile assegnare margini, bordi o colori allimmagine secondo le necessit. Esistono molti modi per racchiudere unimmagine tra tag div; questa sezione illustra come utilizzare il Selettore tag, che permette di inserire i tag e di aggiungere i valori di attributo appropriati.
1.
Se necessario, aprire il file index.html.
2.
In vista Progettazione, fare clic sul banner Cafe Townsend (banner_graphic.jpg) per selezionarlo.
3.
Passare alla vista Codice facendo clic su Vista Codice nella barra degli strumenti Documento, o selezionando Visualizza > Vista Codice. Si noter che il codice per limmagine selezionata viene selezionato nella vista Codice. Accertarsi di selezionare lintero tag img, incluse le parentesi angolari di apertura e di chiusura.
4.
Selezionare Visualizza > Opzioni vista Codice > A capo automatico, per abilitare il ritorno a capo automatico se non gi stato fatto. Fare clic con il pulsante destro del mouse (Windows) o fare clic tenendo premuto il tasto Control (Macintosh) sul testo selezionato e selezionare Inserisci tag dal menu a comparsa. Viene visualizzato il Selettore tag.
5.
Aggiunta di un tag con il Selettore tag 149
6.
Nel Selettore tag espandere la categoria Tag HTML, quindi la sottocategoria Formattazione e layout, quindi selezionare Generali. Nel riquadro di destra viene visualizzato un elenco di nomi di tag. Selezionare div da questo elenco.
N OT A
anche possibile selezionare la categoria Tag HTML e poi selezionare il tag div nel riquadro di destra senza prima espandere Formattazione e layout. 7.
Fare clic su Inserisci. Viene visualizzato un editor di tag per il tag div. Nelleditor di tag, selezionare la categoria Foglio di stile/Accessibilit e digitare banner nella casella di testo ID.
8.
9.
Fare clic su OK per chiudere leditor di tag e inserire il tag. Dreamweaver inserisce il tag div nella pagina, disponendolo intorno al tag immagine.
10. Fare 11.
clic su Chiudi per chiudere il selettore di tag.
Salvare la pagina.
Modifica di un tag
A questo punto, verr illustrato come utilizzare la finestra di ispezione Tag per modificare rapidamente gli attributi di un tag. La finestra di ispezione Tag visualizza gli attributi del tag selezionato nella finestra del documento.
1. 2.
Se non gi aperto, aprire il file index.html nella vista Codice. Aprire la finestra di ispezione Tag, se non gi stata aperta, selezionando Finestra > Finestra di ispezione Tag. Selezionare la scheda Attributi. Fare clic su Mostra vista elenco nella finestra di ispezione Tag per visualizzare tutti gli attributi di un tag selezionato in ordine alfabetico.
3. 4.
5.
Nella vista Codice della finestra del documento, fare clic in un qualsiasi punto allinterno delle parentesi quadre di apertura e di chiusura di qualsiasi tag.
Modifica di un tag
151
Nella scheda Attributi della finestra di ispezione Tag vengono visualizzate le informazioni sugli attributi HTML del tag.
6.
Sempre nella vista Codice, individuare e fare clic sul tag img per limmagine banner_graphic.jpg nella parte superiore della pagina.
Nella scheda Attributi della finestra di ispezione Tag vengono visualizzate le informazioni sugli attributi del tag img.
7.
Nella finestra di ispezione Tag fare clic sulla casella di testo vuota accanto allattributo alt e digitare Cafe Townsend, quindi premere Invio (Windows) o A capo (Macintosh).
Dreamweaver visualizza il nuovo valore nella finestra di ispezione Tag e modifica il codice nella finestra del documento.
8.
Salvare la pagina.
Ricerca di informazioni relative a un tag

Per dettagli sugli attributi dei tag e sui relativi valori, consultare le informazioni di riferimento in Dreamweaver.
1. 2.
Se non gi aperto, aprire il file index.html nella vista Codice. Nella finestra del documento, selezionare il nome attributo alt (non il valore dellattributo) nel tag img. Fare clic con il pulsante destro del mouse (Windows) o fare clic tenendo premuto il tasto Ctrl (Macintosh) sul testo selezionato, quindi scegliere Riferimenti dal menu a comparsa.
3.
Viene aperto il pannello Riferimenti, con le informazioni sullattributo alt.

N OT A
in alternativa, possibile accedere al pannello Riferimenti selezionando Finestra > Riferimenti.
Ricerca di informazioni relative a un tag 153
4.
Per informazioni su un altro tag o attributo, selezionare il tag o lattributo dal relativo menu a comparsa nel pannello Riferimenti.
Aggiunta di unimmagine con Suggerimenti codice

Per aggiungere manualmente codice alla pagina, sufficiente fare clic nella vista Codice e digitare il codice. La funzione Suggerimenti codice permette di velocizzare il lavoro. In questa sezione, si utilizzeranno i suggerimenti codice per aggiungere limmagine dellinsegna alla pagina index di Cafe Townsend.
1. 2.
Se necessario, aprire la pagina index.html. In vista Progettazione selezionare limmagine street_sign.jpg (sotto il segnaposto Flash Video) e premere Elimina. Per reinserire limmagine, anzich trascinalrla dal pannello Risorse come nel Capitolo 5, Esercitazione: Aggiunta del contenuto alle pagine, a pagina 77, si utilizzeranno ora i suggerimenti codice.
3.
Passare alla vista Codice facendo clic su Vista Codice nella barra degli strumenti Documento, o selezionando Visualizza > Vista Codice. Nella vista Codice, il punto di inserimento deve trovarsi tra un tag di paragrafo aperto e chiuso, come segue:
Se non si visualizzano un tag di paragrafo aperto e chiuso prima del tag di chiusura della cella di tabella </td>, digitarli come segue:
Quindi, posizionare il punto di inserimento tra il tag di apertura <p> e quello di chiusura <p>.
4.
Eliminare qualsiasi elemento tra il tag di apertura <p> e il tag di chiusura <p>, ad esempio, uno spazio unificatore ( ). Con il punto di inserimento tra il tag di apertura <p> e quello di chiusura <p>, digitare una parentesi angolare di apertura (<). Nel punto di inserimento viene visualizzato un elenco di tag.
5.
Aggiunta di unimmagine con Suggerimenti codice 155
N O TA
possibile impostare il ritardo di visualizzazione dellelenco selezionando Modifica > Preferenze (Windows) o Dreamweaver > Preferenze (Macintosh), quindi selezionando Suggerimenti codice nellelenco Categoria visualizzato a sinistra. Nella vista Codice, possibile visualizzare in qualsiasi momento un menu dei suggerimenti codice premendo contemporaneamente il tasto Ctrl e la barra spaziatrice; per chiudere il menu, premere il tasto Esc. 6.
Selezionare il codice img dallelenco, quindi premere Invio (Windows) o A capo (Macintosh) per inserire la prima parte del tag. Premere la barra spaziatrice per visualizzare lelenco degli attributi per il tag. Iniziare a digitare src, quindi premere Invio quando lattributo src appare selezionato nel menu dei suggerimenti.
7. per portarsi rapidamente sul tag, cominciare a digitarne il nome.
8.
La parola Sfoglia viene visualizzata sotto il codice digitato.

9.
Premere Invio per selezionare un file. (nella cartella images della cartella principale cafe_townsend) e fare clic su OK (Windows) o su Scegli (Macintosh).
10. Nella finestra di dialogo Seleziona file, individuare il file street_sign.jpg
LURL del file di immagine viene inserito come valore dellattributo src e il punto di inserimento viene visualizzato dopo le virgolette di chiusura.
11.
Premere la barra spaziatrice, selezionare lattributo alt dal menu dei suggerimenti e premere Invio (Windows) o A capo (Macintosh).
12. Non inserire alcun valore tra le virgolette poich questa immagine solo
unillustrazione. Utilizzare il tasto freccia destra per spostare il punto di inserimento alla destra delle virgolette.
13.
Per completare il tag, digitare una parentesi angolare di chiusura (>).
14. Salvare
la pagina.
Verifica delle modifiche

Dopo avere apportato delle modifiche al codice, possibile eseguire una verifica visiva immediata.
Per vedere una rappresentazione visiva del codice, effettuare una delle seguenti operazioni:
Fare clic su Vista Progettazione o su Viste Codice e Progettazione (etichetta Dividi) nella barra degli strumenti del documento. Visualizzare in anteprima la pagina in un browser Web premendo F12 (Windows) o Opzione+F12 (Macintosh). Per chiudere il browser e tornare al codice, premere Alt+F4 (solo per Windows).
Stampa del codice

possibile stampare il codice per modificarlo non in linea, archiviarlo o distribuirlo.
Per stampare il codice:
1. 2. 3.
Per aggiungere un attributo a un tag esistente, posizionare il punto di inserimento subito dopo il valore dellattributo finale del tag, quindi premere la barra spaziatrice. Quando viene visualizzato un elenco di attributi, aggiungere un attributo e specificare un valore, se disponibile.
Visualizzare una pagina nella vista Codice. Selezionare File > Stampa codice. Specificare le opzioni di stampa, quindi fare clic su OK (Windows) o Stampa (Macintosh).
Stampa del codice 157
CAPITOLO 9
Esercitazione: Creazione di un layout di pagina basato su CSS

Nel Capitolo 4, Esercitazione: Creazione di un layout di pagina basato su tabella, si appreso come utilizzare le funzioni di creazione di tabelle di Dreamweaver per creare un layout di pagina. In questa esercitazione, si apprender come utilizzare i fogli di stile CSS per creare un layout analogo. Molti professionisti preferiscono i layout basati sui CSS in quanto offrono un maggiore controllo sul posizionamento degli elementi, riducono la quantit di codice necessaria e consentono di formattare i blocchi di layout con margini, bordi, colori, e cos via. Se non si ancora definito un sito di Dreamweaver e creata la cartella principale locale cafe_townsend, necessario farlo prima di continuare. Per istruzioni, vedere Capitolo 3, Esercitazione: Impostazione del sito e dei file di progetto. Vengono illustrate le seguenti operazioni:
Informazioni sul layout di pagina basato su CSS . . . . . . . . . . . . . 160 Esame della bozza di progettazione . . . . . . . . . . . . . . . . . . . . . . . . .161 Creazione e salvataggio di una nuova pagina . . . . . . . . . . . . . . . . 163 Inserimento di livelli . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164 Aggiunta di colore alla pagina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
159
Informazioni sul layout di pagina basato su CSS

Molti siti Web utiizzano i layout basati su tabelle per la visualizzazione delle informazioni sulle pagine. Le tabelle sono utili per la presentazione di dati in formato tabulare (come righe e colonne di elementi ripetuti) e sono estremamente facili da creare in una pagina. Tuttavia, tendono a generare una notevole quantit di codice, difficile da leggere e da gestire. Inoltre, a causa della quantit di tag necessari e della loro potenziale "nidificabilit", le tabelle possono causare problemi alle persone con disabilit, che utilizzano screen reader per visualizzare le pagine Web. Un layout basato su CSS, ovvero che utilizza gli elementi di blocco anzich righe e colonne di tabella, include meno codice di un layout analogo basato su tabelle. I layout basati su CSS in genere utilizzano i tag <div> anzich <table> per creare i blocchi di layout CSS utilizzati per il layout. possibile collocare questi blocchi di layout CSS in qualsiasi punto della pagina e assegnare loro propriet come bordi, margini, colori di sfondo e cos via. Inoltre, gli utenti che utilizzano screen reader per la visualizzazione delle pagine Web possono navigare in modo molto pi semplice nelle pagine create con i CSS, in quanto il codice pi semplice e sintetico. Dreamweaver consente di creare i livelli. Un livello di Dreamweaver un elemento di pagina HTML che possibile posizionare in qualsiasi punto della pagina. Pi in particolare, si tratta di un tag <div> (o di qualsiasi altro tag) con una posizione assoluta. Utilizzare Dreamweaver per trascinare i livelli sulla pagina e quindi posizionarli nel punto desiderato. I livelli fungono da blocchi di contenuto che includono risorse come immagini, file Flash, testo e cos via. I livelli di Dreamweaver sono elementi con posizione assoluta, ovvero hanno una posizione specifica impostata in modo relativo rispetto ai margini superiore e sinistro della pagina. Non possibile creare un layout basato su CSS con i livelli e quindi centrare il contenuto della pagina. Quindi, il layout in questa esercitazione leggermente diverso da quello creato nel Capitolo 4, Esercitazione: Creazione di un layout di pagina basato su tabella. Per ulteriori informazioni sui livelli di Dreamweaver, consultare il Capitolo 7, Creazione del layout delle pagine con i fogli di stile CSS in Uso di Dreamweaver.
160 Esercitazione: Creazione di un layout di pagina basato su CSS

NO T A
Se si gi completata lesercitazione nel Capitolo 4, Esercitazione: Creazione di un layout di pagina basato su tabella ed esaminata la bozza di progettazione, possibile passare alla sezione successiva per iniziare immediatamente la creazione del layout basato su CSS.
Solitamente non si inizia a costruire un sito Web aprendo Dreamweaver e creando immediatamente le pagine, bens facendo uno schizzo su un pezzo di carta o utilizzando unapplicazione grafica come Macromedia Fireworks. I progettisti grafici di solito disegnano una bozza generale del sito Web per mostrarla al cliente e assicurarsi che le idee iniziali siano di suo gradimento. Una bozza pu consistere di un numero qualunque di elementi di pagina che il cliente ha richiesto per il proprio sito Web. Ad esempio, il cliente potrebbe fare una richiesta di questo tipo: "Vorrei il logo dellazienda in cima alla pagina, dei collegamenti a queste altre pagine, una sezione con un negozio Web e unarea dove posso inserire dei video clip. In base a tali informazioni, il Web designer inizia a pianificare il sito e ad abbozzare le pagine di esempio tenendo conto delle richieste del cliente.
161
Per questa esercitazione viene utilizzata la bozza completa e approvata di Cafe Townsend, un ristorante fittizio che ha richiesto un sito Web. Il compito del Web designer di trasformare la bozza in una pagina Web funzionante (generalmente con il contributo di altri progettisti grafici e sviluppatori Flash).
Si noter che il progettista grafico ha fornito una bozza di pagina Web che include varie aree di contenuti, insieme ad alcune idee grafiche. Nelle sezioni successive si utilizzer Dreamweaver per progettare il layout del sito.
inoltre possibile aprire il file di bozza originale per fare riferimento a esso sullo schermo. La bozza, homepage-mockup.jpg, disponibile nella cartella fireworks_assets della cartella cafe_townsend copiata sul disco rigido nel Capitolo 3, Esercitazione: Impostazione del sito e dei file di progetto. Potrebbe inoltre essere necessario stampare la bozza, in modo da potervi fare riferimento durante la creazione della pagina.

Dopo aver impostato il sito ed esaminato le bozze, possibile iniziare a creare le pagine Web. La procedura inizia dalla creazione di una nuova pagina, per poi salvarla nella cartella principale locale cafe_townsend del sito Web. La pagina diventer alla fine la pagina principale di Cafe Townsend, un ristorante fittizio. Se non si ancora creata la cartella principale locale cafe_townsend, necessario farlo prima di continuare. Per istruzioni, vedere Capitolo 3, Esercitazione: Impostazione del sito e dei file di progetto.
1. 2.
In Dreamweaver, selezionare File > Nuovo. Nella scheda Generale della finestra di dialogo Nuovo documento, selezionare Pagina di base dallelenco Categoria, selezionare HTML dallelenco Pagina di base e fare clic su Crea. Selezionare File > Salva con nome. Nella finestra di dialogo Salva con nome, individuare e aprire la cartella cafe_townsend precedentemente definita come cartella principale locale del sito. Nel Capitolo 3, Esercitazione: Impostazione del sito e dei file di progetto, questa cartella stata creata allinterno di una cartella denominata local_sites.
3. 4.
5.
Immettere index_css.html nella casella di testo Nome file e fare clic su Salva. Il nome file viene visualizzato nella barra del titolo nella parte superiore della finestra dellapplicazione, tra parentesi.
Creazione e salvataggio di una nuova pagina 163
6.
Nella casella di testo Titolo, nella parte superiore del nuovo documento creato, digitare Cafe Townsend.
Questo il titolo della pagina, che diverso dal nome del file. I visitatori del sito visualizzeranno questo titolo nella barra del titolo della finestra del browser.
7.
Selezionare File > Salva per salvare la pagina.
Inserimento di livelli
Si proceder ora ad aggiungere i livelli alla pagina. Un livello elemento con posizione assoluta utilizzabile per linserimento di immagini, testo, file Flash e altri contenutI. Per ulteriori informazioni sui livelli, vedere Informazioni sul layout di pagina basato su CSS a pagina 160.
Disegno di un nuovo livello

1.
Con la pagina index_css.html aperta nella finestra del documento, selezionare la modalit Layout dalla barra Inserisci.
2.
Fare clic su Disegna livello.
Il puntatore del mouse assume la forma di una croce quando lo si sposta sopra la pagina.
3.
Trascinare un livello di qualsiasi dimensione sulla pagina e rilasciare il pulsante del mouse. Fare clic sulla maniglia di selezione nellangolo in alto a sinistra del livello per verificare che sia selezionato. Con il nuovo livello selezionato, eseguire le operazioni seguenti nella finestra di ispezione Propriet (Finestra > Propriet):
4.
5.
Fare clic nella casella di testo ID livello e rinominare il livello in banner_graphic. Nella casella di testo Larghezza (La) digitare 700px Nella casella di testo Altezza (Al) digitare 90px Nella casella di testo Sinistra (Sin) digitare 20px Nella casella di testo In alto (Sup) digitare 20px Premere Invio (Windows) o A capo (Macintosh) per applicare lultima selezione.
Inserimento di livelli 165
Dreamweaver ridimensiona e posiziona il nuovo livello banner_graphic. Il livello banner_graphic largo 700 pixel e alto 90 pixel. Inoltre posizionato a 20 pixel dal margine sinistro della pagina e a 20 pixel dal margine superiore della pagina.
6. Il livello banner_graphic stato collocato utilizzando valori precisi in pixel nella finestra di ispezione Propriet, ma possibile posizionare un livello in qualsiasi punto della pagina trascinando la maniglia di selezione nellangolo in alto a sinistra di un livello selezionato.
Aprire il pannello Livelli (Finestra > Livelli). Si noter che Dreamweaver ha aggiunto il nuovo livello (banner_graphic) allelenco dei livelli. Fare clic una volta allesterno del nuovo livello per deselezionarlo. Salvare la pagina.
7. 8.
Aggiunta di livelli ulteriori

il momento di aggiungere ulteriori livelli alla pagina. Si utilizzer il primo livello (banner_graphic) come punto di riferimento per il posizionamento degli altri livelli. Si utilizzer inoltre la funzione Sfondi livello CSS per semplificare il posizionamento e la distinzione tra i livelli.
1.
Nella categoria Layout della barra Inserisci, fare clic su Disegna livello e trascinare un altro livello di qualsiasi dimensione sulla pagina.
2.
Fare clic sulla maniglia di selezione del nuovo livello per selezionarlo.
3.
Con il nuovo livello selezionato, eseguire le operazioni seguenti nella finestra di ispezione Propriet:
Fare clic nella casella di testo ID livello e rinominare il livello in flash_fma. Nella casella di testo Larghezza (La) digitare 700px Nella casella di testo Altezza (Al) digitare 166px Nella casella di testo Sinistra (Sin) digitare 20px Nella casella di testo In alto (Sup) digitare 111px Premere Invio (Windows) o A capo (Macintosh) per applicare lultima selezione.
Dreamweaver ridimensiona e posiziona il nuovo livello flash_fma.

.
Il livello flash_fma largo 700 pixel e alto 166 pixel. Inoltre posizionato a 20 pixel dal margine sinistro della pagina e a 111 pixel dal margine superiore della pagina. Il livello stato collocato a 111 pixel dal margine superiore della pagina in modo che non si sovrapponga al livello banner_graphic.
Quando i livelli si sovrappongono, il bordo di uno dei livelli (quello sottostante) rappresentato da una linea punteggiata.
4. 5.
Fare clic una volta allesterno del nuovo livello per deselezionarlo. Selezionare Visualizza > Riferimenti visivi > Sfondi layout CSS.
Dreamweaver aggiunge i colori di sfondo ai livelli. Questi colori sono selezionati in modo casuale e non vengono visualizzati nelle pagine Web pubblicate. Si tratta esclusivamente di riferimenti visivi che Dreamweaver fornisce per semplificare la visualizzazione dei livelli e di altri tipi di elementi di blocco sulla pagina. Facoltativamente possibile disattivare di nuovo Sfondi layout CSS selezionando Visualizza > Riferimenti visivi e deselezionando Sfondi layout CSS.
6.
Trascinare ora altri tre livelli sulla pagina, sotto i livelli banner_graphic e flash_fma. Si ricordi di fare clic su Disegna livello nella barra Inserisci ogni volta prima di trascinare un nuovo livello.
7.
Dopo aver eseguito loperazione, utilizzare la finestra di ispezione Propriet per le operazioni seguenti:
Selezionare il primo livello, denominarlo header e impostarne le dimensioni su 700 pixel di larghezza per 24 pixel di altezza. Premere Invio (Windows) o A capo (Macintosh) per applicare lultima selezione.
Quando si seleziona un livello, assicurarsi di fare clic in un punto del bordo del livello o della maniglia di selezione, e non allinterno del livello. Il livello selezionato se sono visualizzate le maniglie di selezione sui bordi del livello e le propriet di larghezza e altezza nella finestra di ispezione Propriet. inoltre possibile selezionare un livello facendo clic sul suo nome nel Pannello livelli (Finestra > Livelli).
Selezionare il secondo livello, denominarlo center_content e impostarne le dimensioni su 700 pixel di larghezza per 350 pixel di altezza. Premere Invio (Windows) o A capo (Macintosh) per applicare lultima selezione.
NO TA
Quando si ridimensiona il livello center_content impostando laltezza su 350 pixel, esso si sovrapporr al livello restante sulla pagina. Prima di procedere, spostare il livello restante sotto center_content selezionandolo e trascinando la maniglia di selezione verso la parte inferiore della pagina.
Selezionare il terzo livello, denominarlo footer e impostarne le dimensioni su 700 pixel di larghezza per 24 pixel di altezza. Premere Invio (Windows) o A capo (Macintosh) per applicare lultima selezione.
Al termine, la pagina avr un aspetto simile al seguente:
8.
Quindi selezionare il livello header e trascinare la maniglia di selezione finch il livello si trovi direttamente sotto flash_fma. possibile verificare la posizione mentre si trascina il livello facendo clic allesterno del livello per deselezionarlo.
Inserimento di livelli
171
9. inoltre possibile spostare i livelli selezionati di un pixel per volta premendo i tasti freccia sulla tastiera. Mediante la finestra di ispezione Propriet, tentare di allineare il livello header a 20 pixel dal margine sinistro della pagina. Utilizzare quindi il tasto freccia SU per spostare il livello verso lalto fino al bordo inferiore del livello flash_fma.
Selezionare e trascinare il livello center_content e footer, o utilizzare i tasti freccia per posizione i livelli, come nellesempio seguente:
S U GG E R I M E N T O S UG GE R IM E N TO
inoltre possibile utilizzare il pulsante Riferimenti visivi sulla barra degli strumenti Documento per attivare o disattivare Sfondi layout CSS.
10. Dopo
aver posizionato i livelli, disattivare Sfondi layout CSS (se necessario) selezionando Visualizza > Riferimenti visivi e deselezionando Sfondi layout CSS.
Aggiunta di livelli allinterno di un livello

Gli ultimi livelli da creare saranno interni al livello center_content. Questi livelli fungeranno da equivalenti delle celle di tabella aggiunte alla pagina nel Capitolo 4, Esercitazione: Creazione di un layout di pagina basato su tabella.
1.
Fare clic una volta a destra dei livelli per verificare che nessun elemento sia selezionato.
2.
Nella categoria Layout della barra Inserisci fare clic su Disegna livello e trascinare un altro livello allinterno del livello center_content, come nellesempio seguente:
3.
Fare clic sulla maniglia di selezione del nuovo livello per verificare che sia selezionato. Con il nuovo livello selezionato, eseguire le operazioni seguenti nella finestra di ispezione Propriet:
4.
Fare clic nella casella di testo ID livello e rinominare il livello in navigation. Nella casella di testo Larghezza (L) digitare 140px Nella casella di testo Altezza (A) digitare 350px Nella casella di testo Sin (S) digitare 20px Premere Invio (Windows) o A capo (Macintosh) per applicare lultima selezione.
5.
Utilizzare il tasto freccia SU sulla tastiera per spostare il livello navigation finch sia perfettamente adattato allinterno del livello center_content, come nellesempio seguente:
6.
Creare un altro livello in center_content facendo clic su Disegna livello e trascinando un altro livello, come nellesempio seguente:
7.
Fare clic sulla maniglia di selezione del nuovo livello per verificare che sia selezionato. Con il nuovo livello selezionato, eseguire le operazioni seguenti nella finestra di ispezione Propriet:
8.
Fare clic nella casella di testo ID livello e rinominare il livello in flash_video. Nella casella di testo Larghezza (L) digitare 230px Nella casella di testo Altezza (A) digitare 350px Premere Invio (Windows) o A capo (Macintosh) per applicare lultima selezione.
9.
Trascinare il livello flash_video o utilizzare i tasti freccia sulla tastiera per posizione il livello come nellesempio seguente:
10. Creare un altro livello in center_content facendo clic su Disegna livello
e trascinando un altro livello, come nellesempio seguente:
11.
Fare clic sulla maniglia di selezione del nuovo livello per verificare che sia selezionato. il nuovo livello selezionato, eseguire le operazioni seguenti nella finestra di ispezione Propriet:
12. Con
Fare clic nella casella di testo ID livello e rinominare il livello in text. Nella casella di testo Larghezza (L) digitare 330px Nella casella di testo Altezza (A) digitare 350px Premere Invio (Windows) o A capo (Macintosh) per applicare lultima selezione.
13.
Trascinare il livello text o utilizzare i tasti freccia sulla tastiera per posizionarlo come indicato nellesempio seguente:
N OT A
Loperazione riuscita se sui bordi di un livello sono visualizzate linee tratteggiate, che indicano che i livelli sono sovrapposti di un pixel o due. 14. Salvare
la pagina.

il momento di aggiungere colore alla pagina impostando i colori di sfondo di alcuni livelli e dello sfondo della pagina.
1.
Selezionare il livello navigation facendo clic sul suo nome nel pannello Livelli (Finestra > Livelli).
possibile modificare la larghezza della colonna Nome nel pannello Livelli trascinando il bordo destro del titolo della colonna verso sinistra o destra.
2.
Nella finestra di ispezione Propriet fare clic una volta nella casella di testo Colore di sfondo. adiacente alla casella del colore Colore di sfondo (Sf ). Nella casella di testo Colore di sfondo digitare il valore esadecimale #993300 e premere Invio (Windows) o A capo (Macintosh).
3.
Il colore di sfondo del livello navigation diventa marrone-rossastro.

4.
Selezionare il livello flash_video facendo clic sul suo nome nel Pannello livelli. Nella casella di testo Colore di sfondo della finestra di ispezione Propriet, digitare il valore esadecimale #F7EEDF e premere Invio (Windows) o A capo (Macintosh). Il colore del livello diventa bronzo chiaro. Ripetere i punti precedenti per modificare il colore del livello text impostandolo su bronzo chiaro.
5.
6.
Aggiunta di colore alla pagina 179
7.
Una volta impostati i colori di sfondo per tutti e tre i livelli, fare clic una volta a destra di tutti i livelli per verificare che nessun elemento sia selezionato. Il prossimo passaggio consiste nel cambiare il colore di sfondo dellintera pagina modificando le propriet di pagina. La finestra di dialogo Propriet di pagina consente di impostare varie propriet della pagina, tra cui le dimensioni e il colore dei caratteri, i colori dei collegamenti visitati, i margini, ecc.
8. 9.
Selezionare Elabora > Propriet di pagina. Nella categoria Aspetto della finestra di dialogo Propriet di pagina, fare clic sulla casella di colore Colore di sfondo e selezionare il nero (#000000) dal selettore di colore.
10. Fare
clic su OK.
Lo sfondo della pagina diventa nero.

11.
Salvare la pagina.
Il layout della pagina CSS ora completo. Il layout include vari livelli che possono contenere risorse come immagini, testo e file Flash Video. Il passaggio successivo consiste nellaggiunta di contenuto.
Se si completata lesercitazione nel Capitolo 5, Esercitazione: Aggiunta del contenuto alle pagine, si sapr gi che possibile utilizzare Dreamweaver per inserire facilmente risorse nella propria pagina. In caso contrario, possibile utilizzare le illustrazioni come riferimento mentre si aggiunge contenuto al layout di pagina basato su CSS appena completato. La versione completa di questa esercitazione disponibile nella cartella cafe_townsend/completed_files/dreamweaver.
181
CAPITOLO 10
Esercitazione: Visualizzazione di dati XML

Questa esercitazione mostra come creare una pagina Web nella quale sono visualizzati dati XML. La visualizzazione dei dati XML comporta il recupero delle informazioni archiviate in un file XML locale o remoto e la loro riproduzione in una pagina Web. Il vantaggio principale dellutilizzo di dati XML nelle pagine Web la separazione del contenuto dalla presentazione. Il contenuto della pagina (i dati) risulta essere completamente separato dalla presentazione della pagina (il layout, la definizione dello stile del testo e cos via). In questo modo possibile utilizzare il file XML senza necessit di modificare la pagina di presentazione e viceversa. Bench non sia necessario, comunque consigliabile avere un minimo di familiarit con i fogli di stile CSS (Cascading Style Sheet) prima di affrontare questa esercitazione. In caso contrario, si consiglia di completare prima il Capitolo 6, Esercitazione: formattazione della pagina con i fogli di stile CSS, a pagina 105. Vengono illustrate le seguenti operazioni:
Individuare i file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 Valutazione del lavoro da svolgere. . . . . . . . . . . . . . . . . . . . . . . . . . 185 Informazioni sulluso di XML e XSL nelle pagine Web . . . . . . . . 186 Informazioni sulle pagine XSLT . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189 Conversione di una pagina da HTML a XSLT . . . . . . . . . . . . . . . . 190 Collegamento di unorigine dati XML alla pagina XSLT . . . . . . . .191 Modificare il layout della pagina XSLT . . . . . . . . . . . . . . . . . . . . . . 192 Associazione di dati XML alla pagina XSLT . . . . . . . . . . . . . . . . . 195 Applicazione di stili ai dati XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196 Creare un collegamento dinamico . . . . . . . . . . . . . . . . . . . . . . . . . . 198 Aggiunta di un oggetto XSLT Area ripetuta . . . . . . . . . . . . . . . . . 200 Collegare la pagina XSLT alla pagina XML . . . . . . . . . . . . . . . . . 202 Informazioni riguardanti ulteriori opzioni di trasferimento . . . . . 204
10
183
Individuare i file
I file necessari per completare questa esercitazione si trovano nella cartella xml, nella cartella principale cafe_townsend copiata sul computer in Capitolo 3, Esercitazione: Impostazione del sito e dei file di progetto. Nel caso non sia stata completata questa esercitazione, necessario procedere prima di continuare. La cartella XML contiene il file principale da utilizzare in questa esercitazione (xml_menu.html), il foglio di stile CSS per la pagina del menu (xml_menu.css), un file contenente i dati XML (specials.xml), una cartella per le immagini e una serie di altre pagine HTML. La versione completata dellesercitazione, xml_menu.xsl, si trova nella directory cafe_townsend/completed_files/dreamweaver/xml.
184 Esercitazione: Visualizzazione di dati XML

Cafe Townsend, un ristorante fittizio, pubblica sul proprio sito una lista delle specialit del giorno. Per farlo viene utilizzata una tabella HTML con una serie di righe per la visualizzazione delle informazioni. La colonna di sinistra di ogni riga contiene il nome e la descrizione dellarticolo. La colonna di destra di ogni riga contiene il prezzo. Tutte le informazioni presenti sulla pagina vengono inserite manualmente (non provengono quindi da unorigine dati dinamica) e il testo formattato con un foglio di stile esterno.
I proprietari del Cafe Townsend hanno deciso di dare maggiore dinamicit al proprio sito, utilizzando i dati di un file XML per la visualizzazione delle specialit del giorno. Lutilizzo dellXML consente di separare i contenuti della pagina (le specialit del menu) dalla presentazione (il layout, la definizione dello stile del testo e cos via). Un impiegato senza alcuna conoscenza del linguaggio HTML n della manutenzione di pagine Web pu facilmente aggiornare le informazioni modificando il file XML, mentre la pagina nella quale sono visualizzate le informazioni sul menu non subisce alcuna modifica. In questa esercitazione verr convertita lattuale pagina delle specialit (una pagina HTML) in una pagina XSLT, in modo che in essa sia possibile visualizzare dati XML. Verranno anche applicati stili ai dati XML in modo che il loro aspetto sia coerente con il resto della pagina. Se si ha gi dimestichezza con la modifica di file XML e XSLT e con le trasformazioni client-side, possibile passare direttamente a Conversione di una pagina da HTML a XSLT a pagina 190. In caso contrario, proseguire nella lettura delle sezioni che seguono.
Informazioni sulluso di XML e XSL nelle pagine Web

XML lacronimo di Extensible Markup Language, un linguaggio che permette di strutturare le informazioni. Analogamente al linguaggio HTML, XML consente di strutturare i dati mediante i tag, ma i tag XML non sono predefiniti come nel caso di HTML. Al contrario, nel linguaggio XML possibile creare tag personalizzati in base alla struttura specifica che si desidera applicare ai dati. I tag vengono nidificati allinterno di altri tag, creando uno schema gerarchico. Come la maggior parte dei tag HTML, tutti i tag di uno schema XML prevedono un tag di apertura e uno di chiusura.
Lesempio seguente illustra la struttura di base di un file XML:

<?xml version=1.0> <mybooks> <book bookid=1> <pubdate>03/01/2004</pubdate> <title>Displaying XML Data with Macromedia Dreamweaver</ title> <author>Charles Brown</author> </book> <book bookid=2> <pubdate>04/08/2004</pubdate> <title>Understanding XML</title> <author>John Thompson</author> </book> </mybooks>
In questo esempio, ogni tag <book> di livello superiore contiene tre tag di livello inferiore: <pubdate>, <title> e <author>. Ciascun tag <book> tuttavia di livello inferiore rispetto al tag <mybooks>, che si trova a un livello pi alto nello schema gerarchico. possibile denominare e strutturare i tag XML nel modo desiderato, a condizione che siano nidificati correttamente e che per ogni tag di apertura sia presente il tag di chiusura corrispondente. I documenti XML non contengono alcuna formattazione, bens unicamente dati strutturati. Si noter che il codice di esempio non include tag relativi a caratteri, tabelle o intestazioni. Una volta definito uno schema XML, possibile utilizzare il linguaggio XSL (Extensible Stylesheet Language) per visualizzare le informazioni. Cos come i fogli di stile CSS consentono di formattare i file HTML, il linguaggio XSL consente di formattare i dati XML. possibile definire stili, elementi di pagina, layout e cos via allinterno di un file XSL e collegarlo a un file XML in modo che, quando un utente visualizza i dati XML in un browser, questi vengano formattati secondo le definizioni presenti nel file XSL. Il contenuto (i dati XML) e la presentazione (definita nel file XSL) sono completamente separati, consentendo allutente un maggiore controllo sul modo in cui le informazioni sono visualizzate in una pagina Web. In sintesi, lXSL una tecnologia di presentazione per i file XML, in cui loutput primario una pagina HTML.
Informazioni sulluso di XML e XSL nelle pagine Web 187
XSLT (Extensible Stylesheet Language Transformations) un sottoinsieme del linguaggio XSL che consente di visualizzare effettivamente i dati XML su una pagina Web e di trasformarli, tramite gli stili XSL, in informazioni leggibili formattate con il linguaggio HTML. possibile utilizzare Dreamweaver per creare pagine XSLT che permettono di eseguire trasformazioni XSL utilizzando un server applicazioni o un browser. Quando si esegue una trasformazione XSL server-side, il server che si occupa di trasformare i dati XML e XSL e di visualizzarli sulla pagina. Nel caso di una trasformazione client-side, invece, questa attivit viene eseguita da un browser, ad esempio Internet Explorer. Lapproccio che si decide di adottare (trasformazioni server-side piuttosto che client-side) dipende dal risultato che si intende ottenere, dalle tecnologie a disposizione, dal livello di accesso ai file XML di origine e da altri fattori. Entrambi gli approcci hanno vantaggi e svantaggi. Ad esempio le trasformazioni server-side funzionano con qualsiasi browser mentre le trasformazioni client-side sono utilizzabili solo con i browser pi recenti (Internet Explorer 6, Netscape 8, Mozilla 1.8 e Firefox 1.0.2). Le trasformazioni server-side consentono la visualizzazione dinamica di dati XML dal proprio server o da qualsiasi altra posizione sul Web, mentre i dati XML utilizzati dalle trasformazioni client-side devono essere presenti in locale sul proprio server Web. Infine, le trasformazioni server-side richiedono che le pagine vengano gestite da un server applicazioni, mentre per le trasformazioni client-side sufficiente un server Web. Questa esercitazione consente di creare una pagina XSLT e di effettuare una trasformazione client-side (principalmente perch il flusso di lavoro client-side molto pi semplice da eseguire e non richiede lutilizzo di un server applicazioni). Per ulteriori informazioni su altri metodi di trasferimento delle pagine XSLT, fare riferimento a Informazioni riguardanti ulteriori opzioni di trasferimento a pagina 204.
Informazioni sulle pagine XSLT

Quando si utilizzano le trasformazioni XSL server-side, possibile creare pagine XSLT che generano documenti HTML completi (pagine XSLT intere) oppure frammenti XSLT che generano solo una parte di un documento HTML. Una pagina XSLT intera simile a una pagina HTML standard: contiene un tag <body> e un tag <head> e consente di visualizzare una combinazione di dati HTML e XML nella pagina. Un frammento XSLT una sequenza di codice, contenuta in un documento distinto, nella quale sono visualizzati dati XML. A differenza di una pagina XSLT intera, un file indipendente che non contiene i tag <body> o <head>. Se si desidera visualizzare dati XML in una pagina indipendente, necessario creare una pagina XSLT intera e associarle i dati XML. Per visualizzare invece i dati XML in una particolare sezione di una pagina dinamica esistente, ad esempio la pagina principale di un negozio di articoli sportivi, con i risultati delle partite provenienti da un feed RSS visualizzati da un lato, necessario creare un frammento XSLT e inserirne i riferimenti nella pagina dinamica. La creazione di frammenti XSLT e il loro utilizzo unitamente ad altre pagine dinamiche per consentire la visualizzazione di dati XML costituiscono lo scenario pi comune nellambito delle trasformazioni server-side. In questa esercitazione verr creata una pagina XSLT intera utilizzata per la trasformazione di un file XML di esempio. La trasformazione sar di tipo client-side, utilizzabile solo con un browser recente (Internet Explorer 6, Netscape 8, Mozilla 1.8 o Firefox 1.0.2). Le trasformazioni server-side vanno oltre lambito di questa esercitazione, dato che richiedono la presenza di un server applicazioni configurato con un motore di trasformazione. Per una panoramica globale relativa alle trasformazioni XSL server-side e client-side, vedere Informazioni sulle trasformazioni XSL server-side e Informazioni sulle trasformazioni XSL server-side in Uso di Dreamweaver (Guida in linea > Uso di Dreamweaver). Per ulteriori risorse, comprese esercitazioni tramite le quali apprendere maggiori informazioni sulle trasformazioni server-side, vedere www.macromedia.com/go/dw_xsl_it.
Informazioni sulle pagine XSLT 189
Conversione di una pagina da HTML a XSLT

Innanzitutto si proceder alla conversione della pagina delle specialit del Cafe Townsend, una pagina HTML, in una pagina XSLT in grado di visualizzare dati XML.
1.
Nel Pannello file (Finestra > File) individuare il file xml_menu.html e fare doppio clic per aprirlo. Il file xml_menu.html file si trova nella cartella xml, allinterno della cartella principale cafe_townsend. Per ulteriori informazioni, vedere Individuare i file a pagina 184. Selezionare File > Converti > XSLT 1.0.
2.
In Dreamweaver viene aperta una copia della pagina xml_menu nella finestra del documento. La nuova pagina un foglio di stile XSL, salvato con lestensione .xsl.
3.
Fare clic sulla pagina the xml_menu.html e chiuderla in modo che nella finestra del documento venga visualizzata solo la nuova pagina xml_menu.xsl.
Collegamento di unorigine dati XML alla pagina XSLT

Si proceder ora a collegare unorigine dati XML alla pagina mediante il pannello Associazioni.
1.
Nel pannello Associazioni (Finestra > Associazioni), fare clic sul collegamento XML.
N OT A
Per aggiungere unorigine dati XML, possibile anche fare clic sul collegamento Origine nellangolo superiore destro del pannello Associazioni. 2.
Selezionare Associa un file locale (dovrebbe essere selezionato come valore predefinito), fare clic sul pulsante Sfoglia, individuare il file specials.xml sul computer (nella cartella cafe_townsend/xml) e fare clic su OK. Fare clic su OK per chiudere la finestra di dialogo Individua origine XML.
3.
Collegamento di unorigine dati XML alla pagina XSLT
191
Dreamweaver compila il pannello Associazioni con lo schema dellorigine dati XML.
Per una guida ai simboli nello schema, vedere Creazione di pagine XSLT in Uso di Dreamweaver (Guida in linea > Uso di Dreamweaver).
Modificare il layout della pagina XSLT

Dato che nella pagina si utilizzeranno i dati XML anzich testo statico, non saranno pi necessarie tutte le righe della tabella. Si proceder ora a eliminare tutte le righe della tabella eccetto una, che verr utilizzata per la visualizzazione dei dati.
1.
Fare clic sullultima riga della tabella (che corrisponde a New York Cheesecake) e fare clic sul tag <tr> pi a destra nel Selettore di tag per selezionare la riga.
2. 3.
Fare clic su Canc. Ripetere i precedenti passaggi per cancellare le righe contenenti Grilled Pacific Salmon e Thai Noodle Salad. Una volta terminata loperazione, nella pagina sar presente una sola riga, corrispondente a Summer Salad. Selezionare tutto il testo nella cella a sinistra della tabella.
4.
5.
Nella finestra di ispezione Propriet (Finestra > Propriet) selezionare Nessuna dal menu a comparsa Stile.
Questo passaggio consente di rimuovere lo stile della classe di menu dal testo selezionato. In un normale flusso di lavoro, questa operazione non sarebbe possibile. In questa esercitazione si stanno cancellando tutti gli stili in modo da apprendere, in un secondo momento, come applicarli ai dati XML.
6. 7.
Dopo aver selezionato il testo, premere il tasto Canc. Salvare il lavoro (File > Salva).
Modificare il layout della pagina XSLT 193
Associazione di dati XML alla pagina XSLT

ora possibile associare dati XML alla pagina.
1.
Nel pannello Associazioni (Finestra > Associazioni) selezionare la voce corrispondente allarticolo e trascinarla nella cella vuota della tabella.
Nella pagina viene visualizzato un segnaposto per dati XML, evidenziato e racchiuso tra parentesi graffe. Viene utilizzata la sintassi XPath (linguaggio XML Path) per descrivere la struttura gerarchica dello schema XML.
2.
Premere il tasto freccia a destra sulla tastiera per spostare il punto di inserimento a destra del segnaposto dati XML. Premere la barra spazio, digitare un trattino e premere di nuovo la barra spazio.
3.
4.
Nel pannello Associazioni selezionare lelemento di descrizione e trascinarlo in corrispondenza del punto di inserimento.
Nella pagina viene visualizzato un altro segnaposto dati XML, In base alla risoluzione utilizzata per il monitor, il segnaposto potrebbe spostarsi sulla riga successiva. In questo momento non necessario tenere conto di questo comportamento. Quando la pagina verr visualizzata in un browser, i dati verranno visualizzati sulla tabella di conseguenza.
5. 6.
Infine, selezionare il prezzo (7) nella cella di destra. Nel pannello Associazioni fare doppio clic sullelemento relativo al prezzo. Di nuovo, il segnaposto dati XML influenza il layout della pagina. In questo momento non necessario tenere conto di questo comportamento.
N OT A
Il segnaposto per dati XML relativi al prezzo mantiene la formattazione con lo stile della classe del menu in quanto non sono stati rimossi gli stili come per la cella di sinistra. 7.
Salvare la pagina, quindi visualizzare unanteprima del lavoro in una finestra di browser premendo F12 (Windows) o Opzione+F12 (Macintosh). Nel browser viene visualizzata la pagina con una riga di dati dal file XML.
Applicazione di stili ai dati XML

Si proceder ora ad applicare gli stili ai segnaposto per dati XML relativi allarticolo e alla descrizione. Quando si applicano gli stili a un segnaposto per dati XML, questi vengono visualizzati nel testo del segnaposto stesso. Successivamente, quando viene visualizzata in un browser unanteprima della pagina, i dati XML risultanti mostreranno anche gli stili assegnati.
Applicazione di stili ai dati XML 195
1.
Fare clic sulla cella di sinistra e poi sul tag <td> pi a destra nel Selettore di tag per selezionare la cella.
Si sta selezionando la cella in modo da poterne formattare tutti i contenuti contemporaneamente, incluso il trattino.
2.
Nella finestra di ispezione Propriet selezionare menu dalla lista di stili di classi nel menu a comparsa Stile. Fare clic sulla cella a sinistra per deselezionarla. Fare clic sul segnaposto per dati XML dellarticolo per selezionarlo. Nella finestra di ispezione Propriet fare clic sul pulsante Corsivo.
3. 4. 5.
6.
Salvare la pagina, quindi visualizzare unanteprima del lavoro in una finestra di browser premendo F12 (Windows) o Opzione+F12 (Macintosh).
Per maggiori informazioni sullapplicazione di stili ai dati XML, vedere Applicazione di stili a frammenti XSLT in Uso di Dreamweaver (Guida in linea > Uso di Dreamweaver).
Creare un collegamento dinamico

Si proceder ora a creare un collegamento dinamico in modo da collegare il nome dellarticolo sul menu delle specialit a una pagina con una sua immagine.
1.
Nella finestra del documento fare clic sul segnaposto per dati XML dellelemento per selezionarlo. Nella finestra di ispezione Propriet fare clic sullicona Cerca file accanto alla casella di testo Collegamento.
2.
Creare un collegamento dinamico 197
3.
Nella finestra di dialogo Selezionare file, selezionare Origini dati. Nei sistemi Windows lopzione si trova nella parte superiore della finestra di dialogo. Nei sistemi Macintosh nella parte inferiore.
4.
Quando nella finestra di dialogo viene visualizzato lo schema XML, selezionare lelemento del collegamento.
5.
Fare clic su OK. In Dreamweaver viene creato un collegamento dinamico. Nel file XML, ogni elemento link fa riferimento a una pagina HTML contenente unimmagine del rispettivo articolo del menu.
NO TA
Aprendo il file specials.xml ed esaminando il codice, possibile notare che ogni elemento <link> contiene il nome del file HTML che include limmagine dellarticolo di menu corrispondente. Si tratta del percorso del file HTML, poich le pagine HTML contenenti le immagini si trovano nella stessa cartella xml della pagina XSLT che si sta utilizzando. Lelemento link sempre un percorso completo verso la pagina collegata ed spesso scritto sotto forma di un indirizzo HTTP. 6.
Salvare la pagina, quindi visualizzare unanteprima del lavoro in una finestra di browser premendo F12 (Windows) o Opzione+F12 (Macintosh). Il browser visualizza la pagina con un collegamento attivo. Facendo clic sul collegamento possibile passare a una nuova pagina.
Aggiunta di un oggetto XSLT Area ripetuta

Loggetto XSLT Area ripetuta consente di visualizzare gli elementi ripetuti di unorigine dati XML allinterno di una pagina Web. Nel seguente passaggio si aggiunger alla tabella loggetto XSLT Area ripetuta in modo da poter visualizzare pi specialit nella stessa pagina.
1.
Nella finestra del documento fare clic sulla riga della tabella che include i segnaposto per dati XML. Nel Selettore di tag fare clic sul tag <tr> pi a destra per selezionare la riga della tabella.
2.
Aggiunta di un oggetto XSLT Area ripetuta 199
3.
Selezionare Inserisci > Oggetti XSLT > Area ripetuta.
4.
In Costruzione espressioni XPATH, selezionare lelemento ripetuto menu_item. Gli elementi ripetuti sono indicati da un piccolo segno "pi" (+).
5.
Fare clic su OK. Nella finestra del documento viene visualizzato un sottile contorno tratteggiato grigio attorno allarea ripetuta. Sar necessario deselezionare la tabella per visualizzarlo. Successivamente, quando si visualizzer unanteprima del lavoro in un browser, la cornice grigia scomparir e la selezione si espander per visualizzare nel file XML gli elementi ripetuti specificati. Inoltre, Dreamweaver ridurr la lunghezza del segnaposto per dati XML. Questo perch lXPath per il segnaposto dati XML viene aggiornato in modo da essere relativo al percorso dellelemento ripetuto. Per ulteriori informazioni su questi argomenti, vedere Informazioni sui dati XML e sugli elementi ripetuti nella guida Uso di Dreamweaver.
6.
Salvare la pagina, quindi visualizzare unanteprima del lavoro in una finestra di browser premendo F12 (Windows) o Opzione+F12 (Macintosh). Nel browser viene ora visualizzata la pagina con ogni articolo del menu.
Collegare la pagina XSLT alla pagina XML

Una volta completata la pagina XSLT, necessario collegarla alla pagina XML Quando si utilizza Dreamweaver per effettuare il collegamento della pagina, un collegamento alla pagina XSLT viene inserito nella parte superiore della pagina XML. La pagina XML quella che apparir ai visitatori del sito quando questi visualizzeranno la pagina online. Questo perch necessario accedere alla pagina di contenuti nella quale si trovano i dati (il file XML) anzich alla pagina che include gli stili (la pagina XSLT).
NO T A
I file XML e XSL utilizzati per le trasformazioni client-side devono trovarsi nella stessa directory. In caso contrario, il file XML viene letto dal browser e in esso viene trovata la pagina XSLT per la trasformazione, ma non possibile individuare le risorse (fogli di stile, immagini e cos via) definite dai collegamenti relativi nella pagina XSLT. 1.
Con la pagina xml_menu.xsl aperta nella finestra del documento, se necessario aprire il pannello Associazioni (Finestra > Associazioni).
Collegare la pagina XSLT alla pagina XML 201
2.
Nel pannello Associazioni fare doppio clic su Schema per aprire il file specials.xml. necessario fare doppio clic sulle parole, non sullicona della pagina. Selezionare Comandi > Allega un foglio di stile XSLT. Nella finestra di dialogo Allega un foglio di stile XSLT fare clic sul pulsante Sfoglia, cercare la pagina xml_menu.xsl, selezionarla e fare clic su OK. Fare clic su OK per chiudere la finestra di dialogo Associa un foglio di stile XSLT.
3. 4.
5.
Nella parte superiore del documento XML viene inserito il riferimento alla pagina XSLT.
6. 7.
Salvare la pagina specials.xml. Visualizzare unanteprima della pagina XML (non della pagina XSLT) in una finestra di browser premendo F12 (Windows) o Opzione+F12 (Macintosh).
La pagina XML viene visualizzata in un browser, con lo stile definito nella pagina XSLT creata.
Si tenga presente che, una volta trasferite le pagine sul server Web, i visitatori del sito apriranno la pagina XML (non la pagina XSLT). Per maggiori informazioni, vedere Informazioni sulle trasformazioni XSL server-side in Uso di Dreamweaver (? > Uso di Dreamweaver).
Informazioni riguardanti ulteriori opzioni di trasferimento

In questa esercitazione si appreso come creare una pagina XSLT intera da utilizzare come parte di una trasformazione client-side. Tuttavia, per le trasformazioni server-side possibile utilizzare anche pagine XSLT intere. Quando si utilizza una pagina XSLT intera per una trasformazione serverside, la si costruisce esattamente nello stesso modo.
Informazioni riguardanti ulteriori opzioni di trasferimento 203
Lapproccio pi comune per la creazione di trasformazioni server-side, comunque, lutilizzo di frammenti XSLT. Un frammento XSLT una sequenza di codice, contenuta in un documento distinto, nella quale sono visualizzati dati XML. Per una breve panoramica relativa alle pagine XSLT intere e ai frammenti XSLT, vedere Informazioni sulle pagine XSLT a pagina 189. Per una panoramica pi dettagliata sul funzionamento delle pagine intere XSLT e dei frammenti XSLT, vedere Informazioni sulle trasformazioni XSL server-side in Uso di Dreamweaver (Guida in linea > Uso di Dreamweaver). Per esercitazioni e altre risorse che forniscano informazioni sullutilizzo di frammenti XSLT, visitare www.macromedia.com/go/dw_xsl_it. Quello che segue il flusso di lavoro per la creazione di trasformazioni server-side con pagine XSLT:
Creare un sito Dreamweaver. Vedere Capitolo 2, Impostazione di un sito Dreamweaver in Uso di Dreamweaver. Scegliere una tecnologia server e impostare un server applicazioni. Vedere Impostazione di un server applicazioni in Uso di Dreamweaver. Verificare il server applicazioni per assicurarsi che funzioni correttamente. Creare ad esempio una pagina che richieda unelaborazione e assicurarsi che il server applicazioni la esegua. Per unesercitazione a questo riguardo, collegarsi allindirizzo www.macromedia.com/go/dw_xsl_it. Effettuare una delle seguenti operazioni:
Nel sito Dreamweaver creare un frammento XSLT o una pagina XSLT intera. Vedere Creazione di pagine XSLT in Uso di Dreamweaver. Convertire una pagina HTML esistente in una pagina XSLT intera. Vedere Conversione di pagine HTML in pagine XSLT in Uso di Dreamweaver.
Se non lo si gi fatto, collegare unorigine dati XML alla pagina. Vedere Collegamento di origini dati XML in Uso di Dreamweaver. Associare i dati XML al frammento XSLT o alla pagina XSLT intera. Vedere Visualizzazione di dati XML nelle pagine XSLT in Uso di Dreamweaver.
Se necessario, aggiungere un oggetto XSLT Area ripetuta alla tabella o alla riga della tabella contenente i segnaposto per dati XML. Vedere Visualizzazione di elementi XML ripetuti in Uso di Dreamweaver. Effettuare una delle seguenti operazioni:
Utilizzare il comportamento server Trasformazione XSL per inserire un riferimento al frammento XSLT nella propria pagina dinamica. Vedere Inserimento di frammenti XSLT nelle pagine dinamiche in Uso di Dreamweaver. Eliminare tutto il codice HTML da una pagina dinamica, quindi utilizzare il comportamento server Trasformazione XSL per inserire un riferimento alla pagina XSLT intera nella pagina dinamica.
Inviare sia la pagina dinamica sia il frammento XSLT (o la pagina XSLT intera) al proprio server applicazioni. Se si sta utilizzando un file XML locale, necessario inviare anche quello. Visualizzare la pagina dinamica in un browser. Quando si effettua questa operazione, il server applicazioni trasforma i dati XML, li inserisce nella pagina dinamica e li visualizza nel browser.
Informazioni riguardanti ulteriori opzioni di trasferimento 205
CAPITOLO 11
Esercitazione: Sviluppo di unapplicazione Web

In questa esercitazione viene illustrato come utilizzare Macromedia Dreamweaver 8 per cominciare a sviluppare applicazioni Web dinamiche, basate su database, per presentare le informazioni contenute in un database allinterno di pagine Web. Nelle pagine Web verranno visualizzati i dati del sito Cafe Townsend, usando un database di esempio fornito con Dreamweaver. Inoltre, si utilizzer Dreamweaver per creare un modulo di inserimento record per consentire ai visitatori di lasciare dei commenti. Vengono illustrate le seguenti operazioni:
Prima di iniziare . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208 Valutazione del lavoro da svolgere. . . . . . . . . . . . . . . . . . . . . . . . . 209 Apertura del documento da modificare. . . . . . . . . . . . . . . . . . . . . . 210 Definizione di un recordset . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212 Visualizzazione dei record del database . . . . . . . . . . . . . . . . . . . . . 216 Aggiunta di campi dinamici alla tabella . . . . . . . . . . . . . . . . . . . . . . 218 Impostazione di unarea ripetuta. . . . . . . . . . . . . . . . . . . . . . . . . . . . 219 Visualizzazione della pagina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220 Creazione di un modulo di inserimento record . . . . . . . . . . . . . . 220 Copia dei file sul server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226 Approfondimenti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .227
11
207
Prima di iniziare
necessario impostare lambiente di lavoro di Dreamweaver per lo sviluppo dellapplicazione prima di poter completare questa esercitazione. Per informazioni sulla configurazione, vedere il capitolo relativo al server di applicazione utilizzato nellelenco seguente. Se non si sicuri del server applicazioni da usare, rivolgersi allamministratore di sistema.
Appendice C, Configurazione di un sito ColdFusion di esempio, a pagina 253 Appendice D, Configurazione di un sito ASP.NET di esempio, a pagina 271 Appendice E, Configurazione di un sito ASP di esempio, a pagina 285 Appendice F, Configurazione di un sito JSP di esempio, a pagina 301 Appendice G, Configurazione di un sito PHP di esempio, a pagina 317 Configurazione del sistema Configurazione di Dreamweaver per il funzionamento con il server applicazioni prescelto. Definizione di una connessione al database
Questi capitoli di configurazione illustrano le seguenti operazioni:

Non possibile eseguire lesercitazione finch tali operazioni non sono state completate. Le immagini di schermata di questa esercitazione mostrano le finestre di dialogo di Macromedia ColdFusion. Tuttavia, possibile seguire le lezioni dellesercitazione con tutti gli altri modelli server supportati da Dreamweaver 8.
208 Esercitazione: Sviluppo di unapplicazione Web

Lattivit richiesta la creazione delle pagine dinamiche seguenti per il sito Web di Cafe Townsend:

Una pagina che visualizza i commenti gi presenti nel database. Una pagina che consente ai visitatori del sito di inviare alla societ commenti che vengono memorizzati in un database.
La pagina che consente al personale di Cafe Townsend di visualizzare i commenti nel database avr laspetto seguente:
La pagina che consente ai visitatori di inviare commenti avr laspetto seguente:
Apertura del documento da modificare

Per sviluppare unapplicazione di database, consigliabile iniziare con la creazione di una pagina che contiene lelenco dei record memorizzati nel database. Per lapplicazione da creare in questa esercitazione, verr creata una pagina Web dinamica che riporta le informazioni tratte dalla tabella del database contenente i commenti dei clienti. Verr quindi creata unaltra pagina Web dinamica che consentir al cliente di inserire commenti e domande direttamente nel database. Si proceda innanzi tutto con lindividuare i documenti che verranno utilizzati per creare le pagine.
1.
Selezionare Finestra > File per aprire il pannello File. Viene visualizzato il pannello File.
2.
Nel menu a comparsa Sito selezionare il sito Cafe Townsend definito durante limpostazione del sito. Per ulteriori informazioni, vedere i capitoli di configurazione riportati in Prima di iniziare a pagina 208.
3.
Nel pannello File fare doppio clic sul file view per aprirlo. Il documento viene aperto nella finestra del documento. Se il documento visualizzato nella vista Codice, fare clic sul pulsante Mostra vista Progettazione (con letichetta Progettazione) o sul pulsante Mostra viste Codice e Progettazione (con letichetta Dividi) nella barra degli strumenti del documento in modo da poter utilizzare le schermate disponibili come punti di controllo nel corso dellesercitazione.
4.
Apertura del documento da modificare
211
Definizione di un recordset
La procedura seguente illustra come creare un recordset per selezionare i dati da visualizzare. Un recordset un insieme di dati estratti da un database mediante una query. In ASP.NET un recordset viene definito DataSet. Una query di database rappresenta un modo per richiedere dati a un database usando criteri di ricerca specificati, solitamente in un linguaggio chiamato SQL. Le informazioni estratte sono quindi utilizzabili come origine del contenuto delle pagine dinamiche. Dreamweaver offre uninterfaccia di facile utilizzo per la creazione di query SQL semplici: per creare un recordset in Dreamweaver non necessario conoscere la sintassi SQL. Verr ora creato un recordset che seleziona tutti i valori della tabella COMMENTS nel database tutorial.
N OT A
per poter completare questa procedura, necessario impostare una connessione al database. Per ulteriori informazioni, vedere Prima di iniziare a pagina 208. 1.
Nel documento Cafe Townsend aperto in Dreamweaver, inserire il punto di inserimento sotto lintestazione Customer Comments. Aprire la finestra di dialogo Recordset oppure (per ASP.NET) la finestra di dialogo DataSet effettuando una delle seguenti operazioni:
2.
Nella categoria Applicazione della barra Inserisci, fare clic su Recordset o (per ASP.NET) su DataSet. Scegliere Finestra > Associazioni per aprire il pannello Associazioni, quindi fare clic sul pulsante pi (+) e selezionare Recordset oppure (per ASP.NET) DataSet.
Viene visualizzata la finestra di dialogo Recordset oppure (per ASP.NET) DataSet.
NO T A
Se la finestra di dialogo visualizzata pi complessa di quella riportata di seguito, fare clic sul pulsante Semplice. 3. 4.
Nella casella di testo Nome, digitare rs_Comment. Dal menu a comparsa Origine dati (ColdFusion) o Connessione (altri tipi di pagina server), selezionare connTownsend.
Definizione di un recordset 213
La finestra di dialogo Recordset o DataSet viene aggiornata con i dati del database.
5.
Se allorigine dati o alla connessione sono associati un nome utente e una password, inserirli. Se al momento dellimpostazione dellorigine dati non sono stati forniti un nome utente o una password, lasciare vuote le caselle. Nel menu a comparsa Tabella, lasciare selezionata lopzione COMMENTS. Assicurarsi che per Colonne sia selezionato Tutto, in modo che vengano selezionate tutte le colonne della tabella. Lasciare il menu a comparsa Filtro impostato su Nessuno, in modo che vengano selezionate tutte le righe della tabella. Dal primo menu a comparsa Ordina, selezionare LAST_NAME; dal secondo menu a comparsa, selezionare Ascendente.
6.
7.
8.
9.
In questo modo, nei record richiamati i dati appaiono ordinati alfabeticamente per cognome del cliente.
10. Fare
clic su Prova per eseguire una verifica del recordset o del DataSet.
I record del database corrispondenti ai criteri specificati per la selezione dei recordset o DataSet vengono visualizzati nella finestra Esegui test istruzione SQL. In questo caso, sono stati selezionati tutti i dati presenti nella tabella.
Definizione di un recordset 215
11.
Fare clic su OK per chiudere la finestra Esegui test istruzione SQL. clic su OK per chiudere la finestra di dialogo Recordset o DataSet e creare un recordset o DataSet. Il recordset viene visualizzato nel pannello Associazioni. La finestra del documento non viene modificata.
12. Fare
Se nel pannello Associazioni non sono visibili tutti i campi di recordset, fare clic sul pulsante pi (+) (Windows) o sulla freccia di espansione (Macintosh) accanto a Recordset (rs_Comment) per espandere la struttura di recordset.
Visualizzazione dei record del database

La procedura seguente illustra come creare una pagina contenente lelenco dei record inclusi nella tabella COMMENTS. Si proceder col generare la pagina dinamicamente anzich inserire le informazioni manualmente. La prima operazione consiste nel creare una tabella per organizzare lelenco di dati.
1.
Nel documento Cafe Townsend, spostare il punto di inserimento nella riga vuota dopo lintestazione "Customer Comments". Inserire una tabella effettuando una delle seguenti operazioni:
2.
Nella barra Inserisci, selezionare la categoria Comune, quindi fare clic sul pulsante Tabella o trascinarlo nel documento. Selezionare Inserisci > Tabella.
Viene visualizzata la finestra di dialogo Tabella.
3.
Nella finestra di dialogo, impostare le opzioni seguenti:

Nella casella Righe, inserire 2. Nella casella Colonne, inserire 4. Lasciare Larghezza tabella impostata su 100 percento. Lasciare Spessore bordo impostato su 1. Nella casella Margine celle, inserire 2. Nella casella Spaziatura celle, inserire 2. Nella sezione Intestazione, selezionare lopzione In alto.
Nella casella di testo Riepilogo, fornire una descrizione della tabella a beneficio dei visitatori che usano gli screen reader, come quella che segue: Questa tabella riporta tutti i commenti inseriti dai visitatori del sito nel database. La finestra di dialogo completa dovrebbe contenere le seguenti informazioni:
4.
Fare clic su OK. La tabella viene inserita nel documento.
Visualizzazione dei record del database 217
5.
Nella prima riga della tabella inserire le etichette per le voci della tabella:

Nella prima cella della tabella, inserire Nome. Nella cella successiva, inserire Cognome. Nella cella successiva, inserire Indirizzo e-mail. Nellultima cella, inserire Commenti.
6.
Salvare la pagina.
Aggiunta di campi dinamici alla tabella

ora possibile aggiungere campi di recordset alla tabella.
1.
Se non gi aperto, aprire il pannello Associazioni effettuando una delle seguenti operazioni.

Selezionare Finestra > Associazioni. Fare clic sulla freccia di espansione del gruppo di pannelli Applicazione, quindi selezionare il pannello Associazioni.
2.
Aggiungere il campo FIRST_NAME alla tabella effettuando una delle seguenti operazioni:
Posizionare il punto di inserimento nella cella sottostante letichetta Nome, quindi nel pannello Associazioni selezionare FIRST_NAME e fare clic su Inserisci. Trascinare FIRST_NAME dal pannello Associazioni alla cella della tabella sotto letichetta Nome.
3.
Ripetere il passaggio 2 per aggiungere LAST_NAME, EMAIL e COMMENTS (non COMMENT_ID) alla tabella. La tabella dovrebbe essere simile a quella illustrata di seguito. Potrebbe essere necessario ingrandire la finestra del documento per visualizzarla per intero.
4.
Salvare la pagina.
Impostazione di unarea ripetuta

La tabella creata contiene una sola riga di dati. Per visualizzare tutti i record necessario impostare la riga di tabella come area ripetuta. Quando viene visualizzata in un browser, la tabella contiene una riga per ogni record che corrisponde ai criteri di ricerca del recordset.
1.
Nella finestra del documento, selezionare la riga di tabella inferiore effettuando una delle seguenti operazioni:
Fare clic in una cella e quindi, nel Selettore di tag, fare clic sullultimo tag <tr> nellelenco. Posizionare il puntatore sul bordo sinistro della riga di tabella. Quando il puntatore assume la forma di una freccia verso destra, fare clic sul bordo della riga per selezionarla. Nel pannello Comportamenti server, fare clic sul pulsante pi (+) e selezionare Area ripetuta. Nella categoria Applicazione della barra Inserisci, fare clic sul pulsante Area ripetuta. Selezionare Inserisci > Oggetti applicazione > Area ripetuta.
2.
Creare unarea ripetuta effettuando una delle seguenti operazioni:
Viene visualizzata la finestra di dialogo Area ripetuta.
3.
Nella finestra di dialogo, fare clic su OK per accettare le impostazioni predefinite. La riga di tabella viene visualizzata in un contorno; sopra di essa e alla sua sinistra appare una linguetta per indicare che si tratta di unarea ripetuta. Letichetta della linguetta cambia in base alla tecnologia server utilizzata.
4.
Salvare la pagina.
Impostazione di unarea ripetuta 219
Visualizzazione della pagina

A questo punto, si deve visualizzare la pagina. Per visualizzare in Dreamweaver una pagina con laspetto che avrebbe dopo lelaborazione da parte del server possibile utilizzare la vista Live Data. Con il documento Cafe Townsend ancora attivo, effettuare una delle seguenti operazioni per visualizzare i dati nelle pagine:
Nella barra degli strumenti del documento fare clic sul pulsante Vista Live Data. Selezionare Visualizza > Live Data. La pagina viene aggiornata per mostrare i dati estratti dal database.
Creazione di un modulo di inserimento record

La pagina successiva da creare per il sito Web Cafe Townsend una pagina che consente ai clienti di aggiungere commenti al database.
Dreamweaver include vari oggetti applicazione che consentono di creare pagine di applicazioni Web in modo semplice e rapido. In questo caso, verr utilizzato un oggetto applicazione per creare la pagina di inserimento. Loggetto applicazione Inserisci record crea un modulo HTML, i campi dati che corrispondono ai campi del database e gli script server necessari per creare una pagina dinamica.
Aggiunta di un oggetto applicazione Modulo inserimento record

possibile utilizzare un oggetto applicazione Modulo inserimento record per creare un modulo che consente ai visitatori di inserire dati in un database. Loggetto applicazione consente di selezionare i campi da includere nel modulo, assegnare le etichette ai campi e specificare i tipi di oggetti modulo da inserire. Quando un utente inserisce dei dati nei campi del modulo e sceglie il pulsante di invio, viene inserito un nuovo record in un database. inoltre possibile impostare lapertura di una pagina in seguito allinvio di un record per comunicare allutente lavvenuto aggiornamento del database.
1.
Nel pannello File fare doppio clic sul file send per aprirlo. Il documento viene aperto nella finestra del documento.
Creazione di un modulo di inserimento record 221
2.
Collocare il punto di inserimento nella riga di tabella vuota sotto la riga in cui si trova il paragrafo. Loggetto applicazione viene inserito nella riga vuota. Per aggiungere un oggetto di inserimento record alla pagina, effettuare una delle seguenti operazioni:
3.
Nella barra Inserisci della categoria Applicazione, selezionare la procedura guidata Modulo inserimento record dal menu a comparsa Inserisci record. Selezionare Inserisci > Oggetti applicazione > Inserisci record > Modulo inserimento record.
Viene visualizzata la finestra di dialogo Modulo inserimento record.
4.
Dal menu a comparsa Origine dati (ColdFusion) o Connessione, scegliere connTownsend. Se allorigine dati o alla connessione sono associati un nome utente e una password, inserirli. Se al momento dellimpostazione dellorigine dati o della connessione non sono stati forniti un nome utente o una password, lasciare vuote le caselle.
5.
6.
Nel menu a comparsa Tabella verificare che sia selezionata lopzione COMMENTS. Fare clic sul pulsante Sfoglia accanto alla casella di testo Dopo linserimento, vai a oppure (per ASP.NET) alla casella di testo Se lesito positivo, vai a.
7.
8.
Nella finestra di dialogo che viene visualizzata, selezionare il file view, quindi fare clic su OK per chiudere la finestra. A scopo di verifica, si desidera visualizzare la pagina che include tutti i commenti dopo averne inviato uno. Dopo la verifica dellapplicazione Web, modificare questa impostazione per mostrare una pagina che ringrazi il visitatore per il commento.
9.
Completare il resto della procedura guidata seguendo la procedura descritta nella sezione successiva.
Creazione del modulo di inserimento

Nella sezione Campi modulo della procedura guidata Modulo inserimento record, possibile definire il modulo in cui i visitatori devono inserire i dati.
1.
Nella procedura guidata Modulo inserimento record, eliminare i campi che non si desidera includere nel modulo effettuando le seguenti operazioni:

Selezionare COMMENT_ID e fare clic su Meno (-). Selezionare TELEPHONE e fare clic su Meno (-). Selezionare SUBMIT_DATE e fare clic su Meno (-). Selezionare ANSWERED e fare clic su Meno (-).
2.
Se si sta creando una pagina per ASP.NET, cambiare lordine alfabetico dei campi di modulo effettuando le seguenti operazioni:
Nellelenco Colonna, selezionare COMMENTS, quindi fare clic sul pulsante freccia GI per collocare COMMENTS sotto LAST_NAME. Nellelenco Colonna, selezionare EMAIL e fare clic sul pulsante freccia GI per collocare EMAIL sotto LAST_NAME.
3.
Nellelenco Campi modulo, selezionare FIRST_NAME per specificare come sar visualizzato il campo nel modulo. Nella casella di testo Etichetta, digitare Nome per sostituire il testo predefinito. Questa letichetta che verr visualizzata nel modulo HTML accanto alla casella di testo.
4.
5.
Impostare il tipo di oggetto modulo per il campo effettuando una delle seguenti operazioni:
Se si sta utilizzando ASP.NET, nel menu a comparsa Visualizza come accettare il valore predefinito Campo testo, quindi, nel menu a comparsa Invia come, cambiare il valore predefinito da WChar a VARCHAR. Se si sta utilizzando una tecnologia server diversa da ASP.NET, nel menu a comparsa Visualizza come, accettare il valore predefinito Campo testo, quindi, nel menu a comparsa Invia come, accettare il valore predefinito Testo.
6.
Lasciare vuoto il campo Valore predefinito. In alcune applicazioni Web, questo campo pu essere usato per impostare il testo iniziale del campo, permettendo cos allutente di sapere che genere di informazione deve essere inserito. In questo caso, letichetta di campo Nome" rende esplicito che il visitatore deve inserire il proprio nome. Al termine, la voce FIRST_NAME dovrebbe essere simile a quella illustrata di seguito.
7.
Ripetere i passaggi da 3 a 6 per il campo di modulo LAST_NAME, con letichetta Cognome, da visualizzare come Campo di testo e da inviare come Testo. Ripetere i passaggi da 3 a 6 per il campo di modulo EMAIL, con letichetta E-mail, da visualizzare come Campo di testo e da inviare come Testo. Nellelenco Campi modulo, selezionare COMMENTS. campo Etichetta, inserire Commenti.
8.
9.
10. Nel
11.
Impostare il tipo di oggetto modulo per il campo di modulo Commenti effettuando una delle seguenti operazioni:
Se si utilizza ASP.NET, selezionare Area di testo nel menu a comparsa Visualizza come e VARCHAR nel menu a comparsa Invia come. Se si utilizza un tipo di tecnologia server diversa da ASP.NET, selezionare Area di testo nel menu a comparsa Visualizza come e accettare il valore predefinito Testo nel menu a comparsa Invia come.
Al termine, la finestra di dialogo dovrebbe essere simile a quella illustrata di seguito.
12. Fare clic su OK per chiudere la finestra di dialogo e creare il modulo di
inserimento record.
Loggetto applicazione Modulo inserimento record viene inserito nel documento.
13.
Salvare la pagina.
Copia dei file sul server

La procedura seguente illustra come copiare sul server i file che sono stati aggiornati. Dopo aver copiato i file, si visualizzer la pagina di inserimento record, si aggiunger un commento o una domanda e si invieranno i dati per effettuare una prova dellapplicazione.
1.
Nel pannello File fare clic tenendo premuto il tasto Control (Windows) o Comando (Macintosh) sui file "view" e "send" e quindi fare clic sullicona a forma di freccia di colore blu Carica il/i file per caricare i file sul server. Alla richiesta di Dreamweaver se i file dipendenti devono essere copiati sul server, rispondere selezionando S.
2.
N OT A
Con alcuni modelli server, Dreamweaver crea una cartella Connections allinterno della cartella locale. In questo caso, necessario copiare anche tale cartella sul server remoto per garantire il corretto funzionamento dellapplicazione Web. Nel pannello File selezionare la cartella Connections, quindi fare clic sul pulsante Carica il/i file per copiarla sul server.
3.
Con send come documento attivo, selezionare File > Anteprima nel browser oppure premere F12 per visualizzare la pagina in un browser. Inserire dei dati di prova nel modulo, quindi fare clic sul pulsante Inserisci record nel documento per inviare i dati. Il server di applicazione riceve le informazioni inviate, aggiorna il database e visualizza la pagina dei commenti con le informazioni aggiornate.
4.
Approfondimenti
In questa esercitazione sono descritti alcuni strumenti che possibile utilizzare per creare pagine dinamiche di dati. stato descritto come creare recordset per definire i dati da utilizzare nel sito Web. stato inoltre utilizzato un oggetto applicazione di Dreamweaver per creare unapplicazione Web che consente di interagire con i dati memorizzati nel database. Per ulteriori informazioni sullo sviluppo delle applicazioni Web, vedere gli argomenti seguenti nella guida Uso di Dreamweaver:

Recupero dei dati per la pagina Definizione delle origini di contenuto dinamico Aggiunta di contenuto dinamico alle pagine Web Visualizzazione dei record di database
Approfondimenti 227
PARTE 4
Appendici
La parte quarta di questo manuale include appendici con informazioni aggiuntive relative ai concetti illustrati nelle sezioni precedenti. Questa parte contiene le sezioni seguenti:
Nozioni sulle applicazioni Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231 Installazione di un server Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247 Configurazione di un sito ColdFusion di esempio . . . . . . . . . . . . 253 Configurazione di un sito ASP.NET di esempio . . . . . . . . . . . . . . 271 Configurazione di un sito ASP di esempio . . . . . . . . . . . . . . . . . . 285 Configurazione di un sito JSP di esempio . . . . . . . . . . . . . . . . . . . 301 Configurazione di un sito PHP di esempio . . . . . . . . . . . . . . . . . . . 317
229
APPENDICE A
Nozioni sulle applicazioni Web

Unapplicazione Web una raccolta di pagine Web che interagiscono con i visitatori, una con laltra e con altre risorse disponibili su un server Web, ad esempio dei database. Prima di iniziare a creare delle applicazioni Web personalizzate, opportuno acquisire una certa dimestichezza con i concetti illustrati in questo capitolo. Il capitolo contiene i seguenti argomenti:
Informazioni sulle applicazioni Web. . . . . . . . . . . . . . . . . . . . . . . . . 231 Funzionamento di unapplicazione Web. . . . . . . . . . . . . . . . . . . . 233 Authoring di pagine dinamiche . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239 Scelta di una tecnologia server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241 Terminologia per le applicazioni Web . . . . . . . . . . . . . . . . . . . . . . 242
Informazioni sulle applicazioni Web

Unapplicazione Web un sito Web che contiene pagine dal contenuto parzialmente o interamente indeterminato. Il contenuto finale viene determinato solo quando il visitatore richiede la pagina al server Web. Poich il contenuto finale della pagina varia da richiesta a richiesta in base alle azioni eseguite dal visitatore, questo tipo di pagina viene definito "pagina dinamica". Le applicazioni Web vengono create per risolvere una serie di problemi. Questa sezione ne descrive gli usi pi comuni e fornisce un semplice esempio.
231
Usi pi comuni delle applicazioni Web

Le applicazioni Web possono essere utilizzate da sviluppatori e visitatori del sito per molti scopi, tra cui quelli riportati di seguito.
Consentire ai visitatori di reperire informazioni su un sito Web ricco di contenuto in modo semplice e rapido. Questo tipo di applicazione Web permette ai visitatori di eseguire delle ricerche, navigare e organizzare il contenuto a seconda delle esigenze. Tra gli esempi vi sono le intranet aziendali, Microsoft MSDN (www.msdn.microsoft.com) e Amazon.com (www.amazon.com).
Raccogliere, salvare e analizzare i dati forniti dai visitatori del sito. In passato, i dati inseriti nei moduli HTML venivano inviati, sotto forma di messaggi e-mail, a membri del personale o applicazioni CGI per lelaborazione. Unapplicazione Web in grado di salvare i dati dei moduli direttamente in un database, estrarli e creare rapporti basati sul Web per lanalisi. Tra gli esempi vi sono pagine relative ai pagamenti in un sito di e-commerce, resoconti di operazioni bancarie in linea, sondaggi e moduli di feedback degli utenti.
Aggiornare siti Web il cui contenuto cambia di frequente. Unapplicazione Web consente al Web designer di evitare di aggiornare continuamente il contenuto HTML del sito. I provider di contenuto, ad esempio i redattori di un notiziario, aggiungono contenuto allapplicazione Web, che aggiorna il sito automaticamente. Tra gli esempi vi sono lEconomist (www.economist.com) e la CNN (www.cnn.com).
Esempio di applicazione Web

Janet una Web designer professionista, esperta utilizzatrice di Dreamweaver e responsabile della gestione dei siti intranet e Internet di unazienda di medie dimensioni con 1.000 dipendenti. Jill, del reparto risorse umane, gli sottopone un problema. Il reparto risorse umane gestisce un programma di fitness per i dipendenti in base a cui vengono attribuiti dei punti per ogni chilometro percorso a piedi, in bicicletta o di corsa. Ogni mese, i dipendenti devono comunicare a Jill, mediante un messaggio e-mail, il totale dei chilometri percorsi. Alla fine del mese, Jill raccoglie tutti i messaggi e-mail e assegna ai dipendenti piccoli premi in denaro in base al totale dei punti accumulati.
232 Nozioni sulle applicazioni Web
Il problema di Jill che il programma di fitness ha avuto un successo enorme: il numero dei partecipanti cresciuto a tal punto che, alla fine di ogni mese, Jill sommersa di messaggi e-mail. Pertanto, Chris si rivolge a Janet per chiederle se esiste una soluzione -basata su Web. Clay propone unapplicazione Web basata su intranet che effettui le seguenti operazioni:
Consenta ai dipendenti di inserire i chilometri percorsi in una pagina Web mediante un semplice modulo HTML Archivi in un database i dati forniti dai dipendenti Calcoli i punti in base ai chilometri percorsi Consenta ai dipendenti di verificare la propria situazione mensile Consenta a Jill di accedere facilmente al totale dei punti alla fine di ogni mese
Janet crea questa applicazione e la predispone per luso in qualche ora utilizzando Dreamweaver, che offre gli strumenti necessari per creare rapidamente e facilmente tale applicazione.
Funzionamento di unapplicazione Web

Unapplicazione Web una raccolta di pagine Web statiche e dinamiche. Una pagina Web statica non cambia quando viene richiesta da un visitatore del sito: Il server Web la invia al browser senza modificarla. Al contrario, una pagina Web dinamica viene modificata dal server prima dellinvio al browser. Per questo motivo la pagina chiamata dinamica. Ad esempio, possibile progettare una pagina per la visualizzazione dei risultati del programma di fitness lasciando determinate informazioni (quali il nome e i risultati del dipendente) da determinare quando la pagina viene richiesta da un dipendente.
Funzionamento di unapplicazione Web 233
Elaborazione di pagine Web statiche

Un sito Web statico comprende una serie di pagine e file HTML collegati che si trovano su un computer su cui in esecuzione un server Web. Un server Web un software che fornisce pagine Web in risposta a richieste da parte di browser Web. Una richiesta di pagina viene generata quando un visitatore fa clic su un collegamento in una pagina Web, seleziona un segnalibro in un browser o inserisce un URL nella casella di testo dellindirizzo di un browser. Il contenuto finale di una pagina Web statica viene determinato dal designer e non cambia quando la pagina viene richiesta. Ad esempio:
<html> <head> <title>Trio Motors Information Page</title> </head> <body> <h1>About Trio Motors</h1> <p>Trio Motors is a leading automobile manufacturer.</p> </body> </html>
Ogni riga di codice HTML viene scritta dal designer prima che la pagina venga collocata sul server. Poich il codice HTML non cambia dopo essere stato collocato sul server, questo tipo di pagina viene definito "pagina statica".
NO T A 234 Nozioni sulle applicazioni Web
in realt, possibile che una pagina "statica" non sia affatto statica. Ad esempio, pu essere animata da unimmagine rollover o un oggetto Flash (un file SWF). Tuttavia, in questa documentazione si definiscono statiche tutte le pagine che vengono inviate al browser senza modifiche.
Quando riceve una richiesta di una pagina statica, il server Web la legge, individua la pagina e la invia al browser, come illustrato nella seguente figura:
Passaggio 1: il browser Web richiede una pagina statica.
Browser Web
Richiesta
Risposta
Passaggio 3: il server Web invia la pagina al browser.
SERVER WEB
Passaggio 2: il server Web reperisce la pagina.
<HTML> <p>Hi </HTML>
Pagina statica
Nel caso delle applicazioni Web, quando il visitatore richiede la pagina alcune righe di codice non sono determinate. Tali righe devono essere determinate mediante un meccanismo affinch la pagina possa essere inviata al browser. Il meccanismo trattato nella sezione seguente.
Elaborazione di pagine dinamiche

Quando il server Web riceve la richiesta di una pagina Web statica, invia la pagina direttamente al browser che lha richiesta. Quando, invece, il server Web riceve la richiesta di una pagina dinamica, si comporta in modo diverso: trasmette la pagina a una speciale porzione del software, che provvede a terminarla. Questo software speciale viene chiamato "server applicazioni".
Il server applicazioni legge il codice sulla pagina, termina la pagina in base alle istruzioni contenute nel codice, quindi rimuove il codice. Il risultato una pagina statica che il server applicazioni ritrasmette al server Web, il quale a sua volta la invia al browser. La pagina trasmessa al browser codice HMTL puro. Di seguito riportata unillustrazione del processo.
Passaggio 1: il browser Web richiede una pagina dinamica.
Browser Web
Richiesta
Risposta
Passaggio 5: il server Web invia al browser la pagina terminata.
SERVER WEB
Passaggio 2: il server Web individua la pagina e la trasmette al server applicazioni. Passaggio 3: il server applicazioni cerca le istruzioni contenute nella pagina e la termina.
<HTML> <code> </HTML>
Passaggio 4: il server applicazioni ritrasmette la pagina terminata al server Web.
Server applicazioni
Accesso a un database
Un server applicazioni consente di utilizzare risorse server-side come i database. Ad esempio, una pagina dinamica pu indicare al server applicazioni di estrarre dei dati da un database e inserirli nel codice HTML della pagina. Per ulteriori informazioni, consultare lAppendice A, Guida introduttiva dei database in Uso di Dreamweaver. Listruzione per lestrazione di dati da un database definita "query di database". Una query composta da criteri di ricerca espressi in un linguaggio di database chiamato SQL (Structured Query Language). La query SQL viene scritta negli script o nei tag server-side della pagina.
Un server applicazioni non in grado di comunicare direttamente con un database in quanto il formato proprietario del database rende i dati indecifrabili allo stesso modo di un documento Word aperto nel Blocco note o in BBEdit. Il server applicazioni pu comunicare con il database solo grazie allintermediazione di un driver di database, ovvero un software che funge da interprete tra il server applicazioni e il database. Dopo che il driver stabilisce la comunicazione, la query viene eseguita nel database e viene creato un recordset. Un recordset un insieme di dati che vengono estratti da una o pi tabelle di un database. Il recordset viene restituito al server applicazioni, che utilizza i dati per completare la pagina. Di seguito riportata una query di database semplice scritta in linguaggio SQL:
SELECT lastname, firstname, fitpoints FROM employees
Questa istruzione crea un recordset a tre colonne e lo riempie con righe contenenti il cognome, il nome e i punti del programma di fitness di tutti i dipendenti contenuti nel database. Per ulteriori informazioni, consultare lAppendice B, Cenni sul linguaggio SQL in Uso di Dreamweaver.
Di seguito viene illustrato il processo di interrogazione di un database mediante una query e restituzione dei dati al browser.
Passaggio 1: il browser Web richiede una pagina dinamica.
Browser Web
Richiesta
Risposta
Passaggio 9: il server Web invia al browser la pagina terminata.
SERVER WEB
Passaggio 2: il server Web individua la pagina e la trasmette al server applicazioni.
<HTML> <code> </HTML>
Passaggio 3: il server applicazioni cerca le istruzioni nella pagina. Passaggio 4: il server applicazioni invia la query al driver di database.
Passaggio 8 : il server applicazioni inserisce i dati nella pagina, quindi trasmette la pagina al server Web.
Server applicazioni
Passaggio 7: il driver trasmette il recordset al server applicazioni.
Query
Set di record
Passaggio 5: il driver esegue la query nel database.
Driver di database
Passaggio 6: il recordset viene restituito al driver.
Database
Con unapplicazione Web possibile utilizzare quasi tutti i database, a condizione di disporre dei driver appropriati installati sul server.
Se si prevede di creare delle applicazioni di piccole dimensioni ed economiche, possibile utilizzare un database basato su file (ad esempio, un database creato in Microsoft Access). Se invece si prevede di creare applicazioni pi estese e di importanza critica per la propria attivit, possibile utilizzare un database basato su server, ad esempio un database di Microsoft SQL Server, Oracle 9i o MySQL. Se il database si trova su un sistema diverso dal server Web, verificare di disporre di una connessione veloce tra i due sistemi, in modo che lapplicazione Web possa funzionare in modo rapido ed efficiente.
Authoring di pagine dinamiche

Lauthoring di una pagina dinamica consiste nella scrittura del codice HTML, quindi nellaggiunta di script o tag server-side HTML per rendere la pagina dinamica. Quando si visualizza il codice risultante, il linguaggio appare incorporato nel codice HTML della pagina. Di conseguenza, questi linguaggi sono noti come "linguaggi di programmazione incorporata HTML". Nellesempio riportato di seguito viene utilizzato il linguaggio CFML (ColdFusion Markup Language):
<html> <head> <title>Trio Motors Information Page</title> </head> <body> <h1>About Trio Motors</h1> <p>Trio Motors is a leading automobile manufacturer.</p>  <cfset department="Sales"> <cfoutput> <p>Be sure to visit our #department# page.</p> </cfoutput>  </body> </html>
Le istruzioni incorporate in questa pagina eseguono le azioni seguenti:

1.
Creazione di una variabile denominata department e assegnazione della stringa "Vendite" a tale variabile.
Authoring di pagine dinamiche 239
2.
Inserimento del valore della variabile, "Vendite", nel codice HTML.
Il server applicazioni restituisce al server Web la pagina seguente:

<html> <head> <title>Trio Motors Information Page</title> </head> <body> <h1>About Trio Motors</h1> <p>Trio Motors is a leading automobile manufacturer.</p> <p>Be sure to visit our Sales page.</p> </body> </html>
Il server Web invia la pagina al browser, che la visualizza nel modo seguente: Informazioni su Trio Motors Trio Motors unazienda leader nella produzione di automobili. Non mancate di visitare la nostra pagina Vendite. Il linguaggio di script o basato su tag da utilizzare dipende dalla tecnologia server disponibile sul computer. Di seguito sono elencati i linguaggi pi utilizzati per le cinque tecnologie server supportate da Dreamweaver:
Tecnologia server
ColdFusion ASP.NET Active Server Pages (ASP) Java Server Pages (JSP) PHP
Linguaggio
ColdFusion Markup Language (CFML) Visual Basic C# VBScript JavaScript Java PHP
Per ulteriori informazioni, vedere Scelta di una tecnologia server a pagina 241. Dreamweaver in grado di creare gli script o i tag server-side necessari per il funzionamento delle pagine, ma possibile anche scrivere manualmente script e tag nellambiente di codifica di Dreamweaver.
Scelta di una tecnologia server

possibile utilizzare Dreamweaver per creare applicazioni Web con una delle cinque tecnologie server: ColdFusion, ASP.NET, ASP, JSP, o PHP. Ognuna di queste tecnologie corrisponde a un tipo di documento in Dreamweaver. La scelta di una tecnologia server per lapplicazione Web dipende da diversi fattori, tra cui il livello di conoscenza dei vari linguaggi di script e del server applicazioni che si intende utilizzare. Per gli utenti non esperti di sviluppo di applicazioni Web o di applicazioni in generale, consigliabile ColdFusion, in quanto fornisce un ambiente di script server di facile apprendimento e ad alto livello di integrazione con Dreamweaver. Dreamweaver dispone inoltre di un supporto ottimale per le tecnologie server JSP, PHP, ASP e ASP.NET, per gli utenti che hanno maggior familiarit con tali tecnologie. La scelta di una tecnologia server dipende anche dal server applicazioni che si intende utilizzare per lapplicazione Web. Un server applicazioni un software che consente a un server Web di elaborare pagine Web contenenti script o tag server-side. Ad esempio, se si dispone di un server ColdFusion MX 7, possibile scegliere ColdFusion come tecnologia server. Se si ha accesso a un server che esegue Microsoft IIS 5 (Internet Information Server 5) con .NET Framework, possibile scegliere ASP.NET. PHP lopzione per laccesso a un server Web con un server applicazioni PHP. JSP la scelta adatta per laccesso a un server Web con un server applicazioni JSP (quale Macromedia JRun). Unedizione di ColdFusion MX 7 per sviluppatori disponibile sul CD di Dreamweaver (solo versione Windows) e sul sito Web Macromedia allindirizzo www.macromedia.com/go/coldfusion/. Per ulteriori informazioni, consultare la sezione Impostazione di un server applicazioni in Uso di Dreamweaver. Per maggiori informazioni su ColdFusion, selezionare Uso di ColdFusion dal menu Guida in linea. Per ulteriori informazioni su ASP.NET, visitare il sito Web di Microsoft allindirizzo http://msdn.microsoft.com/asp.net/. Per ulteriori informazioni su ASP, visitare il sito Web di Microsoft allindirizzo http://msdn.microsoft.com/library/default.asp?url=/library/ en-us/dnanchor/html/activeservpages.asp.
Scelta di una tecnologia server 241
Per ulteriori informazioni su JSP, visitare il sito Web di Sun Microsystems allindirizzo java.sun.com/products/jsp/. Per ulteriori informazioni su PHP, visitare il sito Web di PHP allindirizzo www.php.net/.
Terminologia per le applicazioni Web

Questa sezione definisce i termini utilizzati pi di frequente con riferimento alle applicazioni Web. Un server applicazioni un software che consente a un server Web di elaborare pagine Web contenenti script o tag server-side. Quando una pagina viene richiesta al server Web, questultimo la trasmette al server applicazioni per lelaborazione prima dellinvio al browser. Per ulteriori informazioni, vedere Funzionamento di unapplicazione Web a pagina 233. I server applicazioni pi diffusi sono Macromedia ColdFusion, Macromedia JRun Server, Microsoft .NET Framework, IBM WebSphere e Apache Tomcat. Un database una raccolta di dati archiviati in tabelle. Ogni riga di una tabella costituisce un record e ogni colonna un campo del record, come illustrato di seguito.
Campi (colonne) Numero Cognome Nome Ruolo Reti Record (righe)
Un driver di database un software che funge da interprete tra unapplicazione Web e un database. I dati contenuti in un database vengono archiviati in un formato proprietario. I driver di database consentono allapplicazione Web di leggere e manipolare dati altrimenti indecifrabili.
Un sistema di gestione di database (DBMS, Database Management System) o sistema di database un software utilizzato per creare e manipolare database. I sistemi di database pi diffusi sono Microsoft Access, Oracle 9i e MySQL.
Una query di database loperazione che consente di estrarre un recordset da un database. Una query composta da criteri di ricerca espressi in un linguaggio di database chiamato SQL. Ad esempio, la query pu specificare che solo determinati record o colonne vengano inclusi nel recordset. Una pagina dinamica una pagina Web personalizzata da un server applicazioni prima di essere inviata a un browser. Per ulteriori informazioni, vedere Funzionamento di unapplicazione Web a pagina 233. Per recordset si intende un insieme di dati estratti da una o pi tabelle di un database, come nel seguente esempio:
Numero Cognome Nome Ruolo Reti
Tabella database
Cognome
Nome
Ruolo
Tabella recordset
Terminologia per le applicazioni Web 243
Un database relazionale
un database contenente pi tabelle che condividono dei dati. Il seguente database relazionale perch due tabelle condividono la colonna DepartmentID:
Una tecnologia server
la tecnologia utilizzata da un server applicazioni per modificare le pagine dinamiche in fase di esecuzione. Lambiente di sviluppo di Dreamweaver supporta le seguenti tecnologie server:
Macromedia ColdFusion Microsoft ASP.NET Microsoft ASP (Active Server Pages) Sun Java Server Pages (JSP) PHP Hypertext Preprocessor (PHP)
possibile utilizzare lambiente di codifica di Dreamweaver anche per sviluppare pagine per una tecnologia server non elencata sopra. Una pagina statica una pagina Web che non viene modificata da un server applicazioni prima di essere inviata a un browser. Per ulteriori informazioni, vedere Elaborazione di pagine Web statiche a pagina 234. Unapplicazione Web un sito Web che contiene pagine dal contenuto parzialmente o interamente indeterminato. Il contenuto finale viene determinato solo quando un visitatore richiede la pagina al server Web. Poich il contenuto finale della pagina varia da richiesta a richiesta in base alle azioni eseguite dal visitatore, questo tipo di pagina viene definito pagina dinamica. Un server Web un software che fornisce pagine Web in risposta a richieste da parte di browser Web. Una richiesta di pagina viene generata quando un utente fa clic sul collegamento in una pagina Web aperta nel browser, sceglie un segnalibro nel browser o inserisce un URL nella casella di testo Indirizzo di un browser.
I server Web pi diffusi sono Microsoft Internet Information Server, Microsoft Personal Web Server, Apache HTTP Server, Netscape Enterprise Server e Sun ONE Web Server.
Terminologia per le applicazioni Web 245
APPENDICE B
Installazione di un server Web

Per sviluppare e verificare delle pagine Web dinamiche, necessario un server Web funzionante. In questo capitolo descritta la procedura di installazione e utilizzo di un server Web Microsoft su un computer locale. Gli utenti Windows che desiderano sviluppare siti ColdFusion possono utilizzare il server Web incluso nelledizione per sviluppatori del server applicazioni di Macromedia ColdFusion MX 7, che pu essere installato e utilizzato gratuitamente. Per ulteriori informazioni, vedere lAppendice C, Configurazione di un sito ColdFusion di esempio, a pagina 253. Gli utenti Macintosh possono utilizzare un server Web su un computer di rete o presso una societ di Web hosting. Gli utenti che desiderano sviluppare applicazioni PHP possono utilizzare il Web server Apache gi installato sul Macintosh. Questo capitolo contiene le seguenti sezioni:
Guida introduttiva. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248 Installazione di Internet Information Server . . . . . . . . . . . . . . . . . 248 Verifica di IIS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249 Verifica del server Web Macintosh (sviluppatori PHP) . . . . . . . 250 Elementi fondamentali dei server Web . . . . . . . . . . . . . . . . . . . . . 250
N OT A
Macromedia non fornisce assistenza tecnica per il software di terze parti quale Microsoft Information Server. Se necessaria assistenza per un prodotto Microsoft, contattare il supporto tecnico di Microsoft.
247
Guida introduttiva
Se si utenti Windows, possibile installare ed eseguire sul computer IIS: inoltre possibile installare il server Web su un computer Windows di rete, in modo che possa essere utilizzato da altri sviluppatori del team. Gli utenti Windows che desiderano sviluppare applicazioni ColdFusion possono utilizzare il server Web installato con ledizione per sviluppatori di Macromedia ColdFusion MX 7. Per ulteriori informazioni, vedere lAppendice C, Configurazione di un sito ColdFusion di esempio, a pagina 253. possibile che IIS sia gi installato sul computer. Verificare se nella struttura di directory del sistema presente la cartella C:\Inetpub o D:\Inetpub, che viene creata durante linstallazione di IIS. Se la cartella non esiste, installare IIS. Per ulteriori informazioni, vedere Installazione di Internet Information Server a pagina 248. Gli utenti Macintosh interessati allo sviluppo di applicazioni PHP possono utilizzare il server Web Apache gi installato sul Macintosh. Per ulteriori informazioni, vedere Verifica del server Web Macintosh (sviluppatori PHP) a pagina 250.
Installazione di Internet Information Server

Se si utilizza Windows 2000 o Windows XP Professional, necessario installare Internet Information Server (IIS). Se si utilizza Windows 2000 o Windows XP Professional, verificare che IIS sia gi installato e in esecuzione nel sistema. cercando la directory C:\Inetpub. Se tale directory non esiste, probabilmente IIS non installato.
Per installare IIS in Windows 2000 o XP Professional:
1.
Selezionare Start > Impostazioni > Pannello di controllo > Installazione applicazioni oppure Start > Pannello di controllo > Installazione applicazioni. Selezionare Installazione componenti di Windows. Selezionare Internet Information Services (IIS) e fare clic su Avanti.
2. 3.
248 Installazione di un server Web
4.
Seguire le istruzioni di installazione.
Al termine dellinstallazione del server Web, possibile verificarne il funzionamento.
Verifica di IIS
Per verificare il server Web, creare una pagina HTML molto semplice, chiamata myTestFile.html, e salvarla nella cartella Inetpub\wwwroot sul computer in cui il server Web in esecuzione. La pagina HTML pu essere composta da una sola riga, ad esempio:
<p>My web server is working.</p>
Successivamente, aprire la pagina di prova in un browser Web con richiesta HTTP. Se IIS viene eseguito sul computer locale, inserire lURL seguente nel browser Web: http://localhost/myTestFile.html Se IIS in esecuzione su un computer di rete, utilizzare il nome del computer di rete come nome di dominio. Ad esempio, se il nome del computer su cui in esecuzione IIS rockford-pc, inserire lURL seguente nel browser: http://rockford-pc/myTestFile.html
N OT A
Per ulteriori informazioni sui nomi di computer, vedere Elementi fondamentali dei server Web a pagina 250.
Se il browser visualizza la pagina, il server Web funziona correttamente. In caso contrario, verificare che il server sia in esecuzione Se il problema persiste, verificare che la pagina di prova si trovi nella cartella Inetpub\wwwroot e che abbia lestensione .htm o .html.
Verifica di IIS 249
Verifica del server Web Macintosh (sviluppatori PHP)

possibile utilizzare il server Web Apache gi installato sul Macintosh per sviluppare applicazioni PHP. Per verificare il funzionamento di questo server, creare una pagina HTML molto semplice chiamata myTestFile.html e salvarla nella cartella /Users/ nome_utente/Sites/ sul Macintosh, dove nome_utente il nome utente Macintosh. La pagina HTML pu essere composta da una sola riga, ad esempio:
<p>My web server is working.</p>
Successivamente, aprire la pagina di prova in un browser Web con richiesta HTTP, digitando il seguente URL nel browser Web: http://localhost/~nome_utente/myTestFile.html
NO TA 250 Installazione di un server Web
per impostazione predefinita, il server Apache viene eseguito sulla porta 80.
Se il browser visualizza la pagina, il server Web funziona correttamente. In caso contrario, verificare che il server sia in esecuzione aprendo le preferenze di sistema e controllando il pannello delle preferenze di condivisione. Lopzione Personal Web Sharing deve essere attivata. Il server Web Apache non funzioner con PHP per impostazione predefinita; necessario configurarlo prima di poter utilizzare PHP. Per ulteriori informazioni, vedere Configurazione del sistema (PHP) a pagina 318.
Elementi fondamentali dei server Web

Un server Web un software che fornisce pagine Web in risposta a richieste da parte di browser Web. A volte i server Web vengono chiamati anche server HTTP.
Si supponga di utilizzare IIS per sviluppare applicazioni Web. Il nome predefinito del server Web il nome del computer. possibile modificare il nome del server cambiando il nome del computer. Se il computer non ha un nome, il server utilizza la parola localhost. Il nome del server corrisponde alla cartella principale del server che (su un computer Windows), probabilmente, C:\Inetpub\wwwroot. possibile aprire qualsiasi pagina Web archiviata nella cartella principale inserendo lURL seguente in un browser in esecuzione sul computer: http://nome_server/nome_file Ad esempio, se il nome del server mer_noire e una pagina Web denominata soleil.html viene archiviata nella cartella C:\Inetpub\wwwroot\, possibile aprire la pagina digitando lURL seguente in un browser in esecuzione sul computer: http://mer_noire/soleil.html
N OT A N O TA
ricordare che, negli URL, devono essere utilizzate le barre normali e non quelle rovesciate.
inoltre possibile aprire qualsiasi pagina Web archiviata in una sottocartella della cartella principale specificando la sottocartella nellURL. Ad esempio, si supponga che il file soleil.html sia archiviato in una sottocartella denominata gamelan, come indicato di seguito: C:\Inetpub\wwwroot\gamelan\soleil.html possibile aprire questa pagina inserendo lURL seguente in un browser in esecuzione sul computer: http://mer_noire/gamelan/soleil.html Quando il server Web in esecuzione su un computer locale, possibile sostituire il nome del server con localhost. Ad esempio, gli URL seguenti aprono la stessa pagina in un browser: http://mer_noire/gamelan/soleil.html http://localhost/gamelan/soleil.html
unaltra espressione utilizzabile al posto del nome del server o di localhost 127.0.0.1 (ad esempio, http://127.0.0.1/gamelan/soleil.html).
Elementi fondamentali dei server Web 251
252 Installazione di un server Web
APPENDICE C
Configurazione di un sito ColdFusion di esempio

Macromedia Dreamweaver 8 include pagine ColdFusion di esempio che consentono di creare unapplicazione Web semplice. Questo capitolo descrive come impostare lapplicazione di esempio. Il processo di configurazione di unapplicazione Web prevede tre diverse fasi: configurazione del sistema, definizione di un sito Dreamweaver e connessione dellapplicazione al database. Questa guida di configurazione descrive le tre fasi. Questo capitolo contiene le seguenti sezioni:
Elenchi di impostazioni per gli sviluppatori ColdFusion. . . . . . . 253 Configurazione del sistema (ColdFusion). . . . . . . . . . . . . . . . . . . 254 Definizione di un sito di Dreamweaver (ColdFusion) . . . . . . . . . 260 Connessione al database di esempio (ColdFusion) . . . . . . . . . . 266
Elenchi di impostazioni per gli sviluppatori ColdFusion

Per configurare unapplicazione Web, necessario configurare il sistema, definire un sito Dreamweaver e stabilire una connessione al database. In questa sezione vengono forniti gli elenchi per ciascuna operazione. Le operazioni sono descritte pi dettagliatamente pi avanti nel capitolo.
Configurare il sistema:
1. 2.
Installare il server applicazioni ColdFusion (che include un server Web). Creare una cartella principale.
253
Definire un sito Dreamweaver:

1. 2. 3.
Copiare i file di esempio in una cartella sul disco rigido. Definire la cartella come cartella locale di Dreamweaver. Definire una cartella del server Web come cartella remota di Dreamweaver. Specificare una cartella per lelaborazione delle pagine dinamiche. Caricare i file di esempio sul server Web.
4. 5.
Stabilire una connessione al database:

1.
Se si sta utilizzando un computer remoto come server, copiare il database di esempio sul computer remoto. Creare la connessione in Dreamweaver.
2.
Configurazione del sistema (ColdFusion)

In questa sezione vengono fornite le istruzioni per due configurazioni di sistema comuni: una in cui ColdFusion installato sul disco rigido e una in cui ColdFusion installato su un computer Windows remoto. Per utilizzare una diversa configurazione, vedere Capitolo 23, Impostazione di unapplicazione Web in Uso di Dreamweaver.
254 Configurazione di un sito ColdFusion di esempio
Lillustrazione seguente mostra le due configurazioni descritte in questa sezione:

Configurazione locale (solo per utenti Windows) Configurazione server remoto (per utenti Macintosh o Windows)
PC WINDOWS Dreamweaver
PC MAC o WINDOWS Dreamweaver
Server ColdFusion Cartella principale del sito Web in c:\Inetpub\wwwroot\ Accesso di rete o FTP
SERVER WINDOWS Server ColdFusion Cartella principale del sito Web in c:\Inetpub\wwwroot\
Per configurare il sistema:

1. 2.
N O TA
Installare il server applicazioni ColdFusion . Creare una cartella principale.
linstallazione del server applicazioni unoperazione che va eseguita una sola volta.
Configurazione del sistema (ColdFusion) 255
Installazione di ColdFusion MX 7
Per elaborare le pagine Web dinamiche sono necessari un server Web e un server applicazioni. ColdFusion MX 7 dotato di entrambi. Un server Web un software che fornisce pagine Web in risposta a richieste da parte di browser Web. Un server applicazioni un software che consente a un server Web di elaborare pagine Web contenenti script o tag server-side. Quando una di queste pagine viene richiesta da un browser, il server Web la invia prima al server applicazioni, dove viene elaborata. Per ulteriori informazioni, vedere Nozioni sulle applicazioni Web a pagina 231. possibile scaricare e installare unedizione per sviluppatori completa di tutte le funzioni di ColdFusion MX 7 dal sito Web Macromedia allindirizzo www.macromedia.com/go/coldfusion/. Assicurarsi di aver selezionato la versione per Windows di ColdFusion MX 7 Developer Edition. Una copia di ColdFusion MX 7 Developer Edition disponibile anche sul CD di Dreamweaver (solo nella versione Windows).
N OT A
ColdFusion pu esser installato anche su un computer Mac OS X che esegue un server J2EE, quale JRun o Tomcat. Per ulteriori informazioni, visitare il sito Web Macromedia allindirizzo www.macromedia.com/go/ cfmx7_mac. Il processo di installazione complesso e Dreamweaver non stato collaudato con ColdFusion in ambiente Macintosh. Inoltre, potrebbe essere difficile stabilire una connessione tra ColdFusion su Macintosh e sistemi di database, ad esempio MySQL.
Per installare ColdFusion MX 7:

1.
Se possibile, collegarsi al sistema Windows utilizzando laccount di amministratore. Chiudere tutte le applicazioni aperte. Fare doppio clic sul file di installazione di ColdFusion MX 7.
2. 3.
4.
Seguire le istruzioni di installazione a video. Alcune schermate nella procedura guidata di installazione sono autoesplicative. Per le schermate seguenti, selezionare le opzioni indicate:
Nella schermata di configurazione del programma di installazione,, selezionare lopzione Configurazione server.
Nella schermata di selezione della directory di installazione, accettare la cartella predefinita C:\CFusionMX7 facendo clic su Avanti.
Nella schermata di configurazione del server Web selezionare lopzione Server Web integrato nella parte inferiore dello schermo.
Nella schermata relativa alla password RDS, assicurarsi che lopzione Attiva RDS sia selezionata, e quindi immettere e confermare una password.
Per ulteriori informazioni, vedere la documentazione di ColdFusion in Dreamweaver (? > Uso di ColdFusion). Dopo aver installato e avviato ColdFusion, creare una cartella principale per lapplicazione Web.
Creazione di una cartella principale

Dopo aver installato il software del server, creare una cartella principale per lapplicazione Web sul sistema che esegue ColdFusion e assicurarsi che la cartella disponga delle autorizzazioni necessarie.
Per creare una cartella principale per lapplicazione Web:
Creare una cartella chiamata MySampleApps nella cartella CFusionMX7\wwwroot sul sistema che esegue ColdFusion.
N OT A
annotare questo nome di cartella per un uso futuro. Successivamente, digitare il nome esatto rispettando la distinzione tra lettere maiuscole e minuscole utilizzata in fase di creazione.
Per impostazione predefinita, ColdFusion imposta il server Web in modo che elabori le pagine dalla cartella CFusionMX7\wwwroot. Il server Web elabora tutte le pagine contenute nella cartella e in tutte le sottocartelle in risposta a una richiesta HTTP dal browser Web. Dopo aver configurato il sistema, necessario definire un sito Dreamweaver.
Definizione di un sito di Dreamweaver (ColdFusion)

Dopo aver configurato il sistema, necessario copiare i file di esempio in una cartella locale e definire un sito Dreamweaver per la gestione dei file.
Per definire un sito Dreamweaver:
1.
Copiare i file di esempio in una cartella sul disco rigido (vedere Copia dei file di esempio a pagina 261). Definire la cartella come cartella locale di Dreamweaver (vedere Definizione di una cartella locale a pagina 262). Definire la cartella principale del server Web come cartella remota di Dreamweaver (vedere Definizione di una cartella remota a pagina 263). Specificare una cartella per lelaborazione delle pagine dinamiche (vedere Specificazione della posizione di elaborazione delle pagine dinamiche. a pagina 264). Caricare i file di esempio sul server Web (vedere Caricamento dei file di esempio a pagina 265).
2.
3.
4.
5.
Copia dei file di esempio

Se non gi stato fatto, copiare i file di esempio dalla cartella dellapplicazione Dreamweaver in una cartella sul disco rigido.
Per copiare i file di esempio:
1.
Creare una nuova cartella denominata local_sites nella cartella utente sul disco rigido. Ad esempio, creare una delle seguenti cartelle:

C:\Documentinome_utente\Documenti\local_sites (Windows). /Users/nome_utente/Documents/local_sites (Macintosh).
NO T A
sul Macintosh, esiste gi una cartella chiamata Siti nella cartella utente. non utilizzare la cartella Siti come cartella locale; si tratta della cartella in cui vengono inserite le pagine per renderle accessibili al pubblico quando si usa Macintosh come server Web. 2.
In Windows: C:\Program Files\Macromedia\Dreamweaver 8\Tutorial_assets\cafe_townsend\ Su Macintosh: Macintosh HD/Applications/Macromedia Dreamweaver 8/Tutorial_assets/cafe_townsend
3.
Dopo aver copiato la cartella cafe_townsend, definire la cartella come cartella locale di Dreamweaver.
Definizione di un sito di Dreamweaver (ColdFusion) 261

Dopo aver copiato la cartella cafe_townsend, definire la cartella contenente i file di esempio di ColdFusion come cartella locale di Dreamweaver.
Per definire la cartella locale di Dreamweaver:
1.
In Dreamweaver, selezionare Sito > Gestisci siti. Nella finestra di dialogo Gestisci siti, fare clic sul pulsante Nuovo, quindi selezionare Sito. Viene visualizzata la finestra di dialogo Definizione del sito.
2. 3.
Se visualizzata la scheda Generali, fare clic sulla scheda Avanzate. Nella casella di testo Nome del sito, inserire Cafe Townsend ColdFusion. Il nome identifica il sito allinterno di Dreamweaver. Fare clic sullicona della cartella accanto alla casella di testo Cartella principale locale, quindi individuare e selezionare la cartella seguente, che contiene i file di esempio di ColdFusion:
4.
C:\Documents and Settingsyour_user_name\My Documents\local_sites\cafe_townsend \contact\coldfusion (Windows) /Users/your_user_name/Documents/local_sites/cafe_townsend/ contact/coldfusion (Macintosh)
5.
Fare clic su Seleziona per definire la cartella locale di Dreamweaver.
Lasciare aperta la finestra di dialogo Definizione del sito. Definire la cartella di un server Web come cartella remota di Dreamweaver.

Dopo aver definito una cartella locale, definire una cartella del server Web come cartella remota di Dreamweaver.
Per definire la cartella remota di Dreamweaver:
1.
Nella scheda Avanzate della finestra di dialogo Definizione del sito, selezionare Informazioni su remoto dallelenco Categoria. Viene visualizzata la schermata Informazioni su remoto. Nel menu a comparsa Accesso, scegliere come si desidera trasferire i file da e verso il server: mediante una rete locale, con lopzione Locale/rete, oppure mediante FTP.
2.
NO T A
nel menu a comparsa Accesso sono disponibili altre opzioni non trattate in questa Guida. Per informazioni sulle altre opzioni, vedere Uso di Dreamweaver. 3.
Inserire il percorso o le impostazioni FTP per la cartella del server Web creata in Creazione di una cartella principale a pagina 259. possibile che la cartella si trovi sul disco rigido o su un computer remoto. Anche se stata creata sul disco rigido, la cartella considerata la cartella remota valida. Nellesempio seguente viene riportato un possibile percorso della cartella remota se si scelto laccesso Locale/rete e la cartella remota si trova sul disco rigido Windows: Cartella remota: C:\CFusionMX7\wwwroot\MySampleApps Per ulteriori informazioni sullFTP, vedere Impostazione delle opzioni remote per laccesso FTP in Uso della Guida in linea di Dreamweaver.
Lasciare aperta la finestra di dialogo Definizione del sito. A questo punto, definire una cartella per lelaborazione delle pagine dinamiche.
Specificazione della posizione di elaborazione delle pagine dinamiche.

Dopo aver definito la cartella remota di Dreamweaver, specificare una cartella in cui elaborare le pagine dinamiche. Dreamweaver utilizza questa cartella per visualizzare le pagine dinamiche e connettersi al database mentre si sta sviluppando lapplicazione.
Per specificare la cartella per lelaborazione delle pagine dinamiche:
1.
Nella scheda Avanzate della finestra di dialogo Definizione del sito, fare clic su Server di prova nellelenco Categoria. Viene visualizzata la schermata Server di prova. Il server di prova viene utilizzato da Dreamweaver per generare e visualizzare contenuti dinamici mentre si lavora. Come server di prova pu essere utilizzato il computer locale, un server di sviluppo, un server di pre-produzione o un server di produzione purch sia in grado di elaborare le pagine ColdFusion. In molte situazioni, compresa la configurazione del sito Cafe Townsend, possibile utilizzare le stesse impostazioni della categoria Informazioni su remoto (vedere Definizione di una cartella remota a pagina 263) in quanto fanno riferimento a un server in grado di elaborare le pagine ColdFusion.
2. 3.
Selezionare ColdFusion dal menu a comparsa Modello server. Nel menu a comparsa Accesso scegliere il metodo (Locale/rete o FTP) specificato per laccesso alla cartella remota. Le impostazioni specificate vengono inserite da Dreamweaver nella categoria Informazioni su remoto. Non modificare le impostazioni.
4.
Nella casella di testo Prefisso URL inserire lURL della cartella principale da specificare nel browser Web per richiedere una pagina nellapplicazione Web. Per visualizzare le informazioni Live Data nelle pagine mentre si lavora, Dreamweaver crea un file temporaneo, lo copia nella cartella principale del sito Web e prova a richiederlo utilizzando il prefisso URL.
N OT A
il prefisso URL viene suggerito da Dreamweaver in base alle informazioni specificate nella finestra di dialogo Definizione del sito. Tuttavia, se il prefisso URL proposto non corretto, correggere lURL o inserire un nuovo prefisso URL. Per ulteriori informazioni, vedere "Impostazione del prefisso URL" in Uso di Dreamweaver.
Se la cartella specificata nella casella di testo Cartella remota c:\CFusionMX7\wwwroot\MySampleApps, il prefisso URL dovrebbe essere il seguente: http://localhost:8500/MySampleApps/
NO T A
il server Web ColdFusion viene eseguito sulla porta 8500 per impostazione predefinita. 5.
Fare clic su OK per definire il sito e chiudere la finestra di dialogo Definizione del sito, quindi fare clic su Fine per chiudere la finestra di dialogo Gestisci siti.
Dopo aver specificato una cartella per lelaborazione delle pagine dinamiche, caricare i file di esempio sul server Web.
Caricamento dei file di esempio

Dopo aver specificato una cartella per lelaborazione delle pagine dinamiche, caricare i file di esempio sul server Web. necessario caricare i file anche se il server Web viene eseguito sul computer locale. Se i file non vengono caricati, possibile che opzioni quali Vista Live Data e Anteprima nel browser non funzionino correttamente con le pagine dinamiche. possibile, ad esempio, che i collegamenti alle immagini risultino interrotti nella vista Live Data poich i file delle immagini non si trovano ancora sul server. Analogamente, si verifica un errore se si fa clic su un collegamento a una pagina di dettaglio non presente sul server mentre visualizzata lanteprima di una pagina principale in un browser.
Per caricare i file di esempio sul server Web:
1.
il prefisso URL dovrebbe sempre specificare una cartella e non una particolare pagina del sito. Inoltre, rispettare la distinzione tra lettere maiuscole e minuscole utilizzata per la creazione della cartella.
Nel pannello File (Finestra > File), selezionare la cartella principale del sito nel riquadro Vista locale. La cartella principale la prima cartella dellelenco. Fare clic sullicona blu a forma di freccia Carica il/i file nella barra degli strumenti del pannello File e confermare il caricamento dellintero sito. Dreamweaver copia tutti i file nella cartella del server Web definita in Definizione di una cartella remota a pagina 263.
2.
La definizione del sito Dreamweaver stata completata. Il passaggio seguente consiste nella connessione al database di esempio installato con Dreamweaver.
Connessione al database di esempio (ColdFusion)

Durante linstallazione di Dreamweaver viene copiato un database di Microsoft Access di esempio sul disco rigido. In questa sezione viene descritto come creare una connessione al database di esempio.
NO T A
Per informazioni sulla connessione ad altri database, vedere "Connessioni a database per sviluppatori ColdFusion" in Uso di Dreamweaver.
Per creare una connessione a un database:

1.
Se si sta utilizzando un computer remoto come server, copiare il database di esempio sul computer remoto. (Vedere Impostazione del database (server sul computer remoto) a pagina 266). Creare unorigine dati di ColdFsusione e visualizzare la connessione in Dreamweaver (vedere Connessione al database a pagina 267).
2.
Impostazione del database (server sul computer remoto)

Le informazioni contenute in questa sezione si applicano solo alle configurazioni in cui il server Web viene eseguito su un computer remoto. Se il server Web viene eseguito sullo stesso computer di Dreamweaver, passare a Connessione al database a pagina 267. Prima di tentare la connessione al database di esempio, copiare il database sul disco rigido del computer remoto. Se Dreamweaver installato nella sua posizione predefinita, il percorso sul disco rigido locale per il file di database (tutorial.mdb) il seguente:
C:\Program Files\MacromediaDreamweaver 8\Tutorial_assets\cafe_townsend\data\ tutorial.mdb (Windows) /Applications/Macromedia Dreamweaver 8/Tutorial_assets/ cafe_townsend/data/tutorial.mdb (Macintosh)
possibile copiare il file in qualsiasi cartella del computer remoto oppure creare una nuova cartella.
NO T A NO T A
per ragioni di sicurezza, anzich posizionare il file di database allinterno della cartella Inetpub sul computer remoto, pi opportuno collocare il file in una cartella che non sia accessibile al pubblico.
Dopo aver copiato il database, creare unorigine dati ColdFusion.
Connessione al database
Per stabilire una connessione al database, necessario creare unorigine dati ColdFusion denominata connTownsend che faccia riferimento al file del database di esempio.
Per stabilire una connessione al database:
1.
In Dreamweaver, aprire una pagina ColdFusion come send.cfm e view.cfm. Nel pannello Database (Finestra > Database), fare clic sull collegamento Nome di login RDS login, immettere la password RDS e fare clic su OK. Fare clic su Pi (+) sulla barra degli strumenti del pannello Database e selezionare Connessione Microsoft Access dal menu a comparsa.
2.
3.
Se il pulsante Pi viene visualizzato nel pannello Database, riavviare Dreamweaver. 4.
Nella casella di testo Nome origine dati CF, digitare connTownsend.
Connessione al database di esempio (ColdFusion) 267
5.
Nella casella di testo File di database immettere il percorso del file di database tutorial.mdb. Se ColdFusion viene eseguito sul computer locale e Dreamweaver stato installato nella sua posizione predefinita, utilizzare il percorso seguente: C:\Program Files\Macromedia\Dreamweaver 8\Tutorial_assets\cafe_townsend\data\tutorial.mdb
Se ColdFusion in esecuzione su un computer remoto, immettere il percorso path per il file di database posizionato sul remoto computer in Impostazione del database (server sul computer remoto) a pagina 266. Per ulteriori informazioni, vedere la documentazione di ColdFusion in Dreamweaver (? > Uso di ColdFusion).
6.
Fare clic su OK per creare la connessione. La connessione viene visualizzata nel pannello Database.
Se la connessione non visualizzata nel pannello, effettuare una delle seguenti operazioni:
Verificare le impostazioni della cartella utilizzata da Dreamweaver per elaborare le pagine dinamiche (vedere Specificazione della posizione di elaborazione delle pagine dinamiche. a pagina 264). Vedere "Risoluzione dei problemi relativi alle connessioni di database" in Uso di Dreamweaver (? > Uso di Dreamweaver).
7.
Espandere il ramo connTownsend e quindi il ramo Tables. Se il ramo Tables include tre tabelle come segue, lapplicazione ColdFusion di esempio impostata per le esercitazioni della Guida introduttiva di Dreamweaver. Per ulteriori informazioni, vedere Esercitazione: Sviluppo di unapplicazione Web a pagina 207.
Se il ramo Tables non include le tabelle, fare clic sullicona Modifica origini dati nella barra degli strumenti del pannello Database e verificare- i parametri di connessione in Configurazione e amministrazione di ColdFusion MX. In particolare, assicurarsi che il percorso al file di database sia corretto.
Connessione al database di esempio (ColdFusion) 269
APPENDICE D
Configurazione di un sito ASP.NET di esempio

Macromedia Dreamweaver 8 include pagine ASP.NET di esempio che consentono di creare unapplicazione Web semplice. Questo capitolo descrive un metodo per impostare lapplicazione di esempio. Il capitolo destinato agli sviluppatori ASP.NET. Per informazioni sullASP, vedere Configurazione di un sito ASP di esempio a pagina 285. Il processo di configurazione di unapplicazione Web prevede tre diverse fasi: configurazione del sistema, definizione di un sito Dreamweaver e connessione dellapplicazione al database. Questo capitolo di configurazione descrive le tre fasi. Questo capitolo contiene le seguenti sezioni:
Elenchi di impostazioni per gli sviluppatori ASP.NET . . . . . . . . . 271 Configurazione del sistema (ASP.NET) . . . . . . . . . . . . . . . . . . . . .272 Definizione di un sito Dreamweaver (ASP.NET) . . . . . . . . . . . . .276 Connessione al database di esempio (ASP.NET) . . . . . . . . . . . . 281
Elenchi di impostazioni per gli sviluppatori ASP.NET

1. 2. 3.
Verificare di disporre di un server Web. Installare Microsoft .NET Framework. Creare una cartella principale.
271

1. 2. 3.
4. 5.

1.
2.
Configurazione del sistema (ASP.NET)

In questa sezione vengono fornite le istruzioni per due configurazioni di sistema comuni: una in cui Windows 2000 o Windows XP Professional installato sul disco rigido e una in cui Windows 2000 o Windows XP Professional installato su un computer remoto. Per utilizzare una diversa configurazione, vedere il Capitolo 23, Impostazione di unapplicazione Web in Uso di Dreamweaver.
272 Configurazione di un sito ASP.NET di esempio

Configurazione locale (solo per utenti Windows 2000 o XP) Configurazione server remoto (per utenti Macintosh o Windows)
WINDOWS 2000 o XP Dreamweaver
IIS 5 o superiore
.NET Framework Cartella principale del sito Web in c:\Inetpub\wwwroot\
Accesso di rete o FTP
SERVER WINDOWS IIS 5 o superiore
.NET Framework Cartella principale del sito Web in c:\Inetpub\wwwroot\

1.
Verificare di disporre di un server Web (vedere Ricerca del server Web a pagina 274). Installare .NET Framework (vedere Installazione di .NET Framework a pagina 274). Creare una cartella principale (vedere Creazione di una cartella principale a pagina 275).
2.
3.
NO T A
linstallazione del server Web e di .NET Framework sono operazioni che si eseguono una sola volta.
Configurazione del sistema (ASP.NET) 273
Ricerca del server Web

Per sviluppare e verificare il funzionamento delle pagine Web dinamiche, necessario disporre di un server Web. Un server Web un software che fornisce pagine Web in risposta a richieste da parte di browser Web. Le pagine ASP.NET funzionano con un solo server Web: Microsoft IIS 5 o versioni successive. Poich IIS 5 un servizio dei sistemi operativi Windows 2000 e Windows XP Professional, per eseguire applicazioni ASP.NET occorre necessariamente utilizzare una di queste due versioni di Windows. Verificare che Microsoft IIS 5 sia stato installato e che sia in esecuzione su un computer Windows 2000 o Windows XP Professional. Se si dispone di Windows 2000 o Windows XP Professional, possibile utilizzare come server il computer locale. Un metodo rapido per verificare se IIS installato su un computer consiste nel controllare la struttura delle cartelle per vedere se contiene una cartella C:\Inetpub o D:\Inetpub che viene creata durante linstallazione di IIS. Se IIS non installato, procedere allinstallazione. Per ulteriori informazioni, vedere Installazione di Internet Information Server a pagina 248. Dopo aver installato il server Web, installare .NET Framework.
Installazione di .NET Framework

Per elaborare le pagine Web dinamiche, necessario disporre di un server applicazioni. Un server applicazioni un software che consente a un server Web di elaborare pagine Web contenenti script o tag server-side. Quando un browser richiede una di queste pagine, il server Web, prima di inviargliela, la invia al server applicazioni, dove viene elaborata. Per ulteriori informazioni, vedere Nozioni sulle applicazioni Web a pagina 231. In ASP.NET il server applicazioni detto Microsoft .NET Framework 1.1. Per sviluppare applicazioni Web ASP.NET, necessario inoltre installare Microsoft .NET Framework. 1.1 Software Development Kit (SDK). Verificare che .NET Framework e SDK siano installati e in esecuzione su un sistema Windows 2000 o Windows XP Professional che esegue IIS 5 o una versione successiva.
Per installare .NET Framework e SDK:

1.
Verificare se .NET Framework installato nel sistema esaminando lelenco delle applicazioni nella finestra di dialogo Installazione applicazioni (Start > Pannello di controllo > Installazione applicazioni). Se Microsoft .NET Framework 1.1 incluso nellelenco, il Framework gi installato e non necessario ripetere linstallazione. Passare al punto 3.
2.
Se .NET Framework non installato nel sistema, installare il pacchetto Microsoft .NET Framework. 1.1 Redistributable dal sito Web di Microsoft allindirizzo HTTP://msdn.microsoft.com/netframework/ downloads/framework1_1/ e seguire le istruzioni di installazione sul sito. Il framework viene installato come aggiornamento di Windows. Scaricare Microsoft .NET Framework 1.1 Software Development Kit (SDK) dallo stesso sito Web e seguire le istruzioni di installazione.
3.
Dopo linstallazione di .NET Framework e SDK, creare una cartella principale per lapplicazione Web.

Dopo aver installato il software del server, creare una cartella principale per lapplicazione Web sul sistema che esegue Microsoft IIS e assicurarsi che la cartella disponga delle autorizzazioni necessarie.
1.
Creare una cartella denominata MySampleApps sul sistema che esegue IIS.
N OT A
annotare questo nome di cartella per un uso futuro. Successivamente, digitare il nome esatto rispettando la distinzione tra lettere maiuscole e minuscole utilizzate in fase di creazione.
Si consiglia di creare la cartella in C:\Inetpub\wwwroot\. Per impostazione predefinita, il server Web IIS impostato in modo da fornire le pagine dalla cartella Inetpub\wwwroot. Il server Web elabora tutte le pagine contenute nella cartella e in tutte le sottocartelle in risposta a una richiesta HTTP dal browser Web.
Configurazione del sistema (ASP.NET) 275
2.
Per verificare che per la cartella sia attivata lautorizzazione di script, avviare lo strumento di amministrazione di IIS (in Windows XP, selezionare Start > Pannello di controllo oppure Start > Impostazioni > Pannello di controllo, fare doppio clic su Strumenti di amministrazione, quindi su Internet Information Services). Espandere lelenco computer locale, quindi la cartella Siti Web, infine la cartella Sito Web predefinito. Fare clic col pulsante destro del mouse sulla cartella MySampleApps e selezionare Propriet dal menu a comparsa. Nel menu a comparsa Autorizzazioni di esecuzione, verificare che sia selezionata lopzione Solo script. (Per ragioni di sicurezza, si consiglia di non selezionare lopzione Script ed eseguibili.) Quindi fare clic su OK.
Il server Web stato configurato per lelaborazione delle pagine Web contenute nella cartella principale in risposta alle richieste HTTP dei browser Web. Dopo aver configurato il sistema, necessario definire un sito Dreamweaver.
Definizione di un sito Dreamweaver (ASP.NET)

1.
Copiare i file di esempio in una cartella sul disco rigido (vedere Copia dei file di esempio a pagina 277). Definire la cartella come cartella locale di Dreamweaver (vedere Definizione di una cartella locale a pagina 277). Definire la cartella principale del server Web come cartella remota di Dreamweaver (vedere Definizione di una cartella remota a pagina 278). Specificare una cartella per lelaborazione delle pagine dinamiche (vedere Specificazione del percorso di elaborazione delle pagine dinamiche a pagina 279). Caricare i file di esempio sul server Web (vedere Caricamento dei file di esempio a pagina 280).
2.
3.
4.
5.

Se non gi stato fatto, copiare i file di esempio dalla cartella principale di Dreamweaver in una cartella sul disco rigido.
1.
C:\Documents and Settingnome_utente\My Documents\local_sites (Windows) /Users/nome_utente/Documents/local_sites (Macintosh).
NO TA
sul Macintosh, esiste gi una cartella chiamata Sites nella cartella utente. Non utilizzare questa cartella Sites come cartella locale; la cartella Sites la posizione in cui vengono inserite le pagine per essere rese accessibili al pubblico quando si utilizza Macintosh come server Web. 2.
In Windows: C:\Program Files\Macromedia\Dreamweaver 8\Tutorial_assets\ cafe_townsend\. Su Macintosh: Macintosh HD/Applications/Macromedia Dreamweaver 8/Tutorial_assets/cafe_townsend.
3.

Dopo aver copiato la cartella cafe_townsend, definire la cartella contenente i file di esempio di ASP.NET come cartella locale di Dreamweaver.
Definizione di un sito Dreamweaver (ASP.NET) 277

1.
In Dreamweaver, selezionare Sito > Gestisci siti. Nella finestra di dialogo Gestisci siti, fare clic sul pulsante Nuovo, quindi selezionare Sito. Viene visualizzata la finestra di dialogo Definizione del sito. Se visualizzata la scheda Generali, fare clic sulla scheda Avanzate. Nella casella di testo Nome del sito, inserire Cafe Townsend ASP.NET. Il nome identifica il sito allinterno di Dreamweaver. Fare clic sullicona della cartella accanto alla casella di testo Cartella principale locale, quindi individuare la cartella seguente, che contiene i file di esempio di ASP.NET:
2. 3.
4.
C:\Documents and Settingnome_utente\My Documents\local_sites\cafe_townsend\contact\aspnet (Windows) /Users/nome_utente/Documents/local_sites/cafe_townsend/ contact/aspnet (Macintosh)
5.

1.
Nella scheda Avanzate della finestra di dialogo Definizione del sito, selezionare Informazioni su remoto dallelenco Categoria. Viene visualizzata la schermata Informazioni su remoto. Nel menu a comparsa Accesso, scegliere come si desidera trasferire i file da e verso il server: mediante una rete locale, con lopzione Locale/rete, oppure mediante FTP.
2.
NO T A
nel menu a comparsa Accesso sono disponibili altre opzioni non trattate in questa Guida. Per informazioni su tali opzioni, consultare Uso di Dreamweaver (? > Uso di Dreamweaver). 3.
Inserire il percorso o le impostazioni FTP per la cartella del server Web creata in Creazione di una cartella principale a pagina 275.
possibile che la cartella si trovi sul disco rigido o su un computer remoto. Anche se stata creata sul disco rigido, la cartella considerata la cartella remota valida. Nellesempio seguente viene riportato un possibile percorso della cartella remota se si scelto laccesso Locale/rete e la cartella remota si trova sul disco rigido Windows: Cartella remota: C:\Inetpub\wwwroot\MySampleApps Per ulteriori informazioni sullFTP, vedere Impostazione delle opzioni remote per laccesso FTP in Uso di Dreamweaver. Lasciare aperta la finestra di dialogo Definizione del sito. A questo punto, definire una cartella per lelaborazione delle pagine dinamiche.
Specificazione del percorso di elaborazione delle pagine dinamiche

Dopo aver definito la cartella remota di Dreamweaver, specificare una cartella per lelaborazione delle pagine dinamiche. Dreamweaver utilizza questa cartella per la visualizzazione delle pagine dinamiche e la connessione ai database mentre si sta sviluppando lapplicazione.
1.
Nella scheda Avanzate della finestra di dialogo Definizione del sito, fare clic su Server di prova nellelenco Categoria. Viene visualizzata la schermata Server di prova. Dreamweaver ha bisogno dei servizi di un server di prova per generare e visualizzare contenuti dinamici mentre si lavora. Come server di prova pu essere utilizzato il computer locale, un server di sviluppo, un server di preproduzione o un server di produzione, purch sia in grado di elaborare le pagine ASP.NET. In molti casi, compresa limpostazione del sito Cafe Townsend, possibile utilizzare le stesse impostazioni della categoria Informazioni su remoto (vedere Definizione di una cartella remota a pagina 278) che puntano a un server in grado di elaborare le pagine ASP.NET.
2.
Selezionare ASP.NET VB o ASP.NET C# dal menu a comparsa Modello server. Nella casella di testo Accesso, scegliere il metodo (Locale/rete o FTP) specificato per laccesso alla cartella remota.
3.
Definizione di un sito Dreamweaver (ASP.NET) 279
Dreamweaver inserisce le impostazioni specificate nella categoria Informazioni su remoto. Non modificare le impostazioni.
4.
Nella casella di testo Prefisso URL, inserire lURL della cartella principale da specificare nel browser Web per richiedere una pagina nellapplicazione Web. Per visualizzare le informazioni Live Data nelle pagine mentre si lavora, Dreamweaver crea un file temporaneo, lo copia nella cartella principale del sito Web e prova a richiederlo utilizzando il prefisso URL. Dreamweaver deduce un prefisso URL in base alle informazioni specificate nella finestra di dialogo Definizione del sito. possibile tuttavia che il prefisso URL suggerito non sia corretto. Se il suggerimento in Dreamweaver non corretto, correggerlo o inserire un nuovo prefisso URL. Per ulteriori informazioni, vedere Impostazione del prefisso URL in Uso di Dreamweaver. Se la cartella specificata nella casella di testo Cartella remota c:\Inetpub\wwwroot\MySampleApps, il prefisso URL sar il seguente: http://localhost/MySampleApps/
5. il prefisso URL dovrebbe sempre specificare una directory e non una particolare pagina del sito. Nella digitazione occorre rispettare la distinzione tra lettere maiuscole e minuscole utilizzata in fase di creazione della cartella.


1.
Nel pannello File (Finestra > File), selezionare la cartella principale del sito nel riquadro Vista locale. La cartella principale la prima cartella dellelenco. Fare clic sullicona blu a forma di freccia di Carica il/i file nella barra degli strumenti del pannello File, quindi confermare che si desidera caricare lintero sito. Dreamweaver copia tutti i file nella cartella del server Web definita in Definizione di una cartella remota a pagina 278.
2.
Connessione al database di esempio (ASP.NET)

Durante linstallazione, Dreamweaver copia un database di esempio di Microsoft Access sul disco rigido. In questa sezione viene descritto come creare una connessione al database di esempio.
N OT A
Per informazioni sulla connessione a un altro database, vedere il Capitolo 25, Connessioni di database per sviluppatori ASP.NET in Uso di Dreamweaver (? > Uso diDreamweaver).

1.
Se si sta utilizzando un computer remoto come server, copiare il database di esempio sul computer remoto. Vedere Impostazione del database (server sul computer remoto) a pagina 282. Creare la connessione in Dreamweaver (vedere Creazione di una connessione di database a pagina 282).
2.
Connessione al database di esempio (ASP.NET) 281

Le informazioni contenute in questa sezione si applicano solo alle configurazioni in cui il server Web viene eseguito su un computer remoto. Se il server Web viene eseguito sullo stesso computer di Dreamweaver, passare a Creazione di una connessione di database a pagina 282. Prima di tentare la connessione al database di esempio, copiare il database sul disco rigido del computer remoto. Se Dreamweaver installato nella sua posizione predefinita, il percorso sul disco rigido locale per il file di database (tutorial.mdb) il seguente:
C:\Program Files\Macromedia 8\Tutorial_assets\cafe_townsend\data\tutorial.mdb (Windows) /Applications/Macromedia Dreamweaver 8/Tutorial_assets/ cafe_townsend/data/tutorial.mdb (Macintosh)
possibile copiare il file in qualsiasi cartella del computer remoto oppure creare una nuova cartella. In entrambi i casi, annotare su un foglio il percorso completo del file di database.
N OT A
per ragioni di sicurezza, anzich posizionare il file di database allinterno della cartella Inetpub sul computer remoto, pi opportuno collocare il file in una cartella che non sia accessibile al pubblico.
Una volta che il database pronto, connettersi allo stesso.
Creazione di una connessione di database

Il passaggio finale del processo di impostazione consiste nel creare una connessione al database.
Per creare una connessione di database in Dreamweaver:
1.
Aprire una pagina ASP.NET in Dreamweaver, quindi aprire il pannello Database (Finestra > Database). Fare clic sul pulsante pi (+) nel pannello Database e selezionare Connessione DB OLE dal menu a comparsa. Viene visualizzata la finestra di dialogo Connessione DB OLE. Immettere connTownsend come nome della connessione. Fare clic sul pulsante Modelli. Viene visualizzata la finestra di dialogo Modello stringa di connessione.
2.
3. 4.
5.
Dallelenco dei modelli, selezionare Microsoft Access 2000 (provider Microsoft Jet 4.0) e fare clic su OK. Dreamweaver aggiunge un modello di stringa di connessione nella finestra di dialogo Connessione OLE DB. Il modello contiene segnaposto per le informazioni mancanti nella stringa di connessione.
6.
Nella casella di testo Data Source (origine dati), inserire il percorso completo del file di database di esempio presente sul disco rigido locale o sul disco rigido del computer remoto. Se ASP.NET viene eseguito sul computer locale e Dreamweaver stato installato nella sua posizione predefinita, utilizzare il percorso seguente: C:\Program Files\Macromedia 8\Tutorial_assets\data\tutorial.mdb
NO TA
il percorso pu variare a seconda del percorso di installazione di Dreamweaver.
Ad esempio, possibile inserire come valore per Data Source (origine dati) il seguente percorso del database sul disco rigido locale: Data Source=C:\Program Files\Macromedia 8\Tutorial_assets\data\tutorial.mdb; In alternativa, possibile inserire il seguente percorso del database sul server remoto: Data Source=C:\users\Denman\Sites\data\tutorial.mdb;
7.
Eliminare le righe di codice User ID e Password. Il database di Access non richiede un ID utente n una password. Fare clic su Prova. Dreamweaver tenta di connettersi al database. Se la connessione fallisce, effettuare le seguenti operazioni:

8.
Verificare il percorso del database. Verificare le impostazioni della cartella utilizzata da Dreamweaver per elaborare le pagine dinamiche (vedere Specificazione del percorso di elaborazione delle pagine dinamiche a pagina 279). Distribuire i file di supporto selezionando Sito > Avanzate > Trasferisci i file di supporto. Consultare il Capitolo 29, Risoluzione dei problemi relativi alle connessioni di database in Uso di Dreamweaver (? > Uso di Dreamweaver).
Connessione al database di esempio (ASP.NET) 283
9.
Fare clic su OK. La nuova connessione viene visualizzata nel pannello Database.
Lapplicazione ASP.NET di esempio ora impostata per le esercitazioni della Guida introduttiva di Dreamweaver. Per ulteriori informazioni, vedere Esercitazione: Sviluppo di unapplicazione Web a pagina 207.
APPENDICE E
Configurazione di un sito ASP di esempio

Macromedia Dreamweaver 8 include pagine Microsoft Active Server Pages (ASP) di esempio che consentono di creare unapplicazione Web semplice. Questo capitolo descrive come impostare lapplicazione di esempio utilizzando Microsoft Internet Information Server (IIS). Per ulteriori informazioni su questo server Web, vedere Installazione di un server Web a pagina 247. Questo capitolo indirizzato agli sviluppatori ASP. Per informazioni su ASP.NET, vedere Configurazione di un sito ASP.NET di esempio a pagina 271. Il processo di configurazione di unapplicazione Web prevede tre diverse fasi: configurazione del sistema, definizione di un sito Dreamweaver e connessione dellapplicazione al database. Questo capitolo di configurazione descrive le tre fasi. Questo capitolo contiene le seguenti sezioni:
Elenco di impostazioni per gli sviluppatori ASP . . . . . . . . . . . . . 286 Configurazione del sistema (ASP) . . . . . . . . . . . . . . . . . . . . . . . . . .287 Definizione di un sito Dreamweaver (ASP) . . . . . . . . . . . . . . . . . . 291 Connessione al database di esempio (ASP) . . . . . . . . . . . . . . . . .297
285
Elenco di impostazioni per gli sviluppatori ASP

1. 2. 3. 4.
Verificare di disporre di un server Web. Installare un server applicazioni. Verificare linstallazione. Creare una cartella principale.

1. 2. 3.
4. 5.

1.
2.
286 Configurazione di un sito ASP di esempio
Configurazione del sistema (ASP)

In questa sezione vengono fornite le istruzioni per due configurazioni di sistema comuni per ASP: una in cui Microsoft ISS installato sul disco rigido e una in cui ISS installato su un computer Windows remoto. Lillustrazione seguente mostra le due configurazioni descritte in questa sezione:
IIS Cartella principale del sito Web in c:\Inetpub\wwwroot\ Accesso di rete o FTP
SERVER WINDOWS IIS Cartella principale del sito Web in c:\Inetpub\wwwroot\

1.
Verificare di disporre di un server Web (vedere Ricerca del server Web a pagina 288). Se necessario, installare un server applicazioni (vedere Installazione di un server applicazioni ASP a pagina 288).
2.
Configurazione del sistema (ASP) 287
3.
Verificare linstallazione (vedere Verifica dellinstallazione a pagina 289). Creare una cartella principale (vedere Creazione di una cartella principale a pagina 290).
4.
N OT A
Linstallazione del server Web e del server applicazioni unoperazione che viene eseguita una sola volta.

Per sviluppare e verificare il funzionamento delle pagine Web dinamiche, necessario disporre di un server Web. Un server Web un software che fornisce pagine Web in risposta a richieste da parte di browser Web. Verificare che sia stato installato Microsoft IIS e che sia in esecuzione sul disco rigido o su un computer Windows remoto. (Gli utenti Macintosh devono installare Microsoft IIS su un computer Windows remoto). Un metodo rapido per verificare se IIS installato su un computer consiste nel controllare la struttura delle cartelle per vedere se contiene una cartella C:\Inetpub o D:\Inetpub che viene creata durante linstallazione di IIS. Se IIS non installato, procedere allinstallazione. Per informazioni, vedere Installazione di un server Web a pagina 247. Dopo aver installato il server Web, necessario installare un server applicazioni.
Installazione di un server applicazioni ASP

Per elaborare le pagine Web dinamiche, necessario disporre di un server applicazioni. Un server applicazioni un software che consente a un server Web di elaborare pagine Web contenenti script o tag server-side. Quando un browser richiede una di queste pagine, il server Web, prima di inviargliela, la invia al server applicazioni, dove viene elaborata. Per ulteriori informazioni, vedere Nozioni sulle applicazioni Web a pagina 231. Se IIS installato su un computer Windows, non necessario utilizzare un server applicazioni ASP separato. IIS funziona anche su server applicazioni ASP. Per ulteriori informazioni sullinstallazione e la verifica del funzionamento di IIS, vedere Installazione di un server Web a pagina 247. possibile verificare il corretto funzionamento del server.
Verifica dellinstallazione
possibile verificare il funzionamento del motore ASP di IIS eseguendo una pagina di prova.
Per verificare il funzionamento del motore ASP di IIS:
1.
In Dreamweaver o in un editor di testo, creare un file di testo semplice denominato timetest.asp. Inserire nel file il codice seguente:
<p>This page was created at <b> <%= Time %> </b> on the computer running ASP.</p>
2.
Il codice inserito consente di visualizzare lora in cui la pagina stata elaborata dal server.
3.
Copiare il file nella cartella C:\Inetpub\wwwroot del computer Windows che esegue IIS. Nel browser Web, inserire lURL della pagina di prova, quindi premere Invio. Se IIS viene eseguito sul computer locale, possibile inserire lURL seguente: http://localhost/timetest.asp
4.
Viene aperta la pagina di prova in cui visualizzata lora, come illustrato di seguito:
Configurazione del sistema (ASP) 289
Lora specificata rappresenta un contenuto dinamico poich viene modificata ogni volta che viene richiesta la pagina. Fare clic sul pulsante Aggiorna del browser per generare una nuova pagina con unora diversa.
NO TA N O TA
se si visualizza il codice di origine (Visualizza > HTML in Internet Explorer) possibile osservare che la pagina non utilizza script JavaScript clientside per la visualizzazione dellora.
Se la pagina non funziona come previsto, controllare che non siano presenti i seguenti errori:

Il file non ha lestensione .asp. stato digitato il percorso del file della pagina (C:\Inetput\wwwroot\timetest.asp) al posto dellURL (ad esempio, http://localhost/timetest.asp) nella casella di testo Indirizzo del browser. Se si inserisce un percorso di file nel browser, come avviene per le normali pagine HTML, vengono ignorati il server Web e il server applicazioni. Di conseguenza, la pagina non viene mai elaborata dal server.
LURL contiene un errore di digitazione. Cercare eventuali errori e verificare che il nome di file non sia seguito da una barra, ad esempio http://localhost/timetest.asp/. Il codice della pagina contiene un errore di digitazione.
Dopo aver installato e verificato il funzionamento del software del server, creare una cartella principale per lapplicazione Web.

1.
annotare il nome della cartella per un uso futuro. Quando in seguito si utilizza tale nome, digitarlo esattamente rispettando la distinzione tra lettere maiuscole e minuscole utilizzata in fase di creazione.
2.
Verificare che per la cartella siano attivate le autorizzazioni di lettura e di script effettuando quanto segue:
a.
Avviare lo strumento di amministrazione di IIS (in Windows XP, selezionare Start > Pannello di controllo oppure Start > Impostazioni > Pannello di controllo, quindi fare doppio clic su Strumenti di amministrazione e su Internet Information Services). Espandere lelenco computer locale, quindi la cartella Siti Web, infine la cartella Sito Web predefinito. Fare clic col pulsante destro del mouse sulla cartella MySampleApps e selezionare Propriet dal menu a comparsa. Nel menu a comparsa Autorizzazioni di esecuzione, verificare che sia selezionata lopzione Solo script. Per ragioni di sicurezza, si consiglia di non selezionare lopzione Script ed eseguibili. Fare clic su OK.
b.
c.
d.
e.
Definizione di un sito Dreamweaver (ASP)

1.
Copiare i file di esempio in una cartella sul disco rigido (vedere Copia dei file di esempio a pagina 292). Definire la cartella come cartella locale di Dreamweaver (vedere Definizione di una cartella locale a pagina 293).
2.
Definizione di un sito Dreamweaver (ASP) 291
3.
Definire la cartella principale del server Web come cartella remota di Dreamweaver (vedere Definizione di una cartella remota a pagina 294). Specificare una cartella per lelaborazione delle pagine dinamiche (vedere Specificazione del percorso di elaborazione delle pagine dinamiche a pagina 294). Caricare i file di esempio sul server Web (vedere Caricamento dei file di esempio a pagina 296).
4.
5.

1.
N OT A
su Macintosh, esiste gi una cartella chiamata Sites nella cartella utente. non utilizzare questa cartella Sites come cartella locale; la cartella Sites la posizione in cui vengono inserite le pagine per essere rese accessibili al pubblico quando si utilizza Macintosh come server Web. 2.
3.
Copiare la cartella cafe_townsend nella cartella local_sites. La cartella cafe_townsend quella che verr utilizzata come cartella principale per il sito di Dreamweaver. Dopo aver copiato la cartella cafe_townsend, definire la cartella come cartella locale di Dreamweaver.

Dopo aver copiato la cartella cafe_townsend, definire la cartella contenente i file di esempio di ASP.NET come cartella locale di Dreamweaver.
1.
In Dreamweaver, selezionare Sito > Gestisci siti. Nella finestra di dialogo Gestisci siti, fare clic sul pulsante Nuovo, quindi selezionare Sito. Viene visualizzata la finestra di dialogo Definizione del sito. Se visualizzata la scheda Generali, fare clic sulla scheda Avanzate. Nella casella di testo Nome del sito, inserire Cafe Townsend ASP. Il nome identifica il sito allinterno di Dreamweaver. Fare clic sullicona della cartella accanto alla casella di testo Cartella principale locale, quindi individuare la cartella seguente, che contiene i file di esempio di ASP:
2. 3.
4.
C:\Documents and Settingnome_utente\My Documents\local_sites\cafe_townsend\contact\asp (Windows) /Users/nome_utente/Documents/local_sites/cafe_townsend/ contact/asp (Macintosh)
5.

1.
Nella scheda Avanzate della finestra di dialogo Definizione del sito, selezionare Informazioni su remoto dallelenco Categoria. Viene visualizzata la finestra di dialogo Informazioni su remoto. Nel menu a comparsa Accesso, scegliere in che modo trasferire i file da e verso il server: mediante una rete locale, con lopzione Locale/rete, oppure mediante FTP.
2.
NO T A
nel menu a comparsa Accesso sono disponibili altre opzioni che per non verranno trattate in questa Guida. Per informazioni su queste opzioni, vedere Uso di Dreamweaver. 3.
Inserire il percorso o le impostazioni FTP per la cartella del server Web creata in Creazione di una cartella principale a pagina 290. possibile che la cartella si trovi sul disco rigido o su un computer remoto. Anche se stata creata sul disco rigido, la cartella comunque considerata la cartella remota. Nellesempio seguente, viene riportato un possibile percorso della cartella remota se stato scelto laccesso Locale/rete e la cartella remota si trova sul disco rigido Windows: Cartella remota: C:\Inetpub\wwwroot\MySampleApps Per ulteriori informazioni sullFTP, vedere Impostazione delle opzioni remote per laccesso FTP in Uso di Dreamweaver.


1.
Nella scheda Avanzate della finestra di dialogo Definizione del sito, fare clic su Server di prova nellelenco Categoria. Viene visualizzata la schermata Server di prova. Dreamweaver ha bisogno dei servizi di un server di prova per generare e visualizzare contenuti dinamici mentre si lavora. Come server di prova pu essere utilizzato il computer locale, un server di sviluppo, un server di preproduzione o un server di produzione purch sia in grado di elaborare le pagine ASP. In molti casi, compresa limpostazione del sito Cafe Townsend, possibile utilizzare le stesse impostazioni della categoria Informazioni su remoto (vedere Definizione di una cartella remota a pagina 294) che puntano a un server in grado di elaborare le pagine ASP.
2.
Selezionare ASP JavaScript o ASP VBScript dal menu a comparsa Modello server. Nella casella di testo Accesso, scegliere il metodo (Locale/rete o FTP) specificato per laccesso alla cartella remota. Dreamweaver inserisce le impostazioni specificate nella categoria Informazioni su remoto. Non modificare le impostazioni.
3.
4.
Nella casella di testo Prefisso URL, inserire lURL della cartella principale da specificare nel browser Web per richiedere una pagina nellapplicazione Web. Per visualizzare le informazioni Live Data nelle pagine mentre si lavora, Dreamweaver crea un file temporaneo, lo copia nella cartella principale del sito Web e prova a richiederlo utilizzando il prefisso URL. Dreamweaver deduce un prefisso URL in base alle informazioni specificate nella finestra di dialogo Definizione del sito. possibile tuttavia che il prefisso URL suggerito non sia corretto. Se il suggerimento in Dreamweaver non corretto, correggerlo o inserire un nuovo prefisso URL. Per ulteriori informazioni, vedere "Impostazione del prefisso URL" in Uso di Dreamweaver. Se la cartella specificata nella casella di testo Cartella remota c:\Inetpub\wwwroot\MySampleApps, il prefisso URL sar il seguente: http://localhost/MySampleApps/
il prefisso URL dovrebbe sempre specificare una directory e non una particolare pagina del sito. Inoltre, rispettare la distinzione tra lettere maiuscole e minuscole utilizzata per la creazione della cartella.
5.

1.
Nel pannello File (Finestra > File), selezionare la cartella principale del sito nel riquadro Vista locale. La cartella principale la prima cartella dellelenco. Fare clic sullicona blu a forma di freccia di Carica il/i file nella barra degli strumenti del pannello File e confermare il caricamento dellintero sito. Dreamweaver copia tutti i file nella cartella del server Web definita in Definizione di una cartella remota a pagina 294.
2.
Connessione al database di esempio (ASP)

NO T A
Per informazioni sulla connessione a un altro database, vedere il Capitolo 26, Connessioni di database per sviluppatori ASP in Uso di Dreamweaver.

1.
Se si sta utilizzando un computer remoto come server, impostare il database di esempio sul computer remoto (vedere Impostazione del database (server sul computer remoto) a pagina 297). Creare la connessione in Dreamweaver (vedere Creazione di una connessione di database a pagina 299).
2.

Le informazioni contenute in questa sezione si applicano solo alle configurazioni in cui il server Web viene eseguito su un computer remoto. Se il server Web viene eseguito sullo stesso computer di Dreamweaver, passare a Creazione di una connessione di database a pagina 299. Prima di tentare una connessione al database di esempio, effettuare le seguenti operazioni sul computer remoto che esegue il server Web: copiare il database di esempio sul disco rigido del computer e creare un DSN sul computer che fa riferimento al database.
Connessione al database di esempio (ASP) 297
Per impostare il database di esempio sul computer remoto:

1.
Copiare il database sul disco rigido del computer remoto. Se Dreamweaver installato nella sua posizione predefinita, il percorso sul disco rigido locale per il file di database (tutorial.mdb) il seguente:
C:\Program Files\MacromediaDreamweaver8\Tutorial_assets\cafe_townsend\da ta\tutorial.mdb (Windows) /Applications/Macromedia Dreamweaver 8/Tutorial_assets/ cafe_townsend/data/tutorial.mdb (Macintosh)
NO T A N OT A
per ragioni di sicurezza, anzich posizionare il file di database allinterno della cartella Inetpub sul computer remoto, pi opportuno collocare il file in una cartella che non sia accessibile al pubblico. 2.
Assicurarsi che sul computer remoto sia installato Microsoft Access Driver versione 4.0 o successiva. Per verificare se il driver gi installato, vedere Visualizzazione dei driver ODBC installati su un sistema Windows in Uso di Dreamweaver. Se il driver non installato, scaricare e installare Microsoft Data Access Components (MDAC) 2.5 e 2,7 sul computer remoto. possibile scaricare gratuitamente MDAC dal sito Web di Microsoft allindirizzo http://msdn.microsoft.com/data/mdac/downloads/. I pacchetti contengono i driver Microsoft pi recenti, incluso Microsoft Access Driver.
installare MDAC 2.5 prima di installare MDAC 2.7.
3.
Impostare un DSN denominato CafeTownsend che faccia riferimento al database di esempio sul computer remoto. Per istruzioni, consultare i seguenti articoli presso il sito Web Microsoft:
Se sul computer remoto in esecuzione Windows 2000, vedere larticolo 300596 allindirizzo http://support.microsoft.com/ default.aspx?scid=kb;en-us;300596. Se sul computer remoto in esecuzione Windows XP, vedere larticolo 305599 allindirizzo http://support.microsoft.com/ default.aspx?scid=kb;en-us;305599.
Dopo aver impostato il database, il driver del database e il DSN, creare una connessione di database in Dreamweaver.

Il passaggio finale del processo di impostazione consiste nel creare una connessione al database. Se il server Web in esecuzione sul computer locale, possibile utilizzare il nome origine dati (DSN) creato da Dreamweaver durante linstallazione per connettersi rapidamente al database di esempio. Per maggiori informazioni sui DSN, vedere Uso di un DSN in Uso di Dreamweaver.
1.
Aprire una pagina ASP in Dreamweaver, quindi aprire il pannello Database (Finestra > Database). Fare clic sul pulsante pi (+) nel pannello e selezionare DSN dal menu a comparsa. Viene visualizzata la finestra di dialogo DSN (Data Source Name). Immettere connTownsend come nome della connessione. Effettuare una delle seguenti operazioni (solo per Windows):
2.
3. 4.
Se il server si trova sul computer locale, selezionare lopzione Utilizzando il DSN locale. Se il server si trova su un computer remoto, selezionare lopzione Utilizzando il DSN sul server di prova.
Gli utenti Macintosh possono ignorare questo passaggio, in quanto tutte le connessioni di database utilizzano DSN sul server di prova.
Connessione al database di esempio (ASP) 299
5.
Fare clic sul pulsante DSN e selezionare CafeTownsend dallelenco di DSN. Se si sta utilizzando Dreamweaver su un computer Windows, durante linstallazione Dreamweaver crea un DSN denominato CafeTownsend, che punta al database di Microsoft Access nella cartella dellapplicazione di Dreamweaver.
6.
Fare clic su Prova. Dreamweaver tenta di connettersi al database. Se la connessione fallisce, effettuare le seguenti operazioni:

Verificare il DSN. Verificare le impostazioni della cartella utilizzata da Dreamweaver per elaborare le pagine dinamiche (vedere Specificazione del percorso di elaborazione delle pagine dinamiche a pagina 294). Vedere il Capitolo 29, Risoluzione dei problemi relativi alle connessioni di database in Uso di Dreamweaver.
7.
Lapplicazione ASP di esempio ora impostata per le esercitazioni della Guida introduttiva di Dreamweaver. Per ulteriori informazioni, vedere Esercitazione: Sviluppo di unapplicazione Web a pagina 207.
APPENDICE F
Configurazione di un sito JSP di esempio

Macromedia Dreamweaver 8 include pagine Web JSP (Java Server Pages) di esempio che consentono la creazione di unapplicazione Web semplice. Questo capitolo descrive come impostare lapplicazione di esempio utilizzando Microsoft Internet Information Server (IIS). Per ulteriori informazioni su questi server Web, vedere Installazione di un server Web a pagina 247. Se si utilizza un diverso server Web, fare riferimento al Capitolo 23, Impostazione di unapplicazione Web in Uso di Dreamweaver (? > Uso di Dreamweaver). Il processo di configurazione di unapplicazione Web prevede tre diverse fasi: configurazione del sistema, definizione di un sito Dreamweaver e connessione dellapplicazione al database. Questo capitolo di configurazione descrive le tre fasi. Questo capitolo contiene le seguenti sezioni:
Elenco di impostazioni per gli sviluppatori JSP. . . . . . . . . . . . . . 302 Configurazione del sistema (JSP) . . . . . . . . . . . . . . . . . . . . . . . . . 302 Definizione di un sito di Dreamweaver (JSP) . . . . . . . . . . . . . . . 306 Connessione al database di esempio (JSP) . . . . . . . . . . . . . . . . . 312
301
Elenco di impostazioni per gli sviluppatori JSP

1. 2. 3.
Verificare di disporre di un server Web. Installare il server applicazioni JSP. Creare una cartella principale.

1. 2. 3.
4. 5.

1. 2.
Installare un driver JDBC-ODBC Bridge. Se si sta utilizzando un computer remoto come server, copiare il database di esempio sul computer remoto. Creare la connessione in Dreamweaver.
3.
Configurazione del sistema (JSP)

In questa sezione vengono fornite le istruzioni per due configurazioni di sistema comuni: una in cui Microsoft ISS installato sul disco rigido e una in cui ISS installato su un computer Windows remoto. Per utilizzare una diversa configurazione, vedere il Capitolo 23, Impostazione di unapplicazione Web in Uso di Dreamweaver.
302 Configurazione di un sito JSP di esempio

IIS
Server applicazioni JSP Cartella principale del sito Web in c:\Inetpub\wwwroot\
SERVER WINDOWS IIS
Server applicazioni JSP Cartella principale del sito Web in c:\Inetpub\wwwroot\

1.
Verificare di disporre di un server Web (vedere Ricerca del server Web a pagina 304). Installare il server applicazioni JSP (vedere Installazione di un server applicazioni JSP a pagina 304). Creare una cartella principale (vedere Creazione di una cartella principale a pagina 305).
2.
3.
NO T A
Configurazione del sistema (JSP) 303

Per sviluppare e verificare il funzionamento delle pagine Web dinamiche, necessario disporre di un server Web. Un server Web un software che fornisce pagine Web in risposta a richieste da parte di browser Web. Verificare che sia stato installato Microsoft IIS e che sia in esecuzione sul disco rigido o su un computer Windows remoto. (Gli utenti Macintosh devono installare Microsoft IIS su un computer Windows remoto). Un metodo rapido per verificare se IIS installato su un computer consiste nel controllare la struttura delle cartelle per vedere se contiene una cartella C:\Inetpub o D:\Inetpub che viene creata durante linstallazione di IIS. Se IIS non installato, procedere allinstallazione. Per informazioni, vedere Installazione di un server Web a pagina 247. Dopo aver installato il server Web, installare il server applicazioni.
Installazione di un server applicazioni JSP

Per elaborare le pagine Web dinamiche, necessario disporre di un server applicazioni. Un server applicazioni un software che consente a un server Web di elaborare pagine Web contenenti script o tag server-side. Quando un browser richiede una di queste pagine, il server Web, prima di inviargliela, la invia al server applicazioni, dove viene elaborata. Per ulteriori informazioni, vedere Nozioni sulle applicazioni Web a pagina 231. Verificare che un server applicazioni JSP sia installato e in esecuzione sul sistema che esegue IIS. possibile che IIS sia installato sul disco rigido locale o su un computer remoto. Se non installato un server applicazioni JSP, possibile scaricare e installare Macromedia JRun Developer Edition, un server applicazioni JSP completo, dal sito Web di Macromedia allindirizzo www.macromedia.com/go/jrun/. JRun disponibile sia per Windows che per Macintosh. Tuttavia, in questa Guida non viene illustrato luso di JRun su Macintosh.
Per installare JRun:
1.
Se possibile, collegarsi al sistema Windows utilizzando laccount di amministratore. Chiudere tutte le applicazioni aperte.
2.
3.
Fare doppio clic sul file di installazione di JRun Developer Edition. Viene visualizzata la schermata di apertura. Se Java Runtime Environment (JRE) non installato sul sistema, selezionare lopzione di installazione nella schermata di apertura. Poich il server applicazioni JRun basato su Java, necessario installare JRE sul sistema in cui verr eseguito il server applicazioni. Dopo aver installato JRE, possibile procedere allinstallazione del server applicazioni JRun.
4.
5.
Nella schermata di apertura, selezionare lopzione di installazione di JRun. Per completare linstallazione del programma e verificarne il funzionamento, seguire le istruzioni visualizzate sullo schermo. Una volta completata linstallazione, creare un connettore JRun per il server Web IIS selezionando Start > Program Files > Macromedia JRun 4 > Configurazione server Web. Per istruzioni, vedere la documentazione di JRun.
6.
7.
Dopo aver installato e avviato JRun, creare una cartella principale per lapplicazione Web.

1.
NO T A
annotare questo nome di cartella per un uso futuro. Successivamente, digitare il nome esatto rispettando la distinzione tra lettere maiuscole e minuscole utilizzate in fase di creazione.
Configurazione del sistema (JSP) 305
2.
Verificare che per la cartella siano attivate le autorizzazioni di lettura e di script effettuando una delle seguenti operazioni :
a.
Avviare lo strumento di amministrazione di IIS (in Windows XP, selezionare Start >Pannello di controllo oppure Start > Impostazioni > Pannello di controllo, quindi fare doppio clic su Strumenti di amministrazione, quindi su Internet Information Services). Espandere lelenco computer locale, quindi la cartella Siti Web, infine la cartella Sito Web predefinito. Fare clic col pulsante destro del mouse sulla cartella MySampleApps e selezionare Propriet dal menu a comparsa. Nel menu a comparsa Autorizzazioni di esecuzione, verificare che sia selezionata lopzione Solo script. Per ragioni di sicurezza, si consiglia di non selezionare lopzione Script ed eseguibili. Fare clic su OK.
b.
c.
d.
e.
Definizione di un sito di Dreamweaver (JSP)

1.
Copiare i file di esempio in una cartella sul disco rigido (vedere Copia dei file di esempio a pagina 307). Definire la cartella come cartella locale di Dreamweaver (vedere Definizione di una cartella locale a pagina 308). Definire la cartella principale del server Web come cartella remota di Dreamweaver (vedere Definizione di una cartella remota a pagina 308).
2.
3.
4.
Specificare una cartella per lelaborazione delle pagine dinamiche (vedere Specificazione del percorso di elaborazione delle pagine dinamiche a pagina 309). Caricare i file di esempio sul server Web (vedere Caricamento dei file di esempio a pagina 311).
5.

1.
C:\Documents and Setting\nome_utente\My Documents\local_sites (Windows) /Users/nome_utente/Documents/local_sites (Macintosh).
N OT A
sul Macintosh, esiste gi una cartella chiamata Siti nella cartella utente. Non utilizzare questa cartella Sites come cartella locale; la cartella Sites la posizione in cui vengono inserite le pagine per essere rese accessibili al pubblico quando si utilizza Macintosh come server Web. 2.
3.
Definizione di un sito di Dreamweaver (JSP) 307

Dopo aver copiato la cartella cafe_townsend, definire la cartella contenente i file di esempio di JSP come cartella locale di Dreamweaver.
1.
In Dreamweaver, selezionare Sito > Gestisci siti. Nella finestra di dialogo Gestisci siti, fare clic sul pulsante Nuovo, quindi selezionare Sito. Viene visualizzata la finestra di dialogo Definizione del sito. Se visualizzata la scheda Generali, fare clic sulla scheda Avanzate. Nella casella di testo Nome del sito, inserire Cafe Townsend JSP. Il nome identifica il sito allinterno di Dreamweaver. Fare clic sullicona della cartella accanto alla casella di testo Cartella principale locale, quindi individuare la cartella seguente, che contiene i file di esempio di JSP:
2. 3.
4.
C:\Documents and Setting\nome_utente\My Documents\local_sites\cafe_townsend \contact\jsp (Windows) /Users/nome_utente/Documents/local_sites/cafe_townsend/ contact/jsp (Macintosh)
5.

1.
Nella scheda Avanzate della finestra di dialogo Definizione del sito, selezionare Informazioni su remoto dallelenco Categoria. Viene visualizzata la schermata Informazioni su remoto.
2.
Nel menu a comparsa Accesso, scegliere come si desidera trasferire i file da e verso il server: mediante una rete locale, con lopzione Locale/rete, oppure mediante FTP.
NO TA
nel menu a comparsa Accesso sono disponibili altre opzioni non trattate in questa Guida. Per informazioni su queste opzioni, vedere Uso di Dreamweaver. 3.
Inserire il percorso o le impostazioni FTP per la cartella del server Web creata in Creazione di una cartella principale a pagina 305. possibile che la cartella si trovi sul disco rigido o su un computer remoto. Anche se stata creata sul disco rigido, la cartella considerata la cartella remota valida. Nellesempio seguente viene riportato un possibile percorso della cartella remota se si scelto laccesso Locale/rete e la cartella remota si trova sul disco rigido Windows: Cartella remota: C:\Inetpub\wwwroot\MySampleApps Per ulteriori informazioni sullFTP, vedere Impostazione delle opzioni remote per laccesso FTP in Uso di Dreamweaver (? > Uso di Dreamweaver).

1.
Nella scheda Avanzate della finestra di dialogo Definizione del sito, fare clic su Server di prova nellelenco Categoria.
Definizione di un sito di Dreamweaver (JSP) 309
Viene visualizzata la schermata Server di prova. Dreamweaver ha bisogno dei servizi di un server di prova per generare e visualizzare contenuti dinamici mentre si lavora. Come server di prova pu essere utilizzato il computer locale, un server di sviluppo, un server di preproduzione o un server di produzione purch sia in grado di elaborare le pagine JSP. In molti casi, compresa limpostazione del sito Cafe Townsend, possibile utilizzare le stesse impostazioni della categoria Informazioni su remoto (vedere Definizione di una cartella remota a pagina 308) che puntano a un server in grado di elaborare le pagine JSP.
2. 3.
Selezionare JSP dal menu a comparsa Modello server. Nella casella di testo Accesso, scegliere il metodo (Locale/rete o FTP) specificato per laccesso alla cartella remota. Dreamweaver inserisce le impostazioni specificate nella categoria Informazioni su remoto. Non modificare le impostazioni.
4.
Nella casella di testo Prefisso URL, inserire lURL della cartella principale da specificare nel browser Web per richiedere una pagina nellapplicazione Web. Per visualizzare le informazioni Live Data nelle pagine mentre si lavora, Dreamweaver crea un file temporaneo, lo copia nella cartella principale del sito Web e prova a richiederlo utilizzando il prefisso URL. Dreamweaver deduce un prefisso URL in base alle informazioni specificate nella finestra di dialogo Definizione del sito. possibile tuttavia che il prefisso URL suggerito non sia corretto. Se il suggerimento in Dreamweaver non corretto, correggerlo o inserire un nuovo prefisso URL. Per ulteriori informazioni, consultare la sezione Impostazione del prefisso URL in Uso di Dreamweaver. Se la cartella specificata nella casella di testo Cartella remota c:\Inetpub\wwwroot\MySampleApps, il prefisso URL sar il seguente: http://localhost/MySampleApps/
5.

1.
il prefisso URL dovrebbe sempre specificare una directory e non una particolare pagina del sito. Inoltre, rispettare la distinzione tra lettere maiuscole e minuscole utilizzata per la creazione della cartella.
Nel pannello File (Finestra > File), selezionare la cartella principale del sito nel riquadro Vista locale. La cartella principale la prima cartella dellelenco. Fare clic sullicona blu a forma di freccia Carica il/i file nella barra degli strumenti del pannello File e confermare il caricamento dellintero sito. Dreamweaver copia tutti i file nella cartella del server Web definita in Definizione di una cartella remota a pagina 308.
2.
Definizione di un sito di Dreamweaver (JSP)
311
Connessione al database di esempio (JSP)

NO T A N O TA
Per informazioni sulla connessione a un altro database, vedere il Capitolo 27, Connessioni di database per sviluppatori JSP in Uso di Dreamweaver.

1.
Installare il driver Bridge (vedere Installazione del driver Bridge a pagina 312). Se si sta utilizzando un computer remoto come server, impostare il database di esempio sul computer remoto (vedere Impostazione del database (server sul computer remoto) a pagina 313). Creare la connessione in Dreamweaver (vedere Creazione di una connessione di database a pagina 315).
2.
3.
Installazione del driver Bridge

Prima di tentare la connessione al database di esempio, installare il driver Sun JDBC-ODBC Bridge sul computer che esegue il server Web. Il driver Bridge consente di utilizzare i DSN (Data Source Name) di Windows per la creazione delle connessioni. Il driver viene fornito con Java 2 SDK Standard Edition per Windows. Per verificare se si dispone gi di Java 2 SDK completo del driver, cercare sul disco rigido una delle seguenti directory: C:\jdk1.2.x C:\jdk1.3.x C:\j2sdk1.4.x
il termine Java 2 si riferisce a Java 1.2 e versioni successive.
Se non si dispone dellSDK, scaricarlo dal sito Web di Sun allindirizzo http://java.sun.com/j2se/. Dopo aver scaricato il file di installazione, fare doppio clic sul file per eseguire il programma di installazione. Seguire le istruzioni visualizzate sullo schermo e verificare che il componente Java 2 Runtime Environment sia selezionato nella finestra di dialogo Seleziona componente. Il componente dovrebbe essere selezionato per impostazione predefinita. Il driver viene installato automaticamente insieme allSDK. Sebbene adeguato a utilizzi di sviluppo con sistemi di database lower-end quali Microsoft Access, il driver Sun JDBC-ODBC Bridge non destinato alla produzione. Ad esempio, il driver consente la connessione al database di una sola pagina JSP alla volta (non supporta lutilizzo simultaneo da parte di pi thread). Per ulteriori informazioni sui limiti del driver, vedere la nota tecnica 17392 del Centro di assistenza Macromedia allindirizzo www.macromedia.com/go/17392. Dopo aver installato il driver Bridge, impostare il database se necessario, quindi creare una connessione di database in Dreamweaver.

Le informazioni contenute in questa sezione si applicano solo alle configurazioni in cui il server Web viene eseguito su un computer remoto. Se il server Web viene eseguito sullo stesso computer di Dreamweaver, passare a Creazione di una connessione di database a pagina 315. Prima di tentare una connessione al database di esempio, effettuare le seguenti operazioni sul computer remoto che esegue il server Web: copiare il database di esempio sul disco rigido del computer, creare un DSN sul computer che fa riferimento al database e installare il driver Sun JDBCODBC Bridge sul computer.
Per impostare il database di esempio sul computer remoto:
1.
Copiare il database sul disco rigido del computer remoto. Se Dreamweaver installato nella sua posizione predefinita, il percorso sul disco rigido locale per il file di database (tutorial.mdb) il seguente:
C:\Program Files\MacromediaDreamweaver 8\Tutorial_assets\cafe_townsend\data\tutorial.mdb (Windows) /Applications/Macromedia Dreamweaver 8/Tutorial_assets/ cafe_townsend/data/tutorial.mdb (Macintosh)
Connessione al database di esempio (JSP) 313
N OT A NO TA
per ragioni di sicurezza, anzich posizionare il file di database allinterno della cartella Inetpub sul computer remoto, pi opportuno collocare il file in una cartella che non sia accessibile al pubblico. 2.
Assicurarsi che sul computer remoto sia installato Microsoft Access Driver versione 4.0 o successiva. Per verificare se il driver gi installato, vedere Visualizzazione dei driver ODBC installati su un sistema Windows in Uso di Dreamweaver. Se il driver non installato, scaricare e installare Microsoft Data Access Components (MDAC) 2.5 e 2,7 sul computer remoto. possibile scaricare gratuitamente MDAC dal sito Web di Microsoft allindirizzo http://msdn.microsoft.com/data/mdac/downloads/. I pacchetti contengono i driver Microsoft pi recenti, incluso Microsoft Access Driver.
installare MDAC 2.5 prima di installare MDAC 2,7.
3.
Impostare un DSN denominato CafeTownsend che faccia riferimento al database di esempio sul computer remoto. Per istruzioni, vedere i seguenti articoli sul sito Web di Microsoft:
Se sul computer remoto in esecuzione Windows 2000, vedere larticolo 300596 allindirizzo http://support.microsoft.com/ default.aspx?scid=kb;en-us;300596. Se sul computer remoto in esecuzione Windows XP, vedere larticolo 305599 allindirizzo http://support.microsoft.com/ default.aspx?scid=kb;en-us;305599.
4.
Verificare che il driver Sun JDBC-ODBC Bridge sia installato sul computer remoto. Il driver e il DSN vengono utilizzati per creare una connessione al database. Per informazioni, vedere Installazione del driver Bridge a pagina 312.
Dopo aver impostato il database, il DSN e il driver Bridge, creare una connessione di database in Dreamweaver.

1.
Aprire una pagina JSP in Dreamweaver, quindi aprire il pannello Database (Finestra > Database). Fare clic sul pulsante pi (+) nel pannello e selezionare Database ODBC (driver Sun JDBC-ODBC) dal menu a comparsa. Viene visualizzata la finestra di dialogo Database ODBC (driver Sun JDBC-ODBC).
2.
3. 4.
Immettere connTownsend come nome della connessione. Effettuare una delle seguenti operazioni (solo per Windows):
Se il server si trova sul computer locale, selezionare lopzione Utilizzando il driver su questo computer. Se il server si trova sul computer remoto, selezionare lopzione Utilizzando il driver sul server di prova.
Gli utenti Macintosh possono ignorare questo passaggio, in quanto tutte le connessioni di database utilizzano i driver sul server di prova.
5.
Nella casella di testo URL, sostituire il segnaposto [odbc dsn] con CafeTownsend. La casella di testo URL dovrebbe contenere le seguenti informazioni:
jdbc:odbc:CafeTownsend
Se si sta utilizzando Dreamweaver su un computer Windows, durante linstallazione Dreamweaver crea un DSN denominato CafeTownsend, che punta al database di Microsoft Access nella cartella dellapplicazione di Dreamweaver.
Connessione al database di esempio (JSP) 315
6.

Verificare il DSN e gli altri parametri di connessione. Verificare le impostazioni della cartella utilizzata da Dreamweaver per elaborare le pagine dinamiche (vedere Specificazione del percorso di elaborazione delle pagine dinamiche a pagina 309). Consultare il Capitolo 29, Risoluzione dei problemi relativi alle connessioni di database in Uso di Dreamweaver (? >Uso diDreamweaver).
7.
Lapplicazione JSP di esempio ora impostata per le esercitazioni della Guida introduttiva di Dreamweaver. Per ulteriori informazioni, vedere Esercitazione: Sviluppo di unapplicazione Web a pagina 207.
APPENDICE G
Configurazione di un sito PHP di esempio

Macromedia Dreamweaver 8 include pagine PHP di esempio che consentono di creare unapplicazione Web semplice. Questo capitolo descrive come impostare lapplicazione di esempio utilizzando Microsoft Internet Information Server (IIS). Per ulteriori informazioni su questo server Web, vedere Installazione di un server Web a pagina 247. Se si utilizza un diverso server Web, vedere il Capitolo 23, Impostazione di unapplicazione Web in Uso di Dreamweaver. Gli utenti Macintosh possono connettersi a un server PHP remoto oppure sviluppare siti PHP localmente utilizzando il server Web Apache e il server applicazioni PHP installati con il sistema operativo. Per informazioni sulle impostazioni, visitare i seguenti siti Web:

http://developer.apple.com/internet/opensource/php.html www.entropy.ch/software/macosx/php/
Il processo di configurazione di unapplicazione Web prevede tre diverse fasi: configurazione del sistema, definizione di un sito Dreamweaver e connessione dellapplicazione al database. Questa guida di configurazione descrive le tre fasi. Questo capitolo contiene le seguenti sezioni:
Elenchi di impostazioni per gli sviluppatori PHP . . . . . . . . . . . . . . 318 Configurazione del sistema (PHP) . . . . . . . . . . . . . . . . . . . . . . . . . . 318 Definizione di un sito Dreamweaver (PHP) . . . . . . . . . . . . . . . . . .327 Connessione al database di esempio (PHP) . . . . . . . . . . . . . . . . 333
317
Elenchi di impostazioni per gli sviluppatori PHP

1. 2. 3. 4.
Verificare di disporre di un server Web. Installare il server applicazioni PHP. Verificare linstallazione. Creare una cartella principale.

1. 2. 3.
4. 5.

1. 2.
Creare il database di esempio MySQL. Creare la connessione in Dreamweaver.
Configurazione del sistema (PHP)

Per eseguire pagine PHP sul sistema necessario prima configurare questultimo. In particolare, necessario verificare che un server Web e un server applicazioni PHP siano installati e in esecuzione sul sistema, quindi necessario creare una cartella principale per i file PHP.
318 Configurazione di un sito PHP di esempio
Configurazione del sistema Windows (PHP)

In questa sezione vengono fornite le istruzioni per due configurazioni Windows comuni: una in cui Microsoft ISS installato sul disco rigido e una in cui ISS installato su un computer Windows remoto. Per utilizzare una diversa configurazione, vedere il Capitolo 23, Impostazione di unapplicazione Web in Uso di Dreamweaver. Lillustrazione seguente mostra le due configurazioni descritte in questa sezione:
IIS
Server applicazioni PHP Cartella principale del sito Web in c:\Inetpub\wwwroot\
SERVER WINDOWS IIS
Server applicazioni PHP Cartella principale del sito Web in c:\Inetpub\wwwroot\
Configurazione del sistema (PHP) 319

1.
Verificare di disporre di un server Web (vedere Ricerca del server Web (Windows) a pagina 320). Installare il server applicazioni PHP (vedere Installazione di un server applicazioni PHP (Windows) a pagina 320). Verificare linstallazione (vedere Verifica dellinstallazione di PHP (Windows) a pagina 322). Creare una cartella principale (vedere Creazione di una cartella principale (Windows) a pagina 324).
2.
3.
4.
NO TA
Ricerca del server Web (Windows)

Per sviluppare e verificare il funzionamento delle pagine Web dinamiche, necessario disporre di un server Web. Un server Web un software che fornisce pagine Web in risposta a richieste da parte di browser Web. Verificare che sia stato installato Microsoft IIS e che sia in esecuzione sul disco rigido o su un computer Windows remoto. Un metodo rapido per verificare se IIS installato su un computer consiste nel controllare la struttura delle cartelle per vedere se contiene una cartella C:\Inetpub o D:\Inetpub che viene creata durante linstallazione di IIS. Se IIS non installato, procedere allinstallazione. Per informazioni, vedere Installazione di un server Web a pagina 247. Dopo aver installato il server Web, installare il server applicazioni.
Installazione di un server applicazioni PHP (Windows)

Per elaborare le pagine Web dinamiche, necessario disporre di un server applicazioni. Un server applicazioni un software che consente a un server Web di elaborare pagine Web contenenti script o tag server-side. Quando un browser richiede una di queste pagine, il server Web, prima di inviargliela, la invia al server applicazioni, dove viene elaborata. Per ulteriori informazioni, vedere Nozioni sulle applicazioni Web a pagina 231.
Verificare che un server applicazioni PHP sia installato e in esecuzione sul sistema che esegue IIS. ( possibile che IIS sia installato sul disco rigido o su un computer Windows remoto). possibile scaricarlo e installarlo dal sito Web di PHP allindirizzo www.php.net/downloads.php. Con PHP 5, lestensione che consente a PHP di funzionare con un server di database MySQL non installata o abilitata per impostazione predefinita dal programma di installazione di Windows. necessario installarla e abilitarla manualmente.
Per installare PHP 5 su un sistema Windows:
1.
Se possibile, collegarsi al sistema Windows utilizzando laccount di amministratore. Scaricare il programma di installazione di PHP 5.x per Windows dal sito Web di PHP allindirizzo www.php.net/downloads.php. Fare doppio clic sul file del programma di installazione scaricato e seguire le istruzioni di installazione a video. Dopo aver installato correttamente PHP, scaricare il pacchetto di file compressi PHP 5.x per Windows dal sito Web di PHP allindirizzo www.PHP.net/downloads.php, e quindi estrarlo in una cartella temporanea sul disco rigido. Il pacchetto contiene lestensione necessaria per operare con MySQL. Nella cartella temporanea contenente il file non compresso, individuare la cartella ext e copiarla nella cartella C:\PHP\. La cartella ext contiene le comuni estensioni PHP, compresa lestensione per MySQL.
2.
3.
4.
5.
6.
Nella cartella C:\Windows individuare il file php.ini e aprirlo mediante Blocco note. necessario modificare questo file per abilitare lestensione per MySQL.
7.
Individuare la riga seguente nel file php.ini: extension_dir = "./" Questa riga specifica dove PHP andr a cercare le estensioni.
8.
Modificare la riga come segue: extension_dir = "C:\PHP\ext\" Individuare la riga seguente nel file php.ini: ;extension=php_mysql.dll Il punto e virgola (;) allinizio della riga indica a PHP di ignorarla.
Non omettere la barra finale.
9.
10. Eliminare
il punto e virgola allinizio della riga per attivare lestensione.
extension=php_mysql.dll
11.
Salvare e chiudere il file php.ini. cartella temporanea contenente i file PHP non compressi, individuare il file libmysql.dll e copiarlo nella cartella C:\Windows\system32. Questo file necessario perch IIS possa funzionare con PHP 5 e MySQL.
12. Nella
13.
Riavviare IIS.
Per ulteriori informazioni sullattivazione dellestensione per MySQL, vedere il sito Web di PHP allindirizzo www.php.net/manual/en/ ref.mysql.php. Per ulteriori informazioni sulla configurazione del server applicazioni, consultare la documentazione di PHP, anchessa scaricabile dal sito Web PHP allindirizzo www.php.net/download-docs.php. Dopo aver installato PHP; possibile verificare il corretto funzionamento del server.
Verifica dellinstallazione di PHP (Windows)

possibile verificare il funzionamento del server applicazioni PHP eseguendo una pagina di prova.
Per verificare il funzionamento del server applicazioni PHP:
1.
In Dreamweaver o in un editor di testo, creare un file di testo semplice denominato timetest.php. Inserire nel file il codice seguente:
<p>This page was created at <b> <?php echo date("h:i:s a", time()); ?> </b> on the computer running PHP.</p>
2.
3.
Copiare il file nella cartella C:\Inetpub\wwwroot del computer Windows che esegue IIS. Nel browser Web, inserire lURL della pagina di prova quindi premere Invio. Se PHP stato installato sul computer locale, possibile inserire lURL seguente: http://localhost/timetest.php
4.
Viene aperta la pagina di prova in cui visualizzata lora, come illustrato di seguito:
Lora specificata rappresenta un contenuto dinamico poich viene modificata ogni volta che viene richiesta la pagina. Fare clic sul pulsante Aggiorna del browser per generare una nuova pagina con unora diversa.
NO TA
se si visualizza il codice di origine (Visualizza > HTML in Internet Explorer) possibile osservare che la pagina non utilizza script JavaScript clientside per la visualizzazione dellora.

Il file non ha lestensione .php. stato digitato il percorso del file della pagina (C:\Inetput\wwwroot\timetest.php) al posto dellURL (ad esempio, http://localhost/timetest.php) nella casella di testo Indirizzo del browser.
Se si inserisce un percorso di file nel browser, come avviene per le normali pagine HTML, vengono ignorati il server Web e il server applicazioni. Di conseguenza, la pagina non viene mai elaborata dal server.
LURL contiene un errore di digitazione. Cercare eventuali errori e verificare che il nome di file non sia seguito da una barra, ad esempio http://localhost/timetest.php/. Il codice della pagina contiene un errore di digitazione.
Dopo aver installato e verificato il funzionamento del software del server, creare una cartella principale per lapplicazione Web.
Creazione di una cartella principale (Windows)

1.
N OT A
annotare su un foglio il nome della cartella per un uso futuro. Successivamente, digitare il nome esatto rispettando la distinzione tra lettere maiuscole e minuscole utilizzate in fase di creazione.
2.
Verificare che per la cartella siano attivate le autorizzazioni di lettura e di script effettuando una delle seguenti operazioni :
a.
Avviare lo strumento di amministrazione di IIS (in Windows XP, selezionare Start >Pannello di controllo oppure Start > Impostazioni > Pannello di controllo, quindi fare doppio clic su Strumenti di amministrazione, quindi su Internet Information Services). Espandere lelenco computer locale, quindi la cartella Siti Web, infine la cartella Sito Web predefinito.
b.
c.
Fare clic col pulsante destro del mouse sulla cartella MySampleApps e selezionare Propriet dal menu a comparsa. Nel menu a comparsa Autorizzazioni di esecuzione, verificare che sia selezionata lopzione Solo script. Per ragioni di sicurezza, si consiglia di non selezionare lopzione Script ed eseguibili. Fare clic su OK.
d.
e.
Il server Web stato configurato per lelaborazione delle pagine Web contenute nella cartella principale in risposta alle richieste HTTP dei browser Web. Dopo aver configurato il sistema, necessario definire un sito Dreamweaver. (Vedere Definizione di un sito Dreamweaver (PHP) a pagina 327.)
Configurazione del sistema Macintosh (PHP)

Gli utenti Macintosh possono eseguire pagine PHP localmente utilizzando il server Web Apache e il server applicazioni PHP installati con il sistema operativo. La configurazione del sistema comporta la verifica del corretto funzionamento del server Web e del server applicazioni PHP e la creazione di una cartella principale per i file PHP. La sezione contiene i seguenti argomenti:

Verifica dellinstallazione di PHP (Macintosh) a pagina 325 Creazione di una cartella principale (Macintosh) a pagina 327
Per ulteriori informazioni su Apache e PHP su Macintosh, vedere i siti Web seguenti:

http://developer.apple.com/internet/opensource/php.html www.entropy.ch/software/macosx/php/
Verifica dellinstallazione di PHP (Macintosh)

possibile verificare il corretto funzionamento del server Web Apache e del server applicazioni PHP sul Macintosh eseguendo una pagina di prova. Tuttavia, prima di poter utilizzare il server Web per fornire il contenuto e le pagine PHP dai database MySQL, necessario configurare il server per il funzionamento con PHP e MySQL. Per informazione su questo processo, vedere www.macromedia.com/go/php_macintosh.
Per verificare il funzionamento del server Web Apache e del server applicazioni PHP:
1.
Configurare il server nel modo descritto nellarticolo presente sul sito Web Macromedia. In Dreamweaver o in un editor di testo, creare un file di testo semplice denominato timetest.php. Inserire nel file il codice seguente:
<p>This page was created at <b> <?php echo date("h:i:s a", time()); ?> </b> on the computer running PHP.</p>
2.
3.
4.
Copiare il file nella cartella /Users/nome_utente/Sites sul Macintosh. La cartella Sites la cartella principale dellutente per il server Web Apache.
5.
Nel browser Web, inserire il seguente URL e premere Invio: http://localhost/~nome_utente/timetest.php
Viene aperta la pagina di prova in cui visualizzata lora. Lora specificata rappresenta un contenuto dinamico poich viene modificata ogni volta che viene richiesta la pagina. Fare clic sul pulsante Aggiorna del browser per generare una nuova pagina con unora diversa.
N OT A
se si visualizza il codice di origine (Visualizza > View Source in Safari) possibile osservare che la pagina non utilizza script JavaScript client-side per la visualizzazione dellora.

Il file non ha lestensione .php. LURL contiene un errore di digitazione. Controllare la presenza di eventuali errori e verificare che il nome del file non sia seguito da una barra, ad esempio http://localhost/~nome_utente/timetest.php/. Verificare, inoltre, di avere incluso la tilde (~) prima del nome utente. Il codice della pagina contiene un errore di digitazione. Il server Apache non in esecuzione. Accedere alle preferenze del sistema, nella categoria della condivisione, per verificare che sia attivata lopzione Personal Web Sharing.
Dopo aver installato e provato il funzionamento del software del server, creare una cartella principale per lapplicazione Web.
Creazione di una cartella principale (Macintosh)

Dopo linstallazione del software del server, creare una cartella principale per lapplicazione Web sul Macintosh.
Creare una cartella chiamata MySampleApps nella cartella /Users/ nome_utente/Sites. Apache elabora tutte le pagine contenute nella cartella e in tutte le sottocartelle in risposta a una richiesta HTTP proveniente da un browser Web.
Dopo aver configurato il sistema, necessario definire un sito Dreamweaver.
Definizione di un sito Dreamweaver (PHP)

1.
Copiare i file di esempio in una cartella sul disco rigido (vedere Copia dei file di esempio a pagina 328). Definire la cartella come cartella locale di Dreamweaver (vedere Definizione di una cartella locale a pagina 329). Definire la cartella principale del server Web come cartella remota di Dreamweaver (vedere Definizione di una cartella remota a pagina 329). Specificare una cartella per lelaborazione delle pagine dinamiche (vedere Specifica del percorso di elaborazione delle pagine dinamiche (PHP) a pagina 330). Caricare i file di esempio sul server Web (vedere Caricamento dei file di esempio a pagina 332).
2.
3.
4.
5.
Definizione di un sito Dreamweaver (PHP) 327

1.
NO TA
sul Macintosh, esiste gi una cartella chiamata Siti nella cartella utente. non utilizzare la cartella Siti come cartella locale; si tratta della cartella in cui vengono inserite le pagine per renderle accessibili al pubblico quando si usa Macintosh come server Web. 2.
3.

Dopo aver copiato la cartella cafe_townsend, definire la cartella contenente i file di esempio di PHP come cartella locale di Dreamweaver.
1.
In Dreamweaver, selezionare Sito > Gestisci siti. Nella finestra di dialogo Gestisci siti, fare clic sul pulsante Nuovo, quindi selezionare Sito. Viene visualizzata la finestra di dialogo Definizione del sito. Se visualizzata la scheda Generali, fare clic sulla scheda Avanzate. Nella casella di testo Nome del sito, inserire Cafe Townsend PHP. Il nome identifica il sito allinterno di Dreamweaver. Fare clic sullicona della cartella accanto alla casella di testo Cartella principale locale, quindi individuare la cartella seguente, che contiene i file di esempio di PHP:
2. 3.
4.
C:\Documents and Settingnome_utente\My Documents\local_sites\cafe_townsend\contact\php (Windows) /Users/nome_utente/Documents/local_sites/cafe_townsend/ contact/php (Macintosh)
5.

1.
Nella scheda Avanzate della finestra di dialogo Definizione del sito, selezionare Informazioni su remoto dallelenco Categoria. Viene visualizzata la schermata Informazioni su remoto.
2.
Nel menu a comparsa Accesso, scegliere come si desidera trasferire i file da e verso il server: mediante una rete locale, con lopzione Locale/rete, oppure mediante FTP.
NO TA
nel menu a comparsa Accesso sono disponibili altre opzioni che, per, non verranno trattate in questo capitolo. Per informazioni su queste opzioni, vedere Uso di Dreamweaver. 3.
Inserire il percorso o le impostazioni FTP per la cartella del server Web creata in Creazione di una cartella principale (Windows) a pagina 324. possibile che la cartella si trovi sul disco rigido o su un computer remoto. Anche se stata creata sul disco rigido, la cartella considerata la cartella remota valida. Nellesempio seguente viene riportato un possibile percorso della cartella remota se si scelto laccesso Locale/rete e la cartella remota si trova sul disco rigido Windows: Cartella remota: C:\Inetpub\wwwroot\MySampleApps Sul Macintosh, consigliabile specificare la cartella seguente: Cartella remota: /Users/nome_utente/Sites/MySampleApps Per ulteriori informazioni sullFTP, vedere Impostazione delle opzioni remote per laccesso FTP in Uso di Dreamweaver.
Specifica del percorso di elaborazione delle pagine dinamiche (PHP)


1.
Nella scheda Avanzate della finestra di dialogo Definizione del sito, fare clic su Server di prova nellelenco Categoria. Viene visualizzata la schermata Server di prova. Dreamweaver ha bisogno dei servizi di un server di prova per generare e visualizzare contenuti dinamici mentre si lavora. Come server di prova pu essere utilizzato il computer locale, un server di sviluppo, un server di preproduzione o un server di produzione purch sia in grado di elaborare le pagine PHP. In molti casi, compresa limpostazione del sito Cafe Townsend, possibile utilizzare le stesse impostazioni della categoria Informazioni su remoto (vedere Definizione di una cartella remota a pagina 329) che puntano a un server in grado di elaborare le pagine PHP.
2. 3.
Selezionare PHP MySQL dal menu a comparsa Modello server. Nella casella di testo Accesso, scegliere il metodo (Locale/rete o FTP) specificato per laccesso alla cartella remota. Dreamweaver inserisce le impostazioni specificate nella categoria Informazioni su remoto. Non modificare le impostazioni.
4.
Nella casella di testo Prefisso URL, inserire lURL della cartella principale da specificare nel browser Web per richiedere una pagina nellapplicazione Web. Per visualizzare le informazioni Live Data nelle pagine mentre si lavora, Dreamweaver crea un file temporaneo, lo copia nella cartella principale del sito Web e prova a richiederlo utilizzando il prefisso URL. Dreamweaver deduce un prefisso URL in base alle informazioni specificate nella finestra di dialogo Definizione del sito. possibile tuttavia che il prefisso URL suggerito non sia corretto. Se il suggerimento in Dreamweaver non corretto, correggerlo o inserire un nuovo prefisso URL. Per ulteriori informazioni, vedere Impostazione del prefisso URL in Uso di Dreamweaver (? > Uso di Dreamweaver). Per il contenuto di esempio PHP in Windows, consigliabile specificare il prefisso seguente: Prefisso URL: http://localhost/MySampleApps/
Sul Macintosh, consigliabile specificare il prefisso seguente: Prefisso URL: http://localhost/~nome_utente/MySampleApps/

5. il prefisso URL dovrebbe sempre specificare una directory e non una particolare pagina del sito. Inoltre, accertarsi di utilizzare la stessa combinazione di lettere maiuscole e minuscole usata al momento della creazione della cartella.

1.
Nel pannello File (Finestra > File), selezionare la cartella principale del sito nel riquadro Vista locale. La cartella principale la prima cartella dellelenco. Fare clic sullicona blu a forma di freccia di Carica il/i file nella barra degli strumenti del pannello File e confermare il caricamento dellintero sito. Dreamweaver copia tutti i file nella cartella del server Web definita in Definizione di una cartella remota a pagina 329.
2.
Connessione al database di esempio (PHP)

Durante linstallazione, Dreamweaver copia sul disco rigido uno script SQL. Lo script consente di creare automaticamente un database MySQL di esempio. In questa sezione viene descritto come creare una connessione al database di esempio. Questa sezione si basa sul presupposto che MySQL sia stato installato e configurato sul computer locale o remoto. Per scaricare e installare il sistema di database, visitare il sito Web MySQL allindirizzo www.mysql.com.
1.
Creare il database di esempio MySQL utilizzando lo script SQL (vedere Creazione del database MySQL a pagina 333). Creare la connessione in Dreamweaver (vedere Creazione di una connessione di database a pagina 335).
2.
Creazione del database MySQL

I file di esempio di Dreamweaver includono uno script SQL in grado di creare e popolare un database MySQL di esempio. Prima di procedere, verificare che MySQL sia installato e configurato sul computer locale o remoto. Scaricare la versione pi recente dal sito Web MySQL allindirizzo http://dev.mysql.com/downloads/. A scopo di sviluppo, scaricare e installare la versione Windows Essentials del server di database MySQL.
Per creare il database di esempio MySQL:
1.
Copiare il file dello script SQL, insert.sql, in una cartella appropriata sul computer in cui installato MySQL. Se Dreamweaver stato installato nella sua posizione predefinita, il percorso del file dello script il seguente:
C:\Program Files\MacromediaDreamweaver 8\Tutorial_assets\cafe_townsend\data\insert.sql (Windows) /Applications/Macromedia Dreamweaver 8/Tutorial_assets/ cafe_townsend/data/insert.sql (Macintosh)
Connessione al database di esempio (PHP) 333
Se il computer sul quale in esecuzione MySQL un computer Windows, copiare lo script insert.sql in Program Files\MySQL\MySQL Server 4.x\bin. Se il computer che esegue MySQL un Macintosh, copiare lo script insert.sql nella cartella Documenti nella cartella principale.
2.
Sul computer sul quale installato MySQL, avviare il client della riga di comando di MySQL (Windows) o da una finestra Terminale (Macintosh).
In Windows, avviare il client della riga di comando di MySQL selezionando Start > MySQL > MySQL Server 4.x > MySQL Command Line Client . Su un computer Macintosh, possibile aprire una finestra Terminale passando alla cartella Applications, aprendo la cartella Utilities e facendo doppio clic su Terminale.
3.
In Windows, immettere eventualmente il proprio nome utente e password, e premere Invio. Viene visualizzato il prompt dei comandi del client MySQL, come illustrato di seguito:
mysql>
4.
In ambiente Macintosh, usare il comando seguente:

mysql -uUser -pPassword
Ad esempio, se il nome utente (nome account) e la password di MySQL sono Tara e Telly3, inserire il seguente comando:
mysql -uTara -pTelly3
Se non si dispone di una password, omettere largomento -p come segue:

mysql -uTara
Se non stato definito un nome utente durante la configurazione dellinstallazione di MySQL, specificare root come nome utente come segue:
mysql -uroot
Viene visualizzato il prompt dei comandi del client MySQL, come illustrato di seguito:
mysql>
5.
Creare un nuovo database inserendo il seguente comando al prompt MySQL:

mysql>CREATE DATABASE CafeTownsend;
MySQL crea un nuovo database che non contiene ancora tabelle o record.
6.
Eseguire il logout dal client MySQL inserendo il seguente comando al prompt:

mysql>quit;
7.
(Windows) Aprire il prompt dei comandi di Windows selezionando Start > Esegui e digitando cmd nella finestra di dialogo Esegui. Al prompt dei comandi di sistema, inserire i dati nel nuovo database CafeTownsend in MySQL. In Windows, usare il comando seguente:
cd \ cd Program Files\MySQL\MySQL Server 4.x\bin mysql -uUser -pPassword CafeTownsend < insert.sql
8.
In ambiente Macintosh, usare il comando seguente:

mysql -uUser -pPassword CafeTownsend < ~/Documents/ insert.sql
Il comando utilizza il file insert.sql per aggiungere tabelle e record al database CafeTownsend creato nel passaggio 5. Dopo aver creato il database MySQL, creare una connessione di database in Dreamweaver.

1.
Aprire una pagina PHP in Dreamweaver, quindi aprire il pannello Database (Finestra > Database). Fare clic sul pulsante pi (+) nel pannello e selezionare Connessione MySQL dal menu a comparsa. Viene visualizzata la finestra di dialogo Connessione MySQL. Immettere connTownsend come nome della connessione.
2.
3.
Connessione al database di esempio (PHP) 335
4.
Nella casella di testo Server MySQL, specificare il computer che esegue MySQL. Inserire un indirizzo IP o un nome del server. Se MySQL viene eseguito sullo stesso computer di Dreamweaver, inserire localhost.
5.
Inserire il nome utente e la password di MySQL. Se non stato definito un nome utente durante la configurazione dellinstallazione di MySQL, specificare root nella casella di testo Nome utente. Se non si dispone di una password, lasciare vuota la casella di testo Password.
6.
Nella casella di testo Database digitare CafeTownsend. CafeTownsend il nome del database MySQL di esempio creato (vedere Creazione del database MySQL a pagina 333).
7.
Verificare che il nome del server, il nome utente e la password siano corretti. Verificare le impostazioni della cartella utilizzata da Dreamweaver per elaborare le pagine dinamiche (vedere Specifica del percorso di elaborazione delle pagine dinamiche (PHP) a pagina 330). Consultare il Capitolo 29, Risoluzione dei problemi relativi alle connessioni di database in Uso di Dreamweaver (? >Uso diDreamweaver).
8.
Lapplicazione PHP di esempio ora impostata per le esercitazioni della Guida introduttiva di Dreamweaver. Per ulteriori informazioni, vedere Esercitazione: Sviluppo di unapplicazione Web a pagina 207.
Indice analitico
Symboli
.NET Framework installazione 274
Numeri
127.0.0.1, indirizzo IP 251
A
Access. Vedere Microsoft Access Active Server Pages. Vedere ASP Anteprima nel browser informazioni 101 modifica delle preferenze 102 Anteprima nel browser, risoluzione dei problemi per pagine dinamiche ASP.NET 280 Anteprima nel browser, risoluzione dei problemi relativi alle pagine dinamiche ColdFusion 265 JSP 311 PHP 332 anteprima nel browser, risoluzione dei problemi relativi alle pagine dinamiche ASP 296 Apache Tomcat, server applicazioni 242 Apache, server Web su Mac OS X 250 Apple. Vedere Mac OS X Applicazione, categoria della barra Inserisci 219, 222
applicazioni Web ASP, impostazione 285 ASP.NET, impostazione 271 ColdFusion, impostazione 253 definizione 244 informazioni JSP, impostazione 301 PHP, impostazione 317 sviluppo 207 usi pi comuni 232 area di lavoro per la gestione del codice 148 aree ripetute, creazione 219 ASP applicazioni Web, impostazione 285 ora, visualizzazione 289 risoluzione dei problemi 290 server applicazioni, installazione 288 ASP.NET applicazioni Web, impostazione 271 DataSet 212 linguaggi utilizzati 240 .NET Framework 274 server supportati 274 Associazioni, pannello 212 attributi, informazioni di riferimento 153
B
barra degli strumenti Codifica 37 barra degli strumenti Documento informazioni 33 Live Data, vista 220 barra di stato Dimensioni finestra, menu a comparsa 35 informazioni 34
337
barra Inserisci Applicazione, categoria 219, 222 categorie 36 barre degli strumenti Codifica 37 Documento 33, 220
C
C# (linguaggio) 240 campi, dinamici 218 caratteri, modifica delle dimensioni nella guida in linea 26 Carica il/i file, pulsante 226 cartelle locali cartelle principali 262 definizione 5557, 277, 293, 308, 329 cartelle principali creazione (ASP) 290 creazione (ASP.NET) 275 creazione (ColdFusion) 259 creazione (JSP) 305 creazione (PHP) 324 definizione 277, 293, 308, 329 Vedere anche cartelle locali cartelle remote 136 creazione con Dreamweaver 137 definizione (ASP.NET) 278, 294 definizione (ColdFusion) 263 definizione (JSP) 308 definizione (PHP) 329 risoluzione dei problemi di impostazione 140 CFML (ColdFusion Markup Language) 239 codice creazione con il Selettore tag 148 stampa 157 Codice, vista visualizzazione con la vista Progettazione 33 ColdFusion applicazioni Web, impostazione 253 installazione 256 ColdFusion Administrator 267 ColdFusion Markup Language (CFML) 239 ColdFusion MX Server Developer Edition 256 ColdFusion Studio 148 ColdFusion, linguaggi utilizzati 240 collegamenti, creazione 100 colore di sfondo, impostazione 73, 179 Comportamenti server, pannello 219
configurazione sistemi con .NET Framework 272 sistemi con ColdFusion MX 254 sistemi con il server applicazioni ASP 287 sistemi con il server applicazioni JSP 302 sistemi con il server applicazioni PHP 318 connessione database (ASP) 299, 315, 335 database (ASP.NET) 281 database (ColdFusion) 266 Connessione di prova, pulsante 138 convenzioni tipografiche 14 convenzioni, tipografiche 14 CSS (Cascading Style Sheets) applicazione 112 creazione 110 e layout 159 formattazione 105134 informazioni 108 Stili CSS, pannello 40 CSS. Vedere Fogli di stile CSS
D
database basati su file basati su server connessione (ASP) 299, 315, 335 connessione (ASP.NET) 281 connessione (ColdFusion) 266 driver 237, 242 informazioni generali 242 query 236, 243 recordset relazionali 244 scelta tabelle uso con le applicazioni Web 232 visualizzazione dei dati 216, 236 database di esempio, connessione ASP 297, 299 ASP.NET 281 ColdFusion 266 JSP 315 PHP 335 database relazionali 244 DataSet (recordset ASP.NET) 212
338
Indice analitico
dati dinamici, inserimento 218 estrazione dai database 236 DBMS (Database Management System, sistema di gestione di database). Vedere sistemi di gestione di database definizione dei server di prova 264, 279, 294, 309, 330 definizione di cartelle remote 263, 278, 294, 308, 329 definizioni dei termini per le applicazioni Web 242 Dimensioni finestra, menu a comparsa 35 documenti salvataggio 61, 163 visualizzazione in schede (Macintosh) 43 driver per database 237, 242
G
Generali, preferenze 148 glossario dei termini comuni per le applicazioni Web 242 guida in linea modifica delle dimensioni del carattere 26 uso 15
H
HomeSite 148 HTML linguaggi di programmazione incorporata 239 Vedere anche codice
E
elenchi ColdFusion, impostazione 253 impostazione di ASP 286 impostazione di ASP.NET 271 impostazione di JSP 302 impostazione di PHP 318 esempi di applicazioni Web 232 estrazione dei dati dai database 236
I
IBM WebSphere, server applicazioni 242 IIS (Internet Information Services) 241 ASP.NET, supporto 274 informazioni 248 installazione 248 strumento di amministrazione, avvio 276 immagini, inserimento 8087 impostazione ASP 285 ASP.NET 271 ColdFusion 253 JSP 301 PHP 317 Indirizzi IP e numero (127.0.0.1) 251 indirizzi numerici di rete 251 Inserisci record, oggetto 220 installazione .NET Framework 274 ColdFusion MX 256 Dreamweaver 13 IIS (Internet Information Services) 248 server applicazioni, ASP 288 server applicazioni, JSP 304 server applicazioni, PHP 320 intestazione colonna, menu 64 intestazione tabella, menu 64
F
file caricamento da cartella locale 139 caricamento di file di esempio 265, 280, 296, 311 caricamento su un server 226 file di testo in vista Codice 95 file, caricamento esempio 332 finestra del documento barra del titolo 32 barra di stato 34 dimensioni e tempo di scaricamento della pagina 35 Dimensioni finestra, menu a comparsa 35 informazioni di base 32 selettore di tag 35 finestra di ispezione Tag 151 Flash inserimento di file SWF 88 riproduzione di contenuto in Dreamweaver 90 Flash Video, inserimento 91
Indice analitico
339
J
Java 240 Java Server Pages (JSP) 240 JavaScript 240 JRun JSP (Java Server Pages) applicazioni Web, impostazione 301 server applicazioni, installazione 304
O
oggetto XSLT Area ripetuta 200 ora, visualizzazione in ASP 289 Oracle 9i, database 239 origini dati ColdFusion 267
P
pagine dinamiche, creazione 239 dinamiche, definizione dinamiche, elaborazione 235 inserimento record 220 statiche 234 visualizzazione dei dati dei database 236 pagine dinamiche elaborazione in ASP 294 elaborazione in ASP.NET 279 elaborazione in ColdFusion 264 elaborazione in JSP 309 elaborazione in PHP 330 informazioni generali 243 operazioni con 235, 239 pagine Web. Vedere pagine pannelli Associazioni, pannello 212 Comportamenti server, pannello 219 Risorse 85 pannello Riferimenti 153 pannello Risorse 85 PHP applicazioni Web, impostazione 317 Mac OS X, configurazione risoluzione degli errori (Macintosh) 326 risoluzione degli errori (Windows) 323 server applicazioni (Windows), installazione 320 PHP, tecnologia server 240 Preferenze, finestra di dialogo (categoria Generali) 148 Prefisso URL, opzione 264, 280, 295, 310, 331 Progettazione, vista pubblicazione 135141 Pulsante Aggiorna 147 PWS (Microsoft Personal Web Server) 245 ASP.NET, supporto 274 informazioni 248
L
layout basato su CSS 159 basato su tabella 5976 layout area di lavoro, codice 148 linguaggi, server-side 239, 240 Live Data, vista 220 risoluzione dei problemi 265, 280, 296, 311, 332 livelli 160 inserimento 164 nidificazione 172 localhost 251
M
Macintosh Mac OS X con Apache e PHP server 250 Macintosh, documenti a schede 43 Macromedia JRun installazione 304 Microsoft Access 239 Microsoft Internet Information Server (IIS). Vedere IIS Microsoft Personal Web Server (PWS) 245, 248 Microsoft SQL Server 239 modalit Tabelle espanse 66 modelli server. Vedere tecnologie server modifica, tag 151 moduli di inserimento record, creazione 220 Modulo inserimento record, finestra di dialogo 222 MySQL, database 239 scaricamento 333
N
Netscape Enterprise Server 245
340
Indice analitico
Q
query database 236 definizione 243 verifica 215
R
record inserimento 220 visualizzazione 216 recordset creazione 212 definizione 243 verifica 215 Vedere anche database registrazione di Dreamweaver 14 risoluzione dei problemi 296 ASP 290 informazioni 326 pagine che non si aprono 249 pagine che non vengono visualizzate 290, 323 pagine dinamiche 265, 280, 296, 311, 332 PHP (Macintosh) 326 PHP (Windows) 323 server 247, 249 risorse, aggiunta a un sito 53
S
scaricamento, impostazione del tempo 35 script server-side, linguaggi 240 script, server-side 236 segnaposti immagine creazione di immagini da 81 informazioni 72 inserimento 71 selettore colori 75 selettore di tag 99 Selettore tag 148 Sequel (SQL), pronuncia 236
server ASP.NET, supporto 274 cartelle principali 263, 278, 294, 308, 329 file, caricamento 139, 265, 296, 311, 332 ASP.NET 280 HTTP indirizzi IP 251 informazioni opzioni di accesso 138 risoluzione dei problemi 249 server applicazioni 235 verifica 249 Web, definizione 244 Vedere anche server Web, server applicazioni server applicazioni 235, 242 ASP, installazione 288 ColdFusion MX, installazione 256 JSP, installazione 304 .NET Framework (ASP.NET), installazione 274 PHP, installazione 320 server di prova impostazione 264, 279, 294, 309, 330 server HTTP. Vedere server server Web definizione 244 verifica del funzionamento del server Web 274, 288, 304, 320 Vedere anche server, server applicazioni sistemi di gestione di database 243 sistemi, configurazione 254, 272, 287, 302, 318 siti definizione 5557 ASP 291 ASP.NET 276 ColdFusion 260 JSP 306 PHP 327 informazioni 52 locale 52 remoto 52, 136 risorse, aggiunta 53 spazio di lavoro informazioni 29 layout 42 layout mobile 30 SQL (Structured Query Language) 236 statiche, pagine 234 Vedere anche pagine Stili CSS, pannello 40, 114 Structured Query Language (SQL) 236
Indice analitico
341
Strumento Mano 35 suggerimenti codice 154 Sun ONE Web Server 245 supporto tecnico per server 247
V
variabili in CFML 240 VBScript 240 verifica dei server informazioni Vista Codice visualizzazione con la vista Progettazione 146, 147 vista Codice visualizzazione dei file di testo 95 viste Live Data, vista 220 Vista Codice Visual Basic 240
T
tabelle creazione di layout con 5976 database 237 informazioni 64 inserimento 6265, 216 modalit Tabelle espanse 66 propriet, impostazione 6670 tag modifica 151 ricerca delle informazioni di riferimento 153 scelta 148 Selettore tag 148 server-side 236 suggerimenti 154 tecnologie server definizione 244 scelta 241 supportate 240 termini comuni delle applicazioni Web, definizione 242 terminologia per le applicazioni Web 242 testo dinamico 218 dinamico, inserimento 218 inserimento 95 selezione 95 testo alternativo 71 testo dinamico, inserimento 218 Tomcat, server applicazioni 242
W
Web, applicazioni. Vedere applicazioni Web WebSphere 242
X
XML (Extensible Markup Language) applicazione di stili 196 creazione di collegamenti 198 informazioni 186 visualizzazione in pagine Web 183 XSL (Extensible Stylesheet Language) 187 trasformazioni, client-side 189 Vedi anche XSLT XSLT (Extensible Stylesheet Language Transformations) e trasformazioni client-side 189 frammenti 189 informazioni 188 oggetto XSLT Area ripetuta 200 pagine 189 pagine, collegamento a file XML 202 pagine, collegamento di dati XML 191 pagine, conversione 190 pagine, visualizzazione di dati XML 195
342
Indice analitico

Dw8 Getting Started

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Dw8 Getting Started

Transféré par

Droits d'auteur :

Formats disponibles

Guida introduttiva di Dreamweaver

In Windows, il programma di installazione di Dreamweaver si avvia automaticamente.

Seguire le istruzioni a video. Il programma di installazione richiede di immettere le informazioni necessarie.

Se richiesto, riavviare il computer.

Visita guidata di Dreamweaver

Principianti della progettazione Web

Per i principianti della progettazione Web:

Web designer esperti

Visita guidata di Dreamweaver

Utenti esperti nellinserimento manuale di codice

Visita guidata di Dreamweaver

Sviluppatori di applicazioni Web

Per gli sviluppatori di applicazioni Web che hanno gi utilizzato Dreamweaver.

Utilizzo ottimale della documentazione di Dreamweaver

Accesso alla documentazione di Dreamweaver

Visita guidata di Dreamweaver

Guida di riferimento alle API di Dreamweaver

Utilizzo ottimale della documentazione di Dreamweaver

Visita guidata di Dreamweaver

Accesso a risorse online aggiuntive relative a Dreamweaver

Centro per sviluppatori Macromedia

Centro di documentazione Dreamweaver

Forum online Macromedia

Utilizzo ottimale della documentazione di Dreamweaver

Utilizzo della Guida in linea di Dreamweaver

Apertura della Guida in linea

Selezionare ? > Guida Dreamweaver.

Visita guidata di Dreamweaver

Ricerche nella Guida in linea

Per eseguire una ricerca nella Guida in linea (Macintosh):

per cercare una frase specifica, racchiuderla tra virgolette doppie.

Per utilizzare lindice (Macintosh):

Utilizzo della Guida in linea di Dreamweaver

Modifica delle dimensioni del carattere

Selezionare Visualizza > Dimensioni testo e quindi selezionare un valore.

Uso della pagina iniziale

Visita guidata di Dreamweaver

Stampa della documentazione di Dreamweaver

Documentazione di Dreamweaver con LiveDocs

Utilizzo della Guida in linea di Dreamweaver

Visita guidata di Dreamweaver

Elementi fondamentali di Dreamweaver

Informazioni sullarea di lavoro di Dreamweaver 8

Layout dellarea di lavoro

Finestra di ispezione Propriet

Elementi fondamentali di Dreamweaver

Fnestra di ispezione Propriet

Informazioni sullarea di lavoro di Dreamweaver 8

Elementi fondamentali di Dreamweaver

Barra degli strumenti Documento

Titolo del documento

Nella barra degli strumenti Documento vengono visualizzate le seguenti opzioni:

visualizza solo la vista Codice nella finestra del

Mostra vista Progettazione

Informazioni sullarea di lavoro di Dreamweaver 8

Nessun browser/controllo errori

Consente di controllare la compatibilit

con tutti i browser.

Visualizza il menu a comparsa Gestione file.

Elementi fondamentali di Dreamweaver

Informazioni sullarea di lavoro di Dreamweaver 8

Elementi Flash Consente

Elementi fondamentali di Dreamweaver

Barra degli strumenti Codifica