Dreamweaver by Pafal Editore

Indice Indice

1 Introduzione

2 Concetti di base 2.1 Come funziona il web . . . . . . . 2.2 I linguaggi del web . . . . . . . . . HTML . . . . . . . . . . . . . . . . CSS . . . . . . . . . . . . . . . . . . Linguaggi lato client . . . . . . . . Linguaggi lato server . . . . . . . . 2.3 Il processo di creazione di un sito Analisi e speci ica dei requisiti . . Progettazione . . . . . . . . . . . . Implementazione . . . . . . . . . . Test e rilascio . . . . . . . . . . . . 2.4 Le basi del linguaggio HTML . . . Struttura della pagina . . . . . . .

. . . . . . . . . . . . .

11 11 14 14 15 16 17 17 18 20 20 21 22 23

3 Lâ&#x20AC;&#x2122;area di lavoro 3.1 La schermata di benvenuto . . . . . . . . . . . . . . . . .

25 25

. . . . . . . . . . . . .

I 3.2 La barra dellâ&#x20AC;&#x2122;applicazione . . . . . . . . . . . . 3.3 La inestra Documento . . . . . . . . . . . . . . Le modalitaĚ&#x20AC; di visualizzazione del documento 3.4 I pannelli . . . . . . . . . . . . . . . . . . . . . . Il pannello Inserisci . . . . . . . . . . . . . . . Il pannello ProprietaĚ&#x20AC; . . . . . . . . . . . . . . . Il pannello File . . . . . . . . . . . . . . . . . . Il pannello Risorse . . . . . . . . . . . . . . . . Il pannello Stili CSS . . . . . . . . . . . . . . . . Il pannello Elementi PA . . . . . . . . . . . . . 3.5 Impostare le Preferenze . . . . . . . . . . . . . 4 Gestire siti e ile 4.1 Creare un sito in Dreamweaver . . . Le impostazioni dei server . . . . . Gestire le versioni . . . . . . . . . . Le impostazioni avanzate . . . . . . 4.2 Gestire i siti web . . . . . . . . . . . 4.3 Le operazioni sui ile in locale . . . Creare un nuovo documento . . . . Aprire un documento esistente . . . Salvare un documento . . . . . . . . Altre operazioni sui ile . . . . . . . 4.4 Le operazioni in remoto . . . . . . . Caricare e scaricare ile . . . . . . . Le operazioni di deposito e ritiro . Sincronizzare i siti locale e remoto 5 Il layout di pagina 2

. . . . . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . .

27 29 31 34 36 37 38 39 41 42 43

. . . . . . . . . . . . . .

45 46 47 48 48 50 52 53 54 55 56 57 59 60 60 63

Indice 5.1 Le soluzioni per il layout . . . . . . . . . . . . . . . Il codice HTML del layout . . . . . . . . . . . . . . . 5.2 Inserire un tag div . . . . . . . . . . . . . . . . . . . 5.3 Disegnare un div PA . . . . . . . . . . . . . . . . . . Gestire le proprietà del div dal pannello Proprietà Gestire i div tramite il pannello Elementi PA . . . . 5.4 Impostare le proprietà di pagina . . . . . . . . . . . Le proprietà relative al formato . . . . . . . . . . . Le impostazioni di titolo e codi ica . . . . . . . . . . L’immagine di ricalco . . . . . . . . . . . . . . . . . 6 I fogli di Stile 6.1 La natura dei CSS . . . . . . . . . . . . Il codice CSS . . . . . . . . . . . . . . . 6.2 Creare una nuova regola . . . . . . . . Le impostazioni generali . . . . . . . De inire gli attributi della regola . . . 6.3 Gestire le regole CSS . . . . . . . . . . Associare un CSS esterno alla pagina Modi icare ed eliminare le regole . . 7 Il testo 7.1 Il testo in HTML . . . . . . . I tag di intestazione . . . . I blocchi di paragrafo . . . Gli elenchi . . . . . . . . . . 7.2 Inserire testo in una pagina Copiare e incollare testo . . Importare testo . . . . . . .

. . . . . . .

. . . . . . . .

. . . . . . .

. . . . . . . .

. . . . . . .

. . . . . . . .

. . . . . . .

. . . . . . . .

. . . . . . .

. . . . . . . .

. . . . . . .

. . . . . . . .

. . . . . . .

. . . . . . . .

. . . . . . .

. . . . . . . .

. . . . . . .

. . . . . . . . . .

. . . . . . . .

. . . . . . .

. . . . . . . . . .

. . . . . . . .

. . . . . . .

. . . . . . . . . .

64 65 66 68 70 71 71 73 74 74

. . . . . . . .

77 79 80 81 81 83 85 86 87

. . . . . . .

89 89 90 91 91 92 93 95 3

I 7.3 Gestire il testo dal pannello Proprietà . . . . . . . . . . . 7.4 Cercare e sostituire il testo . . . . . . . . . . . . . . . . . 8 Le tabelle 8.1 Le tabelle in HTML . . . . . . . . . . . . . . . . . . 8.2 Inserire una tabella . . . . . . . . . . . . . . . . . 8.3 Importare dati da altri documenti . . . . . . . . . 8.4 Modi icare le tabelle . . . . . . . . . . . . . . . . . Formattare la tabella dal pannello Proprietà . . . Formattare le singole celle dal pannello Proprietà I principali comandi di modi ica della tabella . . La modalità Tabelle espanse . . . . . . . . . . . .

. . . . .

. . . . . . . . . .

9 Le immagini 9.1 I formati gra ici per il web . . . . . . . . . . . . . . . 9.2 Le immagini in HTML . . . . . . . . . . . . . . . . . 9.3 Inserire una immagine . . . . . . . . . . . . . . . . . 9.4 Le proprietà della immagini . . . . . . . . . . . . . I comandi di modi ica nel pannello Proprietà . . . 9.5 Altri comandi di inserimento di oggetti immagine Inserire un’immagine di rollover . . . . . . . . . . . Inserire oggetti segnaposto . . . . . . . . . . . . . . Inserire codice HTML di Fireworks . . . . . . . . . 10 I collegamenti 10.1 Nozioni di base sui collegamenti . . Collegamenti e risorse . . . . . . . . I percorsi dei collegamenti . . . . . La destinazione di un collegamento

. . . .

. . . . . . . . .

. . . .

. . . . . . . .

. . . . . . . . .

. . . .

95 98

. . . . . . . .

101 102 103 105 108 108 109 110 111

. . . . . . . . .

113 113 115 116 118 120 123 123 124 126

. . . .

129 130 130 131 133

Indice 10.2 I collegamenti in HTML . . . . . . . . . . . . . . . Gli ancoraggi con nome . . . . . . . . . . . . . . . 10.3 De inire un collegamento dal pannello ProprietaĚ&#x20AC; 10.4 Inserire un collegamento associato ad un testo . 10.5 Gli ancoraggi con nome . . . . . . . . . . . . . . . Inserire un ancoraggio con nome . . . . . . . . . Creare un collegamento ad un ancoraggio . . . . 10.6 Inserire un collegamento e-mail . . . . . . . . . . 10.7 Creare una mappa immagine . . . . . . . . . . . . 10.8 Veri icare i collegamenti del sito . . . . . . . . . . 11 Oggetti multimediali 11.1 Gli oggetti multimediali in HTML . . . 11.2 Gli oggetti Flash . . . . . . . . . . . . . . Inserire oggetti Flash. . . . . . . . . . . Modi icare gli oggetti Flash . . . . . . . Gestire le proprietaĚ&#x20AC; degli oggetti Flash 11.3 I video FLV . . . . . . . . . . . . . . . . . Inserire video Flash . . . . . . . . . . . Modi icare le proprietaĚ&#x20AC; del video FLV . 11.4 Altri contenuti multimediali . . . . . . 12 La libreria Spry 12.1 La Barra dei menu Spry . . . . 12.2 Il Pannello a schede Spry . . . 12.3 Il Pannello a sof ietto Spry . . 12.4 Il Pannello comprimibile Spry 13 Integrazione

. . . .

. . . . . . . . .

. . . .

. . . . . . . . .

. . . .

. . . . . . . . .

. . . .

. . . . . . . . .

. . . .

. . . . . . . . .

. . . .

. . . . . . . . .

. . . .

. . . . . . . . . .

. . . . . . . . .

. . . .

. . . . . . . . . .

. . . . . . . . .

. . . .

. . . . . . . . . .

. . . . . . . . .

. . . .

. . . . . . . . . .

133 134 135 137 138 139 139 140 141 143

. . . . . . . . .

147 148 149 149 150 152 154 155 157 159

. . . .

161 163 167 170 172 175

I 13.1 13.2 13.3 13.4

Adobe Bridge . . . Adobe Fireworks . Adobe Photoshop . Adobe Flash . . . .

. . . .

176 177 179 181

Capitolo 1

