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 l’IDE (Integrated Development Environment) più noto che nessun altro software di sviluppo web ha nel mercato attuale. O gli strumenti di sviluppo, collaborazione e codifica, Dreamweaver offre agli sviluppatori Web una gamma decente con cui giocare. Ecco perché per gli sviluppatori web principianti è importante sapere come possono massimizzare l’uso di Dreamweaver.
Tutti gli aspetti che differenziano gli sviluppatori web esperti e gli sviluppatori web ordinari sono nascosti sotto strati di deplorevoli menu intuitivi, motivo per cui i nuovi sviluppatori web hanno difficoltà a migliorare le proprie capacità. Tuttavia, in questo articolo, ti mostrerò quelle funzioni nascoste e potenti di Dreamweaver che è molto importante conoscere per soddisfare le esigenze del mercato odierno. Questo articolo ti aiuterà ad accedere rapidamente a queste funzioni e ti fornirà i primi dieci hack utili che miglioreranno la qualità del tuo lavoro e miglioreranno significativamente la tua codifica.
1 Vista dinamica e Vista live:
Tutti sanno che Dreamweaver offre la visualizzazione statica dei nostri file aperti. Tuttavia, la domanda rimane senza risposta sulle visualizzazioni 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> Visualizzazione 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 della vista di progettazione nel WebKit della tua pagina con rendering live e 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.
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. Il Bootstrap ti consente di impostare facilmente la barra di navigazione e passare dalla striscia orizzontale al pannello verticale. Il motivo alla base è 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’accelerazione della navigazione con Bootstrap inizia con la nuova finestra di dialogo del documento di Dreamweaver. Basta fare clic sul pulsante Bootstrap Framework nella finestra di dialogo del nuovo documento e selezionare anche la casella di controllo dell’opzione di layout pre-costruzione per utilizzare le opzioni di navigazione complete come;
- Elenco di link 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 menu a discesa per elementi di navigazione secondaria e completarlo con i divisori.
- Sezioni sinistra e destra che possono essere allineate quando necessario.
- Reattività integrata.
Se lo trovi difficile, c’è un’altra opzione. Dreamweaver consente di personalizzare la barra di navigazione. Se preferisci la tavolozza scura, aggiungi semplicemente la classe .navbar-inverse al tuo
etichetta. 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 il suggerimento sul codice di Dreamweaver supporta queste codifiche, quindi non è necessario tenere a mente l’intera codifica. Devi solo digitare .navbar nella visualizzazione degli elementi e otterrai l’elenco popup in cui puoi scegliere l’opzione desiderata.
3 Congelamento del JavaScript:
L’Ajax ha una natura molto dinamica. Questo è il motivo per cui molte volte quando abbiamo bisogno di interagire con la pagina con elementi non disponibili o non visualizzati sul caricamento della prima pagina. Questi elementi potrebbero essere inseriti nella pagina dopo un certo tempo di caricamento, motivo per cui non vengono visualizzati al primo caricamento. Ad esempio, quando potresti voler modificare lo stile della descrizione comandi implementata interamente su JavaScript, cercavi metodicamente 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 ed esegui il rendering della tua pagina. Quindi premi F6 per bloccare il JavaScript in qualsiasi momento 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 rapido il tuo sviluppo riducendo i tempi 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 codici complessi ogni giorno e 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 evidenzia il codice che ti aiuta a leggerlo. Per questo, apri le preferenze di Dreamweaver e attiva la sezione delle anteprime tecnologiche. Quindi fai clic sull’opzione di abilitazione 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 rapidamente e andare agli elementi simili. Dopo aver evidenziato qualsiasi elemento, usa le scorciatoie da tastiera f3 su PC, CMD-G su Mac) per saltare da un elemento evidenziato all’elemento successivo. Inoltre, il modificatore di spostamento può tornare indietro 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 automatico di JavaScript:
Dreamweaver è una grande 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 molto utili per i programmatori veloci.
Dreamweaver è l’unico software di sviluppo web che ti consente di utilizzare questo tipo di codice di completamento jQuery e prototipo che aiuta 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 di 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 posizionate in primo piano, puoi passare facilmente a questi file e apportare modifiche che possono essere salvate senza nemmeno aprirle. Facendo clic su qualsiasi file nella barra dei file correlati, verrà visualizzata 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 il tempo di codifica e consente allo sviluppatore web di concentrarsi sui diversi aspetti del proprio processo di sviluppo.
7 Abbellisci i codici al volo:
Righe di codici non organizzate e disordinate mostrano che lo sviluppatore di questa codifica non era abbastanza professionale e abile da scrivere i codici in ordine. Questo è anche qualcosa che conta molto durante l’ottimizzazione dei motori di ricerca del sito web. Tuttavia, organizzare i codici e abbellirli non è così difficile come si crede. Con la corretta conoscenza delle opzioni di Dreamweaver e puoi organizzare i tuoi codici al volo. Usa semplicemente l’opzione "Applica formattazione sorgente" e riformattala 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 e poi vai su "modifica > barre degli strumenti > codifica" e quindi selezionare 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 di potenti strumenti e funzionalità, più lavori sui siti Web, più lavoro devi fare sul lato della codifica. Questa cosa può aumentare le tue capacità, 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) c’è una funzione chiamata supporto Linting. Linting è uno strumento di controllo della sintassi di programmazione di base disponibile per CSS, HTML e JavaScript. In questo modo, ogni volta che Dreamweaver identifica un problema o un errore, invia una serie di segnalazioni sia generali che specifiche.
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 va tutto bene 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 ci sono limiti 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 di cui si desidera verificare la compatibilità. Dalla barra dei menu in cui sono posizionate le icone delle opzioni di visualizzazione codice, divisione e design, c’è un’altra opzione che si chiama pulsante "Controlla pagina".
Facendo clic, si aprirà un menu a discesa, selezionare verifica la compatibilità del browser in esso e vedere il risultato della 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 questa parte di codice semplicemente premendo un pulsante dalla tastiera. Quando sei sicuro che non è necessario apportare alcuna modifica al blocco di codice, seleziona quel blocco e fai clic su "-" accanto al numero della riga del codice. Quel pezzo si ridurrà al minimo e non ti disturberà finché non lo espandi.