10 sfaturi și trucuri utile Dreamweaver pentru începători

Un utilizator Dreamweaver va socoti cu siguranta ceea ce este o putere. Împachetat cu tone de caracteristici, opțiuni și discutabil unul dintre cele mai cunoscute IDE (Integrated Development Environment) pe piața actuală. S-ar putea să nu îndeplinească criteriile pe care unii dezvoltatori le-au solicitat cu toate acestea, Dreamweaver oferă în mod incontestabil o gamă decentă de instrumente de dezvoltare, colaborare și codificare. Aceste opțiuni și instrumente sunt ascunse sub straturi de meniuri regretabile mai puțin intuitive, de aceea oferim tutoriale în postul de astăzi.

Vă vom arăta câteva dintre cele mai puternice funcții ale Dreamweaver pentru a vă ajuta să le accesați rapid, împreună cu multe alte trucuri utile care vă vor lubrifia timpul de dezvoltare și vă vor îmbunătăți semnificativ calitatea codului. Lista completă după salt.

1. Vizualizare dinamică cu “Vizualizare live”

Știm deja că DW oferă o vizualizare statică a fișierelor noastre deschise, dar ce zici "vederi dinamice" a unei aplicații, cum ar fi WordPress?

În primul rând, trebuie spune DW ce setări să folosim pentru a ne prezenta"vederi dinamice" corect. Pentru aceasta, selectați Setările pentru solicitarea HTTP de la Vizualizați> Opțiuni de vizualizare live meniu, apoi introduceți OBȚINE sau POST parametrii de care aveți nevoie pentru a vizualiza corect aplicația.

Apoi, trecând la Vizualizare live în DW, înlocuiește vechiul Vizualizare proiect panou cu o redare WebKit perfectă pixel-perfectă a paginii dvs.; complete cu Javascript viu, manipulări DOM, interogări de bază de date, cod de server și CSS rendered, în loc de simbolurile de substituent pe care le vedeți în Vizualizare proiect.

2. "Navigatorul de coduri" este Firebug-ul DW

Continuând cu un pas mai departe, este vorba despre Navigatorul de coduri și atunci când în Vizualizare live fereastra, clic pe butonul ALT (Command-Option-click pentru Mac) oriunde în fereastra, prezintă instantaneu codul care a redat elementul respectiv. Similar cu ceea ce puteți vedea în Firefox / Firebug.

3. Înghețarea JavaScript-ului

Datorită naturii dinamice a lui Ajax, de multe ori trebuie să interacționăm cu o pagină în care anumite elemente nu sunt redate sau disponibile pe prima pagină. Acestea sunt elemente care sunt injectate în pagină o dată după încărcarea paginii. Iată un exemplu:

S-ar putea să doriți să schimbați stilul unui vârf de instrument care este implementat în întregime în JavaScript. Înainte de azi, va trebui să vă căutați metodic prin intermediul scenariilor dvs. pentru a afla ce a fost creat și unde.

În schimb, încercați acest lucru:

Rendați pagina dvs. în Vizualizare live, apoi lovit F6 pentru a dezactiva JavaScript în orice moment, permițându-vă să vizați și să disecați codul referitor la orice element dinamic din pagină.

4. Cel mai bun prieten al Live View - "Live Code"

Atunci când se utilizează Vizualizare live, de asemenea, puteți porni Codul Live. Codul Live va actualiza codul pe măsură ce treceți, faceți clic și interacționați cu elementele și elementele din Vedere live în fereastră!

5. Finalizarea automată a JavaScript

Dreamweaver vine cu o completare inteligentă și completă a codului HTML și CSS, dar despre Javascripts? Dacă codificați jQuery sau Prototype în Dreamweaver, atunci ar trebui să știți că există extensii API care oferă completarea codului Javascript. Reduce tipul de tastare necesar și poate veni destul de la îndemână pentru codoare rapide.

Faceți clic aici pentru a citi mai mult sau descărcați:

• extensia jQuery API pentru Dreamweaver
• Prototype extensia API pentru Dreamweaver

6. Înfrumusețați codurile pe zbor

