10 utili consigli e trucchi di Dreamweaver per principianti

Un utente di Dreamweaver penserà sicuramente a quale potenza è. Ricco di tonnellate di funzionalità, opzioni e debatably uno tra i più noti IDE (Integrated Development Environment) nel mercato odierno. Potrebbe non soddisfare i criteri richiesti da alcuni sviluppatori, tuttavia Dreamweaver offre innegabilmente una gamma decente di strumenti di sviluppo, collaborazione e codifica. Queste opzioni e strumenti sono nascosti sotto strati di deprecabili menu meno intuitivi, motivo per cui stiamo fornendo tutorial nel post di oggi.

Vi mostreremo alcune delle funzioni più potenti di Dreamweaver per aiutarvi ad accedervi rapidamente, insieme a molti altri utili trucchi che vi aiuteranno a ottimizzare i tempi di sviluppo e a migliorare significativamente la qualità del codice. Elenco completo dopo il salto.

1. Vista dinamica con “Dal vivo”

Sappiamo già che DW offre una vista statica dei nostri file aperti, ma che dire "viste dinamiche" di un'applicazione come WordPress?

Per prima cosa, dobbiamo raccontare DW quali impostazioni utilizzare per presentare il nostro"viste dinamiche" correttamente. Per fare ciò, selezionare Impostazioni richieste HTTP dal Visualizza> Opzioni di visualizzazione live menu, quindi immettere il OTTENERE o INVIARE parametri necessari per visualizzare correttamente l'applicazione.

Quindi passando a Dal vivo in DW, sostituisce il vecchio Design View pannello con un rendering WebKit live-pixel, perfetto per la tua pagina; completa con Javascript live, manipolazioni DOM, query database, codice lato server e CSS renderizzati, anziché le icone segnaposto che vedi in Design View.

2. "Code Navigator" è Firebug di DW

Facendo un ulteriore passo avanti è tutto il Code Navigator e quando nel Dal vivo finestra, ALT-clic (Comando-Opzione-clic per Mac) in qualsiasi punto della finestra, presenta immediatamente il codice che ha reso quell'elemento. Simile a ciò che potresti vedere attualmente in Firefox / Firebug.

3. Blocco di JavaScript

A causa della natura dinamica di Ajax, molte volte abbiamo bisogno di interagire con una pagina in cui determinati elementi non sono resi o disponibili sul caricamento della prima pagina. Questi sono elementi che vengono iniettati nella pagina qualche tempo dopo il caricamento della pagina. Ecco un esempio:

Potresti voler cambiare lo stile di un suggerimento che è implementato interamente in JavaScript. Prima di oggi, dovresti cercare in modo metodico gli script per trovare ciò che è stato creato e dove.

Invece, prova questo:

Rendi la tua pagina in Dal vivo, poi colpisci F6 per bloccare JavaScript in qualsiasi momento, permettendoti di scegliere e sezionare il codice relativo a qualsiasi elemento dinamico nella pagina.

4. Il prossimo migliore amico di Live View - "Codice live"

Quando si usa Dal vivo, puoi anche accendere Codice dal vivo. Codice dal vivo aggiornerà il codice mentre si passa il mouse, si fa clic e si interagisce con elementi e elementi nel Finestra Live View!

5. Completamento automatico JavaScript

Dreamweaver viene fornito con un completamento di codice HTML e CSS intelligente e completo, ma che dire di Javascripts? Se si codifica jQuery o Prototype in Dreamweaver, è necessario sapere che esistono estensioni API che forniscono il completamento del codice JavaScript. Riduce la digitazione necessaria e può essere abbastanza utile per i codificatori veloci.

Clicca qui per saperne di più o per scaricare:

• estensione API jQuery per Dreamweaver
• Proteggi l'estensione API per Dreamweaver

6. Abbellisci i codici al volo