Introduzione Internet è uno straordinario mondo che negli ultimi anni è entrato nella vita della stragrande maggioranza delle persone e che ha modi icato radicalmente le nostre abitudini in tantissimi campi della nostra vita e in tantissime nostre attività : business, lavoro, istruzione, relazioni personali, svago, etc. La maggior parte della opportunità che Internet offre, sono realizzate tramite il World Wide Web, un servizio che permette di usufruire di un vastissimo insieme di contenuti e servizi accessibili in modalità differenti e con varie tipologie di dispositivi. Il Web non è stato il primo servizio a nascere su Internet (a volte i due concetti vengono confusi). Prima della sua creazione, Internet era[\ già utilizzato per altri tipi di applicazioni, alcune delle quali continuano ad essere utilizzate (come, ad esempio, la posta elettronica), altre, invece, sono scomparse. Inizialmente, il Web era utilizzato soltanto dai ricercatori per distribuire e divulgare informazioni di tipo tecnico-scienti ico. 7

1. I Il contenuto era soltanto di tipo testuale, e i documenti erano collegati fra di loro tramite quei link ipertestuali che rappresentano una caratteristica fondamentale di questa applicazione di rete. Nel corso degli anni il panorama si è evoluto profondamente. Il Web viene utilizzato per scopi di vario tipo (accademici, commerciali, governativi, personali, ...) e i contenuti non sono più soltanto testuali, ma sono costituiti anche da immagini, animazioni, audio e video. Oggi, addirittura, non è più suf iciente parlare di contenuti, in quanto su Web girano delle vere e proprie applicazioni che consentono agli utenti di usufruire di servizi di vario tipo (e-commerce, home-banking, social network, ...) Anche le tecnologie utilizzate per de inire i contenuti e sviluppare le applicazioni sono cambiate nel tempo, anche se dietro tutto c’è sempre il linguaggio HTML che descrive la struttura di quei documenti che chiamiamo pagine web e che istruisce il browser su come i contenuti devono essere visualizzati nella inestra dello stesso.

Adobe Dreamweaver Il panorama degli strumenti utilizzati per sviluppare siti e applicazioni web è molto vasto e comprende strumenti di diverse tipologie: dai più banali editor di testo (molti dei ile che descrivono i contenuti, l’aspetto e le funzionalità del sito/applicazione sono ile di testo) ai CMS (Content Management System) già belli e pronti che vengono utilizzati per amministrare i contenuti più che per un lavoro di sviluppo vero e proprio. Adobe Dreamweaver è sicuramente fra i programmi principali (se non il più importante) all’interno di questo scenario. Il suo compito 8

principale è quello di generare il codice dei ile che costituiscono il sito stesso. Sono molti gli aspetti che contribuiscono a fare di Dreamweaver un punto di riferimento nel panorama dello sviluppo di contenuti e applicazioni per il web. Innanzitutto si tratta di un editor visuale in grado di generare automaticamente il codice a seguito delle azioni che lo sviluppatore esegue con gli strumenti dell’interfaccia del programma. Ciò rende più ef iciente il lavoro di sviluppo che altrimenti sarebbe molto pesante a causa della complessità raggiunta al giorno d’oggi da contenuti e applicazioni. In ogni caso è sempre possibile manipolare direttamente il codice grazie ad un editor evoluto che fornisce una preziosa assistenza agli utilizzatori. Oltre a consentire l’implementazione, Dreamweaver è in grado di gestire anche altre fasi del processo di sviluppo: la modi ica di pagine, contenuti e collegamenti, il test, la pubblicazione e la manutenzione. Il lusso di lavoro diventa in questo modo più semplice, a tutto vantaggio dell’ef icienza nello sviluppo. Dreamweaver, inoltre, consente di scrivere codice in molti dei linguaggi utilizzati per sviluppare applicazioni web; sia linguaggi lato client (come Javascript), sia linguaggi lato server (PHP, ASP, JSP, ...). Anche per questa attività , lo sviluppatore può contare su una assistenza ef icace che agevola il lavoro, rendendolo più snello ed ef iciente. Un altro aspetto da non trascurare è il fatto che Adobe Dreamweaver è disponibile sia per Windows che per Mac. Teniamo presente, infatti, che queste due piattaforme sono le principali utilizzate dagli utenti di tutto il mondo, in particolare per la produzione di documenti e di con9

1. I tenuti creativi destinati alla stampa e/o alla fruizione in rete, sia tramite sistemi desktop che con dispositivi mobili. Gli utilizzatori del programma possono inoltre contare su una solida integrazione con altri programmi della Adobe Creative Suite per rendere piuĚ&#x20AC; ef iciente lâ&#x20AC;&#x2122;intero lusso di lavoro nel caso in cui si debbano manipolare oggetti gra ici, animazioni e contenuti multimediali.

Capitolo 2

Concetti di base Prima di iniziare a scoprire Dreamweaver, è necessario conoscere qualcosa in più sul mondo del web e sul lusso di lavoro da seguire per creare un sito. Senza queste conoscenze sarà dif icile portare avanti l’attività di creazione di un sito, anche se si utilizza un programma visuale come Dreamweaver, che dispone di strumenti so isticati per rendere il lavoro semplice e veloce.

2.1

Come funziona il web

WWW è uno degli acronimi più conosciuti e utilizzati al giorno d’oggi. Questa sigla abbrevia l’espressione World Wide Web che, tradotta in italiano, signi ica qualcosa del tipo “Ragnatela che si estende in tutto il mondo”. Spesso il concetto di Web viene confuso con quello di Internet, ma si tratta di due cose diverse. Mentre Internet è una rete di computer ed altri dispositivi (quindi una infrastruttura isica), il Web è , invece, uno dei servizi disponibili su Internet e può essere pensato come 11

2. C una rete (letteralmente una “ragnatela”) di documenti, comunemente de initi pagine web, raggruppati in siti e che si intrecciano fra di loro a causa del fatto che essi contengono dei collegamenti (link) ad altri documenti. Le pagine web risiedono su nodi (host) della rete sui quali è in esecuzione un’applicazione de inita Web Server, che ha il compito di rendere disponibili le pagine a chi voglia consultarle. Le applicazioni utilizzate per accedere ai contenuti e ai servizi del web sono comunemente de inite Client Web, ed in genere si tratta di quei programmi che vengono denominati browser (Internet Explerer, Mozilla Firefox, Google Chrome, Apple Safari, …), i quali permettono ad un utente di speci icare cosa si vuol consultare e rappresentano il contenuto dei documenti ricevuti nell’area di visualizzazione della propria inestra. Per consentire agli utenti di indicare qual è risorsa di loro interesse (e per poter collegare le risorse in fase di produzione), ad ognuna di esse è associato un indirizzo, altrimenti detto URL (Uniform Resource Locator), grazie al quale ogni risorsa può essere identi icata in modo univoco. La comunicazione fra client e server, che caratterizza una sessione di navigazione su web, è resa possibile da un protocollo che prende il nome di HTTP (Hyper Tex Trasfer Protocol) e che de inisce le regole in base alle quali le diverse entità coinvolte nella comunicazione (client e server) devono scambiarsi le informazioni. HTTP è solo uno dei protocolli sui quali si regge il funzionamento di Internet, ed in particolare è quello che consente il funzionamento del Web. La struttura di una pagina web è de inita all’interno di un ile di testo che contiene indicazioni speci icate in linguaggio HTML (Hyper Text Markup Language). Non si tratta di un linguaggio di programmazione, 12

2.1. Come funziona il web ma di un linguaggio che permette di descrivere contenuti associando ad essi dei marcatori (tag) che conferiscono loro signi icato. I browser sono in grado di interpretare il codice HTML e di ricostruire e visualizzare la pagina in base alle indicazioni presenti nel ile di testo (operazione che prende il nome di rendering). Comunque, un sito web non è costituito solo da ile HTML, ma anche da altri ile di testo scritti in altri linguaggi, che speci icano l’aspetto (CSS) e/o le funzionalità (Javascript, …) della pagina. Inoltre, fra le risorse di un sito vi sono anche elementi complessi, quali immagini, video e animazioni, che non possono essere descritti in forma testuale e che sono de initi in ile a parte e in appositi formati supportati dal web . Come già accennato in precedenza, una volta de initi i contenuti di un sito web, essi dovranno essere posizionati su un computer costantemente connesso ad Internet (se vogliamo che siano consultabili 24 ore su 24) sul quale è installato e con igurato un web server. Anche se, teoricamente, qualsiasi computer può svolgere questo ruolo, è consigliabile rivolgersi ad un Internet Service Provider (ISP), che fornisca i servizi necessari per ospitare il sito e renderlo disponibile alla comunità degli utenti (servizi di hosting). Le società che forniscono questo tipo di servizi sono numerose; in alcuni casi il servizio è gratuito, in altri a pagamento, con quote che dipendono anche dal numero di servizi forniti. Quando è necessario pubblicare un sito, è bene fare una accurata ricerca in rete per individuare il provider e il servizio più adatto alle nostre esigenze.

2. C

2.2

I linguaggi del web

Anche se il linguaggio HTML può essere suf iciente per creare una pagina web, esso non basta per dar vita a progetti articolati, in cui i contenuti sono di tipo diverso, l’aspetto che essi devono avere è piuttosto complesso ed è necessario implementare delle funzionalità per fornire servizi agli utenti e consentire loro di eseguire delle azioni che vanno oltre la semplice navigazione fra i documenti. E dunque necessario ricorrere a diversi linguaggi e tecnologie per soddisfare le molteplici esigenze che stanno dietro ad un sito o ad un’applicazione web. Ne facciamo una breve panoramica, includendo anche quelli il cui utilizzo non verrà approfondito in questo volume.

HTML Come già accennato in precedenza, HTML è un linguaggio di marcatura (e non di programmazione) utilizzato per descrivere in forma testuale i contenuti di un documento, grazie all’uso di tag (marcatori o etichette) che conferiscono signi icato alle informazioni testuali presenti nel documento. Grazie a questo linguaggio è inoltre possibile aggiungere alla pagina informazioni di intestazione utili sia per la fruizione, sia per l’indicizzazione da parte dei motori di ricerca. Attualmente è largamente utilizzata una versione del linguaggio indicata con la sigla XHTML (eXtensible HTML). Si tratta di una riformulazione del linguaggio originale effettuata grazie all’applicazione di XML

2.2. I linguaggi del web (eXtensible Markup Language), un meta-linguaggio utilizzato per deinire linguaggi di marcatura da utilizzare, a loro volta, per descrivere documenti e strutture dati. Questa soluzione ha lo scopo di rendere più standard il linguaggio HTML ed evitare personalizzazioni simili a quelle introdotte in passato nei vari browser che rendevano più complicata la fruizione dei contenuti. Attualmente è in fase di de inizione (ed è ormai ampiamente supportata dai browser) una nuova versione del linguaggio indicata con la sigla HTML5, che introduce moltissime novità per quel che riguarda i tag e fornisce un supporto molto migliore rispetto al passato per lo sviluppo di applicazioni web.

CSS La tecnologia e il linguaggio CSS (sigla che sta per Cascading Style Sheets) ha af iancato il linguaggio HTML per consentire una migliore gestione della formattazione dei contenuti. L’idea è quella di utilizzare un linguaggio di marcatura (HTML, XHTML, XML) per de inire i contenuti e la relativa struttura (i linguaggi di marcatura sono nati proprio per questo scopo) e utilizzare una tecnologia diversa e speci ica per descrivere il formato che i contenuti devono assumere. In questo modo si ottengono notevoli vantaggi, dei quali parleremo in un apposito capitolo dedicato a questo argomento. L’ultima versione di questo linguaggio è indicata con la sigla CSS3 ed ha aggiunto, rispetto alle versioni precedenti, delle nuove opportunità che consentono di applicare ai contenuti alcuni effetti gra ici molto so isticati (ombreggiature, sfumature di colore, …) che, essendo descritti in 15

2. C forma testuale, evitano di dover ricorrere ai programmi di gra ica per la progettazione visiva delle pagine del sito. Come per HTML5, tuttavia, è necessario precisare che questa versione non è stata ancora de inita come standard, anche se è già ampiamente utilizzata dagli sviluppatori e supportata dai browser.

Linguaggi lato client Siccome HTML non è un linguaggio di programmazione, esso non consente di sviluppare applicazioni e, quindi, di aggiungere funzionalità alle pagine web. Tuttavia è possibile incorporare nel codice HTML della pagina, oppure in un ile esterno che poi verrà collegato al documento HTML, uno o più frammenti di codice scritti in un lignaggio di programmazione. Se il codice dovrà essere eseguito dal browser sul computer dell’utente, siamo al cospetto di uno script lato client ed il linguaggio utilizzato deve essere supportato dal browser. Il principale fra i linguaggi lato client è sicuramente Javascript. Grazie ad esso e alle sue numerose librerie (fra le quali JQuery), si possono associare alla pagina varie tipologie di comportamenti, che consentono di visualizzare messaggi, mostrare o nascondere porzioni della pagina, eseguire diversi tipi di controlli sul sistema dell’utente, … La maggior parte dei browser consentono di disattivare l’esecuzione di script, evitando in questo modo che vengano eseguite istruzioni indesiderate.

2.3. Il processo di creazione di un sito

Linguaggi lato server Oltre ad eseguire istruzioni sul sistema dell’utente può essere necessario eseguire codice anche sul server. Questa necessità si veri ica soprattutto quando è necessario elaborare dati che devono essere gestiti attraverso un database che risiede su un server. I linguaggi lato server sono molti. Il più popolare fra tutti è sicuramente PHP, supportato praticamente da qualsiasi server web. Altri linguaggi sono più o meno supportati a seconda del server che gestisce il sito e a seconda delle impostazioni dello stesso.

2.3

Il processo di creazione di un sito

La realizzazione di un sito web è un’attività piuttosto complessa, in quanto lo è anche il prodotto che si vuol realizzare, anche quando è composto da poche pagine e non ha funzionalità avanzate. Si tratta a tutti gli effetti un’attività ingegneristica, che è suddivisa in fasi diverse, ognuna delle quali è funzionale all’intero processo. In linea di massima, le fasi principali possono essere identi icate nel seguente modo: 1. Analisi e speci ica dei requisiti 2. Progettazione 3. Realizzazione o Implementazione 4. Test 17

2. C 5. Rilascio e manutenzione Queste fasi non vengono eseguite in modo rigido e sequenziale. Infatti, non è strano che durante o dopo la progettazione si renda necessario ritornare sulla fase di analisi per rivedere i requisiti, oppure che durante la realizzazione si modi ichino alcuni dettagli del progetto. Tuttavia, è importante sapere che queste fasi devono essere affrontate per arrivare ad un risultato che si possa dire soddisfacente. In questo volume ci si occuperà in particolare della fase di implementazione, nella quale si utilizza uno strumento di produzione adeguato (nel nostro caso si tratta di Dreamweaver) per realizzare “materialmente” quello che sarà il prodotto inale. Tuttavia, è sicuramente utile conoscere anche le altre fasi del processo, che sono di importanza fondamentale ai ini della realizzazione di un prodotto di qualità .

Analisi e speci ica dei requisiti Dopo aver avviato il progetto, avendo eventualmente deciso anche i tempi di realizzazione, le risorse da impiegare e aver assegnat i ruoli (nel caso in cui si lavori in gruppo), è necessario capire cosa si deve realizzare, quali sono le esigenze da soddisfare e qual è il contesto in cui il prodotto dovrà operare. La prima fase del processo di realizzazione di un sito e di un’applicazione web è , dunque, una fase di analisi nella quale si dovranno individuare i punti di partenza per poter procedere con il lavoro. In questo senso può essere utile proporre alcune domande fondamentali alle quali si dovrà dare risposta. 18

2.3. Il processo di creazione di un sito • Chi è il committente e qual è la sua missione inale (vendere un prodotto, erogare un servizio, divulgare una idea, ottenere voti …)? • Quali sono gli obiettivi concreti che si vogliono ottenere con il sito (fare pubblicità , utilizzare la rete come canale di vendita, fare propaganda, …)? • Chi sono le igure interessate all’attività del sito (committente, autori ed editori di contenuti, amministratori, sponsor, utenti inali, …) e qual è il loro interesse? • Qual è il tipo di utente (target) al quale il sito si rivolge? Quali sono i tratti che lo caratterizzano in termini di età , cultura, convinzioni politiche e religiose, …? Quali sono i suoi interessi ed obiettivi? • Con quali tipi di dispositivi e tecnologie dovrà essere possibile fruire dei contenuti e delle funzionalità ? • Quali informazioni si vuol fornire e quali funzionalità si vogliono implementare? • Quali reazioni o emozioni si vuol provocare nell’utente del sito? Il risultato inale di questa fase è un documento che contiene, fra le altre cose, un elenco di requisiti tecnici e funzionali che dovranno essere rispettati e soddisfatti dal prodotto che si andrà a realizzare.

2. C

Progettazione Una volta individuati i requisiti che il prodotto inale dovrà soddisfare, si procede con la fase di progettazione. In questa fase si prenderanno decisioni concrete su ciò che dovrà essere realizzato, cercando di rappresentare in modo schematico i risultati di tali decisioni. Dopo aver identi icato i contenuti e le funzionalità del sito, si dovrà stabilire, in prima battuta, come essi saranno suddivisi in pagine e come queste pagine sono collegate fra di loro tramite link ipertestuali. L’insieme di tutti i collegamenti e il modo con cui sono organizzati nelle pagine del sito de iniscono la struttura di navigazione, che riveste un’importanza fondamentale, in quanto permette agli utenti di orientarsi all’interno del sito, e di individuare ciò che stanno cercando e/o portare a termine una determinata operazione (ad esempio un acquisto o una registrazione). Scendendo ancor più nei dettagli, si dovrà anche stabilire la struttura delle singole pagine, cosa dovranno contenere, il layout (disposizione dei contenuti) e l’aspetto gra ico. Se lo si ritiene necessario, si può realizzare il prototipo di ogni pagina, che potrà essere utile per mostrare al committente cosa si sta facendo, e per discutere eventuali modi iche prima di procedere con la realizzazione inale.

Implementazione Una volta deciso cosa si vuol realizzare, si può procedere con la fase vera e propria di implementazione concreta dei contenuti e delle fun20

2.3. Il processo di creazione di un sito zionalità del sito. Questa è la fase di cui ci occuperemo in questo testo, descrivendo le principali funzionalità di Dreamwevar che consentono di realizzare quello che ci interessa; quindi in questo momento non dovrebbe essere necessario aggiungere ulteriori dettagli. Tuttavia è bene fare alcune precisazioni. Un sito non si compone dei soli ile di testo scritti in opportuni linguaggi. All’interno delle pagine ci sono contenuti gra ici che dovranno essere prodotti e/o ottimizzati con programmi di gra ica quali Photoshop, Illustrator o Fireworks, contenuti animati che dovranno essere implementati con programmi di animazione come Flash, contenuti video che dovranno essere montati con software come Premiere, etc. Gli strumenti necessari in questa fase dipendono dalla natura dei contenuti e dalla loro complessità . In ogni caso, Dreamweaver non è suf iciente in quanto non integra le funzionalità necessarie per manipolare tutti i diversi tipi di oggetti presenti nelle pagine web.

Test e rilascio Terminata la fase di sviluppo, il sito dovrà essere testato per veri icare che tutto funzioni come ci si aspetta. Sarà necessario veri icare se le pagine vengono visualizzate correttamente dai vari browser, anche perché , ogni browser ha caratteristiche diverse e c’è il rischio che alcuni elementi non siano mostrati correttamente in tutti i browser. Altri aspetti che dovranno essere testati sono i collegamenti (per veriicare che funzionino tutti e che non ci siano collegamenti interrotti) e le funzionalità (per controllare che le operazioni vengano eseguite correttamente e non ci siano errori nel codice degli script). 21

2. C

2.4

Le basi del linguaggio HTML

Il linguaggio HTML è costituito da una serie di etichette o marcatori, detti tag, tramite i quali vengono descritti gli elementi di contenuto presenti nella pagina (testi, immagini, …), la posizione che essi assumono nella pagina e la disposizione di uno rispetto all’altro e in alcuni casi anche il loro aspetto (anche se per questo è più opportuno ricorrere ai fogli di stile). La funzione del tag è far capire al browser come dovrà interpretare le indicazioni che seguono il tag stesso. I tag sono costituiti da parole chiave del linguaggio HTML scritte tra parentesi angolari o acute, che sono sostanzialmente i simboli di minore e maggiore (<tag>). La maggior parte di essi ha anche un tag di chiusura che termina la descrizione di qualcosa. Esso è uguale a quello di apertura a cui si riferisce, ma è preceduto da uno slash (</tag>). Ciò che viene descritto deve essere indicato tra tag di apertura e tag di chiusura, come nell’esempio seguente:

<h1 >Il linguaggio HTML </h1 > I tag del linguaggio prevedono anche l’utilizzo di attributi utilizzati per speci icare in modo più preciso la descrizione del contenuto. Tali attributi sono indicati nel tag di apertura, come nell’esempio seguente:

<h1 align =" center ">Il linguaggio HTML </h1 >

2.4. Le basi del linguaggio HTML

Struttura della pagina Un ile HTML ha una struttura ben precisa, de initi da alcuni particolari tag del linguaggio. Tale struttura può essere de inita dal seguente schema:

<! DOCTYPE HTML PUBLIC " -// W3C // DTD ␣ HTML ␣ 4.01 ␣ Transitional // EN" " http :// www . w3. org /TR/ html4 / strict . dtd "> <html > <head > // intestazione della pagina </ head > <body > // corpo della pagina </ body > </ html > Il documento si apre con la de inizione del tipo di documento, una riga tramite la quale vengono indicati il tipo di documento che è descritto nel codice che segue ed, eventualmente, una URL dove il browser può trovare le speci iche del linguaggio utilizzato nel ile. L’intero codice del documento è contenuto fra i tag <html> e </html> ed è suddiviso in due sezioni. La prima di esse costituisce l’intestazione della pagi-na, contiene informazioni non visualizzate nella inestra del browser ed è racchiusa fra i tag <head> e </head>. La seconda può essere considerata il corpo della pagina; in essa è descritto tutto ciò che 23

2. C dovraĚ&#x20AC; essere visualizzato dal browser e che eĚ&#x20AC; racchiuso fra i tag <body> e </body>.

Capitolo 3

L’area di lavoro Dreamweaver è distribuito sia per piattaforma Windows, sia per piattaforma Mac. Le funzionalità sono sostanzialmente le stesse, tuttavia ci sono alcune differenze legate soprattutto ad alcuni particolari dell’interfaccia. In questo libro si farà per lo più riferimento alla versione per Windows. Quando lo si riterrà opportuno, verranno messe in evidenza le differenze fra le 2 versioni.

3.1

La schermata di benvenuto

Appena Dreamweaver viene aperto e in ogni istante in cui non ci sono documenti aperti nella inestra del programma, viene mostrata la schermata di benvenuto che presenta all’utente una panoramica delle operazioni iniziali che possono essere eseguite per avviare un lusso di lavoro.

3. L’

Figura 3.1: Schermata di benvenuto. Nelle prime due colonne è possibile riconoscere i comandi che consentono di aprire e creare documenti.

Le voci di questa schermata sono suddivise in 3 colonne. Quella più a sinistra presenta un elenco degli ultimi documenti su cui si è lavorato. Per aprire uno di essi è suf iciente un clic sul nome del documento. In alternativa, se si vuol aprire un documento non presente nella schermata, è possibile eseguire il comando Apri riportato alla ine della colonna. La seconda colonna di comandi permette di creare un nuovo documento vuoto facendo clic su una delle voci che corrispondono ai linguaggi che il programma supporta, ovvero ai tipi di documento che il programma è in grado di creare. Da questa colonna è possibile anche attivare la creazione di un nuovo sito e aprire la inestra di dialogo Nuovo facendo clic sulla voce Altro. La maggior parte delle altre voci presenti nella inestra (comprese quelle della terza colonna) consentono di accedere a riferimenti online for26

3.2. La barra dell’applicazione niti dalla Adobe per conoscere il programma e le sue funzionalità La schermata di benvenuto può essere nascosta facendo clic sulla voce Non mostrare più e può essere mostrata spuntando la voce Mostra schermata di benvenuto nella categoria Generali delle preferenze del programma.

3.2

La barra dell’applicazione

La barra dell’applicazione è l’elemento posizionato più in alto nella inestra. In esso sono contenuti i seguenti elementi: • il logo del programma, posizionata all’estrema sinistra della barra • la barra dei menu, all’interno della quale sono raccolti, e suddivisi in vari menu e sottomenu, tutti i comandi relativi alle funzionalità del programma: ad ogni operazione che il programma consente di eseguire corrisponde un comando posizionato in questa barra • il selettore dell’area di lavoro, che consente di modi icare rapidamente la con igurazione dell’area di lavoro e l’organizzazione dei pannelli • una casella di ricerca tramite la quale è possibile avviare in modo veloce una ricerca all’interno delle guide di Adobe, speci icando l’argomento

3. L’ • il pulsante di accesso ai servizi CS Live, che si integrano con i programmi della Adobe Creative Suite per rendere il processo di sviluppo e veri ica più ef iciente • i pulsanti di controllo della inestra, che consentono di ridurre a icona la inestra del programma, ingrandirla o ripristinarne le dimensioni e chiudere il programma quando termina la sessione di lavoro L’altezza della barra dipende dalle dimensioni dello schermo: se la larghezza del monitor è suf iciente da visualizzare tutti gli elementi descritti in un’unica riga, allora l’altezza della barra sarà più ridotta. Altrimenti, se la larghezza dello schermo è insuf iciente (cosa abbastanza rara al giorno d’oggi), oppure se la inestra del programma ha dimensioni ridotte, la barra dei menu verrà visualizzata su una seconda riga separata.

Figura 3.2: Barra dell’applicazione nella con igurazione in cui tutti gli elementi sono visualizzati su una sola riga.

Figura 3.3: Barra dell’applicazione nella con igurazione in cui tutti la barra dei menu è posizionata su una riga separata e posizionata in basso.

Su piattaforma Mac, la barra dei menu è posizionata nella parte superiore della inestra, come avviene per tutti i programmi eseguiti in questo sistema.

3.3. La inestra Documento

3.3

La inestra Documento

La inestra Documento rappresenta l’elemento principale dell’interfaccia, all’interno del quale vengono realizzati i contenuti e prodotto il codice dei ile del nostro sito.

Figura 3.4: Finestra Documento impostata sulla vista Progettazione.

La inestra è suddivisa in diverse sezioni. Nella parte superiore troviamo posizionate le linguette che consentono di individuare i documenti aperti e di spostarsi fra un documento e l’altro. Poco più in basso sono indicati, quando un documento è attivo, tutti i documenti collegati ad esso tramite pulsanti che consentono di spostarsi facilmente su ognuno di essi. Proseguendo verso il basso, si trova una barra degli strumenti composta da una serie di controlli che consentono di modi icare la visualizzazione del documento e di eseguire alcune operazioni di base sullo 29

3. L’ stesso. Nell’area principale della inestra Documento viene visualizzato il contenuto e/o il codice dello stesso e le sue dimensioni dipendono dalle dimensioni della inestra del programma e, in ultima analisi, dalle dimensioni dello schermo.

Figura 3.5: Selettore di tag. Le varie voci indicano gli ambienti annidati nei quali si è posizionati, a partire da quello più esterno (body), indicato sulla sinistra.

L’elemento posizionato più in basso nella inestra Documento è una barra di stato. Sulla destra di questa barra troviamo il selettore di tag, nel quale è indicata la struttura dei tag HTML che descrive il punto della pagina in cui si è posizionati o la porzione di contenuto selezionata. I tag sono indicati dal più esterno (che è sempre il tag body indicato a sinistra) al più interno. Ognuna delle voci indicate nel selettore può essere utilizzata per selezionare il contenuto indicato dalla voce stessa.

Figura 3.6: Strumenti e indicazioni posizionati nella barra di stato.

Sulla destra della bara di stato sono posizionati alcuni controlli che consentono di agire sull’area di lavoro (come, ad esempio, gli strumenti Seleziona, Zoom e Mano), e alcune indicazioni sul documento attivo (dimensioni del ile, tempo stimato per il download e codi ica dei caratteri).

3.3. La inestra Documento

Le modalità di visualizzazione del documento Quando lavoriamo su un documento con Dreamweaver, il suo contenuto può essere visualizzato in modi diversi a seconda delle operazioni speci iche che devono essere eseguite su di esso in un determinato momento. Nella barra degli strumenti della inestra documento troviamo 3 pulsanti che ci consentono di alternare la vista Codice, la vista Progettazione e la vista Dividi.

Figura 3.7: Pulsanti della barra degli strumenti della inestra Decumento che consentono di attivare le modalità Codice, Dividi e Progettazione.

La prima modalità ci da la possibilità di modi icare manualmente il codice del documento, sia esso HTML, CSS o qualsiasi altro linguaggio supportato dal programma. Durante la digitazione, Dreamweaver interviene nell’operazione, mostrando in prossimità del punto di modi ica una serie di soluzioni che consentono il completamento automatico del frammento di codice. Inoltre, sulla sinistra della inestra viene mostrata una barra di strumenti che consente di accedere ad alcune operazioni utili durante la modi ica del codice. Queste soluzioni rendono più ef iciente il lavoro e riducono al minimo le possibilità di produrre codice non corretto. Nella vista Progettazione, possiamo lavorare in modalità visuale sul contenuto del documento stesso. In questo caso ci verrà mostrata una vista quasi “reale” dei contenuti che stiamo creando (sia pure con alcuni riferimenti visivi, come guide, maniglie, …, che non verranno visualizzate durante la navigazione), e potremo modi icare il documento tramite azioni semplici e intuitive come trascinamento di oggetti o 31

3. L’

Figura 3.8: Finestra Documento in modalità Codice. Sulla sinistra è collocata una barra degli strumenti che permette di attivare delle funzionalità ed eseguire alcuni comandi tipici del lavoro in questa modalità.

click su comandi. In sostanza, in questa modalità non si ha a che fare col codice che descrive ciò che viene creato: della sua generazione si occupa Dreamweaver. Se lo si ritiene opportuno, si possono visualizzare contemporaneamente entrambe le viste af iancate l’una all’altra, attivando la modalità Dividi. In questo modo si possono tenere sotto controllo contemporaneamente sia il codice della pagina, sia il risultato inale generato dallo stesso codice. In questo caso, fa comodo avere a disposizione uno schermo di dimensioni adeguate, in modo tale da non dover utilizzare le barre di scorrimento orizzontale per spostarsi fra i contenuti. Nella barra degli strumenti della inestra Documento, subito dopo i pul32

3.3. La inestra Documento

Figura 3.9: Pulsanti Codice dal vivo, Vista dal vivo ed Esamina della inestra Documento.

santi appena descritti, troviamo 3 altri pulsanti che consentono di attivare alcune altre modalità di visualizzazione che aggiungono funzionalità alla vista Pro-gettazione. I nomi di queste modalità sono (nell’ordine in cui compaiono nell’interfaccia) Codice dal vivo, Vista dal vivo ed Esamina. L’attivazione della Vista dal vivo, tramite apposito pulsante presente nella barra degli strumenti della inestra Documento, da la possibilità di visualizzare un’anteprima più realistica di ciò che verrà visualizzato dal browser. Ad esempio, in questa modalità viene eseguito il codice Javascript della pagina e sono attivi i plug-in che consentono di visualizzare alcuni contenuti complessi, come ad esempio le animazioni Flash. Usando questa vista è possibile evitare di dover eseguire continuamente l’anteprima nel browser per testare qualsiasi modi ica apportata. Quando è attiva la modalità Vista dal vivo è possibile attivare anche la modalità Codice dal vivo (o, comunque, attivando quest’ultima, verrà attivata automaticamente anche la prima). Questa modalità consente di visualizzare il codice che descrive ciò che viene effettivamente visualizzato nella vista dal vivo. Mentre si naviga in una pagina web, infatti, il contenuto visualizzato varia dinamicamente a seconda delle operazioni eseguite dall’utente. Sempre insieme alla modalità Vista dal vivo è possibile attivare anche la mo-dalità Esamina. In questa modalità , quando si passa con il mouse 33

3. L’ sugli ele-menti della pagina, essi verranno evidenziati (attivando anche la modalità Codice dal vivo verrà evidenziato anche il blocco di codice che descrive l’elemento puntato) e, nel pannello Stili CSS (in modalità Corrente) sarà pos-sibile vedere gli attributi CSS applicati ad essi.

Figura 3.10: Finestra di Dreamweaver con modalità Esamina attiva. Sia nella vista Codice che nella vista Progettazione è possibile notare come siano evidenziati i blocchi puntati con il mouse (anche se il puntatore in questa immagine non è visibile). Nel pannello Stili CSS è possibile leggere gli attributi applicati al blocco evidenziato.

3.4

I pannelli

Oltre che tramite i comandi organizzati nella barra dei menu, le funzionalità del programma sono accessibili anche per mezzo di un’ampia dotazione di pannelli che possono essere posizionati lungo i 4 lati della inestra, oppure sovrapposti all’area di lavoro. Le impostazioni iniziali prevedono che alcuni pannelli siano agganciati al lato destro della inestra, il pannello Proprietà sia posizionato lungo 34

3.4. I pannelli il lato inferiore, mentre altri pannelli non siano visibili (è praticamente impossibile tenere tutti i pannelli contemporaneamente aperti sullo schermo in quanto creerebbero una gran confusione e non resterebbe spazio per lavorare con il documento). Esistono molti modi per modi icare la con igurazione dei pannelli Una operazione molto semplice e immediata consiste nel fare clic, all’interno del menu Finestra, sul nome del pannello che si vuol aprire nel caso in cui questo non compaia nell’interfaccia del programma. Una modi ica più “drastica” consiste nel modi icare l’area di lavoro dall’apposito selettore nella barra dell’applicazione, oppure dal menu Finestra > Layout area di lavoro. E possibile anche creare nuove aree di lavoro per consentire all’utente di memorizzare le proprie con igurazioni personalizzate. I pannelli possono essere isolati dagli altri, oppure organizzati in gruppi e i gruppi possono essere agganciati in colonne. Una piccola doppia freccetta in alto a destra nel pannello consente di comprimere il pannello (o gruppo o colonna) in modo tale da visualizzarne solo l’icona o il titolo. Quando il pannello è compresso, è possibile fare clic sul pulsante che contiene l’icona o il nome del pannello per aprirlo in modalità “cassetto” e per chiuderlo nuovamente quando non è più necessario. Un diverso tipo di compressione si può ottenere facendo doppio clic sulla barra grigia in cui sono posizionate le schede con i nomi dei pannelli. I pannelli possono essere spostati trascinandoli dall’apposita linguetta. Questa operazione può essere utilizzata sia per riordinare i pannelli all’interno dei gruppi, sia per sganciare un pannello da un gruppo o da una posizione issa e renderlo mobile (oppure per eseguire l’operazione opposta). I pannelli possono anche essere ridimensionati, sia 35

3. Lâ&#x20AC;&#x2122; quando sono agganciati, sia quando sono mobili (sia pure con alcune differenze di comportamento), cliccando e trascinando i bordi Le funzionalitaĚ&#x20AC; di un pannello sono in parte accessibili direttamente dai controlli posizionati nel pannello, sia dal menu che appare facendo clic sul pulsante in alto a destra nel pannello stesso.

Il pannello Inserisci Nelle vecchie versioni di Dreamweaver, questo pannello si presentava come una specie di barra degli strumenti, con una serie di pulsanti suddivisi in diverse categorie. La funzione di questo elemento dellâ&#x20AC;&#x2122;interfaccia del programma non eĚ&#x20AC; cambiata, tuttavia, nelle ultime versioni, esso si presenta come un comune pannello, gestibile come tutti gli altri.

Figura 3.11: Il pannello Inserisci. In questa immagine sono visualizzati soltanto alcuni comandi della categoria Comuni.

3.4. I pannelli La sua funzione è quella di consentire l’inserimento nel documento di contenuti e oggetti di ogni tipo. A seguito dell’inserimento, il programma inserisce nel ile su cui si sta lavorando il frammento di codice che descrive l’elemento inserito. Siccome il numero di comandi di inserimento è molto elevato, essi sono suddivisi in diverse categorie che possono essere visualizzate alternativamente nel pannello stesso. Per modi icare la categoria visualizzata è suf iciente fare clic sul pulsante posto in alto a sinistra (che indica il nome della categoria attiva al momento) e scegliere dal menu a discesa la voce desiderata. Le operazioni che possono essere eseguita dal pannello inserisci possono essere eseguite anche attraverso i comandi del menu Inserisci.

Il pannello Proprietà Al contrari di quello che avviene per tutti gli altri pannelli, la Finestra di ispezione Proprietà (che da ora in avanti chiameremo semplicemente Pannello Proprietà) è agganciato, per impostazione prede inita, nella parte inferiore della inestra, e non a destra. Ovviamente, come tutti gli altri pannelli, anche questo può essere spostato in un’altra posizione; tuttavia, questa è quella più adatta al suo ruolo e utilizzo. La funzione del pannello Proprietà è quella di visualizzare le impostazioni di qualsiasi elemento o contenuto selezionato all’interno della pagina, e di consentirne, eventualmente, la modi ica. Quindi, a seconda del contesto, cioè a seconda di cosa è selezionato nella pagina in un determinato momento, il pannello mostrerà all’utente controlli diversi. 37

3. L’

Figura 3.12: Pannello Proprietà. In questa immagine è mostrato il pannello così come appare quando si è posizionati su un punto qualsiasi della pagina o quando è selezionato un testo.

Il pannello Proprietà è suddiviso in 2 sezioni che prendono il nome di HTML e CSS. La prima consente la modi ica della struttura dell’elemento selezionato, e quindi della sua de inizione nel codice HTML. La seconda, invece, consente la modi ica delle principali impostazioni riguardanti l’applicazione di regole e attributi CSS all’elemento stesso. Per commutare la sezione selezionata è possibile utilizzare i 2 pulsanti posizionati in alto a sinistra nel pannello stesso.

Il pannello File Il pannello File può essere utilizzato dall’utente per gestire i ile del sito sul quale si sta lavorando, sia quelli che fanno parte del sito locale, sia quelli che sono già in remoto. In questo senso rappresenta dunque una valida alternativa all’utilizzo delle classiche utility esterne di gestione delle risorse (ad esempio Esplora risorse per Windows e Finder per Mac) e trasferimento ile (client FTP). Il pannello File può essere visualizzato in modalità compressa ed espansa. Nella prima, il pannello occupa nella inestra del programma un’area simile a quella occupata dagli altri pannelli ed è in grado di visualizzare una sola delle viste che caratterizzano il pannello stesso. Nella seconda modalità il pannello occupa l’intera inestra del programma e 38

3.4. I pannelli

Figura 3.13: Pannello File in versione ridotta.

consente di visualizzare contemporaneamente sia la vista locale, sia la vista remota. Nella parte superiore del pannello sono collocate 2 caselle a discesa che consentono di scegliere il sito o la posizione del ile system su cui lavorare e la vista da utilizzare. Le operazioni in genere eseguite in questo pannello sono le tipiche operazioni di gestione dei ile quali creazione, copia, spostamento, eliminazione e modi ica del nome di un ile o una cartella, e le tipiche operazioni di gestione dei siti quali caricamento su remoto, scaricamento da remoto, ritiro, deposito e sincronizzazione di sito locale e sito remoto.

Il pannello Risorse Un altro pannello (oltre il pannello File) che consente allâ&#x20AC;&#x2122;utente di accedere alle risorse del sito eĚ&#x20AC; , appunto, il pannello Risorse, situato, per 39

3. L’ impostazione prede inita, nello stesso gruppo del pannello File. Rispetto a quest’ultimo, cambia la logica con cui sono organizzate le risorse: non tramite struttura del ile system, ma suddividendo le stesse in categorie. Fra le risorse gestite da questo pannello non ci sono soltanto quelle che corrispondono a dei ile del sito, come immagini, ilmati e oggetti Flash, ma anche colori, URL, script e modelli.

Figura 3.14: Pannello Risorse. Nella igura sono visualizzate le risorse di tipo Immagine.

E possibile in ogni istante decidere se il pannello deve visualizzare tutte le risorse del sito o solo i preferiti (ogni risorsa può essere aggiunta ai preferiti tramite apposito comando presente nel menu del pannello). Tramite una barra di pulsanti posti sulla sinistra del pannello stesso, è possibile scegliere il tipo di risorsa da visualizzare nell’elenco. Ognuna di esse può essere inserita nella pagina web su cui si sta lavorando, trascinandola, dopo averla individuata all’interno del pannello, nel punto in cui si vuol posizionare la risorsa stessa. 40

3.4. I pannelli

Il pannello Stili CSS Il pannello Stili CSS costituisce il centro di controllo per la gestione dei fogli di stile e delle relative regole. Gli strumenti che questo pannello mette a disposizione degli utenti di Dreamweaver consentono di lavorare con i CSS in modo visuale senza dover mettere (a meno che non lo si voglia fare) le mani sul codice, e, quindi, senza dover conoscere la sintassi di questa speci ica.

Figura 3.15: Pannello Stili CSS. In questa igura è attivata la vista Tutte che mostra tutte le regole utilizzate in una pagina.

L’area del pannello è suddivisa in due parti. La parte superiore del pannello può essere impostata su due diverse modalità di visualizzazione, tramite gli appositi pulsanti situati in alto: nella modalità Tutte vengono visualizzate tutte le regole CSS incluse nel ile sul quale si sta lavorando o collegate ad esso, la modalità Corrente visualizza gli attributi

3. L’ CSS applicati ai contenuti selezionati e le regole in cui sono de initi tali attributi. Nella parte inferiore del pannello vengono presentati tutti gli attributi relativi alla regole selezionata in alto nel pannello. Essi possono essere modi icati direttamente nel pannello stesso, oltre che essere eliminati. Una voce situata sotto l’elenco consente di aggiungere nuove proprietà alla regola selezionata. Il pannello mette inoltre a disposizione tutti i comandi necessari per creare nuove regole CSS, modi icare o eliminare quelle esistenti, e collegare i ile CSS esterni alla pagina web attiva in quel momento.

Il pannello Elementi PA

Figura 3.16: Pannello Elementi PA. Ad ogni voce indicate nel pannello corrisponde un div PA presente all’interno della pagina.

Se nella pagina web sono presenti div PA (questa sigla sta per Posizionamento Assoluto), questi saranno elencati all’interno del pannello

3.5. Impostare le Preferenze Elementi PA e organizzati in una struttura in base all’ordine di sovrapposizione e all’eventuale annidamento. Le funzioni principali di questo pannello consistono nel dare la possibilità all’utente di modi icare l’organizzazione generale di questa struttura, spostando gli elementi, e permettere di nascondere o visualizzare gli elementi all’interno dell’area di lavoro del programma.

3.5

Impostare le Preferenze

L’interfaccia e il comportamento del programma possono essere ampiamente personalizzate per consentire all’utilizzatore di lavorare nel modo migliore in base alle sue esigenze. Come già detto in precedenza, la personalizzazione dell’interfaccia è resa possibile dalla de inizione e utilizzo delle aree di lavoro e dal fatto di poter ridisporre i pannelli a proprio piacimento. Interfaccia a parte, sono molte le impostazioni sulle quali è possibile intervenire per personalizzare Dreamweaver. Queste impostazioni sono accessibili dalla inestra di dialogo Preferenze che appare quando si esegue il comando Modi ica > Preferenze dalla barra dei menu. Le opzioni presenti nella inestra sono organizzate in molte categorie. Per intervenire su una importazione sarà quindi necessario individuare prima di tutto la categoria a cui appartiene e farci un clic. L’elevato numero di controlli presenti nella inestra può disorientare, tuttavia non è necessario intervenire su ognuna di esse: sarà suf iciente preoccuparsi soltanto di quelle modi iche che l’utente ritiene imporranti per migliorare il proprio lavoro. 43

3. Lâ&#x20AC;&#x2122;

Figura 3.17: Finestra di dialogo Preferenze. Fra le numerose categorie che costituiscono questa inestra, nellâ&#x20AC;&#x2122;immagine in alto Ă¨ mostrata al categoria Generali

Capitolo 4

Gestire siti e ile I ile HTML e tutti le altre risorse che concorrono a costituire un sito web non possono essere considerate e gestite come risorse isolate, in quanto sono collegate fra di loro e dovranno essere tutte trasferite su server quando il sito sarà stato completato e dovrà essere pubblicato. Per questo motivo è importante avere la possibilità di gestire il sito come un blocco unico di risorse, in modo tale che eventuali interventi su una di queste risorse possano essere integrati in modo ef iciente nel sito e avere le giuste ripercussioni sulle risorse collegate. Dreamweaver mette a disposizione dei propri utenti non solo le funzionalità che consentono di creare le pagine web e de inirne contenuti, aspetto e comportamenti, ma anche gli strumenti che consentono di gestire in senso più ampio i siti sui quali lo sviluppatore sta lavorando e le risorse che costituiscono il sito stesso. Anche la gestione del sito remoto (cioè delle risorse pubblicate sul server) fa parte delle funzionalità che Dreamweaver implementa, evitando in questo modo all’utente

4. G di dover ricorrere a strumenti esterni per trasferire i ile in remoto e sincronizzare le risorse locali con quelle caricate sul server.

4.1

Creare un sito in Dreamweaver

Per i motivi citati in precedenza, prima di iniziare a creare i ile del sito, è necessario (o, perlomeno, fortemente consigliato) creare un nuovo sito in Dreamweaver, e, prima ancora, creare sul proprio sistema di lavoro una cartella all’interno della quale raccogliere tutti i ile del sito stesso, sia quelli creati con il programma, (documenti HTML, fogli si sitle, ile di script, …) sia quelli prodotti con altri strumenti (immagini, animazioni, video, …). E possibile creare un nuovo sito in Dreamweaver eseguendo il comando Sito Web Dreamweaver dalla schermata di benvenuto, oppure il comando Sito > Nuovo sito dalla barra dei menu. Un pulsante che consente di avviare la stessa operazione è presente anche nella inestra Gestisci siti che può essere aperta eseguendo il comando Sito > Gestisci siti dalla barra dei menu, oppure il comando Gestisci siti dalla casella a discesa posta in alto a sinistra nel pannello File. La inestra che appare è piuttosto articolata e consente di indicare un gran numero di informazioni sul sito da creare, suddivise in diverse categorie. Nella schermata Sito è possibile speci icare il nome che si intende dare al sito e la cartella principale del sito locale, che rappresenta la cartella che lo sviluppatore ha creato sul proprio sistema per riunire tutti i ile del sito. Queste sono le uniche informazioni strettamente necessarie per poter completare l’operazione. Il nome può essere scelto liberamente dall’utente, in modo da assegnare al sito una denominazione che ne consenta una facile identi icazione. Tale nome 46

4.1. Creare un sito in Dreamweaver

Figura 4.1: Finestra di dialogo utilizzata per de inire un nuovo sito o modi icare le impostazioni di un sito esistente

non sarà visibile agli utenti che navigheranno nel sito stesso. La cartella principale del sito locale può essere scelta digitandone il percorso nell’apposita casella, oppure facendo clic sul pulsante Cerca cartella posto accanto e utilizzando la inestra di dialogo che appare subito dopo.

Le impostazioni dei server Nella categoria Server è possibile speci icare le informazioni sul server in cui dovrà essere pubblicato il sito e sull’eventuale server di prova utilizzato per testare il sito durante il lavoro di produzione. Per aggiungere un sito alla lista è necessario fare clic sul pulsante contrassegnato col segno + che si trova sotto la lista. A questo punto appare un pannello suddiviso in due schede. Nella prima (Generali) è necessario indicare il tipo di connessione al server e i dati necessari ad acce47

4. G dere ad esso. Tali dati sono forniti dall’ISP (Internet Service Provider) che fornisce lo spazio web. Nella seconda scheda (Avanzate) è possibile indicare se si vogliono mantenere memorizzate le informazioni che consentono la sincronizzazione fra sito locale e sito remoto, se si vogliono caricare automaticamente i ile in remoto nel momento in cui si esegue un comando di salvataggio, se si vuol attivare il ritiro dei il, che consente di evitare perdite di contenuti quando più componenti dello stesso team di sviluppo lavorano sugli stessi ile. Inoltre è possibile indicare il tipo di server di prova utilizzato per testare le pagine dinamiche del sito.

Gestire le versioni Nella categoria Versioni è possibile impostare l’accesso ad un server Subversion per la gestione delle versioni, per scaricare e depositare i ile. All’interno di questo server remoto sarà possibile visualizzare i ile, confrontarne le diverse versioni, e decidere eventualmente di sostituire un ile aggiornato con una versione più vecchia. Se non si è utenti di Subversion e non si è interessati a queste funzionalità , si possono ignorare queste impostazioni.

Le impostazioni avanzate Quest’ultima categoria è ulteriormente suddivisa in sottocategorie, grazie alle quali è possibile speci icare una serie di informazioni aggiuntive che determinano il funzionamento di Dreamweaver durante il la-

4.1. Creare un sito in Dreamweaver voro sul sito. Presentiamo di seguito un elenco di tali impostazioni ed una breve descrizione di ognuna di esse. • Le Informazioni locali permettono di indicare una eventuale cartella prede inita per la memorizzazione delle immagini del sito (si tratta di una sottocartella della cartella locale del sito), se utilizzare percorsi relativi al documento o alla cartella principale del sito locale per i collegamenti, indicare l’URL del sito (non necessario se si è impostato il sito remoto), di distinguere maiuscole e minuscole nei collegamenti e di abilitare la cache (utile per velocizzare la gestione delle risorse e dei collegamenti) • In Maschera ile è possibile indicare i ile e le cartelle che devono essere escluse dalle operazioni eseguite a livello di sito (ad esempio il caricamento sul server). In questo modo si può evitare di trasferire in remoto dei ile che non hanno a che fare col funzionamento del sito, come, ad esempio, i ile sorgenti di immagini, animazioni, … • Nella categoria Design Notes è possibile attivare ed impostare l’utilizzo dell’omonimo strumento, che permette ad alcune applicazioni della Adobe Creative Suite (in particolare Dreamweaver, Flash e Fireworks) di scambiarsi informazioni sui ile (ad esempio il nome e il percorso di un eventuale ile sorgente) che consentono ai programmi di cooperare. • In Colonne vista ile è possibile de inire le informazioni sui ile che devono essere visualizzate all’interno del pannello File

4. G • La categoria Contribute consente di abilitare l’utilizzo del programma omonimo che consente a chi dovrà amministrare il sito di apportare alcune modi iche di base • Nella categoria Modelli è presente un’unica impostazione che riguarda l’aggiornamento dei percorsi nei ile basati su modelli • La categoria Spry consente di modi icare il percorso nel quale verranno salvati i ile che consentono di far funzionare gli oggetti della libreria Spry

4.2

Gestire i siti web

Oltre a creare un nuovo sito è necessario, durante il lavoro con il programma, intervenire anche sui siti già creati in precedenza per modiicarne la con igurazione. Le funzionalità necessarie per questo scopo sono accessibili tramite una inestra di dialogo che prende il nome di Gestisci siti, che può essere aperta eseguendo il comando Sito > Gestisci siti dalla barra dei menu oppure facendo clic sul comando Gestisci siti dalla casella a discesa posta in alto a sinistra nel pannello File. All’interno di questa inestra viene visualizzato l’elenco di tutti i siti locali de initi nel sistema dell’utente. Sulla destra sono posizionati i pulsanti che consentono di attivare tutte le operazioni che è possibile eseguire sui siti. Il primo pulsante consente di avviare la creazione di un nuovo sito, operazione già trattata in precedenza in questo stesso capitolo. Un ulteriore modo per creare una nuova de inizione è quella di duplicarne una già esistente, per poi apportare le modi iche alle sole impostazioni che devono essere diverse da quelle del sito duplicato. Per 50

4.2. Gestire i siti web

Figura 4.2: Finestra di dialogo Gestisci siti. Grazie a questa interfaccia è possibile accedere a tutti i comandi di gestione dei siti.

duplicare una de inizione di un sito è suf iciente selezionarlo e fare clic sul pulsante Duplica. La nuova de inizione apparirà immediatamente nell’elenco. Il pulsante Modi ica consente di avviare la modi ica della de inizione di un sito, dopo aver selezionato il sito nell’elenco. La stessa operazione può essere eseguita facendo direttamente doppio clic sul nome del sito nell’apposito elenco. Dopo aver avviato la modi ica, apparirà la stessa inestra di dialogo utilizzata in fase di creazione e si potranno eseguire tutte le modi iche necessarie, per poi confermare facendo clic su Ok per completare l’operazione. Se si vuol eliminare una de inizione si può fare clic sul pulsante Elimina dopo averla selezionata. Il programma chiederà conferma prima di ultimare l’operazione in quanto la cancellazione sarà irreversibile. Nella inestra che riporta il messaggio si potrà , dunque, fare clic su Si per confermare l’eliminazione o su No per annullarla.

4. G Le de inizioni dei siti possono anche essere esportate in un ile ed importate in un altro sistema. Queste operazioni consentono ad un utente di trasferire le de inizioni su sistemi diversi se lavora su più di un computer, oppure consentono ai membri di un gruppo di lavoro di trasmettersi le de inizioni, avendo la certezza di utilizzare le stesse impostazioni. Queste operazioni si attivano attraverso gli appositi pulsanti (Importa ed Esporta) e non hanno bisogno di precisazioni, in quanto si eseguono con le stesse modalità con cui si eseguono le operazioni di apertura (per quel che riguarda l’importazione) e di salvataggio (per quel che riguarda l’esportazione).

4.3

Le operazioni sui ile in locale

Una volta de inito il sito su cui lavorare, non resta che creare i ile che comporranno il sito stesso e salvarli all’interno della cartella del sito locale o in una sua sottocartella creata per organizzare le risorse del sito. Oltre a creare i documenti, è necessario poter eseguire una serie di operazioni tipiche della gestione dei ile (quali eliminazione, spostamento, copia, modi ica del nome, …). Anche se queste operazioni vengono in genere eseguite tramite le tipiche utility del sistema operativo, è più conveniente eseguirle tramite il pannello ile di Dreamweaver. Infatti, in questo modo, a seguito di operazioni quali lo spostamento dei ile o la modi ica dei nomi, il programma sarà in grado di aggiornare automaticamente i collegamenti fra i ile in modo tale da mantenerne l’integrità .

4.3. Le operazioni sui ile in locale

Creare un nuovo documento Dreamweaver consente di creare nuovi ile in modi diversi. Se si è all’inizio della sessione di lavoro, oppure se si sono chiusi tutti i documenti sui quali si stava lavorando, è possibile utilizzare la schermata di benvenuto. Facendo clic su uno dei comandi della colonna centrale è possibile creare un nuovo documento vuoto basato sul linguaggio scelto.

Figura 4.3: Finestra Nuovo Documento. Nella colonna di sinistra sono indicate le alternative di base per la creazione del nuovo ile, mentre tramite le due colonne più interne, è possibile scegliere linguaggi, modelli e layout.

Un modo più classico per creare un nuovo documento è quello di eseguire il comando File > Nuovo dalla barra dei menu. La inestra di dialogo che appare consente di scegliere diverse soluzioni. E possibile creare documenti o modelli vuoti basati su qualsiasi linguaggio il programma è in grado di gestire, oppure creare documenti basati su modelli esistenti, sia utilizzando modelli, contenuti di esempio e layout che il 53

4. G programma mette a disposizione, sia utilizzando modelli che lo stesso utente ha creato in precedenza. E inoltre possibile creare un nuovo ile anche dal pannello File, facendo clic col tasto destro del mouse sulla cartella nella quale si vuol creare il nuovo ile ed eseguendo il comando Nuovo ile dal menu di scelta rapida. Appena compare la nuova voce nella struttura del sito, si potrà assegnare un nome e modi icare anche l’estensione per indicare il tipo di ile che si vuol creare. Questa procedura ingloba di fatto anche l’operazione di salvataggio, mentre per lavorare sul ile sarà necessario aprirlo facendoci un doppio clic sopra.

Aprire un documento esistente Anche l’apertura di un ile è un’operazione che si può eseguire in modi diversi. Se si è all’inizio della sessione di lavoro, oppure se si sono chiusi tutti i documenti sui quali si stava lavorando, è possibile utilizzare la schermata di benvenuto. Se si vuol aprire uno dei documenti su cui si è lavorato recentemente, è possibile individuarne il nome nella colonna di sinistra della schermata e farci un clic. In alternativa, è possibile attivare il comando Apri dalla schermata stessa e utilizzarlo per individuare e aprire il ile, come si farebbe con un qualsiasi altro programma. All’interno del menu File della barra dei menu, troviamo diversi comandi che si possono utilizzare per aprire un ile. L’alternativa più classica è costituita dal comando Apri, presente in Dreamweaver come in qualsiasi altro programma. Il sottomenu Apri recente contiene i nomi 54

4.3. Le operazioni sui ile in locale degli ultimi ile con i quali si è lavorato nel programma: se il ile che si vuol aprire è presente nell’elenco, è suf iciente farci un clic per completare l’operazione di apertura. E disponibile anche il comando Consulta in Bridge, che avvia il programma di gestione delle risorse Adobe Bridge, tramite il quale è possibile esplorare le risorse del sistema, individuare il ile da aprire e farci un doppio cli per completare l’operazione. Dei questo programma si parlerà più avanti nel testo. Un modo molto rapido per aprire i ile sui quali si vuol lavorare è quello di individuarli nella struttura del sito rappresentata nel pannello File e farci un doppio clic.

Salvare un documento Anche l’operazione di salvataggio si può eseguire in modi diversi in Dreamweaver, e i comandi sono tutti riportati, come avviene comunemente, nel menu File della barra dei menu. I comandi più classici son Salva e Salva con nome: il primo viene utilizzato per salvare le modi iche apportate ad un ile sovrascrivendolo, mentre il secondo consente di accedere alla inestra di dialogo Salva con nome, la quale da la possibilità di scegliere il nome da assegnare al ile e la posizione in cui lo stesso dovrà essere salvato. I due comandi successivi consentono di accelerare le operazioni di salvataggio, agendo su più di un ile. Il comando Salva tutto consente di salvare tutti i ile aperti nella inestra del programma, mentre il comando Salva tutti i ile correlati permette di salvare non soltanto il ile su cui si sta lavorando ma tutti i ile collegati allo stesso, come ad esempio eventuali ile CSS e i ile di script. 55

4. G Un ultimo comando di salvataggio viene utilizzato in particolare per salvare un ile come modello da riutilizzare in seguito per creare documenti basati su di esso. La inestra di dialogo di questo comando è diversa da quella classica e richiede di speci icare il nome che si vuol assegnare al modello, il sito (e non la cartella) in cui lo stesso deve essere posizionato, ed un’eventuale descrizione. Il modello verrà salvato in una cartella del sito che viene generata automaticamente dal programma e che prende il nome di Templates.

Figura 4.4: Finestra di dialogo Salva come modello. Per completare l’operazione è necessario speci icare il nome, il sito ed una eventuale descrizione.

Altre operazioni sui ile Oltre alle operazioni descritte in precedenza, potrebbe essere necessario, durante il ciclo di sviluppo del sito, riorganizzare le risorse del sito stesso e/o eseguire delle modi iche a livello di ile. Grazie al pannello ile possiamo accedere a molte operazioni che comunemente sarebbe eseguite tramite utility del sistema operativo.

4.4. Le operazioni in remoto Facendo clic col tasto destro del mouse su un ile, su una cartella o in un punto vuoto dell’area del pannello, viene fuori un menu di scelta rapida nel quale sono presenti diversi comandi di gestione dei ile, alcuni dei quali organizzati in sottomenu. Alcuni di essi eseguono operazioni in locale, mentre altri consentono di accedere alle operazioni di gestione dei ile in remoto che verranno discusse successivamente in questo capitolo. I comandi più comuni eseguiti in locale sono quelli che consentono di creare un nuovo ile (operazione già descritta in precedenza) o una nuova cartella (comandi situati in alto nel menu) e i comandi situati nel sottomenu Modi ica che consentono di tagliare, copiare, incollare, eliminare, duplicare e rinominare ile e cartelle. Tali comandi possono essere eseguite anche utilizzando gli stessi tasti o combinazioni che si usano in moltissimi altri contesti.

4.4

Le operazioni in remoto

Dreamweaver consente di eseguire trasferimenti di ile fra i siti locale e remoto senza dover ricorrere ad altri programmi, in particolare client FTP. Queste operazioni possono essere eseguite tramite il pannello File, soprattutto se questo viene espanso in modo da visualizzare sia il contenuto del sito locale, sia quello del sito remoto. Alcuni comandi sono accessibili anche dalla inestra Documento. Per eseguire azioni che coinvolgono i ile in remoto, è necessario essere connessi col server. La connessione può essere aperta facendo

4. G

Figura 4.5: Finestra di Dreamweaver con pannello ile espanso. Nella schermata a sinistra viene visualizzato il contenuto del sito remoto, mentre a destra quello del sito locale. I comandi sono situati nella barra degli strumenti in alto

clic sul pulsante Apri la connessione con lâ&#x20AC;&#x2122;host remoto, posto nella barra degli strumenti del pannello File. Se necessario, eĚ&#x20AC; possibile aggiornare la vista del sito remoto facendo clic sul pulsante Aggiorna posto immediatamente accanto. Mentre sono in esecuzione le operazioni che stiamo per descrivere eĚ&#x20AC; possibile continuare a usare il programma, in quanto tali operazioni avvengono in background. Le uniche attivitaĚ&#x20AC; inibite sono quelle che riguardano la modi ica della de inizione del sito e del contenuto dei ile interessati.

4.4. Le operazioni in remoto

Caricare e scaricare ile Quando i ile creati in locale sono completati, possono essere pubblicati, sia se lo sviluppo si è concluso, sia se lo sviluppo è ancora in corso, ma si vuole comunque trasferire sul server i materiali de initi. Per eseguire il caricamento è necessario selezionare i ile e/o le cartelle che si vogliono trasferire, oppure posizionarsi sulla cartella principale del sito locale se si vuol trasferire l’intero sito. A questo punto si può eseguire il comando Carica, facendo clic sull’apposito pulsante nel pannello File, oppure facendo clic sul pulsante Gestione File nella inestra Documento ed eseguendo il comando Carica dal relativo menu. E anche possibile fare clic col tasto destro del mouse sugli oggetti che devono essere trasferiti ed eseguire il comando Carica dal menu di scelta rapida. Quando si trasferisce solo una parte dei ile del sito, Dreamweaver chiede, tramite un’apposita inestra di messaggio, se si intende estendere l’operazione anche ai ile dipendenti da quelli selezionati (come, ad esempio, immagini e oggetti complessi presenti nelle pagine). Facendo clic su Si, si farà in modo che il programma individui automaticamente e sposti anche i ile dipendenti. In modo praticamente identico è possibile anche eseguire il trasferimento inverso, cioè da remoto a locale. Questa operazione può essere utile nel caso si perdano dei ile memorizzati sul proprio sistema, oppure per scaricare i materiali prodotti da altri membri del team di sviluppo e trasferiti sul server. La differenza rispetto all’operazione di caricamento consiste nel fatto che i ile da selezionare sono quelli situati sul sito remoto e che il comando da eseguire è il comando Scarica.

4. G

Le operazioni di deposito e ritiro Se è stata attivata l’opzione Abilita ritiro ile nelle opzioni avanzate del server, è possibile utilizzare i comandi Ritira e Deposita al posto dei comandi Scarica e Carica. Questa soluzione permette ad ogni membro di un team di sviluppo di aprire in modo esclusivo un ile del sito pubblicato in remoto. In questo modo si evita che lo stesso ile possa essere modi icato contemporaneamente da più sviluppatori, causando, in questo modo, una perdita di una parte dei risultati del lavoro del team. I comandi Ritira e Deposita sono eseguibili con modalità simili a quelle dei comandi Scarica e Carica.

Sincronizzare i siti locale e remoto Quando il lavoro di sviluppo del sito prosegue dopo la sua pubblicazione sul server, si rende necessario un aggiornamento del sito remoto per sostituire quei ile che sono stati modi icati. Se il numero di ile modiicati è cospicuo, è possibile evitare di dover individuare tutti i ile da trasferire, eseguendo un’operazione di sincronizzazione.

Figura 4.6: Finestra di dialogo Sincronizza ile. La inestra viene visualizzata quando si avvia l’operazione di sincronizzazione.

Facendo clic sul pulsante Sincronizza con “Sito remoto” nel pannello File, appare una prima inestra di dialogo tramite la quale è possibile de60

4.4. Le operazioni in remoto cidere se sincronizzare l’intero sito o solo i ile selezionati (in locale o in remoto), e se la sincronizzazione deve aggiornare i ile con la versione più recente sia in locale che in remoto, oppure solo in locale o solo in remoto. Nel caso in cui la sincronizzazione avvenga in una sola direzione, si può scegliere di eliminare i ile che non hanno un corrispettivo dall’altra parte. Fatte queste scelte, si può fare clic sul pulsante Anteprima.

Figura 4.7: Finestra Sincronizza. Nella parte inferiore della inestra sono posizionati i comandi che consentono all’utente di decidere quale operazione eseguire su ognuno dei ile riportati nell’elenco.

Se i ile in locale e in remoto sono identici, il programma informa che non è necessaria alcuna sincronizzazione. Altrimenti, appare la inestra di dialogo Sincronizza, che presenta l’elenco dei ile interessati dall’operazione (tramite un’apposita opzione si può decidere di visualizzare tutti i ile), con l’indicazione relativa all’operazione che verrà eseguita su quel ile. Alcuni pulsanti posti in basso nella inestra consen61

4. G tono allâ&#x20AC;&#x2122;utente di decidere quale operazione deve essere eseguita su ogni ile. Date tutte le indicazioni necessarie, eĚ&#x20AC; possibile fare clic su Ok per avviare la sincronizzazione, oppure su Annulla per abbandonare la procedura.

Capitolo 5

Il layout di pagina Al contrario di quanto accadeva agli esordi del web, quando il contenuto delle pagine era costituito da semplice testo lineare, oggi le pagine sono composte da oggetti diversi per natura (testi, immagini, animazioni, video, …) che devono essere organizzati all’interno della pagina in modo adeguato per offrire all’utente inale una esperienza di navigazione positiva. Già nella fase di progetto si dovranno prendere delle decisioni che riguardano il posizionamento dei contenuti all’interno della pagina, e, in fase di implementazione, dovrà essere “costruito” il layout della stessa. Questa operazione consiste nel suddividere l’area della pagina in spazi più piccoli e separati fra di loro, all’interno dei quali verranno distribuiti i contenuti della pagina. In questo modo si può assegnare la giusta posizione ad ognuno di essi e isolarli in modo che non si in luenzino l’un l’altro.

5. I

5.1

Le soluzioni per il layout

La costruzione del layout della pagina deve essere effettuata utilizzando una delle soluzioni che le tecnologie del web mettono a disposizione. Le possibilità sono sostanzialmente 2 e sono identi icate con le espressioni “layout basato su CSS” e “layout basato sulle tabelle”. La prima soluzione consiste nell’inserire all’interno della pagina dei blocchi contenitori che vengono descritti nel codice HTML della pagina da un tag che prende il nome di “div”, abbreviazione che sta per “division”. All’interno di questi blocchi verranno piazzati i diversi contenuti della pagina, in base alla posizione che si vuol attribuire loro. Cosı̀ facendo si sarà de inita la struttura della pagina stessa, mentre l’aspetto che i vari blocchi e i relativi contenuti dovranno assumere sarà de inito tramite delle opportune regole di formattazione raggruppate in fogli di stile. Queste regole dovranno essere de inite in un apposito linguaggio che prende il nome di CSS (Cascading Style Sheets) e del quale si parlerà con maggior dettaglio più avanti in questo volume. La seconda soluzione consiste nell’inserire nella pagina una tabella e, se necessario, delle ulteriori tabelle annidate all’interno delle celle della prima. La struttura di queste tabelle consentirà di suddividere la pagina in spazi separati e le celle costituiranno i contenitori all’interno dei quali si potrà disporre i materiali. Infatti, in HTML come in altre situazioni, le celle di una tabella, che in genere sono utilizzate per organizzare dati, possono ospitare qualsiasi tipo di oggetto che si possa inserire nella pagina. La formattazione sarà de inita tramite appositi tag o attributi del linguaggio HTML, senza ricorrere a speci iche diverse.

5.1. Le soluzioni per il layout Ognuna delle due soluzioni presenta vantaggi e svantaggi, ma, volendo fare un confronto, la bilancia pende decisamente dalla parte del layout basato sui CSS. I vantaggi di questa soluzione sono essenzialmente dovuti proprio all’utilizzo dei fogli di stile e verranno chiariti meglio nell’apposito capitolo di questo volume. Inoltre, l’utilizzo di tabelle complesse e annidate genera un codice estremamente lungo e articolato, quindi ile di dimensioni superiori e che richiedono più tempo per essere scaricati. Per i motivi appena descritti, al giorno d’oggi è praticamente d’obbligo creare layout basati su CSS e, sempre per gli stessi motivi, in questo capitolo ci soffermeremo sull’inserimento dei tag div all’interno delle pagine e nel prossimo parleremo delle regole CSS. In un capitolo successivo parleremo anche di tabelle, ma senza soffermarci sul loro utilizzo per scopi di layout. Nelle precedenti versioni, Dreamweaver metteva a disposizione appositi strumenti che consentivano di inserire e lavorare con le tabelle di layout. Attualmente questi strumenti sono stati rimossi in quanto considerati superati. C’è da fare una precisazione riguardante il layout basato sui CSS: non è obbligatorio inserire dei tag div nella pagina per de inirne il layout. Si possono applicare le regole di stile direttamente sugli elementi di contenuto e decidere in questo modo la posizione che devono assumere nella pagina, oltre che, ovviamente, anche l’aspetto.

Il codice HTML del layout Come accennato poco prima, il tag utilizzato nel codice della pagina web per suddividerla in diversi blocchi è il tag <div> (con relativo tag di 65

5. I chiusura </div>). Per ognuno di essi dovrebbe essere necessario speci icare, nel codice HTML, soltanto un identi icativo (tramite l’attributo id) o, eventualmente, un nome di classe (tramite attributo class). Tutte le caratteristiche che il blocco e i relativi contenuti devono avere saranno de initi tramite regole CSS in blocchi di codice separati. I tag <div> possono anche essere annidati tra loro per creare una struttura gerarchica. Ecco un esempio di codice utilizzato per de inire il layout di una pagina web.

5.2

Inserire un tag div

Come detto in precedenza, in un layout basato sui CSS l’elemento di base è un riquadro che funge da contenitore e che viene de inito “div”. In Dreamweaver ci sono due modi per inserirne uno all’interno della pagina. Il primo consiste nell’eseguire un comando di inserimento che 66

5.2. Inserire un tag div consente di ottenere un nuovo div con caratteristiche generiche nel punto della pagina in cui si effettua l’inserimento. Il secondo metodo consiste nel disegnare un div PA (che sta per Posizionamento Assoluto) come se si stesse lavorando con un programma di gra ica. Per inserire un tag div nella pagina, ci si posiziona nel punto in cui si vuol effettuare l’inserimento e si esegue il comando Inserisci > Oggetto layout > Tag div dalla barra dei menu, oppure si fa clic sul pulsante Inserisci tag div nella categoria Layout del pannello Inserisci. Nella inestra di dialogo che viene fuori si possono speci icare tutte le impostazioni che si ritengono necessarie. E possibile apportare una correzione alla posizione in cui si vuole inserire il div, nel caso non si sia riusciti a posizionarsi con precisione nella vista Progettazione del documento. E inoltre possibile assegnare al div un identi icativo e/o un nome di classe, che serviranno per poter associare all’elemento una o più regole CSS. Assegnare almeno una di queste impostazioni è importante in quanto, altrimenti, non si avrà nessun punto di aggancio per l’associazione di regole di stile. All’interno della inestra è anche presente un pulsante che permette di avviare immediatamente la procedura di creazione di una nuova regola CSS da associare al div che si sta per inserire nella pagina. Tuttavia, se si ha già a disposizione la regola da associare al div oppure se si vuol rimandare la procedura di de inizione delle regole ad un momento successivo, si può anche decidere di completare la procedura di inserimento del div senza preoccuparsi delle regole CSS. Una volta inserito il div, si potrà inserire al suo interno qualsiasi tipo di contenuto, dopo aver cancellato il testo iniziale che Dreamweaver include automaticamente all’interno del blocco. Selezionando il div, tra67

5. I

Figura 5.1: Finestra di dialogo Inserisci tag div. Poche impostazioni relative a speci icazione di ID e/o nome di classe consentono di completare l’operazione di inserimento.

mite un semplice clic sul bordo del riquadro oppure sul selettore dei tag in basso nella inestra documento, si potranno modi icare, tramite il pannello Proprietà , l’identi icativo e il nome di classe assegnati al div, oltre che avviare la procedura di creazione di una nuova regola associata allo stesso. Qualsiasi div inserito all’interno della pagina può essere eliminato facilmente, selezionando l’elemento e premendo il tasto Canc sulla tastiera.

5.3

Disegnare un div PA

Dreamweaver consente di inserire blocchi div all’interno della pagina e di gestirne le impostazioni principali in modo più semplice rispetto a quanto avviene con le procedure descritte in precedenza. Questi div saranno di tipo Posizionamento Assoluto, e quindi la loro posizione all’interno della pagina sarà determinata da apposite coordinate. Per inserire un div del suddetto tipo è necessario eseguire il comando Inserisci > Oggetti layout > Div PA dalla barra dei menu, oppure fare 68

5.3. Disegnare un div PA clic sul pulsante Disegna div PA nella categoria Layout del pannello Inserisci. Una volta attivato lo strumento, si può tracciare il contenitore tramite una azione di trascinamento eseguita a partire dal punto della pagina desiderato (ovviamente in vista Progettazione), esattamente come si farebbe per disegnare un rettangolo in un programma di graica. Se lo si ritiene utile, si possono attivare dei riferimenti visivi quali righelli (eseguendo il comando Visualizza > Righelli > Mostra dalla barra dei menu), griglia (Visualizza > Griglia > Mostra griglia) e guide (che possono essere posizionate nella posizione desiderata trascinandole dai righelli).

Figura 5.2: Esempio di div PA. Nella inestra sono visibili anche i righelli e la griglia, utilizzati come riferimento per il disegno.

A seguito di questa operazione comparirà nella pagina un rettangolo con bordo blu (colore assunto dai div quando sono selezionati). Nel codice della pagina, oltre ad avere il tag div che descrive il blocco appena inserito, si avrà , nel foglio di stile interno alla pagina, anche una nuova regola CSS associata al div stesso. Questa regola avrà una serie di valori prede initi che riguardano il tipo di posizionamento (che è assoluto perché è esattamente questa la natura del blocco inserito), la posizione nella pagina e le dimensioni (che sono state de inite con 69

5. I l’operazione di tracciamento) e la profondità (che de inisce l’ordine di sovrapposizione).

Gestire le proprietà del div dal pannello Proprietà Uno degli aspetti che facilitano il lavoro con i div PA è costituito dal fatto che le principali proprietà del div possono essere gestite tramite il pannello Proprietà , piuttosto che accedendo alla regola CSS tramite il pannello Stili CSS. Infatti, quando un div PA è selezionato, nel pannello Proprietà vengono mostrati una serie di controlli che visualizzano alcuni valori della regola CSS associata al div e ne consentono la modi ica.

Figura 5.3: Proprietà di un div PA. Il fatto che alcune impostazioni di questo elemento possano essere controllate tramite il pannello Proprietà lo rende più semplice da manipolare rispetto ai comuni div.

E possibile assegnare al div un identi icativo e/o un nome di classe ai ini dell’associazione di regole CSS, modi icare la posizione (de inita tramite i parametri Sin e Sup che indicano la posizione dell’elemento rispetto all’angolo in alto a sinistra della pagina o, nel caso di annidamento, del contenitore immediatamente più esterno), le dimensioni (tramite i parametri La e Al), l’ordine di sovrapposizione (dato da un numero intero, indicato nella casella Ordine, che determina in che ordine devono eventualmente sovrapporsi i div, nel senso che div che

5.4. Impostare le proprietà di pagina hanno un valore più elevato saranno più in primo piano nel caso di sovrapposizione) e le impostazioni dello sfondo (Col sfondo o Imm sfondo). E possibile anche indicare la visibilità (tramite il parametro Vis, che consente di stabilire se l’elemento dovrà essere visibile o nascosto), de inire il comportamento del div nel caso di contenuto in eccesso (parametro Rivers) e determinare la quantità di contenuto esterno che dovrà essere nascosta tramite i parametri Sin, Sup, Des e Inf accanto all’etichetta Ris).

