Un Tutorial

Questo tutorial ti mostra come usare Dreamweaver per editare ed aggiornare un sito web. In questo tutorial, editerai un sito web per una compagnia fittizia, Olivebranch Gourmet Foods, una fattoria che vende prodotti alimentari. Visitando il sito web di Olivebranch, i clienti potranno leggere la specialit giornaliera e scorrere i vini del gourmet, i formaggi, le senapi, e le offerte di olio nel catalogo online. I clienti potranno anche imparare di pi su Olivebranch e gli eventi che finanziano Olivebranch. Lungo il cammino, imparerai a: Sfogliare le pagine di Anteprima Definire un sito locale Scegliere le propriet della pagina come background e i colori del link Creare una mappa del sito Creare i links Creare un layout con i layers e convertirli in tavole Usare una traccia immagine Editare una tavola Configurare il testo con gli stili Applicare una maschera Attaccare i comportamenti Inserire un film Flash Se non hai una versione stampata di Usare Dreamweaver, puoi trovare pi facile seguire il tutorial che stampare le pagine dal tuo browser. Puoi anche caricare una versione stampabile dal sito web di Macromedia. Nota: Questo tutorial dimostra delle caratteristiche che sono supportate solamente nei browsers 4.0 o superiori.

Un Giro Guidato su Dreamweaver

Prima di iniziare, guarda i films Guided Tour nelle Pagine Help di Dreamweaver per familiarizzarti con le sue caratteristiche.

Preview del sito web finito

Per vedere il sito di Olivebranch finito: 1 In Dreamweaver, scegli File> Open. La cartella di applicazione Navigate the Dreamweaver, poi apri la cartella Tutorial, e poi la cartella Olivebranch_site. 2 Nella cartella Olivebranch_site, seleziona index.htm per aprire la pagina principale di Olivebranch nella finestra del Documento.

Non editare questa pagina, poich gi completa. Edita una versione alternativa di questa pagina. 3 Scegli File> Preview in Browser, poi seleziona un browser con cui vedere la pagina principale di Olivebranch. (Usa un browser 4.0 per vedere questo sito.)

Nota: Devi aver installato il Flash Player come default del tuo browser per vedere lo specials settimanale sulla pagina principale di Olivebranch. Se non hai il Flash Player, localizza l'installer nella cartella Flash sul CD di Dreamweaver o caricalo da http://www.macromedia.com/shockwave/download /. 4 Passa il mouse sui quattro articoli sul lato sinistro della pagina (about, events, e cos via) ed osserva che gli articoli si evidenziano per indicare che essi sono link attivi. Clicka su ognuno di questi articoli per esplorare le pagine. Nota: La sezione basket del sito non usata. 5 Chiudi il browser quando vedi che sei arrivato in fondo al sito.

Come sono sistemati i files del Tutorial

Sia i files HTML completi che quelli parzialmente completi usati in questo tutorial sono nella cartella Olivebranch_site, nella cartella Tutorial. Le immagini e gli altri file associati per il sito sono nelle cartelle sotto la cartella Olivebranch_site. (Il percorso completo alla cartella di Olivebranch_site varier, in funzione di dove stato installato Dreamweaver 2.0.) Ogni file ha un nome significativo per esempio, il file HTML per la pagina degli eventi sponsors di Olivebranch chiamato events_main.htm. I files parzialmente completi coni quali dovrai lavorare non hanno nomi simili a quelli del sito completo, ma essi iniziano con DW2_; la versione parziale di events_main.htm, per esempio, chiamata DW2_events_main.htm.

Definire un sito locale

Per iniziare a lavorare con Dreamweaver, devi creare di un sito locale. Questo sito definisce la struttura delle pagine che stai creando. Un sito un'ubicazione deposito di tutti i documenti e files che appartengono al sito web. Un sito locale richiede un nome ed una cartella radice locale che indica a Dreamweaver dove vuoi memorizzare i files di tutto il sito. Dovresti creare un sito locale per ogni sito web sul quale lavori.

Per questo tutorial, specificherai la cartella Olivebranch_site come cartella del sito locale. Per creare un sito locale: 1 Apri il dialog box Site Definition in Dreamweaver come segue: Sul Macintosh, scegli Site> New Site. In Windows, scegli File> New Site. 2 3 Nel dialog box Site Definition, assicurati che sia selezionato Local Infonell'elenco Category. Chiama il tuo sito My_Tutorial scrivendo nel campo Site Name. Il nome del tuo sito locale essenzialmente un nomignolo che conduce direttamente alla cartella che hai definito come il tuo sito locale. 4 Clicka sulla cartella del file a destra del campo Local Root Folder e naviga fino alla cartella Olivebranch_site, poi clicka su Select.

Nota: Il percorso finito alla cartella di Olivebranch_site varier, in funzione di dove hai installato Dreamweaver 2.0. 5 Clicka su OK, poi clicka su Create quando ti viene chiesto di creare un cache file per il sito. Il Caching dei files nella cartella Olivebranch_site crea un record di file esistenti cos che Dreamweaver pu aggiornare rapidamente il link quando ti muovi, rinomini, o cancelli un file. La finestra di Sito ora mostra un elenco di tutte le cartelle e file che il sito locale My_Tutorial contiene. L'elenco si comporta anche come un file manager, permettendoti di copiare, incollare, cancellare, muoverti, e aprire i files che devi cercare o guardare sul tuo computer.

