DREAMWEAVER 4. Viviana Patti

DREAMWEAVER 4 http://www.di.unito.it/~patti/matec0304.htm 2003-2004 II parte Viviana Patti 1

DREAMWEAVER 4 Elementi audio e video Mappe immagine Tabelle in Standard View Form Frame 2

Link a immagini, suoni e animazioni esterne In generale e possiblile associare suoni o visualizzare filmati video specificando nella URL il nome di un file corrispondente. Fra i formati riconosciuti: suoni: AIFF, AU, WAV animazioni:.mov (QuickTime).AVI.MPEG Esempio: <A href= video/warriors.avi"> fa partire visore con animazione</a> <A href= suoni/applauso.wav"> fa partire suono </A> quando l utente fa clic sul link automaticamente viene scaricato il file audio e parte il programma che gestisce il tipo di file (plug-in). Il modo più semplice per aggiungere audio a una pagina web e definire un collegamento a un file audio a partire da un immagine o da un testo. In Dreamweaver occorre semplicemente andare a selezionare il testo o l immagine a cui vogliamo associare il collegamento e immettere il percorso del file nella casella Collegamenti della finestra Proprieta. Quando l utente fa clic sul link automaticamente viene scaricato il file audio e parte il programma che gestisce il tipo di file (plug-in). Limite: Non si ha la possibilita di controllare la posizione o l aspetto del player di riproduzione. 3

Inserire audio Aggiungi un parametro Cancella il parametro selezionato Fig.1 Fig.2 Fig.3 NOTA: come nel caso delle immagini, quando volete inserire un un suono in un documento definito come parte di un sito Dreamewaver e meglio che il file audio sia gia contenuto in una sottocartella all interno della directory del sito. Una volta inserito il file audio, appare il simbolo di plugin indicato in Fig. 1. E possibile modificare le dimensioni della console di riproduzione trascinando i lati del rettangolo nero che racchiude il simbolo (il che ha impatto sugli attributi width e height di embed). Attraverso la finestra delle proprieta e possiblile inoltre inserire alcuni attributi addizionali. Se per esempio vogliamo dare un valore agli attributi autostart e hidden in modo da ottenere l effetto di una musica di sottofondo (come descritto nella slide precedente) facciamo clic sul pulsante parameters della finestra proprieta per aprire la relativa finestra di dialogo. Poi clicchiamo su + per aggiungere un nuovo attributo; digitiamo il nome dell attributo (per esempio autostart) nella colonna Parameter e spostiamoci con TAB nella colonna Value per digitare il valore di quell attributo (per esempio true) e clicchiamo su invio. Ripetiamo le tre operazioni per inserire un valore relativo al parametro hidden come in Fig. 2 e clicchiamo su OK. In Fig. 3 il risultato delle operazioni fatte a livello di codice sorgente. 5

