Guida introduttiva di Dreamweaver

Transcript

1 Guida introduttiva di Dreamweaver

2 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 di Opera Software ASA e dei suoi fornitori. Tutti i diritti riservati. Copyright 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 l autorizzazione scritta di Macromedia, Inc. Nonostante quanto sopra specificato, il proprietario o l utente autorizzato di una copia valida del software fornito con il presente manuale è autorizzato a stampare una copia del manuale da una versione elettronica all unico scopo di apprendimento di tale software da parte del proprietario o dell utente 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 l offerta 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 O Neill 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

3 Indice PARTE 1: INTRODUZIONE A DREAMWEAVER Introduzione Funzionalità di Dreamweaver Novità di Dreamweaver Installazione di Dreamweaver Registrazione di Dreamweaver Convenzioni tipografiche Capitolo 1: Visita guidata di Dreamweaver Da dove iniziare Utilizzo ottimale della documentazione di Dreamweaver Utilizzo della Guida in linea di Dreamweaver Capitolo 2: Elementi fondamentali di Dreamweaver Informazioni sull area di lavoro di Dreamweaver Personalizzazione dell area di lavoro di Dreamweaver Esecuzione di operazioni di base in Dreamweaver PARTE 2: ESERCITAZIONI Capitolo 3: Esercitazione: Impostazione del sito e dei file di progetto Informazioni sui siti di Dreamweaver Impostazione dei file del progetto Definizione di una cartella locale Capitolo 4: Esercitazione: Creazione di un layout di pagina basato su tabella Esame della bozza di progettazione Creazione e salvataggio di una nuova pagina Inserimento delle tabelle

4 Impostazione delle proprietà della tabella Inserimento di un segnaposto immagine Aggiunta di colore alla pagina Capitolo 5: Esercitazione: Aggiunta del contenuto alle pagine Individuare i file Valutazione del lavoro da svolgere Inserimento di immagini Inserimento e riproduzione di un file Flash Inserimento di contenuto Flash Video Inserire il testo Creazione di collegamenti Anteprima della pagina in un browser Capitolo 6: Esercitazione: formattazione della pagina con i fogli di stile CSS Individuare i file Valutazione del lavoro da svolgere Informazioni sui CSS Creazione di un nuovo foglio di stile Collegamento di un foglio di stile Esplorazione del pannello Stili CSS Creazione di una nuova regola CSS Applicazione di uno stile di classe al testo Formattazione del testo della barra di navigazione (Facoltativo) Centrare i contenuti della pagina Capitolo 7: Esercitazione: Pubblicazione del sito Informazioni sui siti remoti Definizione di una cartella remota Caricamento dei file locali Risoluzione dei problemi di impostazione della cartella remota (facoltativo) PARTE 3: ESERCITAZIONI AVANZATE Capitolo 8: Esercitazione: Operazioni con il codice Visualizzazione del codice Indice

5 Accesso all area di lavoro per la gestione del codice (solo per Windows) Aggiunta di un tag con il Selettore tag Modifica di un tag Ricerca di informazioni relative a un tag Aggiunta di un immagine con Suggerimenti codice Verifica delle modifiche Stampa del codice Capitolo 9: Esercitazione: Creazione di un layout di pagina basato su CSS Informazioni sul layout di pagina basato su CSS Esame della bozza di progettazione Creazione e salvataggio di una nuova pagina Inserimento di livelli Aggiunta di colore alla pagina Capitolo 10: Esercitazione: Visualizzazione di dati XML Individuare i file Valutazione del lavoro da svolgere Informazioni sull uso di XML e XSL nelle pagine Web Informazioni sulle pagine XSLT Conversione di una pagina da HTML a XSLT Collegamento di un origine dati XML alla pagina XSLT Modificare il layout della pagina XSLT Associazione di dati XML alla pagina XSLT Applicazione di stili ai dati XML Creare un collegamento dinamico Aggiunta di un oggetto XSLT Area ripetuta Collegare la pagina XSLT alla pagina XML Informazioni riguardanti ulteriori opzioni di trasferimento Capitolo 11: Esercitazione: Sviluppo di un applicazione Web Prima di iniziare Valutazione del lavoro da svolgere Apertura del documento da modificare Definizione di un recordset Visualizzazione dei record del database Aggiunta di campi dinamici alla tabella Impostazione di un area ripetuta Indice 5