Chiudi la finestra del Documento index.htm, ma lascia la finestra Sito aperta.

Editare l'home page Olivebranch

Adesso che hai una struttura setup per il sito Olivebranch che stai creando, apri la versione incompleta dell'home page. Creerai i links e sceglierai un colore background, un'immagine background, ed un titolo per la pagina cos che assomigli alla home page completa di Olivebranch. Per aprire l'home page parzialmente completa di Olivebranch in Dreamweaver: 1 Dalla finestra Site, doppio-click su DW2_index.htm. 2 Chiudi la finestra Site.

Definisci il colore e l'immagine background

Se usi un'immagine ed un colore background, il colore appare mentre carichi l'immagine, creando un background pi attraente quando gli utenti attendono il caricamento dell'immagine. Se l'immagine background ha i pixels trasparenti, si intravedr il colore background. Per definire un colore background per la pagina: 1 2 Scegli Modify> Page Properties per aprire il dialog box Page Properties. Cambia il default del colore background scrivendo #FFFFCC nel campo Background. In questo caso, conosci l'essatto colore background voluto. Puoi scegliere anche un colore dalla palette o puoi usare il contagocce per scegliere un colore da un oggetto sulla pagina. 3 Clicka su Apply per applicare il colore background. Appena clicki sul dialog box Apply nella Page Properties, la pagina aggiorna nella finestra del Documento.

adesso, specifica un'immagine del background per la pagina. Per definire un'immagine background per la pagina: 1 2 Clicka su Browse (Windows) o su Choose (Macintosh) vicino al campo Background Image. Scegli Home_bg.jpg nella cartella Assets di Olivebranch_site.

3 4

Clicka su Applyi per aggiungere l'immagine background alla pagina. Lascia il dialog box del Page Properties aperto per adesso. Col colore e l'immagine background in posizione, la home page sulla quale stai lavorando dovrebbe sembrare adesso questa:

Definisci il titolo della pagina

Il titolo di una pagina di HTML aiuta gli utenti a seguire le tracce di quello che stanno vedendo quando scorrono le pagine; identifica anche la pagina nelle liste del bookmark. Se non intitoli una pagina, essa apparir nella fin estra del browser come Untitled Document. Per definire il titolo di una pagina: 1 Nel campo Title del dialog box Page Properties, scrivi Olivebranch Gourmet Foods per nominare la home page, poi Clicka su OK. La title bar si aggiorna per mostrare il nome che hai dato al file. 2 Scegli File> Save per salvare le modifiche fatte.

Crea una mappa del sito

Una mappa del sito fornisce un alto livello della rappresentazione visuale della struttura di un sito locale. Puoi usare anche la mappa di sito per aggiungere files nuovi al sito, per aggiungere, rimuovere, e modificare i links, e per creare un'immagine BMP o PICT del sito che puoi esportare e stampare da un'applicazione di editing dell'immagine. La home page per di un sito appare sempre in cima alla mappa del sito; sotto la home page puoi vedere quali files linka la home page. Se la cartella che definisci come radice del sito contiene un file chiamato index.htm, Dreamweaver la user automaticamente come home page base della mappa del sito; poich la home page del tuo sito My_Tutorial chiamata DW2_index.htm, ridefinirai la home page mentre personalizzi l'aspetto della mappa del sito. Per creare una mappa del sito: Nella finestra Site, premi e rilascia l'icona Site Map nell'angolo in alto a sinistra e scegli Map e Files dal menu pop-up.

Adesso ridefinisci la home page per il sito per usare la versione tutorial della home page invece della versione completata. Per ridefinire la home page e personalizzare l'aspetto della mappa del sito: 1 Apri il dialog box Site Definition come segue: In Windows, scegli View> Layout dalla finestra Site del menu bar. Sul Macintosh, scegli Site> View Map View> Layout. 2 3 Seleziona Site Map Layout nell'elenco Category del dialog box Site Definition. Specifica la nuova home page del nuovo sito clickando sulla prossima cartella del file nel campo Home Page e navigando a DW2_index.htm nella cartella Olivebranch_site della cartella Tutorial. Setta il Number of Columns a 3.

Clicka su OK chiudere il dialog box Site Definition e ritornare alla finestra Site. Il Site Map si aggiorna per mostrare le modifiche, con la versione tutorial della home page adesso in cima alla mappa del sito.

Adesso, la versione tutorial della home page contiene solamente un link. Potrai aggiungere pi link alla tutorial home page in un istante. 6 Lascia la finestra Site aperta per adesso, cos potrai vedere come la mappa del sito si aggiorna quando aggiungi i links allla home page.

Creare i links
Le immagini nella colonna sinistra della home page guida i visitatori attraverso il sito di

