Utilizzate i suggerimenti sul codice di Dreamweaver e le funzioni di completamento del codice per ridurre i tempi di codifica.

Le funzioni di completamento intelligente del codice o di suggerimento del codice di Dreamweaver consentono di inserire e modificare rapidamente il codice, riducendo gli errori di ortografia e altri errori comuni.

Questa funzione può essere utilizzata anche per visualizzare:

  • Gli attributi disponibili per un tag,
  • I parametri disponibili per una funzione o
  • I metodi disponibili per un oggetto.

Linguaggi e tecnologie supportati

Dreamweaver supporta i suggerimenti codice per i linguaggi e le tecnologie seguenti:

Continuate a leggere per apprendere il funzionamento dei suggerimenti sul codice e del completamento del codice per questi linguaggi.

Abilitare i suggerimenti sul codice

Per abilitare i suggerimenti sul codice, fate clic su Modifica > Preferenze > Suggerimenti codice, quindi selezionate Abilita suggerimenti per il codice. Per disabilitare i suggerimenti per il codice, deselezionate Abilita suggerimenti per il codice.

Per abilitare le descrizioni nei suggerimenti per il codice, selezionate Abilita descrizioni comandi. Potete quindi vedere le descrizioni con i suggerimenti per il codice.

Suggerimenti sul codice HTML

Per HTML sono disponibili i seguenti tipi di suggerimenti per il codice:

  • Suggerimenti per i tag
  • Suggerimenti per il nome attributo
  • Suggerimenti per il valore di attributo

Suggerimenti per i tag

Premete il tasto < sulla tastiera per iniziare a digitare il codice. Mentre digitate, Dreamweaver visualizza i tag HTML validi. Se la stringa che si sta digitando viene visualizzata nel menu, scorrete fino alla stringa e premete Invio per completare l’immissione.

Ad esempio, quando digitate <, un menu a comparsa mostra un elenco di nomi di tag. Invece di digitare tutto nome di tag, potete selezionare nel menu il tag da includere nel testo.

Suggerimenti per il codice HTML di base
Suggerimenti per il codice HTML di base

Questi suggerimenti per i tag HTML includono anche una breve descrizione del tag, se disponibile.

Suggerimenti per il nome attributo

Dreamweaver visualizza gli attributi appropriati per i tag durante la codifica in Dreamweaver. Digitate un nome di tag e premete la barra spaziatrice per visualizzare i nomi di attributo validi che potete utilizzare.

Suggerimenti per il codice del nome attributo
Suggerimenti per il codice del nome attributo

Suggerimenti per il valore di attributo

Il testo dei suggerimenti per il codice dei valori di attributo può essere statico o dinamico (poiché nei suggerimenti per il codice vengono visualizzati i valori in base al contenuto dei
file correlati). 

La maggior parte dei suggerimenti del valore di attributo sono statici. Prendete ad esempio il valore dell’attributo di destinazione che è statico per natura; pertanto, anche i suggerimenti sono statici. 

Esempio di suggerimenti statici per il valore dell’attributo
Esempio di suggerimenti statici per il valore dell’attributo

Dreamweaver visualizza i suggerimenti dinamici per il codice per quei valori di attributo che lo richiedono, ad esempio ID, destinazione, src, href e classe.

Seguono alcuni esempi di suggerimenti per codice visualizzati in modo dinamico. 

Suggerimenti dinamici per il codice di src

In questo esempio, quando digitate src, vengono visualizzati valori di attributo validi e quando selezionate le immagini, Dreamweaver visualizza le immagini che sono attualmente valide presenti nella cartella delle immagini Potete scorrere verso il basso e scegliere l’immagine desiderata.

Suggerimenti dinamici per il codice di src
Suggerimenti dinamici per il codice di src

Se avete risorse in CC Libraries, anche queste vengono visualizzate quando digitate src. Queste risorse di libreria CC sono indicate da un’icona a forma di nuvola.

Quando scegliete una risorsa di libreria CC, viene visualizzato un menu a comparsa che consente di ricampionare le dimensioni dell’immagine e di modificarne il formato.

Aggiunta di una risorsa di libreria CC nel codice
Aggiunta di una risorsa di libreria CC nel codice