6 Visualizzazione della pagina Creazione di un modulo di inserimento record Copia dei file sul server Approfondimenti PARTE 4: APPENDICI Appendice A: Nozioni sulle applicazioni Web Informazioni sulle applicazioni Web Funzionamento di un applicazione Web Authoring di pagine dinamiche Scelta di una tecnologia server Terminologia per le applicazioni Web Appendice B: Installazione di un server Web Guida introduttiva Installazione di Internet Information Server Verifica di IIS Verifica del server Web Macintosh (sviluppatori PHP) Elementi fondamentali dei server Web Appendice C: Configurazione di un sito ColdFusion di esempio Elenchi di impostazioni per gli sviluppatori ColdFusion Configurazione del sistema (ColdFusion) Definizione di un sito di Dreamweaver (ColdFusion) Connessione al database di esempio (ColdFusion) Appendice D: Configurazione di un sito ASP.NET di esempio Elenchi di impostazioni per gli sviluppatori ASP.NET Configurazione del sistema (ASP.NET) Definizione di un sito Dreamweaver (ASP.NET) Connessione al database di esempio (ASP.NET) Appendice E: Configurazione di un sito ASP di esempio Elenco di impostazioni per gli sviluppatori ASP Configurazione del sistema (ASP) Definizione di un sito Dreamweaver (ASP) Connessione al database di esempio (ASP) Indice

7 Appendice F: Configurazione di un sito JSP di esempio Elenco di impostazioni per gli sviluppatori JSP Configurazione del sistema (JSP) Definizione di un sito di Dreamweaver (JSP) Connessione al database di esempio (JSP) Appendice G: Configurazione di un sito PHP di esempio Elenchi di impostazioni per gli sviluppatori PHP Configurazione del sistema (PHP) Definizione di un sito Dreamweaver (PHP) Connessione al database di esempio (PHP) Indice analitico Indice 7

8 8 Indice

9 PARTE 1 Introduzione a Dreamweaver 1 La prima parte di questo manuale include una presentazione di Macromedia Dreamweaver 8 con informazioni sull installazione e una panoramica dell area di lavoro. Fornisce inoltre un elenco delle risorse disponibili per l apprendimento di Dreamweaver. Questa parte contiene le sezioni seguenti: Introduzione Visita guidata di Dreamweaver Elementi fondamentali di Dreamweaver

10

11 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 l inserimento manuale del codice HTML oppure si preferisca operare in un ambiente di modifica visuale, Dreamweaver fornisce strumenti utili che semplificano l attività di progettazione di pagine Web. Questa guida rappresenta un introduzione all uso di Macromedia Dreamweaver 8 per gli utenti che non abbiano familiarità con le principali funzioni del programma. Le esercitazioni della guida assistono l utente nel processo di creazione di un sito Web semplice ma funzionale. In questo capitolo vengono trattati i seguenti argomenti: Funzionalità di Dreamweaver Novità di Dreamweaver Installazione di Dreamweaver Registrazione di Dreamweaver Convenzioni tipografiche

12 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 un altra applicazione grafica, e quindi importandole direttamente in Dreamweaver. In Dreamweaver sono inoltre disponibili strumenti che facilitano l aggiunta 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 l apprendimento di Dreamweaver, vedere il Capitolo 1, Visita guidata di Dreamweaver, a pagina Introduzione