Olivebranch. L'immagine in cima, gi linka alla pagina appropriata sul sito. Aggiungerai i links a due altre immagini, cos che es se saranno ben collegate alle altre pagine sul sito. (Non lavorerai con l'immagine gift basket.) Prima, aggiungi un link dall'evento grafica alla pagina Events usando l'ispettore Properties. Per creare un link usando l'ispettore Properties: 1 Clicka sulla title bar della finestra del Documento che contiene DW2_index.htm per renderlo attivo, o seleziona il nome del file dal menu Window. 2 Clicka sugli eventi immagine per selezionarlo nella finestra del Documento. Nota: Non un doppio-click sull'immagine, o Dreamweaver ti chieder di scegliere un altro file per sostituire l'immagine. 3 > Properties per aprire l'ispettore Properties se gi non aperto. L'ispettore Properties mostra le informazioni sull'immagine selezionata.

4 Nell'ispettore Properties, clicka sulla cartella del file vicino al campo vuoto Link. 5 Nel dialog box Select HTML File, scorri fino alla cartella Olivebranch_site, scegli DW2_events_main.htm, e clicka su Select. Il file al quale ti stai collegando appare nel campo Link dell'ispettore Properties. Adesso aggiungerai un link al catalogo grafico usando l'ispettore Properties e la finestra Site. Per creare un link usando l'ispettore Properties e la finestra Site: 1 Clicka sulla title bar della finestra Site per renderlo attiva, o scegli Window> Site File. 2 Ridimensiona la tua finestra del Documento, se necessario, cos che possa posizionare il lato Sinistro della finestra del Documento ed il lato della Finestra Site una accanto all'altra.

3 Clicka sull'immagine del catalogo per selezionarla nella finestra del Documento. 4 Nell'ispettore Properties, trascina l'icona puntiforme del file (localizzata vicino al campo Link) alla finestra Site e punta al file DW2_cat_main_index.htm.

Il pieno percorso al file appare nel campo Link nell'ispettore Properties per l'immagine del catalogo.

Appena rilasci il bottone del mouse, la mappa di sito si aggiorna per mostrare solo il link aggiunto. Un segnale positivo (Windows) o una freccia espansa (Macintosh) vicino ad ogni articolo nella mappa del sito indica che ci sono pi articoli associati con quell'articolo. Clicka sul segnale positivo o freccia espansa per espandere l'albero e mostrare gli articoli associati; clicka sul segnale meno (-) o freccia dell'espansore per collassare la vista della mappa del sito. 5 Chiudi l'ispettore Properties, ma lascia la finestra Site aperta per adesso. 6 Scegli File> Salve per salvare tutte le modifiche fatte alla home page. 7 Scegli File> Close per chiudere la pagina.

Crea un layout di pagina complesso

Come con l'home page di Olivebranch, la pagina About Us ha un relativo file tutorial che gi stato iniziato per te. Potrai completare la pagina tutorial About Us, adattando il layout della versione completa. Comincerai ad aprire la versione completata della pagina About Us in un browser cos da poterti riferire ad esso mentre lavori. Per il preview la pagina i completata di About Us in un browser: 1 Scegli File> open e seleziona about_main.htm nella cartella Olivebranch_site all'interno della cartella Tutorial. Non editare questa pagina, poich appartiene al sito completato.

10

2 Scegli File> Preview in Browser e seleziona un browser 4.0. Lascia la finestra del browser aperta nel background come prossimo riferimento. 3 In Dreamweaver, scegli File> Close per chiudere la finestra del Documento che contiene la pagina completata di About Us. Per aprire il file parzialmente completato About Us in Dreamweaver: Nella finestra Site di Dreamweaver, doppio-click sul file DW2_about_main.ht.

Convertire una tavola in layers

Le tavole sono molto utili per creare layout di pagina complessi, ed esse sono supportate in nei browsers versioni 3.0 e 4.0. I Layers sono anche utili per creare layout di pagina complessi, cos che puoi riposizionare facilmente elementi della pagina che sono stati messi nei layers trascinandoli in posizione. I Layers non sono supportati dal browser 3.0. Con Dreamweaver ti puoi avvantaggiare delle ottime caratteristiche delle tavole e dei layers passando da un l'ayer all'altro o da una tavola all'altra rapidamente finch non sei soddisfatto dei risultati del disegno della pagina. La pagina risultante, nel formato di tavola, sembrer la stessa nel browser 3.0 e 4.0. La pagina About Us parte con una tavola per formattare. Comincia a convertire le celle esistenti della tavola in layers. Per convertire le celle esistenti della tavola in layers: 1 Scegli Modify > Layout > Reposition Content Using Layers. 2 Nel dialog box che appare, deseleziona le opzioni Show Grid e Snap To Grid, ma lascia le altre opzioni selezionate. 3 Clicka su OK il per chiudere il dialog box e convertire le celle della tavola in layers. Le celle della tavola divenute layers, ed il Layer palette appaiono per aiutarti a seguire le tracce di tutti i layers sulla pagina corrente.

11

Aggiungi un'immagine di tracciamento per guidare il tuo layout

Puoi usare un'immagine di tracciamento JPG, GIF, o PNG per creare un'immagine guida per creare una pagina web prima disegnata in un'applicazione grafica. Un'immagine di tracciamento agisce come una guida di fondo come disponessi una pagina fuori dalla finestra del Documento. Userai l'immagine di tracciamento per posizionare i layers nel documento About Us cos che il disegno della pagina sia uguale sotto all' immagine del suo tracciamento. Per caricare un'immagine di tracciamento: 1 Scegli View > Tracing Image > Load. 2 Seleziona About_us_comp.gif nella cartella Assets, poi clicka Select. 3 Nel dialog box Page Properties, usa lo slider Image Transparency per settare l'opacit per l'immagine di tracciamento al 50%.

