didattico

KT
!

che cos?
In questo Kit proponiamo un metodo di lavoro alla portata di tutti gli insegnanti e gli studenti, per realizzare un sito Internet con Dreamweaver MX. Questo Kit articolato in lezioni che guidano nei passi fondamentali per un primo approccio tecnicamente efficace.
1. creare il sito 2. creare la home page 3. creare le pagine web 4. colleghiamo le pagine 5. ordine e bellezza 6. effetti speciali 7. semplificazioni 8. sul web
INDICE CAPITOLI: NOTE: Totale pagine: 25. Limpaginazione realizzata per essere stampata su carta A4; stampata su lucido per lavagne luminose; proiettata dal computer; inserita nel web. Si consiglia di piegare le schede lungo la linea e di plastificarle per garantire un uso senza usura.

TITOLO
Spunti di lavoro con Dreamwever MX

Creare un sito web

Alberto Pian autore

Didattica
Per insegnanti / studenti

index.html

pagine indice delle sezioni

piegare e incollare

cartelle delle sezioni

pagine contenute in ciascuna sezione

www.didanext.com

alberto.pian@fastwebnet.it

Tutti i diritti riservati

1. creare il sito gli strumenti...

Dreamweaver consente di impostare un sito completo, di realizzarlo e di pubblicarlo in Internet.

Pagina Web (spazio per crearla) Qui si sinseriscono i titoli, i testi, le immagini e tutti i contenuti che devono essere visualizzati sulla pagina Internet... Con la palette Propriet (vedi qui sotto la pagina bianca), si controllano gli oggetti inseriti nella pagina: testi, immagini, e oggetti multimediali. Il riquadro a fianco visualizza la struttura del sito sul nostro hard disk (destra) e sul web (sinistra). A destra una serie di palette permette di controllare il lavoro offrendo diverse funzioni.

dreaweaver

2
palette propriet: serve per formattare il testo, creare collegamenti, lavorare con le immagini e le tabelle. Tutti i diritti riservati

didattico

KT
!

dreamweaver

www.didanext.com

1. CREARE IL SITO la cartella del sito

La creazione del sito automatica. Bisogna propone nelle sue schermate di dialogo. procedere utilizzando i pulsanti Indietro e Avanti. Le scelte da fare sono indicate

rispondere alle richieste che Dreamweaver Dal menu Sito scegliere Nuovo sito e quindi

nelle illustrazioni qui a fianco. Quando si giunge alla richiesta Come effettuare la connessione con il server remoto, indicare
dreaweaver

Nessuno. Apriremo alla fine una sessione FTP per caricare il sito in Internet.

3
Tutti i diritti riservati

didattico

KT
!

dreamweaver

www.didanext.com

2. CREARE la home page il frameset della pagina index.html

Un framset una pagina speciale, un contenitore, suddiviso in pi parti che si chiamano frame. Ciascuna di queste parti, pu contenere una

Dal menu File scegliere Nuovo: apparir la finestra di dialogo qui sotto, dalla quale sceglie lopzione Set di frame. Il frame superiore Il frame inferiore

pagina web. Il framset il contenitore, il frame

il contenuto. La prima pagina di un sito che viene oppure home.html.

Il framset

visualizzata attraverso Internet si chiama index.hml, Creiamo un framset che abbia uno di questi nomi, potremo inserire una barra di navigazione che
dreaweaver

e che sia diviso in due frame: nella parte superiore conterr dei collegamenti alle diverse sezioni del

sito. Potremmo anche stabilire che queste pagine al di sotto.

web delle sezioni, siano visualizzate nel frame posto In questo modo ogni volta che si accede a una

dreamweaver

pagina la barra di navigazione rester sempre al sottostanti.

suo posto, in alto, mentre cambieranno le pagine

didattico

KT
!

www.didanext.com

Tutti i diritti riservati

2. CREARE la home page il frameset della pagina index.html

A questo punto Dreamweaver ha creato una frameset che, come si vede, diviso in due parti. Salviamo il framset: dal menu File - Salva set di frame e gli diamo il nome index.html.

dreaweaver

5
www.didanext.com