Nota:

Nei suggerimenti per il codice è possibile visualizzare al massimo 50 risorse di libreria CC. Tali suggerimenti sono visualizzati in ordine alfabetico.

Nota:

L’inclusione delle risorse remote di libreria CC nel codice di Dreamweaver non è supportata.

Suggerimenti dinamici per il codice di href

Quando digitate href, Dreamweaver visualizza un elenco di file nella cartella e consente anche di sfogliare e selezionare il file che desiderate collegare.

Suggerimenti dinamici per il codice di href
Suggerimenti dinamici per il codice di href

Suggerimenti dinamici per il codice di ID e stile

Se avete definito gli ID nei file CSS, quando digitate l’ID nei file HTML Dreamweaver visualizza tutti gli ID disponibili.

Suggerimenti dinamici per il codice di ID
Suggerimenti dinamici per il codice di ID

Nello stesso modo, se avete definito gli stili CSS, quando digitate lo stile nei file HTML Dreamweaver visualizza tutti gli stili disponibili.

Suggerimenti dinamici per il codice di stile
Suggerimenti dinamici per il codice di stile

Suggerimenti sul codice CSS

I suggerimenti per il codice sono disponibili per i seguenti tipi diversi di CSS:

  • @rules
  • Proprietà
  • Pseudo-selettori e pseudo-elementi
  • Scrittura stenografica

Oltre ai suggerimenti per il codice, i suggerimenti sono anche disponibili per le proprietà CSS.

Suggerimenti per il codice per @regole CSS

Dreamweaver visualizza i suggerimenti per il codice di tutti i @rules con una descrizione della regola CSS come indicato qui.

Suggerimenti per il codice di @rule CSS
Suggerimenti per il codice di @rule CSS

Suggerimenti sulle proprietà CSS

Durante l’inserimento delle proprietà CSS, quando digitate i due punti, vengono visualizzati i suggerimenti per il codice per facilitare la scelta di un valore valido.

Nel seguente codice di esempio, quando si immette tipo di carattere:, vengono visualizzati dei set di caratteri validi.

Potete scegliere uno dei set di caratteri, oppure potete aprire la finestra di dialogo Gestisci caratteri dall’interno di questi suggerimenti e impostate i caratteri preferiti. 

Suggerimenti per il codice e guida alle proprietà CSS
Suggerimenti per il codice e guida alle proprietà CSS

Un altro esempio di utili suggerimenti per il codice sono quelli che è possibile visualizzare quando si lavora con il colore in CSS. Mentre digitate del testo in qualsiasi proprietà correlata ai colori (ad esempio il colore del bordo e il colore dello sfondo), quando premete i due punti, i suggerimenti per il codice visualizzano un elenco di colori. Potete selezionare un colore dall’elenco, oppure potete aprire il Selettore colore dall’interno dei suggerimenti stessi e impostare un colore preferito.

Suggerimenti per il codice relativi ai colori CSS
Suggerimenti per il codice relativi ai colori CSS

Se avete campioni di colori nelle librerie CC, i suggerimenti per il codice visualizzano anche questi campioni.

I campioni di colore nelle librerie CC sono contrassegnati da un’icona a forma di nuvola
I campioni di colore nelle librerie CC sono contrassegnati da un’icona a forma di nuvola

Nota:

Nei suggerimenti per il codice è possibile visualizzare al massimo 50 risorse di libreria CC. Tali suggerimenti sono visualizzati in ordine alfabetico.

Suggerimenti su pseudo-selettore e pseudo-elemento

Potete aggiungere uno pseudo-selettore CSS ad un selettore per definire un determinato stato dell’elemento. Ad esempio, quando usate :hover, lo stile si applica quando l’utente passa sopra all’elemento specificato dal selettore.

Quando digitate “:”, Dreamweaver mostra un elenco di pseudo-selettori validi se il cursore è nel contesto corretto.

Suggerimenti per il codice per psuedo-selettori
Suggerimenti per il codice per psuedo-selettori

Quando digitate “::”, Dreamweaver mostra un elenco di pseudo-elementi validi (usati per disegnare le parti specificate di un elemento) se il cursore è nel contesto corretto.