12

Settare il livello di trasparenza al 50% provoca un affievolimento dell'immagine di tracciamento nella finestra del Documento, rendendo pi facile per te distinguere tra l'immagine di tracciamento e gli elementi editabili sulla pagina. 4 Clicka su OK per aggiungere l'immagine di tracciamento e chiude il dialog box. Un'immagine di tracciamento appare nel workspace, ed i layers esistenti appaiono in cima ad essa, sebbene non ancora allineata con l'immagine di tracciamento. (Se un'immagine di tracciamento non appare, assicurati che essa sia attivata a Show quando scegli View> View > Tracing Image > Show.)

Quando carichi un'immagine di tracciamento, l'immagine e il colore di background del documento e non sono visibili nella finestra del Documento ma appariranno quando vedi la pagina in un browser. L'immagine di tracciamento stessa visibile solo quando stai editando la pagina nella finestra del Documento e non apparir mai quando la pagina caricata in un browser.

Posizionare i layers
Adesso trasporta i layers che hai creato fuori della tavola per adattare gli elementi nell'immagine di tracciamento e duplicare il disegno. Per posizionare i layers sulla pagina: 1 Clicka sul bordo del layer contennte il testo su Olivebranch per selezionarlo. Un layer selezionato sembra come questo:

2 Afferra il manico del layer e trascina (o usa la freccia adatta) per muoverlo sul generico testo nell'immagine di tracciamento, ridimensionando il layer se c' bisogno di adattare la

13

dimensione dell'area del blocco del testo nell'immagine di tracciamento. Poich i due blocchi contengono testo diverso, le parole non si allineeranno perfettamente sull'immagine di tracciamento nel workspace, ma poich l'immagine di tracciamento appare solamente nel workspace, il testo nel documento layer apparir normale in un browser.

3 Segui gli stessi passi con il layer contente la lettera O per muoverlo sulla lettera O nell'immagine di tracciamento.

Aggiungere nuovi layers

Adesso aggiungi i layers per accoppiare le parti dell'immagine di tracciamento che non appaiono ancora sulla tua pagina. Per aggiungere nuovi layers ad una pagina: 1 Clicka un'area bianca nella finestra del Documento. Assicurati che il cursore non sia in un layer esistente, o creerai un annidamento di layers che non ti permetter in seguito di convertire i layers in una tavola. 2 Scegli Insert> Layer per aggiungere un nuovo layer alla pagina. 3 Muovi il layer sull'area quadrata nell'immagine di tracciamento che dice "Diana close-up photo ". Poich l'opzione Prevent Overlaps selezionata nel Layer palette, non puoi posizionare i layers uno in cima all'altro. Dovresti ridimensionare il layer per trascinarlo in una posizione che non ricopre u altro layer altro. 4 Seleziona il layer e ridimensionalo, come necessario, per accoppiare l'area nell'immagine di tracciamento. 5 Ripeti questi passi per aggiungere pi layers alla pagina sull'area dell'immagine di tracciamento chiamata "Farm photo (con figlia)" e "Tree photo.".

Aggiungere immagini
Adesso, inserisci i disegni in ogni layer, poi allineali sull'immagine di tracciamento.

14

Per inserire i disegni nei layers e allinearli sull'immagine di tracciamento: 1 Un solo click sul layer "Diana close-up photo" per metterci il cursore sopra senza selezionarlo. Un layer attivo con un cursore sopra sembra come questo:

2 Scegli Insert > Image ed scegli about_diana.jpg nella cartella Assest per aggiungere l'immagine al layer. 3 Dopo che l'immagine appare sul layer, clicka sul bordo del layer per selezionarlo interamente, poi usa i tasti freccia up, down, left, e right per allineare il grafico sull'immagine di tracciamento. (Se hai bisogno, ridimensiona nuovamente il layer per adattare l'area dell'immagine di tracciamento area pi precisamente.) 4 Ripeti questi passi, aggiungendo l'immagine about_daughter.jpg dalla cartella Assest al layer "Farm photo (with daughter)" e l'immagine about_tree.jpg dalla cartella Assest al layer "Tree photo".

5 Chiudi il Layer palette.

Convertire i layers in una tavola

Adesso che hai messo esattamente la pagina come vuoi, converti i layers in una tavola cos che la pagina sar mostrata accuratamente nei browsers 3.0 e 4.0. Per convertire tutti i layers in una sola tavola: 1 Scegli Modify > Layout > Convert Layers to Table. 2 Clicka su OK per accettare le opzioni di default nel dialog box Convert Layers to Table. Dreamweaver non pu creare una tavola da layers sovrapposti perch hai usato l'opzione

15

Prevent Overlap che costringe il layer a posizionarsi quando hai creato gli stessi layers dalla tavola originale.

Visiona la pagina in un browser

Adesso visiona la pagina About Us da te redatta. Per visionare la pagina in un browser: 1 Non devi salvare un documento prima di averlo visionato. Tutte le funzioni riferite ai browsers lavorano durante il preview di un documento.