13 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. L elenco 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 all indirizzo dw_documentation_it. Per installare Dreamweaver: 1. Inserire il CD-ROM di Dreamweaver nell unità CD-ROM del computer. 2. Effettuare una delle seguenti operazioni: In Windows, il programma di installazione di Dreamweaver si avvia automaticamente. Installazione di Dreamweaver 8 13

14 In ambiente Macintosh, fare doppio clic sull icona 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 sugli aggiornamenti e sui nuovi contenuti dei siti Web 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 all indirizzo 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, all interno del codice. Carattere Roman grassetto: indica il testo esatto che deve essere inserito dall utente. 14 Introduzione

15 CAPITOLO 1 Visita guidata di Dreamweaver 1 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 Utilizzo ottimale della documentazione di Dreamweaver Utilizzo della Guida in linea di Dreamweaver 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 nell inserimento 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

16 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 l utente attraverso tutte le diverse fasi del processo di sviluppo di un piccolo ma funzionale sito Web. La seconda sezione di esercitazioni è un introduzione 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. 2. 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. 3. 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. 4. 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. 5. Queste informazioni sono sufficienti per iniziare a creare siti Web di alta qualità. Per imparare a utilizzare gli strumenti più avanzati, consultare nell ordine 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. 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 Visita guidata di Dreamweaver

17 Per i Web designer esperti che usano Dreamweaver per la prima volta: 1. Per iniziare, vedere le esercitazioni nella Guida introduttiva di Dreamweaver. 2. In Uso di Dreamweaver, (? > Uso di Dreamweaver), consultare il Capitolo 1, Area di lavoro per ulteriori informazioni sull interfaccia utente di Dreamweaver. 3. 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 all impostazione di un sito Dreamweaver. 4. 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. 5. Per informazioni sull utilizzo delle funzioni di codifica in Dreamweaver, vedere il Capitolo 19, Impostazione dell ambiente di codifica,, Capitolo 20, Codifica in Dreamweaver,, Capitolo 21, Ottimizzazione e debug del codice, e Capitolo 22, Modifica del codice nella vista Progettazione. 6. Leggere la panoramica all inizio dei successivi capitoli della guida Uso di Dreamweaver per determinare se gli argomenti trattati sono di proprio interesse. Per i Web designer esperti, che conoscono bene Dreamweaver e desiderano ottenere ulteriori informazioni sulla creazione di pagine dinamiche: 1. Per iniziare, vedere l Appendice A, Nozioni sulle applicazioni Web, a pagina 231 e il Capitolo 11, Esercitazione: Sviluppo di un applicazione Web, a pagina Nella guida Uso di Dreamweaver (? > Uso di Dreamweaver), leggere velocemente il Capitolo 1, Area di lavoro per informazioni sui nuovi aspetti dell interfaccia utente di Dreamweaver, quindi leggere il Capitolo 30, Ottimizzazione dell area di lavoro per lo sviluppo visivo. 3. 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. Da dove iniziare 17

18 4. Impostare un server Web e un server applicazioni. Vedere Capitolo 23, Impostazione di un applicazione Web. 5. Connessione a un database. Vedere Connessione a un database nel Capitolo 23, Impostazione di un applicazione Web. 6. Leggere la panoramica all inizio dei successivi capitoli della guida Uso di Dreamweaver per capire se gli argomenti trattati sono di proprio interesse. Utenti esperti nell inserimento manuale di codice Per gli utenti esperti nell inserimento manuale di codice, questa sezione suggerisce gli argomenti della documentazione Dreamweaver più indicati da approfondire. Per gli utenti esperti nell inserimento manuale di codice: 1. Per iniziare, leggere il Capitolo 8, Esercitazione: Operazioni con il codice nella Guida introduttiva di Dreamweaver. 2. Nella guida Uso di Dreamweaver, (? > Uso di Dreamweaver), consultare il Capitolo 1, Area di lavoro per ulteriori informazioni sull interfaccia utente di Dreamweaver. 3. 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 all impostazione di un sito Dreamweaver. 4. Per ulteriori informazioni sul codice in Dreamweaver, vedere il Capitolo 19, Impostazione dell ambiente di codifica,, Capitolo 20, Codifica in Dreamweaver, Capitolo 21, Ottimizzazione e debug del codice, e Capitolo 22, Modifica del codice nella vista Progettazione. 5. Leggere la panoramica all inizio dei successivi capitoli della guida Uso di Dreamweaver per capire se gli argomenti trattati sono di proprio interesse. 18 Visita guidata di Dreamweaver