Image Maps Mappa immagine In un documento può essere utile rendere attive porzioni di immagini ed associarvi un determinato evento, di solito un link ipertestuale a un altra pagina o a un altra porzione della stessa pagina -> si parla di mappe d immagine. Esistono due tecniche per implementare le mappe d immagine in HTML client-side mapping (il mapping e interpretato dal browser) server-side mapping (richiedono che l'utente abbia accesso al server e sono utili per browser di vecchio tipo) 6

Image maps client side è necessario avere il file dell immagine (GIF o JPEG) e una specifica della mappatura, cioè l indicazione di quali parti dell immagine sono attive e quali no Modello client-side mapping modello nuovo e preferito: ora ilclient svolge tutto il lavoro e la risposta al clic del mouse viene elaborata localmente dal client-browser mentre nel modello server-side il client-browser catturava la posizione dell utente quando questi faceva clic col mouse sull immagine ma poi mandava le coordinate al server perche le elaborasse e stabilisse quale evento andava scatenato vantaggi: risposta immediata per l utente; no traffico di rete; la mappa puo essere provata e modificata off-line (senza collegarsi al server); cosa occorre: è necessario avere il file dell immagine (GIF o JPEG) e una specifica della mappatura, cioè l indicazione di quali parti dell immagine sono calde/attive e quali no. 7

Attributi di IMG <IMG <IMG > SRC=pathname o URL URL dell'immagine ALIGN=left right right center center top top bottom middle absmiddle textop textop baseline absbottom {le {le ultime ultime voci voci servono per per controllare l'allineamento con con il il testo} testo} ALT=text{testo alternativo all'immagine} BORDER=numero{larghezza in in pixel pixel del del bordo} HEIGHT=numero{altezza in in pixel} pixel} WIDTH=numero{larghezza in in pixel} pixel} HSPACE=numero{spazio in in pixel pixel a destra destra e sinistra dell'immagine} VSPACE=numero{spazio in in pixel pixel sopra sopra e sotto sotto l'immagine} ISMAP USEMAP="nome"{trasforma in in link link parti di di immagine} Definizione delle zone attive o calde: Per quanto riguarda l`immagine da mappare, questa viene inserita nel documento usando il tag IMG gia visto. Dopodiche a livello di html si da come valore dell attributo USEMAP un nome (o etichetta) che fa riferimento alla specifica vera e propria della mappatura 8

HTML: <map> Si inserisce l immagine da mappare: <img src="nomefile.gif" usemap="#mappa1">; la specifica della mappatura si mette nel documento HTML (di solito al fondo) mappa1 <map name="mappa1"> <area shape="rect" coords="50,10,100,100" href="..."> <area shape="circle" coords="20,20,15" href="..."> <area shape="default" href="..."> </map> La specifica della mappatura viene data utilzzando il tag <map> che permette di dare il nome alla mappa (attributo name) e i tag <area> che definiscono le diverse zone attive della mappa e i collegamenti associati. E` buona regola inserire la specifica della mappatura alla fine del documento HTML stesso. In Dreameweaver: selezionate l immagine da mappare e aprite la finestra proprieta associata in modo da visualizzare tutte le opzioni. Date un nome alla mappa nel campo Map prima di procedere alla specifica delle varie aree. 9

HTML: <map> Inserite l immagine da mappare: studenti.jpg Selezionate l'immagine e aprite la finestra proprietà associata in modo da visualizzare tutte le opzioni. Date un nome alla mappa nel campo Map prima di procedere alla specifica delle varie aree. La specifica della mappatura viene data utilzzando il tag <map> che permette di dare il nome alla mappa (attributo name) e i tag <area> che definiscono le diverse zone attive della mappa e i collegamenti associati. E` buona regola inserire la specifica della mappatura alla fine del documento HTML stesso. In Dreameweaver: selezionate l immagine da mappare e aprite la finestra proprieta associata in modo da visualizzare tutte le opzioni. Date un nome alla mappa nel campo Map prima di procedere alla specifica delle varie aree. 10

Strumenti di mappatura Si specificano delle aree dell'immagine: il tag area ha tre attributi importanti: <AREA shape="rect" "circle" "poly" "default" Torna a puntatore semplice > {forma dell'area; default indica l'azione associata all'immagine per le aree non coperte dalla mappatura} coords="x1,y1,x2,y2" {per i rect, in alto a sin e in basso a destra} "x, y, r" {per i circle, coordinate centro e raggio} "x1,y1, x2,y2, x3,y3,..." {coordinate dei vertici} href="url" {URL associata all'area} nohref {per aree non attive} alt = text{testo descrittivo dell'immagine} Potete ora procedere a individuare le varie zone calde. Selezionate con un clic uno dei tre strumenti di selezione dell area (inquadrati nella slide). Questi strumenti permettono di selezionare una o piu aree calde sull immagine da mappare. La scelta di uno dei tre diversi strumenti (da sinistra a destra: square tool, oval tool, polygon tool) corrisponde alla selezione di tre diversi valori per l attributo shape di <area>, ossia tre diverse forme per l area: rect (rettangolare), circle (circolare), poly (poligono irregolare). La selezione dell area con il mouse Nel caso degli strumenti square e oval la selezione dell area puo essere fatta semplicemenete trascinando il mouse sull immagine nella finestra documento e poi rilasciandolo. Nel caso dello strumento polygon occorre fare clic ogni volta che si vuole individuare un nuovo vertice. In tutti i casi l area individuata viene visualizzata ricoperta di una patina azzurrina. Ogni vertice viene evidenziato come un quadratino azzurro e puo essere spostato utilizzando il puntatore semplice se si vuole modificare l area raffinando il lavoro fatto in fase di selezione. 11