2 Compara il file col quale hai appena lavorato con quello completato della pagina About Us che hai aperto prima in un browser. 3 Quando il file pronto per essere visionato, chiudi ambedue le finestre del browser. 4 Ritorna a Dreamweaver e scegli File> Save per salvare le modifiche fatte sulla pagina About Us. 5 Scegli File > Close per chiudere la pagina.

16

Editare una tavola

La pagina di Eventi di Olivebranch elenca concerti, dimostrazioni, e feste sponsorizzati dalla fattoria di Olivebranch. Gli eventi di Olivebranch sono mostrati in una tavola che descrive l'ubicazione, la data, e la natura di ogni evento. Il file tutorial per la pagina Events contiene una tavola finita degli eventi. Editerai questa tavola trasportando le colonne ed ordinando le informazioni contenne nelle sue celle. Per aprire il tutorial della pagina Events: 1 Nella finestra Site, doppio-click sul listato per DW2_events_main.htm. Se non nella finestra Site, scegli Window > Site Files per aprirlo o renderlo attivo. La tavola sulla pagina sembra come questa:

2 Lascia la finestra Site aperta, ma passala nel background.

Formattare la tavola
Muovi la colonna Where dal lato destro della tavola a sinistra per renderla prima colonna nella tavola. Per muovere le colonne in una tavola: 1 Clicka la cella Where in cima alla colonna, poi trascina il cursore del mouse sull'ultima cella nella colonna per selezionare l'intera colonna. Puoi selezionare anche una colonna lasciando il cursore del mouse esattamente sul bordo della cima della colonna, senza clickare finch appare una freccia di selezione; allora clicka una volta per selezionare l'intera colonna. (Se metti invece il cursore del mouse sul bordo della tavola, verr selezionata l'intera tavola.) 2 Scegli Edit > Cut. 3 Clicka sulla cella When. (Non selezionare la cella.) 4 Scegli Edit > Paste. La colonna Where adesso la prima colonna nella tavola.

17

Ordinare la tavola
Adesso, ordina alfabeticamente le celle nella tavola, dalla ubicazione. Per ordinare le celle della tavola: 1 2 Clicka dovunque nella tavola e scegli Commands > Sort Table. Nel dialog box Sort Table, specifica le seguenti opzioni: Sort By: Colonna 1 Order: Alphabetically Ascending Poi Da: Colonna 2 Order: Numerically Ascending

Il primo ordinamento (Sort by) ordina la tavola alfabeticamente, secondo i contenuti della prima colonna. Il secondo (Then by) ordina la tavola numericamente, dai contenuti della seconda colonna.

Adesso formatterai la tavola centrando i contenuti delle celle nellla colonna When. Per centrare i contenuti delle celle della tavola: 1 Clicka sulla la prima cella sotto l'intestazione della tavola When e trascina in fondo alla tavola per selezionare tutte le celle sotto la colonna When.

18

2 Scegli Modify > Selection Properties per aprire l'ispettore Properties. 3 Seu non vedi un menu Horz nell'ispettore Properties, clicka sulla freccia per espandere nell'angolo in basso a destra per mostrare un elenco finito delle propriet.

4 Scegli Center dal menu Horz. I contenuti di tutte le celle nella colonna When sono centrati.

Formattare un testo usando stili personalizzati

Uno stile un gruppo di attributi di formattazione che controllano l'aspetto di un blocco o di un campo di testo. Un foglio di stile include tutti gli stili per un documento. Crea uno stile personalizzato per formattare le intestazioni della tavola sulla pagina Events. Per creare uno stile personalizzato: 1 2 Scegli Window > Styles per aprire la Style palette. Clicka sul dialog box Style Sheet per aprire il dialog box Edit Style Sheet.

3 4 5

Clicka sul New nel dialog box Edit Style Sheet. Assicurati che la selezione Type sia Make Custom Style (class). Scrivi .tablehead per nominare lo stile nuovo e Clicka su OK.

19

Con Type selezionato nell'elenco sulla sinistra del dialog box Style Definition, scegli i seguenti settaggi di formattazione per il nuovo stile: Fonte: Arial, Helvetica, sans-serif Dimensione: 18 points Style: normale

7 8

Clicka su OK per chiudere il dialog box Style Definition. Clicka si Done per chiudere il dialog box Edit Style Sheet, che adesso mostra lo stile .tablehead.

Adesso, userai la Style palette per applicare lo stile .tablehead alle intestazioni della tavola sulla pagina Events. Per applicare un stile personalizzato: 1 Nella finestra del Documento, seleziona tutte le tre celle di intestazione della tavola premendo il tasto Ctrl (Windows) o il tasto Command (Macintosh) e clickando una sola volta in ogni cella. 2 Clicka su .tablehead nella Style palette.

Le celle mostrano il nuovo stile nel documento.

3 Chiudi la Style palette. 4 Salva le modifiche fatte nella pagina Events scegliendo File> Save. 5 Scegli File> Close per chiudere la pagina.

20

Applicare una maschera