Adesso che abbiamo crato il nostro documento index.hml, inseriamo una barra di navigazione nel frame superiore. La barra di navigazione servir per accedere alle diverse parti del sito. Nella parte inferiore (il frame in basso) scriviamo un messaggio di benvenuto e un testo che annuncia i nuovi documenti che saranno inseriti. In un secondo momento sostituiremo i semplici testi che abbiamo scritto nella barra di navigazione con dei pulsanti interattivi (pulsanti Flash). Ora dobbiamo salvare i singoli frame.

didattico

KT
!

dreamweaver

Tutti i diritti riservati

2 CREARE la home page salvare i singoli frame

Che cosa successo? Abbiamo creato tre documenti:

index.html (il frameset che funziona da home page del sito)

Collochiamo il mouse nel frame superiore e quindi dal menu File - Salva frame gli assegnamo il nome indexnavigazione.html

dreaweaver

indexnavigazione.html (la pagina web che contiene la barra di navigazione e che verr visualizzata nel frame superiore di index.html)

indexpagina.html (la prima vera e propria pagina del sito, che verr visualizzata nel frame inferiore di index.html e che contiene le prime informazioni di benvenuto. Possiamo vedere il risultato nella finesta Sito (dal menu Finestra - Sito).

dreamweaver

Ripetiamo le stesse operazioni per il frame sottostante. Collochiamo il mouse nel frame inferiore e poi dal menu File -Salva frame assegnamo il nome indexpagina.html

didattico

KT
!

www.didanext.com

Tutti i diritti riservati

3 CREARE le pagine web spiegazione necessaria

Ora che abbiamo la nostra home page, come si dice nel gergo di Internet, cio la pagina che verr caricata dal programma di navigazione (Explorer, Netscape, Mozilla, Safari, Opera, ecc.), dobbiamo inserire nel sito le altre pagine. Anzi, dovremmo inserire le prime pagine di ciascuna sezione. Queste pagine rimanderanno ai contenuti che aggiungeremo di volta in volta a ogni sezione. Facciamo un esempio.
dreaweaver

quantistica e di chiamarla quanti.html: nella pagina indice della sezione lezioni (lezioniIndice.html), creeremo un collegamento a questa pagina quanti.html. A mano a mano che aggiungeremo lezioni avremo anche diverse pagine web e quindi diversi collegamenti alla pagina indice.

Poniamo di realizzare la pagina iniziale della sezione lezioni, che chiamiamo lezioniIndice.html. Questa prima pagina dovr rimandare alle informazioni che riguardano questa sezione, cio a tutti i documenti che della sezione lezioni in modo che chi si collegher al sito le potr visualizzare. Cos, ogni volta che scriveremo una lezione, la aggiungeremo come pagina web a se stante. Immaginiamo di fare una lezione di fisica

Questo vale per tutte le sezioni del sito!

indexpagina.html

dreamweaver

lezioniIndice.html

altre sezioni...

Galileo.html quanti.html
didattico

KT
!

www.didanext.com

Tutti i diritti riservati

3 CREARE le pagine web creiamo le pagine indice delle sezioni del sito
Benissimo, non ci resta che creare le pagine indice di ciascuna sezione del sito. Poi creremo le cartelle di ogni sezione che conterr i documenti che, di volta in volta, saranno aggiunti. Le pagine indice, invece, le teniamo fuori dalle cartelle. Dal menu File - Nuovo e quindi nella Categoria scegliamo: Pagina di base HTML.
dreaweaver

Ora svolgiamo le seguenti operazioni:

- inseriamo il nome della pagina nella casella del Titolo; - scriviamo il titolo della pagina nella pagina stessa;

Quindi salviamo la pagina web con il nome: lezioniIndice.html.

- scriviamo anche due parole di spiegazione; e una frase per rimandare il navigatore alla lezione dei quanti.

dreamweaver

Sezione Lezioni Questa pagina contiene lelenco delle lezioni disponibili sul sito. La prima lezione che abbiamo a disposizione riguarda la fisica dei quanti. La vuoi vedere?

didattico

KT
!

www.didanext.com

Tutti i diritti riservati

3 CREARE le pagine web tutte le pagine

Ripetiamo le operazioni di creazione della pagina lezioniIndice.html, per tutte la pagine che devono svolgere il compito di fornire lindice di ciascuna sezione del nostro sito: presentazione.html, lezioni.html, verifiche.html, varie. html. Ecco dunque la struttura del sito cos come labbiamo progettata.

Possiamo verificare il nostro lavoro aprendo la finestra Sito dal menu Visualizza.

La finestra Sito un indispensabile strumento di lavoro: lasciamola tranquillamente aperta sul nostro monitor! Da l potremo aprire ogni pagina web facendo doppio clic sulla sua icona.
Salviamo ogni pagina con il suo nome.

dreaweaver

index.html

dreamweaver

La finestra Sito.

pagine indice delle sezioni

cartelle delle sezioni

pagine contenute in ciascuna sezione

didattico

KT
!

www.didanext.com

Tutti i diritti riservati

4 colleghiamo le pagine tracciamo i collegamenti da un testo

Ripetiamo le operazioni di creazione della pagina lezioniIndice.html, per le pagine indice di ciascuna sezione: presentazione.html, lezioni. html, verifiche.html, varie. html. Ora dobbiamo collegare la pagina index.html a ciascuna pagina creata.

- selezioniamo il primo indice index:

dalla palette delle Propriet, tiriamo (letteralmente, vedi figura sotto), un collegamento fino allicona del documento index.html nella finestra Sito.

index.html dreaweaver

pagine indice delle sezioni

10
Infine, dato che vogliamo che la pagina collegata compaia nel frame sottostante (il frame indexPagina), allora nella casella Dest (destinazione) selezioniamo mainFrame.
Tutti i diritti riservati

dreamweaver

Si tratta di creare dei collegamenti ipertestuali. Creiamo il collegamento index: - apriamo la pagina index.html facendo doppio clic nella finestra Sito (dal menu Visualizza) - apriamo la palette delle Propriet (dal menu Visalizza) www.didanext.com

didattico

KT
!

4 colleghiamo le pagine creiamo i collegamenti da un testo e proviamoli!

Un altro modo per creare un collegamento quello di agire sullicona della cartellina posta di fianco alla casella Collegam (collegamento) della palette Propriet e quindi di utilizzare la finestra di dialogo che si apre.

Ora proviamo a vedere se ci che abbiamo fatto funziona. In gergo si dice: proviamo lanteprima. Se non lo abbiamo gi fatto, apriamo index.html (dalla finestra Sito, dal menu Visualizza), e facciamo clic sullicona del mondo: il programma apre la pagina index.html nel navigatore predefinito (Explorer, Netscape, Safari, ecc.). Ora possiamo vedere che cosa succede quando facciamo clic sulle parole calde della barra di navigazione: che nella parte sottostante compaiono le pagine che sono richiamate da ciascun collegamento!

dreaweaver

Ricordarsi sempre la destinazione: mainFrame! (dalla palette Propriet, agire sulle frecce della casella Dest).

11

didattico

KT
!

dreamweaver

www.didanext.com

Tutti i diritti riservati

4 colleghiamo le pagine creare aree calde dalle immagini

Possiamo inserire immagini e creare aree calde (cio collegamenti ipertestuali), al loro interno. Importiamo in una pagina web unimmagine: dal menu InserisciImmagine. Se limmagine non si trova nella cartella del sito, Dreamweaver la copia automaticamente: questa una funzione molto importante!

dreaweaver

Ora selezioniamo limmagine facendo clic con il mouse. Usiamo la palette Propriet (dal menu Visualizza), se necessario allarghiamola agendo sulla freccetta a destra. Selezioniamo lo strumento rettangolo punto attivo (oppure: poligono, ovale) , e tracciamo un quadrato sullimmagine stessa.

12

Creiamo il collegamento con unaltra pagina web che abbiamo creato: movimentoQuanti.html Il collegamento si produce nel solito modo: lo tracciamo, oppure usiamo licona cartellina nella palette Propriet.

didattico

KT
!

dreamweaver

www.didanext.com

Tutti i diritti riservati

4 colleghiamo le pagine i collegamenti interni alla pagina

E se volessimo creare dei collegamenti allinterno di una stessa pagina? Niente di pi semplice: basta creare delle ancore e stabilire dei collegamenti da un testo o dallarea calda dellimmagine, a una delle ancore create.

Dal menu Inserisci, scegliamo Inserisci ancoraggio con nome. Nella finestra di dialogo scriviamo il nome dellancora: movimento.

Aggiungiamo del testo a una pagina web: vogliamo modificare larea calda dellimmagine per fare in modo che ci porti al testo sottostante Il movimento. Per inserire unancora portiamo il mouse alla parola movimento.
dreaweaver

13

Creiamo il collegamento allancora: selezioniamo larea calda dellimmagine e poi agiamo nel solito modo: lo tracciamo, oppure usiamo licona cartellina nella palette Propriet. Lo stesso sistema funziona con i collegamenti dai testi (parole calde).
Il collegamento stabilito dallarea calda dellimmagine allancora semplicemente tirando un filo. Ci vale anche per i testi. I collegamenti interni si usano quando la pagina web contiene molto testo, o molte immagini.

didattico

KT
!

dreamweaver

www.didanext.com

Tutti i diritti riservati

5. ordine e bellezza testo in forma

Apriamo una pagina web e rendiamola bella. Cominciamo dal testo: usiamo la palette Propriet dal menu Visualizza, per rendere pi gradevoli i testi e i titoli. In questo caso Dreamweaver molto simile a unapplicazione di videoscrittura.

La palette Propriet

Evidenziamo un testo con il mouse e creiamo degli elenchi puntati o numerati mettiamo al centro e di lato un paragrafo, assegnamo il grassetto o il corsivo..

dreaweaver

14
Se si colloca il mouse allinterno di un paragrafo, questo pu assumere delle caratteristichge spcifiche, per esempio relative alla grandezza del titolo.

Evidenziamo un testo con il mouse e stabiliamo la sua grandezza.

dreamweaver

Si pu operare una scelta, limitata, di font (non tutti i font vengono visualizzati sul Web!

Assegnamo dei colori al testo! Inseriamo dei filetti tra i vari capitoli per separarli meglio: dal menu Inserisci Filetto orizzontale.

didattico

www.didanext.com

Tutti i diritti riservati

La palette Propriet ha tutti gli strumenti per formattare il testo!

KT

5 ordine e bellezza immagini in forma

Apriamo una pagina web e lavoriamo sulle immagini. Selezioniamo limmagine con il mouse e usiamo la palette Propriet dal menu Visualizza.

La palette Propriet

Dare un nome.

Controllare le dimensioni.

dreaweaver

15
www.didanext.com

Per creare le aree calde (collegamenti).

Una cornice intorno allimmagine: si digita il numero per stabilrne la grandezza. Ripristina le dimensioni originali dellimmagine.

Apre lapplicazione Fireworks per modificare limmagine.

dreamweaver

Agendo sulle maniglie si pu cambiare la dimensione e anche la forma dellimmagine.

Le opzioni di allineamento delle immagini sono notevoli: per esempio le voci A sinistra o A destra, dispongono il testo intorno allimmagine. Per questi allineamenti sofisticati sono mal visualizzati dai browser. Meglio stare sul classico: al centro, in alto, in basso....

didattico

Tutti i diritti riservati

La palette Propriet ha tutti gli strumenti per lavorare con le immagini!

KT

5 ordine e bellezza tabelle!

Le tabelle sono uno strumento molto importante. Non solo ci aiuta a mettere in ordine un testo, ma anche a tenere in ordine una intera pagina web. Impariamo che meglio inserire tutta la pagina web (testo, immagini, filmati, ecc.) allinterno di una tabella che abbia dimensioni predefinite.
Per portare il titolo della pagina allinterno della tabella, selezioniamo con il mouse le celle della prima riga (vdi fig. in alto), e quindi dal menu Elabora scegliamo Tabella - Unisci celle. Quindi possiamo copiare e incollare (oppure scrivere), i titoli della pagina allinterno di questa cella. Ricordiamo che possiamo unire le celle e lavorare sulla tabella, sempre utilizzando il menu Elabora - Tabella.

dreaweaver

16
Abbiamo inserito tutti i testi della pagina lezioniIndice.html, compresi i titoli, le immagini e i collegamenti ipertestuali, allinterno di una tabella. Per allargare o diminuire lampiezza delle celle o della tabella, afferrare le colonne con il mouse e trascinarle, come nella fig. sotto. Nella finestra di dialogo inserire il numero di righe e di colonne e stabilire la larghezza in 750 pixel (che si adatta a uno schermo da 17), per mostrare il bordo della tabella, inserire un numero nella casella bordo. Per aggiungere o sopprimere righe o colonne della tabella, utilizziamo sempre il menu Elabora Tabella - ... Tutti i diritti riservati

didattico

KT
!

dreamweaver

www.didanext.com

5 ordine e bellezza tabelle: la palette propriet

La palette Propriet (dal menu Visualizza), permette di controllare anche le tabelle. Bisogna ricordarsi che per lavorare con le tabelle occorre selezionare con il mouse le celle e le colonne che si intende modificare, o collocarsi al loro interno.

Allieneamento della tabella nella pagina. Stabiliamo la largezza a 750 pixel: cos la pagina ha sempre questa dimensione adatta ai monitor in circolazione.

Per evidenziare il bordo della tabella e la sua dimensione (inserire un numero: 0 = nessun bordo).

Inoltre, dal menu Elabora - Tabella si possono effettuare numerose altre operazioni.

dreaweaver

La tabella vista da un browser (navigatore): si inseriscono anche le immagini e tutta la pagina web assume unaria pi ordinata e pulita.

17
Pulsanti per lavorare sulla larghezza e sullaltezza delle celle della tabella. Assegnamo dei colori alle celle, alle colonne, a tutta la tabella, ai bordi... Bisogna sempre collocare il mouse sullelemento che si vuole colorare. Si pu inserire na immagine come sfondo, in tutta la tabella, oppure in una sua cella. Tutti i diritti riservati

La distanza, in pixel, del testo dai bordi delle celle (MargCel) e delle celle fra di loro (SpazCel).

didattico

KT
!

dreamweaver

www.didanext.com

6. effetti speciali barra di navigazione flash

Una bella barra di navigazione interattiva sempre meglio di alcune parole ipertestuali. Dreamweaver permette di creare dei simpatici pulsanti utilizzando la tecnologia Macromedia Flash. Dal menu Inserisci Immagini interattive - Pulsanti Flash oppure Testo Flash.

Creiamo il pulsante Flash per Index.

Nome del pulsante. Font e grandezza. Il pulsante attiva un collegamento a index.html che si apre in una pagina bianca e non in mainFrame, altrimenti tutta la pagina index.html si aprirebbe al suo stesso interno!

dreaweaver

18

Assegnare il nome al pulsante.

dreamweaver

Creiamo il testo Flash per Presentazione. Scegliamo il colore di avvio e quello di pulsante attivo. Il nome del pulsante che verr mostrato.

didattico

www.didanext.com

Tutti i diritti riservati

Il risultato finale: al posto del semplice testo della barra di navigazione (ricordate?), ora abbiamo dei pulsanti e dei testi colorati e interattivi!

Il pulsante attiva un collegamento a presentazioneIndice.html che si apre in mainFrame: cos viene visualizzato nel frame sottostante. Assegnare il nome al pulsante.

KT

6. effetti speciali barra di navigazione con pulsanti rollower

Questo punto una variante del precedente ed anche molto pi difficile da realizzare. Dreamweaver permette di creare una barra di navigazione interattiva in modo che tutti i pulsanti siano uniti fra loro e sianoi attivi quando il mouse ci passa sopra, li prema, torni su e poi esca dallarea del pulsante. Per, per creare questa barra, occorre prima predisporre le immagini dei pulsanti, anzi, le immagini per ogni stato di ciascun pulsante.

Aggiungi e rimuovi i pulsanti con i bottoni +eLe diverse immagini assegnate al pulsante Lezioni. Stiamo lavorando sul pulsante Lezioni.

Stabilisci lordine di successione dei pulsanti.

In relazione al mouse ogni pulsante ha quattro stati: dentro, gi, su, fuori. In Dreawever si chiamano Immagine alzata, Immagine di rollower, Immagine abbassata, Immagine di rollower abbassata. Per ogniuno di questi stati, il pulsante cambia rapidamente la sua immagine producendo un effetto di animazione. Se per ogni pulsante ocorrono quattro immagini, dovremmo elaborare in tutto 20 immagini! Facciamo finta di averlo fatto, e vediamo come si crea questa barra!

dreaweaver

19
Il collegamento interattivo del pulsante alla pagina lezioniIndice.html. Carica tutte le immagini in memoria cos la loro esecuzione rapida! La pagina lezioniIndice.html si apre in mainFraime, nel frame sottostante la pagina idex.html. Tutti i diritti riservati

dreamweaver

didattico

www.didanext.com

Dal menu Inserisci Barra di navigazione.

KT

6. effetti speciali pulsanti rollower e filmati quickTime

Pi semplice inserire un pulsante rollower, cio che cambia aspetto quando il mouse vi passa sopra. Qui servono solo due immagini: per lo stato di quiete e per il passaggio del mouse. Dal menu Inserisci - Immagini interattive - Immagine di rollover.

Immagine relativa al passaggio del mouse.

Stiamo lavorando sul pulsante Lezioni.

Immagine dello stato di quiete.

dreaweaver

Esempio di immagine di rollower: stato di quiete e quando il mouse vi passa sopra.

20

dreamweaver

Il collegamento interattivo del pulsante alla pagina lezioniIndice.html.

Carica le immagini in memoria cos la loro esecuzione rapida!

Per inserire un filmato QuickTime basta selezionare dalla barra dei menu la voce Inserisci - Oggetto multimediale - Plugin. Dalla finestra di dialogo che si apre si sceglie il filmato. Dalla solita palette delle Propriet (menu Visualizza), si possono controllare la dimensione del filmato e i suoi parametri (per esempio autoplay).
didattico

KT
!

www.didanext.com

Tutti i diritti riservati

6. effetti speciali animare un livello

Dreamweaver pu impiegare in una pagina web dei livelli collocabili ovunque, allinterno dei quali si possono inserire testi, immagini, pulsanti, animazioni, ecc. I livelli possono essere utili per presentare in modo pi grafico alcuni elementi, ma sono interessanti soprattutto quando si anima un livello. Per esempio quando si inserisce unimmagine al suo interno e si assegna un percorso al livello stesso, cosi da farlo muovere quando si apre la pagina web.
dreaweaver

Dalla Palette Inserisci (menu Visalizza), oppure dal menu Inserisci - Livello, inseriamo un livello nella pagina web. Prendiamo il livello per la maniglia in alto a sinistra e sistemiamolo sulla nostra pagina, dove pi ci piace. Quindi inseriamo al suo interno unimmagine (menu Inserisci - Immagine). E ora proviamo ad animare questo livello facendogli fare un percorso sulla pagina. maniglia del livello

21

Dal menu Visualizza, aprire il pannello Linee temporali. Collocarsi su un frame e quindi dal menu Elabora scegliere Linea temporale Registra percorso di livello. A questo punto prendere il livello per la sua maniglia e trascinarlo nella pagina fino al punto desiderato. Provare lanteprima per verificare lanimazione: il livello si muover lungo il percorso stabilito. Esegui lanimazione allapertura della pagina web.

Frame (fotogramma).

Esegui lanimazione in continuazione.

dreamweaver

Canali di animazione.

Tracciato dellanimazione.

Canale dei comportamenti (linea B).

didattico

KT
!

www.didanext.com

Tutti i diritti riservati

6. effetti speciali animazioni pi complesse

Una linea temporale formata da ben 32 canali, ognuno dei quali pu contenere unanimazione! Si pu utilizzare un canale per ciascun livello. Per aggiungere un livello a un canale di animazione, dalla barra dei menu scegliere Elabora - Linea temporale - Aggiungi oggetto alla linea temporale. Si possono anche utilizzare pi canali temporali e pi canali per ciascuna linea temporale. Per aggiungere una linea temporale basta scegliere dalla barra dei menu Elabora - Linea temporale - Aggiungi linea temporale, oppure utilizzare il menu Opzioni del pannello Linee temporali (che si apre dal solito menu Visualizza). Inoltre, tramite i Comportamenti possiamo stabilire che, giunto a un certo frame, il livello esegua qualche azione stabilita: lanciare un suono, cambiare immagine, lanciare unaltra animazione, ecc.

dreaweaver

22

Apriamo il pannello Comportamenti (dal menu Visualizza Comportamenti) e fare clic su + per aggiungere un comportamento. Collochiamoci al fotogramma 5 nel canale dei comportamenti (linea B), della linea temporale e quindi facciamo clic su + dal pannello dei Comportamenti e scegliamo Imposta testo - Messaggio di popoup. Nella finestra scriviamo Benvenuto nel sito!!). Ora andiamo al fotogramma 30 dal solito pannello dei Comportamenti, scegliamo Imposta testo - Imposta testo della barra di stato. Scriviamo Avete fatto i compiti?. Infine selezioniamo il fotogramma 60 e aggiungiamo il comportamento Imposta testo del frame: scriviamo un testo e vediamo con lanteprima, quante interazioni abbiamo costruito!

dreamweaver

didattico

www.didanext.com

Tutti i diritti riservati

Pannello dei comportamenti

KT

7. semplificazioni gli stili css

I fogli di stile (CSS) permettono di controllare laspetto grafico delle pagine web in modo tale che se impostiamo dei fogli di stile e li associamo ai testi, ai titoli, ecc. questi assumono le caratteristiche previste nei fogli di stili. Il tutto funziona un po come negli stili di Word o di altri programmi di videoscrittura. Bisogna creare un foglio di stile esterno, affinch possa essere associato alle pagine web.

dreaweaver

Scegliere dal menu Testo - Stili CSS - Nuovo stile CSS... e quindi determinare le impostazioni nella finestra di dialogo che si apre. Una volta che il foglio di stile salvato, sar rintracciabile nella cartella del sito con lestenzione .css. Dunque sar a disposizione di tutte le pagine alle quali lo si vorr associare. Per associarlo a una pagina basta aprire la pagina web e scegliere dal menu Testo - Stili CSS - Associa foglio di stile...

23
I fogli di stile permettono una impaginazione molto accurata. Tutti i diritti riservati

didattico

KT
!

dreamweaver

www.didanext.com

7. semplificazioni i modelli
I modelli funzionano come delle pagine gi impostate che si possono riutilizzare per creare nuove pagine web.

La prima cosa da fare creare una pagina web standard con i titoli, le immagini, le tabelle, ecc. Quando la pagina ha raggiunto la perfezione desiderata, allora la possiamo salvare come modello, per essere riutilizzata da altre pagine del sito. Prima per occorre indicare quali sono le aree modificabili allinterno del modello, altrimenti non si potranno inserire testi e immagini... Selezioniamo sulla pagina, una per volta, le aree modificabili (per esempio quella dei titoli di pagina, poi quella delle immagini e cos via), e ogni volta scegliamo dalla barra dei menu Inserisci - Oggetti modelli - Area modificabile. Larea verr etichettata e considerata come modificabile. Per salvare una pagina come modello scegliere dal menu File - Salva come modello.

Creiamo la pagina e poi associamo alle varie aree la caratteristica di essere modificabili (tranne, ovviamente, quelle che devono rimanere fisse come i marchi.

dreaweaver

24
Per associare un modello a una pagina, si sceglie dal menu File - Nuovo e quindi la sezione Modelli dalla finestra di dialogo. Tutti i diritti riservati

didattico

KT
!

dreamweaver

www.didanext.com

8. sul web caricare il sito

Ora che abbiamo creato il sito occorre caricarlo sul web.

Il sito si controlla dalla finestra Sito dal menu Visalizza. Basta fare clic sullicona della freccia in su, affinch il sito venga di volta in volta caricato sul web, oppure basta selezionare un documento, o pi di uno, e faredi nuovo clic sulla freccia: i documenti selezionati saranno caricati sul web.

Per fare questo bisogna iscriversi a un provider, avere uno spazio sul server remoto del provider e avere dal provider stesso i dati necessari per completare la finestra di dialogo che si apre da Sito - Modifica siti..

Collegamento al server remoto.

A questo punto scegliere il sito e andare avanti con le schermate fino a quella che richiede le impostazioni FTP, quindi inserire i dati (vedi sotto).
I dati richiesti per caricare il sito sul web tramite FTP.

dreaweaver

25
E bene sapere che se si sposta un documento utilizzando la cartella sito, Dreamweaver ristabilisce tutti i collegamenti, ipertestuali compresi. Inoltre dal menu Comandi e dal menu Sito, ci sono interessanti procedure per ottimizzare lhtml, per verificare tutti collegamenti, ecc.

Riapri il collegamento.

La finestra Sito: da l si lavora e si controlla completamente il sito.

Carica i documenti selezionati dal server remoto al tuo computer.

Carica i documenti selezionati sul server remoto.

didattico

KT
!

dreamweaver

www.didanext.com

Tutti i diritti riservati