19 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 nell uso 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 dell uso di Dreamweaver. 2. Nella guida Uso di Dreamweaver, (? > Uso di Dreamweaver), consultare il Capitolo 1, Area di lavoro per ulteriori informazioni sull interfaccia utente di Dreamweaver. 3. 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 all impostazione di un sito Dreamweaver. 4. Impostare un server Web e un server applicazioni utilizzando Dreamweaver. Vedere Capitolo 23, Impostazione di un applicazione Web. 5. Connessione a un database. Vedere Connessione a un database nel Capitolo 23, Impostazione di un applicazione Web. 6. Leggere la panoramica all inizio dei successivi capitoli della guida Uso di Dreamweaver per determinare se gli argomenti trattati sono di proprio interesse. 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. 2. Leggere rapidamente il Capitolo 1, Area di lavoro per informazioni sulle novità dell interfaccia utente di Dreamweaver. Da dove iniziare 19

20 Utilizzo ottimale della documentazione di Dreamweaver Dreamweaver include numerose risorse che consentono di orientarsi rapidamente all interno 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 l uso di Dreamweaver, di estensibilità di Dreamweaver e di ColdFusion. Sono inoltre disponibili varie risorse online aggiuntive consultabili durante l apprendimento 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 all indirizzo buy_books. Titolo Descrizione/ Destinatari Dove trovarlo Guida introduttiva di Dreamweaver Fornisce un introduzione ai concetti e all interfaccia di Dreamweaver, con esercitazioni dettagliate per principianti. Destinato a principianti ma anche utenti intermedi e avanzati che desiderino informazioni sulle nuove funzioni. Visualizzazione in Dreamweaver: Selezionare? > Guida introduttiva di Dreamweaver Visualizzazione online: livedocs.macromedia.com/go/ livedocs_dreamweaver_it/ Formato PDF: dw_documentation_it 20 Visita guidata di Dreamweaver

21 Titolo Descrizione/ Destinatari Dove trovarlo Uso di Dreamweaver Estensione di Dreamweaver Guida di riferimento alle API di Dreamweaver Informazioni complete su tutte le funzioni di Dreamweaver. Destinato a tutti gli utenti di Dreamweaver. Descrive la struttura generale di Dreamweaver e le API (Application Programming Interface). Destinato agli utenti avanzati che desiderino creare estensioni o personalizzare l interfaccia di Dreamweaver. Descrive l API dell utilità e l API JavaScript, che facilitano l esecuzione di varie attività di supporto allo sviluppo delle estensioni di Dreamweaver. Destinato agli utenti avanzati che desiderino creare estensioni o personalizzare l interfaccia di Dreamweaver. Visualizzazione in Dreamweaver: Selezionare? > Guida in linea di Dreamweaver o? > Uso di Dreamweaver Visualizzazione online: livedocs.macromedia.com/go/ livedocs_dreamweaver_it/ Formato PDF: dw_documentation_it Visualizzazione in Dreamweaver: Selezionare? > Estensione di Dreamweaver Visualizzazione online: livedocs.macromedia.com/go/ livedocs_dreamweaver_it/ Formato PDF: dw_documentation_it Visualizzazione in Dreamweaver: Selezionare? > Guida di riferimento alle API di Dreamweaver Visualizzazione online: livedocs.macromedia.com/go/ livedocs_dreamweaver_it/ Formato PDF: dw_documentation_it Utilizzo ottimale della documentazione di Dreamweaver 21