Puoi usare le maschere per creare maschere documenti per il tuo sito che ha una struttura e un'aspetto comune. Le maschere sono utili se vuoi ad assicurati che tutte le pagine di sito abbiano certe caratteristiche. Una volta applicata una sola maschera ad un gruppo di pagine, puoi editare le informazioni su tutte le pagine editando la maschera e riapplicandola poi a quelle pagine. Mentre i singoli elementi di ogni pagina (come il testo che descrive l'articolo da vendere) rimanngono invariati, la maschera comune degli elementi (come le barre di navigazione) aggiornata su tutte le pagine che la usano. La pagina Olivebranch Catalog linka a molte pagine del prodotto che descrivono i singoli prodotti che la compagnia offre in vendita. Poich applicherai una differente maschera a ogni pagina usando un identico layout e formato, le potrai creare usando una sola maschera. In questa sezione, cambierai una maschera esistente per cambiare le pagine del prodotto sulle quali gi stata applicata. Poi applicherai una maschera diversa per quelle pagine d el prodo per riformattarle senza alterare i loro singoli contenuti.

Vedere le pagine prodotte

Comincia vedere le pagine completate del catalogo in un browser. Per aprire la pagina completata di Olivebranch Catalog: 1 Scegli File> Open e seleziona cat_main_index.htm. 2 Scegli File > Preview in Browser per aprire la pagina in una finestra del browser 3 Clicka sui link per i vini, i formaggi, le senapi, e gli oli per vedere un esempio della pagina di prodotto. Osserva che tutte le pagine di prodotto condividono la stessa barra di navigazione in cima alla pagina. Oltre a contenere i links alle pagine di prodotto, la barra di navigazione include un link alla pagina principale del Catalogo e (nei disegni al lontano diritto della barra) un link per tornare all'home page Olivebranch. 4 Chiudi il browser quando hai visionato la pagina del Catalogo principale e le pagine del prodotto ad esso collegate. 5 Ritorna a Dreamweaver e scegli File> Close per chiudere la pagina del Catalogo completata. Adesso apri le pagine del catalogo incompleto in un browser. Per aprire la versione tutorial della pagina del Catalogo: 1 Trasporta la finestra Site al primo piano scegliendo Window > Site Files. 2 Trova DW2_cat_main_index.htm nell'elenco e un doppio-click su di esso per aprirlo nella finestra del Documento.

21

3 Premi F12 per visionare la pagina del Catalogo tutorial in un browser. 4 Clicka sui link per i vini, i formaggi, le senapi, e gli oli per vedere le pagine di prodotto sulle quali lavorerai. 5 Dopo aver esplorato i link alle pagine del prodotto, chiudi la finestra del browser. 6 Ritorna a Dreamweaver e scegli File> close per chiudere la pagina del Catalogo principale.

Editare la maschera
Adesso cambierai la maschera per le pagine di prodotto per fissare la barra di navigazione interrotta. Una volta riparata la barra di navigazione nella maschera, riapplicherai la maschera alle pagine di prodotto cos che la bar ra di navigazione sia aggiornata per tutte le pagine che usano la maschera. Per aprire il file della maschera nella finestra del Documento: Nella finestra Site, un doppio-click su DW2_cat_product.dwt nella cartella Templates della cartella Olivebranch_site. Ogni maschera contiene sia regioni chiuse che regioni editabili. Le regioni chiuse possono essere editate solamente nella maschera stessa; esse appaiono in un colore evidenziato su tutte le pagine alle quali la maschera applicata. Le regioni editabili sono placeholders per il contenuto che unico per ogni pagina alla quale la maschera applicata. Nella maschera le regioni editabili sono evidenziate.

22

In questa maschera, la barra di navigazione in una regione chiusa, mentre le aree per le fotografie di prodotto e il testo sono editabili per ogni pagina di prodotto. Adesso, edita il file della maschera. Prima, aggiungi un link al catalogo grafico. Per aggiungere un link dal catalogo grafico alla pagina del Catalogo principale: 1 In singolo click sul catalogo grafico. 2 Scegli Window > Properties per aprire l'ispettore Properties. 3 Nell'ispettore Properties, clicka sulla cartella del file vicino al campo Link e seleziona il file DW2_cat_main_index.htm dalla cartella Olivebranch_site. 4 Lascia l'ispettore Properties aperto. Adesso, aggiungi un grafico nell'angolo in alto a destra della pagina e collegalo alla home page Olivebranch. Per aggiungere un grafico che linka alla home page Olivebranch: 1 Clicka nella cella vuota a destra dell'immagine del catalogo. 2 Scegli Insert> Image e seleziona cat_nav_photos.jpg nella cartella Assest. Il grafico appare nella cella.

3 Assicurati che il grafico appena aggiunto alla cella ancora sia selezionato. (Se non lo , un singolo click per selezionarlo.) 4 Nell'ispettore Properties, clicka sulla cartella del file vicino al campo Link e seleziona il file DW2_index.htm dalla cartella Olivebranch_site. 5 Chiudi l'ispettore Properties. Per riapplicare la maschera alle pagine di prodotto nel catalogo: 1 Scegli File> Save per salvare le tue modifiche. 2 Quando ti viene chiesto se vuoi aggiornare tutti i documenti nel tuo sito locale che usa questa maschera, clicka YES. Un dialog box Update Pages mostra lo status delle pagine nel sito quando la maschera viene riapplicata. 3 Dopo che tutti i file sul sito sono stati aggiornati, chiudi dialog box Update Pages. Poich la pagina principale del Catalogo contiene links ad ognuna delle pagine di prodotto nel sito, puoi usarlo per visionare rapidamente tutte le pagine di prodotto alle quali hai riapplicato la maschera. Apri la pagina principale del Catalogo in un browser, poi clicka sui link alle pagine di prodotto. Per vedere pagine di prodotto aggiornate: 1 Un doppio-click su DW2_cat_main_index.htm nella finestra Site per riaprirlo nella finestra del Documento.