La tua pagina di codice ha l'aspetto di code di codice non organizzate e disordinate? Utilizzare il Applica formattazione sorgente funzionalità e riformattarlo esattamente secondo le tue preferenze. Per pulirli rapidamente, fare clic su Formattare il codice sorgente icona nella parte inferiore del Barra degli strumenti di codifica (Modifica> Barre degli strumenti> Codifica) e selezionare Impostazioni del formato del codice per impostare la formattazione preferita.

Puoi anche accedere all'opzione di formattazione da Comandi> Applica formattazione sorgente o applicarlo solo a un blocco di codice selezionato selezionando Applica la formattazione della fonte alla selezione opzione.

7. Ottieni ampio

Basta fare clic sul Estendi l'icona di Dreamweaver (sembra un ingranaggio) nella barra delle applicazioni e selezionare Cerca i widget Web. Questo ti porterà ad Adobe Exchange dove puoi trovare ulteriori widget da fornitori come Yahoo !, JQuery e molti altri.

8. Subversion & Dreamweaver

E sì, Dreamweaver supporta Subversion (SVN). Per gli sviluppatori che utilizzano SVN per mantenere il controllo di revisione del loro progetto, questa potrebbe essere una buona notizia. Lo sviluppatore di Dreamweaver Andrew Voltmer discute come puoi usare Subversions con Dreamweaver.

9. Non più stili ridondanti