Gestire i div tramite il pannello Elementi PA Il pannello Elementi PA è stato descritto nel capitolo dedicato all’interfaccia del programma, al quale rimandiamo per una rivisitazione. Quindi è suf iciente ricordare che, quando si ha a che fare con div PA, questo pannello può essere utile per modi icare il nome dei dvi, ride inirne la posizione che determina l’ordine di sovrapposizione, ed, eventualmente, nascondere uno o più blocchi nel caso in cui le esigenze del lavoro lo richiedano.

5.4

Impostare le proprietà di pagina

Il lavoro di de inizione del layout, dell’organizzazione e dell’aspetto generale della pagina e dei suoi contenuti prevede una seconda fase (oltre a quella di implementazione della gabbia in cui inserire i contenuti) nella quale si de iniscono le regole CSS che consentiranno di conferire la forma desiderata agli elementi presenti nella pagina stessa. 71

5. I Parleremo di fogli di stile nel prossimo capitolo, tuttavia è opportuno segnalare che Dreamweaver mette a disposizione un comando che consente di de inire alcune delle impostazioni principali relative all’aspetto della pagina senza dover creare in modo esplicito una regola CSS. Inoltre, il suddetto comando permette anche di impostare alcune proprietà che non sono legate ai fogli di stile. La funzionalità in questione si chiama Proprietà di pagina e può essere attivata eseguendo il comando Elabora > Proprietà di pagina dalla barra dei menu, oppure facendo clic sul pulsante Proprietà di pagina, visualizzato nel pannello Proprietà quando si è posizionati in un qualsiasi punto della pagina e non sono selezionati oggetti complessi. Nella inestra di dialogo che apparirà le impostazioni saranno suddivise in diverse categorie individuabili in un elenco posto sulla sinistra della inestra. Una volta effettuate le proprie scelte si potrà completare l’operazione facendo clic sul pulsante Ok, oppure annullare le modi iche apportate facendo clic sul pulsante Annulla.

