Guida utente Annulla

Applicare comportamenti JavaScript incorporati

Cerca
  1. Guida utente di Dreamweaver
  2. Introduzione
    1. Nozioni di base sul design responsive
    2. Novità di Dreamweaver
    3. Sviluppo Web con Dreamweaver - Panoramica
    4. Dreamweaver / Domande frequenti
    5. Scelte rapide da tastiera
    6. Requisiti di sistema di Dreamweaver
    7. Riepilogo delle funzioni
  3. Dreamweaver e Creative Cloud
    1. Sincronizzare le impostazioni di Dreamweaver con Creative Cloud
    2. Creative Cloud Libraries in Dreamweaver
    3. Utilizzare i file Photoshop in Dreamweaver
    4. Operazioni con Adobe Animate e Dreamweaver
    5. Estrarre file SVG ottimizzati per il Web da Libraries
  4. Aree di lavoro e viste di Dreamweaver
    1. Area di lavoro di Dreamweaver
    2. Ottimizzare l'area di lavoro di Dreamweaver per lo sviluppo visivo
    3. Eseguire ricerche nei file in base al nome file o al contenuto | Mac OS
  5. Configurare i siti
    1. Siti di Dreamweaver
    2. Configurare una versione locale del sito
    3. Collegamento a un server di pubblicazione
    4. Configurare un server di prova
    5. Importare ed esportare le impostazioni di un sito Dreamweaver
    6. Passaggio di siti Web esistenti da un server remoto alla cartella principale del sito locale
    7. Funzioni di accessibilità in Dreamweaver
    8. Impostazioni avanzate
    9. Impostazione delle preferenze del sito per il trasferimento dei file
    10. Specificare le Impostazioni del server proxy in Dreamweaver
    11. Sincronizzare le impostazioni di Dreamweaver con Creative Cloud
    12. Utilizzo di Git in Dreamweaver
  6. Gestire i file
    1. Creare e aprire file
    2. Gestire file e cartelle
    3. Scaricamento e caricamento dei file da e verso il server
    4. Depositare e ritirare i file
    5. Sincronizzare i file
    6. Confrontare file per verificare le differenze
    7. Applicare la maschera file a file e cartelle del sito Dreamweaver
    8. Attivare le Design Notes per i siti di Dreamweaver
    9. Impedire un potenziale attacco exploit del Gatekeeper
  7. Layout e progettazione
    1. Usare i riferimenti visivi per il layout
    2. Informazioni sull'utilizzo di CSS per creare il layout della pagina
    3. Progettazione di siti Web reattivi con Bootstrap
    4. Creazione e utilizzo di media query in Dreamweaver
    5. Presentare il contenuto mediante le tabelle
    6. Colori
    7. Responsive design con i layout a griglia fluida
    8. Extract in Dreamweaver
  8. CSS
    1. Nozioni sui fogli di stile CSS
    2. Creazione del layout delle pagine con CSS Designer
    3. Utilizzare i preprocessori CSS in Dreamweaver
    4. Impostare le preferenze di stile CSS in Dreamweaver
    5. Spostare le regole CSS in Dreamweaver
    6. Convertire CSS in linea in una regola CSS in Dreamweaver
    7. Utilizzare i tag div
    8. Applicare sfumature allo sfondo
    9. Creare e modificare effetti di transizione CSS3 in Dreamweaver
    10. Formattazione del codice
  9. Contenuto e risorse delle pagine
    1. Impostare le proprietà di pagina
    2. Impostare le proprietà dei collegamenti CSS e le proprietà dei collegamenti CSS
    3. Lavorare con il testo
    4. Ricercare e sostituire testo, tag e attributi
    5. Pannello DOM
    6. Modifica nella vista Dal vivo
    7. Codifica dei documenti in Dreamweaver
    8. Selezionare e visualizzare gli elementi nella finestra del documento
    9. Definire le proprietà del testo nella finestra di ispezione Proprietà
    10. Eseguire il controllo ortografico di una pagina Web
    11. Utilizzo dei filetti orizzontali in Dreamweaver
    12. Aggiungere e modificare le combinazioni di caratteri in Dreamweaver
    13. Operazioni con le risorse
    14. Inserire e aggiornare le date in Dreamweaver
    15. Creare e gestire le risorse preferite in Dreamweaver
    16. Inserire e modificare le immagini in Dreamweaver
    17. Aggiungere oggetti multimediali
    18. Aggiunta di video in Dreamweaver
    19. Inserire video HTML5
    20. Inserire file SWF
    21. Aggiungere effetti audio
    22. Inserire l'audio HTML5 in Dreamweaver
    23. Operazioni con le voci di libreria
    24. Utilizzare testo in arabo e in ebraico in Dreamweaver
  10. Collegamenti e navigazione
    1. Informazioni sui collegamenti e sulla navigazione
    2. Collegamenti
    3. Mappe immagine
    4. Risoluzione dei problemi di collegamenti
  11. Widget ed effetti jQuery
    1. Utilizzare i widget jQuery UI e Mobile in Dreamweaver
    2. Usare effetti jQuery in Dreamweaver
  12. Programmazione dei siti Web
    1. Programmazione in Dreamweaver
    2. Ambiente di codifica in Dreamweaver
    3. Impostare le preferenze di codifica
    4. Personalizzare la colorazione del codice
    5. Scrivere e modificare codice
    6. Suggerimenti sul codice e completamento del codice
    7. Comprimere ed espandere codice
    8. Riutilizzo del codice con gli snippet
    9. Comando Lint
    10. Ottimizzare il codice
    11. Modificare il codice nella vista Progettazione.
    12. Utilizzo del contenuto dell'intestazione delle pagine
    13. Inserimento di server-side include in Dreamweaver
    14. Uso delle librerie di tag in Dreamweaver
    15. Importazione di tag personalizzati in Dreamweaver
    16. Utilizzare i comportamenti JavaScript (istruzioni generali)
    17. Applicare comportamenti JavaScript incorporati
    18. Informazioni su XML e XSLT
    19. Eseguire trasformazioni XSL server-side in Dreamweaver
    20. Esecuzione di trasformazioni XSL client-side in Dreamweaver
    21. Aggiungere entità di carattere per XSLT in Dreamweaver
    22. Formattazione del codice
  13. Flussi di lavoro di interazione con altri prodotti
    1. Installazione e uso delle estensioni in Dreamweaver
    2. Aggiornamenti in app in Dreamweaver
    3. Inserire documenti Microsoft Office in Dreamweaver (solo Windows)
    4. Operazioni con Fireworks e Dreamweaver
    5. Modificare il contenuto nei siti Dreamweaver mediante Contribute
    6. Integrazione tra Dreamweaver e Business Catalyst
    7. Creare campagne e-mail personalizzate
  14. Modelli
    1. Informazioni sui modelli di Dreamweaver
    2. Riconoscere i modelli e i documenti basati sui modelli
    3. Creare un modello di Dreamweaver
    4. Creare aree modificabili nei modelli
    5. Creare aree e tabelle ripetute nei modelli in Dreamweaver
    6. Usare le aree opzionali nei modelli
    7. Definire attributi di tag modificabili in Dreamweaver
    8. Creare modelli nidificati in Dreamweaver
    9. Modificare, aggiornare ed eliminare modelli
    10. Esportare e importare contenuti xml in Dreamweaver
    11. Applicare o rimuovere un modello da un documento esistente
    12. Modificare il contenuto nei modelli di Dreamweaver
    13. Regole di sintassi per i tag di modello in Dreamweaver
    14. Impostare le preferenze di evidenziazione per le aree dei modelli
    15. Vantaggi dell'uso dei modelli in Dreamweaver
  15. Dispositivi mobili e multischermo
    1. Creare media query
    2. Cambiamento dell'orientamento della pagina per i dispositivi mobili
    3. Creare web app per dispositivi mobili utilizzando Dreamweaver
  16. Siti, pagine e moduli Web dinamici
    1. Applicazioni Web
    2. Configurare il computer per lo sviluppo di applicazioni
    3. Risoluzione dei problemi relativi alle connessioni di database
    4. Rimozione di script di connessione in Dreamweaver
    5. Progettare pagine dinamiche
    6. Panoramica sulle origini di contenuto dinamico
    7. Definire le origini di contenuto dinamico
    8. Aggiungere contenuto dinamico alle pagine
    9. Modifica del contenuto dinamico in Dreamweaver
    10. Visualizzare i record di database
    11. Fornire dati dal vivo e risoluzione dei problemi in Dreamweaver
    12. Aggiungere comportamenti server personalizzati in Dreamweaver
    13. Creazione di moduli con Dreamweaver
    14. Usare moduli per raccogliere informazioni dagli utenti
    15. Creare e attivare i moduli ColdFusion in Dreamweaver
    16. Creare moduli Web
    17. Supporto HTML5 avanzato per gli elementi modulo
    18. Sviluppare un modulo con Dreamweaver
  17. Sviluppo visivo delle applicazioni
    1. Creare pagine principali e di dettaglio in Dreamweaver
    2. Creare pagine di ricerca e di risultati
    3. Creare una pagina di inserimento record
    4. Costruire una pagine di aggiornamento record in Dreamweaver
    5. Costruzione di pagine di eliminazione record in Dreamweaver
    6. Utilizzare comandi ASP per modificare un database in Dreamweaver
    7. Creare una pagina di registrazione
    8. Creare una pagina di login
    9. Creare una pagina accessibile solo agli utenti autorizzati
    10. Protezione delle cartelle in ColdFusion utilizzando Dreamweaver
    11. Utilizzo di componenti ColdFusion in Dreamweaver
  18. Verifica, anteprima e pubblicazione dei siti Web
    1. Anteprima delle pagine
    2. Visualizzare in anteprima pagine web di Dreamweaver su più dispositivi
    3. Verificare il sito Dreamweaver

 