23

2 Premi F12 per visionare questa pagina nel tuo browser primario, o scegli File> Preview in Browser per selezionare un browser diverso. 3 Clicka sui link per i vini, i formaggi, le senapi, e gli oli per andare in ognuna delle pagine di prodotto. 4 Su ogni pagina di prodotto, clicka sul catalogo ed sui links dell'ome page Olivebranch aggiunti alla barra di navigazione per vedere come le modifiche che hai fatto nella maschera sono stati applicate alle pagine. 5 Chiudi il browser quando finisci di provare i link nella barra di navigazione alle pagine di prodotto. 6 Ritorna a Dreamweaver e scegli File> Close.

Applicare una maschera diversa ad una pagina

Puoi applicare una nuova maschera ad una pagina anche se la pagina gi usa una maschera. Il contenuto della pagina rimane immutato finch la nuova maschera contiene la stessa regione editabile nominata come la maschera linkata al documento. Questa tecnica utile quando vuoi cambiare l'aspetto di un gruppo di pagine senza alterare il singolo contenuto di quelle pagine. Per esempio, un catalogo pu avere versioni estive e invernali. Puoi creare un disegno completamente nuovo senza editare il contenuto usando una maschera diversa per cambiare le immagini di background e i colori della pagina, o riordinando le posizioni delle regioni editabili. Qui applicherai una maschera per l'inverno ad una pagina di prodotto per aggiornare il suo aspetto per una nuova stagione. Per applicare una nuova maschera ad una pagina esistente: 1 Nella finestra Site, un doppio-click su DW2_cat_wines.flc.htm per aprire la pagina del prodotto per i vini nella finestra del Documento.

Sezioni della pagina che sono evidenziate in un colore diverso identificano regioni chiuse che possono essere editate solamente nella maschera usata per questa pagina. (Se non vedi la differenza di colore tra le regioni sulla pagina, scegli Modify> Preferences, seleziona Highlighting dall'elenco Category, e seleziona l'opzione Show vicina a Locked Regions. Se ancora non vedi la differenza di colore, scegli View > Invisible Elements.)

24

Scegli Window> Templates per aprire la Template palette. La Template palette contiene un elenco di tutto il file maschera (dwt) nel sito locale, localizzato nella cartella Template della cartella di Olivebranch_site.

Nella Template palette, clicka su cat_product_winter.dwt per evidenziarlo nell'elenco.

Ridimensiona la Template palette per visionare la maschera dell'inverno nella palette. La maschera dell'inverno ha un disegno diverso che della maschera che correntemente applicata alle pagine di prodotto, ma poich contiene le stesse regioni editabili come la maschera corrente, puoi applicarla alla pagina senza rompere niente.

5 6 7

Clicka su Apply to Page per applicare la maschera dell'inverno alla pagina del prodotto per i vini. Chiudi la Template palette. Premi F12 per visionare la nuova pagina di prodotto per i vini in una finestra del browser.

Quando hai finito di visionare, chiudi la finestra del browser e ritorna a Dreamweaver.

25

Se vuoi, puoi scegliere File

10 Scegli File> Close per chiudere la pagina.

Attaccare i comportamenti agli elementi della pagina