Risultato <area shape="circle" coords="20,20,15" href="..."> 0,0 15 50,10 20,20 100,100 <area shape="default" href="..."> <area shape="rect" coords="50,10,100,100"...> L operazione di selezione di una o piu zone attive nella finestra documento, corrisponde a livello di codice sorgente all inserimento di una lista di tag area con le relative informazioni sulle coordinate dei punti che permettono di individuare tali aree. Notate che i valori delle coordinate vengono automaticamente calcolate dal nostro applicativo una volta definita con il mouse la zona attiva. Senza un applicativo di sviluppo, tali coordinate andrebbero calcolate a parte utilizzando un apposito programma di grafica e poi inserite nel documento HTML come valori dell attributo coords. 12

Mappe aree attive Dopo avere specificato le aree dell'immagine, ad ogni area si associa la URL corrispondente Area selezionata 15 50,10 20,20 http://www.di.unito.it/~salvo Puntatore nero Luca Salvo 100,100 Nome della mappatura a cui appartiene l area Associare alle varie zone attive la URL corrispondente Dopo avere individuato le varie zone attive (hotspots) della mappa immagine occorre associare ad ogni zona una URL. Per selezionare una zona attiva utilizzare il puntatore nero semplice. La finestra proprieta appare come in figura. Inserite l URL del documento HTML da visualizzare quando l utente fa clic sulla zona selezionata nel campo Link della finestra proprieta. Specificate l attribuito target quando opportuno (per esempio se avete una pagina strutturata a frame). Aiutate gli utenti a capire dove stanno andando! Infine ricordatevi di indicare nel campo alt il testo che volete venga visualizzato quando l utente passa col mouse sulla zona attiva. Nel caso di mappe immagine infatti e fondamentale dare all utente indicazioni precise su dove lo porta un clic su una certa zona dell immagine piuttosto che su un altra. Notate che le operazioni illustrate in questa slide corrispondono, a livello di codice sorgente, a indicare i valori relativi agli attribiti HREF e ALT del tag <area>. 13

Tabelle Fig 1: Inserisci tabella 0,0 Fig 2: La finestra di dialogo per la selezione delle proprieta della tabella N. righe 20,20 15 50,10 spazio fra il contenuto e il bordo della cella N. colonne Larghezza tabella Pixel o percentuale spazio fra le celle 100,100 Bordo tabella Tabelle L utilizzo di tabelle permette di disporre con precisione i contenuti di una pagina HTML. Per inserire una tabella in Dreamweaver potete selezionare Table dal menu principale Insert oppure selezionare l icona relativa alla tabella nella barra degli Oggetti di uso frequente. In entrambi i casi l effetto della selezione e la comparsa di una finestra di dialogo in cui e possibile definire le proprieta specifiche della tabella come il bordo, lo spazio fra il contenuto e il bordo della cella (cell padding), oppure lo spazio fra le celle (cellspacing). Le proprieta della tabella potranno comunque essere modificate tramite la finestra proprieta, una volta selezionata la tabella su cui operare. 14

Tabelle Fig 1: Seleziona tabella La tabella selezionata appare bordata di nero Selezione tabella Fig 2: Modifica proprieta tabella 100,100 Colore bordo (quando c e ) 0,0 15 50,10 colore sfondo d. tabella 20,20 URL immagine di sfondo Modificare una tabella Una volta inserita una tabella e possibile modificarne I parametri. Ci sonbo vari metodi: prima di tutto occore selezionare la tabella. Questo e possibile a) facendo clic sull angolo superiore sinistro della tabella, sul suo bordo inferiore o su quello destro oppure b) cliccando sul tag table a destra nella barra inferiore della finestra documento (cerchiato in fig. 1). Selezionata la tabella e possibile aprire il menu contestuale (tasto destro del mouse) o la voce Modify del menu principale, consultando le varie opzioni. In alternativa e possibile utilizzare la finestra delle proprieta (fig. 2). Oltre alle opzioni disponibili in fase di inserimento della tabella, dalla finestra proprieta possiamo anche definire uno sfondo (colore o immagine di background per la tabella) e allineare la tabella (left, center, right) rispetto alla pagina. 15