Applicare comportamenti JavaScript incorporati in Adobe Dreamweaver.

Utilizzare i comportamenti incorporati

I comportamenti inclusi in Dreamweaver sono stati scritti per funzionare nei browser più moderni. In quelli più vecchi, potrebbero non funzionare (senza conseguenze).

Nota:

le azioni di Dreamweaver sono state scritte in modo da garantire la compatibilità con il maggior numero possibile di browser. Se rimuovete o sostituite manualmente del codice in un'azione di Dreamweaver, la compatibilità potrebbe essere pregiudicata.

Benché le azioni di Dreamweaver siano state scritte per ottimizzare la compatibilità tra i browser, alcuni browser non supportano JavaScript e molti utenti che navigano sul Web disattivano il supporto per JavaScript nei loro browser. Per ottenere i migliori risultati su tutte le piattaforme, fornite interfacce alternative racchiuse tra tag <noscript>, in modo da consentire ai visitatori sprovvisti del supporto per JavaScript di utilizzare comunque il sito.

Applicare il comportamento Chiama JavaScript

Il comportamento Chiama JavaScript attiva una funzione personalizzata o una riga di codice JavaScript quando si verifica un evento. (Potete scrivere direttamente lo script oppure utilizzare codice distribuito gratuitamente mediante librerie JavaScript sul Web).

  1. Selezionate un oggetto e scegliete Chiama JavaScript dal menu Aggiungi comportamento del pannello Comportamenti.
  2. Digitate il codice JavaScript esatto o il nome di una funzione.

    Ad esempio, per creare un pulsante Indietro, potete digitare if (history.length > 0){history.back()}. Se il codice è stato incorporato in una funzione, digitate solo il nome della funzione (ad esempio, hGoBack()).

  3. Fate clic su OK e verificate che l'evento predefinito sia corretto.