Pare codul dvs. de pagină ca niște linii de coduri neorganizate și murdare? Folosește Aplicați formatul sursei caracteristica și reformat-o exact în preferințele dvs. Pentru a le curăța rapid, faceți clic pe Formatare cod sursă pictograma din partea de jos a ferestrei Bara de instrumente pentru codificare (Edit> Toolbars> Coding) și selectați Setări pentru formatul codului pentru a seta formatarea preferată.

De asemenea, puteți accesa opțiunea de formatare de la Comenzi> Aplicați formatul sursei sau aplicați-l numai la un bloc selectat de cod prin selectarea Aplicați Formatarea Surselor la Selecție opțiune.

7. Obțineți widget-ul

Doar faceți clic pe Extindeți pictograma Dreamweaver (seamănă cu o unelte) din bara de aplicații și selectați Căutați Widgeturi Web. Acest lucru vă va duce la Adobe Exchange unde puteți găsi widget-uri suplimentare de la furnizori precum Yahoo !, JQuery și multe altele.

8. Subversiune & Dreamweaver

Și da, Dreamweaver nu suportă Subversion (SVN). Pentru dezvoltatorii care folosesc SVN pentru a-și menține controlul asupra revizuirii proiectului lor, aceasta ar putea fi o veste bună. Dezvoltatorul Dreamweaver Andrew Voltmer discută cum puteți utiliza Subversiuni cu Dreamweaver.

9. Nu există stiluri mai redundante

Mulți oameni folosesc Dreamweaver ca o modalitate de a actualiza vizual conținutul, ca un procesor de text. Înainte de Dreamweaver CS4, acest lucru ar putea duce la redundante reguli CSS cum ar fi .Class1, .class2, si asa mai departe. În Dreamweaver CS4, trebuie doar să comutați Inspector de proprietate la HTML (faceți clic pe pictograma HTML din partea stângă a inspectorului) și veți spune la revedere tuturor acelor CSS redundante, inserând doar marcajul HTML adecvat.

10. Validarea formularului a fost ușurată

Doriți să vă validați câmpurile de formular, dar vă faceți griji că va trebui să reconstruiți din nou? Fără griji. Trebuie doar să selectați un element de formular existent, cum ar fi un câmp text, și să aplicați a Spry Validation widget de la Inserați> meniul Spry. Apoi, cerințele de validare a controlului, cum ar fi caractere minime sau maxime, direct de la Inspector de proprietate.

Bonus: încă 3

11. Accesați fișierele asociate cu ușurință

Când deschideți un fișier HTML sau PHP, veți vedea acum un rând de nume de fișiere dependente, cum ar fi CSS, Javascript și chiar fișiere incluse pentru PHP, în partea de sus a ferestrei documentului. Puteți să comutați cu ușurință la aceste fișiere, să le modificați și să le salvați, toate fără a le deschide. Când faceți clic pe orice fișier din bara de fișiere înrudite, veți vedea sursa acestuia în vizualizarea Cod și pagina părinte din ecranul Design. Sau utilizați Navigator de cod pentru a accesa rapid codul sursă CSS care afectează selecția dvs. curentă.

12. Verificați compatibilitatea browserelor

Deschideți documentul pe care doriți să îl verificați pentru compatibilitate; din aceeași bara de meniu în care sunt accesate vederile Cod / Split / Design, arătați spre extrema dreaptă pentru "Verificați pagina".

Dacă faceți clic pe acesta, se va extinde un meniu derulant, selectați "Verificați compatibilitatea browserului“. Browser Compatibility window va apărea în partea de jos a ferestrei cu orice probleme pe care trebuie să le adresați.

Notă: Aceasta nu va verifica versiunile noi ale IE pe Mac! Pentru a selecta ce browsere să fie utilizate pentru testare, selectați Verificați pagina > Setări din meniu.

13. Examinați paginile PHP

Dreamweaver vă permite să executați și să previzualizați codurile PHP în cadrul software-ului. Iată cum să-l configurați.

Noțiuni de bază

