- Guida utente di Dreamweaver
- Introduzione
- Dreamweaver e Creative Cloud
- Aree di lavoro e viste di Dreamweaver
- Configurare i siti
- Siti di Dreamweaver
- Configurare una versione locale del sito
- Collegamento a un server di pubblicazione
- Configurare un server di prova
- Importare ed esportare le impostazioni di un sito Dreamweaver
- Passaggio di siti Web esistenti da un server remoto alla cartella principale del sito locale
- Funzioni di accessibilità in Dreamweaver
- Impostazioni avanzate
- Impostazione delle preferenze del sito per il trasferimento dei file
- Specificare le Impostazioni del server proxy in Dreamweaver
- Sincronizzare le impostazioni di Dreamweaver con Creative Cloud
- Utilizzo di Git in Dreamweaver
- Gestire i file
- Creare e aprire file
- Gestire file e cartelle
- Scaricamento e caricamento dei file da e verso il server
- Depositare e ritirare i file
- Sincronizzare i file
- Confrontare file per verificare le differenze
- Applicare la maschera file a file e cartelle del sito Dreamweaver
- Attivare le Design Notes per i siti di Dreamweaver
- Impedire un potenziale attacco exploit del Gatekeeper
- Layout e progettazione
- Usare i riferimenti visivi per il layout
- Informazioni sull'utilizzo di CSS per creare il layout della pagina
- Progettazione di siti Web reattivi con Bootstrap
- Creazione e utilizzo di media query in Dreamweaver
- Presentare il contenuto mediante le tabelle
- Colori
- Responsive design con i layout a griglia fluida
- Extract in Dreamweaver
- CSS
- Nozioni sui fogli di stile CSS
- Creazione del layout delle pagine con CSS Designer
- Utilizzare i preprocessori CSS in Dreamweaver
- Impostare le preferenze di stile CSS in Dreamweaver
- Spostare le regole CSS in Dreamweaver
- Convertire CSS in linea in una regola CSS in Dreamweaver
- Utilizzare i tag div
- Applicare sfumature allo sfondo
- Creare e modificare effetti di transizione CSS3 in Dreamweaver
- Formattazione del codice
- Contenuto e risorse delle pagine
- Impostare le proprietà di pagina
- Impostare le proprietà dei collegamenti CSS e le proprietà dei collegamenti CSS
- Lavorare con il testo
- Ricercare e sostituire testo, tag e attributi
- Pannello DOM
- Modifica nella vista Dal vivo
- Codifica dei documenti in Dreamweaver
- Selezionare e visualizzare gli elementi nella finestra del documento
- Definire le proprietà del testo nella finestra di ispezione Proprietà
- Eseguire il controllo ortografico di una pagina Web
- Utilizzo dei filetti orizzontali in Dreamweaver
- Aggiungere e modificare le combinazioni di caratteri in Dreamweaver
- Operazioni con le risorse
- Inserire e aggiornare le date in Dreamweaver
- Creare e gestire le risorse preferite in Dreamweaver
- Inserire e modificare le immagini in Dreamweaver
- Aggiungere oggetti multimediali
- Aggiunta di video in Dreamweaver
- Inserire video HTML5
- Inserire file SWF
- Aggiungere effetti audio
- Inserire l'audio HTML5 in Dreamweaver
- Operazioni con le voci di libreria
- Utilizzare testo in arabo e in ebraico in Dreamweaver
- Collegamenti e navigazione
- Widget ed effetti jQuery
- Programmazione dei siti Web
- Programmazione in Dreamweaver
- Ambiente di codifica in Dreamweaver
- Impostare le preferenze di codifica
- Personalizzare la colorazione del codice
- Scrivere e modificare codice
- Suggerimenti sul codice e completamento del codice
- Comprimere ed espandere codice
- Riutilizzo del codice con gli snippet
- Comando Lint
- Ottimizzare il codice
- Modificare il codice nella vista Progettazione.
- Utilizzo del contenuto dell'intestazione delle pagine
- Inserimento di server-side include in Dreamweaver
- Uso delle librerie di tag in Dreamweaver
- Importazione di tag personalizzati in Dreamweaver
- Utilizzare i comportamenti JavaScript (istruzioni generali)
- Applicare comportamenti JavaScript incorporati
- Informazioni su XML e XSLT
- Eseguire trasformazioni XSL server-side in Dreamweaver
- Esecuzione di trasformazioni XSL client-side in Dreamweaver
- Aggiungere entità di carattere per XSLT in Dreamweaver
- Formattazione del codice
- Flussi di lavoro di interazione con altri prodotti
- Installazione e uso delle estensioni in Dreamweaver
- Aggiornamenti in app in Dreamweaver
- Inserire documenti Microsoft Office in Dreamweaver (solo Windows)
- Operazioni con Fireworks e Dreamweaver
- Modificare il contenuto nei siti Dreamweaver mediante Contribute
- Integrazione tra Dreamweaver e Business Catalyst
- Creare campagne e-mail personalizzate
- Modelli
- Informazioni sui modelli di Dreamweaver
- Riconoscere i modelli e i documenti basati sui modelli
- Creare un modello di Dreamweaver
- Creare aree modificabili nei modelli
- Creare aree e tabelle ripetute nei modelli in Dreamweaver
- Usare le aree opzionali nei modelli
- Definire attributi di tag modificabili in Dreamweaver
- Creare modelli nidificati in Dreamweaver
- Modificare, aggiornare ed eliminare modelli
- Esportare e importare contenuti xml in Dreamweaver
- Applicare o rimuovere un modello da un documento esistente
- Modificare il contenuto nei modelli di Dreamweaver
- Regole di sintassi per i tag di modello in Dreamweaver
- Impostare le preferenze di evidenziazione per le aree dei modelli
- Vantaggi dell'uso dei modelli in Dreamweaver
- Dispositivi mobili e multischermo
- Siti, pagine e moduli Web dinamici
- Applicazioni Web
- Configurare il computer per lo sviluppo di applicazioni
- Risoluzione dei problemi relativi alle connessioni di database
- Rimozione di script di connessione in Dreamweaver
- Progettare pagine dinamiche
- Panoramica sulle origini di contenuto dinamico
- Definire le origini di contenuto dinamico
- Aggiungere contenuto dinamico alle pagine
- Modifica del contenuto dinamico in Dreamweaver
- Visualizzare i record di database
- Fornire dati dal vivo e risoluzione dei problemi in Dreamweaver
- Aggiungere comportamenti server personalizzati in Dreamweaver
- Creazione di moduli con Dreamweaver
- Usare moduli per raccogliere informazioni dagli utenti
- Creare e attivare i moduli ColdFusion in Dreamweaver
- Creare moduli Web
- Supporto HTML5 avanzato per gli elementi modulo
- Sviluppare un modulo con Dreamweaver
- Sviluppo visivo delle applicazioni
- Creare pagine principali e di dettaglio in Dreamweaver
- Creare pagine di ricerca e di risultati
- Creare una pagina di inserimento record
- Costruire una pagine di aggiornamento record in Dreamweaver
- Costruzione di pagine di eliminazione record in Dreamweaver
- Utilizzare comandi ASP per modificare un database in Dreamweaver
- Creare una pagina di registrazione
- Creare una pagina di login
- Creare una pagina accessibile solo agli utenti autorizzati
- Protezione delle cartelle in ColdFusion utilizzando Dreamweaver
- Utilizzo di componenti ColdFusion in Dreamweaver
- Verifica, anteprima e pubblicazione dei siti Web
- Risoluzione dei problemi
Scoprite le modalità con cui Dreamweaver supporta diversi linguaggi di programmazione utilizzati per la creazione di siti Web.
I linguaggi di programmazione più comuni per la progettazione e lo sviluppo di siti Web funzionali sono HTML, HTML5 e CSS per il front-end e PHP, JavaScript, Java e jQuery per il back-end.
Potete progettare l'aspetto generale di un sito Web (ad esempio i font e i colori) utilizzando CSS. Potete quindi usare il linguaggio HTML per inserire immagini, testo, video, moduli e altre parti di contenuto per formare una pagina Web coesa.
Utilizzando i linguaggi HTML e CSS, potete creare un sito statico. Tuttavia, la maggior parte dei siti Web richiedono una qualche forma di interazione (ad esempio, richiedere a un utente di compilare un modulo o di effettuare un pagamento) e di un database per memorizzare tutti i dati del sito Web.
Per creare questi canali di comunicazione back-end, dovete utilizzare un linguaggio di programmazione lato server (ad esempio, PHP) che comunichi con il database.
Linguaggi di programmazione supportati da Dreamweaver
Oltre a offrire le funzioni di modifica del testo, Adobe Dreamweaver dispone di varie funzioni, ad esempio i suggerimenti per il codice, che facilitano la creazione di codice nei seguenti linguaggi:
- HTML
- PHP
- CSS
- JavaScript
Altri linguaggi, ad esempio Perl, non sono supportati dalle funzioni di codifica di Dreamweaver specifiche per i singoli linguaggi; ad esempio, potete creare e modificare file Perl, ma i suggerimenti per il codice non sono disponibili per questo linguaggio.
Modifica automatica del codice
Potete impostare opzioni che indicano a Dreamweaver di ottimizzare il codice scritto a mano secondo criteri specifici. Tuttavia il codice non viene mai riscritto, a meno che non siano attivate le opzioni di riscrittura oppure venga eseguita un'azione che cambia il codice. Ad esempio, Dreamweaver non altera gli spazi vuoti e mantiene invariate le lettere maiuscole/minuscole a meno che non si utilizzi il comando Applica formattazione di origine.
Alcune di queste opzioni di riscrittura codice sono attivate per impostazione predefinita.
Le funzioni Roundtrip HTML di Dreamweaver consentono di trasferire i documenti tra Dreamweaver e un editor di testo HTML con un effetto minimo o nullo sul contenuto e sulla struttura del codice di origine HTML del documento. Le funzioni di Roundtrip HTML sono le seguenti:
Avvia un editor di testo di terze parti per modificare il documento corrente.
Per impostazione predefinita, Dreamweaver non apporta modifiche al codice creato o modificato con altri editor HTML, anche se non valido, a meno che con vengano attivate le opzioni di riscrittura del codice.
Dreamweaver non modifica i tag che non riconosce (compresi i tag XML) perché non dispone dei criteri per valutarne la validità. Se un tag non riconosciuto si sovrappone a un altro tag (ad esempio, <MyNewTag><em>text</MyNewTag></em>), Dreamweaver lo segnala come errore ma non riscrive il codice.
Facoltativamente, potete impostare Dreamweaver in modo che evidenzi in giallo il codice non valido nella vista Codice. Quando selezionate una sezione evidenziata, nella finestra di ispezione Proprietà vengono visualizzate informazioni su come correggere l'errore.
Codice XHTML
Dreamweaver genera il nuovo codice XHTML e ottimizza quello preesistente in modo da soddisfare automaticamente la maggior parte dei requisiti XHTML. Vengono forniti anche gli strumenti necessari per soddisfare i pochi requisiti XHTML rimanenti.
alcuni dei requisiti sono obbligatori anche in varie versioni del linguaggio HTML.
Nella tabella seguente sono descritti i requisiti XHTML automaticamente soddisfatti in Dreamweaver:
Requisito XHTML |
Azioni eseguite da Dreamweaver |
---|---|
Prima dell'elemento principale, deve essere presente nel documento una dichiarazione DOCTYPE che deve fare riferimento a uno dei tre file DTD (Document Type Definition) per XHTML (strict, transitional o frameset). |
Aggiunge un DOCTYPE XHTML a un documento XHTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Oppure, se il documento XHTML ha un set di frame: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> |
L'elemento principale del documento deve essere html e l'elemento html deve designare lo spazio dei nomi XHTML. |
Aggiunge l'attributo namespace all'elemento html nel modo seguente: <html xmlns="http://www.w3.org/1999/xhtml"> |
Un documento standard deve contenere gli elementi strutturali head, title e body. Un documento di un set di frame deve contenere gli elementi strutturali head, title e frameset. |
In un documento standard, include gli elementi head, title e body. In un documento di un set di frame, include gli elementi head, title e frameset. |
Tutti gli elementi del documento devono essere correttamente nidificati: <p>Questo è un <i>cattivo esempio.</p></i> <p>Questo è un <i>buon esempio.</i></p> |
Genera un codice correttamente nidificato e, durante l'ottimizzazione del codice XHTML, corregge la nidificazione del codice non generato da Dreamweaver. |
Tutti i nomi degli elementi e degli attributi devono essere scritti in minuscolo. |
Applica forzatamente il minuscolo ai nomi degli elementi HTML e degli attributi nel codice XHTML generato e durante l'ottimizzazione del codice XHTML, a prescindere dalle preferenze di maiuscolo/minuscolo per tag e attributi. |
Ogni elemento deve contenere un tag di chiusura, salvo che non venga dichiarato come EMPTY nel DTD. |
Inserisce tag di chiusura nel codice generato e durante l'ottimizzazione del codice XHTML. |
Gli elementi vuoti devono avere un tag di chiusura, oppure il relativo tag di apertura deve terminare con /. Ad esempio, <br> non è valido; la forma corretta è <br></br> oppure <br/>. Di seguito sono riportati gli elementi vuoti: area, base, basefont, br, col, frame, hr, img, input, isindex, link, meta e param. Per garantire la compatibilità con le versioni precedenti di browser non abilitati per il codice XML, deve essere presente uno spazio prima di /> (ad esempio, <br />, non <br/>). |
Inserisce elementi vuoti con uno spazio prima della barra di chiusura nei tag vuoti del codice generato e durante l'ottimizzazione del codice XHTML. |
Gli attributi non possono essere abbreviati. Ad esempio, <td nowrap> non è valido, la forma corretta è <td nowrap="nowrap">. Questo influisce sui seguenti attributi: checked, compact, declare, defer, disabled, ismap, multiple, noresize, noshade, nowrap, readonly e selected. |
Inserisce coppie attributo-valore complete nel codice generato e durante l'ottimizzazione del codice XHTML. Nota: se un browser HTML non supporta HTML 4, potrebbe non riuscire a interpretare questi attributi booleani quando sono specificati nella loro forma completa. |
Tutti i valori degli attributi devono essere inclusi tra virgolette. |
Racchiude tra virgolette i valori degli attributi del codice generato e durante l'ottimizzazione del codice XHTML. |
I seguenti elementi devono disporre di un attributo id e di un attributo name: a, applet, form, frame, iframe, img e map. Ad esempio <a name="intro">Introduction</a> non è valido; la forma corretta è <a id="intro">Introduzione</a> o <a id="section1" name="intro"> Introduzione</a>. |
Ogni volta che l'attributo name viene impostato da una finestra di ispezione Proprietà, imposta gli attributi name e id sullo stesso valore nel codice generato da Dreamweaver e durante l'ottimizzazione del codice XHTML. |
Per attributi con valori di tipo enumerato, i valori devono essere in minuscolo. Un valore di tipo enumerato deriva da un elenco specificato di valori consentiti. Ad esempio, l'attributo align dispone dei seguenti attributi consentiti: center, justify, left e right. |
Applica forzatamente il minuscolo ai valori di tipo enumerato nel codice generato e durante l'ottimizzazione del codice XHTML. |
Tutti gli elementi di script e di stile devono avere un attributo type. L'attributo type dell'elemento di script è stato reso obbligatorio a partire da HTML 4, quando è stato abbandonato l'uso dell'attributo language. |
Imposta gli attributi type e language negli elementi di script e l'attributo type negli elementi di stile nel codice generato e durante l'ottimizzazione del linguaggio XHTML. |
Tutti gli elementi img e area devono avere un attributo alt. |
Imposta questi attributi nel codice generato e durante l'ottimizzazione del codice XHTML, segnalando tutti gli attributi alt mancanti. |
Espressioni regolari
Le espressioni regolari sono modelli che specificano combinazioni di caratteri all'interno del testo. Potete utilizzarle nelle ricerche di codice per descrivere concetti come “righe che cominciano con ‘var’” oppure “valori di attributo contenenti un numero”.
La tabella riportata di seguito elenca i caratteri speciali utilizzati nelle espressioni regolari, i relativi significati e degli esempi. Per cercare un testo contenente uno dei caratteri speciali indicati nella tabella, digitate una barra rovesciata (\) davanti al carattere in questione. Ad esempio, per cercare un asterisco nella frase offerta soggetta a restrizioni*, il modello di ricerca potrebbe essere il seguente: restrizioni\*. Se non anteponete una barra rovesciata all'asterisco, verranno trovate tutte le occorrenze di “restrizioni” (nonché quelle di “restrizion”, “restrizionii” e “restrizioniii”), non solo quelle seguite da un asterisco.
Carattere |
Corrisponde a |
Esempio |
---|---|---|
^ |
Inizio dei dati inseriti o della riga. |
^L corrisponde a “L” in “La lunga marcia” ma non in “Gianni e Laura” |
$ |
Fine dei dati inseriti o della riga. |
d$ corrisponde a “d” in “foulard” ma non in “leopardo” |
* |
Il carattere precedente 0 o più volte. |
un* corrisponde a “un” in “una bottiglia”, a “unn” in “alunno” e a “u” in “lupo” |
+ |
Il carattere precedente 1 o più volte. |
un+ corrisponde a “un” in “una bottiglia”, a “unn” in “alunno” ma a niente in “lupo” |
? |
Il carattere precedente al massimo una volta (cioè, indica che il carattere precedente è opzionale). |
gi?on corrisponde a “gon” in “vagone” e a “gion” in “ragione”, ma non a “razione” o a “rognone” |
. |
Qualunque carattere singolo eccetto quello di a capo. |
.is corrisponde a “ris” e a “pis” in “riso e piselli” |
x|y |
x o y. |
FF0000|0000FF corrisponde a “FF0000” in bgcolor="#FF0000" e a “0000FF” in font color="#0000FF" |
{n} |
Esattamente n occorrenze del carattere precedente. |
o{2} corrisponde a “oo” in “alcool” ma non a “gladiolo” |
{n,m} |
Almeno n e al massimo m occorrenze del carattere precedente. |
F{2,4} corrisponde a “FF” in "#FF0000" e alle prime quattro F in #FFFFFF |
[abc] |
Uno qualunque dei caratteri racchiusi tra le parentesi quadre. Per specificare una serie di caratteri, separate il primo e l'ultimo con un trattino (ad esempio, [a-f] equivale a [abcdef]). |
[e-g] corrisponde a “e” in “bello”, a “f” in “follia” e a “g” in “guardia” |
[^abc] |
Uno qualunque dei caratteri non racchiusi tra le parentesi quadre. Per specificare una serie di caratteri, separate il primo e l'ultimo con un trattino (ad esempio, [^a-f] equivale a [^abcdef]). |
[^aeiou] corrisponde alla “r” in “arancio”, alla “b” in “buono” e alla “s” in “sei” |
\b |
Un limite di parola (ad esempio, uno spazio o un a capo). |
\bb corrisponde a “b” in “buono” ma non in “libro” |
\B |
Qualsiasi cosa diversa da un limite di parola. |
\Bb corrisponde a “b” in “libro” ma non in “buono” |
\d |
Una cifra. Equivale a [0-9]. |
\d corrisponde a “3” in “formato A3” e a “2” in “appartamento 2G” |
\D |
Qualunque carattere tranne le cifre. Equivale a [^0-9]. |
\D corrisponde a “S” in “900S” e a “Q” in “Q45” |
\f |
Avanzamento modulo. |
|
\n |
Avanzamento riga. |
|
\r |
A capo (ritorno del carrello). |
|
\s |
Qualunque carattere singolo di spaziatura (spazio, tabulazione, avanzamento modulo o avanzamento riga). |
\smano corrisponde a “mano” in “seconda mano” ma non in “asciugamano” |
\S |
Qualunque carattere singolo non di spaziatura. |
\Smano corrisponde a “mano” in “asciugamano” ma non in “seconda mano” |
\t |
Una tabulazione. |
|
\w |
Qualunque carattere alfanumerico, compreso il trattino di sottolineatura. Equivale a [A-Za-z0-9_]. |
g\w* corrisponde a “grotta” in “la grotta buia” e sia a “gran” che a “giornata” in “una gran bella giornata” |
\W |
Qualunque carattere non alfanumerico. Equivale a [^A-Za-z0-9_]. |
\W corrisponde a “&” in “Bianco & nero” e a “%” in “100%” |
Ctrl+Invio o Maiusc+Invio (Windows) oppure Ctrl+Invio o Maiusc+Invio o Comando+Invio (Macintosh) |
Carattere di invio a capo. Quando effettuate una ricerca senza utilizzare le espressioni regolari, accertatevi di aver deselezionato l'opzione Ignora spazi vuoti. In questo modo potete trovare la corrispondenza di un carattere particolare, non la nozione generale di interruzione di riga: ad esempio, non viene trovata la corrispondenza di un tag <br> o di un tag <p>. Nella vista Progettazione, i caratteri di invio a capo vengono visualizzati sotto forma di spazi, non come interruzioni di riga. |
Utilizzate le parentesi per separare i raggruppamenti all'interno dell'espressione regolare a cui fare riferimento successivamente. Quindi utilizzate $1, $2, $3 e così via nel campo Sostituisci con per fare riferimento al primo, al secondo, al terzo e ai successivi raggruppamenti tra parentesi.
nella casella Cerca, per fare riferimento a un raggruppamento fra parentesi nell'espressione regolare precedente, utilizzate \1, \2, \3 e così via al posto di $1, $2, $3.
Ad esempio, se cercate (\d+)\/(\d+)\/(\d+) e lo sostituite con $2/$1/$3, il giorno e il mese vengono invertiti in una data separata da barre convertendo il formato americano in formato europeo e viceversa.
Codice comportamenti server
Quando sviluppate una pagina dinamica e selezionate un comportamento server dal pannello Comportamenti server, Dreamweaver inserisce nella pagina uno o più blocchi di codice per assicurare il corretto funzionamento del comportamento server.
Se modificate manualmente il codice all'interno di un blocco di codice, risulta impossibile utilizzare i pannelli, quali Associazioni e Comportamenti server, per modificare il comportamento server. Dreamweaver esegue la ricerca in base a criteri specifici all'interno del codice della pagina per individuare i comportamenti server e visualizzarli nel pannello Comportamenti server. Se modificate in qualsiasi modo il codice di un blocco di codice, risulta impossibile per Dreamweaver rilevare il comportamento server e visualizzarlo nel pannello Comportamenti server. Il comportamento rimane comunque nella pagina e potete modificarlo nell'ambiente di codifica di Dreamweaver.