Applicare il comportamento Cambia proprietà

Il comportamento Cambia proprietà consente di modificare il valore di una delle proprietà di un oggetto, come il colore di sfondo di un div o l'azione associata a un modulo.

Nota:

questo comportamento può essere utilizzato solo se si conoscono approfonditamente i linguaggi HTML e JavaScript.

  1. Selezionate un oggetto e scegliete Cambia proprietà dal menu Aggiungi comportamento del pannello Comportamenti.
  2. Nel menu Tipo di elemento, selezionate il tipo di elementi da visualizzare.
  3. Selezionate un elemento dal menu ID elemento.
  4. Selezionate una proprietà dall'apposito menu o inserite il nome della proprietà nella casella.
  5. Inserite il nuovo valore della nuova proprietà nella casella di testo Nuovo valore.
  6. Fate clic su OK e verificate che l'evento predefinito sia corretto.

Applicare il comportamento Controlla plugin

Il comportamento Controlla plugin consente di rimandare i visitatori a pagine differenti a seconda che abbiano installato o meno il plugin specificato. Ad esempio, potete rimandare i visitatori a una pagina se hanno Shockwave e a un'altra pagina se non dispongono di questo plugin.

Nota:

non è possibile rilevare plugin specifici in Internet Explorer con JavaScript. Tuttavia, se selezionate Flash o Director, alla pagina verrà aggiunto il codice VBScript appropriato per rilevare i plugin di Internet Explorer su Windows. Il controllo dei plugin non è possibile in Internet Explorer su Mac OS.

  1. Selezionate un oggetto e scegliete Controlla plugin dal menu Aggiungi comportamento del pannello Comportamenti.
  2. Selezionate un plugin dall'apposito menu, oppure fate clic su Inserisci e digitate il nome esatto del plugin nella casella adiacente.

    È necessario digitare il nome esatto che viene indicato in grassetto nella pagina Informazioni sui plugin di Netscape Navigator. Per aprire questa pagina, selezionate il comando Informazioni sui plugin dal menu della guida di Navigator (Windows) oppure dal menu Apple (Mac OS).

  3. Nella casella Se individuato, vai all'URL, specificate un URL per i visitatori che dispongono del plugin.

    Se inserite un URL remoto, dovete anteporre il prefisso http:// all'indirizzo www. Se lasciate vuoto il campo, i visitatori rimangono sulla pagina corrente.

  4. Nella casella Altrimenti, vai all'URL, specificate un URL alternativo per i visitatori che non dispongono del plugin. Se lasciate vuoto il campo, i visitatori rimangono sulla pagina corrente.
  5. Specificate l'azione da eseguire se non è possibile rilevare il plugin. Per impostazione predefinita, quando il rilevamento non è possibile, il visitatore viene rimandato all'URL indicato nella casella Altrimenti. Per rimandare invece il visitatore al primo URL (Se individuato), selezionate l'opzione Vai sempre al primo URL se il rilevamento non è possibile. Se questa opzione è selezionata, si ipotizza che il visitatore sia dotato del plugin a meno che il browser non indichi esplicitamente che esso non sia presente. In generale, selezionate questa opzione se il contenuto del plugin è integrato nella pagina; altrimenti lasciate l'opzione deselezionata.
    Nota:

    questa opzione è valida solo per Internet Explorer, poiché Netscape Navigator è sempre in grado di rilevare i plugin.

  6. Fate clic su OK e verificate che l'evento predefinito sia corretto.

Applicare il comportamento Trascina elemento PA

Il comportamento Trascina elemento PA consente al visitatore di trascinare un elemento con posizione assoluta (PA). e può essere quindi utilizzato per creare puzzle, dispositivi di scorrimento e altri elementi mobili nell'interfaccia.

Potete specificare la direzione in cui il visitatore può trascinare l'elemento PA (in orizzontale, in verticale o in qualunque direzione), la destinazione di rilascio, se l'elemento PA deve essere agganciato alla destinazione quando si trova entro una distanza minima in pixel da essa, l'azione che deve essere eseguita quando l'elemento PA raggiunge la destinazione e altre opzioni ancora.