Figura 5.4: Finestra di dialogo Proprietà di pagina. In questa immagine è visualizzata la categoria Aspetto (CSS).

5.4. Impostare le proprietà di pagina

Le proprietà relative al formato I primi 4 gruppi di impostazioni delle proprietà di pagina consentono di de inire il formato di alcuni degli elementi principali della pagina, ed in particolare, 3 di essi consentono di de inire queste impostazioni tramite un foglio di stile interno che verrà creato o modi icato automaticamente dal programma. La categoria Aspetto (CSS) consente di de inire alcune impostazioni relative al carattere (font, stili grassetto e corsivo, dimensioni e colore) e sfondo (colore, immagine e regole di ripetizione). Inoltre è possibile de inire i margini della pagina, che contribuiranno a distanziare il contenuto dal bordo della pagina. La categoria Collegamenti (CSS) consente di impostare l’aspetto dei collegamenti, in particolare i colori da assegnare ai collegamenti in vari contesti (collegamento non visitato, colore di rollover, collegamento visitato e collegamento attivo) e la modalità con cui applicare un eventuale stile di sottolineatura. E inoltre possibile de inire un carattere, uno stile e una dimensione diversi da quelli utilizzati per il testo normale. Tramite la schermata Intestazioni (CSS) è possibile indicare le dimensioni e i colori che dovranno avere i vari titoli presenti all’interno della pagina de initi tramite i tag <h1>, <h2>, … <h6> del linguaggio HTML. Se lo si ritiene necessario, è possibile assegnare ai titoli un carattere e degli stili diversi da quelli scelti per il corpo del testo. Un’ulteriore categoria di impostazioni, de inita Aspetto (HTML), consente di intervenire su alcuni degli aspetti citati in precedenza, ma ri73

5. I correndo ad attributi HTML piuttosto che a regole CSS. Questa soluzione è poco interessante, dal momento che i fogli di stile sono sicuramente la soluzione migliore per decidere del formato dei contenuti.

Le impostazioni di titolo e codi ica Nella categoria Titolo/Codi ica l’impostazione principale è quella che consente di de inire il titolo della pagina che dovrà essere visualizzato, durante la navigazione, nella barra del titolo della inestra del browser. Da questa schermata è possibile modi icare anche il tipo di documento, ossia la versione del linguaggio HTML o XHTML utilizzati per descrivere i contenuti della pagina; anche se questa scelta potrebbe essere già stata effettuata in fase di creazione del nuovo ile, dalla inestra di dialogo Nuovo documento. Anche l’impostazione relativa alla codi ica dei caratteri può essere modi icata, tuttavia la codi ica Unicode (UTF-8), che è quella prede inita, consente di rappresentare senza problemi qualsiasi carattere, anche di alfabeti diversi da quello latino.

L’immagine di ricalco Dreamweaver consente di applicare all’area di lavoro (in vista Progettazione, ovviamente) una immagine di sfondo che non ha niente a che fare con i contenuti, ma che può essere utilizzata come guida durante il lavoro di implementazione del contenuto della pagina. Per questo scopo potrebbe essere utile una immagine realizzata con un programma di gra ica e che rappresenta la struttura della pagina stessa. 74

5.4. Impostare le proprietaĚ&#x20AC; di pagina I controlli che troviamo nella categoria Immagine di ricalco consentono di scegliere lâ&#x20AC;&#x2122;immagine da utilizzare per lo scopo e il livello di trasparenza da applicare ad essa, in modo che non infastidisca eccessivamente durante il lavoro.

Capitolo 6

I fogli di Stile Uno dei principali aspetti riguardanti la creazione di pagine, siti e applicazioni web è la de inizione dell’aspetto che i contenuti devono avere. Esso infatti consente di veicolare in modo più ef icace il messaggio che si vuol trasmettere. Nei primi anni del web la gestione del formato era effettuata tramite lo stesso il linguaggio HTML che si usa per de inire la struttura dei contenuti, utilizzando appositi tag o ricorrendo agli attributi dei tag di struttura. Questa soluzione ha ben presto mostrato i suoi limiti. Anzitutto il linguaggio HTML non era stato progettato per creare formati so isticati; agli inizi questo poteva andar bene visto che su web venivano distribuiti prevalentemente materiali in ambito accademico, mentre per una comunicazione a tutto tondo non è suf iciente. Un altro problema è costituito dal fatto che, per gestire in modo ef iciente l’aspetto dei contenuti, è necessario separare questi due elementi: da una parte si deve lavorare sulla struttura dei documenti, dall’altra parte si devono de inire gli stili che poi dovranno essere applicati ai contenuti, avendo 77

6. I

la possibilità di modi icare le due cose separatamente e di scegliere di applicare gli stessi stili a più elementi, senza dover ride inire più volte le regole di formattazione. La soluzione a queste problematiche è rappresentata dall’utilizzo degli stili, come avviene nei programmi di impaginazione professionale (ad esempio Adobe Indesign) e nei programmi di elaborazione dei testi (fra i quali Microsoft Word). Nel caso delle pagine web, questa soluzione è implementata tramite una serie di regole di stile che vengono de initi CSS, ovvero Cascading Style Sheets (fogli di stile in cascata). I vantaggi offerti dall’utilizzo dei fogli di stile sono numerosi. Essi consentono innanzitutto di separare il codice che descrive i contenuti da quello che descrive l’aspetto che questi assumono, rendendoli indipendenti e facilitandone in questo modo la gestione. Grazie ai fogli di stile esterni è possibile avere un unico gruppo di regole che possono essere applicate a tutte le pagine del sito; in questo modo, le regole devono essere de inite una sola volta e, nel caso in cui si rendano necessarie delle modi iche, è suf iciente intervenire una sola volta per trasformare l’intero sito e garantirsi un aspetto coerente. Anche le prestazioni ne bene iceranno, in quanto le dimensioni del codice HTML si riduce e può essere caricato più velocemente. Un piccolo problema legato all’utilizzo dei CSS è dato dal fatto che alcuni attributi sono interpretati in modo diverso dai vari browser. La conseguenza di ciò è che, visualizzando la stessa pagina in browser diversi, essa apparirà in modo leggermente dissimile. Questo avviene, tuttavia, solo in poche situazioni e questo aspetto negativo è di poco conto rispetto ai vantaggi, anche perché si può risolvere creando diversi fogli di stile da utilizzare a seconda del browser e della piattaforma. 78

6.1. La natura dei CSS La possibilità di creare più fogli di stile per la stessa pagina ha un’altra ripercussione positiva. Oggi i siti web vengono visitati con dispositivi estremamente diversi fra di loro sotto diversi punti di vista, soprattutto per le dimensioni del display. Ne consegue che i contenuti devono essere organizzati in modi differenti per poter essere visualizzati in modo adeguato in tutte queste differenti situazioni. Grazie ai fogli di stile si potranno creare diversi gruppi di regole da utilizzare a seconda delle condizioni di fruizione. Dreamweaver consente di gestire i fogli di stile e le relative regole con strumenti visuali, esattamente come avviene con i documenti HTML. E, comunque, sempre possibile intervenire manualmente sul codice per apportare modi iche più accurate.

6.1

La natura dei CSS

Un foglio di stile (o semplicemente CSS) è costituito da un insieme di regole memorizzate all’interno di un ile ed espresse in un apposito linguaggio che è identi icato dalla stessa sigla. Il signi icato della sigla (Cascading Style Sheets o fogli di stile in cascata) fa riferimento al fatto che gli stili de inite tramite le regole vengono applicate agli elementi a cui si riferiscono in cascata, in base alla loro speci icità . Questo vuol dire che, nel caso in cui lo stesso aspetto venga de inito in regole diverse, quella più speci ica va a sovrascrivere quelle più generali. I fogli di stile possono essere di 3 tipi. Con l’espressione CSS in linea (inline CSS) si indicano le regole implementate nel corpo della pagina

6. I

e strettamente associate all’elemento al quale devono essere applicate. Questa soluzione è poco interessante e praticamente inutilizzata in quanto non garantisce i vantaggi delle altre due. I fogli di stile interni sono implementati nell’intestazione della pagina e le regole in essi de inite agiscono solo sui contenuti della pagina stessa. I fogli di stile esterni sono de initi in appositi ile che hanno estensione .css e possono essere associati a qualsiasi ile HTML al quale si vogliano applicare le relative regole. Da sottolineare che i browser utilizzati per visualizzare le pagine hanno anch’essi delle regole di stile prede inite che applicano agli elementi della pagina quando gli sviluppatori non si sono preoccupati di de inire in modo esplicito alcuni dettagli.

Il codice CSS Cosı̀ come il linguaggio HTML consente di descrivere i contenuti di una pagina in forma testuale, anche il linguaggio CSS consente di fornire direttive sulla formattazione in forma descrizioni espresse nell’apposito linguaggio. queste indicazioni sono organizzate in fogli di stile, i quali sono costituiti da regole, le quali, a loro volta, dalle dichiarazioni dei valori dei vari attributi che si ritiene di voler speci icare. Ogni regola è costituita da un selettore che indica a quali elementi deve essere applicata la regola stessa, e da una serie di dichiarazioni (elencate in un blocco racchiuso fra parentesi graffe) ognuna delle quali deinisce un attributo di stile, assegnandogli un valore. Quello che segue è un esempio di regola CSS. 80

6.2. Creare una nuova regola