Tabelle Fig 1: Seleziona e modifica riga 0,0 15 50,10 Proprieta riga 20,20 Unisci celle Attributo colspan 100,100 Dividi in righe colonne Fig 2: Seleziona e modifica cella Modificare righe colonne e celle Per modificare righe o colonne selezionarle ponendosi con in mouse sul bordo della tabella all altezza di quella riga o colonna e utilizzare la finestra proprieta (fig. 1). In particolare per aggiungere una riga alla vostra tabella selezionate una riga esistente e poi Modify -> Table -> Insert Row: la nuova riga verra inserita sopra alla riga selezionata. Nel caso di una nuova colonna, questa verra inserita alla sinistra della colonna selezionata a seguito della selezione Modify -> Table -> Insert Column. Per modificare una cella, occorre selezionarla posizionandosi dentro con il mouse e utilizzare la finestra proprieta relativa (fig.2). Commentiamo alcune proprieta : Horz: Allineamento orizzontale relativo agli elementi inseriti nella cella. W: Larghezza della cella. In pixel o percentuale (da aggiungere a mano il simbolo%); H: Altezza della cella. In pixel. No Wrap (checkbox): Impedisce di andare a capo arbitrariamente nelle celle. Header (checkbox): L elemento della cella e un titolo, quindi viene grassettato e centrato (tag <TH>). BG (long): immagine di sfondo per la cella; BG (small): colore di sfondo per la cella; Brdr: colore del bordo per la cella. L opzione Unisci celle evidenziata in fig.1 permette di costruire celle che si espandono per piu righe o colonne. Corrisponde a usare gli attributi colspane rowspan dei tag TD e TH. Per unire alcune celle contigue selzionatele usando CTRL e poi cliccare su Unisci Celle della finestra proprieta. L opzione Dividi in righe o colonne suddivide una cella selezionata in ulteriori righe e colonne da specificare nella finestra di dialogo che si apre cliccando sul pulsante. 16

Tabelle blocconote.gif Modificare righe colonne e celle Per modificare righe o colonne selezionarle ponendosi con in mouse sul bordo della tabella all altezza di quella riga o colonna e utilizzare la finestra proprieta (fig. 1). In particolare per aggiungere una riga alla vostra tabella selezionate una riga esistente e poi Modify -> Table -> Insert Row: la nuova riga verra inserita sopra alla riga selezionata. Nel caso di una nuova colonna, questa verra inserita alla sinistra della colonna selezionata a seguito della selezione Modify -> Table -> Insert Column. Per modificare una cella, occorre selezionarla posizionandosi dentro con il mouse e utilizzare la finestra proprieta relativa (fig.2). Commentiamo alcune proprieta : Horz: Allineamento orizzontale relativo agli elementi inseriti nella cella. W: Larghezza della cella. In pixel o percentuale (da aggiungere a mano il simbolo%); H: Altezza della cella. In pixel. No Wrap (checkbox): Impedisce di andare a capo arbitrariamente nelle celle. Header (checkbox): L elemento della cella e un titolo, quindi viene grassettato e centrato (tag <TH>). BG (long): immagine di sfondo per la cella; BG (small): colore di sfondo per la cella; Brdr: colore del bordo per la cella. L opzione Unisci celle evidenziata in fig.1 permette di costruire celle che si espandono per piu righe o colonne. Corrisponde a usare gli attributi colspane rowspan dei tag TD e TH. Per unire alcune celle contigue selzionatele usando CTRL e poi cliccare su Unisci Celle della finestra proprieta. L opzione Dividi in righe o colonne suddivide una cella selezionata in ulteriori righe e colonne da specificare nella finestra di dialogo che si apre cliccando sul pulsante. 17