Poiché il comportamento Trascina elemento PA deve essere chiamato per consentire al visitatore di trascinare l'elemento PA, è necessario associare il comportamento Trascina elemento PA all'oggetto body (con l'evento onLoad).

  1. Selezionate Inserisci > Oggetti layout > Div PA, oppure fate clic sul pulsante Disegna div PA nel pannello Inserisci e tracciate un Div PA nella vista Progettazione della finestra del documento.
  2. Fate clic su <body> nel selettore situato nell'angolo inferiore sinistro della finestra del documento.
  3. Selezionate Trascina elemento PA dal menu Aggiungi comportamento del pannello Comportamenti.

    Se l'opzione Trascina elemento PA non è disponibile, probabilmente è selezionato un elemento PA.

  4. Nel menu a comparsa Elemento PA, selezionate l'elemento PA.
  5. Selezionate Con limitazioni o Senza limitazioni dal menu a comparsa Spostamento.

    L'opzione Senza limitazioni è indicata per i puzzle e gli altri giochi che utilizzano il trascinamento della selezione. Per i dispositivi di scorrimento e gli oggetti mobili come cassettiere, tende e veneziane, selezionate lo spostamento con limitazioni.

  6. Se selezionate l'opzione Con limitazioni, inserite un valore in pixel nelle caselle Su, Sotto, Sinistra e Destra.

    Questi valori si riferiscono alla posizione iniziale dell'elemento PA. Per limitare lo spostamento a un'area rettangolare, inserite un valore positivo in tutte le caselle. Per consentire solo uno spostamento verticale, inserite un valore positivo nei campi Su e Sotto e il valore 0 nei campi Sinistra e Destra. Per consentire solo uno spostamento orizzontale, inserite un valore positivo nei campi Sinistra e Destra e il valore 0 nei campi Su e Sotto.

  7. Specificate i valori in pixel della destinazione di rilascio nelle caselle Sinistra e Sopra.

    La destinazione di rilascio è il punto in cui desiderate che il visitatore trascini l'elemento PA. Un elemento PA raggiunge la destinazione di rilascio quando le sue coordinate sinistra e superiore corrispondono ai valori inseriti nelle caselle Sinistra e Sopra. Questi valori si riferiscono all'angolo superiore sinistro della finestra del browser. Per impostare automaticamente queste caselle di testo sulla posizione corrente dell'elemento PA, fate clic su Ottieni posizione corrente.

  8. Inserite un valore in pixel nella casella Aggancia entro per specificare a quale distanza minima il visitatore deve spostare l'elemento PA affinché questo venga agganciato alla destinazione di rilascio.

    I valori più elevati facilitano l'individuazione della destinazione di rilascio da parte del visitatore.

  9. Per gli oggetti semplici è sufficiente impostare queste opzioni. Se desiderate definire la maniglia di trascinamento dell'elemento PA, tracciare lo spostamento dell'elemento PA durante il trascinamento e attivare un'azione al momento del rilascio, fate clic sulla scheda Avanzato.
  10. Per specificare che il visitatore deve fare clic su una determinata area dell'elemento PA per poterlo trascinare, selezionate Area nell'elemento dal menu Maniglia di trascinamento, quindi inserite le coordinate sinistra e superiore e l'altezza e la larghezza della maniglia di trascinamento.

    Questa opzione è utile quando l'immagine presente nell'elemento PA contiene un elemento normalmente associato al trascinamento, come una barra del titolo o una maniglia. Non impostate questa opzione se volete che il visitatore possa fare clic in qualunque punto dell'elemento PA per trascinarlo.

  11. Se necessario, selezionate una delle seguenti opzioni per Durante il trascinamento:

    • Selezionate Porta elemento in primo piano se desiderate visualizzare l'elemento PA sopra tutti gli altri oggetti durante il trascinamento. Se selezionate questa opzione, utilizzate il menu a comparsa per specificare se l'elemento PA deve rimanere in primo piano o tornare alla posizione originale dopo il trascinamento.

    • Inserite un codice JavaScript o il nome di una funzione (ad esempio, monitorAPelement()) nella casella di testo Chiama JavaScript per eseguire ripetutamente il codice o la funzione durante il trascinamento dell'elemento PA. Ad esempio, potete creare una funzione che controlli le coordinate dell'elemento PA e visualizzi suggerimenti come “ci sei quasi” o “sei ancora lontano dalla destinazione di rilascio” in una casella di testo.

  12. Inserite un codice JavaScript o il nome di una funzione (ad esempio evaluateAPelementPos()) nella seconda casella Chiama JavaScript per eseguire tale codice o funzione quando l'elemento PA viene rilasciato. Per fare in modo che l'esecuzione venga avviata solo se l'elemento PA ha raggiunto la destinazione di rilascio, selezionate l'opzione Solo se calamitato.
  13. Fate clic su OK e verificate che l'evento predefinito sia corretto.

Raccogliere informazioni sugli elementi PA trascinabili

Quando applicate l'azione Trascina elemento PA a un oggetto, Dreamweaver inserisce la funzione MM_dragLayer() nella sezione head del documento. (Il nome della funzione riflette il vecchio nome degli elementi PA [“Layer”, cioè livello] per far sì che i livelli creati nelle versioni precedenti di Dreamweaver risultino ancora modificabili.) Oltre a contrassegnare l'elemento PA come trascinabile, questa funzione definisce tre proprietà per ciascun elemento PA (MM_LEFTRIGHT, MM_UPDOWN e MM_SNAPPED) che possono essere utilizzate nelle funzioni JavaScript personalizzate per determinare la posizione relativa orizzontale e verticale dell'elemento PA e per stabilire se esso ha raggiunto la destinazione di rilascio.

Nota:

le informazioni fornite di seguito sono indirizzate esclusivamente ai programmatori JavaScript esperti.

Ad esempio, la funzione riportata di seguito visualizza il valore della proprietà MM_UPDOWN (la posizione verticale corrente dell'elemento PA) in un campo di modulo chiamato curPosField. I campi di modulo sono utili per visualizzare informazioni aggiornate di continuo perché sono dinamici, ovvero potete modificarne il contenuto al termine del caricamento della pagina.

function getPos(layerId){ 
    var layerRef = document.getElementById(layerId); 
    var curVertPos = layerRef.MM_UPDOWN; 
    document.tracking.curPosField.value = curVertPos; 
}

Invece di visualizzare il valore di MM_UPDOWN o MM_LEFTRIGHT in un campo di modulo, potete utilizzare questi valori in diversi altri modi. Ad esempio, potete creare una funzione che visualizzi un messaggio variabile a seconda della distanza dall'area di rilascio o richiamare un'altra funzione che visualizzi o nasconda un determinato elemento PA a seconda del valore.

La lettura della proprietà MM_SNAPPED è utile soprattutto quando sulla pagina sono presenti più elementi PA e il visitatore può passare alla pagina o all'attività successiva solo quando tutti gli elementi hanno raggiunto la propria destinazione. Ad esempio, potete creare una funzione che conti il numero di elementi PA in cui la proprietà MM_SNAPPED è associata al valore true e richiamare questa funzione ogni volta che viene rilasciato un elemento PA. Quando il conteggio raggiunge il numero desiderato, potete inviare il visitatore alla pagina successiva o visualizzare un messaggio di congratulazioni.

Applicare il comportamento Vai a URL

Il comportamento Vai a URL consente di aprire una nuova pagina nella finestra corrente o nel frame specificato. Utilizzando questo comportamento potete modificare il contenuto di due o più frame con un semplice clic.

  1. Selezionate un oggetto e scegliete Vai a URL dal menu Aggiungi comportamento del pannello Comportamenti.
  2. Selezionate una destinazione per l'URL dall'elenco Apri in.

    In questo elenco vengono automaticamente inseriti i nomi di tutti i frame del set di frame corrente e della finestra principale. Se non è disponibile alcun frame, potete scegliere solo la finestra principale.

    Nota:

    se uno dei frame è associato al nome top, blank, self o parent, questo comportamento può produrre risultati imprevisti poiché il browser può confondere questi nomi con le destinazioni riservate.

  3. Fate clic su Sfoglia per selezionare il documento da aprire oppure inserite il percorso e il nome del file nella casella URL.
  4. Se desiderate aprire altri documenti in altri frame, ripetete i passaggi 2 e 3.
  5. Fate clic su OK e verificate che l'evento predefinito sia corretto.

Applicare il comportamento Menu di collegamento

Quando create un menu di collegamento selezionando Inserisci > Modulo > Menu di collegamento, Dreamweaver crea un oggetto di menu e gli applica il comportamento Menu di collegamento o Vai a menu di collegamento. Pertanto, di solito non è necessario collegare manualmente un oggetto al comportamento Menu di collegamento.

Un menu di collegamento esistente può essere modificato in due modi:

  • Potete modificare e riposizionare le voci del menu, cambiare i file di destinazione e cambiare la finestra in cui devono essere aperti facendo doppio clic su un comportamento Menu di collegamento esistente nel pannello Comportamenti.

  • Oppure, potete modificare le voci del menu con la stessa procedura utilizzata per qualunque altro menu, selezionando il menu e utilizzando il pulsante Elenco valori nella finestra di ispezione Proprietà.

  1. Create un oggetto menu di collegamento se non ne esiste già uno all'interno del documento.
  2. Selezionate un oggetto e scegliete Menu di collegamento dal menu Aggiungi comportamento del pannello Comportamenti.
  3. Nella finestra di dialogo Menu di collegamento, apportate le modifiche desiderate e fate clic su OK.

Applicare il comportamento Vai a menu di collegamento

Il comportamento Vai a menu di collegamento (strettamente collegato al comportamento Menu di collegamento) consente di associare un pulsante Vai a un menu di collegamento. Per poter utilizzare questo comportamento, all'interno del documento deve già esistere un menu di collegamento. Se fate clic sul pulsante Vai, si apre il collegamento selezionato nel menu. Di solito, non è necessario associare un pulsante Vai al menu di collegamento: infatti, quando si seleziona una voce da un menu di collegamento, l'URL corrispondente viene caricato automaticamente. Se invece selezionate la stessa voce già selezionata nel menu di collegamento, il collegamento non viene effettuato. In generale questo non ha importanza, ma se il menu di collegamento appare in un frame e le relative voci rimandano a pagine contenute in altri frame, un pulsante Vai può essere utile per consentire ai visitatori di scegliere di nuovo una voce che è già selezionata nel menu di collegamento.

Nota:

quando usate un pulsante Vai con un menu di collegamento, il pulsante Vai diventa l'unico meccanismo che consente all'utente di accedere all'URL associato alla selezione effettuata nel menu. La selezione di una voce di menu nel menu di collegamento non esegue più il reindirizzamento automatico dell'utente a un'altra pagina o frame.

  1. Selezionate un oggetto da utilizzare come pulsante Vai (solitamente l'immagine di un pulsante) e scegliete Vai a menu di collegamento dal menu Aggiungi comportamento del pannello Comportamenti.
  2. Nel menu Scegli menu di collegamento, selezionate il menu che deve essere attivato quando viene premuto il pulsante Vai e fate clic su OK.

Applicare il comportamento Apri finestra browser

Utilizzate il comportamento Apri finestra browser per aprire una pagina in una nuova finestra. Potete specificare le proprietà della nuova finestra, tra cui le dimensioni, gli attributi (se è ridimensionabile, se è provvista di una barra dei menu e così via) e il nome. Ad esempio, potete utilizzare questo comportamento per aprire un'immagine più grande in una finestra separata quando il visitatore fa clic su un'immagine in miniatura; con questo comportamento, potete far corrispondere esattamente le dimensioni della nuova finestra a quelle dell'immagine.

Se non specificate alcun attributo, la nuova finestra assume le dimensioni e gli attributi della finestra da cui è stata aperta. L'impostazione di qualunque attributo per la finestra comporta la disattivazione automatica di tutti gli altri attributi che non siano stati espressamente attivati. Ad esempio, se non impostate alcun attributo, la nuova finestra potrebbe avere una larghezza di 1024 pixel e un'altezza di 768 pixel e contenere una barra degli strumenti di navigazione (contenente i pulsanti Indietro, Avanti, Inizio e Ricarica), una barra degli strumenti di posizione (che mostra l'URL), una barra di stato (che visualizza i messaggi di stato, nella parte inferiore) e una barra dei menu (contenente i menu File, Modifica, Visualizza e altri ancora). Se impostate esplicitamente la larghezza e l'altezza su 640 e 480 e non specificate altri attributi, la finestra viene aperta con il formato 640 pixel per 480 pixel e non contiene alcuna barra degli strumenti.

  1. Selezionate un oggetto e scegliete Apri finestra browser dal menu Aggiungi comportamento del pannello Comportamenti.
  2. Inserite l'URL che desiderate visualizzare oppure fate clic su Sfoglia e selezionate un file.
  3. Impostate la larghezza e l'altezza della finestra (in pixel) e incorporate le varie barre degli strumenti, barre di scorrimento, maniglie di ridimensionamento e così via. Assegnate un nome alla finestra (non utilizzate spazi o caratteri speciali) se desiderate impostarla come destinazione di collegamenti oppure controllarla mediante JavaScript.
  4. Fate clic su OK e verificate che l'evento predefinito sia corretto.

Applicare il comportamento Messaggio popup

Il comportamento Messaggio popup visualizza una finestra di avvertimento JavaScript che contiene il messaggio specificato. Poiché le finestre di avvertimento JavaScript contengono un solo pulsante (OK), questo comportamento deve essere utilizzato per fornire informazioni e non per presentare una scelta.

Potete incorporare nel testo qualunque espressione JavaScript valida, come chiamate di funzione, proprietà, variabili globali o altro. Per incorporare le espressioni JavaScript, mettetele tra parentesi graffe ({}). Per visualizzare una parentesi graffa, fatela precedere da una barra rovesciata (\{).

Esempio:

The URL for this page is {window.location}, and today is {new Date()}.
Nota:

il browser controlla l'aspetto dell'avvertimento. Per avere un maggiore controllo sull'aspetto, valutate la possibilità di utilizzare il comportamento Apri finestra browser.

  1. Selezionate un oggetto e scegliete Messaggio popup dal menu Aggiungi comportamento del pannello Comportamenti.
  2. Inserite il messaggio desiderato nella casella Messaggio.
  3. Fate clic su OK e verificate che l'evento predefinito sia corretto.

Applicare il comportamento Precarica immagini

Il comportamento Precarica immagini riduce la durata di visualizzazione memorizzando nella cache le immagini che non vengono mostrate immediatamente quando viene visualizzata la pagina (ad esempio, quelle che vengono scambiate per mezzo di comportamenti o script).

Nota:

se selezionate la casella di controllo Precarica immagini nella finestra di dialogo Scambia immagine, il comportamento Scambia immagine precarica automaticamente tutte le immagini evidenziate e pertanto non è necessario utilizzare il comportamento Precarica immagini.

  1. Selezionate un oggetto e scegliete Precarica immagini dal menu Aggiungi comportamento del pannello Comportamenti.
  2. Inserite il percorso e il nome del file di immagine nella casella File di origine immagine, oppure fate clic su Sfoglia e selezionate un file di immagine.
  3. Fate clic sul pulsante più (+) situato nella parte superiore della finestra di dialogo per aggiungere l'immagine all'elenco Precarica immagini.
  4. Per aggiungere altre immagini all'elenco Precarica immagini, ripetete i passaggi 2 e 3.
  5. Per eliminare un'immagine dall'elenco Precarica immagini, selezionatela e fate clic sul pulsante meno (–).
  6. Fate clic su OK e verificate che l'evento predefinito sia corretto.

Applicare il comportamento Imposta testo del frame

Il comportamento Imposta testo del frame consente di sostituire il contenuto e la formattazione di un frame con il contenuto desiderato. Tale contenuto può essere costituito da qualunque codice HTML valido. Utilizzate questo comportamento per visualizzare informazioni in modo dinamico.

Normalmente, quando utilizzate il comportamento Imposta testo del frame, la formattazione di un frame viene sostituita. Tuttavia, potete conservare gli attributi di sfondo della pagina e colore del testo selezionando Mantieni colore di sfondo.

Potete incorporare nel testo qualunque espressione JavaScript valida, come chiamate di funzione, proprietà, variabili globali o altro. Per incorporare le espressioni JavaScript, mettetele tra parentesi graffe ({}). Per visualizzare una parentesi graffa, fatela precedere da una barra rovesciata (\{).

Esempio:

The URL for this page is {window.location}, and today is {new Date()}.
  1. Selezionate un oggetto e scegliete Imposta testo > Imposta testo del frame dal menu Aggiungi comportamento del pannello Comportamenti.
  2. Nella finestra di dialogo Imposta testo del frame, selezionate il frame di destinazione dal menu a comparsa Frame.
  3. Fate clic sul pulsante Richiama HTML corrente per copiare il contenuto corrente della sezione body del frame di destinazione.
  4. Inserite un messaggio nella casella Nuovo HTML.
  5. Fate clic su OK e verificate che l'evento predefinito sia corretto.

Applicare il comportamento Imposta testo del contenitore

Il comportamento Imposta testo del contenitore consente di sostituire il contenuto e la formattazione di un contenitore esistente (ovvero di qualunque elemento che possa contenere testo o altri elementi) con il contenuto specificato. Tale contenuto può essere costituito da qualunque codice di origine HTML valido.

Potete incorporare nel testo qualunque espressione JavaScript valida, come chiamate di funzione, proprietà, variabili globali o altro. Per incorporare le espressioni JavaScript, mettetele tra parentesi graffe ({}). Per visualizzare una parentesi graffa, fatela precedere da una barra rovesciata (\{).

Esempio:

The URL for this page is {window.location}, and today is {new Date()}.
  1. Selezionate un oggetto, quindi selezionate Imposta testo > Imposta testo del contenitore dal menu Aggiungi comportamento del pannello Comportamenti.
  2. Nella finestra di dialogo Imposta testo del contenitore, selezionate l'elemento di destinazione dal menu Contenitore.
  3. Inserite il nuovo testo o codice HTML nella casella Nuovo HTML.
  4. Fate clic su OK e verificate che l'evento predefinito sia corretto.

Applicare il comportamento Imposta testo barra di stato

L'azione Imposta testo barra di stato consente di visualizzare un messaggio nella barra di stato situata nell'angolo inferiore sinistro della finestra del browser. Ad esempio, potete utilizzare questo comportamento per visualizzare la destinazione di un collegamento anziché l'URL. I visitatori spesso ignorano o non notano i messaggi contenuti nella barra di stato e non tutti i browser consentono di impostare il testo; se il messaggio è importante, è opportuno visualizzarlo come messaggio a comparsa o come testo di un elemento PA.

Nota:

se usate il comportamento Imposta testo della barra di stato in Dreamweaver, non è garantito che il testo della barra di stato del browser cambi, perché alcuni browser richiedono regolazioni speciali per la modifica del testo della barra di stato. Firefox, ad esempio, richiede la modifica di un'opzione avanzata che consente a JavaScript di modificare il testo della barra di stato. Per ulteriori informazioni, consultate la documentazione del browser.

Potete incorporare nel testo qualunque espressione JavaScript valida, come chiamate di funzione, proprietà, variabili globali o altro. Per incorporare le espressioni JavaScript, mettetele tra parentesi graffe ({}). Per visualizzare una parentesi graffa, fatela precedere da una barra rovesciata (\{).

Esempio:

The URL for this page is {window.location}, and today is {new Date()}.
  1. Selezionate un oggetto e scegliete Imposta testo > Imposta testo della barra di stato dal menu Aggiungi comportamento del pannello Comportamenti.
  2. Digitate il messaggio desiderato nella casella Messaggio della finestra di dialogo Imposta testo barra di stato.

    Inserite un messaggio breve. I browser, infatti, troncano i messaggi che hanno una lunghezza eccessiva rispetto alla barra di stato.

  3. Fate clic su OK e verificate che l'evento predefinito sia corretto.

Applicare il comportamento Imposta testo del campo di testo

Il comportamento Imposta testo del campo di testo consente di sostituire il contenuto del campo di testo di un modulo con il contenuto specificato.

Potete incorporare nel testo qualunque espressione JavaScript valida, come chiamate di funzione, proprietà, variabili globali o altro. Per incorporare le espressioni JavaScript, mettetele tra parentesi graffe ({}). Per visualizzare una parentesi graffa, fatela precedere da una barra rovesciata (\{).

Esempio:

The URL for this page is {window.location}, and today is {new Date()}.

Creare un campo di testo con nome

  1. Selezionate Inserisci > Modulo > Campo testo.

    Se Dreamweaver chiede se desiderate aggiungere un tag di modulo, fate clic su Sì.

  2. Nella finestra di ispezione Proprietà, digitate un nome per il campo di testo. Scegliete un nome univoco all'interno della pagina; in altre parole, non utilizzate lo stesso nome per elementi che appaiono nella stessa pagina, anche se in moduli diversi.

Applicare Imposta testo del campo di testo

  1. Selezionate un campo di testo e scegliete Imposta testo > Imposta testo del campo di testo dal menu Aggiungi comportamento del pannello Comportamenti.
  2. Selezionate il campo di testo di destinazione dal menu Campo testo e inserite il nuovo testo.
  3. Fate clic su OK e verificate che l'evento predefinito sia corretto.

Applicare il comportamento Mostra-nascondi elementi

Il comportamento Mostra-nascondi elementi consente di eseguire una serie di operazioni per uno o più elementi di pagina, ad esempio visualizzarli, nasconderli e ripristinarne la visibilità predefinita. Questo comportamento può essere utilizzato anche per visualizzare una serie di informazioni mentre l'utente interagisce con la pagina. Ad esempio, se l'utente sposta il cursore sull'immagine di una pianta, potete visualizzare un elemento di pagina che indica la stagione di fioritura della pianta, le dimensioni che può raggiungere, la quantità di sole necessaria e così via. Il comportamento si limita a visualizzare o nascondere l'elemento pertinente, non lo rimuove dal flusso della pagina quando è nascosto.

  1. Selezionate un oggetto e scegliete Mostra-nascondi elementi dal menu Aggiungi comportamento del pannello Comportamenti.

    Se l'opzione Mostra-nascondi elementi non è disponibile, probabilmente è selezionato un elemento PA. Poiché gli elementi PA non accettano gli eventi in entrambi i browser 4.0, dovete selezionare un oggetto differente, ad esempio il tag <body> oppure un tag di collegamento (<a>).

  2. Selezionate l'elemento desiderato dall'elenco Elementi e fate clic su Mostra, Nascondi o Predefinito (ripristina la visibilità predefinita).
  3. Ripetete il passaggio 2 per tutti gli altri elementi di cui volete modificare la visibilità. (Potete cambiare la visibilità di più elementi con un unico comportamento.)
  4. Fate clic su OK e verificate che l'evento predefinito sia corretto.

Questo comportamento è stato dichiarato obsoleto a partire da Dreamweaver CS5.

Applicare il comportamento Scambia immagine

Il comportamento Scambia immagine sostituisce un'immagine a un'altra, modificando l'attributo src del tag <img>. Questo comportamento può essere utilizzato per creare oggetti rollover e altri effetti visivi (compreso lo scambio di più immagini alla volta). Se inserite un'immagine di rollover, viene automaticamente aggiunto il comportamento Scambia immagine alla pagina.

Nota:

poiché questo comportamento modifica solo l'attributo src, l'immagine di scambio deve avere le stesse dimensioni (altezza e larghezza) dell'immagine originale. In caso contrario, l'immagine inserita viene ridotta o ingrandita in modo da corrispondere alle dimensioni dell'originale.

È inoltre disponibile il comportamento Ripristino immagini scambiate, che ripristina i file di origine precedenti per l'ultima serie di immagini scambiate. Poiché questo comportamento viene aggiunto automaticamente quando applicate a un oggetto il comportamento Scambia immagine, non è necessario attivarlo manualmente se avete lasciato selezionata l'opzione Ripristina durante l'applicazione di Scambia immagine.

  1. Selezionate Inserisci > Immagine o fate clic sul pulsante Immagine nel pannello Inserisci per inserire un'immagine.
  2. Nella finestra di ispezione Proprietà, inserite un nome per l'immagine nella casella di testo all'estrema sinistra.

    Non è obbligatorio assegnare un nome alle immagini: quando associate il comportamento a un oggetto, esse vengono denominate automaticamente. L'assegnazione dei nomi semplifica tuttavia il riconoscimento delle immagini nella finestra di dialogo Scambia immagine.

  3. Ripetete i passaggi 1 e 2 per inserire altre immagini.
  4. Selezionate un oggetto (generalmente l'immagine che desiderate scambiare) e scegliete Scambia immagine nel menu Aggiungi comportamento del pannello Comportamenti.
  5. Selezionate l'immagine per cui desiderate modificare l'origine dall'elenco Immagini.
  6. Inserite il percorso e il nome del file di immagine che desiderate precaricare nella casella Imposta origine su, oppure fate clic su Sfoglia e selezionate un file di immagine.
  7. Ripetete i passaggi 5 e 6 per le altre immagini da modificare. Utilizzate la stessa azione Scambia immagine per tutte le immagini da sostituire contemporaneamente; in caso contrario, non saranno tutte ripristinate dall'azione Ripristino immagini scambiate corrispondente.
  8. Selezionate l'opzione Precarica immagini per fare in modo che le nuove immagini vengano memorizzate nella cache durante il caricamento della pagina.

    In questo modo si evitano inutili attese quando arriva il momento di visualizzare queste immagini.

  9. Fate clic su OK e verificate che l'evento predefinito sia corretto.

Applicare il comportamento Convalida modulo

Il comportamento Convalida modulo analizza il contenuto dei campi di testo specificati dall'utente per verificare che sia stato inserito il tipo di dati corretto. Questo comportamento può essere applicato ai singoli campi di testo con l'evento onBlur per convalidare i campi man mano che vengono compilati dall'utente, oppure può essere applicato a tutto il modulo con l'evento onSubmit per verificare più campi di testo contemporaneamente quando l'utente fa clic sul pulsante di invio. Nel secondo caso si evita di inviare al server un modulo che contiene dati non validi.

  1. Selezionate Inserisci > Modulo o fate clic sul pulsante Modulo nel pannello Inserisci per inserire un modulo.
  2. Selezionate Inserisci > Modulo > Campo di testo o fate clic sul pulsante Campo testo nel pannello Inserisci per inserire un campo di testo.

    Ripetete questo passaggio per inserire altri campi di testo.

  3. Scegliete un metodo di convalida:

    • Se desiderate convalidare i singoli campi man mano che vengono compilati, selezionate un campo di testo e scegliete Finestra > Comportamenti.

    • Se desiderate convalidare più campi al momento dell'invio del modulo, fate clic sul tag <form> nel selettore situato nell'angolo inferiore sinistro della finestra del documento e selezionate Finestra > Comportamenti.

  4. Selezionate Convalida modulo dal menu Aggiungi comportamento.
  5. Effettuate una delle operazioni seguenti:

    • Se state convalidando campi singoli, selezionate nell'elenco Campi lo stesso campo selezionato nella finestra del documento.

    • Se state convalidando più campi, selezionate un campo di testo nell'elenco Campi.

  6. Se questo campo deve contenere obbligatoriamente dei dati, selezionate l'opzione Obbligatorio.
  7. Selezionate una delle opzioni Accetta seguenti:

    Qualunque

    Controlla che un campo obbligatorio sia stato compilato con dati di qualsiasi tipo. 

    Indirizzo e-mail

    Controlla che il campo contenga un simbolo @.

    Numero

    Controlla che il campo contenga solo caratteri numerici.

    Numeri da

    Controlla che il campo contenga solo i caratteri numerici compresi nell'intervallo specificato.

  8. Se avete scelto di convalidare più campi, ripetete i passaggi 6 e 7 per gli altri campi da convalidare.
  9. Fate clic su OK.

    Se state convalidando più campi, nel menu Eventi viene automaticamente visualizzato l'evento onSubmit.

  10. Se state convalidando campi singoli, verificate che l'evento predefinito sia onBlur oppureonChange. In caso contrario, selezionate uno di questi eventi.

    Entrambi gli eventi attivano il comportamento Convalida modulo quando l'utente allontana il cursore dal campo. La differenza tra i due è che onBlur si verifica indipendentemente dal fatto che il campo sia stato compilato o meno, mentre onChange si verifica solo se è stato modificato il contenuto del campo. L'evento onBlur è preferibile se il campo è stato specificato come obbligatorio.

Altri argomenti correlati

Logo Adobe

Accedi al tuo account

Collegamenti rapidi

Visualizza tutti i tuoi piani Gestione dei piani

Note legali    |    Informativa sulla privacy online