22 Titolo Descrizione/ Destinatari Dove trovarlo Uso di ColdFusion Comprende una selezione dei documenti più importanti relativi all uso di ColdFusion. La documentazione completa è disponibile su LiveDocs. Destinato a chiunque sia interessato a ColdFusion, dal principiante all utente avanzato. Visualizzazione in Dreamweaver: Selezionare? > Uso di ColdFusion Visualizzazione online: livedocs.macromedia.com/go/ livedocs_coldfusion/ cf_documentation cf_documentation Riferimenti Include vari manuali di riferimento sul linguaggio HTML, sui modelli di server e altri argomenti, per lo più editi da O Reilly. Destinato a chiunque sia interessato a informazioni aggiuntive sulla sintassi della programmazione, sui concetti e così via. Visualizzazione in Dreamweaver: Selezionare? > Riferimenti. Per un elenco completo dei manuali fare clic sul menu a comparsa Libro nel pannello Riferimenti. 22 Visita guidata di Dreamweaver

23 Accesso a risorse online aggiuntive relative a Dreamweaver La tabella seguente include un breve elenco delle risorse online utili per l apprendimento di Dreamweaver. Risorsa Descrizione/ Destinatari Dove trovarlo Centro di supporto per Dreamweaver Centro per sviluppatori Macromedia 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. dreamweaver_support_it developer_dw_it Centro di documentazione Dreamweaver Forum online Macromedia Fornisce manuali in formato PDF, errori di stampa, esercitazioni e note sulla versione. Discussioni e scambi di informazioni per la risoluzione di problemi tra utenti di Dreamweaver, rappresentanti del supporto tecnico e il team di sviluppo di Dreamweaver. dw_documentation_it dreamweaver_newsgroup Formazione Macromedia Corsi con esercitazioni pratiche e scenari basati su situazioni reali. dreamweaver_training_it Utilizzo ottimale della documentazione di Dreamweaver 23

24 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 dell indice 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 Visita guidata di Dreamweaver

25 Ricerche nella Guida in linea È possibile effettuare ricerche nell intero contenuto della Guida in linea di Dreamweaver. Per eseguire una ricerca nella Guida in linea (Windows): 1. Nella Guida di Dreamweaver, fare clic sulla scheda Cerca. 2. Digitare una parola o una frase nella casella di testo, quindi fare clic su Elenca argomenti. 3. Fare doppio clic su un argomento nell elenco dei risultati per visualizzarlo. 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. 2. Fare doppio clic su un argomento nell elenco dei risultati per visualizzarlo. SUGGERIMENTO per cercare una frase specifica, racchiuderla tra virgolette doppie. Uso dell indice L indice consente di trovare rapidamente le informazioni desiderate. Per utilizzare l indice (Windows): 1. Nella Guida di Dreamweaver, fare clic sulla scheda Indice. 2. Scorrere fino alla voce desiderata nell elenco alfabetico e fare doppio clic per visualizzare l argomento corrispondente. Per utilizzare l indice (Macintosh): 1. Nella Guida di Dreamweaver, fare clic sul collegamento Indice nel sommario. 2. Fare clic su una lettera e scorrere il testo fino alla voce desiderata nell elenco. 3. Fare clic sul numero accanto alla voce per visualizzare l argomento corrispondente. B SUGGERIMENTO è possibile iniziare a scrivere una parola chiave nella casella di testo per raggiungere rapidamente una voce di indice. Utilizzo della Guida in linea di Dreamweaver 25

26 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, nell area 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. 2. Fare clic su Non visualizzare di nuovo. 26 Visita guidata di Dreamweaver

27 Stampa della documentazione di Dreamweaver I seguenti manuali sono disponibili in formato PDF nel sito Web di Macromedia all indirizzo 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 all indirizzo Utilizzo della Guida in linea di Dreamweaver 27

28 28 Visita guidata di Dreamweaver