Tabelle Commands -> Sort Table 0,0 15 50,10 20,20 100,100 Ordinare i dati in una tabella In una cella possono essere inseriti sia elementi di testo, sia immagini o altri oggetti. Quando avete una tabella come quella indicata in figura che contiene dati da ordinare in qualche modo (alfabetico o numerico) potete utilizzare la funzione Sort Table selezionando la tabella di cui volete ordinare i dati e poi scegliendo la voce Commands -> Sort Table dal menu principale. Apparirà la finestra di dialogo Sort Table che vi permetterà di scegliere colonna di riferimento e criteri di ordinamento e di non alterare la corrispondenza dei dati riga per riga (piu o meno come quando ordinate una tabella Excel). Osservazione: Per default la prima riga della tabella selezionata non viene ordinata, perché di solito si tratta di righe di intestazione ai dati da ordinare. Se volete però che sia considerata selezionate nella finestra Sort Table con un segno di spunta la voce Sort Includes First Row. 18

Forms: Attributi di <form> <form action="..." method="..."> CHI elabora i dati del FORM? quando si seleziona il pulsante Invia viene eseguita l azione specificata nell attributo action i dati vengono inviati all autore tramite posta elettronica: action="mailto:patti@di.unito.it" i dati vengono mandati al server e elaborati da uno script cgi (programma): action="http://www.di.unito.it/cgi-bin/programma" COME mando i dati del form?: nell attributo method si possono scrivere i valori POST o GET che servono per inviare i dati inseriti nel form Forms (= Moduli) Ripassiamo alcune nozioni relative al tag form e ai suoi attributi fondamentali. 19

Esercizio 5 Form Chi elabora i dati del form 0,0 15 50,10 20,20 Inserisci Modulo Nome del form 100,100 Come vengono inviati i dati del form Fig. 1 Inserisci modulo Fig. 2 Finestra proprieta > attributi di <form> Forms (= Moduli) in Dreamweaver Un modulo per l inserimento di dati da parte dell utente puo essere introdotto in una pagina attraverso Dreamweaver seguendo i seguenti passi: Esercizio 5 Passo1: seleziona la categoria Form dalla barra degli Oggetti (fig. 1, riquadro in alto). Passo 2: occorre dichiarare che si crea un area modulo dove l utente possa inserire i suoi dati (nota che questo corrisponde a inserire il tag <form> in un documento html). Posizionati sulla finestra documento nel punto dove vuoi inserire il form e fai clic sull icona Insert Form della barra Objects- Forms (fig1). Apparira un riquadro tratteggiato in rosso che delimita l area del form e dentro il quale e possibile inserire i vari elementi di input. Passo 3: la finestra delle proprieta appare come in fig. 2. Per rendere attivo il form occorre dare un nome al form (campo name) e riempire opportunamente i campi action e method. Il campo Action permette di specificare dove si vuole che venga recapitata l informazione data in input (un indirizzo e-mail o un file CGI che riceva e adoperi l informazione). Inserisci il tuo indirizzo e-mail in Action. Il campo metodo determina come vengono processati i dati in input. I metodi post e get sono semplicemente due metodi differenti di mandare dati al programma. Seleziona POST del campo Method. 20

<form>forms</form> I due comandi di input "submit" e "reset" devono essere presenti: "submit" quando cliccato spedisce il form "reset" quando cliccato cancella il form <FORM action="mailto:indirizzo internet" method="post"> qui testo, immagini + comandi per input... <INPUT type="submit"> <INPUT type="reset"> </FORM> N.B. un form puo contenere qualsiasi elemento HTML...altri attributi fondamentali del tag form: submit e reset 21

Esercizio 5 Buttons: submit e reset Form Textfield Fig. 2 Proprieta di Textfield Radio Buttons 0,0 Checkboxes Menu 15 50,10 Larg. In caratteri del Text Field <Textarea> Caretteri di input/ n. righe <input type=text> 100,100 Fig. 1 Barra degli oggetti: tipi di input numero Max di Caratteri di input <input type=password> I Form = Moduli Adesso non resta che dare possibilità al nostro utente di inserire alcune informazioni. I vari tipi di input (check boxes, radio boxes, menu a tendina e campi per l immissione di testo) devono essere introdotti all interno dell area tratteggiata in rosso cliccando sulle relative icone presenti nella barra degli oggetti di categoria Forms (fig. 1). Questo corrisponde all inserimento dei vari tag <input type=``text ``checkbox ``radio >, <select> e <textarea> all interno di un tag <form>. Una volta introdotto un certo tipo di input, le varie caratteristiche possono essere specificate attraverso la finestra contestuale delle proprieta. Ad esempio in fig. 2 appare la finestra contestuale di un oggetto Textfield. 22