body { font - family : Verdana , Geneva , sans - serif ; color : #906; background - color : # FF8 ; margin - right : 2 em; margin - left : 15 em; text - align : justify ; }

6.2

Creare una nuova regola

Per aggiungere una nuova regola CSS ad una pagina web è necessario eseguire il comando Formato > Stili CSS > Nuovo dalla barra dei menu, oppure fare clic sul pulsante Nuova regola CSS dal pannello Stili CSS. Questa operazione può essere eseguita sia mentre si sta lavorando su un pagina web, sia mentre è visualizzato un ile CSS nella inestra Documento.

Le impostazioni generali La prima inestra di dialogo che appare consente di fornire le indicazioni generali sulla regola che si vuol creare. E necessario indicare, tramite una casella a discesa posizionata in alto nella inestra, il tipo di selettore a cui la regola dovrà essere associata. 81

6. I

Figura 6.1: Finestra di dialogo Nuova regola CSS. Tramite questa interfaccia è possibile fornire le prime indicazioni sulla nuova regola che si intende creare.

Esistono tre tipi di selettore di base. Le regole di classe saranno applicate a tutti gli elementi della pagina a cui è stata associata una speci ica classe CSS.Le regole associate ad un ID saranno applicate ad un unico elemento che è contrassegnato da quell’identi icativo. Le regole di tag vengono applicate agli elementi della pagina de initi dal tag speci icato nella regola stessa. Un ulteriore tipo di selettore (Composto) consente di speci icare un selettore più complesso, che consente di combinare in vario modo diversi selettori per creare regole che consentono di controllare in modo più accurato l’aspetto della pagina. Il selettore dovrà essere de inito in base alle speci iche del linguaggio CSS. Nella casella posta poco più in basso dovrà essere de inito il selettore speci ico a cui la regola farà riferimento. Esso potrà essere scelto da un elenco a discesa (soprattutto nel caso di tag, ma anche per le classi e 82

6.2. Creare una nuova regola gli ID), oppure dovrà essere digitato all’interno della casella stessa, soprattutto nel caso di selettori composti. In partenza, il selettore indicato inizialmente dipende da ciò che è selezionato nel documento quando si avvia la procedura di creazione della regola. Nel caso di selettore composto è possibile modi icare il selettore, oltre che manualmente, anche tramite i pulsanti Meno speci ico e Più speci ico per adattarlo alle proprie esigenze. Un’ultima casella a discesa posta in basso nella inestra consente di indicare dove dovrà essere posizionata la regola che si sta per creare. E possibile inserirla nel documento attivo in quel momento (Solo questo documento), oppure inserirlo in uno dei ile CSS collegati alla pagina ed elencati nella casella stessa (nel caso si stia lavorando su un ile HTML e non su un ile CSS), oppure indicare al programma che si vuol creare un nuovo foglio di stile. Fatte queste scelte, è possibile fare clic su Ok per andare avanti con la procedura, oppure fare clic su Annulla per arrestarla. Se si sceglie di creare un CSS in un nuovo documento, subito dopo aver fatto clic su Ok apparirà una inestra di dialogo tramite la quale si potrà salvare il nuovo ile CSS.

De inire gli attributi della regola La seconda inestra di dialogo, che appare dopo aver completato la fase precedente, consente di speci icare gli attributi veri e propri della regola, che verranno applicati ai contenuti a cui la regola verrà associata.

6. I

Figura 6.2: Finestra di de inizione della regola CSS. La stessa inestra di dialogo è utilizzata anche per modi icare la regola. In questa immagine è visualizzata la prima fra le 8 categorie in cui sono suddivisi gli attributi CSS.

Sulla sinistra della inestra è riportato un elenco di categorie in cui sono suddivise le impostazioni della regola. Scegliendo una di queste voci verranno visualizzati accanto i controlli che consentono di agire sugli attributi che appartengono alla categoria scelta. Le categorie in cui sono organizzate le impostazioni sono le seguenti: Tipo: contiene le impostazioni che riguardano la formattazione dei caratteri del testo (la traduzione in italiano è un po’ “infelice”, visto che, in questo contesto, il termine originale inglese “type” dovrebbe signi icare in “testo”). Fra le impostazioni di questa categoria troviamo quelle che riguardano il font (o tipo di carattere), la dimensione, il colore e una serie di stili applicabili tramite controlli diversi. • Sfondo: contiene i controlli che consentono di impostare un colore di sfondo o di scegliere un’immagine di sfondo e di de inirne le impostazioni. 84

6.3. Gestire le regole CSS • Blocco di testo: riporta le impostazioni riguardanti allineamenti e spaziature ed altre impostazioni applicabili ai blocchi di testo. • Elementi di pagina: permette di agire sulle impostazioni riguardanti dimensioni, margini e spaziature degli elementi della pagina, oltre che sulla posizione relativa agli elementi posti nelle vicinanze • Bordo: consente di applicare dei bordi agli elementi della pagina, scegliendone lo stile, lo spessore e il colore. • Elenco: consente di impostare elenchi puntati e numerati de inendone in particolare lo stile. • Posizione: permette di impostare le proprietà che determinano il posizionamento dell’elemento nella pagina (tipo di posizionamento, coordinate, ritaglio, visibilità , …) • Estensioni: consente di applicare interruzioni di pagina e iltri e di modi icare la forma del puntatore del mouse Facendo clic su Ok verrà completata la procedura di creazione della nuova regola, la quale verrà inserita nel documento scelto e sarà visibile e accessibile nel pannello Stili CSS.

6.3

Gestire le regole CSS

Sia che facciano parte di ile esterni collegati alla pagina, sia che siano interne al ile HTML, le regole CSS che sono state create devono essere 85

6. I

“amministrate”, nel senso che durante il lusso di lavoro potrebbe essere necessario eseguire diverse operazioni su di esse. Lo strumento principale al quale si può ricorrere per questo scopo è il pannello Stili CSS, che funge da centro di controllo per la gestione dei fogli di stile. All’interno del suddetto pannello possono essere visualizzate tutte le regole applicate alla pagina oppure solo le impostazioni relative all’elemento selezionato al momento. Nel primo caso sarà possibile lavorare con una struttura ad albero in cui al primo livello troviamo la voce <style>, che si riferisce al CSS interno, e una voce per ogni ile CSS collegato. Espandendo una di queste voci si potrà accedere all’elenco delle regole contenute in quel foglio.

Associare un CSS esterno alla pagina Quando si crea un ile CSS esterno alla pagina, lo si dovrà collegare alla pagina stessa per fare in modo che le regole in esso contenute agiscano sugli elementi della pagina. Per eseguire questo collegamento è necessario che sia attivo il documento al quale si vuol associare il CSS esterno ed eseguire il comando Formato > Stili CSS > Associa foglio di stile, oppure fare clic sul pulsante Associa foglio di stile dal pannello Stili CSS. Nella inestra di dialogo che appare si dovrà scegliere il ile con estensione .css che si vuol collegare alla pagina. E possibile indicare se le regole contenute nel ile dovranno essere importate e diventare regole interne alla pagina, oppure se si vuol eseguire un semplice collegamento al ile scelto. Inoltre è anche possibile (ma non obbligatorio) speciicare i media sui quali dovranno essere utilizzate queste regole, sce86

6.3. Gestire le regole CSS gliendone uno dall’apposito elenco oppure digitando con la tastiera un elenco di voci separate da virgola.

Figura 6.3: Finestra di dialogo che consente di associare un CSS esterno ad una pagina web.

Facendo clic su Ok si procederà col collegamento. Nel caso in cui si sia deciso di effettuare un collegamento, all’interno del codice della pagina, ed in particolare nell’intestazione, verrà inserito un tag <link> che speci icherà il collegamento al ile esterno. Se è stata scelta l’importazione, le regole verranno copiate nell’intestazione della pagina, ed in particolare nel blocco de inito dal tag <style>. In ogni caso, completata l’operazione, le regole CSS avranno effetto sugli elementi della pagina.

Modi icare ed eliminare le regole Per modi icare una regole CSS si può procedere in due modi (escludendo la manipolazione diretta del codice). Si può selezionare la regola nella parte superiore del pannello CSS per visualizzarne, nella parte inferiore, le singole dichiarazioni. A questo punto sarà possibile intervenire sulle singole voci per modi icarne i valori, oppure eliminarle premendo il tasto Canc sulla tastiera dopo aver selezionato la voce, oppure disattivare momentaneamente una voce facendo clic col tasto destro del mouse sulla stessa ed eseguendo il comando Disabilita dal 87

6. I

menu di scelta rapida. Il link Aggiungi proprietà, posto sotto l’elenco degli attributi della regola, permette di aggiungere un nuovo attributo e di impostarne il valore. In alternativa, si può fare doppio clic su una regola CSS per aprire la stessa inestra di dialogo utilizzata per de inire la regola stessa. A questo punto sarà possibile modi icare i valori inseriti in precedenza e/o inserirne di nuovi. Quando si saranno apportate tutte le modi iche volute, si potrà fare clic su Ok per completare la modi ica o su Annulla per abbandonare la procedura. Se si vuol eliminare una intera regola o, addirittura un intero foglio di stile, è suf iciente selezionare la relativa voce nel pannello Stili CSS e premere il tasto Canc sulla tastiera, oppure fare clic sul pulsante Elimina, posto in basso a destra nel pannello.

Capitolo 7

Il testo Nonostante al giorno d’oggi le pagine web siano estremamente ricche di complessi contenuti gra ici quali immagini, animazioni e video, il testo rappresenta ancora il contenuto principale per la sua capacità di veicolare informazioni e per la sua elevata accessibilità . Dreamweaver mette a disposizione diversi strumenti e soluzioni sia per l’inserimento che la gestione di contenuti testuali.

7.1

Il testo in HTML

Il linguaggio HTML è nato soprattutto per consentire la formattazione del testo, ed in particolare di intestazioni, paragra i, elenchi di informazioni di vario tipo, ed altre blocchi che possono caratterizzare il contenuto di un documento. In questo linguaggio troviamo, dunque, numerosi tag che consentono di etichettare gli elementi testuali di una

7. I pagina. Facciamo un breve cenno ad alcuni di essi, in quanto la loro conoscenza può essere utile, anche se non necessaria quando si lavora in modalità visuale. Per una trattazione più ampia si dovrà consultare una guida speci ica sul linguaggio HTML.

I tag di intestazione Una serie di 6 tag, che prendono il nome di <h1>, <h2>, …, <h6> sono utilizzati per marcare i titoli di vario livello che vengono inseriti nelle pagine. Ad essi corrispondono altrettanti tag che vengono utilizzati per chiudere i blocchi di testo che costituiscono un titolo (</h1>, </h2>, …, </h6>). I numeri indicati nei nomi dei tag indicano il livello di importanza del titolo. Per impostazione prede inita, se non vengono modi icate le regole di formattazione, i titoli vengono visualizzati nella pagina in dimensioni decrescenti in base al livello di importanza. Di seguito è riportato un brevissimo frammento di codice in cui sono utilizzati alcuni tag di intestazione.

<h1 >Il testo in HTML </h1 > <h2 >I tag di intestazione </h2 >

7.1. Il testo in HTML

I blocchi di paragrafo Il paragrafo rappresenta l’unità di base in cui è organizzato un lungo contenuto testuale. L’interruzione di un paragrafo causa l’inizio del successivo all’inizio di una nuova riga. Nel linguaggio HTML la coppia di tag <p> </p> consente di indicare l’inizio e la ine di un paragrafo di testo. Per impostazione prede inita, durante la visualizzazione della pagina nel browser, i paragra i sono separati da una spaziatura simile ad una riga vuota. Se si vuol interrompere una riga di testo e forzare l’inizio di una nuova riga, ma senza cambiare paragrafo, è possibile inserire un tag <br /> nel punto del testo in cui si vuol avere l’interruzione. Di seguito è riportato un esempio di utilizzo dei tag appena descritti.

<p> Questo è <p> Questo è Questo è lo continua

un paragrafo di testo </p> un nuovo paragrafo di testo <br /> stesso paragrafo di prima che dopo una interruzione di riga </p>

Gli elenchi In HTML è possibile rappresentare due tipi semplici di elenco: elenchi puntati o non ordinati (racchiusi fra i tag <ul> e </ul>), ed elenchi numerati o ordinati (racchiusi fra i tag <ol> e </ol>). Ad essi se ne aggiunge uno più complesso che è l’elenco di de inizioni, che ha una 91

7. I struttura diversa dai primi due, oltre che utilizzare tag differenti (<dt>, <dd> e relativi tag di chiusura). Per quel che riguarda i primi due, ogni voce dell’elenco è delimitata dai tag <li> e </li>. Ecco un esempio di descrizione di un elenco non ordinato:

<ul > <li >Rosso </li > <li >Verde </li > <li >Blu </li > </ul >

7.2

Inserire testo in una pagina

Quando si utilizza un programma visuale come Dreamweaver, l’inserimento, la modi ica e l’eliminazione si eseguono praticamente allo stesso modo con cui si eseguirebbero nei tipici programmi di elaborazione dei testi, che permettono da tempo di lavorare in modalità visuale (vedi, ad esempio, Microsoft Word). A seguito di questa attività , il programma inserisce il testo nel codice della pagina, aggiungendo automaticamente i tag HTML che servono per etichettare le varie porzioni di testo e conferire loro signi icato. Anche nel caso in cui i tag debbano essere modi icati (per trasformare, ad esempio, un normale paragrafo in un titolo) si possono utilizzare strumenti visuali molto semplici e immediati.

7.2. Inserire testo in una pagina Le differenze più consistenti tra Dreamweaver e Word riguardano le operazioni di importazione, di copia e incolla e di formattazione, che nelle pagine web avviene prevalentemente tramite i CSS.

Copiare e incollare testo Le operazioni di copia e incolla si eseguono in Dreamweaver come in qualsiasi altro programma; tuttavia l’utente ha un ampio controllo sul risultato inale che può gestire in 2 modi. Uno consiste nel modi icare le preferenze del programma relative a queste operazioni, eseguendo il comando Modi ica > Preferenze dalla barra dei menu e attivando la categoria Copia e incolla. In questo modo si modi icheranno in modo più stabile le opzioni che determinano il risultato inale dell’operazione, perlomeno ino a quando le stesse preferenze non verranno modi icate di nuovo. Un altro modo per decidere quale sarà il risultato inale da ottenere è quello di eseguire il comando Incolla Speciale al posto del classico comando Incolla. In questo modo apparirà una inestra di dialogo che permetterà di scegliere quali opzioni applicare. Queste scelte in luiranno solo sul risultato di ciò che si sta facendo sul momento, ma non modi icherà le preferenze in modo permanente. Fra le opzioni del comando Incolla ci sono quelle che consentono di scegliere come incollare il testo. Queste sono le alternative a disposizione: • Solo testo: consente di incollare solo il testo, ignorando la struttura e qualsiasi attributo di formattazione del testo sorgente 93

7. I

Figura 7.1: Finestra di dialogo Incolla speciale. Tramite questa interfaccia è possibile scegliere esattamente gli effetti del relativo comando.

• Testo con struttura (paragra i, elenchi, tabelle, ecc.): incolla il testo con la sua struttura di base, che mantiene i paragra i, le interruzioni di linea, gli elenchi puntati e numerati e le tabelle • Testo con struttura e formattazione di base (grassetto, corsivo): rispetto al precedente tiene in considerazione gli attributi di base di formattazione • Testo con struttura e formattazione completa (grassetto, corsivo, stili): consente di preservare il più possibile l’aspetto del testo incollato, conservando anche le impostazioni applicate tramite gli stili. Altre due opzioni completano il novero delle scelte. L’opzione Mantieni interruzioni di riga consente di scegliere se mantenere le interruzioni che alcuni editor aggiungono alla ine di ogni riga. L’opzione Ottimizza spaziatura tra paragra i di Word consente di decidere come gestire le spaziature fra i paragra i in un testo copiato da Word.

7.3. Gestire il testo dal pannello Proprietà All’interno della stessa inestra di dialogo è presente anche un pulsante che consente di accedere alle impostazioni delle preferenze cui si è accennato poco fa per modi icarle.

Importare testo Oltre a consentire di incollare testo copiato da qualsiasi documento, Dreamweaver consente di importare direttamente da ile l’intero contenuto di un documento di Word, senza dover aprire il ile ed eseguire i classici passaggi della procedura di copia e incolla. E necessario comunque precisare che questa possibilità è presente soltanto nella versione di Dreamweaver per piattaforma Windows. Dopo aver individuato il punto della pagina in cui importare, è necessario eseguire il comando File > Importa > Documento Word dalla barra dei menu. Dalla inestra di dialogo che appare è necessario individuare il ile di Word da cui eseguire l’importazione, esplorando il ile system esattamente come si fa ogni volta che si vuole aprire un ile. Inoltre, tramite la stessa inestra, si potrà scegliere le modalità di importazione in modo molto simile alla procedura di copia e incolla. Una volta fatte le proprie scelte, è suf iciente fare clic su Ok per completare l’operazione, o su Annulla sei si decidesse di rinunciare.

7.3

Gestire il testo dal pannello Proprietà

Per intervenire sulle impostazioni del testo presente all’interno della pagina è possibile utilizzare il pannello Proprietà che, dopo aver sele95

7. I

Figura 7.2: Finestra di dialogo che consente di gestire l’importazione di un documento di Word. Nella parte inferiore della inestra sono posizionati i controlli che permettono di scegliere come trattare il testo importato.

zionato il testo su cui si vuol lavorare, mostra una serie di controlli che visualizzano le impostazioni applicate e consentono di modi icarle. I controlli che consentono di modi icare il testo sono suddivisi in 2 viste, che possono essere alternate facendo clic sugli appositi pulsanti posizionati a sinistra del pannello. Le due viste prendono il nome di HTML e CSS. Nella prima è possibile è possibile assegnare al testo un formato che determinerà il tag col quale sarà formattato il testo nel listato HTML della pagina. E possibile assegnare al testo un ID e una classe CSS che determineranno le regole di stile da applicare al testo, ma è anche possibile applicare direttamente gli effetti grassetto e corsivo, creare elenchi 96

7.3. Gestire il testo dal pannello Proprietà

Figura 7.3: Testo inserito in una pagine web, visualizzato in vista Codice e in vista Progettazione. Il codice riportato a sinistra descrive in HTML ciò che è visualizzato nella vista a destra.

puntati e numerati e controllare il rientro. Inoltre, da questa sezione, è anche possibile de inire un collegamento associato al testo stesso. Nella vista CSS consente di assegnare una regola CSS al testo selezionato e di modi icare le relative impostazioni in diversi modi. Alcune di queste possono essere modi icate direttamente dal pannello Proprietà ; in particolare è possibile modi icare il font, la dimensione, il colore, l’allineamento e applicare gli effetti grassetto e corsivo, ottenendo che le modi iche siano applicate alla regola stessa associata al testo. Tramite due appositi pulsanti è anche possibile aprire la inestra di dialogo che consente di modi icare la regola e visualizzare il pannello Stili CSS nel caso in cui questo non sia al momento visibile (altrimenti il pulsante 97

7. I non sarà attivo).

Figura 7.4: Pannello Proprietà con impostazioni CSS relative al testo. Oltre ad accedere alla regola CSS relativa al testo selezionato, è possibile modi icare alcune impostazioni direttamente dal pannello.

7.4

Cercare e sostituire il testo

Quando si lavora con il testo (non solo in Dreamweaver, ma anche con qualsiasi editor o programma di elaborazione dei testi) si può aver bisogno di cercare una porzione del contenuto presente all’interno di uno o più documenti. In qualche occasione può essere necessario sostituire una parola o un’espressione presente nel testo con una diversa. Queste operazioni sono molto onerose se devono essere eseguite manualmente. Per questo motivo all’interno dei programmi che consentono di manipolare il testo troviamo delle funzionalità che consentono di effettuare ricerche e sostituzioni in modo automatico. Eseguendo in Dreamweaver il comando Modi ica > Cerca e sostituisci dalla barra dei menu, compare una inestra di dialogo tramite la quale è possibile speci icare cosa si sta cercando oppure indicare una sostituzione da effettuare nel testo. Gli elementi principali di questa inestra sono le due caselle nelle quali è possibile speci icare cosa si vuol cercare ed, eventualmente, il testo con cui sostituire ciò che si è trovato.

7.4. Cercare e sostituire il testo

Figura 7.5: Finestra Trova e sostituisci. Le opzioni offerte da questo comando permettono di soddisfare anche esigenze di ricerca piuttosto complesse.

Altri controlli presenti nella inestra consentono all’utente di avere un ampio controllo sull’operazione, in base alle sue esigenze. La casella Cerca in consente di speci icare dove deve essere cercato il testo: una selezione, il documento corrente, tutti i documenti aperti, una speci ica cartella, l’intero sito o alcuni ile del sito preventivamente selezionati. E possibile cercare il testo nel codice della pagina, oppure nel codice, o combinare la ricerca di testo e tag. Questa scelta può essere effettuata tramite la casella Cerca. Le opzioni Maiuscole/minuscole, Ignora spazi vuoti, Trova parola intera e Usa espressione regolare, riportate nella parte bassa della inestra, consentono di utilizzare lo strumento in questione per effettuare delle ricerche più avanzate. Per procedere con la ricerca o la sostituzione, non si deve far altro che fare clic su uno dei pulsanti a destra (Successivo, Cerca tutto, Sostituisci e Sostituisci tutto). Altri utili comandi di ricerca presenti nel menu Modi ica sono rappresentati dalle voci Trova selezione, che consente di avviare una ricerca dell’espressione selezionata al momento nella pagina, e Trova successivo, che consente, soprattutto se eseguito da tastiera tramite il tasto F3 (per velocizzare ulteriormente il processo), di procedere con l’indivi99

7. I duazione delle occorrenze successive dellâ&#x20AC;&#x2122;ultima espressione cercata, senza dover tenere aperta la inestra di dialogo descritta in precedenza.

100

Capitolo 8

Le tabelle Nell’ambito della rappresentazione e dell’impaginazione dei contenuti le tabelle possono essere utilizzate per diversi scopi. Quello più classico riguarda la rappresentazione di dati, obiettivo per il quale in molti tipi di documenti vengono adoperate tabelle più o meno complesse. Anche per le pagine web vale questo discorso. Un altro motivo per il quale si può decidere di ricorrere ad una tabella è legato alla organizzazione generale del contenuto della pagina. Una tabella inserita in modo adeguato all’interno della pagina consente di suddividerne l’intera area da utilizzare per la rappresentazione in aree più piccole (individuate dalle singole celle della tabella stessa) indipendenti fra di loro e allineate in modo tale da dar vita ad una impaginazione ordinata. Questa soluzione è possibile in quanto, in genere, nelle celle delle tabelle è possibile inserire non solo testo ma anche immagini e qualsiasi altro tipo di oggetto. Nei documenti HTML le tabelle hanno rappresentato la prima soluzione per la de inizione del layout di pagina. Tant’è vero che, nelle prece101

8. L denti versioni, Dreamweaver offriva una apposita modalità di gestione delle tabelle che consentiva di inserirle nella pagina come se si stesse disegnando il layout della stessa in un programma di gra ica. Oggi questa possibilità non esiste più , in quanto l’uso delle tabelle di layout ha diversi svantaggi rispetto alla soluzione più moderna e ampiamente utilizzata del layout basato sui CSS.

8.1

Le tabelle in HTML

La struttura di una tabella può essere descritta in HTML tramite 3 o 4 tag, a seconda che la tabella abbia delle celle di intestazione oppure no. Il tag principale, che apre la descrizione della tabella, è il tag <table>, mentre il relativo tag di chiusura (</table>) indica la ine della descrizione. Ogni riga della tabella è racchiusa dai tag <tr> e </tr>, mentre il contenuto delle singole celle è delimitato dai tag <td> e </td> se si tratta di una cella di dati, oppure <th> e </th> se si tratta di una cella di intestazione. I tag appena citati possono essere accompagnati da attributi che consentono di de inire alcune caratteristiche della tabella: lo spessore dei bordi può essere de inito tramite l’attributo border, i margini interni alle celle e le spaziature fra di esse possono essere de initi rispettivamente tramite gli attributi cellpadding e cellspacing, etc. Queste ed altre caratteristiche che hanno a che fare con l’aspetto della tabella e delle celle possono, comunque, essere gestite tramite i fogli di stile. Ecco un piccolo esempio di tabella descritta in linguaggio HTML:

102

8.2. Inserire una tabella

<table > <tr > <th > Cognome </th > <th >Nome </th > </tr > <tr > <td >Rossi </td > <td >Mario </td > </tr > <tr > <td > Bianchi </td > <td >Carlo </td > </tr > </ table >

8.2

Inserire una tabella

Per inserire una tabella in un qualsiasi punto di una pagina web, eĚ&#x20AC; suficiente posizionarsi nel punto desiderato ed eseguire il comando Inserisci > Tabella dalla barra dei menu oppure il comando Tabella presente sia nella categoria Comuni, sia nella categoria Layout del pannello Inserisci. A questo punto appare una inestra di dialogo che consente di speci icare alcune caratteristiche che la tabella dovraĚ&#x20AC; avere. Lâ&#x20AC;&#x2122;informazione principale riguarda il numero di righe e di colonne iniziali; in seguito, volendo se ne potranno aggiungere altre o eliminare quel103

8. L le che non servono. E possibile indicare anche altre impostazioni che non sono determinanti ai ini del completamento dell’operazione di inserimento: la larghezza della tabella (che può essere espressa in pixel o percentuale rispetto alla larghezza dell’elemento che la contiene), lo spessore del bordo, il margine e le spaziature delle celle (queste ultime 3 impostazioni sono tutte espresse in pixel). E possibile indicare se la tabella ha delle celle di intestazione oppure no. Queste celle sono quelle che contengono i nomi delle righe e/o delle colonne della tabella e che verranno descritte, nel codice HTML, tramite un apposito tag, diverso da quello usato per le celle dei dati. Questo consentirà di formattare tali celle in modo adeguato, creando stili CSS speci ici, e di migliorare l’accessibilità della tabella stessa, grazie ad una più adeguata lettura da parte degli screen reader (programmi utilizzati dagli utenti non vedenti per avere una lettura del contenuto dello schermo e dei documenti). Anche le ultime due impostazioni che troviamo nella inestra Inserisci tabella riguardano l’accessibilità , in quanto sono oggetto di lettura da parte degli screen reader. E possibile speci icare una Didascalia, che verrà anche posizionata nella pagina in prossimità della tabella (un ulteriore controllo consente di stabilirne la posizione), e un Riepilogo, che rappresenta una descrizione della tabella, ad uso esclusivo degli screen reader (infatti essa non sarà visibile nella pagina). Una volta inserite tutte le impostazioni nella inestra è possibile fare clic su Ok per completare l’operazione di inserimento, oppure fare clic su Annulla se si vuol interrompere la procedura. La tabella inserita sarà visibile nella pagina, e, quando essa è selezionata, saranno visibili alcuni riferimenti visivi come i l bordo esterno con le maniglie e 104

8.3. Importare dati da altri documenti

Figura 8.1: Finestra di dialogo relativa allâ&#x20AC;&#x2122;operazione di inserimento di una tabella.

le indicazioni relative alla larghezza dellâ&#x20AC;&#x2122;intera tabella e delle singole colonne.

8.3

Importare dati da altri documenti

Come avviene per il testo, anche le tabelle possono essere inserite in una pagina web utilizzando le operazioni di copia e incolla oppure un comando di importazione.

105

8. L

Figura 8.2: Tabella inserita in una pagina web. Nell’immagine visualizzata la vista Codice sulla sinistra e la vista Progettazione sulla destra. Nella prima è evidenziato il codice HTML che descrive la tabella, mentre sulla destra sono evidenti i bordi, le maniglie, le linee di livello e le dimensioni relative alle larghezze.

L’operazione di copia e incolla si usa con le tabelle nello stesso modo in cui si usa con il testo. E possibile copiare una tabella o una porzione di tabella da documenti, fogli di calcolo e pagine web, ed incollarle nel punto della pagina desiderato. Anche in questo caso, il comando Incolla speciale da la possibilità di scegliere le opzioni con cui incollare. Dreamweaver permette di importare direttamente i dati in una pagina web (senza dover inserire preventivamente una tabella, cioè senza dover eseguire l’operazione descritta nel paragrafo precedente)) sia da ile di testo, sia da fogli di calcolo di Excel (solo per gli utenti Windows). Si tratta di due opzioni molto importanti visto che molte piattaforme di elaborazione dei dati sono in grado di esportarli in forma di testo e che in molti contesti si usa il programma Excel per rappresentare dati di varia natura. Se si vuol importare dati da ile di testo è necessario eseguire il comando File > Importa > Dati di tabella dalla barra dei menu. Nella inestra di dialogo che appare è necessario quanto meno indicare qual è il i106

8.3. Importare dati da altri documenti le da cui si vuol eseguire l’importazione e come i dati sono delimitati all’interno di esso. E inoltre possibile speci icare come gestire la larghezza della tabella (adattando ai dati o impostandone una misura), quali dimensioni dovranno avere i bordi, i margini e le spaziature, e quale formattazione applicare alle celle della prima riga. Una volta fatte le proprie scelte si può fare clic su Ok per confermare l’inserimento o su Annulla per interrompere la procedura.

Figura 8.3: Finestra utilizzata per importare dati da ile di testo. Le impostazioni riguardano sia il ile da importare, sia l’aspetto della tabella che verrà creata nella pagina.

Se si vogliono importare dati da un documento di Excel, è necessario eseguire il comando File > Importa > Documento Excel dalla barra dei menu. Nella inestra di dialogo che appare è possibile scegliere il ile da cui eseguire l’importazione e indicare la modalità di formattazione esattamente come quando si importa testo da un documento di Word (tranne che per l’opzione Ottimizza spaziatura tra i paragra i di Word, che risulta disabilitata). Una volta eseguiti questi passaggi, si può fare clic su Ok per confermare l’inserimento o su Annulla per interrompere la procedura.

107

8. L

8.4

Modi icare le tabelle

Le tabelle inserite all’interno delle pagine web potrebbero essere modi icate sotto diversi aspetti dopo che sono state inserite. Se la modiica dei dati può avvenire tramite semplice digitazione, per modi icare la struttura o l’aspetto della tabella si utilizzano comandi presenti all’interno di menù e il pannello Proprietà che consente di gestire molte delle impostazioni relative ai contenuti delle pagine.