29 CAPITOLO 2 Elementi fondamentali di Dreamweaver 2 Per un esperienza di utilizzo ottimale di Macromedia Dreamweaver 8, è consigliabile comprendere gli elementi base dell area di lavoro di Dreamweaver. In questo capitolo vengono illustrati gli elementi dell area 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 sull area di lavoro di Dreamweaver Personalizzazione dell area di lavoro di Dreamweaver Esecuzione di operazioni di base in Dreamweaver Informazioni sull area di lavoro di Dreamweaver 8 L area 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 dell area di lavoro di Dreamweaver 8. Per informazioni più complete su ognuno degli elementi dell area 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 dell area 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

30 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 dell area di lavoro In Windows, Dreamweaver fornisce un layout che integra tutti gli elementi in una sola finestra. Nell area 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 Finestra di ispezione Proprietà Pannello File NOTA l area di lavoro Windows dispone anche dell opzione 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 dell area di lavoro (solo per Windows) apagina Elementi fondamentali di Dreamweaver

31 In ambiente Macintosh, Dreamweaver è in grado di visualizzazione più documenti in un unica finestra con schede che identificano ogni documento. Dreamweaver può inoltre essere visualizzato come parte di un area 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 all altra ai lati dello schermo e della finestra del documento quando vengono trascinate o ridimensionate. Barra degli strumenti Documento Barra Inserisci Finestra del documento Gruppi di pannelli Selettore di tag Fnestra di ispezione Proprietà Pannello File È possibile passare da un layout all altro sia in Windows che in Macintosh. Per ulteriori informazioni, vedere Scelta del layout dell area di lavoro (solo per Windows) apagina41 e Visualizzazione di documenti a schede (solo per Macintosh) a pagina 43. Informazioni sull area di lavoro di Dreamweaver 8 31

32 Finestra Documento La finestra Documento mostra il documento corrente. È possibile selezionare una delle viste seguenti: Vista Progettazione, 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. Vista Codice, 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. Vista Codice e Progettazione, che permette di ottenere la vista Codice e la vista Progettazione di un documento in un unica 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 dell area 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 dell area 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 sull utilizzo della finestra del documento, consultare il Capitolo 1, Area di lavoro in Uso di Dreamweaver. 32 Elementi fondamentali di Dreamweaver

33 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 nell altra. Quando si seleziona questa vista combinata, l opzione Vista Progettazione in primo piano diventa disponibile nel menu Visualizza. Utilizzare questa opzione per specificare quale vista è visualizzata in primo piano nella finestra Documento. Mostra vista Progettazione Visualizza solo la vista Progettazione nella 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. Titolo 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. Informazioni sull area di lavoro di Dreamweaver 8 33

34 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. Anteprima/debug nel browser Consente di visualizzare in anteprima o di eseguire il debug del documento in un browser. Selezionare un browser dal menu a comparsa. 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. Opzioni di visualizzazione 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. Riferimenti visivi Consente di utilizzare vari riferimenti visivi per la progettazione delle pagine. Per ulteriori informazioni sull utilizzo 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 Elementi fondamentali di Dreamweaver

35 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 sull utilizzo 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. Informazioni sull area di lavoro di Dreamweaver 8 35

36 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. All avvio di Dreamweaver, viene visualizzata l ultima categoria su cui si stava lavorando. Alcune categorie dispongono di pulsanti con menu a comparsa. Quando si seleziona un opzione da un menu a comparsa, l opzione diventa l azione 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, l azione predefinita del pulsante cambia. La barra Inserisci è organizzata nelle categorie seguenti: Comune Consente di creare e inserire gli oggetti usati più di frequente, come ad esempio immagini e tabelle. 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. Moduli Contiene pulsanti che consentono di creare moduli e inserire i relativi elementi. 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. Elementi Flash Consente di inserire elementi Macromedia Flash. 36 Elementi fondamentali di Dreamweaver