10 hack su Dreamweaver: il miglior editor di codice per sviluppatori Web

Dreamweaver è la madre di tutte le attività basate sul Web su Internet. Per la maggior parte delle persone, Dreamweaver è solo uno strumento per creare siti Web, ma solo i professionisti sanno che Dreamweaver è la centrale elettrica.

Dreamweaver ha molte caratteristiche e opzioni che lo rendono lo strumento preferito dagli sviluppatori web. Indubbiamente questo software ha il più noto IDE (Integrated Development Environment) che nessun altro software di sviluppo web ha nel mercato attuale. Sia per lo sviluppo, la collaborazione e gli strumenti di codifica, Dreamweaver offre agli sviluppatori web una gamma decente con cui giocare. Ecco perché per gli sviluppatori web principianti è importante sapere come massimizzare l'uso di Dreamweaver.

Tutti gli aspetti che differenziano gli sviluppatori web esperti e gli sviluppatori web ordinari sono nascosti sotto strati di menu intuitivi deplorevoli, motivo per cui i nuovi sviluppatori web hanno difficoltà a migliorare le proprie abilità. Tuttavia, in questo articolo, ti mostrerò quelle funzioni nascoste e potenti di Dreamweaver che è molto importante conoscere per soddisfare le richieste del mercato odierno. Questo articolo ti aiuterà ad accedere rapidamente a queste funzioni e ti fornirà i primi dieci utili hack che miglioreranno la qualità del tuo lavoro e miglioreranno significativamente la tua codifica.

1. Visualizzazione dinamica e visualizzazione live:

Tutti sanno che Dreamweaver offre la vista statica oi nostri file aperti. Tuttavia, la domanda rimane senza risposta sulle viste dinamiche di un'applicazione come WordPress. Per impostare la vista dinamica, dobbiamo comunicare a Dreamweaver le impostazioni da utilizzare per le viste dinamiche. Per impostarlo, vai alle Impostazioni della richiesta HTTP facendo clic su Visualizza > Vista dal vivo > menu delle opzioni e quindi inserisci il GET o il POST che è necessario per visualizzare correttamente la tua applicazione.

Dopodiché, cambia la vista dal vivo in Dreamweaver, che sostituirà il pannello Vista progettazione nel WebKit live della tua pagina con rendering perfetto per i pixel. Quindi completalo con Javascript live, manipolazioni DOM, query di database, codice lato server e CSS renderizzato, invece dell'icona segnaposto dall'interfaccia Design View.

2. Bootstrap per aumentare la navigazione:

La navigazione è il componente di una pagina nel sito Web reattivo che dovrebbe avere la capacità di adattamento per soddisfare le esigenze di schermi più piccoli per i quali Bootstrap può aiutare molto. Bootstrap ti consente di impostare facilmente la barra di navigazione e passare dalla striscia orizzontale al pannello verticale. Il motivo è che Dreamweaver supporta tutta la flessibilità di navigazione di Bootstrap ed è una funzione facile da usare quando si tratta di sviluppare un sito Web efficace e reattivo.

Per darti una rapida occhiata, di seguito è riportata la rapida demo di come utilizzare Bootstrap nel tuo sviluppo.

L'aumento della navigazione con Bootstrap inizia con la nuova finestra di dialogo del documento di Dreamweaver. Fai semplicemente clic sul pulsante Bootstrap Framework nella finestra di dialogo del nuovo documento e seleziona anche la casella di controllo dell'opzione di layout pre-compilazione per utilizzare le opzioni di navigazione complete come;

• Elenco di collegamenti standard, non ordinato e semanticamente corretto.
• Un'area per il posizionamento del logo per posizionare l'immagine del marchio.
• Pronto per attivare il pulsante di invio e il campo di ricerca.
• Preimpostazioni per i menu a discesa per le voci di navigazione secondaria e completalo con i divisori.
• Sezioni sinistra e destra che possono essere allineate quando necessario.
• Reattività incorporata.