Suggerimenti per il codice per pseudo-elementi
Suggerimenti per il codice per pseudo-elementi

Suggerimenti per la scrittura stenografica CSS

Le proprietà di scrittura stenografia sono proprietà CSS che consentono di impostare i valori di diverse altre proprietà CSS simultaneamente. Alcuni esempi delle proprietà di scrittura stenografica CSS sono le proprietà background e font.

Come si può notare nell’esempio seguente, se digitate una proprietà di scrittura stenografia CSS (ad esempio, background) e digitate uno spazio, Dreamweaver visualizza:

  • Valori di proprietà appropriati in ordine di importanza
  • I valori obbligatori che devono essere utilizzati (ad esempio, se usate font, font-size e font-family sono obbligatori)
  • Espansione del browser per tale proprietà
Suggerimenti per il codice per le proprietà CSS background
Suggerimenti per il codice per le proprietà CSS background

Quando le proprietà di scrittura stenografica CSS sono compilate, anche i suggerimenti per il codice visualizzano i valori della proprietà che avete digitato.

Suggerimenti per il codice CSS

Per alcune proprietà CSS (ad esempio, box-shadow o text-shadow), Dreamweaver visualizza i suggerimenti che indicano quali valori devono seguire e indica con un asterisco anche i valori obbligatori. 

Potete inoltre osservare come il browser interpreta il codice CSS.

Suggerimenti visualizzati per le proprietà CSS
Suggerimenti visualizzati per le proprietà CSS

Suggerimenti per il codice di JavaScript

Nei file JavaScript, Dreamweaver fornisce suggerimenti per il codice per i parametri delle funzioni e le variabili. 

Nell’esempio seguente, lo snippet di codice indica il tipo.

Suggerimenti per il codice di JavaScript
Suggerimenti per il codice di JavaScript

Dreamweaver aggiorna automaticamente l’elenco dei suggerimenti per il codice disponibili quando lavorate nei file JavaScript. Ad esempio, se state lavorando in un file HTML principale e volete passare a un file JavaScript per apportare una modifica. La modifica apportata nel file JavaScript viene riportata nell’elenco dei suggerimenti per il codice quando tornate al file HTML principale. 

Nota:

Questo aggiornamento automatico funziona solo se modificate i file JavaScript in Dreamweaver.

Analisi di oggetti dal vivo

Dreamweaver aggiorna automaticamente anche i suggerimenti per il codice di tipo JavaScript.

Ad esempio, se definite una variabile come numero, Dreamweaver conserva tale informazione. Quando in seguito fate riferimento a tale variabile nel codice, ne indica il tipo.

Se cambiate il tipo di variabile, ad esempio in stringa, i suggerimenti per il codice di Dreamweaver indicano automaticamente che la variabile è una stringa.

Suggerimenti per il codice che indicano il tipo di variabile
Suggerimenti per il codice che indicano il tipo di variabile

Inclusione della documentazione dinamica

Se avete aggiunto commenti per una determinata funzione, quando tale funzione è suggerita, Dreamweaver visualizza anche la documentazione per questa funzione. 

Suggerimenti sul codice PHP

Dreamweaver supporta i suggerimenti sul codice per le versioni 5.6 e 7.1 di PHP. Questi suggerimenti per il codice PHP sono specifici per il sito e sono disponibili per tutte le funzioni, classi e costanti principali.

Per ulteriori informazioni su PHP 5.6 e 7.1, consultate il Manuale di PHP.

Per ulteriori informazioni sui suggerimenti per il codice specifici per il sito, vedete Suggerimenti per il codice specifici per il sito.

Una funzione di suggerimento per il codice PHP utile è la funzione di completamento automatico delle variabili.

Quando digitate il simbolo del dollaro ($), viene visualizzato un elenco di tutte le variabili presenti nello script. Selezionate quella desiderata, quindi premete Invio. Sono elencate anche le variabili dei file correlati, in modo da eliminare il rischio di riutilizzare la stessa variabile per uno scopo diverso.

Quando PHP 7.1 è l’impostazione predefinita, Dreamweaver visualizza i suggerimenti sul codice specifici a PHP 7.1.