Un comportamento una combinazione di un evento con un'azione. Gli eventi sono le situazioni che provocano le azioni. Per esempio, un evento onClick pu accadere quando l'utente clicka su un bottone, o un evento chiamato onMouseOver pu accadere quando il cursore del mouse passa su un oggetto. Le azioni sono pezzi di codice pre-scritti JavaScript che compie compiti specifici, come aprire una finestra del browser, avviare un suono, o fermare un film di Shockwave. Quando si lega un comportamento ad un elemento della pagina, si specifica un'azione e l'evento che lo provoca. Dreamweaver offre molte azioni pre-definite che puoi legare ad elementi della pagina. Qui, applicherai le azioni di Swap Image su eventi e cataloghi grafici cos che le immagini sembrano illuminarsi quando il mouse ci passa sopra (questo, quando accade l'evento di onMouseOver). Per esempio, quando l'immagine "about" appare sulla pagina normalmente, sembra cos:

Dopo che hai definito un comportamento che include l'azione di Swap Image durante l'evento dell'onMouseOver, about

Comincia a riaprire il file home page che hai editato prima nel tutorialle, poi lega i comportamenti ad elementi grafici specifici su quella pagina. Per riaprire la pagina in Dreamweaver: 1 Trasporta la finestra Site in primo piano scegliendo Window> Site files. 2 Un doppio-click sul listato per il file home page DW2_index.htm per riaprirlo nella finestra del Documento. Per legare un comportamento ad un elemento grafico sulla pagina: 1 2 3 Clicka per selezionare l'immagine about nella finestra del Documento. Scegli Window > Behaviors per aprire l'ispettore Behavior che elenca tutti i comportamenti definiti per l'elemento selezionato (non ce ne dovrebbero essere ancora). Aggiungi un'azione nuova all'elenco clickando sul bottone pi (+) e scegliendo Swap Image dal pop-up menu. Il dialog box Swap Image appare, mostrando un elenco di tutte le immagini sulla pagina. 4 Nel dialog box Swap Image, seleziona l'immagine about dall'elenco Images. Questa l'immagine originale che sar sostituita con un'immagine evidenziata quando il cursore del mouse ci passa sopra.

26

5 6

Questa immagine sostituisce l'immagine originale durante l'evento dell'onMouseOver. Accetta le opzioni di default sotto il campo di Set Source To. L'opzione Preload Images carica lo swap image in una cache del browser quando viene caricata la pagina, cos da non avere interruzioni prima che appaia l'immagine evidenziata quando l'utente trasporta il cursore del mouse la prima volta sull'immagine. L'opzione Restore Images onMouseOut assegna automaticamente l'azione Swap Image Restore all'evento dell'onMouseOut per questa immagine. Questo riporta il bottone al suo stato originale quando l'utente sposta il cursore del mouse dal bottone.

Clicka su OK il per chiudere il dialog box Swap Image ed applicare solo le modifiche effettuate. L'ispettore di Comportamento adesso include solo gli eventi ed le azioni che hai definito per l'immagine. L'evento dell'onMouseOver appare con l'azione Swap Image; sopra c' l'evento dell'onMouseOut con l'azione Swap Image Restore che stata definita per te quando hai accettato le opzioni di default mentre settavi l'azione Swap Image.

Ripeti questi passi per legare le azioni di Swap Image ed gli eventi dell'onMouseOver agli eventi ed alle immagini del catalogo: Sostituisci gli eventi immagini con lo swap image nav_events_roll.gif. Sostituisci il catalogo

Chiudi l'ispettore di Comportamento.

Adesso, guarda come i comportamenti agiscono visionando la pagina in un browser. Per visionare la pagina in un browser: 1 Clicka su F12 per visionare la home page in un browser. 2 Trasporta il cursore del mouse sul about, eventi, e catalogo delle immagini per vedere

27

come essi cambiano. Chiudi il browser quando hai terminato di visionare la pagina. 3 Ritorna a Dreamweaver e salva le tue modifiche scegliendo File> Save.

Aggiungere un film Flash

La home page completata di Olivebranch include una sezione "specials" di offerte settiamanali nella quale i vari articoli di vendita gradualmente si affievoliscono lampeggiando sul lato destro della pagina. La sezione "specials" contiene due layers: il primo contiene le immagini statiche degli specials di questa settimana, ed il secondo (che si sovrappone il primo) contiene un film Flash nel quale gli articoli in vendita si affievoliscono lampeggiando. Finora, la tua versione della home page include solamente il layer con l'immagine statica; qui, aggiungerai il film Flash in un layer in cima all'immagine layer per ricreare la sezione " specials " come appare sulla home page completata. Poich il film Flash sar in un layer che sta direttamente in cima all'immagine di questa settimana del layer speciale, devi spegnere l'opzione Prevent Layer Overlaps. Per consentire i layers di sovrapporsi: 1 Scegli Window> Layers per riaprire il Layer palette. 2 Deseleziona l'opzione Prevent Overlaps. Adesso avrai bisogno di creare un nuovo layer contenere il film Flash. Per aggiungere un nuovo layer contenente un film Flash: 1 Scegli Insert> Layer. 2 Un solo click per mettere il cursore nel nuovo layer. 3 Scegli Insert> Flash e seleziona home_ticker.swf nella cartella Assest. Il layer si espande alla dimensione del film Flash che rappresentato da un rettangolo grigio.

Adesso, avvia il film Flash nella finestra del Documento ed allinealo sul layer dello specials di questa settimana. Per avviare il film Flash nella finestra del Documento: Scegli View > Plugins > Play All.

28

Per allineare il layer del film Flash sul layer dello specials di questa settimana: 1 Clicka sul bordo del layer per selezionarlo interamente e trascinarlo dal suo manico finch si allinea sul layer dello specials di questa settimana. Il film Flash contiene dei blocchi di colore ed una linea orizzontale che sono uguali al grafico statico dello special di questa settimana. Usali per guidarti quando posizioni il layer del film Flash in cima al layer immagine. Nota: Per il layer dello specials di questa settimana, scegli Window> Properties per aprire l'ispettore Properties e ripristinare le dimensioni del film Flash a W 329, H 94. I due layers uno in cima all'altro dovrebbero sembrare cos:

2 Scegli File> Save solo per salvare le modifiche fatte.

Controlla il tuo sito

Adesso che hai fatto tutte le modifiche necessarie ai file parzialmente completati, fai una rassegna del sito intero in un browser per vedere come si vede. Per visionare il sito in un browser: 1 Con la home page ancora aperta, premi F12 per aprire la pagina in un browser. 2 Guarda al film Flash, poi clicka su about, eventi, e catalogo delle immagini per vedere le altre pagine che hai editato per il sito. 3 Quando hai visto che il sito da te costruito finito, chiudi la finestra del browser, poi ritorna a Dreamweaver e scegli File> Close per chiudere la home page.

29