Esercizio 5 35:9 9 50 90 9 90 9 3,203420 ;, :0 3807 8. 9:43420 8 0 Form radio boxes 80 0.93,20 80 0.93,20 80 0.9 80 0.9 8 0 459 43;, :0 459 43;, :0 80 0.90/ 25708, 25708, 459 43 459 43 459 43;, :0 459 43;, :02,88, 2,88, 459 43 459 43 80 0.9 80 0.9 textarea checkbox submit reset Riprodurre il modulo in figura facendo attenzione a inserire la tabella all'interno dell'area di influenza del form tratteggiata in rosso (la coppia di tag <table></table> deve risultare annidata nella coppia <form></form>. 23

Frame In azzurro l area dove viene caricato il doc corrente 0,0 20,20 prima della creazione del frameset e 15 50,10 dopo A A nuovo doc html 100,100 Fig. 2 Fig. 1 Frameset predefiniti Frame I frame permettono di suddividere un documento HTML in piu files, i cui contenuti vengono visualizzati in determinate aree della stessa pagina. Il documento principale (frameset) ha funzione di contenitore. Le aree in cui e suddiviso sone dette frame. Perché sia possibile il caricamento di un documento al suo interno, a ogni area va assegnato un nome che la identifichi univocamente. In Dreameweaver per creare un documento HTML suddiviso in frames e necessario quindi 1. prima creare il documento contenitore, entro cui si indica il tipo di suddivisione in frame che si vuole effettuare, 2. poi definire il contenuto dei diversi frame. 1. Creazione del frameset Un modo per creare un documento contenitore è utilizzare uno dei frameset predefiniti che trovate nella barra degli oggetti, categoria Frames (fig.1). Se siete posizionati in un certo documento (chiamiamolo A) e cliccate su una delle icone creerete una struttura a frame come quella suggerita dall icona e vi troverete col cursore all interno dell area colorata in azzurro in cui è stato caricato il documento iniziale A (fig.2). Un secondo modo per creare un documento contenitore più liberamente è scegliere dal menu Modify Le voci Frameset Split Frame e decidere se Suddividere la pagina in righe (Split Frame Up or Down) Suddividere la pagina in colonne (Split Frame Left or Right) Noatate che in entrambi i casi potete modificare la struttura creata trascinando i bordi col mouse. 24

Frame 0,0 15 50,10 20,20 Fig. 2 la finestra proprietà per un frameset 100,100 Fig. 1 la finestra Frame, es. di selezione del frameset Fig. 3 la finestra proprietà per un frame Per selezionare un frameset utizzate la finestra Frames in fig 1. (apritela dal menu Windows) cliccando sulla cornice piu esterna oppure dopo aver potenziato la vista dei bordi attraverso View ->Visual Aids -> Frame Borders selezionate la cornice piu esterna dalla finestra documento selezionate il tag corrispondente nella barra inferiore della finestra documento Selezionato un frameset alcune proprietà sono specificabili attraverso la finestra contestuale delle proprietà (fig. 2). Per selezionare un frame utizzate la finestra Frames oppure selezionate il tag corrispondente nella barra inferiore della finestra documento Una volta selezionato un frame èpossibile definirne le proprietà attraverso la finestra contestuale (fig.3). In particolare il nome del frame va definito nel campo Frame name. Inoltre e possibile scegliere se utilizzare barre di scorrimento (Scroll), se rendere i frame piu o meno ridimensionabili (checkbox No Resize) e se dotare o meno il frame di bordo (Border). Per definire quale file volete caricare nel frame selezionato utilizzate il campo src della finestra delle proprietà per un frame (fig3). Vediamo con più precisione come nella prossima pagina. 25

Esercizio 6 Frame Fig. 1 click su struttura predefinita Top Frame 0,0 effetto 20,20 15 50,10 Fig. 3 Seleziona il frame superiore (topframe) e click su struttura predefinita Left Frame effetto 100,100 Fig. 2 codice generato dopo il passo1 Esercizio 6: Partendo da un documento nuovo vuoto creiamo una struttura a Frame Passo 1: dalla barra degli oggetti, categoria Frames fai click sulla struttura predefinita Top Frame; viene creata una struttura a frame come quella in fig. 1. Automaticamente viene generato il codice in fig.2. Notate che vengono attribuiti dei nomi di default ai frame contenuti (valore dell'attributo name del tag <frame>). Passo 2: Tenendo selezionato il frame di nome topframe fai click sulla struttura predefinita Left Frame; viene creata una struttura a frame come quella in fig. 3. 26

Esercizio 6 Frame 0,0 15 50,10 20,20 Fig. 2 (a) Fig. 2 (b) 100,100 Fig. 1 seleziona il frameset + File -> Salva frameset as... Fig. 3 la finestra proprietà per un frame 2. Definire il contenuto dei diversi frame Una volta definito un frameset, prima di procedere al collegamento dei diversi documenti nei vari frame occorre selezionare il documento contenente il codice relativo alla definizione del frameset attraverso la finestra Frames (fig.1) salvare il file assegnando un nome: File -> Save Frameset...scegli nome (continua l'esercizio 6...) Passo 3: Una volta definita la struttura dei frame salviamo il file che contiene il tag <frameset>: dal menu principale File -> Save Frameset As...dai nome frameset.htm A questo punto occorre caricare un documento html in ogni frame della struttura definita dal frameset. Per ogni frame dunque si selezioni dalla finestra Frame il frame il cui si vuole caricare un documento html si visualizzi la finestra contestuale delle proprietà del Frame e si carichi utilizzando il campo Src il documento html desiderato. Passo 4: seleziona dalla finestra Frame il frame con nome mainframe (fig. 2 (a)). Passo 5: Visualizza la finestra contestuale delle proprietà e dal campo Src (Source) seleziona il file principale.htm (fig.3). Nota che a seguito di questa operazione il codice del frameset verrà modificato per quanto riguarda il valore dell'attributo src del tag <frame> su cui stiamo lavorando: <frame src="principale.htm" name="mainframe">. La pagina apparirà come in fig 2 (b) 27

Esercizio 6 Frame 0,0 src: indirizzi.htm 15 50,10 100,100 src: paginalogo.htm name Fig. 1 20,20 name Fig. 2 Fig. 3: 4 file (continua l'esercizio...) Passo 6: Procedete così per gli altri frame. a) Caricate il documento indice.htm nel frame con nome topframe e cambiate il nome del frame in indirizzi (fig. 1) b) Caricate il documento paginalogo.htm nel frame con nome leftframe. Cambiate il nome del frame in logo (fig.2). Prima della preview... Salvare frameset e relativi frame. Passo 7: Selezionate Save All dal menu file per salvare sia il documento contenitore sia i documenti caricati nei vari frame. Alla fine del processo controllate di avere creato in tutto 4 files: il file contenente l'informazione sul frameset + i 3 file caricate nei 3 diversi frame (fig.3). 28

Vi ricordate di target? indice.htm ancora stru principale.htm Link e frame Se all interno di un frame da un documento si passa ad un altro (tramite un link) questo viene aperto nella stessa cornice. Tuttavia si può scegliere la finestra in cui aprire il documento usando l attributo target di <a> e dando come valore il nome della finestra (attributo name di frame). In figura: <a target="mainframe" href="principale.htm#stru">struzzo</a> Alla parola Struzzo nel documento indice.htm è associato un collegamento al documento principale.htm#stru, che verrà visualizzato nell'area frame di nome mainframe anziché nel documento che contiene la parola. Oppure in target si possono usare alcuni valori speciali target="_self" target="_top" target="_blank" target="_parent" In Dreanweaver modificate in modo opportuno il valore del target dalla finestra proprietà del testo che appare contestualmente alla selezione della parola a cui state assegnando un collegamento. 29