Suggerimenti sul codice PHP 7
Suggerimenti sul codice PHP 7

Un esempio di suggerimento sul codice dell’oggetto PHP
Un esempio di suggerimento sul codice dell’oggetto PHP

Modificare le impostazioni di ritardo per i suggerimenti sul codice per PHP

Per migliorare le prestazioni di digitazione del codice nei file .php, in Dreamweaver 2017.5 e nelle versioni successive è stato aggiunto un ritardo per i suggerimenti sul codice per PHP. Quando digitate il codice PHP, Dreamweaver visualizza i suggerimenti dopo un ritardo di 400 ms. Se desiderate modificare le impostazioni di ritardo per il codice PHP, seguite questa procedura: 

  1. Uscite da Dreamweaver.

  2. Utilizzate un editor di testo per aprire brackets.json nel percorso seguente:

    • Windows%appdata%\Adobe\Dreamweaver CC 2017\<codice lingua>\Configuration\Brackets\
    • macOS~/Library/Application Support/Adobe/Dreamweaver CC 2017/<codice lingua>/Configuration/Brackets/
  3. Fate clic sul pulsante Salva struttura nell’angolo superiore destro della finestra di dialogo.

    Nel file JSON, aggiungete una virgola dopo l’ultima coppia nome/valore.

    Aggiungete la riga seguente con il tempo di ritardo desiderato in millisecondi: "delayInPHPHint": <tempo in millisecondi>. Ad esempio, "delayInPHPHint": 200.

  4. Salvate il file e avviate Dreamweaver.

Suggerimenti per il codice specifici per il sito

Dreamweaver permette agli sviluppatori che utilizzano Joomla, Drupal, Wordpress o altri framework di visualizzare i suggerimenti per il codice PHP mentre scrivono in vista Codice. Per visualizzare questi suggerimenti, dovete innanzi tutto creare un file di configurazione usando la finestra di dialogo Suggerimenti per il codice specifici per il sito. La configurazione viene utilizzata da Dreamweaver per cercare i suggerimenti per il codice specifici per il sito che state sviluppando.

Per un’esercitazione video sui suggerimenti per il codice specifici per il sito, vedete www.adobe.com/go/learn_dw_comm13_it.

Creare il file di configurazione

Utilizzate la finestra di dialogo Suggerimenti per il codice specifici per il sito per creare il file di configurazione necessario per visualizzare i suggerimenti per il codice in Dreamweaver.

Per impostazione predefinita, Dreamweaver memorizza il file di configurazione nella directory Adobe Dreamweaver CS5\configuration\Shared\Dinamico\Presets.

Nota:

I suggerimenti sul codice creati sono specifici per il sito selezionato nel pannello File di Dreamweaver. Per consentire la visualizzazione dei suggerimenti per il codice, la pagina su cui state lavorando deve trovarsi nel sito attualmente selezionato.

  1. Selezionate Sito > Opzioni sito > Suggerimenti per il codice specifici per il sito.

    Per impostazione predefinita, la funzione Suggerimenti per il codice specifici per il sito esegue una scansione del sito per determinare quale framework CMS (Content Management System) state utilizzando. Dreamweaver supporta tre framework predefiniti: Drupal, Joomla e Wordpress.

    I quattro pulsanti a destra del menu a comparsa Struttura consentono di importare, salvare, rinominare o eliminare le strutture di framework.

    Nota:

    Non è possibile eliminare o rinominare le strutture di framework predefinite esistenti.

  2. Nella casella di testo subroot, specificate la cartella subroot (ovvero contenuta nella cartella principale del sito) nella quale salvate i file del framework. Potete anche fare clic sull’icona della cartella accanto alla casella di testo per specificare la posizione dei file del framework.

    Dreamweaver visualizza la struttura ad albero delle cartelle che contengono i file del framework. Se tutti i file e le cartelle che desiderate analizzare sono visualizzati, fate clic su OK per eseguire la scansione. Se volete personalizzare la scansione, effettuate i passaggi successivi.

  3. Fate clic sul pulsante più (+) sopra la finestra File per selezionare un file o una cartella da aggiungere alla scansione. Nella finestra di dialogo Aggiungi file/cartelle, potete specificare particolari estensioni di nomi file da includere.

    Nota:

    Specificare un’estensione di nome file per velocizzare il processo di scansione.

  4. Per rimuovere dei file dalla scansione, selezionateli e fate clic sul pulsante meno (-) sopra la finestra File.

    Nota:

    Se il framework selezionato è Drupal o Joomla, la finestra di dialogo Suggerimenti per il codice specifici per il sito contiene un percorso aggiuntivo per un file contenuto nella cartella Configuration di Dreamweaver.

    Non eliminatelo; è necessario quando si utilizzano questi framework.

  5. Per personalizzare il modo in cui la funzione Suggerimenti per il codice specifici per il sito elabora un file o una cartella particolare, selezionate l’elemento desiderato dall’elenco ed effettuate una delle seguenti operazioni:

    • Selezionate Analizza questa cartella per includere la cartella selezionata nella scansione.
    • Selezionate Ricorsivo per includere tutti i file e le cartelle presenti in una directory selezionata.
    • Fate clic sul pulsante Estensioni per aprire la finestra di dialogo Trova estensioni, nella quale potete specificare le estensioni di nome file da includere nella scansione di un file o una cartella particolare.