Molte persone usano Dreamweaver come un modo per aggiornare visivamente il contenuto, come un word processor. Prima di Dreamweaver CS4, ciò potrebbe comportare regole CSS ridondanti come .Class1, .class2, e così via. In Dreamweaver CS4, basta cambiare il tuo Ispettore di proprietà a HTML modalità (fai clic sull'icona HTML a sinistra di Inspector) e saluterai tutto il CSS ridondante, inserendo solo il codice HTML appropriato.

10. Convalida del modulo reso facile

Vuoi convalidare i campi del modulo, ma preoccupati che dovrai ricostruire da zero? Nessun problema. Basta selezionare un elemento del modulo esistente, ad esempio un campo di testo, e applicare a Widget Spry Validation dal Inserisci> menu Spry. Quindi controlla i requisiti di convalida come i caratteri minimi o massimi direttamente dal Ispettore immobiliare.

Bonus: altri 3

11. Accedi ai file relativi facilmente

Quando apri un file HTML o PHP, vedrai una riga di nomi di file dipendenti, come CSS, Javascript e persino file inclusi per PHP, nella parte superiore della finestra del documento. Puoi facilmente passare a questi file, apportare modifiche e salvarle, il tutto senza nemmeno aprirle. Quando fai clic su qualsiasi file nella barra dei file correlati, vedrai la sua origine in vista Codice e la pagina madre in visualizzazione Struttura. O utilizzare Code Navigator per accedere rapidamente al codice sorgente CSS che influisce sulla selezione corrente.

12. Verifica compatibilità browser

Aprire il documento che si desidera verificare per la compatibilità; dalla stessa barra dei menu in cui si accede a viste Code / Split / Design, guarda all'estrema destra per 'Controlla la pagina'pulsante.

Cliccando si espanderà un menu a discesa, selezionare 'Controlla la compatibilità del browser'. Il Finestra dei risultati di compatibilità del browser mostrerà nella parte inferiore della finestra eventuali problemi che è necessario affrontare.

Nota: questo NON controllerà le nuove versioni di IE su Mac! Per selezionare i browser da utilizzare per il test, selezionare Controlla la pagina > impostazioni dal menu.

13. Anteprima di pagine PHP

Dreamweaver consente di eseguire e visualizzare in anteprima i codici PHP all'interno del software. Ecco come ottenerlo.

Iniziare

1. Per prima cosa, seleziona Posto -> Nuovo sito dalla navigazione in alto.
2. Vedrai entrambi i Di base e Definizione avanzata del sito schede di opzione. Procediamo selezionando il Scheda Advanced Site Definition.
3. Inserisci il nome di una cartella per il sito nella casella appropriata (per questo esempio useremo "myphp" come nome della cartella).
4. Crea un'altra cartella denominata "immagini" inserendo il suo nome nel campo "Cartella immagini predefinite".
5. Sotto il Informazioni locali, inserisci i seguenti valori nei campi:
   • Nome del sito: il nome del sito. Da utilizzare solo in Dreamweaver
   • Cartella principale locale: Questo è il nome del sito in cui lavorerai. Assicurati di assegnare un nome ai siti in modo da ridurre al minimo i conflitti o i nomi confusi.
   • Cartella Immagini predefinite: È facoltativo, ma è consigliabile crearlo ora poiché la maggior parte dei siti utilizza le immagini in una certa misura. È qui che DW "cercherà" di inserire immagini nei tuoi documenti durante la fase di codifica.
   • Link relativi a: Definisce come verrà gestito il collegamento del documento in Dreamweaver. È possibile selezionare Documento o Root. Le differenze tra i due sono:
     • Documento relativo - Inserirà un percorso relativo al file che si sta lavorando e all'elemento a cui si sta collegati.
     • Root Relative - Utilizza / che fa in modo che il documento / file sia collegato in relazione alla cartella ROOT.
     • Un'altra alternativa è aggiungere qualche configurazione ai file di configurazione del server. Essendo un compito più avanzato, ci limiteremo a usare Document-relative per ora.
   • Indirizzo HTTP: inserisci la cartella radice del sito per il tuo progetto
   • Link sensibili alle maiuscole: Dreamweaver verificherà se un file nel progetto può avere problemi di distinzione tra maiuscole e minuscole durante il caricamento sul server. Le notifiche verranno visualizzate quando si utilizza: Sito -> Controlla collegamenti a tutto il sito. Puoi lasciarlo controllato se vuoi. Personalmente non lo lascio controllare come nomino sempre i file in minuscolo. La lettera maiuscola non è raccomandata.
   • nascondiglio: Seleziona Abilita cache.
6. Nel Informazioni remote pagina, configurare l'FTP o altro accesso a un server remoto o lasciare l'accesso a Nessuno.
7. Nel Test server pagina seleziona l'opzione relativa al tipo / sistema di file che testerai.
8. Controllo della versione non sarà usato per questo esempio, quindi puoi lasciarlo in bianco a meno che non ci sia familiarità con esso.
9. Cloaking consente di inserire .psd, .fla e altri file di origine nella cartella dei siti e DW li ignorerà durante il caricamento / l'aggiornamento del sito.
10. Note di progettazione sono ideali per un team di web design in quanto mantiene nota sulle modifiche apportate ai file. È controllato per impostazione predefinita e va bene per noi utilizzare in questo modo.
11. Partire Colonna vista file, Contribuire, e Modelli come predefinito.
12. Il arzillo pagina punta semplicemente alla cartella delle risorse Spry che viene automaticamente inclusa in Dreamweaver. Non c'è bisogno di cambiare questo. Al termine di ogni impostazione, fai clic su ok.

Anteprima di PHP in Dreamweaver

Ora apri un file PHP e apporta le modifiche necessarie. Per visualizzare semplicemente questo file in Dreamweaver premere F12 e i risultati verranno visualizzati nel browser predefinito. Puoi cambiare in quale browser è usato modificare -> Preferenze -> Anteprima nel browser. Ciò consente un tempo di modifica all'anteprima più veloce, elimina la necessità di digitare lunghi URL nella barra del browser o di utilizzare un altro software server per il rendering dei file PHP, il che consente di risparmiare tempo!

È tutto. Happy Dreamweaver'ing :-)

Nota dell'editore: Questo post è scritto da Jesse Matlock per Hongkiat.com. Negli ultimi 6 anni, Jesse si è immerso nel design dell'interfaccia utente, nello sviluppo delle app e nelle tendenze del web. È il fondatore e leader del design di un piccolo, ma molto talentuoso team di sviluppo che si concentra sullo sviluppo di app su misura.