DREAMWEAVER - LINK CON AREA SENSIBILE

CORSO
WEB DESIGNER
PROGR. OPERATIVO SICILIA FSE 2007-2013 Avviso n. 20/2011 “Percorsi formativi per il rafforzamento dell’occupabilità e dell’adattabilità della forza lavoro siciliana periodo 2012/2014
PROGETTO OCCUPAZIONE AMBITO: ForGio - CUP G95C12000230009 - CIP 2007.IT.051.PO.003/II/D/F/9.2.1/0646
Scheda 41
DREAMWEAVER - LINK CON AREA SENSIBILE
Su una immagine presente in una pagina web
è
possibile
definire,
,
diverse
zone
corrispondenti a diversi link in modo che, ad
esempio, da una figura contenente i pianeti
del sistema solare, sia possibile visualizzare
le pagine corrispondenti ai vari pianeti
cliccando sulla parte corrispondente ad
ognuno di essi.
OPERAZIONI DA COMPIERE
• Cliccare sull’immagine
• Cliccare su uno dei tre pulsanti di gestione area
sensibile (area rettangolare, area ellittica o area
irregolare) presenti nella finestra di ispezione
delle proprietà dell'immagine. Eseguire questa
operazione.
• AREA RETTANGOLARE: trascinare con il
mouse sull'immagine. Alla fine comparirà una
finestra che chiede di digitare il parametro ALT
del link nell'apposita casella della finestra di
ispezione delle proprietà dell'immagine.
•
•
•
•
AREA ELLITTICA: trascinare con il mouse sull'immagine. Come per l'area rettangolare,
alla fine comparirà una finestra che chiede di digitare il parametro ALT del link
nell'apposita casella della finestra di ispezione delle proprietà dell'immagine. Eseguire
questa operazione.
AREA IRREGOLARE: cliccare sul primo punto dell'area irregolare da creare, come nei
casi precedenti comparirà una finestra che chiede di digitare il parametro ALT del link
nell'apposita casella della finestra di ispezione delle proprietà dell'immagine. Eseguire
questa operazione. Cliccare sui punti successivi dell'area irregolare da creare
PER AGGIUSTARE LA POSIZIONE DELL'AREA SENSIBILE cliccare sul pulsantino
con la freccia nera (a sinistra rispetto agli altri 3) e trascinare l'area con il mouse.
PER DEFINIRE IL LINK: utilizzare la casella Collegamento anch'essa presente nella
finestra di ispezione delle proprietà dell'immagine.
DISPENSA DEL MODULO DI SOFTWARE APPLICATIVI GESTIONE PAGINE WEB
MARIO GIURLANDA - [email protected] - www.emmegiclick.altervista.org/pmw12
CORSO
WEB DESIGNER
PROGR. OPERATIVO SICILIA FSE 2007-2013 Avviso n. 20/2011 “Percorsi formativi per il rafforzamento dell’occupabilità e dell’adattabilità della forza lavoro siciliana periodo 2012/2014
PROGETTO OCCUPAZIONE AMBITO: ForGio - CUP G95C12000230009 - CIP 2007.IT.051.PO.003/II/D/F/9.2.1/0646
Scheda 42
PUBBLICAZIONE SITO
Per effettuare materialmente il trasferimento dei file dal disco fisso del
proprio sistema a quello del provider internet presso cui vogliamo
pubblicare il sito è necessario un programma di FTP.
Un programma di FTP fra i più semplici e comuni è il FileZilla che si
reperisce all'indirizzo www.filezilla-project.it . E' un software libero
multipiattaforma e disponibile per GNU/Linux, Microsoft Windows, e Mac
OS X.
E' possibile effettuare il download del programma di setup anche da altri siti (basta cercare
file zilla download da un qualsiasi motore di ricerca).
L'interfaccia del programma è quella visualizzata in basso, il riquadro di sinistra rappresenta
il sistema locale (il nostro PC), mentre quello di destra il sistema remoto (il provider su cui
scaricare il sito).
Uno dei modi per collegarsi al
provider occorre digitare HOST
(dipende dal provider su cui
siamo
registrati),
NOME
UTENTE
e
PASSWORD
(entrambi scelti da noi in fase di
registrazione) nelle rispettive
caselle
e
cliccare
su
CONNESSIONE RAPIDA.
ATTENZIONE: poiché questi
dati rimangono in una lista
di cronologia si consiglia,
specialmente se il pc viene
utilizzato da molte persone,
di azzerare la cronologia
cliccando
sulla
apposita
funzione che appare dal menu a discesa
che si visualizza cliccando sul pulsantino
con la freccia in basso posto alla destra
del pulsante Connessione rapida (vedi
freccia figura a lato).
Un altro sistema, sicuramente migliore
consiste nella utilizzazione della funzione
Gestione
Siti.
Per
visualizzare
la
corrispondente finestra di dialogo selezionare
Gestione Siti ... dal menu File. Anche in
questo caso se il PC su cui si lavora viene
utilizzato da molti utenti, durante la fase di
immissione dati nuovo sito, si consiglia di
non digitare la password nella rispettiva
casella. In questo caso la password verrà
richiesta ad ogni connessione.
Dopo l'attivazione del collegamento le operazioni di trasferimento o gestione file saranno
effettuate per trascinamento o visualizzando il menu oggetto (click pulsante destro del
mouse) dello stesso file o cartella.
Nel primo riquadro in alto vengono visualizzati dei messaggi che indicano il procedere delle
operazioni.
DISPENSA DEL MODULO DI SOFTWARE APPLICATIVI GESTIONE PAGINE WEB
MARIO GIURLANDA - [email protected] - www.emmegiclick.altervista.org/pmw12
CORSO
WEB DESIGNER
PROGR. OPERATIVO SICILIA FSE 2007-2013 Avviso n. 20/2011 “Percorsi formativi per il rafforzamento dell’occupabilità e dell’adattabilità della forza lavoro siciliana periodo 2012/2014
PROGETTO OCCUPAZIONE AMBITO: ForGio - CUP G95C12000230009 - CIP 2007.IT.051.PO.003/II/D/F/9.2.1/0646
Scheda 43
DREAMWEAVER – MODELLI PAGINA
Ogni pagina di un sito web contiene quasi sempre una o più parti che si ripetono in tutte le
altre (intestazione, menu, piè di pagina, contatore pagine ecc.). I MODELLI PAGINA di
dreamweaver rappresentano un validissimo strumento per la gestione di queste parti
comuni. Derivando le pagine da un modello non sarà necessario inserire ogni volta queste
parti comuni. Inoltre se si variano le parti comuni dal modello, tutte le pagine derivate si
aggiornano automaticamente.
FASE 1
CREAZIONE DEL MODELLO E INDICAZIONE AREE MODIFICABILI O EDITREGION
Prima di iniziare a definire qualsiasi pagina è conveniente definire un modello pagina il
quale conterrà solamente le parti comuni. Prima di salvare il modello ricordarsi di inserire le
EditRegion ossia le parti nelle quali verranno inseriti i contenuti di ogni pagina.
1. Creare la pagina web inserendo in essa tutte le parti che dovranno essere presenti in
tutte le pagine del sito (barra di intestazione, link per le varie aree del sito, piè di
pagina ecc). Inserire il titolo pagina (Tag TITLE che dovrà essere uguale per tutte le
pagine del sito)
2. Creare e collegare alla pagina il foglio di stile
3. Posizionare il cursore nel punto in cui inserire una EditRegion,
dal menu INSERISCI selezionare OGGETTI MODELLO e poi
AREA MODIFICABILE Comparirà un piccolo riquadro con la
scritta EditRegion.Ripetere queste operazioni per altre aree
modificabili
4. Salvare la pagina utilizzando la scelta Salva come modello… dal menu file
nominandola con un nome standard tipo Pagina-Base e selezionando come destinazione
la cartella principale del sito. Dopo aver salvato il modello, verificare che si sia creata
automaticamente una cartella TEMPLATE e che il modello sia stato salvato in questa
cartella.
FASE 2
CREAZIONE DELLE PAGINE DAL
MODELLO
Dal menu FILE cliccare su NUOVO
(comparirà una finestra). Dal pannello
MODELLI selezionare il SITO WEB su
cui si sta lavorando (riquadro di sinistra)
e sul modello desiderato (riquadro di
destra). Verrà visualizzata una normale
pagina
HTML
che
potrà
essere
modificata solamente nelle EditRegion
le
restanti
parti
risulteranno
immodificabili (anche il codice HTLM sarà immodificabile e visualizzato in grigio). Salvare
normalmente la pagina.
FASE 3
MODIFICA DEL MODELLO
E' possibile modificare il modello semplicemente visualizzandolo tramite doppio click sul suo
nome dalla cartella template. Alla fine salvando il modello modificato viene chiesta
conferma di aggiornamento di tutte le pagine derivate. Rispondendo positivamente tutte le
pagine derivate dal modello saranno modificate automaticamente.
DISPENSA DEL MODULO DI SOFTWARE APPLICATIVI GESTIONE PAGINE WEB
MARIO GIURLANDA - [email protected] - www.emmegiclick.altervista.org/pmw12