Se lo trovi difficile, c'è un'altra opzione. Dreamweaver consente di creare la barra di navigazione personalizzata. Se preferisci la tavolozza scura, aggiungi semplicemente la classe .navbar-inverse al tuo tag <nav>. Puoi anche giocarci anche tu. Se vuoi mostrare la tua navigazione sempre sopra la pagina, digita .navbar-fixe-top. Se vuoi mostrarlo di seguito, digita .navbar-fixed-bottom. Tutte queste classi Bootstrap sono standard e anche i suggerimenti per il codice di Dreamweaver supportano questa codifica, quindi non è necessario tenere a mente l'intera codifica. Devi solo digitare .navbar nella visualizzazione degli elementi e otterrai l'elenco a comparsa in cui puoi scegliere l'opzione desiderata.

3. Blocco di JavaScript:

L'Ajax ha una natura molto dinamica. Questo è il motivo per cui molte volte abbiamo bisogno di interagire con la pagina con elementi non disponibili o non renderizzati al caricamento della prima pagina. Tali elementi potrebbero essere iniettati nella pagina dopo un po 'di tempo di caricamento, motivo per cui non vengono visualizzati al primo caricamento. Ad esempio, quando potresti voler cambiare lo stile del suggerimento che è stato implementato interamente su JavaScript, cercavi metodicamente la tua strada attraverso i tuoi script per trovare quale elemento è stato creato e dove. Invece di cercare tra gli script, prova quanto segue.

Metti il ​​tuo Dreamweaver nella vista dal vivo e renderizza la tua pagina. Quindi premi F6 per bloccare JavaScript in qualsiasi momento, il che ti consentirà di sezionare e indirizzare qualsiasi codice di qualsiasi elemento dinamico nella pagina. Questo non solo ti aiuterà a individuare il codice esatto dell'elemento dinamico, ma renderà anche veloce il tuo sviluppo riducendo il tempo di ricerca di qualsiasi codice all'interno del sito web dinamico.

4. Evidenziando il codice:

Uno script di codifica potrebbe creare molta confusione se non sei abituato a vedere una codifica complessa ogni giorno e ogni notte. È qui che l'evidenziazione dei codici ti aiuta a creare separazioni nell'intero script. Invece di muovere gli occhi con il bordo sanguinante, Dreamweaver ha una funzione che mette in evidenza il codice che ti aiuta a leggerlo. Per questo, apri le preferenze di Dreamweaver e attiva la sezione delle anteprime della tecnologia. Quindi fai clic sull'opzione di attivazione dell'evidenziazione del codice e lascia che Dreamweaver faccia il suo lavoro. Tuttavia, potrebbe essere necessario aggiornare la versione di Dreamweaver poiché questa funzione è disponibile solo nell'ultima versione.

Dopo aver abilitato l'opzione di evidenziazione, fai doppio clic su qualsiasi tag e verranno evidenziate tutte le istanze del tag nella pagina corrente. Tuttavia, i parametri dovrebbero essere definiti. Questo strumento è ottimo per identificare e accedere rapidamente agli elementi simili. Dopo aver evidenziato qualsiasi elemento, usa le scorciatoie da tastiera f3 sul PC, CMD-G sul Mac) per passare da un elemento evidenziato all'elemento successivo. Inoltre, il modificatore di spostamento può tornare alla sezione precedente. Inoltre, l'evidenziazione del codice funziona anche con gli attributi e i valori dei tag HTML in modo da poter individuare facilmente le classi specifiche.

5. Completamento JavaScript automatico:

Dreamweaver è un'ottima piattaforma in cui codici HTML e CSS intelligenti e completi. Tuttavia, alcune persone credono che JavaScript non sia completo. Nel caso di jQuery o Prototype, in Dreamweaver, dovresti sapere che ci sono estensioni API che forniscono codici di completamento Javascript. Questi codici accelerano il processo di sviluppo perché utilizzando questi codici non è necessario digitare interi script e sono piuttosto utili per i programmatori veloci.

Dreamweaver è l'unico software di sviluppo web che consente di utilizzare questo tipo di codici di completamento jQuery e Prototype che aiutano ogni sviluppatore web a velocizzare il proprio compito e produrre il miglior prodotto possibile con il minimo sforzo.

6. Accedi facilmente ai file correlati:

CSS e JavaScript sono i nomi dei file indipendenti che vedi quando apri i file HTML e PHP. Durante l'apertura del file PHP, puoi vederlo nella parte superiore della finestra. Poiché tutte queste opzioni sono poste in primo piano, puoi passare facilmente a questi file e apportare modifiche che possono essere salvate senza nemmeno aprirli. Facendo clic su qualsiasi file nella barra dei file correlati, che ti mostrerà la sua origine in Vista codice e la pagina principale in Vista struttura.