1. Mai întâi, selectați teren -> Site nou din navigația de sus.
2. Veți vedea ambele De bază și Definiție avansată a site-ului fila de opțiuni. Hai să continuăm selectând Fila Advanced Definition Site.
3. Introduceți un nume de folder pentru site în caseta corespunzătoare (pentru acest exemplu vom folosi "myphp" ca nume de folder).
4. Creați un alt folder numit "imagini" introducând numele acestuia în câmpul "Imagini implicite".
5. Sub Informații locale, introduceți următoarele valori în câmpurile:
   • Numele site-ului: numele site-ului. Pentru a fi utilizat numai în Dreamweaver
   • Dosarul rădăcină local: Acesta este numele site-ului în care veți lucra. Asigurați-vă că denumiți site-urile într-un mod care să minimizeze conflictele sau nume confuze.
   • Dosarul Imagini prestabilite: Acest lucru este opțional, dar este recomandat să îl creați acum, deoarece majoritatea site-urilor vor folosi imaginile într-o oarecare măsură. Aici DW va "arăta" să introducă imagini în documente în timpul fazei de codificare.
   • Legături relative la: Aceasta definește modul în care va fi tratată legarea documentelor în Dreamweaver. Puteți selecta Document sau Root. Diferențele dintre cele două sunt:
     • Document relativ - Va insera o cale relativă la fișierul pe care îl lucrați și la elementul la care este conectat.
     • Root Relative - Utilizează / care determină legarea documentului / fișierului în raport cu dosarul ROOT.
     • O altă alternativă este adăugarea unor configurații în fișierele de configurare ale serverului. Fiind o sarcină mai avansată, vom rămâne doar pentru a folosi Document-relative.
   • Adresa HTTP: introduceți folderul rădăcină de site pentru proiectul dvs.
   • Legăturile sensibile la caz: Dreamweaver va verifica dacă orice fișier din proiect poate avea o problemă sensibilă la caz când se încarcă pe server. Notificările vor fi afișate când utilizați: Site -> Verificați legăturile la nivel local. Puteți să o verificați dacă doriți. Eu personal nu las-o verificat ca am întotdeauna nume de fișiere în litere mici. Nu este recomandată litera superioară.
   • ascunzătoare: Bifați Activare cache.
6. În Informații de la distanță pagina, configurați-vă accesul FTP sau alt acces la un server de la distanță sau lăsați accesul la Nici unul.
7. În Server de testare selectați opțiunea care se referă la tipul / sistemul de fișiere pe care îl veți testa.
8. Controlul versiunii nu va fi folosit pentru acest exemplu, astfel încât să puteți lăsa martorul dacă nu este familiarizat cu acesta.
9. Deghizarea vă permite să plasați fișierele .psd, .fla și alte fișiere sursă în dosarul site-urilor dvs. și DW le va ignora atunci când încărcați / actualizați site-ul.
10. Note de proiectare sunt ideale pentru o echipă de web design care păstrează nota cu privire la modificările aduse fișierelor. Ea este verificată în mod implicit și este bine ca noi să folosim acest mod.
11. Părăsi Vizualizați coloana fișierului, A contribui, și Template-uri ca implicit.
12. Vioi pagina indică pur și simplu folderul Spry, care este inclus automat în Dreamweaver. Nu este nevoie să schimbăm acest lucru. După ce ați terminat fiecare setare, faceți clic pe O.K.

Examinați PHP în Dreamweaver

Deschideți acum un fișier PHP și faceți modificările necesare. Pentru a vizualiza acest fișier în Dreamweaver pur și simplu apăsați F12 iar rezultatele vor apărea în browserul dvs. implicit. Puteți modifica ce browser este utilizat în Editați | × -> Preferințe -> Previzualizare în browser. Acest lucru permite un timp mai rapid de editare-previzualizare, elimină nevoia de a introduce adrese URL lungi în bara de browser sau de a utiliza un alt software de tip server pentru a reda fișierele PHP, toate acestea economisind timp!

Asta e tot. Happy Dreamweaver'ing :-)

Nota editorului: Această postare este scrisă de Jesse Matlock pentru Hongkiat.com. In ultimii 6 ani, Jesse sa imersat in designul UI, dezvoltarea aplicatiilor si tendintele web. El este fondatorul și conducătorul de proiectare pentru o echipă de dezvoltare mică, deși foarte talentată, care se axează pe dezvoltarea aplicațiilor personalizate.