Formattare la tabella dal pannello Proprietà Quando si seleziona una intera tabella (facendo clic su un punto del bordo esterno o utilizzando il selettore di tag nella inestra Documento) nel pannello Proprietà vengono visualizzati i controlli che consentono di intervenire sulle impostazioni globali della tabella stessa. E possibile assegnare alla tabella un identi icativo per de inire regole CSS o funzioni Javascript che facciano riferimento ad essa. I controlli accanto alla casella dell’identi icativo consentono di modi icare le impostazioni che erano state de inite in fase di creazione (numero di righe e di colonne, larghezza della tabella, dimensioni di margini, spaziature e bordi. Inoltre è possibile scegliere l’allineamento della tabella nella pagina e assegnare alla tabella una classe CSS per l’applicazione di regole di stile. Nella parte inferiore del pannello sono presenti alcuni pulsanti che consentono di annullare le impostazioni di larghezza delle colonne e altezza delle righe assegnati alla tabella e convertire le dimensioni del108

8.4. Modi icare le tabelle

Figura 8.4: Proprietà di una tabella. Oltre ai controlli associati a proprietà, nella parte inferiore del pannello sono presenti anche alcuni controlli che consentono di eseguire comandi.

le larghezze in percentuale o in pixel. Un ulteriore controllo consente di speci icare un eventuale ile sorgente di Fireworks che consente di modi icare la tabella utilizzando il documento di origine.

Formattare le singole celle dal pannello Proprietà Quando si è posizionati in una cella, o quando vengono selezionate più celle della tabella, il pannello proprietà mostra i controlli necessari per formattare le celle e il loro contenuto. La parte superiore del pannello risulterà essere identica a quella visualizzata quando si seleziona un testo, mentre nella metà inferiore troviamo gli strumenti che ci consentono di agire nello speci ico sulle impostazioni delle celle. Partendo dalla sinistra del pannello i primi controlli che si incontrano sono 2 piccoli pulsanti che consentono di unire e dividere le celle. Il primo pulsante si attiva quando si selezionano più celle, mentre il secondo è attivo quando si è posizionati all’interno di una singola cella. Proseguendo verso destra nel pannello Proprietà troviamo due caselle a discesa che consentono di modi icare le impostazioni di allineamento orizzontale e verticale, due caselle di testo nelle quali si può inserire la misura di larghezza e altezza delle celle selezionate, due caselle di controllo che consentono di abilitare il testo a capo e di impostare 109

8. L le celle selezionate come celle di intestazione, e, in ine, i controlli che consentono di impostare il colore di sfondo delle celle.

Figura 8.5: Impostazioni relative a proprietà di celle. I controlli in alto sono associati alle proprietà del testo, mentre nella parte inferiore sono riportati i controlli associati alle proprietà delle celle.

I principali comandi di modi ica della tabella Oltre a formattare una tabella, potrebbe essere necessario modi icarne la struttura. All’interno del menu Elabora della barra dei menu c’è un sottomenu che prende il nome di Tabella e nel quale sono collocati una serie di comandi che consentono di selezionare una tabella, unire e dividere celle, aggiungere ed eliminare righe e colonne, aumentare o diminuire l’estensione di righe e colonne (aumentando l’estensione si fa in modo che una cella venga unita a quella accanto o quella in basso), annullare la larghezza di una colonna e l’altezza di una riga e convertire le misure di larghezze e altezze in percentuale o in pixel. Alcuni dei comandi elencati possono essere eseguiti anche facendo clic col tasto destro del mouse su una cella o un gruppo di celle selezionate e spostando il puntatore sulla voce Tabella che si trova in testa al menu di scelta rapida.

110

8.4. Modi icare le tabelle

La modalità Tabelle espanse Dreamweaver consente di visualizzare le tabelle in una modalità che agevola la selezione degli elementi presenti all’interno delle celle e il posizionamento all’interno della cella stessa. Tale modalità prende il nome di Tabelle espanse e, quando viene attivata, causa un aumento momentaneo delle spaziature, dei margini e dello spessore dei bordi. Le modi iche apportate non sono comunque reali, ma incidono solo sull’aspetto della tabella visualizzata dal programma. E possibile attivare tale modalità di visualizzazione eseguendo il comando Visualizza > Modalità tabella > Modalità Tabelle espanse dalla barra dei menu, oppure facendo clic sul pulsante Espanso nella scheda Layout del pannello Inserisci. Per uscire da questa basta eseguire il comando Visualizza > Modalità tabella > Modalità Standard dalla barra dei menu, oppure fare clic sul pulsante Standard nella scheda Layout del pannello Inserisci.

Figura 8.6: Tabella visualizzata in modalità espansa. Rispetto alla modalità normale, sono aumentati lo spessore dei bordi, i margini e le spaziature.

111

Capitolo 9

Le immagini Nelle pagine web, le immagini sono importanti quanto il testo. Oltretutto, esse attirano l’attenzione prima di qualsiasi altra cosa. Possono essere utilizzate per de inire l’aspetto visivo della pagina (in alcune pagine i pulsanti, le barre di navigazione e altri elementi della struttura della pagina sono de initi attraverso un’immagine), per veicolare una informazione visiva riferita, ad esempio, al contenuto di un articolo, per rappresentare un prodotto, o un servizio, o un’azienda (attraverso, per esempio, un logo), e per altri scopi ancora.

9.1

I formati gra ici per il web

I contenuti gra ici possono essere rappresentati in digitale e memorizzati in moltissimi formati di ile che si differenziano tra di loro sotto molti aspetti. Tuttavia, anche se il mondo dell’informatica e dell’informazione digitale ci offre numerose alternative, quando vogliamo inse113

9. L rire un’immagine all’interno di una pagina web dobbiamo limitarci all’utilizzo di pochissimi formati che sono supportati dai browser. Tali formati hanno caratteristiche tali da rendere ottimale la rappresentazione del contenuto gra ico per l’utilizzo su web. I formati in questione sono i seguenti: GIF

Graphics Interchange Format. La caratteristica principale di questo formato è il numero di colori rappresentabili, limitato a 256. A causa di questa caratteristica, questo formato è utilizzato per illustrazioni semplici, costituite da ampie aree di colore uniforme, senza sfumature e con un numero limitato di colori. Tale formato non è invece adatto per la rappresentazione di contenuti fotogra ici e di qualsiasi immagine in cui il numero di colori è molto elevato e caratterizzate da passaggi sfumati fra un colore e un altro. Altre caratteristiche interessanti del formato GIF sono la possibilità di de inire sfondi trasparenti e la possibilità di rappresentare semplici animazioni.

JPEG

Joint Photographic Experts Group. Questo formato non ha lo stesso limite del precedente per quel che riguarda il numero di colori rappresentabili, in quanto supporta il colore a 24 bit. Una caratteristica importante quando si esportano immagini in questo formato è data dalla possibilità di scegliere l’entità della compressione per ottenere ile di dimensioni molto ridotte, anche se a scapito di un po’ di qualità . E particolarmente adatto alla rappresentazione di immagini fotogra iche e, in generale, di immagini a tono continuo, caratterizzate da passaggi di colore sfumati.

114

9.2. Le immagini in HTML PNG

9.2

Portable Network Graphics. Il formato PNG ha diverse sottoversioni. Quella indicata con la sigla PNG-8 ha caratteristiche praticamente identiche a quelle del formato GIF. Una delle pochissime differenze consiste nel fatto che PNG non fornisce supporto alle animazioni. Il formato PNG-24 ha invece caratteristiche più simili al formato JPEG, anche se, nel formato PNG, non troviamo un algoritmo di compressione variabile che permette di scegliere il grado di compressione e, quindi, la qualità dell’immagine e la dimensione del ile.

Le immagini in HTML

Siccome un documento HTML è semplicemente un ile di testo, esso non può inglobare al suo interno un’immagine, in quanto questo elemento non può essere descritto in forma testuale. Nel ile HTML saranno presenti soltanto le indicazioni necessarie per indicare al browser cosa dovrà riprodurre all’interno della pagina. Per indicare la presenza di un’immagine in un punto della pagina è suf iciente un unico marcatore HTML: il tag <img>. Esso deve essere accompagnato da alcuni attributi importanti per completare la descrizione dell’immagine. Il principale fra questi è l’attributo src, che indica il percorso del ile sorgente dell’immagine che verrà visualizzata nella pagina. Un esempio di codice che descrive un’immagine in un listato HTML è costituito dalla riga seguente: 115

9. L

9.3

Inserire una immagine

In Dreamweaver, è possibile inserire una immagine in una pagina web in diversi modi. Una prima soluzione è quella di eseguire un apposito comando che si trova nel menù Inserisci e nel pannello Inserisci. Se si decide di adottare questa soluzione, è necessario, prima di tutto, posizionarsi nel punto della pagina in cui si vuole inserire l’immagine. A questo punto, è possibile eseguire il comando Inserisci > Immagine dalla barra dei menù , oppure fare clic sul pulsante Immagine nel gruppo Comune del pannello Inserisci. La inestra di dialogo che appare consentirà di scegliere il ile corrispondente all’immagine da inserire. Una alternativa a questo modo di procedere è costituita dalla possibilità di trascinare l’immagine dal pannello File o dal pannello Risorse direttamente nel punto della pagina in cui si vuole posizionare l’oggetto. Prima che l’operazione di inserimento dell’immagine sia portata a termine il programma mostra, dopo i passaggi descritti in precedenza, un’ulteriore inestra di dialogo con la quale chiede all’utente di impostare i tag degli attributi di accessibilità . Essi non devono essere speciicati obbligatoriamente, quindi si può completare il passaggio facendo clic su Ok dopo aver inserito i valori, oppure facendo clic su An116

9.3. Inserire una immagine

Figura 9.1: Finestra di dialogo relativa al comando Inserisci Immagine. Oltre a scegliere il ile la inestra permette di indicare il tipo di percorso speci icato nel codice della pagina.

nulla; l’immagine verrà inserita comunque nella pagina. Gli attributi di accessibilità sono i seguenti: • Testo alternativo: si tratta di un testo breve che verrà letto dagli screen reader e che rappresenta una breve descrizione dell’immagine • Descrizione lunga: contiene un percorso che descrive la posizione di un ile esterno che contiene una descrizione lunga dell’immagine Una volta che saranno stati completati i passaggi appena descritti, l’immagine sarà visibile in vista Progettazione nel punto della pagina in cui è stata inserita.

117

9. L

Figura 9.2: Finestra di dialogo che consente di de inire i tag di accessibilità relativi ad un’immagine.

9.4

Le proprietà della immagini

Quando viene selezionata una immagine all’interno della pagina aperta in Dreamweaver, il programma mostra, nel pannello Proprietà , i controlli necessari per poter intervenire sulle proprietà dell’immagine stessa o anche solo per leggerne i valori. Esaminiamo le principali fra queste proprietà . Nella casella Orig. (che sta per Origine)è riportato il percorso che descrive la posizione del ile immagine. E possibile modi icare tale percorso (e quindi sostituire l’immagine con un’altra) digitando direttamente all’interno della casella, oppure facendo clic sul pulsante Cerca ile e utilizzando la inestra di dialogo che appare, oppure trascinando il “mirino” Scegli ile sul ile da inserire dopo averlo individuato all’interno del pannello File o del pannello Risorse. Un’altra proprietà simile, denominata Originale, consente di indicare a Dreamweaver qual è il documento da cui è stata ricavata l’immagine inserita nella pagina, in modo da poterne avviare la modi ica facendo clic sul pulsante Modi ica presente all’interno del pannello Proprietà (vedi paragrafo successivo)

118

9.4. Le proprietà della immagini Assegnando un ID (Identi icativo) all’immagine, è possibile creare script o regole CSS che facciano riferimento all’immagine stessa. E possibile de inire i valori di larghezza e altezza che l’immagine dovrà assumere nella pagina, utilizzando le caselle La e Al. Appena l’immagine viene inserita, i valori di tali proprietà corrispondono alle dimensioni originali dell’immagine. E bene notare che, se si modi icano in questo modo le dimensioni alle quali il browser dovrà visualizzare l’immagine, si rischia di ottenere una visualizzazione di scarsa qualità . Inoltre, riducendo le dimensioni in questo modo, si costringe il sistema a scaricare un ile di dimensioni superiori a quelle necessarie, aumentando inutilmente i tempi di download. Se si vuol ridurre le dimensioni dell’immagine è preferibile eseguire questa operazione in un programma di gra ica. Le proprietà Spazio V e Spazio O consentono di impostare la distanza verticale e orizzontale che deve esserci attorno all’immagine per distanziarla dagli altri elementi della pagina. Le proprietà Collegamento e Destinazione consentono di impostare un collegamento associato all’immagine stessa. L’argomento relativo alla creazione di collegamenti verrà discusso in un apposito capitolo. E possibile creare un bordo attorno all’immagine inserendo nella casella Bordo lo spessore di quest’ultimo, espresso in pixel. Il controllo Allinea consente di de inire il modo con cui l’immagine deve essere allineata con gli elementi accanto. Le proprietà de inite in questo modo vengono tradotte in attributi HTML che verranno associati al tag che descrive l’immagine nel codice della 119

9. L pagina. In alternativa, è è possibile utilizzare i fogli di stile e relative regole, che consentono di controllare un maggior numero di caratteristiche dell’oggetto, oltre ad avere gli altri numerosi vantaggi descritti nel capitolo ad essi dedicato.

Figura 9.3: Proprietà di un oggetto immagine. Nel pannello sono presenti sia i controlli che consentono di agire sulle impostazioni, sia i pulsanti che consentono di eseguire un’operazione sull’oggetto.

I comandi di modi ica nel pannello Proprietà Quando un’immagine è selezionata nell’area di lavoro di Dreamweaver, il pannello proprietà presenta anche alcuni pulsanti che consentono di apportare modi iche all’immagine stessa. Il primo comando prende il nome di Modi ica e consente di aprire una sessione di lavoro di modi ica dell’immagine in un programma di graica che in genere è Photoshop o Fireworks. E possibile scegliere il programma da impostare come editor modi icando le preferenze di Dreamweaver nella categoria Tipi di ile/Editor. Il comando Modi ica impostazioni immagine consente di accedere ad una inestra di dialogo con la quale è possibile ottimizzare il ile dell’immagine. La inestra è composta da 2 schede: nella prima (Opzioni) è possibile modi icare il formato del ile e regolare le relative impostazioni; nella seconda (File) è possibile modi icare le dimensioni dell’immagine e impostare l’area da esportare. 120

9.4. Le proprietà della immagini

Figura 9.4: Finestra di dialogo Anteprima immagine, attivata tramite il comando Modi ica impostazioni immagine. Tramite questa inestra è possibile ottimizzare l’immagine dal punto di vista della qualità e delle dimensioni e salvare un ile con le nuove impostazioni.

Il comando Ritaglia consente di effettuare un ritaglio dell’immagine per far rimanere nella pagina solo una parte di essa. Dopo aver fatto clic sul pulsante e aver preso visione dell’avvertimento circa la permanenza dell’effetto ottenuto, si possono utilizzare le maniglie che appaiono per impostare il ritaglio e premere il tasto Invio per confermare (o Esc per annullare). Il comando Ride inisci consente di ricampionare un’immagine per migliorarne la qualità nel caso in cui la stessa sia stata ridimensionata. Il comando Luminosità e contrasto consente di regolare le relative impostazioni. Dopo aver fatto clic sul pulsante e aver preso visione del121

9. L l’avvertimento circa la permanenza dell’effetto ottenuto, è possibile regolare luminosità e contrasto nella inestra di dialogo che appare, tramite gli appositi cursori e utilizzare i pulsanti Ok e Annulla per confermare o annullare la modi ica.

Figura 9.5: Finestra di dialogo che consente di modi icare la luminosità e il contrasto di un’immagine in modo semplice e simile a quello di molti programmi di elaborazione delle immagini.

Il comando Precisione consente di regolare il contrasto dei contorni. Dopo aver fatto clic sul pulsante e aver preso visione dell’avvertimento circa la permanenza dell’effetto ottenuto, è possibile regolare la precisione tramite l’apposito cursore nella inestra di dialogo che appare e utilizzare i pulsanti Ok e Annulla per confermare o annullare la modi ica.

Figura 9.6: Finestra di dialogo che consente di aumentare la precisione dell’immagine, consentendo di rendere più evidente la visualizzazione dei dettagli.

Le operazioni descritte in precedenza vengono, in genere, eseguite utilizzando un software di elaborazione delle immagini, in modo da poter 122

9.5. Altri comandi di inserimento di oggetti immagine fruire di strumenti adeguati alla modi ica dell’immagine stessa e più potenti e so isticati di quelli messi a disposizione da Dreamweaver, il quale, come già detto in altre occasioni, non è un programma di graica. Tuttavia, se lo si desidera, è possibile intervenire sull’immagine utilizzando gli strumenti di Dreamweaver per velocizzare l’operazione di modi ica. Nel pannello Proprietà sono presenti anche dei controlli che consentono di creare una mappa immagine. Questi verranno discussi nel capitolo dedicato ai collegamenti.

9.5

Altri comandi di inserimento di oggetti immagine

Dreamweaver mette a disposizione altri comandi di inserimento di oggetti gra ici, che consentono di gestire alcune situazioni più complesse di quelle più classiche descritte in precedenza.

Inserire un’immagine di rollover Dreamweaver consente di inserire immagini alle quali è associato automaticamente un effetto di rollover, comportamento in base al quale l’immagine visualizzata nella pagina cambia quando il puntatore del mouse si trova sull’area dell’oggetto. Per effettuare l’inserimento è necessario è necessario posizionarsi nel punto della pagina nel quale si vuol effettuare l’inserimento ed esegui123

9. L re il comando Inserisci > Oggetto immagine > Immagine di rollover dalla barra dei menu, oppure il comandi Immagine di rollover nel sottomenu Oggetto immagine nella categoria Comuni del pannello Inserisci. Nella inestra di dialogo che appare si dovranno speci icare, come minimo, l’immagine principale e quella di scambio (si dovrà anche decidere se, durante il caricamento della pagina, dovrà essere precaricata anche quest’ultima per velocizzare l’effetto di rollover sin dalla prima visualizzazione). E possibile inoltre associare all’immagine un testo alternativo, che ha le solite funzioni di accessibilità , e un percorso (URL) se si desidera utilizzare l’immagine come collegamento. Facendo clic sul pulsante Ok è possibile completare l’inserimento. Dopo l’inserimento sarà possibile modi icarne le impostazioni tramite il pannello Proprietà , esattamente come avviene per qualsiasi altra immagine.

Figura 9.7: Finestra di dialogo che utilizzata per l’inserimento di immagini di rollover.

Inserire oggetti segnaposto Quando si ha la necessità di inserire un’immagine nella pagina, ma non si ha a disposizione il ile, è possibile inserire un segnaposto che ha la 124

9.5. Altri comandi di inserimento di oggetti immagine natura e le caratteristiche di un oggetto gra ico e potrà essere sostituito in seguito con l’immagine inale. Per inserire un segnaposto immagine è necessario è necessario posizionarsi nel punto della pagina nel quale si vuol effettuare l’inserimento ed eseguire il comando Inserisci > Oggetto immagine > Segnaposto immagine dalla barra dei menu, oppure il comando Segnaposto immagine del sottomenu Oggetto immagine nella categoria Comuni del pannello Inserisci. Nella inestra di dialogo che appare è possibile assegnare un nome all’oggetto, de inirne dimensioni e colore di sfondo e associargli un testo alternativo. Si può completare l’operazione facendo clic sul pulsante Ok.

Figura 9.8: Finestra di dialogo utilizzata per l’inserimento di un segnaposto immagine.

In qualsiasi momento sarà possibile sostituire il segnaposto con l’immagine di proprio interesse, impostando la proprietà Origine nel pannello Proprietà . Inoltre è possibile avviare la creazione dell’immagine in Fireworks, facendo clic sul pulsante Crea.

125

9. L

Figura 9.9: Segnaposto immagine inserito all’interno di una pagina web. Al centro del segnaposto sono riportate le informazioni relative al nome e alle dimensioni assegnate.

Inserire codice HTML di Fireworks Il programma di gra ica Adobe Fireworks (del quale si dirà qualcosa in più in un prossimo capitolo) è in grado di esportare, oltre che singoli oggetti gra ici, anche il codice HTML che consente di descrivere la struttura di elementi gra ici complessi come barre di navigazione o addirittura un’intera pagina web. Dreamweaver consente l’inserimento di tale codice, al ine di non dover ride inire da zero la struttura HTML degli elementi de initi in Fireworks, a meno che non si ritenga che il codice esportato da quest’ultimo sia inadeguato. Per inserire codice HTML di Fireworks in una pagina, è necessario posizionarsi nel punto della pagina nel quale si vuol effettuare l’inserimento ed eseguire il comando Inserisci > Oggetto immagine > HTML di Fireworks dalla barra dei menu, oppure il comando HTML di Fireworks del sottomenu Oggetto immagine nella categoria Comuni del pannello Inserisci. Nella inestra di dialogo che appare è suf iciente indicare il ile da cui si vuol impostare il codice, scrivendone il percorso nella ca126

9.5. Altri comandi di inserimento di oggetti immagine sella File HTML di Fireworks, oppure utilizzando una apposita inestra di dialogo ce si può attivare facendo clic sul pulsante Sfoglia. Inoltre, è possibile, dopo l’inserimento, eliminare automaticamente il ile che contiene il codice, spuntando la relativa opzione.

Figura 9.10: Finestra di dialogo utilizzata per inserire codice HTML generato ed esportato da Fireworks.

A seguito di questa operazione, si potrà veri icare, in vista Progettazione, che nella pagina è stata inserita una complessa struttura, consistente in genere in una o più tabelle e tutte le immagini che caratterizzavano il contenuto gra ico che si è deciso di importare.

127

Capitolo 10

I collegamenti Le pagine e i siti web, anche quelli più statici, non sono semplicemente un insiemi di contenuti da consultare tramite un browser. Alcuni contenuti presenti nelle pagine vengono utilizzati come base per de inire una articolata struttura di navigazione che consente all’utente di scegliere la sequenza di navigazione, senza essere vincolata dalla tipica organizzazione lineare che caratterizza i documenti stampati. L’elemento di base di questa struttura di navigazione è il collegamento ipertestuale, detto anche link. Esso è costituito da un percorso che viene associato ad un elemento di contenuto presente all’interno della pagina (un testo, un’immagine, …) e che rappresenta l’indirizzo di rete di una risorsa del web che può essere richiamata facendo clic con il mouse sull’elemento che funge da collegamento. Tale indirizzo viene indicato anche con la sigla URL che sta per Uniform Resource Locator.

129

10. I

10.1

Nozioni di base sui collegamenti

Prima di fare una rassegna sulle funzionalità di Dreamweaver legate ai collegamenti, può essere utile conoscere alcuni aspetti teorici per comprendere meglio le operazioni di cui ci occuperemo in seguito.

Collegamenti e risorse E possibile de inire collegamenti a diverse tipologie di risorse. Questa differenza determina un diverso comportamento del sistema quando viene attivata la risorsa stessa. Creando un collegamento ad una pagina web (dello stesso sito o di altri siti web) si determina la visualizzazione della pagina all’interno della inestra del browser. Si può addirittura de inire il punto esatto del documento che deve essere visualizzato tramite un collegamento ad un ancoraggio con nome, che permette di deinire una posizione e di creare anche collegamenti a posizioni interne ad un documento. Anche nel caso di collegamenti a ile di immagini GIF, JPEG e PNG il risultato sarà la visualizzazione dell’immagine nella inestra del browser. Altre tipologie di risorse possono essere visualizzate dal browser, anche se non in modalità nativa. I documenti PDF e in ilmati Flash vengono visualizzati grazie al supporto di plug-in che consentono la visualizzazione di questi contenuti all’interno della inestra del browser stesso. Si possono creare anche collegamenti a ile che non verranno visualizzati nella inestra del programma con cui si sta navigando, come, ad 130

10.1. Nozioni di base sui collegamenti esempio, documenti di Of ice o ile compressi. In questo caso il sistema offre all’utente la possibilità di aprire i ile con un software adatto alla elaborazione di quei contenuti (nel caso in cui un programma del genere sia installato sul sistema dell’utente), oppure di scaricare e salvare sul proprio sistema il ile, il quale diventerà una risorsa locale che può essere trattata come tutte le altre risorse presenti sul sistema. Un collegamento ad un indirizzo e-mail consente di aprire una inestra di nuovo messaggio del programma di posta elettronica installato sul sistema dell’utente, con la casella dell’indirizzo di destinazione automaticamente riempita con l’indirizzo a cui era associato il collegamento. E possibile creare anche collegamenti a script che verranno eseguiti quando si farà clic sul collegamento stesso. Inoltre, è possibile creare, magari temporaneamente, un collegamento nullo sostituendo il percorso con il semplice carattere # (cancelletto)., in modo da poter creare un collegamento anche senza speci icare immediatamente il percorso.

I percorsi dei collegamenti Il percorso di un collegamento può essere speci icato in modi diversi, a seconda se le risorse di riferimento appartengono a siti diversi a quello in cui è de inito il collegamento, oppure sono interne al sito stesso. Nel primo caso si dovrà ricorrere a percorsi assoluti, nei quali sono speci icati in modo esplicito, nella parte iniziale del percorso, lo schema o protocollo con cui viene gestita la risorsa e il dominio a cui essa appartiene. Esempi di percorsi assoluti sono i seguenti: 131

10. I • http://www.vacanze.com: questo percorso punta alla home page di un sito e non è speci icato il nome del ile che rappresenta la pagina • http://www.acquistionline.com/categorie/prodotti.html: questo percorso punta ad una pagina “interna” e sono indicati in modo esplicito il nome della cartella in cui è contenuta la risorsa e del ile a cui si vuol puntare Per i collegamenti a risorse dello stesso sito, si può evitare di speci icare protocollo e dominio e indicare solo i nomi dei ile ed, eventualmente, le cartelle interessate. Questi percorsi possono essere relativi a documento oppure alla cartella principale del sito; questi ultimi sono facilmente riconoscibili in quanto iniziano con uno slash (/). Esempi di percorsi del primo tipo sono i seguenti: • prodotti.html: fa riferimento ad un ile contenuto nella stessa cartella di quello che contiene il collegamento • categorie/articoli.html: fa riferimento ad un ile contenuto in una sottocartella di quella che contiene il ile in cui è speci icato il collegamento • ../index.html: fa riferimento ad un ile situato a livello superiore rispetto a quello che contiene il collegamento Esempi di percorsi relativi alla cartella principale del sito sono i seguenti:

132

10.2. I collegamenti in HTML • /index.html: fa riferimento ad un ile che si trova nella cartella principale del sito • /categorie/articoli.html: fa riferimento ad un ile che si trova in una sottocartella della cartella principale

La destinazione di un collegamento Oltre a speci icare la risorsa alla quale si vuol creare il collegamento, è possibile indicare anche dove la risorsa dovrà essere aperta, speciicando il valore della proprietà Destinazione. E possibile attribuire a tale proprietà il valore _blank per indicare che la pagina dovrà essere aperta in una nuova inestra, oppure il valore _self per indicare che la pagina dovrà essere aperta nella stessa istanza del browser in cui è visualizzata la pagina attuale (quest’ultima, comunque, è l’impostazione prede inita, quindi si può anche evitare di speci icarla esplicitamente). I valori _top e _parent sono utili quando si lavora con i frame, situazione nella quale si può anche indicare il nome del frame di destinazione.

10.2

I collegamenti in HTML

Nel codice HTML i collegamenti sono indicati tramite il tag <a> e il relativo tag di chiusura </a>. fra questi due tag viene racchiusa la descrizione del contenuto che funge da collegamento, che può essere un testo ma può essere anche un elemento più complesso, come, ad esempio, un’immagine.

133

10. I Perché la descrizione di un collegamento sia completa, è necessario aggiungere alcuni attributi. Fra questi, il principale è l’attributo href, che consente di indicare il percorso della risorsa alla quale si vuol creare il collegamento. altri attributi utili sono target (che viene utilizzato, se necessario, per speci icare la descrizione del collegamento, come descritto nel paragrafo precedente) e title (che aggiunge un testo esplicativo al collegamento che ha una importante funzione di accessibilità ). Un esempio di descrizione di un collegamento nel codice HTML è il seguente:

Gli ancoraggi con nome Il tag <a> può essere utilizzato anche per de inire delle ancore interne, o ancoraggi con nome, che possono essere utilizzati per de inire, in altri punti della pagina, un collegamento interno al documento stesso. Nell’esempio qui in basso sono riportate due righe di codice che consentono di speci icare, in due diversi punti della pagina, un ancoraggio con nome ed un collegamento che fa riferimento ad esso.

134

10.3. De inire un collegamento dal pannello Proprietà

<a name =" inizio "> // Altri contenuti della pagina <a href ="# inizio ">Torna su </a>

10.3

De inire un collegamento dal pannello Proprietà

In molte occasioni in cui è necessario creare un collegamento, è possibile semplicemente selezionare il contenuto della pagina a cui si deve essere associato il link (un testo o un’immagine) ed utilizzare i controlli del pannello Proprietà per impostare il percorso e la destinazione del collegamento. Il percorso può essere de inito in diversi modi. Uno consiste nel digitare direttamente all’interno della casella collegamento. Se il percorso a cui si è interessati è già stato utilizzato in precedenza, lo si potrà scegliere tramite l’elenco a discesa associato alla casella. Questa soluzione è sempre applicabile, per qualsiasi tipo di collegamento si voglia creare, ed è l’unica soluzione praticabile (fra quelle messe a disposizione dal pannello Proprietà ) quando si creano collegamenti a risorse esterne al sito. Un secondo modo consiste nel fare clic sul pulsante Cerca ile (rappresentato dalla solita cartellina gialla) e scegliere, dalla inestra di dialogo che appare, il ile al quale si vuol creare il collegamento. La inestra consente anche di scegliere se il percorso che verrà associato al 135

10. I collegamento dovraĚ&#x20AC; essere relativo al documento oppure alla cartella principale del sito.

Figura 10.1: Finestra di dialogo che consente la scelta del ile a cui associare il collegamento. nella parte inferiore della inestra sono posizionati i controlli che consentono di scegliere il tipo si percorso da utilizzare nel collegamento.

Una terza possibilitaĚ&#x20AC; eĚ&#x20AC; quella di individuare nel pannello File la risorsa a cui si vuol creare il collegamento e trascinare su di essa il puntatore a forma di mirino che si trova subito accanto alla casella Collegamento e che prende il nome di Scegli ile. Gli ultimi 2 metodi descritti vengono utilizzati in particolare per creare un collegamento ad un ile interno al sito e sono caratterizzati dal fatto di essere molto semplici e veloci. A destra dei controlli appena descritti vi eĚ&#x20AC; anche una casella a discesa che consente di scegliere la destinazione del collegamento. Per effet136

10.4. Inserire un collegamento associato ad un testo tuare la scelta è suf iciente fare clic sulla freccetta della cella e scegliere la voce di proprio interesse dall’apposito elenco. Inoltre, è possibile associare al collegamento un titolo che ha una funzione descrittiva del collegamento. Questo attributo può essere speci icato digitandolo nella casella Titolo del pannello Proprietà . Esso verrà visualizzato, durante la navigazione, quando l’utente porterà il puntatore del mouse sul collegamento.

10.4

Inserire un collegamento associato ad un testo

In Dreamweaver esiste un apposito comando che consente di inserire all’interno di una pagina un testo insieme a tutte le impostazioni relative al collegamento ad esso associato. Tale comando si chiama Collegamento ipertestuale e può essere eseguito dal menu Inserisci della barra dei menu, oppure dalla categoria Comuni della barra Inserisci. Dopo essersi posizionati nel punto in cui si vuol effettuare l’inserimento (in alternativa si può anche selezionare un testo già presente nella pagina) e dopo aver eseguito il comando indicato in precedenza, appare una inestra di dialogo che consente di speci icare tute le impostazioni necessarie per inserire il testo e il collegamento ad esso associato. Se in partenza era già stato selezionato un frammento di testo presente nella pagina, esso sarà già indicato nell’apposita casella, altrimenti lo si dovrà digitare al momento. I controlli accanto alle etichette Collegamento e Destinazione consentono di de inire le impostazioni principali 137

10. I relative al collegamento, in modo simile ad altre situazioni descritte in precedenza. Gli ultimi controlli consentono di impostare alcuni attributi di accessibilità del collegamento: Titolo, che rappresenta una descrizione del collegamento e può essere utile per comprendere meglio il link, e 2 attributi di input (Chiave di accesso e Indice di tabulazione) che sono utili per attivare il collegamento da tastiera.

Figura 10.2: Finestra di dialogo utilizzata per inserire un testo con relativo collegamento. Il comando in questione può essere utilizzato anche per associare un collegamento ad un testo già esistente.

10.5

Gli ancoraggi con nome

Quando i contenuti di una pagina web sono molto lunghi, può essere utile fornire all’utente inale degli strumenti che gli consentano di spostarsi all’interno della pagina stessa in modo più rapido di quanto non sia consentito dall’utilizzo delle barre di scorrimento del browser o della rotellina del mouse o dei pulsanti della tastiera. In particolare, può essere utile avere la possibilità di ritrovare velocemente alcuni punti strategici della pagina, utilizzando dei collegamenti, anch’essi posizionati in modo strategico all’interno di essa. 138

10.5. Gli ancoraggi con nome

Inserire un ancoraggio con nome La soluzione a questo problema è data dalla possibilità di inserire nel codice della pagina un ancoraggio con nome, che ha un ruolo simile a quello dei segnalibri in Word. Per inserire un ancoraggio in Dreamweaver ci si può posizionare nel punto della pagina in cui si vuol effettuare l’inserimento ed eseguire il comando Inserisci > Ancoraggio con nome dalla barra dei menu oppure fare clic sul pulsante Ancoraggio con nome nella categoria Comuni della barra Inserisci. Nella inestra di dialogo che appare è suf iciente inserire il nome dell’ancoraggio all’interno dell’apposita casella e fare clic su Ok per confermare. Nell’area di progettazione di Dreamweaver sarà possibile vedere un’icona a forma di ancora nel punto in cui è stato inserito l’ancoraggio. Tale icona non sarà visibile quando la pagina verrà visualizzata nella inestra di un browser, in quanto si tratta soltanto di un riferimento visivo.

Figura 10.3: Finestra di dialogo che consente di inserire un ancoraggio con nome. L’unico parametro che è necessario speci icare è il nome dell’ancoraggio.

Creare un collegamento ad un ancoraggio Per creare un collegamento all’ancoraggio con nome è necessario selezionare il contenuto al quale associare il collegamento (può trattarsi di un testo o un’immagine). A questo punto si può procedere in uno fra 139

10. I due modi, entrambi messi a disposizione nel pannello Proprietà : si può digitare direttamente nella casella del collegamento il nome dell’ancoraggio preceduto dal simbolo di cancelletto (#), oppure si può prendere l’icona a forma di mirino (Scegli ile) e trascinarla direttamente sull’ancora alla quale si vuol associare il collegamento. In quest’ultimo caso il percorso del collegamento apparirà automaticamente all’interno della casella del collegamento.

10.6

Inserire un collegamento e-mail

Nel linguaggio HTML è possibile de inire collegamenti anche a caselle di posta elettronica. Un collegamento del genere da la possibilità di aprire la inestra di nuovo messaggio del client di posta elettronica installato sul computer dell’utente che sta navigando nella pagina (nel caso in cui ce ne sia installato uno, altrimenti questa funzionalità non po’ essere utilizzata). Il nuovo messaggio avrà già impostato l’indirizzo del destinatario, in quanto esso è de inito nel collegamento. Questa soluzione può essere utile per velocizzare il lusso di lavoro nel caso in cui l’utente del sito voglia inviare una e-mail al titolare del sito stesso. Per creare un collegamento e-mail è possibile posizionarsi nel punto del sito in cui si vuol inserire il collegamento oppure selezionare il testo a cui si vuol associare il collegamento (se tale testo era già stato inserito in precedenza nella pagina). A questo punto si può eseguire il comando Inserisci > Collegamento e-mail dalla barra dei menu oppure fare clic sul pulsante Collegamento e-mail nella categoria Comuni della barra Inserisci. Nella inestra di dialogo che appare è necessario inserire il testo a cui sarà associato il collegamento (il testo sarà già indicato 140

10.7. Creare una mappa immagine nel caso in cui lo si sia selezionato nella pagina prima di eseguire il comando) e speci icare l’indirizzo a cui si vuol creare il collegamento. A questo punto è possibile fare clic su Ok per completare l’operazione oppure fare clic su Annulla per interrompere i passaggi.

Figura 10.4: Finestra di dialogo utilizzata per inserire o speci icare un collegamento ad una casella di posta elettronica.

Completata l’operazione, sarà possibile leggere l’indirizzo nella casella Collegamento del pannello Proprietà , preceduto dall’espressione “mailto:” che indica il protocollo che dovrà gestire quel tipo di collegamento. Se lo si desidera, è possibile digitare direttamente l’indirizzo nella casella Collegamento dopo aver selezionato il testo nella pagina, ed evitare, in questo modo, di eseguire il comando descritto in precedenza.

10.7

Creare una mappa immagine

Oltre ad associare un unico collegamento ad una immagine, può essere necessario suddividere l’immagine in più aree per poter associare collegamenti diversi ad ogni area. Questa necessità si presenta spesso con le cartine geogra iche, a partire dalle quali si vuol indirizzare l’utente su una pagina diversa a seconda del punto della mappa su cui si fa clic.

141

10. I

Figura 10.5: Esempio di immagine alla quale è stata associata una mappa immagine. Le aree di colore celeste sono i punti attivi.

Per creare una mappa immagine è necessario selezionare all’interno della pagina l’immagine alla quale associare i collegamenti. A questo punto si dovrà attivare uno degli strumenti che consentono di inserire un punto attivo: lo strumento Punto Attivo rettangolo, oppure Punto Attivo Ovale, oppure ancora Punto attivo Poligono. Essi possono essere attivati facendo clic sul pulsante relativo allo strumento situato nel pannello Proprietà , oppure eseguendo il comando relativo al tipo di punto attivo che si vuol attivare situato nel menu Oggetto Immagine della categoria Comuni della barra Inserisci. Una volta attivato lo strumento, si potrà disegnare il punto attivo sull’immagine, coprendo l’area alla quale si vuol associare il collegamento. Subito dopo l’inserimento, è possibile de inire il percorso, la destinazione e il testo alternativo del collegamento, utilizzando i relativi controlli posizionati nel pannello Proprietà , il quale assume una

142

10.8. Veri icare i collegamenti del sito con igurazione apposita quando è selezionato un punto attivo.

Figura 10.6: Con igurazione del pannello Proprietà quando è selezionata una mappa immagine. Nella parte superiore sono situati i controlli che consentono di modi icare le impostazioni del punto attivo selezionato, mentre nella parte inferiore sono riportati i controlli che consentono di intervenire sulla mappa, (aggiungendo, ad esempio, un nuovo punto attivo).

I passaggi precedenti devono essere ripetuti per ogni punto attivo che si vuol aggiungere all’immagine, ino a quando non sarà stata de inita l’intera mappa. Durante l’operazione di disegno di un punto attivo, appare un messaggio che ricorda l’importanza di de inire gli attributi di accessibilità .. In qualsiasi momento del lusso di lavoro è possibile selezionare un punto attivo della mappa immagine per apportare modi iche alle sue impostazioni, utilizzando i controlli del pannello Proprietà cui si è fatto cenno in precedenza. E anche possibile cancellare un punto attivo che si ritiene non sia più utile, selezionandolo e premendo il tasto Canc sulla tastiera.

10.8

Veri icare i collegamenti del sito

Dreamweaver mette a disposizione degli strumenti di controllo automatico che aiutano lo sviluppatore ad individuare facilmente eventuali problemi riguardanti i collegamenti. Tali controlli possono essere eseguiti tramite il pannello Controllo collegamenti che può essere attivato 143

10. I eseguendo dalla barra dei menu il comando Sito > Controlla tutti i collegamenti del sito oppure il comando Finestra > Risultati > Controllo collegamenti. Il pannello presenta tre viste che possono essere alternate tramite una casella a discesa posta in alto a sinistra nel pannello stesso. Inoltre il pannello consente di scegliere, tramite un piccolo pulsante posto sulla sinistra del pannello, se estendere il controllo al solo documento corrente, all’intero sito o ai ile selezionati nel pannello File. La vista prede inita prende il nome di Collegamenti interrotti e mostra l’elenco tutti i collegamenti errati o che puntano a ile non esistenti. L’elenco stesso consente all’utente di modi icare il percorso del collegamento stesso, aggiornando eventualmente tutti i collegamenti che hanno lo stesso percorso.

Figura 10.7: Pannello Controllo collegamenti. Nell’immagine è mostrata le vista Collegamenti interrotti, con l’elenco dei ile interessati e il collegamenti interessati dal problema.. La modalità di visualizzazione può comunque essere modi icata tramite la casella a discesa posta in alto.

La seconda vista (Collegamenti esterni) consente di visualizzare i collegamenti a ile esterni al sito stesso. Tali collegamenti possono essere modi icati esattamente come avviene nella vista precedente. L’ultima vista (File non collegati) consente di visualizzare l’elenco dei ile del sito per i quali non esiste alcun collegamento, i quali possono es144

10.8. Veri icare i collegamenti del sito sere eliminati direttamente dal pannello effettuando una seleziona e premendo il tasto Canc sulla tastiera. I risultati ottenuti tramite il controllo possono essere salvati facendo clic su un piccolo pulsante (Salva rapporto) situato sulla sinistra del pannello e utilizzando la inestra di dialogo che appare e che eĚ&#x20AC; identica a qualsiasi altra inestra di salvataggio. Nella parte inferiore del pannello sono anche riportate alcune informazioni di riepilogo riguardanti il controllo effettuato.

145

Capitolo 11

Oggetti multimediali Le attuali esigenze di comunicazione prevedono che le informazioni e i contenuti non siano veicolati soltanto attraverso il classico testo e le immagini, ma che si debbano sfruttare tutte le possibilitaĚ&#x20AC; che il mondo dei media digitali ci mette a disposizione, comprese animazioni e contenuti audio/video (comunemente de initi contenuti multimediali). Anche i contenuti distribuiti attraverso il web non si sottraggono a queste considerazioni. Attualmente molti siti web includono contenuti multimediali di vario tipo, quali oggetti Flash utilizzati per diversi scopi (intro, animazioni, banner, contenuti interattivi, â&#x20AC;Ś), video digitali deiniti in vari formati di ile e brani audio in formato MP3. Dreamweaver ci da la possibilitaĚ&#x20AC; di inserire facilmente questo tipo di contenuti e di gestirne le impostazioni, il tutto, come al solito, senza dover intervenire sul codice HTML, che, nel caso degli oggetti multimediali, eĚ&#x20AC; particolarmente complesso.

147

11. O

11.1

Gli oggetti multimediali in HTML

Come già visto per le immagini, anche gli oggetti multimediali non possono essere inglobati nel ile HTML, in quanto quest’ultimo è semplicemente un ile di testo, mentre i contenuti multimediali devono essere rappresentati in formati appositi ed adeguati. Nel documento HTML sarà presente un frammento di codice che indicherà il contenuto che dovrà essere visualizzato e le modalità di riproduzione.

Figura 11.1: Esempio di oggetto multimediale inserito in una pagina web. Dalla igura è evidente, nella vista Codice a sinistra, la complessità del codice HTML necessario per descrivere l’oggetto stesso.

Gli oggetti complessi per i quali non esiste un apposito tag sono descritti nel codice HTML tramite il tag <object> e il relativo tag di chiusura </object>. Il marcatore deve essere accompagnato da una serie di attributi necessari per completare la descrizione del contenuto e renderne possibile la fruizione. Fra questi, l’attributo classid fornisce indicazioni sul tipo di plug-in necessario per la riproduzione. 148

11.2. Gli oggetti Flash

11.2

Gli oggetti Flash

Flash è una tecnologia sviluppata negli anni novanta da Macromedia e acquisita in seguito da Adobe, che ho lo scopo di consentire la generazione di animazioni vettoriali. I contenuti di questo tipo vengono creati da un programma di authoring che prende il nome di Flash Professional (anch’esso prodotto originariamente da Macromedia e attualmente da Adobe) e sono riprodotti da un componente software che prende il nome di Flash player e che attualmente è installato sulla maggior parte dei computer più comuni e su alcuni dispositivi mobili (smartphone, tablet, …). I ile generati con questa tecnologia sono di tipi diversi ed è necessario fare alcune precisazioni per capire cosa può essere inserito nella pagina. I ile con estensione . la sono i ile sorgente di qualsiasi progetto creato con Flash Professional. Essi contengono tutte le informazioni che consentono all’autore di continuare il lavoro di sviluppo. Questi ile possono essere elaborati solo con il software di authoring e non sono riproducibili tramite Flash player. Per poter inserire il contenuto in una pagina web è necessario eseguire in Flash Professional una operazione di esportazione o di pubblicazione e generare un ile con estensione .swf. questo tipo di ile non è modi icabile e può soltanto essere riprodotto da Flash player.

Inserire oggetti Flash. Le modalità con cui Dreamweaver consente di inserire un ilmato Flash in una pagina web sono simili a quelle che permettono l’inserimento di 149

11. O immagini. Un apposito comando è presente sia nella barra dei menu, cliccando su Inserisci > Oggetto multimediale > SWF, sia nella categoria Comune pannello Inserisci, in cui troviamo il pulsante Oggetto multimediale e, all’interno dell’apposito menu, il comando SWF. Dopo aver eseguito il comando appare una inestra di dialogo tramite la quale è possibile scegliere il ile SWF da inserire e completare l’inserimento facendo clic su Ok. L’oggetto verrà inserito nel punto della pagina in cui si era posizionati al momento dell’esecuzione del comando. In alternativa, è possibile trascinare direttamente l’oggetto nella pagina dopo averne individuato il ile nel pannello File o nel pannello Risorse. Nel primo caso è necessario individuare la posizione in cui lo stesso è memorizzato; nel secondo caso, invece, è suf iciente fare clic sul pulsante SWF del pannello per ottenere un elenco di tutti i ile SWF presenti nelle cartelle del sito. Qualsiasi sia la modalità di inserimento che è stata scelta, una volta completate le operazioni descritte, apparirà un’ulteriore inestra di dialogo che ci richiederò di impostare gli attributi di accessibilità dell’oggetto. All’interno di questa inestra è possibile speci icare un titolo, che ha la stessa funzione del testo alternativo per le immagini, e le impostazioni di input che consentono di attivare l’oggetto da tastiera.

Modi icare gli oggetti Flash Gli oggetti Flash inseriti in una pagina vengono visualizzati all’interno della stessa come semplici segnaposto di colore grigio, al centro del quale è posizionato il logo di Flash; quindi, normalmente nella pagina 150

11.2. Gli oggetti Flash

Figura 11.2: Finestra di dialogo che consente di impostare gli attributi di accessibilità di oggetti complessi come gli oggetti Flash.

non si vede il contenuto dell’oggetto stesso. Questo avviene perché , se l’oggetto fosse costantemente in riproduzione (non dimentichiamo che si tratta, in genere, di un oggetto animato) esso impegnerebbe una parte non indifferente delle risorse di sistema che verrebbero sottratte al resto dell’elaborazione, determinando, in alcuni casi, un calo di prestazioni. Inoltre, una riproduzione continua di un contenuto animato sarebbe estremamente fastidiosa e comporterebbe una distrazione per lo sviluppatore che sta lavorando sulla pagina.

Figura 11.3: Segnaposto che rappresenta un oggetto Flash inserito all’interno della pagina. L’icona di Flash posta al centro del segnaposto indica il tipo di contenuto rappresentato da quest’ultimo.

Quando un oggetto Flash è selezionato nella pagina, compare nel pannello Proprietà un pulsante che si chiama Riproduci e che permette di avviare la riproduzione del contenuto, se l’utente lo ritiene necessario. 151

11. O Quando l’oggetto è in riproduzione, il pulsante cambia la sua etichetta in Interrompi, e può essere utilizzato per arrestare la riproduzione. L’integrazione fra Dreamweaver e Flash permette di avviare in modo semplice la modi ica dell’oggetto, anche dopo che esso è stato inserito nella pagina. Per avviare la modi ica direttamente da Dreamweaver basta selezionare l’oggetto e fare clic sul pulsante Modi ica nel pannello Proprietà . Per fare in modo che l’operazione funzioni correttamente, è necessario che sia impostata la proprietà Orig ( che sta per Origine), la quale deve contenere il percorso del ile sorgente che dovrà essere aperto nel programma Flash Professional. Se cosı̀ non fosse, il programma chiederà all’utente di indicare, tramite una apposita inestra di dialogo, il ile che dovrà essere aperto. Quando saranno state apportate tutte le modi iche necessarie, la sessione potrà essere terminata facendo clic, nella inestra di Flash, sul pulsante Completato, evitando di dover procedere separatamente con le operazioni di salvataggio ed esportazione. Facendo clic sul pulsante Parametri, sarà possibile aprire un inestra di dialogo che consentirà di modi icare i parametri aggiuntivi che descrivono l’oggetto nel codice della pagina. Questa operazione, tuttavia, è piuttosto complessa ed è necessaria soltanto per alcune esigenze molto particolari.

Gestire le proprietà degli oggetti Flash Oltre ai comandi descritti nella sezione precedente, quando si seleziona un oggetto Flash inserito nella pagina, vengono visualizzati nel pannello Proprietà una serie di controlli che permettono di modi icare le 152

11.2. Gli oggetti Flash

Figura 11.4: I parametri di un oggetto Flash. all’interno della inestra di dialogo in igura è possibile modi icare i valori dei parametri esistenti (agendo direttamente sull’elenco) e aggiungere, eliminare e modi icare l’ordine, utilizzando i pulsanti posti in alto.

impostazioni dell’oggetto stesso. Come per molti altri tipi di contenuti, si può associare all’oggetto un identi icativo e un nome di classe, si possono modi icare le dimensioni di larghezza e altezza (caselle Larg e Alt), il percorso del ile inserito nella pagina (utilizzando i controlli posti accanto all’etichetta File) e del relativo ile sorgente (tramite i controlli posti accanto all’etichetta Orig, come già indicato nel paragrafo precedente). Oltre alle impostazioni più generali, ce ne sono altre più speci iche. E possibile scegliere un colore di sfondo da visualizzare durante il caricamento e dopo la riproduzione. E possibile de inire delle spaziature, sia in senso verticale (Spazio V) che in senso orizzontale (Spazio O) per distanziare i contenuti della pagina posti accanto all’oggetto in questione. Modi icando l’impostazione della casella Qualità si può scegliere se privilegiare le prestazioni e la velocità durante la riproduzione (scegliendo una qualità più bassa) oppure la qualità della riproduzione (applicando una impostazione di qualità più alta). La proprietà Dimensioni contente di determinare l’adattamento del ilmato all’interno dello spazio determinato dalle misure di larghezza e altezza (l’impostazione prede inita consente di visualizzare l’intero ilmato). Nel caso in cui 153

11. O ci siano nella pagina elementi dinamici come i widget Spry, è possibile utilizzare l’impostazione Winmode per determinare quale elemento deve essere visualizzato in primo piano. Le opzioni Ciclo e Esecuzione autom. (automatica), che per impostazione prede inita sono attive, consentono di indicare se si vuole riprodurre ciclicamente il ilmato (di solito è quello che avviene) e se la riproduzione deve essere avviata automaticamente subito dopo il caricamento.

Figura 11.5: Proprietà di un oggetto Flash. all’interno della igura sono riconoscibili sia i controlli che consentono di modi icare le proprietà dell’oggetto, sia i comandi che consentono di eseguire le operazioni descritte nel paragrafo precedente.

11.3

I video FLV

All’interno di una pagina web si possono inserire varie tipologie di video, codi icati in vari formati. Fra questi ce n’è uno interessante in quanto garantisce una buona qualità e può essere riprodotto tramite Flash player, senza richiedere ulteriori plug-in esterni. Si tratta del formato FLV (sigla che sta per Flash Video) i cui ile sono caratterizzati dall’estensione . lv. l’inserimento di un ile FLV in Dreamweaver è semplice e consente di creare un componente Flash che mette a disposizione i controlli necessari per riprodurre il video.

154

11.3. I video FLV

Inserire video Flash E possibile inserire un ile FLV (dopo essersi posizionati nel punto della pagina in cui si vuol effettuare l’inserimento) sia tramite un apposito comando presente nella barra dei menu, cliccando su Inserisci > Oggetto multimediale > FLV, sia tramite la barra Inserisci, utilizzando il comando FLV del menu Oggetto multimediale attivabile dalla categoria Comune. E possibile inserire il video anche trascinando il ile direttamente nel punto in cui si vuol effettuare l’inserimento, dal pannello File, dopo averne individuato la posizione dello stesso nel ile system, o dal pannello Risorse, dopo essersi posizionati sulla categoria Filmati. La inestra di dialogo che appare subito dopo i passaggi appena descritti consente all’utente di fornire al programma tutte le indicazioni in merito al video che deve essere inserito. Una di queste indicazioni, più precisamente l’URL, potrebbe essere già presente nel caso in cui il video sia stato inserito con un trascinamento dal pannello File o Risorse. Altrimenti, tale parametro può essere speci icato digitando all’interno della casella il suo valore (potrebbe anche trattarsi del percorso di un video già pubblicato in rete) oppure facendo clic sul pulsante Sfoglia e utilizzando l’apposita inestra di dialogo per individuare e speci icare il ile. Il parametro Tipo di video consente di speci icare se il video verrà scaricato progressivamente da un server web oppure se verrà fruito in streaming da apposito server. Nel primo caso, il video dovrà essere trasferito sul proprio spazio web, insieme a tutti gli altri ile del sito, mentre nel secondo dovrà essere caricato su un server di streaming (che può gestire in proprio un server di streaming, oppure ricorrere, oppu155

11. O re ricorrere ad un account fornito da un provider di servizi di questo tipo). E possibile associare al video una mascherina, o Skin, che fornirà all’utente i comandi necessari per controllare la riproduzione del video. La scelta del tipo di skin dipenderà da quali controlli si vogliono fornire agli utenti durante la fruizione. Fra i ile del sito, Dreamweaver aggiungerà automaticamente un oggetto Flash, che dovrà essere caricato sul server come tutte le altre risorse del sito stesso.

Figura 11.6: Finestra di dialogo utilizzata per l’inserimento di un video FLV. Le impostazioni indicate nella inestra devono tutte essere fornite n modo esplicito per poter completare l’operazione.

Nelle caselle Larghezza e Altezza è necessario inserire le dimensioni alle quali il video dovrà essere riprodotto all’interno della pagina. Il pul-

156

11.3. I video FLV sante Rileva dimensioni consentirà di ottenere facilmente le dimensioni originali, in modo tale da non doverle digitare con la tastiera. Gli ultimi 2 controlli della inestra consentono di decidere se avviare automaticamente la riproduzione del video non appena esso sarà stato scaricato nella pagina (Riproduzione automatica) e di riavvolgere automaticamente di video alla ine della riproduzione in modo da riportare l’indice della posizione all’inizio del video (Riavvolgimento automatico). Quando sono state date tutte le indicazioni, si può completare l’operazione di inserimento facendo clic su Ok. Completato l’inserimento, sarà possibile vedere, in vista Progettazione, un segnaposto con l’icona che rappresenta i video FLV posizionata al centro. Inoltre, fra le risorse del sito, Dreamweaver aggiungerà automaticamente 2 ile SWF: uno di essi, come già accennato, implementa la mascherina con i controlli di riproduzione, l’altro rappresenta l’oggetto all’interno del quale verrà riprodotto il video stesso. Entrambi i ile fanno parte integrante delle risorse del sito e dovranno essere caricati sullo spazio web come tutti gli altri per fare in modo che il contenuto della pagina sia pienamente fruibile.

Modi icare le proprietà del video FLV Le impostazioni applicate in fase di inserimento possono essere modi icate in qualsiasi momento, utilizzando i controlli che compaiono nel pannello Proprietà quando si seleziona il video inserito. E possibile modi icare le dimensioni di larghezza e altezza (caselle L e A), controllando che sia attivata l’opzione Vincola se si vogliono mantenere le 157

11. O

Figura 11.7: Segnaposto che rappresenta un ilmato FLV inserito all’interno della pagina. L’icona dei ilmati FLV posta al centro del segnaposto indica il tipo di contenuto rappresentato da quest’ultimo.

proporzioni. E inoltre possibile fare clic sul pulsante Ripristina per riportare le dimensioni del video a quelle originali. Il video inserito può anche essere sostituito con un video diverso, utilizzando la casella File o il pulsante a forma di cartellina posto immediatamente accanto. Anche mascherina contenente i controlli di riproduzione può essere sostituita tramite la casella a discesa Skin. Due opzioni posizionate in basso nel pannello Proprietà consentono di decidere se la riproduzione del video deve essere avviata automaticamente dopo il caricamento nella pagina (Riproduzione automatica), e se il video deve essere raccolto all’inizio quando la sua riproduzione arriva al termine (Riavvolgimento automatico). E inoltre possibile, come per altri elementi, associare al video un identi icativo e un nome di classe.

158

11.4. Altri contenuti multimediali

Figura 11.8: Proprietà di un video FLV. Il pannello consente di modi icare le impostazioni del video presente nella pagina, ma anche di sostituire il video stesso, individuando un nuovo ile.

11.4

Altri contenuti multimediali

Oltre a diversi tipi di contenuti Flash, è possibile inserire all’interno delle pagine web altri tipi di oggetti complessi, molti dei quali potranno essere riprodotti tramite plug-in esterni. Nel menu Inserisci > Oggetto multimediale della barra dei menu e nel menu Oggetto multimediale della categoria Comuni del pannello Inserisci troviamo diversi comandi di inserimento associati a contenuti di diversa natura. A seguito dell’esecuzione di questi comandi, Dreamweaver inserirà nel codice della pagina i tag necessari per descrivere l’oggetto inserito. In particolare, il comando Plugin consente di inserire elementi di vario tipo, tra i quali contenuti audio e video in vari formati, scegliendone semplicemente il ile tramite la inestra di dialogo che appare dopo aver eseguito il comando. Tuttavia, dopo l’inserimento sarà necessario impostare i parametri necessari per la riproduzione. Questa operazione può essere eseguita utilizzando il pulsante Parametri del pannello Proprietà . Per quel che riguarda gli altri comandi presenti all’interno dei menu citati all’inizio del paragrafo, segnaliamo brevemente che il comando Shockwave consente di inserire in una pagina web complessi contenuti interattivi realizzati con il software Adobe Director, e che i comandi 159

11. O Applet e Active X consentono l’inserimento di funzionalità complesse di vario tipo, realizzate con apposite tecnologie, linguaggi e strumenti di programmazione. Ancora una volta è utile ribadire che Dreamweaver si limita ad inserire nella pagina il frammento di codice necessario per consentire la fruizione dei contenuti e delle funzionalità inserite. Altri tipi di oggetti, anche se non supportati dall’interfaccia visuale di Dreamweaver, possono essere comunque inseriti andando ad aggiungere manualmente (se si è in grado di farlo) il frammento di codice necessario per descrivere l’oggetto nel listato della pagina.

160

Capitolo 12

La libreria Spry Spry è il nome di una libreria di oggetti che Dreamweaver mette a disposizione degli sviluppatori in modo tale che essi possano implementare delle esperienze di navigazione avanzate senza dover essere esperti manipolatori di codice. Gli oggetti della libreria Spry possono essere suddivisi in diverse categorie. Alcuni di essi consentono l’accesso a dati provenienti da speci iche sorgenti (come, ad esempio, l’oggetto Dataset Spry); altri sono controlli che possono essere inseriti nelle pagine e che consentono agli utenti di interfacciarsi con i dati stessi (ad esempio Campo di testo convalida Spry); altri ancora sono de initi ”widget”, ed hanno come scopo quello di consentire la realizzazione di effetti complessi in modo semplice (come, ad esempio, il Pannello a sof ietto Spry, per citarne uno caratterizzato da effetti abbastanza complessi). Gli oggetti della libreria Spry sono implementati grazie a 3 diversi linguaggi. La struttura è de inita tramite un frammento di codice HTML 161

12. L

Figura 12.1: Pannello inserisci impostato sulla categoria Spry. In questa con igurazione è possibile vedere un elenco completo di tutti gli oggetti che appartengono alla libreria.

che viene inserito nella pagina. L’aspetto dell’oggetto dipende, invece, da un insieme di regole CSS che vengono create automaticamente dal programma e speci icate in un ile CSS che lo stesso Dreamweaver copia all’interno di una apposita cartella del sito e collega al ile HTML della pagina (la cartella citata, per impostazione prede inita, prende 162

12.1. La Barra dei menu Spry il nome di Spry Assets; il suo nome può essere modi icato oppure può essere indicato fra le impostazioni del sito quando quest’ultimo viene de inito). Anche il comportamento è de inito all’interno di un apposito ile generato dal programma e collegato alla pagina web; in questo caso, il linguaggio utilizzato è Javascript, che è sicuramente il linguaggio più popolare e ampiamente supportato fra i linguaggi di script lato client. E possibile modi icare il codice prodotto da Dreamweaver per personalizzare gli oggetti creati. Nella maggior parte dei casi, tuttavia, è suficiente de inire la struttura e il contenuto degli stessi tramite il pannello Proprietà e personalizzare le regole CSS individuandole nel pannello Stili CSS e aprendole nella apposita inestra di dialogo. Il codice Javascript in genere non ha bisogno di modi iche, in quanto il comportamento che gli oggetti hanno in dall’inizio è ciò che li caratterizza più fortemente e rappresenta il motivo principale per cui si è deciso di far uso proprio di quel determinato tipo di oggetto.

12.1

La Barra dei menu Spry

Inserire in una pagina web una barra di menu descritta unicamente in forma testuale e codi icata in appositi linguaggi ha degli indubbi vantaggi. Uno consiste nel fatto di non dover inserire immagini che rappresentano l’aspetto gra ico della voce di menu, evitando in questo modo di appesantire la pagina. Inoltre, una eventuale modi ica della struttura o dell’aspetto globale del menu è più facile da gestire non dovendo ricorrere a programmi esterni per manipolare le immagini. 163

12. L

Ovviamente, una barra di menu può essere creata “manualmente”, de inendo un elenco HTML che rappresenta la struttura, creando le regole CSS che ne de iniscono l’aspetto e scrivendo il codice Javascript necessario per de inirne il comportamento. Tuttavia, ricorrere ad un oggetto di libreria già pronto renderà il lavoro più facile ed ef iciente. Per inserire una barra di menu Spry è necessario posizionarsi nel punto della pagina in cui inserire l’oggetto ed eseguire dalla barra dei menu di Dreamweaver il comando Inserisci > Spry > Barra di menu Spry oppure il comando Barra di menu Spry dalla categoria dalla categoria Spry della barra Inserisci. Appare una inestra tramite la quale è necessario scegliere se si vuol creare una barra orizzontale (che tipicamente viene posizionata in alto nella pagina) oppure una barra verticale (tipicamente posizionata lateralmente). Appena si fa clic su Ok per confermare l’inserimento, appare nella pagina una barra con delle voci e delle impostazioni di stile prede inite.

Figura 12.2: Finestra di dialogo relativa al comando che consente di inserire una barra dei menu Spry. La funzione della inestra è quella di consentire di scegliere se implementare una barra orizzontale o una verticale.

La manipolazione della struttura avviene tipicamente tramite il pannello Proprietà , dopo aver selezionato la barra stessa tramite la linguet164

12.1. La Barra dei menu Spry

Figura 12.3: Esempio di barra dei menu Spry. Nella igura sono mostrati anche dei riferimenti visivi (la linguetta in alto e i bordi azzurri) che sono visibili in Dreamweaver ma non verranno mostrati nella pagina durante la navigazione.

ta azzurra posta in alto a sinistra nella barra. Nel pannello troveremo i comandi per poter aggiungere, eliminare e modi icare l’ordine delle voci del menu lavorando su 3 livelli differenti. Selezionando una voce ad uno qualsiasi dei 3 livelli sarà possibile modi icarne il testo (casella Testo), il percorso (casella Collegamento) e la destinazione (casella Destinazione) del collegamento e assegnarle un titolo per motivi di accessibilità (casella Titolo). Sempre all’interno del pannello troviamo una casella tramite la quale è possibile modi icare il nome assegnato all’oggetto e un comando che consente di disattivare gli stili CSS per visualizzare momentaneamente solo la struttura del menù .

Figura 12.4: Con igurazione del pannello Proprietà quando è selezionata una barra dei menu Spry. La funzione del pannello è di consentire la modi ica della struttura della barra in modalità visuale.

Posizionandosi su una voce del menu il pannello Proprietà ci darà la possibilità di intervenire sulla singola voce invece che sulla struttura dell’interno menu. In questo caso la con igurazione del pannello sarà la stessa di quando si seleziona un frammento di testo. 165

12. L

Per modi icare l’aspetto della barra sarà necessario modi icare le regole CSS assegnate all’oggetto e de inite nella libreria, a meno che non si vogliano creare delle nuove regole ed assegnarle agli elementi della struttura della barra. In ogni caso tali operazioni possono essere eseguite, come per qualsiasi altra regola, utilizzando il pannello CSS o modi icando il codice nell’apposito ile CSS copiato da Dreamweaver nella cartella che raccoglie i ile della libreria.

Figura 12.5: Pannello Stili CSS con il foglio di stile creato automaticamente da Dreamweaver per una barra dei menu Spry orizzontale. Nella igura sono visibili alcune delle regole utilizzate per gestire l’aspetto della barra.

Se lo si ritiene necessario, è possibile attivare, direttamente dal pannello Proprietà , dopo aver selezionato la barra, la guida in linea di Dreamweaver, facendo clic sul link Personalizza questo widget. La guida si aprirà direttamente alla pagina che fornisce indicazioni sulla modi ica delle regole CSS associate al widget. 166

12.2. Il Pannello a schede Spry Quando si esegue il comando di salvataggio dopo aver inserito un oggetto della libreria Spry, Dreamweaver mostra una inestra di messaggio nella quale comunica all’utente che nella cartella Spry Assets verranno copiati alcuni ile necessari al funzionamento dell’oggetto e che dovranno essere trasferiti in remoto quando verrà pubblicato il sito.

Figura 12.6: Finestra di messaggio tramite la quale Dreamweaver fornisce informazioni sui ile necessari al funzionamento del widget Barra dei menu Spry.

Se si ha la necessità di eliminare una barra dei menu creata in precedenza è suf iciente selezionarla dall’apposita linguetta e premere il tasto Canc sulla tastiera. In alternativa è anche possibile selezionarne il codice nel listato della pagina ed eliminarlo.

12.2

Il Pannello a schede Spry

Un pannello a schede consente di distribuire grandi quantità di contenuti in una pagina in modo tale che essi non siano tutti contemporaneamente visibili per evitare che la pagina sia eccessivamente lunga e 167

12. L

dif icile da navigare, ma evitando di separarli in più pagine, per non costringere l’utente ad un nuovo caricamento ogni volta che si vuol passare da una sezione ad un’altra. Facendo clic su una scheda possiamo visualizzare il contenuto desiderato, che andrà a sostituire quello visualizzato appena prima nello stesso punto della pagina e che, a sua volta, verrà nascosto. Per inserire un pannello a schede Spry è necessario posizionarsi nel punto della pagina in cui si vuol inserire l’oggetto ed eseguire dalla barra dei menu di Dreamweaver il comando Inserisci > Spry > Pannello a schede Spry oppure il comando Pannello a schede Spry dalla categoria dalla categoria Spry della barra Inserisci. Appena il comando viene eseguito compare nella pagina una struttura con 2 schede prede inite che potranno essere modi icate subito dopo l’inserimento.

Figura 12.7: Esempio di pannello a schede Spry. in ogni istante è visibile il contenuto di una sola scheda. Nella igura sono visualizzati anche i riferimenti visivi di Dreamweaver che non verranno mostrati durante la navigazione.

Selezionando il pannello a schede dall’apposita linguetta azzurra posta in alto a sinistra si creano le condizioni per modi icare l’oggetto trami168

12.2. Il Pannello a schede Spry te il pannello Proprietà . In esso troveremo i controlli necessari per aggiungere, eliminare e modi icare l’ordine delle schede. Inoltre, sempre dal pannello proprietà sarà possibile scegliere quale scheda visualizzare per prima al caricamento della pagina e modi icare, se lo si ritiene necessario, il nome dell’oggetto.

Figura 12.8: Proprietà di un pannello a schede Spry. Pochi controlli all’interno del pannello Proprietà consentono di controllare la struttura del pannello a schede.

Intervenendo direttamente sull’oggetto posto nella pagina sarà possibile de inire i nomi di ognuna delle schede e il loro contenuto. Il contenuto di ogni scheda potrà essere manipolato esattamente come il contenuto presente in qualsiasi punto della pagina. Per scegliere su quale sezione del pannello lavorare è necessario fare clic sul nome della scheda nel pannello Proprietà quando è selezionato l’intero oggetto, oppure fare clic sulla piccola icona a forma di occhiolino che appare a destra del nome della scheda quando si accosta il puntatore del mouse alla stessa. Anche per il pannello a schede, come già detto per la barra di menu, è possibile intervenire sulle regole CSS assegnate all’oggetto e de inite nella libreria per modi icare l’aspetto del pannello. Se lo si desidera, si possono creare delle nuove regole ed assegnarle agli elementi della struttura del pannello. In ogni caso tali operazioni possono essere eseguite, come per qualsiasi altra regola, utilizzando il pannello Stili CSS

169

12. L

o modi icando il codice nell’apposito ile CSS copiato da Dreamweaver nella cartella che raccoglie i ile della libreria. Se lo si ritiene necessario, è possibile attivare la guida in linea del programma direttamente dal pannello Proprietà , dopo aver selezionato il pannello a sof ietto, facendo clic sul link Personalizza questo widget. La guida si aprirà direttamente alla pagina che fornisce indicazioni sulla manipolazione di questo widget.

12.3

Il Pannello a sof ietto Spry

Il pannello a sof ietto costituisce una valida alternativa all’utilizzo del pannello a schede e viene utilizzato essenzialmente (anche se non necessariamente) per gli stessi scopi: posizionare contenuti nella pagina in modo tale che siano visualizzati alternativamente e nello stesso punto. La differenza principale fra i 2 oggetti consiste nel fatto che il pannello a sof ietto presenta un’animazione più accattivante. Per inserire un pannello a sof ietto Spry è necessario posizionarsi nel punto della pagina in cui inserire l’oggetto ed eseguire dalla barra dei menu di Dreamweaver il comando Inserisci > Spry > Pannello a sofietto Spry oppure il comando Pannello a sof ietto Spry dalla categoria dalla categoria Spry della barra Inserisci. Appena il comando viene eseguito compare nella pagina la struttura del pannello a sof ietto con 2 elementi prede initi che potranno essere modi icati subito dopo l’inserimento. Selezionando il pannello a sof ietto dall’apposita linguetta azzurra posta in alto a sinistra si creano le condizioni per modi icare l’oggetto 170

12.3. Il Pannello a sof ietto Spry

Figura 12.9: Esempio di pannello a sof ietto Spry. In questa igura viene mostrato il pannello così come verrà visualizzato nella pagina, senza i riferimenti visivi di Dreamweaver.

tramite il pannello Proprietà . In esso troveremo i controlli necessari per aggiungere, eliminare e modi icare l’ordine delle singole sezioni in cui è suddiviso il pannello. Inoltre, sempre dal pannello Proprietà sarà possibile modi icare, se lo si ritiene necessario, il nome dell’oggetto.

Figura 12.10: Proprietà di un pannello a sof ietto Spry. Pochi controlli all’interno del pannello Proprietà consentono di controllare la struttura dell’oggetto.

Intervenendo direttamente sull’oggetto posto nella pagina sarà possibile de inire i nomi (o etichette) di ognuna delle sezioni e il loro contenuto. Il contenuto di ogni sezione potrà essere manipolato esattamente come il contenuto presente in qualsiasi punto della pagina. Per scegliere su quale sezione del pannello lavorare è necessario fare clic sul suo nome nel pannello Proprietà quando è selezionato l’intero oggetto, oppure fare clic sulla piccola icona a forma di occhiolino che appare

171

12. L

a destra di un etichetta quando si accosta il puntatore del mouse alla stessa. Anche per il pannello a sof ietto, come già detto per gli altri widget, è possibile intervenire sulle regole CSS assegnate all’oggetto e de inite nella libreria per modi icare l’aspetto del pannello. Se lo si desidera, si possono creare delle nuove regole ed assegnarle agli elementi della struttura del pannello. In ogni caso tali operazioni possono essere eseguite, come per qualsiasi altra regola, utilizzando il pannello CSS o modi icando il codice nell’apposito ile CSS copiato da Dreamweaver nella cartella che raccoglie i ile della libreria. Se lo si ritiene necessario, è possibile attivare, direttamente dal pannello Proprietà , dopo aver selezionato la barra, la guida in linea di Dreamweaver, facendo clic sul link Personalizza questo widget. La guida si aprirà direttamente alla pagina che fornisce indicazioni sulla modi ica delle regole CSS associate al widget.

12.4

Il Pannello comprimibile Spry

Il pannello comprimibile consente di comprimere contenuti estesi presenti all’interno della pagina e fare in modo che possano essere visualizzati per intero facendo clic sul titolo del pannello. Comprimere i contenuti nascondendo quelli a cui non si è interessati rende la pagina snella e più semplice da navigare. Per inserire un pannello comprimibile Spry è necessario posizionarsi nel punto della pagina in cui inserire l’oggetto ed eseguire dalla barra 172

12.4. Il Pannello comprimibile Spry dei menu di Dreamweaver il comando Inserisci > Spry > Pannello comprimibile Spry oppure il comando Pannello comprimibile Spry dalla categoria Spry della barra Inserisci. Appena il comando viene eseguito compare nella pagina la struttura del pannello comprimibile in cui sono visibili il nome prede inito e il contenuto di esempio, che potranno essere modi icati subito dopo l’inserimento.

Figura 12.11: Esempio di pannello comprimibile Spry. Nella igura è mostrato un pannello aperto, nel quale è visibile il contenuto, oltre che il nome del pannello stesso. Se il pannello fosse chiuso, nella pagina si vedrebbe solo il titolo.

Selezionando il pannello comprimibile dall’apposita linguetta azzurra posta in alto a sinistra si creano le premesse per modi icare l’oggetto tramite il pannello Proprietà . In esso troveremo i controlli necessari per decidere se il pannello deve essere visualizzato come aperto o chiuso, sia nell’area di lavoro di Dreamweaver (casella Visualizza), sia nella inestra del browser, subito dopo il caricamento (casella Stato prede inito). Un ulteriore controllo permetterà di scegliere se attivare

173

12. L

o disattivare l’animazione. Inoltre, sempre dal pannello proprietà sarà possibile modi icare, se lo si ritiene necessario, il nome dell’oggetto.

Figura 12.12: Proprietà del pannello comprimibile Spry. Le impostazioni di questo widget si limitano alla visualizzazione del contenuto, sia in Dreamweaver che nel browser, e alla scelta di visualizzare l’animazione durante la navigazione.

Intervenendo direttamente sull’oggetto posto nella pagina sarà possibile de inire il titolo che dovrà essere visualizzato in alto nel pannello e il suo contenuto del pannello stesso, che potrà essere manipolato esattamente come il contenuto presente in qualsiasi punto della pagina. Anche per il pannello comprimibile, come già detto per gli altri widget, è possibile intervenire sulle regole CSS assegnate all’oggetto e de inite nella libreria per modi icare l’aspetto del pannello. Se lo si desidera, si possono creare delle nuove regole ed assegnarle agli elementi della struttura del pannello. In ogni caso tali operazioni possono essere eseguite, come per qualsiasi altra regola, utilizzando il pannello CSS o modi icando il codice nell’apposito ile CSS copiato da Dreamweaver nella cartella che raccoglie i ile della libreria. Se lo si ritiene necessario, è possibile attivare, direttamente dal pannello Proprietà , dopo aver selezionato la barra, la guida in linea di Dreamweaver, facendo clic sul link Personalizza questo widget. La guida si aprirà direttamente alla pagina che fornisce indicazioni sulla modi ica delle regole CSS associate al widget. 174

Capitolo 13

Integrazione Ogni programma della Adobe Creative Suite può essere installato, utilizzato e aggiornato singolarmente e indipendentemente dagli altri programmi appartenenti alla stesso pacchetto. Tuttavia, è possibile godere di notevoli vantaggi dall’utilizzo congiunto di più programmi. Infatti la Adobe (e anche la Macromedia, che ha dato vita ad alcuni dei software che attualmente fanno parte della Creative Suite, fra i quali anche Dreamweaver), ha compiuto uno sforzo notevole per produrre un pacchetto di programmi che possano lavorare insieme al ine di ridurre i tempi di produzione e aumentare l’ef icienza. In questo capitolo sono riportate alcune indicazioni su come utilizzare alcuni programmi della Creative Suite interessanti per chi lavora con Dreamweaver. Quanto riportato non può essere considerato una guida completa all’utilizzo dei programmi trattati. Per chi fosse interessato ad acquisire le conoscenze sull’utilizzo di questi programmi, è necessario dedicarsi ad uno studio speci ico su di essi.

175

13. I

13.1

Adobe Bridge

Adobe Bridge è un potente strumento di navigazione e gestione di risorse che consente all’utente di organizzare i propri documenti e le informazioni su questi ultimi. Molti dei programmi della Creative Suite consentono di utilizzare Bridge per l’esecuzione di alcune operazioni comuni, quali l’apertura di un ile e l’inserimento o importazione di contenuto all’interno del documento elaborato. Fra i vantaggi principali dell’utilizzo di questo software sono da annoverare una vasta dotazione di strumenti di ricerca e iltro dei ile molto so isticati, e la possibilità di visualizzare le anteprime di ile anche molto complessi (come i video e le animazioni Flash) che non verrebbero visualizzati dalle utility del sistema operativo, soprattutto su piattaforma Windows.. Bridge può essere attivato direttamente da Dreamweaver, eseguendo il comando File > Consulta in Bridge dalla barra dei menu. Individuato il ile che si vuol aprire è possibile fare un doppio clic per ottenere lo scopo. Inoltre, è anche possibile inserire un oggetto (come, ad esempio, immagini e animazioni) all’interno delle pagine web, trascinandolo direttamente dalla inestra di Bridge all’interno della pagina web, nel punto in cui lo si vuol inserire. Se si vuol eseguire questa operazione, può essere utile ridurre le dimensioni della inestra in modo da poterla sovrapporre a quella di Dreamweaver. Quest’ultima operazione può essere eseguita velocemente facendo clic sul pulsante Passa a modalità Ridotta situato in alto a destra nella inestra. In alternativa, è possibile posizionarsi, in Dreamweaver, nel punto della pagina web in cui si vuol inserire l’oggetto, e, dopo essere passati a

176

13.2. Adobe Fireworks

Figura 13.1: Interfaccia del programma Adobe Bridge. La inestra è dominata dal pannello Contenuto situato al centro. Sulla sinistra sono posizionati alcuni pannelli che hanno la funzione principale di consentire all’utente di navigare fra le risorse e di iltrarle per visualizzare solo quelle di proprio interesse. Sulla destra troviamo, invece, un pannello che consente di visualizzare un’anteprima del contenuto del ile e i relativi metadati, che forniscono una gran quantità di informazioni sul documento e possono essere modi icati (almeno per quel che riguarda le proprietà controllabili dall’utente) direttamente dal pannello di Bridge.

Bridge e aver individuato il ile, eseguire il comando File > Posiziona > In Dreamweaver dalla barra dei menu della inestra di Bridge.

13.2

Adobe Fireworks

Adobe Fireworks è un programma che consente di creare, modi icare e ottimizzare contenuti gra ici destinati al web. Esso consente di lavorare sia su immagini raster, sia su immagini vettoriali, e di creare animazioni semplici ed effetti di rollover. Nelle ultime versioni, il software è stato sviluppato dalla Adobe (in origine era prodotto da Macromedia, 177

13. I come Dreamweaver) per essere utilizzato in particolare per la prototipazione di siti e la progettazione di intere interfacce destinate ad essere utilizzate nelle pagine web.

Figura 13.2: Interfaccia del programma Adobe Fireworks. L’organizzazione generale della schermata è simile a quella di Dreamweaver e altri programmi della Creative Suite, anche se la maggior parte strumenti sono speci ici

Fireworks è il programma con cui Dreamweaver si integra meglio, grazie ad una scelta progettuale che risale ai tempi di Macromedia. Anche Photoshop è in grado di eseguire molti dei compiti per cui viene utilizzato Fireworks; tuttavia, quest’ultimo è più prettamente orientato al lavoro sulla gra ica destinata al web. Lavorando con questo programma, è possibile generare solo gli elementi gra ici che verranno successivamente inseriti all’interno delle pagine web, oppure è possibile anche esportare il codice che descrive 178

13.3. Adobe Photoshop un oggetto con struttura complessa e il suo comportamento (ad esempio il rollover o la comparsa di menu). Dreamweaver è in grado di importare il codice generato da Fireworks, grazie al comando Inserisci > Oggetti immagine > HTML di Fireworks presente nella barra dei menu, e al corrispondente comando riportato nella categoria Comune del pannello Inserisci. Un’altra possibilità interessante è quella che consente in Dreamweaver di aprire in Fireworks elementi gra ici, segnaposto immagine e tabelle generate da Fireworks stesso, al ine di modi icarli. Verrà attivata una speciale sessione di modi ica che potrà essere terminata facendo semplicemente clic sul pulsante Completato che apparirà in alto nella inestra Documento di Fireworks, evitando di dover eseguire in modo esplicito il salvataggio e l’esportazione tramite gli appositi comandi. Se si intende avviare la modi ica di un oggetto immagine in Fireworks (e non, ad esempio, in Photoshop) è necessario controllare che nella categoria Tipi di ile/editor delle preferenze di Dreamweaver sia impostato Fireworks come editor associato al tipo di ile ai cui si è interessati.

13.3

Adobe Photoshop

Adobe Photoshop è senza dubbio il più popolare software di elaborazione di immagini. Gli strumenti che questo programma mette a disposizione per lavorare su immagini raster, cioè basate su pixel (qualsiasi sia la loro origine: fotogra ie catturate con fotocamera digitale o acquisite con scanner, documenti di gra ica pittorica, …) sono molto potenti ed ef icaci. 179

13. I

Figura 13.3: Interfaccia del programma Adobe Photoshop. Il programma ampiamente è conosciuto per potenza dei suoi strumenti, alcuni dei quali sono visibili nella igura.

Da quando Dreamweaver è sviluppato da Adobe, a seguito dell’acquisizione di Macromedia (quindi a partire dalla versione CS3), è possibile, nel momento in cui si inserisce un’immagine, scegliere un ile PSD (il formato nativo dei documenti di Photoshop) ed effettuare l’inserimento direttamente da un ile di progetto, senza dover eseguire in Photoshop un’operazione di esportazione per ricavare un ile in un formato compatibile con il web. E anche possibile copiare dal documento di Photoshop l’intero contenuto o una parte di esso e incollarlo nella pagina in Dreamweaver. Quando si inserisce o si incolla un’immagine da un ile PSD , Dreamweaver mostra una inestra di dialogo che consente di scegliere i parametri di esportazione, in particolare le dimensioni, il formato di ile e le relati180

13.4. Adobe Flash ve impostazioni. Una volta confermate le impostazioni (facendo clic sul pulsante Ok), apparirà una seconda inestra di dialogo tramite la quale si potrà salvare il ile de initivo che verrà inserito nella pagina. Sarà suf iciente scegliere il nome e la posizione, e completare l’operazione facendo clic su Ok. Anche in Photoshop, come in Fireworks, è possibile creare interi layout di pagine ed esportarli per essere lavorati con Dreamweaver. Le alternative sono sempre 2: esportare le immagini singole e inserirle in una struttura creata in Dreamweaver, oppure esportare anche il codice che descrive l’intera pagina e lavorare su questo ile per completare la pagina stessa. Quest’ultima soluzione rende il lavoro più veloce, ma il codice generato automaticamente dai programmi di gra ica non è ottimizzato; quindi sarebbe meglio creare la struttura del documento in Dreamweaver.

13.4

Adobe Flash

Adobe Flash Professional è un programma di animazione vettoriale utilizzato per creare gra ica animata da includere all’interno di pagine web. La tecnologia Flash consente anche di sviluppare interi siti o applicazioni che, in genere, sono distribuite su web. Il principale vantaggio fornito dall’integrazione fra Dreamweaver e Flash consiste nella possibilità di aprire in modi ica gli oggetti Flash inseriti in una pagina web direttamente da Dreamweaver, come avviene anche per Fireworks. Il meccanismo è esattamente lo stesso, compresa la possibilità di completare l’operazione facendo clic sul pulsante Completato 181

13. I

Figura 13.4: Interfaccia del programma Adobe Flash Professional. Nella igura si puĂ˛ riconoscere, nella parte inferiore della schermata, la linea temporale, che consente di de inire lâ&#x20AC;&#x2122;andamento dellâ&#x20AC;&#x2122;animazione.

che compare nella inestra di Flash, invece che eseguire le operazioni di salvataggio ed esportazione o pubblicazione in modo esplicito.

182