Inoltre, puoi anche utilizzare qualsiasi strumento di navigazione del codice per accedere rapidamente al codice sorgente CSS che influenzerà la tua soluzione attuale. Questo rapido accesso al codice sorgente CSS riduce i tempi di codifica e consente allo sviluppatore web di concentrarsi sui diversi aspetti del proprio processo di sviluppo.

7. Abbellisci i codici al volo:

Linee di codici disorganizzate e disordinate mostrano che lo sviluppatore di questa codifica non era il professionista e le competenze sufficienti per scrivere i codici in ordine. Questo è anche qualcosa che conta molto durante l'ottimizzazione dei motori di ricerca del sito web. Tuttavia, organizzare i tuoi codici e abbellirli non è così difficile come credono le persone. Con la corretta conoscenza delle opzioni di Dreamweaver e puoi organizzare i tuoi codici al volo. Basta usare l'opzione "Applica formattazione sorgente" e riformarla esattamente secondo le tue preferenze. Per rendere la tua codifica pulita e ordinata, fai clic su "Formatta codice sorgente" nella parte inferiore della barra degli strumenti di codifica, quindi vai su "modifica > barre degli strumenti > codifica", quindi seleziona le "impostazioni del formato del codice" per impostare l'impostazione preferita.

Un altro modo per organizzare lo script è accedere all'opzione di formattazione da Comandi > Applica formattazione sorgente o applicarla solo su un blocco di codice selezionando l'opzione Applica formattazione sorgente alla selezione.

8. Codifica senza pelucchi:

Non importa quanto Adobe doti Dreamweaver con potenti strumenti e funzionalità, più lavori sui siti Web, più lavoro devi fare sul lato della codifica. Questa cosa può aumentare le tue abilità, ma aprirà anche le porte a infiniti errori perché scrivere troppo codice non è un lavoro facile da fare. Il Dreamweaver lo sa, ed è per questo che nell'ultima versione di Dreamweaver, che è Creative Cloud (CC), è presente una funzionalità chiamata supporto Linting. Linting è uno strumento di base per il controllo della sintassi di programmazione disponibile per CSS, HTML e JavaScript. In questo modo, ogni volta che Dreamweaver identifica un problema o un errore, invia una serie di razzi sia generali che specifici.

Per eseguire il test, apri una pagina piena di codici in Dreamweaver e vedrai un piccolo segno di spunta verde in un cerchio sul lato destro della barra di stato. Se c'è solo un piccolo segno di spunta verde circondato, allora tutto è a posto con il tuo codice. Se c'è una croce rossa cerchiata in rosso, allora ci sono alcuni problemi con la tua codifica e devi rivederla per far funzionare correttamente il tuo sito web. Inoltre, facendo clic sul segno dell'errore, può portarti alla colonna e alla riga in cui hai commesso l'errore con la descrizione dell'errore. La cosa migliore è che non c'è limite a questa funzione e puoi usarla fino a quando non ottieni il segno verde.

9. Verifica della compatibilità dei browser:

La capacità di navigazione è una delle cose più basilari di ogni processo di sviluppo web. Questo è il motivo per cui Dreamweaver ti ha semplificato le cose in modo da non perdere mai queste cose di base prima di iniziare lo sviluppo web. Aprire il documento in Dreamweaver per il quale si desidera verificare la compatibilità. Dalla barra dei menu in cui sono posizionate le icone delle opzioni di visualizzazione del codice, della divisione e del design, c'è un'altra opzione chiamata pulsante "Controlla pagina".

Facendo clic, si aprirà un menu a discesa, seleziona controlla la compatibilità del browser in esso e vedrai il risultato della tua compatibilità in una finestra separata.

10. Minimizzazione del codice:

Durante la codifica per il grande sito Web, capita spesso che un pezzo di codice inizi a irritarti sullo schermo. Pochissime persone sanno che possono ridurre al minimo questo pezzo di codice semplicemente premendo un pulsante dalla tastiera. Quando sei certo che non è necessario apportare modifiche al blocco di codifica, seleziona quel blocco e fai clic su "-" accanto al numero della riga di codice. Quel pezzo si ridurrà al minimo e non ti disturberà finché non lo espandi.