Salvare la struttura del sito

Potete salvare la struttura del sito personalizzata che avete creato nella finestra di dialogo Suggerimenti per il codice specifici per il sito.

  1. Uscite da Dreamweaver.

  2. Create la struttura di file e cartelle di cui avete bisogno, aggiungendo ed eliminando le cartelle e i file necessari.

  3. Specificate un nome da assegnare alla struttura del sito e fate clic su Salva.

Nota:

Se il nome specificato è già utilizzato, un messaggio vi richiederà di inserire un nome diverso o di confermare che volete sovrascrivere la struttura che ha già quel nome. Non è possibile sovrascrivere nessuna delle strutture di framework predefinite.

Rinominare le strutture dei siti

Quando rinominate la struttura del sito, tenete presente che non potete utilizzare i nomi delle tre strutture di framework predefinite, né la parola "custom" (personalizzato).

  1. Visualizzate la struttura che volete rinominare.

  2. Fate clic sul pulsante a icona Rinomina struttura nell’angolo superiore destro della finestra di dialogo.

  3. Specificate il nuovo nome da assegnare alla struttura e fate clic su Rinomina.

Nota:

Se il nome specificato è già utilizzato, un messaggio vi richiederà di inserire un nome diverso o di confermare che volete sovrascrivere la struttura che ha già quel nome. Non è possibile sovrascrivere nessuna delle strutture di framework predefinite.

Aggiungere file o cartelle alla struttura di un sito

Potete aggiungere cartelle o file associati al framework. Dopo aver aggiunto i file o le cartelle, potete quindi specificare le estensioni dei nomi file di cui eseguire la scansione. 

  1. Fate clic sul pulsante più (+) sopra la finestra File per aprire la finestra di dialogo Aggiungi file/cartella.

  2. Nella casella di testo Aggiungi file/cartella, inserite il percorso del file o della cartella da aggiungere. Potete anche fare clic sull’icona della cartella accanto alla casella di testo per specificare un file o una cartella.

  3. Fate clic sul pulsante più (+) sopra la finestra Estensioni per specificare le estensioni dei nomi file di cui eseguire la scansione.

    Nota:

    Specificate un’estensione per il nome file per velocizzare il processo di scansione.

  4. Fate clic su Aggiungi.

Cercare le estensioni di nome file all’interno di un sito

Utilizzate la finestra di dialogo Trova estensioni per visualizzare e modificare le estensioni di nome file incluse nella struttura del sito.

  1. Nella finestra di dialogo Suggerimenti per il codice specifici per il sito, fate clic sul pulsante Estensioni.

    La finestra di dialogo Trova estensioni elenca le estensioni attualmente analizzabili.

  2. Per aggiungere un’altra estensione all’elenco, fate clic sul pulsante più (+) sopra la finestra Estensioni.

  3. Per eliminare un’estensione dall’elenco, fate clic sul pulsante meno (-).

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online